diff --git a/projects/mybyte/components/navbar.tsx b/projects/mybyte/components/navbar.tsx
index 9d3516d..4ec4899 100644
--- a/projects/mybyte/components/navbar.tsx
+++ b/projects/mybyte/components/navbar.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useAuth } from "../context/AuthContext";
 import { Events } from "../enums/events";
+import { useLayoutEffect } from "react";
 
 const Navbar = ({ children }: { children: React.ReactNode }) => {
   const { user, logOut, currEvent, userInfo, user_type } = useAuth();
@@ -29,9 +30,31 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
     }
   };
 
+  const isElementXPercentInViewport = function(el: Element, percentVisible: number) {
+    let
+      rect = el.getBoundingClientRect(),
+      windowHeight = (window.innerHeight || document.documentElement.clientHeight);
+  
+    return !(
+      Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-rect.height) * 100)) < percentVisible ||
+      Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
+    )
+  };
+
+  useLayoutEffect(() => {
+    let element = document.getElementById("acdweafadaefd");
+    if (element !== null && element !== undefined && isElementXPercentInViewport(element, 100)) {
+      let parent = element.parentElement;
+      if (parent !== null) {
+        parent.style.display = "grid";
+        parent.style.alignItems = "center";
+      }
+    }
+  });
+
   return (
-    <div className="flex flex-col overflow-y-auto min-h-screen">
-      <header id="nav" className="flex flex-wrap container mx-auto max-w-full items-center p-6 justify-between bg-white shadow-md flex-initial">
+    <div className="overflow-y-auto h-screen">
+      <header id="nav" className="sticky top-0 z-10 flex flex-wrap container mx-auto max-w-full items-center p-6 justify-between bg-white shadow-md flex-initial">
         <div className="flex items-center hover:text-blue-800 cursor-pointer transition duration-150 ">
           {!user.uid ? (
             <Link href="/">
@@ -52,18 +75,23 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
           <ul className="text-lg inline-block">
             <>
               {!user.uid ? (
-                menuItems.map((item) => (
+                menuItems.map((item) => {
+                  let cn = "text-black-800 hover:text-red-500 transition";
+                  if (item.link.replace('/', '') === router.pathname.replace('/', '')) {
+                    cn += " underline underline-offset-[5px]";
+                  }
+                  return (
                   <li
                     key={item.id}
                     className="my-3 md:my-0 items-center mr-4 md:inline-block block"
                   >
                     <Link href={item?.link}>
-                      <span className="text-black-800 hover:text-red-900 transition">
+                      <span className={cn}>
                         {item?.name}
                       </span>
                     </Link>
                   </li>
-                ))
+                )})
               ) : (
                 <>
                   <li className="my-3 md:my-0 items-center mr-4 md:inline-block block ">
@@ -133,11 +161,13 @@ const Navbar = ({ children }: { children: React.ReactNode }) => {
           </ul>
         </nav>
       </header>
-      <div className="flex flex-col items-center justify-center py-2 font-inter overflow-y-auto flex-auto basis-[50vh] smh:basis-[58vh] md:basis-[90vh]">
-        {children}
+      <div className="font-inter h-[calc(100%-168px)] md:h-[calc(100%-76px)]">
+        <div id="acdweafadaefd">
+          {children}
+        </div>
       </div>
     </div>
-  ); // last div is to offset the navbar's position since it is fixed now
+  ); // last div's height is to offset the navbar's position since it is sticky now
 };
 
 export default Navbar;
diff --git a/projects/mybyte/pages/index.tsx b/projects/mybyte/pages/index.tsx
index 044c53f..a0cd726 100644
--- a/projects/mybyte/pages/index.tsx
+++ b/projects/mybyte/pages/index.tsx
@@ -20,7 +20,7 @@ const Home: NextPage = () => {
             <p className="text-xl pt-4 font-bold text-left text-gray-500">
               Join your fellow hackers. Let&apos;s build the future, together.
             </p>
-            <Link href="/login" className="text-white bg-purple-600 rounded-full px-8 py-2 text-lg">
+            <Link href="/login" className="text-white bg-primary-600 rounded-full px-8 py-2 text-lg">
               Log in
             </Link>
           </div>
diff --git a/projects/mybyte/pages/login.tsx b/projects/mybyte/pages/login.tsx
index f6054a2..49b8985 100644
--- a/projects/mybyte/pages/login.tsx
+++ b/projects/mybyte/pages/login.tsx
@@ -66,7 +66,7 @@ const LoginPage = () => {
   };
 
   return (
-    <div className="sign-up-form container mx-auto w-[90%] sm:w-96 flex-initial pt-20 smh:pt-10 md:pt-5">
+    <div className="sign-up-form container mx-auto w-[90%] sm:w-96">
       <h2 className="px-12 text-center text-2xl font-semibold inter">
         Log in to your account
       </h2>
@@ -74,11 +74,11 @@ const LoginPage = () => {
       <div className="mt-8">
         <div className="mt-4 grid space-y-4 px-4">
           <button
-            className="group h-12 px-6 rounded-full bg-[#F8F8F8] transition duration-300 focus:bg-purple-50 active:bg-purple-100"
+            className="group h-12 px-6 rounded-full bg-[#F8F8F8] transition duration-300 focus:bg-primary-50 active:bg-primary-100"
             onClick={onSubmitGoogle}
           >
             <div className="relative flex items-center space-x-2 justify-center">
-              <span className="block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-purple-600 sm:text-base">
+              <span className="block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-primary-500 sm:text-base">
                 Sign in with Google
               </span>
               <Image
@@ -102,7 +102,7 @@ const LoginPage = () => {
             onSubmit={handleSubmit(onSubmit)}
           >
             <div className="flex items-center justify-between">
-              <label htmlFor="" className="block mb-3 inter">
+              <label htmlFor="" className="block mb-3 inter font-bold">
                 Email
               </label>
             </div>
@@ -119,7 +119,7 @@ const LoginPage = () => {
               <div className="flex items-center justify-between">
                 <label
                   htmlFor=""
-                  className="block mb-3 inter"
+                  className="block mb-3 inter font-bold"
                 >
                   Password
                 </label>
@@ -133,19 +133,19 @@ const LoginPage = () => {
                 className={`border border-solid rounded-lg ring:0 focus:ring-0 focus:outline-none border-gray-400 text-gray-500 text-normal py-3 h-12 px-6 text-lg w-full flex items-center`}
               />
               {errors.password && (
-                <p className="text-red-400">{errors.password.message}</p>
+                <p className="text-red-500">{errors.password.message}</p>
               )}
             </div>
 
             <div className="flex justify-center pt-8">
               <button
                 type="submit"
-                className={`h-12 text-center w-full bg-purple-700 rounded-md hover:shadow-lg hover:bg-purple-800 active:bg-purple-950 text-lg transition`}
+                className={`h-12 text-center w-full hover:text-white bg-[#F8F8F8] rounded-md hover:shadow-lg hover:bg-primary-500 active:bg-primary-950 text-lg transition`}
               >
-                <p className="capitalize text-white font-normal">Log in</p>
+                <p className="capitalize font-normal">Log in</p>
               </button>
             </div>
-            <div className="flex justify-between text-sm text-purple-400 mt-2">
+            <div className="flex justify-between text-sm text-primary-500 mt-2">
                 <Link href="/resetPassword">Forgot your password?</Link>
                 <Link href="/signup">Create account</Link>
             </div>
diff --git a/projects/mybyte/pages/signup.tsx b/projects/mybyte/pages/signup.tsx
index a20c978..3a133dc 100644
--- a/projects/mybyte/pages/signup.tsx
+++ b/projects/mybyte/pages/signup.tsx
@@ -72,18 +72,18 @@ const SignupPage = () => {
   };
 
   return (
-    <div className="sign-up-form container mx-auto w-[90%] sm:w-96 flex-initial h-[50vh] smh:h-[58vh] md:h-[90vh]">
+    <div className="sign-up-form container mx-auto w-[90%] sm:w-96">
       <h2 className="px-12 mt-8 text-center text-2xl font-semibold inter">
         Sign up for an account
       </h2>
       <div className="mt-8">
         <div className="mt-4 grid space-y-4 px-4">
           <button
-            className="group h-12 px-6 rounded-full bg-[#F8F8F8] transition duration-300 focus:bg-purple-50 active:bg-purple-100"
+            className="group h-12 px-6 rounded-full bg-[#F8F8F8] transition duration-300 focus:bg-primary-50 active:bg-primary-100"
             onClick={onSubmitGoogle}
           >
             <div className="relative flex items-center space-x-2 justify-center">
-              <span className="block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-purple-600 sm:text-base">
+              <span className="block w-max font-semibold tracking-wide text-gray-700 text-sm transition duration-300 group-hover:text-primary-600 sm:text-base">
                 Sign in with Google
               </span>
               <Image
@@ -127,7 +127,7 @@ const SignupPage = () => {
               <div className="flex items-center justify-between">
                 <label
                   htmlFor=""
-                  className="block mb-3 inter"
+                  className="block mb-3 inter font-bold"
                 >
                   Email
                 </label>
@@ -139,14 +139,14 @@ const SignupPage = () => {
                 className={`border border-solid rounded-lg ring:0 focus:ring-0 focus:outline-none border-gray-400 text-gray-500 text-normal py-3 h-12 px-6 text-lg w-full flex items-center`}
               />
               {errors.email && (
-                <p className="text-red-400">{errors.email.message}</p>
+                <p className="text-red-500">{errors.email.message}</p>
               )}
             </div>
             <div className="mt-8">
               <div className="flex items-center justify-between">
                 <label
                   htmlFor=""
-                  className="block mb-3 inter"
+                  className="block mb-3 inter font-bold"
                 >
                   First Name
                 </label>
@@ -160,14 +160,14 @@ const SignupPage = () => {
                 className={`border border-solid rounded-lg ring:0 focus:ring-0 focus:outline-none border-gray-400 text-gray-500 text-normal py-3 h-12 px-6 text-lg w-full flex items-center`}
               />
               {errors.first_name && (
-                <p className="text-red-400">{errors.first_name.message}</p>
+                <p className="text-red-500">{errors.first_name.message}</p>
               )}
             </div>
             <div className="mt-8">
               <div className="flex items-center justify-between">
                 <label
                   htmlFor=""
-                  className="block mb-3 inter"
+                  className="block mb-3 inter font-bold"
                 >
                   Last Name
                 </label>
@@ -181,14 +181,14 @@ const SignupPage = () => {
                 className={`border border-solid rounded-lg ring:0 focus:ring-0 focus:outline-none border-gray-400 text-gray-500 text-normal py-3 h-12 px-6 text-lg w-full flex items-center`}
               />
               {errors.last_name && (
-                <p className="text-red-400">{errors.last_name.message}</p>
+                <p className="text-red-500">{errors.last_name.message}</p>
               )}
             </div>
             <div className="mt-8">
               <div className="flex items-center justify-between">
                 <label
                   htmlFor=""
-                  className="block mb-3 inter"
+                  className="block mb-3 inter font-bold"
                 >
                   School
                 </label>
@@ -207,14 +207,14 @@ const SignupPage = () => {
                 )}
               </datalist>
               {errors.last_name && (
-                <p className="text-red-400">{errors.last_name.message}</p>
+                <p className="text-red-500">{errors.last_name.message}</p>
               )}
             </div>
             <div className="mt-8">
               <div className="flex items-center justify-between">
                 <label
                   htmlFor=""
-                  className="block mb-3 inter"
+                  className="block mb-3 inter font-bold"
                 >
                   Password
                 </label>
@@ -226,14 +226,14 @@ const SignupPage = () => {
                 className={`border border-solid rounded-lg ring:0 focus:ring-0 focus:outline-none border-gray-400 text-gray-500 text-normal py-3 h-12 px-6 text-lg w-full flex items-center`}
               />
               {errors.password && (
-                <p className="text-red-400">{errors.password.message}</p>
+                <p className="text-red-500">{errors.password.message}</p>
               )}
             </div>
             <div className="mt-8">
               <div className="flex items-center justify-between">
                 <label
                   htmlFor=""
-                  className="block mb-3 inter"
+                  className="block mb-3 inter font-bold"
                 >
                   Confirm Password
                 </label>
@@ -247,7 +247,7 @@ const SignupPage = () => {
                 className={`border border-solid rounded-lg ring:0 focus:ring-0 focus:outline-none border-gray-400 text-gray-500 text-normal py-3 h-12 px-6 text-lg w-full flex items-center`}
               />
               {errors.password_confirm && (
-                <p className="text-red-400">
+                <p className="text-red-500">
                   {errors.password_confirm.message}
                 </p>
               )}
@@ -255,12 +255,12 @@ const SignupPage = () => {
             <div className="flex justify-center pt-8">
               <button
                 type="submit"
-                className={`h-12 text-center w-full bg-purple-700 rounded-md hover:shadow-lg hover:bg-purple-800 active:bg-purple-950 text-lg transition`}
+                className={`h-12 text-center hover:text-white w-full bg-[#F8F8F8] rounded-md hover:shadow-lg hover:bg-primary-500 active:bg-primary-950 text-lg transition`}
               >
-                <p className="capitalize text-white font-normal">Sign up</p>
+                <p className="capitalize font-normal">Sign up</p>
               </button>
             </div>
-            <div className="flex justify-between text-sm text-purple-400 mt-2">
+            <div className="flex justify-between text-sm text-primary-500 mt-2">
                 <Link href="/login">Already have an account?</Link>
             </div>
           </form>
diff --git a/projects/mybyte/tailwind.config.js b/projects/mybyte/tailwind.config.js
index 4560602..db8f752 100644
--- a/projects/mybyte/tailwind.config.js
+++ b/projects/mybyte/tailwind.config.js
@@ -1,3 +1,4 @@
+const colors = require('tailwindcss/colors');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -18,6 +19,21 @@ module.exports = {
       fontFamily: {
         'inter': ['Inter', 'sans-serif'],
       },
+      colors: {
+        primary: {
+          50: "#FEEDEC",
+          100: "#FDDCD9",
+          200: "#FBBDB7",
+          300: "#F89990",
+          400: "#F67A6F",
+          500: "#F4574A",
+          600: "#F0210F",
+          700: "#B2190B",
+          800: "#781107",
+          900: "#3A0804",
+          950: "#1D0402",
+        },
+      },
     },
   },
   plugins: [],