diff --git a/Components/Layout/footer.js b/Components/Layout/footer.js
deleted file mode 100644
index e69de29..0000000
diff --git a/Components/Layout/nav-item.js b/Components/Layout/nav-item.jsx
similarity index 100%
rename from Components/Layout/nav-item.js
rename to Components/Layout/nav-item.jsx
diff --git a/Components/Layout/navbar.js b/Components/Layout/navbar.jsx
similarity index 70%
rename from Components/Layout/navbar.js
rename to Components/Layout/navbar.jsx
index 2bb4b6a..edf77a4 100644
--- a/Components/Layout/navbar.js
+++ b/Components/Layout/navbar.jsx
@@ -2,12 +2,14 @@ import Link from "next/link";
 import Image from "next/image";
 import React, { useState } from "react";
 //import Logo from "./Logo";
-import NavItem from "./nav-item";
+import NavItem from "./nav-item"; 
 
 const MENU_LIST = [
-  { text: "Home", href: "/" },
-  { text: "About Us", href: "/about" },
-  { text: "Contact", href: "/contact" },
+  { text: "about", href: "/about" },
+  { text: "get involved", href: "/getinvolved" },
+  { text: "projects", href: "/projects" },
+  { text: "hire us", href: "/hireus" },
+  { text: "contact us", href: "/contactus" },
 ];
 const Navbar = () => {
   const [navActive, setNavActive] = useState(null);
@@ -17,7 +19,8 @@ const Navbar = () => {
     <header>
       <nav className={`nav`}>
         <Link href={"/"}>
-            <h1 className="logo">CodeWithMarish</h1>
+        <div className="flex items-center"><Image src="/shilohlogowhite.png" alt="Description of the image" width={50} height={50} />
+          <h1 className="logo px-5">shiloh</h1></div>
         </Link>
         <div
           onClick={() => setNavActive(!navActive)}
@@ -46,4 +49,3 @@ const Navbar = () => {
 };
 
 export default Navbar;
-
diff --git a/Components/Layout/section.jsx b/Components/Layout/section.jsx
new file mode 100644
index 0000000..4db1a43
--- /dev/null
+++ b/Components/Layout/section.jsx
@@ -0,0 +1,58 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+const Section = ({ videoUrl, text, buttonOneText, buttonTwoText }) => {
+  const videoRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.5,
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setIsPlaying(true);
+          videoRef.current.play();
+        } else {
+          setIsPlaying(false);
+          videoRef.current.pause();
+        }
+      });
+    }, options);
+
+    observer.observe(videoRef.current);
+
+    return () => {
+      observer.unobserve(videoRef.current);
+    };
+  }, []);
+
+  return (
+    <div className="relative z-10 h-screen w-screen">
+      <video
+        className="absolute h-screen w-screen object-cover blur-sm"
+        src={videoUrl}
+        ref={videoRef}
+        muted
+        loop
+        autoPlay={isPlaying}
+      />
+<div className="relative z-10 flex flex-col items-center justify-center h-full">
+  <div className="relative flex justify-center items-end w-full mb-20">
+    <h1 className="text-6xl font-normal text-white">{text}</h1>
+  </div>
+  <div className="flex justify-start space-x-4">
+    <button className="px-20 mt-8 mx-5 py-2 text-white border border-blue-500 rounded hover:border-white transition duration-300 ease-in-out focus:outline-none">{buttonOneText}</button>
+    <button className="px-4 mt-8 mx-5 py-2 text-white underline border-white rounded hover:border-white transition duration-300 ease-in-out focus:outline-none">{buttonTwoText}</button>
+  </div>
+</div>
+
+      
+    </div>
+  );
+};
+
+export default Section;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 75782b6..e79e146 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "shiloh",
       "version": "0.1.0",
       "dependencies": {
+        "@next/font": "^13.3.0",
+        "animejs": "^3.2.1",
         "autoprefixer": "10.4.14",
         "next": "13.3.0",
         "observer": "^0.0.2",
@@ -72,6 +74,11 @@
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.3.0.tgz",
       "integrity": "sha512-AjppRV4uG3No7L1plinoTQETH+j2F10TEnrMfzbTUYwze5sBUPveeeBAPZPm8OkJZ1epq9OyYKhZrvbD6/9HCQ=="
     },
