diff --git a/web/app/components/apps/footer.tsx b/web/app/components/apps/footer.tsx
index 7bee272342..18b7779651 100644
--- a/web/app/components/apps/footer.tsx
+++ b/web/app/components/apps/footer.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Link from 'next/link'
-import { RiDiscordFill, RiGithubFill } from '@remixicon/react'
+import { RiCloseLine, RiDiscordFill, RiGithubFill } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 
 type CustomLinkProps = {
@@ -26,9 +26,24 @@ const CustomLink = React.memo(({
 
 const Footer = () => {
   const { t } = useTranslation()
+  const [isVisible, setIsVisible] = useState(true)
+
+  const handleClose = () => {
+    setIsVisible(false)
+  }
+
+  if (!isVisible)
+    return null
 
   return (
-    <footer className='shrink-0 grow-0 px-12 py-6'>
+    <footer className='shrink-0 grow-0 px-12 py-2 relative'>
+      <button
+        onClick={handleClose}
+        className='absolute top-2 right-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full transition-colors duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-800'
+        aria-label="Close footer"
+      >
+        <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+      </button>
       <h3 className='text-gradient text-xl font-semibold leading-tight'>{t('app.join')}</h3>
       <p className='system-sm-regular mt-1 text-text-tertiary'>{t('app.communityIntro')}</p>
       <div className='mt-3 flex items-center gap-2'>