diff --git a/Technodes/src/App.jsx b/Technodes/src/App.jsx
index 945aa20..9fc1cc4 100644
--- a/Technodes/src/App.jsx
+++ b/Technodes/src/App.jsx
@@ -5,11 +5,13 @@ import Error from "./Pages/Error";
 
 export default function App() {
   return (
-    <BrowserRouter basename="/">
-      <Routes>
-        <Route path="/" element={<Home />}></Route>
-        <Route path="/Error" element={<Error />}></Route>
-      </Routes>
-    </BrowserRouter>
+    <div>
+      <BrowserRouter basename="/">
+        <Routes>
+          <Route path="/" element={<Home />}></Route>
+          <Route path="/Error" element={<Error />}></Route>
+        </Routes>
+      </BrowserRouter>
+    </div>
   );
 }
diff --git a/Technodes/src/Pages/Home.jsx b/Technodes/src/Pages/Home.jsx
index 373c91b..dcc6a27 100644
--- a/Technodes/src/Pages/Home.jsx
+++ b/Technodes/src/Pages/Home.jsx
@@ -7,13 +7,13 @@ import Footer from "../components/Footer";
 
 function Home() {
   return (
-    <>
+    <div className="bg-primary">
       <Navbar />
       <HeroSection />
       <NewsLetter />
       <FAQ />
       <Footer />
-    </>
+    </div>
   );
 }
 
