diff --git a/package-lock.json b/package-lock.json
index 21822e7..b7bcdbc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.3.1",
         "react-github-calendar": "^4.5.2",
+        "react-icons": "^5.5.0",
         "rimraf": "^5.0.10",
         "tailwind-merge": "^2.5.5"
       },
@@ -4552,6 +4553,14 @@
         "react": "^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index e4e9c55..3f7f433 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-github-calendar": "^4.5.2",
+    "react-icons": "^5.5.0",
     "rimraf": "^5.0.10",
     "tailwind-merge": "^2.5.5"
   },
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index fb43fca..a3a995c 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -8,11 +8,11 @@ const DashboardLayout = ({ children }: PropsWithChildren) => {
     return (
         <SelectedButtonProvider>
             <div className="flex min-h-screen w-full ">
-                <div className='w-2/12 h-screen top-0 sticky'>
+                <div className="fixed left-0 top-0 h-screen z-50 md:w-2/12 md:sticky">
                     <Sidebar />
                 </div>
                 {/* Content area will take the remaining space */}
-                <div className="w-10/12 bg-bgMainColor">
+                <div className="bg-bgMainColor w-full md:w-10/12 ml-20 md:ml-0">
                     {children}
                 </div>
             </div>
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index aea9dba..279f9fe 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -15,4 +15,4 @@ const DashboardPage = () => {
     );
 };
 
-export default DashboardPage;
+export default DashboardPage;
\ No newline at end of file
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index aca7976..373d606 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,9 +1,10 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import SideBarButton from "./SidebarButton";
 import { Award, CalendarCheck2, Home } from "lucide-react";
 import { useSelectedButton } from "@/context/SelectedButtonContext"; // Adjust the path as necessary
 import Image from 'next/image';
+import { FaAngleLeft, FaAngleRight } from "react-icons/fa";
 
 const buttons = [
     {
@@ -21,33 +22,77 @@ const buttons = [
 ];
 
 const SidePanel: React.FC = () => {
+    const [collapsed, setcollapsed] = useState(true);
+    const [isMobile, setIsMobile] = useState(false);
     const { setSelectedButton } = useSelectedButton();
 
     const handleButtonClick = (name: string) => {
         setSelectedButton(name);
     };
+    const toggleCollapsed = () => {
+        setcollapsed(!collapsed);
+    }
 
-    return (
-        <div className="flex flex-col items-center min-h-full p-5 bg-panelColor text-white w-full">
-            <div className="flex flex-col md:flex-row items-center">
-                <Image
-                    src="/amfoss-logo-white.png"
-                    alt="amfoss-logo-white"
-                    className="h-auto min-w-[10vw] sm:w-[10vw] md:w-[40px] lg:w-[50px] md:min-w-[40px] lg:min-w-[50px] max-h-auto"
-                    width={50}
-                    height={50}
-                    priority
-                />
-                <div className="hidden md:flex flex-col text-center text-[20px] md:text-[24px] font-jetbrains items-center text-offWhite justify-center md:ml-2">
-                    Home
+    useEffect(() => {
+        const handleResize = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+
+        handleResize();
+        window.addEventListener('resize', handleResize);
+
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return (!isMobile ?
+        <div className="flex flex-col items-center min-h-full py-5 px-3 bg-panelColor text-white w-full">
+            <div className="flex flex-row md:justify-evenly w-full">
+                <div className="flex flex-col md:flex-row items-center">
+                    <Image
+                        src="/amfoss-logo-white.png"
+                        alt="amfoss-logo-white"
+                        className="h-auto min-w-[10vw] md:w-[40px] lg:w-[50px] md:min-w-[40px] lg:min-w-[50px] max-h-auto"
+                        width={50}
+                        height={50}
+                        priority
+                    />
+                    <div className="md:flex flex-col text-center text-[20px] md:text-[24px] font-jetbrains items-center text-offWhite justify-center md:ml-2">
+                        Home
+                    </div>
                 </div>
             </div>
-            <div className="sm:flex flex-col space-y-4 font-jetbrains m-2 mt-10 overflow-hidden lg:w-full">
+            <div className="md:flex flex-col space-y-4 font-jetbrains m-2 mt-10 overflow-hidden lg:w-full">
+                {buttons.map((button, index) => (
+                    <SideBarButton
+                        key={index}
+                        icon={button.icon}
+                        text={button.name}
+                        collapsed={collapsed}
+                        onClick={() => handleButtonClick(button.name.toLowerCase())}
+                    />
+                ))}
+            </div>
+        </div> :
+        // For mobile scren
+        <div className="flex flex-col items-center min-h-full py-5 px-2 bg-panelColor text-white w-full">
+            <div className="flex flex-row items-center">
+                <Image
+                        src="/amfoss-logo-white.png"
+                        alt="amfoss-logo-white"
+                        className="h-auto w-[8vw] max-h-auto"
+                        width={50}
+                        height={50}
+                        priority
+                    />
+                    <div className="flex text-center items-center mr-0" onClick={toggleCollapsed}>{collapsed ? <FaAngleRight className="text-2xl" /> : <FaAngleLeft className="text-2xl"/>}</div>
+                </div>
+            <div className="sflex flex-col space-y-4 font-jetbrains m-2 mt-10 overflow-hidden">
                 {buttons.map((button, index) => (
                     <SideBarButton
                         key={index}
                         icon={button.icon}
                         text={button.name}
+                        collapsed={collapsed}
                         onClick={() => handleButtonClick(button.name.toLowerCase())}
                     />
                 ))}
diff --git a/src/components/SidebarButton.tsx b/src/components/SidebarButton.tsx
index 1fb3457..8f9d23a 100644
--- a/src/components/SidebarButton.tsx
+++ b/src/components/SidebarButton.tsx
@@ -3,13 +3,14 @@ import React from 'react';
 type SideBarButtonProps = {
   icon?: React.ReactElement;
   text: string;
+  collapsed: boolean;
   onClick: (text: string) => void;
 };
 
-const SideBarButton: React.FC<SideBarButtonProps> = ({ icon, text, onClick }) => {
+const SideBarButton: React.FC<SideBarButtonProps> = ({ icon, text, onClick, collapsed }) => {
   return (
     <div
-      className="lg:flex justify-center items-center max-w-full bg-panelButtonColor p-5 rounded-none sm:rounded-md md:rounded-xl text-white overflow-hidden cursor-pointer transition-colors duration-500"
+      className="lg:flex sm:flex sm:flex-row md:block justify-center items-center max-w-full bg-panelButtonColor lg:p-5 md:px-1 sm:px-4 sm:py-5 rounded-none sm:rounded-md md:rounded-xl text-white overflow-hidden cursor-pointer transition-colors duration-500"
       onClick={() => onClick(text)}
       title={text}
     >
@@ -22,9 +23,11 @@ const SideBarButton: React.FC<SideBarButtonProps> = ({ icon, text, onClick }) =>
 
       {/* Text container */}
       <div className="flex-1 flex items-center justify-center z-20">
-        <div className="text-base lg:text-lg hidden md:block">{text}</div>
+        <div className={`text-base lg:text-lg ${collapsed ? "hidden" : ""} md:block`}>{text}</div>
       </div>
+
     </div>
+
   );
 };
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 397cedb..27689bb 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -47,7 +47,7 @@ export default {
       },
       screens: {
         sm: "0px",
-        md: "640px",
+        md: "768px",
         lg: "1024px",
         xl: "1280px",
       },