diff --git a/.env b/.env
new file mode 100644
index 0000000..81c3310
--- /dev/null
+++ b/.env
@@ -0,0 +1,4 @@
+   NEXT_PUBLIC_SUPABASE_URL=https://twsbyjhyntfbcadywdkl.supabase.co
+   NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InR3c2J5amh5bnRmYmNhZHl3ZGtsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Mjg4ODM1NTYsImV4cCI6MjA0NDQ1OTU1Nn0.2rTbjf9CLJObMq3hHuYG_dY03mywwTHEzBt0Jz8iflI
+   NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=youplay
+   NEXT_PUBLIC_CLOUDINARY_API_KEY=151273272649153
\ No newline at end of file
diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
index 79297f2..3d268d4 100644
--- a/src/app/components/Navbar.tsx
+++ b/src/app/components/Navbar.tsx
@@ -1,7 +1,6 @@
 'use client';
 import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
-
 import Logo from '../public/Logo.png';
 import '@/styles.css';
 import { ModeToggle } from './button-mode';
@@ -31,23 +30,23 @@ const Navbar = () => {
 
   const navItems = [
     { label: 'Home', id: '/' },
-    { label: 'Team', id: '#' },
+    { label: 'Team', id: 'team' },
     { label: 'Projects', id: 'projects' },
-    { label: 'Events', id: '#' },
-    { label: 'Notice', id: '#' },
+    { label: 'Events', id: 'events' },
+    { label: 'Notice', id: 'notice' },
   ];
 
   return (
     <div className={`navbar sticky top-0 start-0 w-full bg-opacity-30 backdrop-blur-md ${isDarkMode ? 'bg-gray-900' : 'bg-gray-200'} text-white`}>
-      <div className="navbar-start flex items-center justify-between w-full">
-        <Image src={Logo} alt='Logo' height={50} width={50} />
+      <div className="navbar-start flex items-center justify-between w-full p-4">
+        <Image src={Logo} alt="Logo" height={50} width={50} />
         <div className="navbar-center hidden lg:flex space-x-4">
-          <ul className="menu menu-horizontal flex text-sm">
+          <ul className="menu flex text-sm">
             {navItems.map((item) => (
               <li key={item.label}>
                 <a
-                  href={`${item.id}`}
-                  className="block text-lg leading-5 text-gray-200 transition-colors duration-300 p-2 rounded font-extralight"
+                  href={item.id}
+                  className="block text-lg leading-5 text-gray-200 transition-colors duration-300 p-2 rounded font-extralight hover:bg-gray-700"
                 >
                   {item.label}
                 </a>
@@ -56,12 +55,14 @@ const Navbar = () => {
           </ul>
         </div>
         <div className="navbar-end flex items-center gap-5">
-          <a className="btn bg-transparent px-5 text-orange-400 border-orange-400 rounded-3xl hover:bg-orange-400 hover:text-white hover:border-none">Log In</a>
-          <a className="btn border-transparent bg-orange-400 px-5 text-white rounded-full hover:bg-transparent hover:text-orange-400 hover:border-orange-400">Sign Up</a>
-          
+          <a className="btn bg-transparent px-5 text-orange-400 border-orange-400 rounded-3xl hover:bg-orange-400 hover:text-white hover:border-none">
+            Log In
+          </a>
+          <a className="btn border-transparent bg-orange-400 px-5 text-white rounded-full hover:bg-transparent hover:text-orange-400 hover:border-orange-400">
+            Sign Up
+          </a>
           <ModeToggle />
         </div>
-        
         <div className="navbar-center lg:hidden">
           <button className="btn btn-ghost" onClick={toggleDropdown}>
             <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -69,19 +70,29 @@ const Navbar = () => {
             </svg>
           </button>
           {isOpen && (
-            <ul className="menu dropdown-content mt-3 p-2  pt-28 shadow bg-gray-800 rounded-box w-52">
-              {navItems.map((item) => (
-                <li key={item.label}>
-                  <a
-                    href={`${item.id}`}
-                    className="block text-lg leading-6 text-gray-200 transition-colors duration-300 p-2 rounded font-extralight"
-                    onClick={() => setIsOpen(false)} 
-                  >
-                    {item.label}
-                  </a>
-                </li>
-              ))}
-            </ul>
+            <div className="absolute top-16 left-0 right-0 bg-gray-800 p-4">
+              <ul className="flex flex-col space-y-2 text-white text-sm">
+                {navItems.map((item) => (
+                  <li key={item.label}>
+                    <a
+                      href={item.id}
+                      className="block text-lg leading-6 text-gray-200 transition-colors duration-300 p-2 rounded font-extralight hover:bg-gray-700"
+                      onClick={() => setIsOpen(false)}
+                    >
+                      {item.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+              <div className="flex flex-col mt-4 space-y-2">
+                <a className="btn bg-transparent px-7 text-orange-400 border-orange-400 rounded-3xl hover:bg-orange-400 hover:text-white hover:border-none">
+                  Log In
+                </a>
+                <a className="btn border-transparent bg-orange-400 px-7 text-white rounded-full hover:bg-transparent hover:text-orange-400 hover:border-orange-400">
+                  Sign Up
+                </a>
+              </div>
+            </div>
           )}
         </div>
       </div>