+    "node_modules/@next/font": {
+      "version": "13.3.0",
+      "resolved": "https://registry.npmjs.org/@next/font/-/font-13.3.0.tgz",
+      "integrity": "sha512-xUv7VRUA2Zr6n/KJDILyv7/zGy9xKUsyQURaQqYr7lVxn0REScazwyZQzhSm+DnJoUyo+9DcFs2J3WsZXHUvQw=="
+    },
     "node_modules/@next/swc-darwin-arm64": {
       "version": "13.3.0",
       "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.3.0.tgz",
@@ -247,6 +254,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/animejs": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/animejs/-/animejs-3.2.1.tgz",
+      "integrity": "sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A=="
+    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
diff --git a/package.json b/package.json
index c89b23f..af1c46a 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@next/font": "^13.3.0",
+    "animejs": "^3.2.1",
     "autoprefixer": "10.4.14",
     "next": "13.3.0",
     "observer": "^0.0.2",
diff --git a/pages/_app.js b/pages/_app.js
index 2300201..c2dfc22 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,5 +1,13 @@
 import '@/styles/globals.css'
+import {Fira_Code} from '@next/font/google'
 
+const firaCode = Fira_Code ({
+  subsets: ["latin"],
+})
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+  <main className={firaCode.className}>
+    <Component {...pageProps} />
+  </main>
+  )
 }
diff --git a/pages/index.js b/pages/index.js
index d2cd451..6a63b2b 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,44 +1,48 @@
 
 import React from "react";
