diff --git a/app/components/background.tsx b/app/components/background.tsx
index 44773ae..6612c5f 100644
--- a/app/components/background.tsx
+++ b/app/components/background.tsx
@@ -1,3 +1,4 @@
+import React, { useEffect, useRef, useState } from 'react';
 const BgLightGrid1 = () => {
   return (
     <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]" />
@@ -6,7 +7,7 @@ const BgLightGrid1 = () => {
 
 const BgLightGrid2 = () => {
   return (
-    <div className="relative h-full w-full bg-white">
+    <div className="relative h-full w-full bg-red">
       <div className="absolute h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
     </div>
   );
@@ -155,6 +156,497 @@ const BgDarkGrid3 = () => {
     </div>
   );
 };
+const BgDarkGrid4 = () => {
+  return (
+    <div className="relative h-full w-full bg-sky-200">
+    <div className="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
+  </div>
+  
+  );
+};
+const BgDarkGrid5 = () => {
+  return (
+    <div className="relative h-full w-full bg-red-300">
+    <div className="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
+  </div>
+  
+  
+  );
+};
+
+const BgDarkGrid7 = () => {
+  return (
+<div className="absolute inset-0 -z-10 h-full w-full bg-[#1e293b] bg-[radial-gradient(#334155_1px,transparent_1px)] [background-size:16px_16px] dark:bg-[#0f172a] dark:bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:16px_16px]">
+  <div className="absolute inset-0 bg-gradient-to-br from-[#1e293b] via-[#334155] to-[#475569] opacity-50" />
+</div>
+
+  );
+};
+const BgLightGridD1 = () => {
+  return (
+<div className="absolute inset-0 -z-10 h-full w-full bg-[#1e1e1e] bg-[linear-gradient(to_right,#8080801a_1px,transparent_1px),linear-gradient(to_bottom,#8080801a_1px,transparent_1px)] bg-[size:14px_24px]" />
+  );
+};
+const BgLightGridD2 = () => {
+  return (
+    <div className="relative h-full w-full bg-[rgb(255,200,200)]">
+    <div className="absolute h-full w-full bg-[radial-gradient(rgb(229,231,235)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,rgb(0,0,0)_70%,transparent_100%)]" />
+  </div>
+  );
+};
+const BgColorGrids = () => {
+ return (
+<div className="absolute inset-0 -z-10 h-full w-full bg-blue-100 bg-pattern">
+  <div className="absolute bottom-0 left-0 right-0 top-0 bg-radial bg-blue-100"></div>
+</div>
+  );
+};
+const BgColorGridsA1 = () => {
+ return (
+<div className="relative h-full w-full">
+  <div className="absolute top-0 left-0 z-[-2] h-full w-full bg-gradient-to-r from-pink-200 to-white"></div>
+  <div className="absolute top-0 right-0 z-[-2] h-full w-full bg-gradient-to-l from-pink-200 to-white"></div>
+  <div className="absolute bottom-0 left-0 z-[-2] h-full w-full bg-gradient-to-t from-pink-200 to-white"></div>
+  <div className="absolute bottom-0 right-0 z-[-2] h-full w-full bg-gradient-to-b from-pink-200 to-white"></div>
+</div>
+
+
+  );
+};
+const BgColorGridsA2 = () => {
+ return (
+<div className="relative h-full w-full">
+  <div className="absolute top-0 left-0 z-[-2] h-full w-full bg-gradient-to-r from-red-200 to-yellow-200"></div>
+  <div className="absolute top-0 right-0 z-[-2] h-full w-full bg-gradient-to-l from-blue-200 to-white"></div>
+  <div className="absolute bottom-0 left-0 z-[-2] h-full w-full bg-gradient-to-t from-yellow-200 to-black"></div>
+  <div className="absolute bottom-0 right-0 z-[-2] h-full w-full bg-gradient-to-b from-blue-200 to-white"></div>
+</div>
+
+  );
+};
+const BgColorGridsA3 = () => {
+ return (
+<div className="absolute top-0 -z-10 h-full w-full bg-white">
+  <div className="absolute bottom-auto left-auto right-0 top-0 h-[500px] w-[500px] -translate-x-[30%] translate-y-[20%] rounded-full bg-[rgba(109,244,173,0.5)] opacity-50 blur-[80px]"></div>
+</div>
+  );
+};
+const BgColorGridsA4 = () => {
+ return (
+<div className="absolute inset-0 -z-10 h-full w-full bg-black bg-[linear-gradient(to_right,#333_1px,transparent_1px),linear-gradient(to_bottom,#333_1px,transparent_1px)] bg-[size:6rem_4rem]">
+  <div className="absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(circle_800px_at_100%_200px,#ffffff,transparent)]"></div>
+</div>
+
+  );
+};
+const BgColorGridsA5 = () => {
+ return (
+<div className="absolute top-0 z-[-2] h-screen w-screen bg-black bg-[radial-gradient(100%_50%_at_50%_0%,rgba(255,255,255,0.8)_0%,rgba(255,342,203,0.5)_50%,rgba(0,0,0,0)_100%)]"></div>
+  );
+};
+const BgColorGridsA6 = () => {
+  return (
+    <div className="relative h-full w-full overflow-hidden">
+      <div
+        className="absolute inset-0 -z-10 h-full w-full bg-black animate-focus-move"
+        style={{
+          background: 'radial-gradient(25% 125% at 50% 10%, #ffffff 40%, #6a0dad 100%)',
+          backgroundSize: '200% 200%',
+          animation: 'focusMove 10s ease-in-out infinite',
+        }}
+      ></div>
+      <style>{`
+        @keyframes focusMove {
+          0% {
+            background-position: 0% 0%;
+          }
+          25% {
+            background-position: 100% 0%;
+          }
+          50% {
+            background-position: 100% 100%;
+          }
+          75% {
+            background-position: 0% 100%;
+          }
+          100% {
+            background-position: 0% 0%;
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+const BgColorGridsA7 = () => {
+ return (
+<div className="absolute inset-0 -z-10 h-full w-full bg-black [background:radial-gradient(25%_125%_at_50%_10%,#ffffff_0%,#ffffff_40%,#000000_100%)]"></div>
+  );
+};
+const BgColorGridsA8 = () => {
+  return (
+<div className="absolute inset-0 -z-10 h-full w-full bg-black [background:radial-gradient(25%_25%_at_10%_10%,#ffffff_40%,#add8e6_100%)]"></div>
+   );
+ };
+const BgColorGridsA9 = () => {
+  return (
+<div className="relative h-full w-full bg-black overflow-hidden">
+  {/* Background Gradient */}
+  <div className="absolute inset-0 -z-10 h-full w-full [background:radial-gradient(25%_25%_at_10%_10%,#ffffff_0%,#ffffff_40%,#1a1a1a_100%)]"></div>
+
+  {/* Particles */}
+  {[...Array(50)].map((_, i) => (
+    <div
+      key={i}
+      className="absolute bg-white rounded-full"
+      style={{
+        width: `${Math.random() * 5 + 2}px`,
+        height: `${Math.random() * 5 + 2}px`,
+        top: `${Math.random() * 100}%`,
+        left: `${Math.random() * 100}%`,
+        animation: `particleMove ${Math.random() * 5 + 2}s infinite linear`,
+        opacity: Math.random(),
+      }}
+    ></div>
+  ))}
+
+  <style jsx>{`
+    @keyframes particleMove {
+      0% {
+        transform: translateY(0) translateX(0);
+      }
+      100% {
+        transform: translateY(-100vh) translateX(0);
+      }
+    }
+  `}</style>
+</div>
+   );
+ };
+
+
+ const BgColorGridsA10: React.FC = () => {
+  return (
+    <div className="relative h-full w-full overflow-hidden">
+    <div className="absolute inset-0 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 animate-gradient"></div>
+    <style>
+      {`
+        @keyframes gradientAnimation {
+          0% {
+            background-position: 0% 0%;
+          }
+          50% {
+            background-position: 100% 100%;
+          }
+          100% {
+            background-position: 0% 0%;
+          }
+        }
+
+        .animate-gradient {
+          background: linear-gradient(45deg, #ff6f61, #d0e1f9, #6b5b95);
+          background-size: 300% 300%;
+          animation: gradientAnimation 10s ease infinite;
+        }
+      `}
+    </style>
+  </div>
+  );
+}; 
+export default BgColorGrids;
+const CrazyAnimatedBackground: React.FC = () => {
+  return (
+    <div className="relative h-full w-full overflow-hidden">
+      <div className="absolute inset-0 z-[-2] bg-black animate-crazy-background"></div>
+      <style>
+        {`
+          @keyframes crazyBackground {
+            0% {
+              background: radial-gradient(#ffffff33 1px, #00091d 1px);
+              background-size: 20px 20px;
+              transform: scale(1) rotate(0deg);
+            }
+            25% {
+              background: radial-gradient(#ff0000 1px, #000000 1px);
+              background-size: 50px 50px;
+              transform: scale(1.2) rotate(45deg);
+            }
+            50% {
+              background: radial-gradient(#00ff00 1px, #000000 1px);
+              background-size: 100px 100px;
+              transform: scale(1) rotate(90deg);
+            }
+            75% {
+              background: radial-gradient(#0000ff 1px, #000000 1px);
+              background-size: 150px 150px;
+              transform: scale(1.2) rotate(135deg);
+            }
+            100% {
+              background: radial-gradient(#ffffff33 1px, #00091d 1px);
+              background-size: 20px 20px;
+              transform: scale(1) rotate(180deg);
+            }
+          }
+
+          .animate-crazy-background {
+            animation: crazyBackground 10s linear infinite;
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+const WaterBloomBackground: React.FC = () => {
+  return (
+    <div className="relative h-full w-full overflow-hidden">
+      <div className="absolute inset-0 z-[-1]">
+        <div className="water-blooms">
+          {Array.from({ length: 50 }).map((_, index) => (
+            <div
+              key={index}
+              className="water-bloom"
+              style={{
+                left: `${Math.random() * 100}vw`,
+                top: `${Math.random() * 100}vh`,
+                width: `${Math.random() * 40 + 20}px`,
+                height: `${Math.random() * 40 + 20}px`,
+                animationDelay: `${Math.random() * 10}s`,
+                animationDuration: `${5 + Math.random() * 5}s`,
+              }}
+            ></div>
+          ))}
+        </div>
+      </div>
+      <style>
+        {`
+          .water-blooms {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+          }
+
+          .water-bloom {
+            position: absolute;
+            background-color: rgba(0, 150, 255, 0.6);
+            border-radius: 50%;
+            opacity: 0.6;
+            animation: floatUp 10s ease-in-out infinite;
+          }
+
+          @keyframes floatUp {
+            0% {
+              transform: translateY(0) scale(1);
+              opacity: 0.6;
+            }
+            50% {
+              transform: translateY(-100vh) scale(1.5);
+              opacity: 0.4;
+            }
+            100% {
+              transform: translateY(0) scale(1);
+              opacity: 0.6;
+            }
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+const CartoonCloudsBackground: React.FC = () => {
+  return (
+    <div className="relative h-full w-screen overflow-hidden">
+      <div className="absolute inset-0 z-[-1]">
+        <div className="background">
+          <div className="clouds">
+            {Array.from({ length: 10 }).map((_, index) => (
+              <div
+                key={index}
+                className="cloud"
+                style={{
+                  left: `${Math.random() * 100}vw`,
+                  top: `${Math.random() * 100}vh`,
+                  width: `${Math.random() * 150 + 100}px`,
+                  height: `${Math.random() * 60 + 60}px`,
+                  animationDelay: `${Math.random() * 10}s`,
+                  animationDuration: `${20 + Math.random() * 10}s`,
+                }}
+              ></div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <style>
+        {`
+          .background {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background-color: #829eeb; /* Light sky blue */
+          }
+
+          .clouds {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+          }
+
+          .cloud {
+            position: absolute;
+            background: #334dash;
+            border-radius: 100%;
+            box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
+            opacity: 0.9;
+            animation: floatClouds linear infinite;
+          }
+
+          @keyframes floatClouds {
+            0% {
+              transform: translateX(-160vw);
+            }
+            100% {
+              transform: translateX(130vw);
+            }
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+const Darkbg1 = () => {
+  return (
+<div className="absolute inset-0 -z-10 h-full 1e1e] bg-[linear-gradient(to_right,#2d2d6d_1px,transparent_1px),linear-gradient(to_bottom,#2d2d2d_1px,transparent_1px)] bg-[size:190px_196px]" />
+
+  );
+};
+const Darkbg2 = () => {
+  return (
+<div className="absolute inset-0 -z-10 h-full w-full bg-[#1e1e1e] bg-[linear-gradient(to_right,#2d2d2d_1px,transparent_1px),linear-gradient(to_bottom,#2d2d2d_1px,transparent_1px)] bg-[size:6rem_4rem]">
+  <div className="absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(circle_500px_at_50%_100px,#C9EBFF,transparent)]"></div>
+</div>
+
+  );
+};
+const Lightbg1 = () => {
+  return (
+<div className="absolute inset-0 -z-10 h-full w-full px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,#e0f7fa_40%,#dcf235_100%)]"></div>
+
+
+  );
+};
+const Lightbg2 = () => {
+  return (
+<div className="absolute inset-0 -z-10 h-full w-full px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,#ffebee_40%,#ff9800_100%)]"></div>
+  );
+};
+const Lightbg3 = () => {
+  return (
+<div className="absolute inset-0 -z-10 h-full w-full px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,#ffffff_40%,#000000_100%)]"></div>
+  );
+};
+const Lightbg4 = () => {
+  return (
+<div className="relative h-full w-full bg-slate-50">
+  <div className="absolute bottom-0 left-[-20%] right-0 top-[-10%] h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(255,87,34,.15),rgba(255,255,255,0))]"></div>
+  <div className="absolute bottom-0 right-[-20%] top-[-10%] h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(255,87,34,.15),rgba(255,255,255,0))]"></div>
+</div>
+
+  );
+};
+const Lightbg5 = () => {
+  return (
+
+<div className="absolute inset-0 -z-10 h-full bg-[linear-gradient(to_right,#2d2d2d_20px,transparent_20px),linear-gradient(to_bottom,#2d2d2d_20px,transparent_20px),linear-gradient(to_right,#fff_1px,transparent_1px),linear-gradient(to_bottom,#fff_1px,transparent_1px)] bg-[size:0px_10px,100px_100px,50px_50px,50px_50px] bg-[position:0_0,0_0,0_0,0_0]"></div>
+
+  );
+};
+const Lightbg6 = () => {
+  return (
+<div className="relative h-full w-full overflow-hidden">
+  <div className="absolute inset-0 bg-gradient-to-r from-green-300 via-yellow-400 to-green-300 animate-gradient"></div>
+  <style>
+    {`     @keyframes gradientAnimation {
+      0% {
+        background-position: 0% 0%;
+      }
+      50% {
+        background-position: 100% 100%;
+      }
+      100% {
+        background-position: 0% 0%;
+      }
+    }
+
+    .animate-gradient {
+      background: linear-gradient(45deg, rgba(22, 255, 102, 0.6), rgba(255, 255, 255, 0.3), rgba(222, 255, 102, 0.6));
+      background-size: 300% 300%;
+      animation: gradientAnimation 10s ease infinite;
+    }`}
+
+  </style>
+</div>
+
+
+  );
+};
+const Lightbg7 = () => {
+  return (
+
+<div className="relative h-full w-full">
+
+  <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f5f5f5_1px,transparent_1px),linear-gradient(to_bottom,#f5f5f5_1px,transparent_1px)] bg-[size:6rem_4rem]"></div>
+  
+
+  <div className="absolute inset-0 bg-[radial-gradient(circle_800px_at_100%_200px,#FF7757,transparent)]"></div>
+  <div className="absolute inset-0 bg-[radial-gradient(circle_800px_at_20%_80px,#FF63B9,transparent)]"></div>
+</div>
+
+  );
+};
+const Lightbg8 = () => {
+  return (
+
+<div className="relative h-full w-full">
+ 
+  <div className="absolute inset-0 -z-10 bg-white bg-[linear-gradient(to_right,#f5f5f5_1px,transparent_1px),linear-gradient(to_bottom,#f5f5f5_1px,transparent_1px)] bg-[size:6rem_4rem]"></div>
+  
+  
+  <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,#8FFFB0,transparent)]"></div>
+  <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,#EAFF45,transparent)]"></div>
+</div>
+
+
+  );
+};
+const Lightbg9 = () => {
+  return (
+<div className="relative h-full w-full overflow-hidden">
+
+  <div className="absolute inset-0 -z-10 bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]"></div>
+  
+
+  <div className ="absolute inset-0 bg-[radial-gradient(circle_at_center,#FF7112,transparent)]"></div>
+  <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,#FFF991,transparent)]"></div>
+
+
+  <div className="absolute inset-0">
+    <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,#FFF991,transparent)] opacity-60 mix-blend-multiply"></div>
+    <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,#FF7112,transparent)] opacity-30 mix-blend-multiply"></div>
+  </div>
+</div>
+
+
+  );
+};
+const Lightbg10 = () => {
+  return (
+<div className="absolute top-0 z-[-2] h-screen w-screen bg-white bg-[radial-gradient(100%_50%_at_50%_0%,#FF4D00_0,#FF4D00_50%,transparent_100%)]"></div>
+
+
+
+  );
+};
 
 export const BACKGROUND_OPTIONS = [
   {
@@ -267,4 +759,165 @@ export const BACKGROUND_OPTIONS = [
     component: <BgDarkGrid3 />,
     theme: 'dark',
   },
-] as const;
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgDarkGrid4 />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgDarkGrid5 />,
+    theme: 'dark',
+  },
+  // {
+  //   name: 'Background Dark Grid 3',
+  //   component: <BgDarkSpider />,
+  //   theme: 'dark',
+  // },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgDarkGrid7 />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgLightGridD1  />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgLightGridD2  />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgColorGrids  />,
+    theme: 'light',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgColorGridsA1  />,
+    theme: 'light',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgColorGridsA2  />,
+    theme: 'light',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgColorGridsA3  />,
+    theme: 'light',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgColorGridsA4  />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgColorGridsA5  />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgColorGridsA6  />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgColorGridsA7  />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgColorGridsA8  />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgColorGridsA9  />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <BgColorGridsA10  />,
+    theme: 'light',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <CrazyAnimatedBackground  />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <WaterBloomBackground />,
+    theme: 'ligth',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <CartoonCloudsBackground />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <Darkbg1 />,
+    theme: 'ligth',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <Darkbg2 />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <Lightbg1 />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <Lightbg2 />,
+    theme: 'dark',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <Lightbg3 />,
+    theme: 'ligth',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <Lightbg4 />,
+    theme: 'ligth',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <Lightbg5 />,
+    theme: 'ligth',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <Lightbg6 />,
+    theme: 'ligth',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <Lightbg7 />,
+    theme: 'light',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <Lightbg8 />,
+    theme: 'light',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <Lightbg9/>,
+    theme: 'ligth',
+  },
+  {
+    name: 'Background Dark Grid 3',
+    component: <Lightbg10 />,
+    theme: 'dark',
+  },
+
+] as const;
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index ab50ffa..e0461e2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,20 +1,27 @@
 'use client';
-import { ArrowRight, Github, Twitter } from 'lucide-react';
+import { ArrowRight, Github, Twitter, Sun, Moon } from 'lucide-react';
+
 import { BACKGROUND_OPTIONS } from './components/background';
 import { Button } from '@/components/ui/button';
 import Playground from './components/playground';
-import { useState } from 'react';
+import { useState, ReactNode } from 'react';
 import { Toaster } from 'sonner';
 
+type Theme = 'light' | 'dark';
+
 export default function Home() {
-  const [preview, setPreview] = useState<null | React.ReactNode>(null);
-  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  const [preview, setPreview] = useState<ReactNode | null>(null);
+  const [theme, setTheme] = useState<Theme>('light');
 
   const resetBg = () => {
     setPreview(null);
     setTheme('light');
   };
 
+  const toggleTheme = () => {
+    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
   return (
     <>
       <Toaster />
@@ -24,16 +31,20 @@ export default function Home() {
         </div>
         <div className="relative mx-auto h-screen w-full max-w-7xl px-6 md:px-8 lg:px-12">
           <header className="flex items-center justify-between py-8">
-            <div />
-            <nav className="flex gap-6">
+            <div>
+              <h1 className={`font-semibold text-md px-3 ${theme === 'dark' ? 'text-white' : 'text-black'}`}>
+                Modern Bg
+              </h1>
+            </div>
+            <nav className="flex items-center gap-6">
               <a
-                href="https://twitter.com/Ibelick"
+                href="https://twitter.com/MK__0168"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="inline-flex"
               >
                 <Twitter
-                  className="h-6 w-6 text-neutral-800 transition-colors hover:text-neutral-600 dark:text-neutral-200 dark:hover:text-neutral-400"
+                  className={`h-6 w-6 ${theme === 'dark' ? 'text-gray-200 hover:text-gray-400' : 'text-gray-800 hover:text-gray-600'}`}
                   strokeWidth={1.5}
                 />
               </a>
@@ -44,10 +55,20 @@ export default function Home() {
                 className="inline-flex"
               >
                 <Github
-                  className="h-6 w-6 text-neutral-800 transition-colors hover:text-neutral-600 dark:text-neutral-200 dark:hover:text-neutral-400"
+                  className={`h-6 w-6 ${theme === 'dark' ? 'text-gray-200 hover:text-gray-400' : 'text-gray-800 hover:text-gray-600'}`}
                   strokeWidth={1.5}
                 />
               </a>
+              <div className="relative">
+                <Button
+                  variant="outline"
+                  onClick={toggleTheme}
+                  className={`flex items-center gap-2 ${theme === 'dark' ? 'text-white' : 'text-black'}`}
+                >
+                  {theme === 'light' ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
+                  <span>{theme === 'light' ? 'Dark Mode' : 'Light Mode'}</span>
+                </Button>
+              </div>
             </nav>
           </header>
           <div className="pt-8">
@@ -60,13 +81,13 @@ export default function Home() {
                   className="inline-flex"
                 >
                   <span className="relative inline-block overflow-hidden rounded-full p-[1px]">
-                    <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#a9a9a9_0%,#0c0c0c_50%,#a9a9a9_100%)] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#171717_0%,#737373_50%,#171717_100%)]" />
-                    <div className="inline-flex h-full w-full cursor-pointer justify-center rounded-full bg-white px-3 py-1 text-xs font-medium leading-5 text-slate-600 backdrop-blur-xl dark:bg-black dark:text-slate-200">
+                    <span className={`absolute inset-[-1000%] animate-[spin_2s_linear_infinite] ${theme === 'dark' ? 'bg-[conic-gradient(from_90deg_at_50%_50%,#171717_0%,#737373_50%,#171717_100%)]' : 'bg-[conic-gradient(from_90deg_at_50%_50%,#a9a9a9_0%,#0c0c0c_50%,#a9a9a9_100%)]'}`} />
+                    <div className={`inline-flex h-full w-full cursor-pointer justify-center rounded-full ${theme === 'dark' ? 'bg-black text-gray-200' : 'bg-white text-gray-600'} px-3 py-1 text-xs font-medium leading-5 backdrop-blur-xl`}>
                       New snippets ⚡️
-                      <span className="inline-flex items-center pl-2 text-black dark:text-white">
+                      <span className={`inline-flex items-center pl-2 ${theme === 'dark' ? 'text-white' : 'text-black'}`}>
                         Read more{' '}
                         <ArrowRight
-                          className="pl-0.5 text-black dark:text-white"
+                          className={`pl-0.5 ${theme === 'dark' ? 'text-white' : 'text-black'}`}
                           size={16}
                         />
                       </span>
@@ -74,14 +95,14 @@ export default function Home() {
                   </span>
                 </a>
               </div>
-              <h2 className="text-center text-3xl font-medium text-gray-900 dark:text-gray-50 sm:text-6xl">
+              <h2 className={`text-center text-3xl font-medium ${theme === 'dark' ? 'text-gray-50' : 'text-gray-900'} sm:text-6xl`}>
                 Collection of modern,{' '}
-                <span className="animate-text-gradient inline-flex bg-gradient-to-r from-neutral-900 via-slate-500 to-neutral-500 bg-[200%_auto] bg-clip-text leading-tight text-transparent dark:from-neutral-100 dark:via-slate-400 dark:to-neutral-400">
+                <span className={`animate-text-gradient inline-flex bg-gradient-to-r ${theme === 'dark' ? 'from-neutral-100 via-slate-600 to-neutral-400' : 'from-neutral-900 via-slate-500 to-neutral-500'} bg-[200%_auto] bg-clip-text leading-tight text-transparent`}>
                   background snippets
                 </span>
               </h2>
-              <p className="mt-6 text-center text-lg leading-6 text-gray-600 dark:text-gray-200">
-                Ready-to-use, simply copy and paste into your next project. All
+              <p className={`mt-6 text-center text-lg leading-6 ${theme === 'dark' ? 'text-gray-200' : 'text-gray-600'}`}>
+                50+ Ready-to-use, simply copy and paste into your next project. All
                 snippets crafted with Tailwind CSS and{' '}
                 <span className="cursor-wait opacity-70">Vanilla CSS</span> for
                 easy integration.
@@ -94,8 +115,8 @@ export default function Home() {
                   className="inline-flex items-center"
                 >
                   <Button>
-                    Go to GitHub <ArrowRight className="pl-0.5" size={16} />
-                  </Button>{' '}
+                    Go to Github <ArrowRight className="pl-0.5" size={16} />
+                  </Button>
                 </a>
                 <Button variant="secondary" onClick={resetBg}>
                   Reset background
@@ -105,20 +126,18 @@ export default function Home() {
           </div>
           <div className="overflow-hidden px-4 pb-20 pt-52 md:px-10">
             <div className="grid grid-cols-1 gap-6 pb-6 md:grid-cols-2 lg:grid-cols-4">
-              {BACKGROUND_OPTIONS.map((background, index) => {
-                return (
-                  <Playground
-                    key={index}
-                    setPreview={setPreview}
-                    theme={background.theme}
-                    setTheme={setTheme}
-                  >
-                    {background.component}
-                  </Playground>
-                );
-              })}
+              {BACKGROUND_OPTIONS.map((background, index) => (
+                <Playground
+                  key={index}
+                  setPreview={setPreview}
+                  theme={background.theme as Theme} // Ensure theme is of type 'Theme'
+                  setTheme={setTheme}
+                >
+                  {background.component}
+                </Playground>
+              ))}
             </div>
-            <div className="inline-flex max-w-2xl rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-900 dark:border-neutral-900 dark:bg-black dark:text-neutral-200">
+            <div className={`inline-flex max-w-2xl rounded-md border ${theme === 'dark' ? 'border-neutral-900 bg-black text-neutral-200' : 'border-neutral-200 bg-white text-neutral-900'} p-2 text-sm`}>
               {`These backgrounds are made for a full page background. The preview
               can be different from the actual result. Click on preview to test
               it. And don't forget to tweak it to your needs.`}
@@ -126,15 +145,15 @@ export default function Home() {
           </div>
           <footer>
             <div className="flex items-center justify-center py-8">
-              <span className="text-sm text-neutral-800 dark:text-neutral-200">
+              <span className={`text-sm ${theme === 'dark' ? 'text-gray-200' : 'text-neutral-800'}`}>
                 Made by
                 <a
-                  href="https://twitter.com/Ibelick"
+                  href="https://twitter.com/MK__0168"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="ml-1 text-neutral-950 dark:text-neutral-100"
+                  className={`ml-1 ${theme === 'dark' ? 'text-gray-100' : 'text-neutral-950'}`}
                 >
-                  @Ibelick
+                  @Mk016
                 </a>
               </span>
             </div>