diff --git a/Technodes/src/components/FAQ.jsx b/Technodes/src/components/FAQ.jsx
index c362953..7871400 100644
--- a/Technodes/src/components/FAQ.jsx
+++ b/Technodes/src/components/FAQ.jsx
@@ -3,7 +3,7 @@ import React from "react";
 export default function FAQ() {
   return (
     <div>
-      <section className="text-white bg-gray-900">
+      <section className="text-textcolor bg-primary">
         <div className="container px-5 py-24 mx-auto">
           <div className="text-center mb-20">
             <h1 className="sm:text-3xl text-2xl font-medium text-center title-font mb-4">
diff --git a/Technodes/src/components/Footer.jsx b/Technodes/src/components/Footer.jsx
index 4beb18f..46c4757 100644
--- a/Technodes/src/components/Footer.jsx
+++ b/Technodes/src/components/Footer.jsx
@@ -3,14 +3,14 @@ import React from "react";
 export default function Footer() {
   return (
     <div>
-      <footer class="bg-white dark:bg-gray-900">
+      <footer class="bg-primary ">
         <div class="mx-auto w-full max-w-screen-xl">
           <div class="grid grid-cols-2 gap-8 px-4 py-6 lg:py-8 md:grid-cols-4">
             <div>
-              <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
+              <h2 class="mb-6 text-sm font-semibold text-textcolor uppercase">
                 Company
               </h2>
-              <ul class="text-gray-500 dark:text-gray-400 font-medium">
+              <ul class="text-textdark font-medium">
                 <li class="mb-4">
                   <a href="#" class=" hover:underline">
                     About
@@ -34,10 +34,10 @@ export default function Footer() {
               </ul>
             </div>
             <div>
-              <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
+              <h2 class="mb-6 text-sm font-semibold text-textcolor uppercase">
                 Help center
               </h2>
-              <ul class="text-gray-500 dark:text-gray-400 font-medium">
+              <ul class="text-textdark font-medium">
                 <li class="mb-4">
                   <a href="#" class="hover:underline">
                     Discord Server
@@ -61,10 +61,10 @@ export default function Footer() {
               </ul>
             </div>
             <div>
-              <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
+              <h2 class="mb-6 text-sm font-semibold text-textcolor uppercase">
                 Legal
               </h2>
-              <ul class="text-gray-500 dark:text-gray-400 font-medium">
+              <ul class="text-textdark font-medium">
                 <li class="mb-4">
                   <a href="#" class="hover:underline">
                     Privacy Policy
@@ -83,10 +83,10 @@ export default function Footer() {
               </ul>
             </div>
             <div>
-              <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
+              <h2 class="mb-6 text-sm font-semibold text-textcolor uppercase ">
                 Download
               </h2>
-              <ul class="text-gray-500 dark:text-gray-400 font-medium">
+              <ul class="text-textdark font-medium">
                 <li class="mb-4">
                   <a href="#" class="hover:underline">
                     iOS
@@ -111,7 +111,7 @@ export default function Footer() {
             </div>
           </div>
           <div class="px-4 py-6 bg-gray-100 dark:bg-gray-700 md:flex md:items-center md:justify-between">
-            <span class="text-sm text-gray-500 dark:text-gray-300 sm:text-center">
+            <span class="text-sm text-textdark dark:text-gray-300 sm:text-center">
               © 2023 <a href="https://flowbite.com/">Flowbite™</a>. All Rights
               Reserved.
             </span>
diff --git a/Technodes/src/components/HeroSection.jsx b/Technodes/src/components/HeroSection.jsx
index a966880..65565e6 100644
--- a/Technodes/src/components/HeroSection.jsx
+++ b/Technodes/src/components/HeroSection.jsx
@@ -3,7 +3,7 @@ import React from "react";
 export default function HeroSection() {
   return (
     <div>
-      <section className="bg-gray-900 text-white">
+      <section className="bg-primary">
         <div className="mx-auto max-w-screen-xl px-4 py-32 lg:flex lg:h-screen lg:items-center">
           <div className="mx-auto max-w-3xl text-center">
             <h1 className="bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text text-3xl font-extrabold text-transparent sm:text-5xl">
@@ -11,21 +11,21 @@ export default function HeroSection() {
               <span className="sm:block"> Impact </span>
             </h1>
 
-            <p className="mx-auto mt-4 max-w-xl sm:text-xl/relaxed">
+            <p className="mx-auto mt-4 max-w-xl sm:text-xl/relaxed text-textcolor">
               Uniting tech enthusiasts to promote open-source collaboration,
               knowledge sharing, and problem-solving for positive impact.
             </p>
 
             <div className="mt-8 flex flex-wrap justify-center gap-4">
               <a
-                className="block w-full rounded border border-blue-600 bg-blue-600 px-12 py-3 text-sm font-medium text-white hover:bg-transparent hover:text-white focus:outline-none focus:ring active:text-opacity-75 sm:w-auto"
+                className="block w-full rounded border border-blue-600 bg-blue-600 px-12 py-3 text-sm font-medium text-textcolor hover:bg-transparent hover:text-white focus:outline-none focus:ring active:text-opacity-75 sm:w-auto"
                 href="/get-started"
               >
                 Get Started
               </a>
 
               <a
-                className="block w-full rounded border border-blue-600 px-12 py-3 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring active:bg-blue-500 sm:w-auto"
+                className="block w-full rounded border border-blue-600 px-12 py-3 text-sm font-medium text-textcolor hover:bg-blue-600 focus:outline-none focus:ring active:bg-blue-500 sm:w-auto"
                 href="/about"
               >
                 Learn More
diff --git a/Technodes/src/components/Navbar.jsx b/Technodes/src/components/Navbar.jsx
index a3642fb..5a741ac 100644
--- a/Technodes/src/components/Navbar.jsx
+++ b/Technodes/src/components/Navbar.jsx
@@ -9,8 +9,8 @@ export default function Navbar() {
   };
 
   return (
-    <div>
-      <nav className="bg-white border-gray-200 dark:bg-gray-900">
+    <div className="px-[2vw] pt-5 bg-primary ">
+      <nav className="bg-white border-gray-200 dark:bg-gray-900 rounded-2xl fixed w-[94vw] z-10">
         <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
           <a href="https://flowbite.com/" className="flex items-center">
             <img src={logo} className="h-8 mr-3" alt="TechNodes" />
diff --git a/Technodes/src/components/NewsLetter.jsx b/Technodes/src/components/NewsLetter.jsx
index 02fa0dd..1f44a2e 100644
--- a/Technodes/src/components/NewsLetter.jsx
+++ b/Technodes/src/components/NewsLetter.jsx
@@ -3,13 +3,13 @@ import React from "react";
 export default function NewsLetter() {
   return (
     <div>
-      <section class="bg-white dark:bg-gray-900">
+      <section class="bg-primary">
         <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
           <div class="mx-auto max-w-screen-md sm:text-center">
-            <h2 class="mb-4 text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl dark:text-white">
+            <h2 class="mb-4 text-3xl tracking-tight font-extrabold text-textcolor sm:text-4xl ">
               Sign up for our newsletter
             </h2>
-            <p class="mx-auto mb-8 max-w-2xl font-light text-gray-500 md:mb-12 sm:text-xl dark:text-gray-400">
+            <p class="mx-auto mb-8 max-w-2xl font-light text-textcolor md:mb-12 sm:text-xl ">
               Stay up to date with the roadmap progress, announcements and
               exclusive discounts feel free to sign up with your email.
             </p>
diff --git a/Technodes/tailwind.config.js b/Technodes/tailwind.config.js
index 614c86b..90fb734 100644
--- a/Technodes/tailwind.config.js
+++ b/Technodes/tailwind.config.js
@@ -2,7 +2,17 @@
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    backgroundColor: theme => ({
+     ...theme('colors'),
+     'primary': '#090580',
+     'secondary': '#46458C'
+    }),
+    extend: {
+      colors: {
+        'textcolor': '#F4D3D3',
+        'textdark': '#E8A9A9'
+      }
+    }
   },
   plugins: [],
 };