-import Navbar from "../Components/Layout/navbar";
-//import Footer from "../Components/Layout/footer";
-import ReactPlayer from 'react-player';
-
-const Section = ({ children, videoUrl }) => {
-  
-  return (
-    <div className="w-screen h-screen flex items-center justify-center">
-      <div className="absolute top-0 left-0 w-full h-full overflow-hidden z-0">
-        <ReactPlayer
-          url={videoUrl}
-          playing
-          loop
-          muted
-          width="100%"
-          height="100%"
-          className="absolute top-0 left-0 z-0"
-        />
-      </div>
-      {children}
-    </div>
-  );
-};
+import Navbar from "../Components/Layout/navbar.jsx";
+import Section from "../Components/Layout/section.jsx"
 
 export default function Home() {
   return (
     <>
       <Navbar />
-      <div className="relative z-10 w-full ">
-        <Section videoUrl="https://rr1---sn-nx57ynlk.googlevideo.com/videoplayback?expire=1681805759&ei=X_09ZOmaG4rq8wSR9ZaIBA&ip=15.204.174.204&id=o-AAN2qc1B4B5weQXzki-zyga9riiXNdYSWNwsFLqtFO_N&itag=22&source=youtube&requiressl=yes&spc=99c5CXFG1SFqPY_xVJXZu9IItHSOjK0&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=192.493&lmt=1679719792702831&fexp=24007246&c=ANDROID&txp=4532434&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRQIhAIjTG6lZpB9hSX4KHOQUz9ThofD0UW27Nf17H9vPHzhIAiAD1PIDbaAutrCqtjj7FicmvVrMe80zZxTLvKRQA3mqcw%3D%3D&host=rr1---sn-p5qs7nzk.googlevideo.com&redirect_counter=1&rm=sn-p5qe7y7e&req_id=5b5754df8b7ea3ee&cms_redirect=yes&ipbypass=yes&mh=ZX&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=31&mn=sn-nx57ynlk&ms=au&mt=1681783749&mv=m&mvi=1&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhAIMXzPMAU4sbWbTrPYHI9ZdevPiv_0smLPtkJ4lR9-6YAiBMTl83ovfDZc9ZGyKtU5ig3X5gYNJqDpyulMho4SlrMg%3D%3D">
-          <h1 className="text-6xl text-white font-bold">Section 1</h1>
-        </Section>
-        <Section videoUrl="https://vid.puffyan.us/watch?v=AyOnug-3OKM">
-          <h1 className="text-6xl text-white font-bold">Section 2</h1>
-        </Section>
-        <Section videoUrl="https://vid.puffyan.us/watch?v=AyOnug-3OKM">
-          <h1 className="text-6xl text-white font-bold">Section 3</h1>
-        </Section>
-      </div>
-    </>
+      <Section
+        videoUrl="https://rr3---sn-nx5s7nel.googlevideo.com/videoplayback?expire=1681812183&ei=dxY-ZIiXLKCM_9EPusy-sA8&ip=15.204.174.204&id=o-AE49oMVwQRTSFMBjl7XvZoZt2-4d8o_Rgs9TXq-Sm5ux&itag=22&source=youtube&requiressl=yes&spc=99c5CdZXd08O95IMloGPGq5mcstIep4&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=192.493&lmt=1679719792702831&fexp=24007246&c=ANDROID&txp=4532434&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRAIgRKyJdJhOvhiuHCLkPM1jqozgkaliM9oin1SkU-c4ZMMCIExEOHxWBR-Fw_2xqCKEYobSq_K0mXqVGp-Drb5H4MZY&host=rr1---sn-p5qs7nzk.googlevideo.com&redirect_counter=1&rm=sn-p5qe7y7e&req_id=7b420ee96ae3a3ee&cms_redirect=yes&ipbypass=yes&mh=ZX&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=31&mn=sn-nx5s7nel&ms=au&mt=1681790222&mv=m&mvi=3&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRgIhAPK8gNbgu42rwz3uqR1lMBAKYCmcuIYMejjVsXNxz9GXAiEA-HKjPzRU_JSX26Nmt-q01WZQ1fKBFRe5K6uW1JWRoRA%3D"
+        text="redemptive tech in Jesus' name"
+        buttonOneText="watch" 
+        buttonTwoText="learn more"
+      />
+      <Section
+        videoUrl="https://rr2---sn-vgqsknly.googlevideo.com/videoplayback?expire=1681820311&ei=NzY-ZLiXNcrO8wTXlp3YBQ&ip=15.204.174.205&id=o-AIURdLrU3YcNtnUpLoL3D_iec3v8rTkvoNcWMG4R4EAk&itag=22&source=youtube&requiressl=yes&spc=99c5CW9_6piE8zD4uWtb1XmeXIFTIjA&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=170.991&lmt=1628618583216432&fexp=24007246&c=ANDROID&txp=5311224&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRgIhALw9zi65tVkUhhQShkW3Yy7zxaDrnkXDYAIvchAcD-2nAiEA0Uylg0GI_-2QwVqbsyoL1N3IYoqCzWc7Kx5pkXVLPbc%3D&host=rr2---sn-p5qddn7r.googlevideo.com&rm=sn-p5qel77l&req_id=c70118d7d937a3ee&ipbypass=yes&redirect_counter=2&cm2rm=sn-nx5sk7l&cms_redirect=yes&cmsv=e&mh=It&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=34&mn=sn-vgqsknly&ms=ltu&mt=1681798608&mv=m&mvi=2&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhALEvvp_J4MX7zxd00taP964ALILSjBRUNCCuhdAxr55lAiAbYpxCaiZKcLW8U67R-O4JazIWK1T2649mtxEindLogA%3D%3D"
+        text="about"
+        buttonOneText="watch" 
+        buttonTwoText="learn more"
+      />
+      <Section
+        videoUrl="https://rr4---sn-vgqsrnez.googlevideo.com/videoplayback?expire=1681820523&ei=Czc-ZN36G6WM_9EPpPiD6Aw&ip=15.204.174.210&id=o-ALz25RvjR7vgSgq2t2JZWpBNm_jY8AVQAxFzLAKkLeb8&itag=22&source=youtube&requiressl=yes&spc=99c5CQlBqT7CeM-U95d2vH-bQblF0dE&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=927.637&lmt=1663509028299089&fexp=24007246&c=ANDROID&txp=4532434&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRAIgdutUOT1SwogYkhXn5jEF3qwWe_5FOZ251cMpak0YsPsCICyGnSnCWg-uanwbSuwlSdXmyKGFjOd_IpmOeKSqejXi&host=rr4---sn-p5qlsn7l.googlevideo.com&rm=sn-p5qee77z&req_id=4ffb512965fba3ee&ipbypass=yes&redirect_counter=2&cm2rm=sn-nx5ss76&cms_redirect=yes&cmsv=e&mh=qt&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=34&mn=sn-vgqsrnez&ms=ltu&mt=1681798608&mv=m&mvi=4&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhAPLOEYbG9isyKeOHfRm8-YCuVPSbRK67yIQkvSAdvFsCAiAqwfJcI_Wn7BWj0Qfe6VU3x87_TflCLIPOLmJ3PTrM5Q%3D%3D"
+        text="get involved"
+        buttonOneText="watch" 
+        buttonTwoText="learn more"
+      />
+      <Section
+        videoUrl="https://rr4---sn-vgqsknsk.googlevideo.com/videoplayback?expire=1681820817&ei=MTg-ZLihFvyM_9EP68mkiAM&ip=15.204.174.210&id=o-AMxXtEx3G5gpmpsPxxSqV6XoJEOyOUxPX62M5sMnqhYe&itag=22&source=youtube&requiressl=yes&spc=99c5Caju8I5PlYtsEu9P1D5AqTEl9kU&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=594.848&lmt=1679115353140234&fexp=24007246&c=ANDROID&txp=5532434&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRQIgDzxrPcEs8d6jYGCg2IS25YTMLaFDEMERZiw1aofLhA4CIQD8e3LijQmJpdm_Lm3Y8zX87PbZhnqewnTcnQRcoIeSMQ%3D%3D&host=rr5---sn-p5qlsnrl.googlevideo.com&rm=sn-p5qe7z76&req_id=b34bd6b042ada3ee&ipbypass=yes&redirect_counter=2&cm2rm=sn-nx5sr7z&cms_redirect=yes&cmsv=e&mh=8x&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=34&mn=sn-vgqsknsk&ms=ltu&mt=1681798846&mv=m&mvi=4&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRAIgEEmgeZ8RfEduZs4tVxLhVG1vwpt94czlySoDuhIYhHgCICb_AfmuF_fOg6xYB1L3Kt7YUSAaqvyBKTk-fiIqfOOo"
+        text="projects"
+        buttonOneText="watch" 
+        buttonTwoText="learn more"
+      />
+      <Section
+        videoUrl="https://rr1---sn-vgqsknzs.googlevideo.com/videoplayback?expire=1681820645&ei=hTc-ZM3RDcr08gTerb2ABw&ip=15.204.174.205&id=o-AKTcTDBnnRGqDF2L2KbITf-tO1RbRY33FVwc21QrdolI&itag=22&source=youtube&requiressl=yes&spc=99c5CdZ0BI9kVnkUJTdy2mNcVJIbTfo&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=3849.636&lmt=1565218203117972&fexp=24007246&c=ANDROID&txp=2316222&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRgIhAK4KayB81a0Y89z6SAu9u22A1gafFYG_JkC2w_jFmft7AiEA4CV7HiXzDt296gZ4xfRwPK7P_EJ5wLdY3uXtRySfd4M%3D&host=rr2---sn-p5qs7n6d.googlevideo.com&redirect_counter=1&cm2rm=sn-p5qell7l&req_id=3c4870c88ad5a3ee&cms_redirect=yes&mh=qj&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=34&mn=sn-vgqsknzs&ms=ltu&mt=1681798608&mv=m&mvi=1&pl=40&lsparams=mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhAI2V94dFrB2S7Og6uks72qh4NcAHTdUjQX2Eur9iYVlMAiB_eRn0oych-4e4ZkB9A7LIt7SjF5-9IFEj0n1EgrsLCQ%3D%3D"
+        text="hire us"
+        buttonOneText="watch" 
+        buttonTwoText="learn more"
+      />
+      <Section
+        videoUrl="https://rr5---sn-vgqsknez.googlevideo.com/videoplayback?expire=1681820719&ei=zzc-ZKnoBcKJ8wTv3Y2oDg&ip=15.204.174.204&id=o-APwcPqxhp8AAMUceSJojVq-cA9u_Mvxsba1xe8o72MWA&itag=22&source=youtube&requiressl=yes&spc=99c5CRpd31pyby30goPOHK_cJgeolS8&vprv=1&svpuc=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=15.046&lmt=1648464882993617&fexp=24007246,24512781&beids=24512781&c=ANDROID&txp=6218224&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRQIhAKh2CuL9TRLcXH4cgm2_7Ssvl42XoavPrO9tRM4GDc3yAiAnOC68CnJS_jEeBY1zdqHhW4nzTHm0_f9AqpzUkT3P1w%3D%3D&host=rr3---sn-p5qs7nzy.googlevideo.com&rm=sn-p5qee67s&req_id=d0717b923b2da3ee&ipbypass=yes&redirect_counter=2&cm2rm=sn-nx5sy7e&cms_redirect=yes&cmsv=e&mh=T6&mip=2605:59c8:458:fc10:5cac:f6bb:3f0:d4a8&mm=34&mn=sn-vgqsknez&ms=ltu&mt=1681798846&mv=m&mvi=5&pl=40&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRgIhANrQ3jkEzdp7kQQ6KPb5EK0whyRuIA8N0yhVRt5UWI3nAiEA-1Dhh09CocWu1BLU1vpiF9SJvip_63wGsYjpjFYrJNA%3D"
+        text="contact us"
+        buttonOneText="watch" 
+        buttonTwoText="learn more"
+      />
+      </>
   );
 }
