diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9757f6f2..635c12d9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,12 @@
 import "@/styles/global.css";
 import AdminLink from "@/components/ui/admin-link";
 import { TailwindIndicator } from "@/components/ui/tailwind-indicator";
-import { ThemeSelector } from "@/components/ui/theme-selector";
 import settings from "@/content/settings/config.json";
 import client from "@/tina/__generated__/client";
 import { ThemeProvider } from "next-themes";
 import { Inter, Roboto_Flex } from "next/font/google";
 
+import { Footer } from "@/components/docs/footer";
 import { TabsLayout } from "@/components/docs/layout/tab-layout";
 import type React from "react";
 import { TinaClient } from "./tina-client";
@@ -19,7 +19,7 @@ const heading = Roboto_Flex({
   variable: "--heading-font",
 });
 
-const isThemeSelectorEnabled =
+export const isThemeSelectorEnabled =
   process.env.NODE_ENV === "development" ||
   process.env.NEXT_PUBLIC_ENABLE_THEME_SELECTION === "true";
 
@@ -44,7 +44,6 @@ export default function RootLayout({
           enableSystem={true}
           disableTransitionOnChange={false}
         >
-          {isThemeSelectorEnabled && <ThemeSelector />}
           <Content>
             <DocsMenu>{children}</DocsMenu>
           </Content>
@@ -60,6 +59,7 @@ const Content = ({ children }: { children?: React.ReactNode }) => (
     <TailwindIndicator />
     <div className="font-sans flex min-h-screen flex-col bg-background-color">
       <div className="flex flex-1 flex-col items-center">{children}</div>
+      <Footer />
     </div>
   </>
 );
diff --git a/src/components/docs/footer.tsx b/src/components/docs/footer.tsx
new file mode 100644
index 00000000..5d85c49f
--- /dev/null
+++ b/src/components/docs/footer.tsx
@@ -0,0 +1,33 @@
+import { isThemeSelectorEnabled } from "@/app/layout";
+import { ThemeSelector } from "@/components/ui/theme-selector";
+import Image from "next/image";
+import Link from "next/link";
+
+export const Footer = () => {
+  return (
+    <footer className="w-full py-8 mt-16 border-t border-gray-200 dark:border-gray-700">
+      <div className="max-w-[2560px] mx-auto px-4 flex items-center justify-center relative">
+        <Link
+          href="https://tina.io/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-3 hover:opacity-80 transition-opacity"
+        >
+          <Image
+            src="/svg/tina-icon-orange.svg"
+            alt="Tina Logo"
+            width={48}
+            height={48}
+            className="w-12 h-12"
+          />
+          <span className="text-base font-medium text-gray-600 dark:text-gray-400 uppercase tracking-wide">
+            Powered by TinaCMS
+          </span>
+        </Link>
+        <div className="absolute right-4">
+          {isThemeSelectorEnabled && <ThemeSelector />}
+        </div>
+      </div>
+    </footer>
+  );
+};
diff --git a/src/components/ui/theme-selector.tsx b/src/components/ui/theme-selector.tsx
index 94f76a11..5a032940 100644
--- a/src/components/ui/theme-selector.tsx
+++ b/src/components/ui/theme-selector.tsx
@@ -91,7 +91,7 @@ export const ThemeSelector = () => {
   };
 
   return (
-    <div className="fixed bottom-4 right-4 z-50 bg-neutral-surface p-1 rounded-lg shadow-lg">
+    <div className="bg-neutral-surface p-1 rounded-lg shadow-lg">
       <div className="relative" ref={dropdownRef}>
         <div className="flex items-center gap-2">
           <div className="relative" ref={tooltipRef}>