diff --git a/apps/web/src/app/about/page.tsx b/apps/web/src/app/about/page.tsx
index 44ce5f1..b8366ff 100644
--- a/apps/web/src/app/about/page.tsx
+++ b/apps/web/src/app/about/page.tsx
@@ -1,4 +1,5 @@
 import { FounderSignature } from "@/components/about/founder-signature";
+import { ContactForm } from "@/components/contact/contact-form";
 import { Header } from "@/components/layout/header";
 import { MobileNav } from "@/components/layout/mobile-nav";
 import { FaMapMarkerAlt, FaPhone, FaBuilding, FaExternalLinkAlt } from "react-icons/fa";
@@ -95,6 +96,14 @@ export default function AboutPage() {
           </div>
 
         </div>
+
+        <div id="contact" className="mt-16 border-t border-border/50 pt-16">
+          <h2 className="text-3xl font-bold mb-3 tracking-tight">Get in Touch</h2>
+          <p className="text-muted-foreground text-lg mb-12 max-w-2xl">
+            Have a project in mind? We'd love to hear about it.
+          </p>
+          <ContactForm />
+        </div>
       </div>
       <MobileNav />
     </main>
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 0db4236..97b8569 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
+import { DynamicFavicon } from "@/components/dynamic-favicon";
 import { Footer } from "@/components/layout/footer";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -75,6 +76,7 @@ export default function RootLayout({
             enableSystem
             disableTransitionOnChange
           >
+            <DynamicFavicon />
             <div className="relative z-10 flex flex-col min-h-screen">
                {children}
                <Footer />
diff --git a/apps/web/src/app/products/custom-websites/page.tsx b/apps/web/src/app/products/custom-websites/page.tsx
index 1e422b8..861ba7a 100644
--- a/apps/web/src/app/products/custom-websites/page.tsx
+++ b/apps/web/src/app/products/custom-websites/page.tsx
@@ -81,7 +81,7 @@ export default function CustomWebsitesPage() {
         </div>
 
         <div className="text-center">
-          <Link href="/about">
+          <Link href="/about#contact">
             <Button size="lg">Start a Project</Button>
           </Link>
         </div>
diff --git a/apps/web/src/app/products/webshops/page.tsx b/apps/web/src/app/products/webshops/page.tsx
index 1cabee5..788f9bd 100644
--- a/apps/web/src/app/products/webshops/page.tsx
+++ b/apps/web/src/app/products/webshops/page.tsx
@@ -73,7 +73,7 @@ export default function WebshopsPage() {
         </div>
 
         <div className="text-center">
-          <Link href="/about">
+          <Link href="/about#contact">
             <Button size="lg">Get in Touch</Button>
           </Link>
         </div>
diff --git a/apps/web/src/components/dynamic-favicon.tsx b/apps/web/src/components/dynamic-favicon.tsx
new file mode 100644
index 0000000..cf9bab8
--- /dev/null
+++ b/apps/web/src/components/dynamic-favicon.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { useEffect } from 'react';
+
+export function DynamicFavicon() {
+  const { resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    if (!resolvedTheme) return;
+
+    const variant = resolvedTheme === 'dark' ? 'dark' : 'light';
+
+    // Update all favicon link elements
+    const links = document.querySelectorAll<HTMLLinkElement>('link[rel="icon"], link[rel="shortcut icon"], link[rel="apple-touch-icon"]');
+    links.forEach((link) => {
+      const href = link.getAttribute('href');
+      if (href?.includes('/images/branding/favicon_')) {
+        link.href = href.replace(/favicon_(dark|light)/, `favicon_${variant}`);
+      }
+    });
+  }, [resolvedTheme]);
+
+  return null;
+}