diff --git a/public/gpt-4-92586ac_1080p60.mp4 b/public/gpt-4-92586ac_1080p60.mp4
deleted file mode 100644
index 995442c..0000000
Binary files a/public/gpt-4-92586ac_1080p60.mp4 and /dev/null differ
diff --git a/styles/globals.css b/styles/globals.css
index ebe5252..6f5e4f9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
 :root {
   --foreground-rgb: 0, 0, 0;
@@ -26,13 +26,11 @@ body {
     rgb(var(--background-start-rgb));
 }
 /*additional css*/
-@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&display=swap');
 * {
   margin: 0;
   padding: 0;
   outline: none;
   box-sizing: border-box;
-  font-family: 'Work Sans', sans-serif;
 }
 a{
   text-decoration: none;
@@ -48,7 +46,13 @@ nav{
   padding: 16px;
   justify-content: space-between;
   align-items: center;
-  background-color: #f1f1f1;
+  background-color: #f1f1f100;
+  color: white;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999;
 }
 .nav__menu-bar{
   display: flex;
@@ -59,7 +63,8 @@ nav{
 .nav__menu-bar div{
   width: 40px;
   height: 4px;
-  background-color: black;
+  background-color: white;
+  color:white;
   border-radius: 2px;
 }
 .nav__menu-list{
@@ -73,7 +78,7 @@ nav{
   padding: 24px 16px;
   transition: all 0.2s;
   min-height: calc(100vh - 60px);
-  background-color: #f1f1f1;
+  background-color: none;
 }
 .nav__menu-list.active{
   right: 0;
@@ -113,11 +118,11 @@ nav{
     height: 6px;
     bottom: -16px;
     left: 0;
-    background-color: black;
+    background-color: white;
     transition: all 0.2s;
   }
   
   .nav__link:hover:before{
    width: 100%;
   }
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index d4dc908..3edc938 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,18 +1,67 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
+  ],
+  safelist: [
+    "relative",
+    "z-10",
+    "flex",
+    "justify-center",
+    "items-center",
+    "h-full",
+    "text-6xl",
+    "text-white",
+    "font-bold",
+    "relative",
+    "h-screen",
+    "w-screen",
+    "absolute",
+    "object-cover",
+    "items-end",
+    "bottom-20",
+    "px-4",
+    "py-2",
+    "text-white",
+    "border",
+    "border-white",
+    "rounded",
+    "hover:border-blue-500",
+    "transition",
+    "duration-300",
+    "ease-in-out",
+    "focus:outline-none",
+    "relative",
+    "z-10",
+    "flex",
+    "flex-col",
+    "items-center",
+    "justify-center",
+    "h-full",
+    "mx-5",
+    "mt-8",
+    "blur-sm",
+    "backdrop-brightness-30",
+    "bg-blue-600/30",
+    "backdrop-brightness-10",
+    "text-lg",
+    "hover:border-white",
+    "border-blue-500",
+    "underline",
+    "px-20",
+    "px-5",
+    "text-base",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
   plugins: [],
-}
+};