diff --git a/frontend/index.html b/frontend/index.html
index 0c589ec..19012b5 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Talent Platform</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 745b42e..28c4631 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -15,7 +15,11 @@ const App = () => {
     <>
   <Router>
     <div>
+      {/* Navbar Component */}
     <Navbar/>
+
+    {/* Routing between pages */}
+    
     <Routes>
     <Route path="/" element={<Home />} />
     <Route path="/login" element={<Login />} />
diff --git a/frontend/src/components/Dropdown.jsx b/frontend/src/components/Dropdown.jsx
index 8a59de1..3e40df3 100644
--- a/frontend/src/components/Dropdown.jsx
+++ b/frontend/src/components/Dropdown.jsx
@@ -1,13 +1,18 @@
-
+import React ,{useState}from "react";
+import "tailwindcss/tailwind.css";
 
 const Dropdown = () => {
+    const [visible, setVisible] = useState(false);
+    
+    const handleClick = () => { setVisible(!visible); };
+
     return (
     <div className="relative" id="profileDropdown">
-    <button id="profileButton" className="flex items-center">
+    <button id="profileButton" className="flex items-center" onClick={handleClick}>
         <img src="https://via.placeholder.com/30" alt="Profile" className="rounded-full w-8 h-8 mr-2"/>
         <span className="text-gray-700 hidden md:inline">John Doe</span>
     </button>
-    <div id="dropdownMenu" className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg hidden">
+    <div id="dropdownMenu" className={`${visible ? 'block' : 'hidden'} space-y-4 absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg`}>
         <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
         <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
         <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index da6a107..809f3be 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -2,11 +2,12 @@ import React from 'react'
 import Footer from '../components/Footer'
 
 
+
 const Home = () => {
   return (
     <>
     <h1 className="text-center text-4xl mt-44 font-bold">This is the Home page content</h1>
-    <Footer/>
+    
     </>
   )
 }
diff --git a/frontend/src/pages/Network.jsx b/frontend/src/pages/Network.jsx
index c2c6310..dda2241 100644
--- a/frontend/src/pages/Network.jsx
+++ b/frontend/src/pages/Network.jsx
@@ -1,6 +1,22 @@
+
 import React from 'react'
 import NetworkCard from '../components/NetworkCard'
 
+// Commented below is Example using of network card without repeating the code
+
+// const Network = () => {
+//   const cards = Array(12).fill(null).map((_, index) => (
+//     <NetworkCard key={index} />
+//   ))
+
+//   return (
+//     <div className="container mt-44 ml-4 flex flex-wrap space-y-6 justify-around">
+//       {cards}
+//     </div>
+//   )
+// }
+
+
 const Network = () => {
   return (
     <>
