diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f5f90df..7ba51c0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,7 +14,8 @@
         "@mui/material": "^6.0.2",
         "axios": "^1.7.7",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.2"
       },
       "devDependencies": {
         "@eslint/js": "^9.9.0",
@@ -1462,6 +1463,14 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
+      "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.21.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.2.tgz",
@@ -4176,6 +4185,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
+      "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
+      "dependencies": {
+        "@remix-run/router": "1.19.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
+      "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
+      "dependencies": {
+        "@remix-run/router": "1.19.2",
+        "react-router": "6.26.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 6fcfeaf..2c1e135 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,7 +16,8 @@
     "@mui/material": "^6.0.2",
     "axios": "^1.7.7",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
diff --git a/frontend/src/components/MeetingCard.tsx b/frontend/src/components/MeetingCard.tsx
index bfa9cc1..b34ca1e 100644
--- a/frontend/src/components/MeetingCard.tsx
+++ b/frontend/src/components/MeetingCard.tsx
@@ -1,17 +1,15 @@
-import React from 'react'
-
 function MeetingCard() {
   return (
-    <div className='border border-gray-300 w-full h-full py-4 rounded-md flex items-center justify-center'>
-          <div className="flex flex-col">
-              <p className="text-gray-600 text-lg text-center">Scheduled meetings</p>
-              <p className="text-xl font-semibold text-center">11:00 - 12:00</p>
-              <button className="bg-blue-500 text-white px-3 py-1 rounded-md mt-2">
-                  Open Zoom Link
-              </button>
-          </div>
+    <div className="border border-gray-300 w-full h-full py-6 rounded-md flex items-center justify-center">
+      <div className="text-center">
+        <p className="text-gray-600 text-lg">Scheduled meetings</p>
+        <p className="text-xl font-semibold">11:00 - 12:00</p>
+        <button className="bg-blue-500 text-white px-4 py-2 rounded-md mt-3 md:h-10 md:w-24">
+          Open Zoom Link
+        </button>
+      </div>
     </div>
-  )
+  );
 }
 
-export default MeetingCard
\ No newline at end of file
+export default MeetingCard;
diff --git a/frontend/src/components/ProjectSummary.tsx b/frontend/src/components/ProjectSummary.tsx
index 879094d..af02d68 100644
--- a/frontend/src/components/ProjectSummary.tsx
+++ b/frontend/src/components/ProjectSummary.tsx
@@ -1,76 +1,79 @@
-import React, { useState, useEffect } from 'react';
-import Dropdown from './common/Dropdown';
-import { TableContainer, Table, TableBody, TableCell, TableHead, TableRow, Paper } from '@mui/material';
-import { Project } from '../interfaces/interfaces';
-
-function createData(
-  projectName: string,
-  teamLead: string,
-  createdAt: string,
-  status: string
-) {
-  return { projectName, teamLead, createdAt, status };
-}
+import React from "react";
+import Dropdown from "./common/Dropdown";
+import {
+  TableContainer,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Paper,
+} from "@mui/material";
+import { Project } from "../interfaces/interfaces";
 
 interface ProjectSummaryProps {
-    projects: Project[];
-  }
-  
-  const ProjectSummary: React.FC<ProjectSummaryProps> = ({ projects }) => {
-
-
+  projects: Project[];
+}
 
-  const rows = projects.map(project => {
-    const teamLead = project.teams[0]?.teamLeadName || 'Unknown';
-    return createData(project.name, teamLead, project.createdAt, 'Open');
-  });
+const ProjectSummary: React.FC<ProjectSummaryProps> = ({ projects }) => {
+  const rows = projects.map((project) => ({
+    projectName: project.name,
+    teamLead: project.teams[0]?.teamLeadName || "Unknown",
+    createdAt: project.createdAt,
+    status: "Open",
+  }));
 
   const dropdowns = [
     {
-      label: 'Project',
-      options: ['Internal', 'Client', 'Research', 'Maintenance', 'New Development']
+      label: "Project",
+      options: [
+        "Internal",
+        "Client",
+        "Research",
+        "Maintenance",
+        "New Development",
+      ],
     },
     {
-      label: 'Status',
-      options: ['Open', 'Progress', 'Review', 'Closed']
-    }
+      label: "Status",
+      options: ["Open", "Progress", "Review", "Closed"],
+    },
   ];
 
   return (
-    <div className='border border-gray-300 rounded-md'>
-      <div className='w-full flex justify-between items-center p-3'>
-        <h2 className="lg:text-xl md:text-lg font-semibold">Project Summary</h2>
-        <div className='flex gap-4'>
+    <div className="border border-gray-300 rounded-md">
+      <div className="flex justify-between items-center p-4">
+        <h2 className="text-lg md:text-xl font-semibold">Project Summary</h2>
+        <div className="flex gap-4">
           {dropdowns.map((dropdown, index) => (
-            <div key={index} className='border border-gray-300 rounded-md'>
-              <Dropdown label={dropdown.label} options={dropdown.options} />
-            </div>
+            <Dropdown
+              key={index}
+              label={dropdown.label}
+              options={dropdown.options}
+            />
           ))}
         </div>
       </div>
-      <div className='p-4' style={{ height: '17rem', overflow: 'auto' }}>
-        <TableContainer component={Paper} style={{ maxHeight: '100%', overflowX: 'hidden' }}>
-          <Table stickyHeader sx={{ minWidth: 650 }} aria-label="project table">
+      <div className="p-4" style={{ height: "17rem", overflowY: "auto" }}>
+        <TableContainer component={Paper}>
+          <Table stickyHeader aria-label="project table">
             <TableHead>
               <TableRow>
-                <TableCell style={{ fontWeight: 'bold' }}>Project Name</TableCell>
-                <TableCell align="left" style={{ fontWeight: 'bold' }}>Team Lead</TableCell>
-                <TableCell align="left" style={{ fontWeight: 'bold' }}>Created At</TableCell>
-                <TableCell align="left" style={{ fontWeight: 'bold' }}>Status</TableCell>
+                <TableCell style={{ fontWeight: "bold" }}>
+                  Project Name
+                </TableCell>
+                <TableCell style={{ fontWeight: "bold" }}>Team Lead</TableCell>
+                <TableCell style={{ fontWeight: "bold" }}>Created At</TableCell>
+                <TableCell style={{ fontWeight: "bold" }}>Status</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
               {rows.map((row, index) => (
-                <TableRow
-                  key={index}
-                  sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-                >
-                  <TableCell component="th" scope="row" style={{ fontWeight: 'bold' }}>
-                    {row.projectName}
-                  </TableCell>
-                  <TableCell align="left">{row.teamLead}</TableCell>
-                  <TableCell align="left">{row.createdAt}</TableCell>
-                  <TableCell align="left">{row.status}</TableCell>
+                <TableRow key={index}>
+                  <TableCell>{row.projectName}</TableCell>
+                  <TableCell>{row.teamLead}</TableCell>
+                  <TableCell>{row.createdAt}</TableCell>
+                  <TableCell>{row.status}</TableCell>
                 </TableRow>
               ))}
             </TableBody>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 6cebc5e..c59f89c 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,37 +1,48 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import PeopleIcon from '@mui/icons-material/People';
-import FolderIcon from '@mui/icons-material/Folder';
-import ReportProblemIcon from '@mui/icons-material/ReportProblem';
+import React from "react";
+import { Link } from "react-router-dom";
+import DashboardIcon from "@mui/icons-material/Dashboard";
+import PeopleIcon from "@mui/icons-material/People";
+import FolderIcon from "@mui/icons-material/Folder";
+import ReportProblemIcon from "@mui/icons-material/ReportProblem";
 
 const menuItems = [
-  { to: '/app/dashboard', icon: <DashboardIcon />, label: 'Dashboard' },
-  { to: '/app/teams', icon: <PeopleIcon />, label: 'Teams' },
-  { to: '/app/projects', icon: <FolderIcon />, label: 'Projects' },
-  { to: '/app/issues', icon: <ReportProblemIcon />, label: 'Issues' },
+  { to: "/app/dashboard", icon: <DashboardIcon />, label: "Dashboard" },
+  { to: "/app/teams", icon: <PeopleIcon />, label: "Teams" },
+  { to: "/app/projects", icon: <FolderIcon />, label: "Projects" },
+  { to: "/app/issues", icon: <ReportProblemIcon />, label: "Issues" },
 ];
 
 const Sidebar: React.FC<{ isOnlyIcon: boolean }> = ({ isOnlyIcon }) => {
   return (
-    <aside className={` bg-blue-500 text-white h-screen p-1 ${isOnlyIcon ? 'w-16' : 'w-56'}`}>
-      <div className='py-3'>
+    <aside
+      className={` bg-blue-500 text-white h-screen p-1 ${
+        isOnlyIcon ? "w-16" : "w-56"
+      }`}
+    >
+      <div className="py-3">
         <div className="text-xl font-bold pb-3 flex justify-center">
-          { !isOnlyIcon ? 
-              <Link to="/app/dashboard" className="hover:text-blue-400">ProjectPulse</Link> : 
-              <Link to="/app/dashboard" className="hover:text-blue-400" >P</Link>
-          }
+          {!isOnlyIcon ? (
+            <Link to="/app/dashboard" className="hover:text-blue-400">
+              ProjectPulse
+            </Link>
+          ) : (
+            <Link to="/app/dashboard" className="hover:text-blue-400">
+              P
+            </Link>
+          )}
         </div>
         <hr />
       </div>
-      
-      <nav className='pt-8'>
+
+      <nav className="pt-8">
         <ul className="space-y-3">
           {menuItems.map((item, index) => (
             <li key={index}>
-              <Link 
-                to={item.to} 
-                className={`flex items-center p-3 rounded-md hover:bg-blue-400 transition-colors ${isOnlyIcon ? 'justify-center' : ''}`}
+              <Link
+                to={item.to}
+                className={`flex items-center p-3 rounded-md hover:bg-blue-400 transition-colors ${
+                  isOnlyIcon ? "justify-center" : ""
+                }`}
               >
                 {item.icon}
                 {!isOnlyIcon && <span className="ml-4">{item.label}</span>}
diff --git a/frontend/src/components/StatsCard.tsx b/frontend/src/components/StatsCard.tsx
index 07220cd..2fac512 100644
--- a/frontend/src/components/StatsCard.tsx
+++ b/frontend/src/components/StatsCard.tsx
@@ -1,39 +1,41 @@
-import React from 'react'; 
-import WorkOutlineIcon from '@mui/icons-material/WorkOutline';
-import AssignmentTurnedInOutlinedIcon from '@mui/icons-material/AssignmentTurnedInOutlined';
-import DriveFolderUploadOutlinedIcon from '@mui/icons-material/DriveFolderUploadOutlined';
+import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
+import AssignmentTurnedInOutlinedIcon from "@mui/icons-material/AssignmentTurnedInOutlined";
+import DriveFolderUploadOutlinedIcon from "@mui/icons-material/DriveFolderUploadOutlined";
 
 const statsData = [
   {
     id: 1,
-    title: 'Projects',
-    value: '100/110',
-    icon: <WorkOutlineIcon fontSize='large' />,
+    title: "Projects",
+    value: "100/110",
+    icon: <WorkOutlineIcon fontSize="large" />,
   },
   {
     id: 2,
-    title: 'Tasks',
-    value: '130/150',
-    icon: <AssignmentTurnedInOutlinedIcon fontSize='large' />,
+    title: "Tasks",
+    value: "130/150",
+    icon: <AssignmentTurnedInOutlinedIcon fontSize="large" />,
   },
   {
     id: 3,
-    title: 'Resources',
-    value: '34/56',
-    icon: <DriveFolderUploadOutlinedIcon fontSize='large' />,
+    title: "Resources",
+    value: "34/56",
+    icon: <DriveFolderUploadOutlinedIcon fontSize="large" />,
   },
 ];
 
 function StatsCard() {
   return (
-    <div className="grid lg:grid-cols-3 md:grid-cols-1  gap-4 py-4">
+    <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
       {statsData.map((stat) => (
-        <div key={stat.id} className="flex p-5 border border-gray-300 rounded-md gap-3">
-          <div className={`w-16 h-16 bg-gray-300 rounded-full flex items-center justify-center`}>
+        <div
+          key={stat.id}
+          className="flex p-5 border border-gray-300 rounded-md gap-3"
+        >
+          <div className="w-16 h-16 bg-gray-300 rounded-full flex items-center justify-center">
             {stat.icon}
           </div>
-          <div className='flex flex-col'>
-            <h3 className="text-2xl font-semibold">{stat.value}</h3>
+          <div className="flex flex-col">
+            <h3 className="text-xl lg:text-2xl font-semibold">{stat.value}</h3>
             <p className="text-gray-500 font-semibold">{stat.title}</p>
           </div>
         </div>
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 9d12c13..3e2dba0 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,14 +1,10 @@
-import React, { useEffect, useState } from 'react';
-import StatsCard from '../components/StatsCard';
-import MeetingCard from '../components/MeetingCard';
-import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';
-import ProjectSummary from '../components/ProjectSummary';
-import { ApiResponse, Project } from '../interfaces/interfaces';
-import { getProjects } from '../services/api/projectService';
-
-
-
-
+import React, { useEffect, useState } from "react";
+import StatsCard from "../components/StatsCard";
+import MeetingCard from "../components/MeetingCard";
+import ArrowDropDownOutlinedIcon from "@mui/icons-material/ArrowDropDownOutlined";
+import ProjectSummary from "../components/ProjectSummary";
+import { ApiResponse, Project } from "../interfaces/interfaces";
+import { getProjects } from "../services/api/projectService";
 
 const Dashboard: React.FC = () => {
   const [projects, setProjects] = useState<Project[]>([]);
@@ -33,31 +29,36 @@ const Dashboard: React.FC = () => {
   // }, []);
 
   return (
-    <div className="p-2">
-      <div className="flex flex-col md:flex-row">
-        <div className="w-full md:w-3/4 flex flex-col md:mb-0">
-          <div className='w-full flex justify-between items-center'>
-            <h2 className="lg:text-2xl md:text-lg font-semibold">Your Dashboard</h2>
-            <div className='px-3 py-1 border border-gray-300 rounded-md flex items-center'>
-              last 30 days <ArrowDropDownOutlinedIcon className="ml-1" />
+    <div className="p-4 md:p-6 lg:p-8">
+      {/* Top Section: Dashboard Header and Stats */}
+      <div className="flex flex-col md:flex-row gap-4">
+        <div className="w-full md:w-3/4">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-lg md:text-xl lg:text-2xl font-semibold">
+              Your Dashboard
+            </h2>
+            <div className="px-3 py-1 border border-gray-300 rounded-md flex items-center">
+              Last 30 days <ArrowDropDownOutlinedIcon className="ml-1" />
             </div>
           </div>
           <StatsCard />
         </div>
 
-        <div className="md:w-full lg:w-1/4 md:px-4 md:pb-4">
+        <div className="w-full md:w-1/4">
           <MeetingCard />
         </div>
       </div>
-      <div className="flex">
-        <div className="basis-2/3">
-          <ProjectSummary projects={projects}/>
+
+      {/* Bottom Section: Project Summary and Preview */}
+      <div className="flex flex-col lg:flex-row gap-4 mt-6">
+        <div className="lg:w-2/3 w-full">
+          <ProjectSummary projects={projects} />
         </div>
-        <div className="basis-1/3 flex justify-center items-center">
-        place for the Preview 
+        <div className="lg:w-1/3 w-full flex justify-center items-center border border-gray-300 rounded-md">
+          Place for the Preview
         </div>
       </div>
-  </div>
+    </div>
   );
 };