diff --git a/app/globals.css b/app/globals.css
index c8661f4..3015fe2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -141,7 +141,7 @@ body {
   background: url("../public/pattern.svg"),
     linear-gradient(rgba(58, 58, 58, 1) 0%, rgba(10, 10, 10, 1) 15%);
   background-blend-mode: color-burn;
-  background-size: 20%;
+  background-size: 22%;
 }
 
 .bg-parch {
diff --git a/app/layout.tsx b/app/layout.tsx
index f812fdb..0734c66 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import Header from "@/components/header";
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
+import { ThemeProvider } from "@/components/theme-provider";
 
 const Vazir = localFont({
   src: [
@@ -33,9 +34,16 @@ export default function RootLayout({
         className={`${Vazir.className} antialiased`}
         suppressHydrationWarning
       >
-        <Header />
-        {children}
-        <FooterSection />
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Header />
+          {children}
+          <FooterSection />
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/bun.lockb b/bun.lockb
index 1d2c749..ce5ccf3 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/about-podcast.tsx b/components/about-podcast.tsx
index d668c49..4ccd9ab 100644
--- a/components/about-podcast.tsx
+++ b/components/about-podcast.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 
 export function AboutPodcast() {
   return (
-    <section className="container bg-muted/50 py-12 md:py-16 lg:py-20">
+    <section className="backdrop-blur-xs py-12 md:py-16 lg:py-20">
       <div className="container px-4 md:px-6">
         <div className="grid gap-6 lg:grid-cols-[400px_1fr] lg:gap-12 xl:grid-cols-[450px_1fr]">
           <div className="space-y-4 ml-auto">
diff --git a/components/episode-cards.tsx b/components/episode-cards.tsx
index 8640f94..5c6591d 100644
--- a/components/episode-cards.tsx
+++ b/components/episode-cards.tsx
@@ -44,9 +44,7 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
 
   return (
     <section
-      className={`${
-        section === "main" ? "container py-12 md:py-16 lg:py-20" : ""
-      }`}
+      className={`${section === "main" ? "py-12 md:py-16 lg:py-20" : ""}`}
     >
       <div className={`${section === "main" ? "container px-4 md:px-6" : ""}`}>
         <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
diff --git a/components/footer-section.tsx b/components/footer-section.tsx
index a8bdd06..d9c79fb 100644
--- a/components/footer-section.tsx
+++ b/components/footer-section.tsx
@@ -1,10 +1,11 @@
 import { Github, Instagram, Twitter, Youtube } from "lucide-react";
 import Image from "next/image";
 import { Footer, FooterBottom, FooterColumn, FooterContent } from "./ui/footer";
+import Link from "next/link";
 
 export default function FooterSection() {
   return (
-    <footer className="w-full bg-background px-4">
+    <footer className="w-full bg-background">
       <div className="mx-auto">
         <Footer>
           <FooterContent className="container">
@@ -48,18 +49,30 @@ export default function FooterSection() {
                 می‌شود که شما را به دنبال کردن آن‌ها دعوت می‌کنیم.
               </span>
               <div className="flex gap-4">
-                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
+                <Link
+                  href={"/"}
+                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition"
+                >
                   <Github size={16} />
-                </div>
-                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
+                </Link>
+                <Link
+                  href={"/"}
+                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition"
+                >
                   <Twitter size={16} />
-                </div>
-                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
+                </Link>
+                <Link
+                  href={"/"}
+                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition"
+                >
                   <Instagram size={16} />
-                </div>
-                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
+                </Link>
+                <Link
+                  href={"/"}
+                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition"
+                >
                   <Youtube size={16} />
-                </div>
+                </Link>
               </div>
             </FooterColumn>
           </FooterContent>
diff --git a/components/header.tsx b/components/header.tsx
index 265421a..3ba0a6c 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -4,6 +4,8 @@ import { Button } from "@/components/ui/button";
 import { Menu, Search } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
+import { ModeToggle } from "./mode-toggle";
+import ToggleLanguage from "./toggle-language";
 
 export default function Header() {
   return (
@@ -18,6 +20,8 @@ export default function Header() {
             <Search />
             جستجو
           </Button>
+          <ModeToggle />
+          <ToggleLanguage />
         </div>
         <Link href={"/"} className="hidden sm:flex items-center">
           <Image src={"/logo.png"} width={30} height={30} alt="logo" />
diff --git a/components/mode-toggle.tsx b/components/mode-toggle.tsx
new file mode 100644
index 0000000..fc0aa64
--- /dev/null
+++ b/components/mode-toggle.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/components/podcast-hero.tsx b/components/podcast-hero.tsx
index b1b86f0..c2cab99 100644
--- a/components/podcast-hero.tsx
+++ b/components/podcast-hero.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 
 export function PodcastHero() {
   return (
-    <section className="container relative pt-20 pb-16 md:pt-36 md:pb-24">
+    <section className="relative pt-20 pb-16 md:pt-36 md:pb-24">
       <div className="container px-4 md:px-6">
         <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_450px]">
           <div className="flex flex-col justify-center space-y-4">
diff --git a/components/subscribe-section.tsx b/components/subscribe-section.tsx
index e312e0f..e5657d5 100644
--- a/components/subscribe-section.tsx
+++ b/components/subscribe-section.tsx
@@ -4,7 +4,7 @@ import { Headphones, Mail } from "lucide-react";
 
 export function SubscribeSection() {
   return (
-    <section className="container py-12 md:py-16 lg:py-20 border-b">
+    <section className="py-12 md:py-16 lg:py-20 border-b">
       <div className="container px-4 md:px-6">
         <div className="mx-auto max-w-2xl text-center">
           <div className="flex justify-center">
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
new file mode 100644
index 0000000..189a2b1
--- /dev/null
+++ b/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/components/toggle-language.tsx b/components/toggle-language.tsx
new file mode 100644
index 0000000..85402de
--- /dev/null
+++ b/components/toggle-language.tsx
@@ -0,0 +1,72 @@
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export default function ToggleLanguage() {
+  return (
+    <DropdownMenu dir="rtl">
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="flex items-center gap-2">
+          <GlobeIcon className="h-4 w-4" />
+          <span>فارسی</span>
+          <ChevronDownIcon className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[180px]">
+        <DropdownMenuLabel>انتخاب زبان</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup dir="ltr" defaultValue="en">
+          <DropdownMenuRadioItem value="en">English</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="fa">فارسی</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+}
+
+function GlobeIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+      <path d="M2 12h20" />
+    </svg>
+  );
+}
diff --git a/package.json b/package.json
index 3cb5597..d50261f 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,9 @@
     "@radix-ui/react-slot": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.482.0",
-    "next": "15.2.2",
+    "lucide-react": "^0.483.0",
+    "next": "15.2.3",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^3.0.2",
@@ -32,7 +33,7 @@
     "@tailwindcss/postcss": "^4",
     "tailwindcss": "^4",
     "eslint": "^9",
-    "eslint-config-next": "15.2.2",
+    "eslint-config-next": "15.2.3",
     "@eslint/eslintrc": "^3"
   }
 }