diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index e5a3b55..0f53dc8 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -24,8 +24,8 @@ const MenuItem = ({ href, label }: { href: string; label: string }) => {
 
 export const Navigation = () => {
   return (
-    <nav className="bg-white shadow dark:bg-gray-800">
-      <div className="container mx-auto flex items-center justify-center p-6 capitalize text-gray-600 dark:text-gray-300">
+    <nav className=" bg-gray-800 shadow">
+      <div className="container mx-auto flex items-center justify-center p-6 capitalize  text-gray-300">
         <MenuItem href="/" label="home" />
         <MenuItem href="/pricing" label="pricing" />
       </div>
diff --git a/src/components/pricing-list.tsx b/src/components/pricing-list.tsx
index 1498aa5..e630931 100644
--- a/src/components/pricing-list.tsx
+++ b/src/components/pricing-list.tsx
@@ -10,12 +10,12 @@ export const PricingList = () => {
   const [selectedPlan, setSelectedPlan] = useState("pro");
 
   return (
-    <div className="bg-white dark:bg-gray-900">
+    <div className=" bg-gray-900">
       <div className="container mx-auto px-6 py-8">
-        <p className="text-center text-xl text-gray-500 dark:text-gray-300">
+        <p className="text-center text-xl  text-gray-300">
           Lorem ipsum dolor sit amet consectetur adipisicing elit.
         </p>
-        <h2 className="mt-4 text-center text-3xl font-semibold capitalize text-gray-800 dark:text-white lg:text-4xl">
+        <h2 className="mt-4 text-center text-3xl font-semibold capitalize  text-white lg:text-4xl">
           Pricing Plans
         </h2>
 
diff --git a/src/components/toggle.tsx b/src/components/toggle.tsx
index 7b9530a..efe3d15 100644
--- a/src/components/toggle.tsx
+++ b/src/components/toggle.tsx
@@ -16,10 +16,8 @@ export const Toggle = ({
         className="peer sr-only"
         onClick={onClick}
       />
-      <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"></div>
-      <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
-        {label}
-      </span>
+      <div className="peer h-6 w-11 rounded-full border-gray-600 bg-gray-700 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white  peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-800"></div>
+      <span className="ml-3 text-sm font-medium text-gray-300">{label}</span>
     </label>
   );
 };