diff --git a/src/components/form.jsx b/src/components/form.jsx
index c2be3d67..946c63d7 100644
--- a/src/components/form.jsx
+++ b/src/components/form.jsx
@@ -68,11 +68,11 @@ const Form = () => {
   }, [userInput]);
 
   return (
-    <div className="bg-dark py-5 md:mb-0 lg:py-12 px-[14px] dark:bg-ash">
+    <div className="py-5 md:mb-0 lg:py-12 px-[14px] dark:bg-dark">
       <section className="block justify-center md:pb-16 md:flex md:flex-col lg:flex lg:flex-row items-center">
         <div className="md:w-full lg:pr-20 lg:w-1/2 flex flex-col">
-          <h2 className="lg:text-left text-center text-purple font-bold text-xl md:text-2xl lg:text-3xl  dark:text-deeppurple">
-            <span className="text-ash dark:text-dark">
+          <h2 className="lg:text-left text-center text-deeppurple font-bold text-xl md:text-2xl lg:text-3xl  dark:text-purple">
+            <span className="text-dark dark:text-ash ">
               Start by entering a slang,
             </span>{" "}
             and our dictionary will spit out an abbreviation.{" "}
@@ -105,7 +105,7 @@ const Form = () => {
               <input
                 type="text"
                 placeholder="Search slang full meaning..."
-                className="flex-1 w-[14rem] h-6 ml-2 border-none outline-none placeholder:text-gray bg-ash"
+                className="flex-1 w-[14rem] h-6 ml-2 border-none outline-none placeholder:text-black bg-ash"
                 value={userInput}
                 onChange={(e) =>
                   setUserInput(e.target.value.toLocaleLowerCase())
@@ -135,14 +135,14 @@ const Form = () => {
           )}
 
           {error && (
-            <div className="text-purple text-sm mt-2 dark:text-deeppurple">
+            <div className="text-deeppurple dark:text-purple text-sm mt-2 ">
               Oops. Some connection error occured.
             </div>
           )}
 
           {isUserInputBlank && (
             <div className="mt-4">
-              <p className="text-purple dark:text-deeppurple">
+              <p className="text-deeppurple dark:text-purple ">
                 Search bar 🔍 is Empty! Please input a slang.
               </p>
             </div>
@@ -150,22 +150,22 @@ const Form = () => {
 
           {errorMessage && (
             <div className="mt-4 p-3 lg:absolute">
-              <p className="text-purple dark:text-deeppurple">
+              <p className="text-deeppurple dark:text-purple">
                 This entry does not exist in our records as of yet :(
               </p>
-              <p className="text-ash mt-2 dark:text-dark">
+              <p className="text-dark mt-2 dark:text-ash">
                 1. You can help us add this by creating a{" "}
                 <a
                   href="https://github.com/Njong392/Abbreve"
-                  className=" text-purple dark:text-deeppurple">
+                  className=" text-deeppurple dark:text-purple">
                   github issue
                 </a>
               </p>
-              <p className="text-ash dark:text-dark w-3/4">
+              <p className="text-dark dark:text-ash w-3/4">
                 2. Or, you could fill out this{" "}
                 <a
                   href="https://t.co/mp86BLYBhq"
-                  className="text-purple dark:text-deeppurple">
+                  className="text-deeppurple dark:text-purple">
                   feedback form
                 </a>{" "}
                 and we will address the issue
diff --git a/src/components/hero.jsx b/src/components/hero.jsx
index 13720159..8c02f5b4 100644
--- a/src/components/hero.jsx
+++ b/src/components/hero.jsx
@@ -9,19 +9,19 @@ import Form from "./form";
 
 const Hero = () => {
   return (
-    <main className="bg-dark md:px-14 dark:bg-ash max-w-screen px-4 py-8 sm:px-6 lg:px-8 rounded lg:bg-snow lg:shadow-md">
+    <main className=" bg-ash md:px-14 dark:bg-dark max-w-screen px-4 py-8 sm:px-6 lg:px-8  lg:bg-snow lg:shadow-md">
       <header className="text-center lg:mt-12">
         <div className="text-4xl md:text-5xl lg:text-7xl mb-5 relative">
-          <h1 className="text-purple font-extrabold dark:text-deeppurple">
+          <h1 className="text-deeppurple font-extrabold dark:text-purple">
             Writing on the internet
           </h1>
-          <h1 className="text-ash font-extrabold mt-2 dark:text-dark">
+          <h1 className="text-dark dark:text-ash font-extrabold mt-2 ">
             is changing. IYKYK
           </h1>
           <div className="absolute right-28 bottom-9 xl:visible invisible">
             <div className="w-24 h-4 bg-purple relative -rotate-6">
               <div className="absolute top-[4px]">
-                <p className="text-ash text-sm font-semibold dark:text-dark">
+                <p className="text-dark dark:text-ash text-sm font-semibold ">
                   If You Know,
                 </p>
               </div>
@@ -30,7 +30,7 @@ const Hero = () => {
           <div className="absolute right-12 bottom-3 xl:visible invisible">
             <div className="right-9 w-20 h-4 bg-purple relative -rotate-6">
               <div className="absolute top-[3px]">
-                <p className="text-ash text-sm font-semibold dark:text-dark">
+                <p className="text-dark dark:text-ash text-sm font-semibold ">
                   You Know.
                 </p>
               </div>
@@ -51,25 +51,25 @@ const Hero = () => {
 
       <section className="block justify-center  items-center md:flex md:flex-col-reverse lg:flex lg:flex-row">
         <div className="lg:w-1/2 lg:px-10 pt-5">
-          <p className="text-purple font-bold text-2xl lg:text-3xl dark:text-deeppurple">
-            <span className="text-ash dark:text-dark">
+          <p className="text-deeppurple font-bold text-2xl lg:text-3xl dark:text-purple">
+            <span className="text-dark dark:text-ash ">
               Abbreve (A-bree-vay) is
             </span>{" "}
             an open source dictionary{" "}
-            <span className="text-ash dark:text-dark">for slang.</span>{" "}
+            <span className="text-dark dark:text-ash">for slang.</span>{" "}
           </p>
-          <p className="text-ash font-bold text-2xl lg:text-3xl mt-2 dark:text-dark pb-8">
+          <p className="text-dark dark:text-ash font-bold text-2xl lg:text-3xl mt-2  pb-8">
             Curated by the community, for the community.
           </p>
         </div>
 
-        <div className="border-2 p-4 rounded-lg border-purple relative md:mt-0 dark:border-deeppurple">
+        <div className="border-2 p-4 rounded-lg border-deeppurple relative md:mt-0 dark:border-purple">
           <div className="flex gap-2 items-center">
             <img src={nate} alt="" className="h-12 w-12 rounded-full" />
             <div>
               <a
                 href="https://twitter.com/Nateemerson/status/1567566265719599105?s=20&t=QAOQu1feHo07evNBHFvAIQ"
-                className="text-purple dark:text-deeppurple">
+                className="text-deeppurple dark:text-purple">
                 <p className="font-bold">Nate (DojoJOJO)</p>
                 <p className="text-sm">@Nateemerson</p>
               </a>
@@ -78,22 +78,22 @@ const Hero = () => {
 
           <p className="mt-2">
             <span className="text-gray">Replying to</span>{" "}
-            <span className="text-purple dark:text-deeppurple">
+            <span className="text-deeppurple dark:text-purple">
               @DunsinWebDev and @njongemy
             </span>
           </p>
-          <p className="mt-2 text-ash dark:text-dark">
+          <p className="mt-2 text-dark dark:text-ash ">
             idk wtf ur on about... ICYMI IMHO RTFM, KISS, SHIT or GTFO.
           </p>
           <p className="text-sm text-gray">
             18:31 . 07 Sep 22 .{" "}
-            <span className="text-purple dark:text-deeppurple">
+            <span className="text-deeppurple dark:text-purple">
               {" "}
               Twitter Web App
             </span>
           </p>
 
-          <div className="absolute w-32 border-2 border-purple rounded-lg p-2 -top-14 -right-4 bg-dark rotate-6 invisible lg:visible dark:border-deeppurple">
+          <div className="absolute w-32 border-2 border-deeppurple rounded-lg p-2 -top-14 -right-4 bg-dark rotate-6 invisible lg:visible dark:border-purple">
             <p className="text-ash text-xl font-bold ">
               Reading shouldn't feel like work.
             </p>
@@ -102,41 +102,41 @@ const Hero = () => {
       </section>
 
       <section className=" justify-center lg:gap-10 mt-10 items-center flex flex-col lg:flex-row">
-        <div className="border-2 p-4 rounded-lg border-purple  relative md:mt-0 dark:border-deeppurple w-96">
+        <div className="border-2 p-4 rounded-lg border-deeppurple  relative md:mt-0 dark:border-purple w-96">
           <div className="flex gap-2 items-center">
             <img src={emy} alt="" className="h-12 w-12 rounded-full" />
             <div>
               <a
                 href="https://twitter.com/njong_emy/status/1567561277135781888?s=20&t=QAOQu1feHo07evNBHFvAIQ"
-                className="text-purple dark:text-deeppurple">
+                className="text-deeppurple dark:text-purple">
                 <p className="font-bold">Emy 🦄⛅</p>
                 <p className="text-sm">@njong_emy</p>
               </a>
             </div>
           </div>
 
-          <p className="mt-5 text-ash dark:text-dark">
+          <p className="mt-5 text-dark dark:text-ash ">
             Do you find yourself googling the meaning of slang like hmu, lgtm,
             lfg etc ?
           </p>
 
           <div className="flex justify-between items-center mt-2">
-            <div className="h-8 w-3/4 bg-purple rounded-sm p-1 dark:bg-deeppurple">
+            <div className="h-8 w-3/4 bg-deeppurple rounded-sm p-1 dark:bg-purple">
               <p className="text-dark">Always 😢</p>
             </div>
-            <p className="text-ash dark:text-dark">84.8%</p>
+            <p className="text-dark dark:text-ash ">84.8%</p>
           </div>
 
           <div className="mt-2 flex justify-between items-center">
-            <div className="h-8 md:w-1/4 w-1/2 bg-purple rounded-sm p-1 dark:bg-deeppurple">
+            <div className="h-8 md:w-1/4 w-1/2 bg-deeppurple rounded-sm p-1 dark:bg-purple">
               <p className="text-dark">Never 🙂</p>
             </div>
-            <p className="text-ash dark:text-dark">15.2%</p>
+            <p className="text-dark dark:text-ash ">15.2%</p>
           </div>
 
           <p className="text-sm text-gray mt-2">
             18:11 . 07 Sep 22 .{" "}
-            <span className="text-purple dark:text-deeppurple">
+            <span className="text-deeppurple dark:text-purple">
               {" "}
               Twitter for Android
             </span>
@@ -144,11 +144,11 @@ const Hero = () => {
         </div>
 
         <div className="lg:w-1/2 lg:text-left mt-2 md:mt-3 lg:mt-0">
-          <h2 className="text-purple font-bold text-xl md:text-2xl xmd:text-2xl lg:text-3xl xl:text-3xl dark:text-deeppurple">
-            <span className="text-ash dark:text-dark">Googling</span> in between
-            conversations <span className="text-ash dark:text-dark">is</span>{" "}
+          <h2 className="text-deeppurple font-bold text-xl md:text-2xl xmd:text-2xl lg:text-3xl xl:text-3xl dark:text-purple">
+            <span className="text-dark dark:text-ash">Googling</span> in between
+            conversations <span className="text-dark dark:text-ash ">is</span>{" "}
             fast becoming{" "}
-            <span className="text-ash dark:text-dark">the new normal.</span>
+            <span className="text-dark dark:text-ash ">the new normal.</span>
           </h2>
         </div>
       </section>
diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx
index 8f8f12ce..775d5fa2 100644
--- a/src/components/navbar.jsx
+++ b/src/components/navbar.jsx
@@ -5,42 +5,25 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
 
 const Navbar = () => {
-  const defaultTheme = localStorage.getItem("theme") || "light";
-  const defaultToggle =
-    JSON.parse(localStorage.getItem("toggleButton")) || false;
-
-  const [theme, setTheme] = useState(defaultTheme);
-  const [toggleTheme, setToggleTheme] = useState(defaultToggle);
-
+  const deafultTheme = localStorage.getItem("isDarkMode") || false;
+  const [isDarkMode, setIsDarkMode] = useState(deafultTheme);
   const element = document.documentElement;
 
-  const handletheme = () => {
-    if (toggleTheme) {
-      setTheme("dark");
-    } else {
-      setTheme("light");
-    }
-
-    setToggleTheme(!toggleTheme);
-  };
   useEffect(() => {
-    switch (theme) {
-      case "dark":
+    switch (isDarkMode) {
+      case true:
         element.classList.add("dark");
-        localStorage.setItem("theme", "dark");
-        localStorage.setItem("toggleButton", JSON.stringify(false));
+        localStorage.setItem("isDarkMode", true);
         break;
-      case "light":
+      case false:
         element.classList.remove("dark");
-        localStorage.setItem("theme", "light");
-        localStorage.setItem("toggleButton", JSON.stringify(true));
+        localStorage.setItem("isDarkMode", false);
         break;
       default:
-        localStorage.removeItem("theme");
-
+        localStorage.removeItem("isDarkMode");
         break;
     }
-  }, [theme]);
+  }, [isDarkMode]);
 
   return (
     <nav className="px-4 py-4 sm:px-6 lg:px-8 bg-dark">
@@ -72,9 +55,9 @@ const Navbar = () => {
 
           <div className="rounded-lg">
             <button
-              onClick={handletheme}
+              onClick={() => setIsDarkMode(!isDarkMode)}
               className="w-8 h-8 leading-9 text-xl rounded-full m-1 text-deeppurple hover:text-ash hover:scale-110 ">
-              <FontAwesomeIcon icon={toggleTheme ? faMoon : faSun} />
+              <FontAwesomeIcon icon={isDarkMode ? faSun : faMoon} />
             </button>
           </div>
         </div>
@@ -82,5 +65,4 @@ const Navbar = () => {
     </nav>
   );
 };
-
 export default Navbar;