diff --git a/apps/web/components/Footer.js b/apps/web/components/Footer.js
index c285051d..82ace450 100644
--- a/apps/web/components/Footer.js
+++ b/apps/web/components/Footer.js
@@ -1,10 +1,196 @@
+import React from 'react'
 import styled from '@emotion/styled'
 import { themeColors } from './settings'
+import Logo from './Logo'
+import { Link } from './Button'
+import { FaTwitter, FaGithub, FaFacebookF, FaLinkedinIn } from 'react-icons/fa'
 
-export default styled.footer`
+const FooterContainer = styled.footer`
   width: 100%;
-  background-color: ${themeColors.light};
+  background-color: ${themeColors.dark};
+  color: ${themeColors.light};
+  padding: 3em 1em;
+  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
+`
+
+const FooterContent = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+`
+
+const FooterColumns = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+`
+
+const FooterColumn = styled.div`
+  flex: 1;
+  min-width: 250px;
+  margin: 1em 0;
+`
+
+const FooterTitle = styled.h4`
+  margin-bottom: 1em;
+  color: ${themeColors.primary};
+`
+
+const FooterLink = styled(Link)`
+  display: block;
+  color: ${themeColors.light};
+  text-decoration: none;
+  margin: 0.5em 0;
+  transition: color 0.3s;
+
+  &:hover {
+    color: ${themeColors.primary};
+  }
+`
+
+const SocialIcons = styled.div`
+  display: flex;
+  margin-top: 1em;
+`
+
+const SocialIcon = styled.a`
+  width: 40px;
+  height: 40px;
+  margin-right: 0.5em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: ${themeColors.light};
+  background-color: ${themeColors.lightGrey};
+  border-radius: 50%;
+  transition: background-color 0.3s, color 0.3s;
+  text-decoration: none;
+
+  &:hover {
+    background-color: ${themeColors.primary};
+    color: #fff;
+  }
+`
+
+const NewsletterForm = styled.form`
+  display: flex;
+  flex-direction: column;
+`
+
+const NewsletterInput = styled.input`
+  padding: 0.5em;
+  border: 1px solid ${themeColors.grey};
+  border-radius: 4px;
+  margin-bottom: 1em;
+`
+
+const NewsletterButton = styled.button`
+  padding: 0.5em;
+  color: #000;
+  background-color: ${themeColors.primary};
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: ${themeColors.secondary};
+  }
+`
+
+const CopyRight = styled.p`
   text-align: center;
-  padding-bottom: 3em;
-  padding-top: 1em;
+  margin-top: 2em;
+  color: ${themeColors.grey};
+  font-size: 0.8em;
 `
+
+function Footer() {
+  return (
+    <FooterContainer>
+      <FooterContent>
+        <FooterColumns>
+          {/* Company Info */}
+          <FooterColumn>
+            <Logo size="60px" iso={false} />
+            <p>
+              Reactour helps you create guided tours in your React apps with ease.
+            </p>
+            {/* Social Media Icons */}
+            <SocialIcons>
+              <SocialIcon
+                href="https://twitter.com/elrumordelaluz"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Twitter"
+              >
+                <FaTwitter />
+              </SocialIcon>
+              <SocialIcon
+                href="https://github.com/elrumordelaluz/reactour"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="GitHub"
+              >
+                <FaGithub />
+              </SocialIcon>
+              <SocialIcon
+                href="https://facebook.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Facebook"
+              >
+                <FaFacebookF />
+              </SocialIcon>
+              <SocialIcon
+                href="https://linkedin.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="LinkedIn"
+              >
+                <FaLinkedinIn />
+              </SocialIcon>
+            </SocialIcons>
+          </FooterColumn>
+
+          {/* Navigation Links */}
+          <FooterColumn>
+            <FooterTitle>Quick Links</FooterTitle>
+            <FooterLink
+              href="https://docs.react.tours"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Documentation
+            </FooterLink>
+            <FooterLink
+              href="https://github.com/elrumordelaluz/reactour"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitHub Repository
+            </FooterLink>
+            <FooterLink href="/about">About Us</FooterLink>
+            <FooterLink href="/contact">Contact Us</FooterLink>
+          </FooterColumn>
+
+          {/* Newsletter Subscription */}
+          <FooterColumn>
+            <FooterTitle>Newsletter</FooterTitle>
+            <p>Subscribe to our newsletter for the latest updates.</p>
+            <NewsletterForm>
+              <NewsletterInput type="email" placeholder="Your email address" />
+              <NewsletterButton type="submit">Subscribe</NewsletterButton>
+            </NewsletterForm>
+          </FooterColumn>
+        </FooterColumns>
+        {/* Copyright */}
+        <CopyRight>
+          © {new Date().getFullYear()} Reactour. All rights reserved.
+        </CopyRight>
+      </FooterContent>
+    </FooterContainer>
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/apps/web/components/Home.tsx b/apps/web/components/Home.tsx
index a2171116..da1922a9 100644
--- a/apps/web/components/Home.tsx
+++ b/apps/web/components/Home.tsx
@@ -409,45 +409,7 @@ export default function Home() {
         </Link>
       </Scrollable>
 
-      <Footer>
-        <Logo size="20vw" iso={false} />
-        <Text size=".7em">
-          <span data-tut="reactour__scroll">
-            Made with{' '}
-            <span role="img" aria-label="heart">
-              ❤️
-            </span>
-          </span>{' '}
-          by{' '}
-          <Link
-            href="https://twitter.com/elrumordelaluz"
-            target="_blank"
-            rel="noopener noreferrer"
-            color="white"
-            nospaces
-          >
-            @elrumordelaluz
-          </Link>{' '}
-          ·{' '}
-          <Link
-            href="https://docs.react.tours"
-            target="_blank"
-            rel="noopener noreferrer"
-            nospaces
-          >
-            Documentation
-          </Link>{' '}
-          ·{' '}
-          <Link
-            href="https://github.com/elrumordelaluz/reactour"
-            target="_blank"
-            rel="noopener noreferrer"
-            nospaces
-          >
-            Github
-          </Link>
-        </Text>
-      </Footer>
+<Footer />
     </>
   )
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index d44a1bac..eeb5a1df 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -24,7 +24,8 @@
     "next": "14.2.15",
     "react": "18.3.1",
     "react-device-detect": "^2.2.3",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@reactour/tsconfig": "*",