diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..b58b603
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 9806b72..97c55b4 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -21,6 +21,7 @@ import About from "./components/About/About";
 
 import { useEffect, useState } from "react";
 import Loader from "./components/Loader";
+import { BiArrowToTop } from "react-icons/bi";
 
 function Layout() {
   const { user } = useSelector((state) => state.user);
@@ -74,7 +75,7 @@ function App() {
           <Route
             path={
               user?.user?.accountType === "seeker"
-                ? "/user-profile"
+              ? "/user-profile"
                 : "/user-profile/:id"
             }
             element={<UserProfile />}
@@ -91,6 +92,7 @@ function App() {
           element={<Navigate to="/find-jobs" replace={true} />}
         />
       </Routes>
+      <BiArrowToTop className="fixed bottom-4 right-4 border rounded-full p-1" size={50} onClick={()=>{window.scrollTo({ top: 0, left: 0, behavior: "smooth"});}}/>
       {user && <Footer />}
     </main>
   );
diff --git a/client/src/components/About/About.jsx b/client/src/components/About/About.jsx
index afacae5..b1fdfef 100644
--- a/client/src/components/About/About.jsx
+++ b/client/src/components/About/About.jsx
@@ -12,7 +12,6 @@ const About = () => {
       <SectionSecond />
       <SectionThird />
       <SectionFourth />
-
     </div>
   );
 };
diff --git a/client/src/components/About/Home/SectionFourth.jsx b/client/src/components/About/Home/SectionFourth.jsx
index 919e424..5c1d987 100644
--- a/client/src/components/About/Home/SectionFourth.jsx
+++ b/client/src/components/About/Home/SectionFourth.jsx
@@ -29,9 +29,18 @@ const SectionFourth = () => {
 
   return (
     <Container>
-
       <Box sx={{ py: 8 }}>
-
+        <style>
+          {`
+            .card-hover {
+              transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+            }
+            .card-hover:hover {
+              transform: translateY(-10px);
+              box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            }
+          `}
+        </style>
         <Typography variant="h4" align="left" gutterBottom color="black">
           Find Best Companies
         </Typography>
@@ -41,7 +50,7 @@ const SectionFourth = () => {
         <Grid container spacing={3} justifyContent="center">
           {companies.map(company => (
             <Grid item key={company.id} xs={12} sm={6} md={4}>
-              <Card sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+              <Card className="card-hover" sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                 <CardMedia
                   component="img"
                   height="150"
@@ -66,7 +75,6 @@ const SectionFourth = () => {
         </Grid>
       </Box>
     </Container>
-
   );
 };
 
diff --git a/client/src/components/About/Home/SectionSecond.jsx b/client/src/components/About/Home/SectionSecond.jsx
index b7a4e66..1226741 100644
--- a/client/src/components/About/Home/SectionSecond.jsx
+++ b/client/src/components/About/Home/SectionSecond.jsx
@@ -4,7 +4,7 @@ import { Box, Grid, Typography, Card, CardContent, CardMedia, Container } from '
 const SectionSecond = () => {
   // Sample data for categories
   const categories = [
-    { id: 1, title: 'Marketing', positions: '2 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Marketing' },
+    { id: 1, title: 'Marketing', positions: '2 open positions', imageUrl: 'https://www.pngplay.com/wp-content/uploads/7/Digital-Marketing-Transparent-Free-PNG.png' },
     { id: 2, title: 'Finance', positions: '3 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Finance' },
     { id: 3, title: 'IT', positions: '5 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=IT' },
     { id: 4, title: 'Human Resources', positions: '1 open position', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=HR' },
diff --git a/client/src/components/About/Home/SectionThird.jsx b/client/src/components/About/Home/SectionThird.jsx
index c2522e6..49e1533 100644
--- a/client/src/components/About/Home/SectionThird.jsx
+++ b/client/src/components/About/Home/SectionThird.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box, Grid, Typography, Card, CardContent, CardMedia, Container } from '@mui/material';
 import { jobs } from '../../utils/data'; // Import jobs data from your utils/data file
+import './styles.css'; // Import the CSS file
 
 const SectionThird = () => {
   return (
@@ -15,7 +16,7 @@ const SectionThird = () => {
         <Grid container spacing={3} justifyContent="center">
           {jobs.map(job => (
             <Grid item key={job.id} xs={12} sm={6} md={3}>
-              <Card sx={{ borderRadius: 10 }}>
+              <Card className="card-hover" sx={{ borderRadius: 10 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '150px', backgroundColor: '#f5f5f5', borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
                   <CardMedia
                     component="img"
diff --git a/client/src/components/Home/SectionFourth.jsx b/client/src/components/Home/SectionFourth.jsx
index 919e424..a38dd08 100644
--- a/client/src/components/Home/SectionFourth.jsx
+++ b/client/src/components/Home/SectionFourth.jsx
@@ -9,29 +9,38 @@ const SectionFourth = () => {
       name: 'Google',
       description: 'Explore opportunities at Google.',
       jobs: 5000, // Total number of jobs
-      image: 'https://via.placeholder.com/150', // Example image URL
+      image: 'https://static01.nyt.com/images/2019/06/18/business/18google/merlin_155876157_28d611ed-0437-4e3a-819e-c4ecb616d59e-superJumbo.jpg', // Example image URL
     },
     {
       id: '2',
       name: 'Amazon',
       description: 'Join Amazon and build the future.',
       jobs: 8000,
-      image: 'https://via.placeholder.com/150', // Example image URL
+      image: 'https://www.accountancydaily.co/sites/default/files/styles/media_thumbnail/public/field/image/amazon_adobestock_291428005_editorial_use_only.jpeg?itok=rt2oGCMy', // Example image URL
     },
     {
       id: '3',
       name: 'Microsoft',
       description: 'Innovate with Microsoft.',
       jobs: 10000,
-      image: 'https://via.placeholder.com/150', // Example image URL
+      image: 'https://www.investmentmonitor.ai/wp-content/uploads/sites/7/2021/12/microsoft-headquarters-fdi.jpg', // Example image URL
     },
   ];
 
   return (
     <Container>
-
       <Box sx={{ py: 8 }}>
-
+        <style>
+          {`
+            .card-hover {
+              transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+            }
+            .card-hover:hover {
+              transform: translateY(-10px);
+              box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            }
+          `}
+        </style>
         <Typography variant="h4" align="left" gutterBottom color="black">
           Find Best Companies
         </Typography>
@@ -41,7 +50,7 @@ const SectionFourth = () => {
         <Grid container spacing={3} justifyContent="center">
           {companies.map(company => (
             <Grid item key={company.id} xs={12} sm={6} md={4}>
-              <Card sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+              <Card className="card-hover" sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                 <CardMedia
                   component="img"
                   height="150"
@@ -66,7 +75,6 @@ const SectionFourth = () => {
         </Grid>
       </Box>
     </Container>
-
   );
 };
 
diff --git a/client/src/components/Home/SectionSecond.jsx b/client/src/components/Home/SectionSecond.jsx
index b7a4e66..5554926 100644
--- a/client/src/components/Home/SectionSecond.jsx
+++ b/client/src/components/Home/SectionSecond.jsx
@@ -1,54 +1,98 @@
-import React from 'react';
-import { Box, Grid, Typography, Card, CardContent, CardMedia, Container } from '@mui/material';
+import React from "react";
 
 const SectionSecond = () => {
   // Sample data for categories
   const categories = [
-    { id: 1, title: 'Marketing', positions: '2 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Marketing' },
-    { id: 2, title: 'Finance', positions: '3 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Finance' },
-    { id: 3, title: 'IT', positions: '5 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=IT' },
-    { id: 4, title: 'Human Resources', positions: '1 open position', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=HR' },
-    { id: 5, title: 'Operations', positions: '4 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Operations' },
-    { id: 6, title: 'Sales', positions: '2 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Sales' },
-    { id: 7, title: 'Customer Service', positions: '3 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Customer+Service' },
-    { id: 8, title: 'Engineering', positions: '6 open positions', imageUrl: 'https://via.placeholder.com/300x200/FFDAB9/FFA500?text=Engineering' },
-   
+    {
+      id: 1,
+      title: "Marketing",
+      positions: "2 open positions",
+      imageUrl:
+        "https://www.firerockmarketing.com/wp-content/uploads/2016/02/shutterstock_395180611.jpg",
+    },
+    {
+      id: 2,
+      title: "Finance",
+      positions: "3 open positions",
+      imageUrl:
+        "https://dynamics.folio3.com/blog/wp-content/uploads/2021/04/Financial-Management.png",
+    },
+    {
+      id: 3,
+      title: "IT",
+      positions: "5 open positions",
+      imageUrl:
+        "https://5chat.com/wp-content/uploads/industry-2496192_1920.jpg",
+    },
+    {
+      id: 4,
+      title: "Human Resources",
+      positions: "1 open position",
+      imageUrl:
+        "https://www.zambianguardian.com/wp-content/uploads/2022/09/Types-of-human-resource-development.jpg",
+    },
+    {
+      id: 5,
+      title: "Operations",
+      positions: "4 open positions",
+      imageUrl:
+        "https://fupping.com/wp-content/uploads/2018/07/Operations.jpg",
+    },
+    {
+      id: 6,
+      title: "Sales",
+      positions: "2 open positions",
+      imageUrl:
+        "https://blog.bit.ai/wp-content/uploads/2019/07/32863956976_5623d484db_b.jpg",
+    },
+    {
+      id: 7,
+      title: "Customer Service",
+      positions: "3 open positions",
+      imageUrl:
+        "https://images.appypie.com/wp-content/uploads/2023/01/24083102/Customer-Service-Channels.jpg",
+    },
+    {
+      id: 8,
+      title: "Engineering",
+      positions: "6 open positions",
+      imageUrl:
+        "https://leverageedublog.s3.ap-south-1.amazonaws.com/blog/wp-content/uploads/2020/05/18175106/Types-of-Engineering.png",
+    },
   ];
 
   return (
-    <Container>
+    
+    <div className=" container mx-auto py-8">
+      <h3 className="text-center  font-bold text-3xl mb-6">
+        Search by Category
+      </h3>
+      <p  className="text-center  underline font-semibold text-sm mb-8 text-gray-700"> Search your career opportunity with our categories</p>
 
-      <Box sx={{  py: 8 }}>
-        <Typography variant="h4" align="left" gutterBottom>
-          Search by Category
-        </Typography>
-        <Typography variant="body2" align="left" color="textSecondary">
-          Search your career opportunity with our categories
-        </Typography>
-        <Grid container spacing={3} justifyContent="center" sx={{ mt: 4 }}>
-          {categories.map(category => (
-            <Grid item key={category.id} xs={12} sm={6} md={3}>
-              <Card sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', boxShadow: 3, borderRadius: 2 }}>
-                <CardMedia
-                  component="img"
-                  height="200"
-                  image={category.imageUrl}
-                  alt={category.title}
-                  sx={{ borderRadius: '50%', backgroundColor: '#FFDAB9' }}
-                />
-                <CardContent>
-                  <Typography variant="h5" align="center"  gutterBottom sx={{color:'black'}}>
-                    {category.title}
-                  </Typography>
-                  <Typography variant="body2" align="center" color="text.Secondary">
-                    {category.positions}
-                  </Typography>
-                </CardContent>
-              </Card>
-            </Grid>
-          ))}
-        </Grid>
-      </Box>    </Container>
+      <div className="grid  sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        {categories.map((category) => (
+          <div
+            key={category.id}
+            className="card bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden  w-[320px] h-[370px] mx-auto transition-transform duration-300 hover:scale-105"
+          >
+            <img
+              src={category.imageUrl}
+              alt={category.title}
+              className="w-full h-[250px] object-cover"
+            />
+            <div className="p-4 text-center">
+              <h2 className="text-xl font-semibold mb-2 ">{category.title}</h2>
+               <div  className="flex justify-between items-center">
+              <p className="text-gray-700">{category.positions}</p>
+              <button className="bg-blue-500 text-white px-4 py-1 rounded-lg transition-transform duration-300 hover:bg-blue-600">View</button>
+              </div>
+            </div>
+          </div>
+     
+        ))}
+      </div>
+    </div>
+  
 
   );
 };
diff --git a/client/src/components/Home/SectionSixth.jsx b/client/src/components/Home/SectionSixth.jsx
index 267dc10..155200d 100644
--- a/client/src/components/Home/SectionSixth.jsx
+++ b/client/src/components/Home/SectionSixth.jsx
@@ -7,62 +7,73 @@ const SectionFifth = () => {
     {
       id: '1',
       name: 'New York',
-      imageUrl: 'https://via.placeholder.com/300', // Example image URL
+      imageUrl: 'https://cdn.britannica.com/61/93061-050-99147DCE/Statue-of-Liberty-Island-New-York-Bay.jpg', // Example image URL
       openPositions: 500, // Example number of open positions
     },
     {
       id: '2',
       name: 'San Francisco',
-      imageUrl: 'https://via.placeholder.com/300', // Example image URL
+      imageUrl: 'https://media.istockphoto.com/id/1342281568/photo/golden-gate-bridge-with-clouds-over-san-francisco-california-usa.webp?b=1&s=170667a&w=0&k=20&c=_aCUoulYM84W-Sqh0hv17S8rVDx_Nd-Od6lTQFZJ11s=', // Example image URL
       openPositions: 300,
     },
     {
       id: '3',
       name: 'London',
-      imageUrl: 'https://via.placeholder.com/300', // Example image URL
+      imageUrl: 'https://burst.shopifycdn.com/photos/big-ben-clock.jpg?width=1000&format=pjpg&exif=0&iptc=0', // Example image URL
       openPositions: 700,
     },
     {
       id: '4',
       name: 'Tokyo',
-      imageUrl: 'https://via.placeholder.com/300', // Example image URL
+      imageUrl: 'https://a1.cdn.japantravel.com/photo/12865-215185/1440x960!/tokyo-tokyo-prefecture-215185.jpg', // Example image URL
       openPositions: 400,
     },
   ];
 
   return (
     <Container>
-    <Box sx={{ py: 8 }}>
-      <Typography variant="h4" align="left" gutterBottom>
-        Featured Cities
-      </Typography>
-      <Typography variant="body2" align="left" color="textSecondary" sx={{ mb: 4 }}>
-        Start your next career in a beautiful city
-      </Typography>
-      <Grid container spacing={3} justifyContent="center">
-        {cities.map(city => (
-          <Grid item key={city.id} xs={12} sm={6} md={3}>
-            <Card sx={{ backgroundColor: '#e3f2fd', borderRadius: 10, height: '100%' }}>
-              <CardMedia
-                component="img"
-                height="200"
-                image={city.imageUrl}
-                alt={city.name}
-                sx={{ borderTopLeftRadius: 10, borderTopRightRadius: 10, objectFit: 'cover' }}
-              />
-              <CardContent sx={{ flexGrow: 1 }}>
-                <Typography variant="h6" color="primary" gutterBottom>
-                  {city.name}
-                </Typography>
-                <Typography variant="body2" color="textSecondary">
-                  {city.openPositions} open positions
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-        ))}
-      </Grid>
-    </Box>
+      <Box sx={{ py: 8 }}>
+        <style>
+          {`
+            .card-hover {
+              transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+            }
+            .card-hover:hover {
+              transform: translateY(-10px);
+              box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            }
+          `}
+        </style>
+        <Typography variant="h4" align="left" gutterBottom>
+          Featured Cities
+        </Typography>
+        <Typography variant="body2" align="left" color="textSecondary" sx={{ mb: 4 }}>
+          Start your next career in a beautiful city
+        </Typography>
+        <Grid container spacing={3} justifyContent="center">
+          {cities.map(city => (
+            <Grid item key={city.id} xs={12} sm={6} md={3}>
+              <Card className="card-hover" sx={{ backgroundColor: '#e3f2fd', borderRadius: 10, height: '100%' }}>
+                <CardMedia
+                  component="img"
+                  height="200"
+                  image={city.imageUrl}
+                  alt={city.name}
+                  sx={{ borderTopLeftRadius: 10, borderTopRightRadius: 10, objectFit: 'cover' }}
+                />
+                <CardContent sx={{ flexGrow: 1 }}>
+                  <Typography variant="h6" color="primary" gutterBottom>
+                    {city.name}
+                  </Typography>
+                  <Typography variant="body2" color="textSecondary">
+                    {city.openPositions} open positions
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
     </Container>
   );
 };
diff --git a/client/src/components/Home/SectionThird.jsx b/client/src/components/Home/SectionThird.jsx
index c2522e6..e1e77e6 100644
--- a/client/src/components/Home/SectionThird.jsx
+++ b/client/src/components/Home/SectionThird.jsx
@@ -1,11 +1,24 @@
 import React from 'react';
 import { Box, Grid, Typography, Card, CardContent, CardMedia, Container } from '@mui/material';
 import { jobs } from '../../utils/data'; // Import jobs data from your utils/data file
+import { Link } from 'react-router-dom';
 
 const SectionThird = () => {
   return (
     <Box sx={{ backgroundColor: '#eee6db', py: 8 }}>
       <Container>
+        <style>
+          {`
+            .card-hover {
+              transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+            }
+            .card-hover:hover {
+              transform: translateY(-10px);
+              box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+              cursor: pointer;
+            }
+          `}
+        </style>
         <Typography variant="h4" align="left" gutterBottom color="black">
           Featured Job Offers
         </Typography>
@@ -15,7 +28,8 @@ const SectionThird = () => {
         <Grid container spacing={3} justifyContent="center">
           {jobs.map(job => (
             <Grid item key={job.id} xs={12} sm={6} md={3}>
-              <Card sx={{ borderRadius: 10 }}>
+ <Link to={`/job-detail/${job.id}`} style={{ textDecoration: 'none' }}>
+              <Card className="card-hover" sx={{ borderRadius: 10 }}>
                 <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '150px', backgroundColor: '#f5f5f5', borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
                   <CardMedia
                     component="img"
@@ -42,6 +56,7 @@ const SectionThird = () => {
                   </Typography>
                 </CardContent>
               </Card>
+              </Link>
             </Grid>
           ))}
         </Grid>
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index 8cc7c0a..251732b 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -19,7 +19,7 @@ function MenuList({ user, onClick }) {
             <p className="text-sm font-semibold">{user?.firstName ?? user?.name}</p>
             <span className="text-sm text-blue-600">{user?.jobTitle ?? user?.email}</span>
           </div>
-          <img
+          <img  
             src={user?.profileUrl}
             alt="user profile"
             className="w-10 h-10 rounded-full object-cover"
@@ -93,7 +93,7 @@ const Navbar = () => {
   };
 
   return (
-    <div className="relative bg-[#f9f9f9] z-50 shadow-md">
+    <div className="sticky top-0 w-full bg-[#f9f9f9] z-50 shadow-md">
       <nav className="container mx-auto flex items-center justify-between p-5">
         <Link to="/" className="text-orange-600 font-bold text-xl">
           Kaam<span className="text-[#fb923c]">Do</span>
@@ -101,7 +101,7 @@ const Navbar = () => {
 
         <ul className="hidden lg:flex gap-10 text-base text-gray-700">
           <li className="hover:bg-orange-600 hover:text-white px-3 py-2 rounded">
-            <Link to="/demos">Demos</Link>
+            <Link to="/">Home</Link>
           </li>
           <li className="hover:bg-orange-600 hover:text-white px-3 py-2 rounded">
             <Link to="/find-jobs">Find Jobs</Link>
@@ -144,8 +144,8 @@ const Navbar = () => {
       {/* MOBILE MENU */}
       <div className={`${isOpen ? "block bg-[#f9f9f9]" : "hidden"} w-full lg:hidden`}>
         <div className="container mx-auto flex flex-col pl-8 gap-3 py-5">
-          <Link to="/demos" onClick={handleCloseNavbar} className="hover:bg-orange-600 hover:text-white px-3 py-2 rounded">
-            Demos
+          <Link to="/" onClick={handleCloseNavbar} className="hover:bg-orange-600 hover:text-white px-3 py-2 rounded">
+            Home
           </Link>
           <Link to="/find-jobs" onClick={handleCloseNavbar} className="hover:bg-orange-600 hover:text-white px-3 py-2 rounded">
             Find Jobs
@@ -188,3 +188,4 @@ const Navbar = () => {
 };
 
 export default Navbar;
+
diff --git a/client/src/pages/Companies.jsx b/client/src/pages/Companies.jsx
index d235d85..fcac670 100644
--- a/client/src/pages/Companies.jsx
+++ b/client/src/pages/Companies.jsx
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { CompanyCard, CustomButton, Header, ListBox } from "../components";
 import { companies } from "../utils/data";
-import { BiArrowToTop } from "react-icons/bi";
 
 const Companies = () => {
   const [page, setPage] = useState(1);
@@ -17,11 +16,22 @@ const Companies = () => {
   const location = useLocation();
   const navigate = useNavigate();
 
-  const handleSearchSubmit = () => {};
-  const handleShowMore = () => {};
+  const handleSearchSubmit = () => { };
+  const handleShowMore = () => { };
 
   return (
     <div className='w-full'>
+      <style>
+        {`
+          .card-hover {
+            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+          }
+          .card-hover:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+          }
+        `}
+      </style>
       <Header
         title='Find Your Dream Company'
         handleClick={handleSearchSubmit}
@@ -34,7 +44,7 @@ const Companies = () => {
       <div className='container mx-auto flex flex-col gap-5 2xl:gap-10 px-5 md:px-0 py-6 bg-[#f7fdfd]'>
         <div className='flex items-center justify-between mb-4'>
           <p className='text-sm md:text-base'>
-            Shwoing: <span className='font-semibold'>1,902</span> Companies
+            Showing: <span className='font-semibold'>1,902</span> Companies
             Available
           </p>
 
@@ -47,7 +57,9 @@ const Companies = () => {
 
         <div className='w-full flex flex-col gap-6'>
           {data?.map((cmp, index) => (
-            <CompanyCard cmp={cmp} key={index} />
+            <div className="card-hover" key={index}>
+              <CompanyCard cmp={cmp} />
+            </div>
           ))}
 
           {isFetching && (
@@ -71,8 +83,6 @@ const Companies = () => {
           </div>
         )}
       </div>
-      {/* Top Scroll Btn */}
-      <BiArrowToTop className="fixed bottom-4 right-4 border rounded-full p-1" size={50} onClick={()=>{window.scrollTo({ top: 0, left: 0, behavior: "smooth"});}}/>
     </div>
   );
 };
diff --git a/client/src/pages/FindJobs.jsx b/client/src/pages/FindJobs.jsx
index 1c15bb1..0f1b2b6 100644
--- a/client/src/pages/FindJobs.jsx
+++ b/client/src/pages/FindJobs.jsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { BiArrowToTop, BiBriefcaseAlt2 } from "react-icons/bi";
+import { BiBriefcaseAlt2 } from "react-icons/bi";
 import { BsStars } from "react-icons/bs";
 import { MdOutlineKeyboardArrowDown } from "react-icons/md";
 
@@ -39,10 +39,21 @@ const FindJobs = () => {
 
   return (
     <div>
+      <style>
+        {`
+          .card-hover {
+            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+          }
+          .card-hover:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+          }
+        `}
+      </style>
       <Header
         title='Find Your Dream Job with Ease'
         type='home'
-        handleClick={() => {}}
+        handleClick={() => { }}
         searchQuery={searchQuery}
         setSearchQuery={setSearchQuery}
         location={jobLocation}
@@ -124,7 +135,9 @@ const FindJobs = () => {
 
           <div className='w-full flex flex-wrap gap-4'>
             {jobs.map((job, index) => (
-              <JobCard job={job} key={index} />
+              <div className="card-hover" key={index}>
+                <JobCard job={job} />
+              </div>
             ))}
           </div>
 
@@ -138,8 +151,6 @@ const FindJobs = () => {
           )}
         </div>
       </div>
-      {/* Top Scroll Btn */}
-      <BiArrowToTop className="fixed bottom-4 right-4 border rounded-full p-1" size={50} onClick={()=>{window.scrollTo({ top: 0, left: 0, behavior: "smooth"});}}/>
     </div>
   );
 };
diff --git a/client/vercel.json b/client/vercel.json
new file mode 100644
index 0000000..520bf7a
--- /dev/null
+++ b/client/vercel.json
@@ -0,0 +1,5 @@
+{
+    "rewrites": [
+        {"source": "/(.*)", "destination": "/"}
+    ]
+}
diff --git a/package-lock.json b/package-lock.json
index ae4e846..7eb8819 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,4 +47,5 @@
       }
     }
   }
+  "packages": {}
 }
diff --git a/server/package.json b/server/package.json
index 56c9c0d..74df09c 100644
--- a/server/package.json
+++ b/server/package.json
@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "start": "nodemon server.js",
+    "dev": "nodemon server.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",