diff --git a/app/Admin/page.tsx b/app/Admin/page.tsx
index c239090..088770e 100644
--- a/app/Admin/page.tsx
+++ b/app/Admin/page.tsx
@@ -5,35 +5,51 @@ import Header from "../Components/Area_banner"
 import Sidebar from "../Components/Area_sidebar"
 import UsersPanel from "../Components/User_panel"
 import ServicesPanel from "../Components/Service_panel"
-
+import { Menu, X } from "lucide-react"
 
 export default function AdminDashboard() {
   const [tab, setTab] = useState<"users" | "services">("users")
+  const [sidebarOpen, setSidebarOpen] = useState(false)
 
   return (
     <div className="min-h-screen bg-[#FFFAFA] flex flex-col">
       <Header />
-      <Sidebar />
-
-      <main className="ml-60 p-10 flex-1">
-        <h1 className="text-4xl font-bold mb-10 text-black">Admin Dashboard</h1>
-
-        <div className="flex gap-6 mb-10">
+      <button
+        onClick={() => setSidebarOpen(!sidebarOpen)}
+        className="fixed top-4 right-4 z-50 p-2 bg-white rounded-lg shadow-lg lg:hidden hover:bg-gray-100 transition-colors"
+        aria-label="Toggle menu"
+      >
+        {sidebarOpen ? <X size={24} className="text-[#1B264F]" /> : <Menu size={24} className="text-[#1B264F]" />}
+      </button>
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-opacity-50 z-30 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+      <div className={`
+        fixed top-0 left-0 h-full z-40 transition-transform duration-300 ease-in-out
+        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0
+      `}>
+        <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+      </div>
+      <main className="ml-0 lg:ml-60 p-4 sm:p-6 md:p-8 lg:p-10 flex-1">
+        <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-6 md:mb-10 text-black">Admin Dashboard</h1>
+        <div className="flex flex-col sm:flex-row gap-3 sm:gap-6 mb-6 md:mb-10">
           {["users", "services"].map((t) => (
             <button
               key={t}
               onClick={() => setTab(t as any)}
-              className={`px-6 py-2 rounded-md text-lg font-medium transition
-                ${tab === t ? "bg-[#1B264F] text-white" : "bg-[#5A80F0] border hover:bg-gray-500"}`}
+              className={`w-full sm:w-auto px-6 py-2 rounded-md text-base sm:text-lg font-medium transition
+                ${tab === t ? "bg-[#1B264F] text-white" : "bg-[#5A80F0] text-white hover:bg-[#4a6cd1]"}`}
             >
               {t.toUpperCase()}
             </button>
           ))}
         </div>
-
         {tab === "users" && <UsersPanel />}
         {tab === "services" && <ServicesPanel />}
       </main>
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/app/Components/Area_sidebar.tsx b/app/Components/Area_sidebar.tsx
index a87ec75..a94d77b 100644
--- a/app/Components/Area_sidebar.tsx
+++ b/app/Components/Area_sidebar.tsx
@@ -3,7 +3,12 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 
-export default function Sidebar() {
+interface SidebarProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+}
+
+export default function Sidebar({ isOpen = true, onClose }: SidebarProps) {
   const pathname = usePathname();
   const baseStyle = "px-6 py-8 text-xl cursor-pointer block w-full h-full";
   const hoverStyle = "hover:text-black hover:bg-[#FFFAFA]";
@@ -65,22 +70,26 @@ export default function Sidebar() {
     init();
   }, []);
 
-  useEffect(() => {
-  }, [userRole]);
+  const handleLinkClick = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
 
   if (loading) {
     return (
-      <div className="absolute left-0 top-0 h-full w-60 bg-[#1B264F] z-15" />
+      <div className="h-full w-60 bg-[#1B264F] z-15" />
     );
   }
 
   return (
-    <div className="absolute left-0 top-0 h-full w-60 bg-[#1B264F] z-15">
-      <nav className="mt-15">
+    <div className="h-full w-60 bg-[#1B264F] z-15">
+      <nav className="mt-16">
         <ul>
           <li>
             <Link
               href="/Dashboard"
+              onClick={handleLinkClick}
               className={`${baseStyle} ${
                 pathname === "/Dashboard"
                   ? "bg-[#FFFAFA] text-black"
@@ -93,6 +102,7 @@ export default function Sidebar() {
           <li>
             <Link
               href="/Services"
+              onClick={handleLinkClick}
               className={`${baseStyle} ${
                 pathname === "/Services"
                   ? "bg-[#FFFAFA] text-black"
@@ -106,6 +116,7 @@ export default function Sidebar() {
             <li>
               <Link
                 href="/Admin"
+                onClick={handleLinkClick}
                 className={`${baseStyle} ${
                   pathname === "/Admin"
                     ? "bg-[#FFFAFA] text-black"
diff --git a/app/Components/Service_panel.tsx b/app/Components/Service_panel.tsx
index 01a3c06..a55d59c 100644
--- a/app/Components/Service_panel.tsx
+++ b/app/Components/Service_panel.tsx
@@ -6,9 +6,9 @@ type ServiceStats = {
   reactionsCount: number
 }
 
-const countServiceStats = (aboutData: any): ServiceStats[] => {  
+const countServiceStats = (aboutData: any): ServiceStats[] => {
   let servicesArray: any[] = []
-  
+
   if (Array.isArray(aboutData)) {
     servicesArray = aboutData
   } else if (aboutData?.server?.services && Array.isArray(aboutData.server.services)) {
@@ -20,7 +20,7 @@ const countServiceStats = (aboutData: any): ServiceStats[] => {
   return servicesArray.map((service: any) => {
     const actionsCount = (service.actions && Array.isArray(service.actions)) ? service.actions.length : 0
     const reactionsCount = (service.reactions && Array.isArray(service.reactions)) ? service.reactions.length : 0
-        
+
     return {
       name: service.name,
       actionsCount,
@@ -38,14 +38,14 @@ export default function ServicesPanel() {
     const fetchServices = async () => {
       try {
         const response = await fetch("http://localhost:8080/about.json")
-        
+
         if (!response.ok) {
           throw new Error(`HTTP ${response.status}`)
         }
 
-        const data = await response.json()        
+        const data = await response.json()
         const formattedServices = countServiceStats(data)
-        
+
         setServices(formattedServices)
       } catch (err) {
         console.error("Error fetching services:", err)
@@ -61,7 +61,7 @@ export default function ServicesPanel() {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-96">
-        <p className="text-white text-lg">Chargement des services...</p>
+        <p className="text-black text-base sm:text-lg">Chargement des services...</p>
       </div>
     )
   }
@@ -69,7 +69,7 @@ export default function ServicesPanel() {
   if (error) {
     return (
       <div className="flex items-center justify-center min-h-96">
-        <p className="text-red-400 text-lg">{error}</p>
+        <p className="text-red-500 text-base sm:text-lg">{error}</p>
       </div>
     )
   }
@@ -77,24 +77,24 @@ export default function ServicesPanel() {
   if (services.length === 0) {
     return (
       <div className="flex items-center justify-center min-h-96">
-        <p className="text-white/60 text-lg">Aucun service trouvé</p>
+        <p className="text-gray-600 text-base sm:text-lg">Aucun service trouvé</p>
       </div>
     )
   }
 
   return (
-    <div className="grid grid-cols-3 gap-6">
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
       {services.map((s) => (
         <div
           key={s.name}
-          className="bg-[#1B264F] rounded-xl shadow p-6 hover:shadow-lg transition"
+          className="bg-[#1B264F] rounded-xl shadow p-4 sm:p-6 hover:shadow-lg transition"
         >
-          <h3 className="text-xl font-bold mb-4 text-white">{s.name}</h3>
+          <h3 className="text-lg sm:text-xl font-bold mb-3 sm:mb-4 text-white">{s.name}</h3>
           <div className="space-y-2">
-            <p className="text-white/80">
+            <p className="text-sm sm:text-base text-white/80">
               <span className="font-semibold">Actions:</span> {s.actionsCount}
             </p>
-            <p className="text-white/80">
+            <p className="text-sm sm:text-base text-white/80">
               <span className="font-semibold">Reactions:</span> {s.reactionsCount}
             </p>
           </div>
diff --git a/app/Components/User_panel.tsx b/app/Components/User_panel.tsx
index c4489c6..c313740 100644
--- a/app/Components/User_panel.tsx
+++ b/app/Components/User_panel.tsx
@@ -77,8 +77,8 @@ export default function UsersPanel() {
 
   if (loading) {
     return (
-      <div className="bg-[#1B264F] rounded-xl shadow p-6">
-        <h2 className="text-2xl font-bold mb-6 text-white">Users</h2>
+      <div className="bg-[#1B264F] rounded-xl shadow p-4 sm:p-6">
+        <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-white">Users</h2>
         <p className="text-white/60">Chargement...</p>
       </div>
     )
@@ -86,10 +86,10 @@ export default function UsersPanel() {
 
   if (!isAdmin || error) {
     return (
-      <div className="bg-[#1B264F] rounded-xl shadow p-6 flex items-center justify-center min-h-96">
+      <div className="bg-[#1B264F] rounded-xl shadow p-4 sm:p-6 flex items-center justify-center min-h-96">
         <div className="text-center">
-          <h2 className="text-2xl font-bold mb-4 text-red-400">Access denied</h2>
-          <p className="text-white/60">You do not have the necessary permissions to access this page.</p>
+          <h2 className="text-xl sm:text-2xl font-bold mb-4 text-red-400">Access denied</h2>
+          <p className="text-sm sm:text-base text-white/60">You do not have the necessary permissions to access this page.</p>
         </div>
       </div>
     )
@@ -97,57 +97,97 @@ export default function UsersPanel() {
 
   if (users.length === 0) {
     return (
-      <div className="bg-[#1B264F] rounded-xl shadow p-6">
-        <h2 className="text-2xl font-bold mb-6 text-white">Users</h2>
+      <div className="bg-[#1B264F] rounded-xl shadow p-4 sm:p-6">
+        <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-white">Users</h2>
         <p className="text-white/60">Aucun utilisateur trouvé</p>
       </div>
     )
   }
 
   return (
-    <div className="bg-[#1B264F] rounded-xl shadow p-6">
-      <h2 className="text-2xl font-bold mb-6 text-white">Users</h2>
-      <table className="w-full text-left text-white">
-        <thead>
-          <tr className="border-b border-white/20">
-            <th className="pb-3">Email</th>
-            <th>Status</th>
-            <th>Role</th>
-          </tr>
-        </thead>
-        <tbody>
-          {users.map((u) => (
-            <tr key={u.id} className="border-b border-white/10 last:border-0">
-              <td className="py-4">{u.email}</td>
-              <td>
-                <span 
-                  onClick={() => changeAuthorizationStatus(u.id, !u.authorized)}
-                  className={`px-3 py-1 rounded-full text-sm font-medium cursor-pointer
-                  ${
-                    u.authorized
-                      ? "bg-green-500/20 text-green-300"
-                      : "bg-red-500/20 text-red-300"
-                  }`}
-                >
-                  {u.authorized ? "AUTHORIZED" : "UNAUTHORIZED"}
-                </span>
-              </td>
-              <td>
-                <span
-                  className={`px-3 py-1 rounded-full text-sm font-medium
-                  ${
-                    u.admin === true
-                      ? "bg-purple-500/20 text-purple-300"
-                      : "bg-blue-500/20 text-blue-300"
-                  }`}
-                >
-                  {u.admin ? "ADMIN" : "USER"}
-                </span>
-              </td>
+    <div className="bg-[#1B264F] rounded-xl shadow p-4 sm:p-6">
+      <h2 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-white">Users</h2>
+      <div className="hidden md:block overflow-x-auto">
+        <table className="w-full text-left text-white">
+          <thead>
+            <tr className="border-b border-white/20">
+              <th className="pb-3">Email</th>
+              <th>Status</th>
+              <th>Role</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            {users.map((u) => (
+              <tr key={u.id} className="border-b border-white/10 last:border-0">
+                <td className="py-4">{u.email}</td>
+                <td>
+                  <span
+                    onClick={() => changeAuthorizationStatus(u.id, !u.authorized)}
+                    className={`px-3 py-1 rounded-full text-sm font-medium cursor-pointer
+                    ${
+                      u.authorized
+                        ? "bg-green-500/20 text-green-300"
+                        : "bg-red-500/20 text-red-300"
+                    }`}
+                  >
+                    {u.authorized ? "AUTHORIZED" : "UNAUTHORIZED"}
+                  </span>
+                </td>
+                <td>
+                  <span
+                    className={`px-3 py-1 rounded-full text-sm font-medium
+                    ${
+                      u.admin === true
+                        ? "bg-purple-500/20 text-purple-300"
+                        : "bg-blue-500/20 text-blue-300"
+                    }`}
+                  >
+                    {u.admin ? "ADMIN" : "USER"}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="md:hidden space-y-4">
+        {users.map((u) => (
+          <div key={u.id} className="bg-white/5 rounded-lg p-4 space-y-3">
+            <div className="break-all">
+              <p className="text-white/60 text-sm mb-1">Email</p>
+              <p className="text-white font-medium">{u.email}</p>
+            </div>
+            <div>
+              <p className="text-white/60 text-sm mb-2">Status</p>
+              <span 
+                onClick={() => changeAuthorizationStatus(u.id, !u.authorized)}
+                className={`inline-block px-3 py-1 rounded-full text-sm font-medium cursor-pointer
+                ${
+                  u.authorized
+                    ? "bg-green-500/20 text-green-300"
+                    : "bg-red-500/20 text-red-300"
+                }`}
+              >
+                {u.authorized ? "AUTHORIZED" : "UNAUTHORIZED"}
+              </span>
+            </div>
+            <div>
+              <p className="text-white/60 text-sm mb-2">Role</p>
+              <span
+                className={`inline-block px-3 py-1 rounded-full text-sm font-medium
+                ${
+                  u.admin === true
+                    ? "bg-purple-500/20 text-purple-300"
+                    : "bg-blue-500/20 text-blue-300"
+                }`}
+              >
+                {u.admin ? "ADMIN" : "USER"}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
\ No newline at end of file
diff --git a/app/Dashboard/page.tsx b/app/Dashboard/page.tsx
index bff9f6e..b65ff1b 100644
--- a/app/Dashboard/page.tsx
+++ b/app/Dashboard/page.tsx
@@ -5,6 +5,7 @@ import DashboardBox from "../Components/Dashboard_box"
 import Sidebar from "../Components/Area_sidebar"
 import Header from "../Components/Area_banner"
 import AreaPopup from "../Components/AreaPopup"
+import { Menu, X } from "lucide-react"
 
 type Area = {
   id: string
@@ -19,6 +20,7 @@ export default function Dashboard() {
   const [loading, setLoading] = useState(true)
   const [isAuthenticated, setIsAuthenticated] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [sidebarOpen, setSidebarOpen] = useState(false)
 
   const handleAreas = async () => {
     try {
@@ -155,7 +157,7 @@ export default function Dashboard() {
   useEffect(() => {
     const init = async () => {
       const token = localStorage.getItem('authToken');
-      
+
       if (!token) {
         setIsAuthenticated(false)
         setError("Vous devez être connecté pour accéder à cette page")
@@ -166,7 +168,6 @@ export default function Dashboard() {
       await Promise.all([handleAreas(), getUserId()])
       setLoading(false)
     }
-
     init()
   }, [])
 
@@ -182,12 +183,30 @@ export default function Dashboard() {
     return (
       <div className="min-h-screen bg-[#FFFAFA] items-center justify-center relative flex flex-col">
         <Header />
-        <Sidebar />
-
-        <main className="flex-1 ml-60 flex flex-col items-center justify-center min-h-96">
+        <button
+          onClick={() => setSidebarOpen(!sidebarOpen)}
+          className="fixed top-4 right-4 z-50 p-2 bg-white rounded-lg shadow-lg lg:hidden hover:bg-gray-100 transition-colors"
+          aria-label="Toggle menu"
+        >
+          {sidebarOpen ? <X size={24} className="text-[#1B264F]" /> : <Menu size={24} className="text-[#1B264F]" />}
+        </button>
+
+        {sidebarOpen && (
+          <div
+            className="fixed inset-0 bg-opacity-50 z-30 lg:hidden"
+            onClick={() => setSidebarOpen(false)}
+          />
+        )}
+        <div className={`
+          fixed top-0 left-0 h-full z-40 transition-transform duration-300 ease-in-out
+          ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0
+        `}>
+          <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+        </div>
+        <main className="flex-1 ml-0 lg:ml-60 flex flex-col items-center justify-center min-h-96 px-4">
           <div className="text-center">
-            <h2 className="text-2xl font-bold mb-4 text-red-500">Access denied</h2>
-            <p className="text-gray-600 mb-6">
+            <h2 className="text-xl md:text-2xl font-bold mb-4 text-red-500">Access denied</h2>
+            <p className="text-sm md:text-base text-gray-600 mb-6">
               {error || "You must be logged in to access this page."}
             </p>
             <a
@@ -208,20 +227,36 @@ export default function Dashboard() {
   return (
     <div className="min-h-screen bg-[#FFFAFA] relative flex flex-col">
       <Header />
-      <Sidebar />
-
-      <main className="flex-1 ml-60 flex flex-col p-10 relative z-0">
-        <div className="w-full flex justify-between items-center mb-10">
-          <h2 className="text-4xl font-bold text-black">Active Area</h2>
+      <button
+        onClick={() => setSidebarOpen(!sidebarOpen)}
+        className="fixed top-4 right-4 z-50 p-2 bg-white rounded-lg shadow-lg lg:hidden hover:bg-gray-100 transition-colors"
+        aria-label="Toggle menu"
+      >
+        {sidebarOpen ? <X size={24} className="text-[#1B264F]" /> : <Menu size={24} className="text-[#1B264F]" />}
+      </button>
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-opacity-50 z-30 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+      <div className={`
+        fixed top-0 left-0 h-full z-40 transition-transform duration-300 ease-in-out
+        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0
+      `}>
+        <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+      </div>
+      <main className="flex-1 ml-0 lg:ml-60 flex flex-col p-4 md:p-6 lg:p-10 relative z-0">
+        <div className="w-full flex flex-col-reverse sm:flex-row justify-between items-start sm:items-center mb-6 md:mb-10 gap-4">
+          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-black">Active Area</h2>
 
           <button
             onClick={() => setAreaOpen(true)}
-            className="px-4 py-2 text-xl font-medium rounded-md bg-[#5A80F0] text-white shadow hover:bg-[#4a6cd1] transition"
+            className="w-full sm:w-auto px-4 py-2 text-lg md:text-xl font-medium rounded-md bg-[#5A80F0] text-white shadow hover:bg-[#4a6cd1] transition"
           >
             Create Area
           </button>
         </div>
-
         {activeItems.map((item) => {
           const [action, reaction] = item.name.split(" -> ").map((part) => part.trim());
           return (
@@ -236,24 +271,24 @@ export default function Dashboard() {
             />
           );
         })}
-
-        <h2 className="text-4xl font-bold text-black mt-16 mb-10">
+        <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-black mt-10 md:mt-16 mb-6 md:mb-10">
           Inactive Area
         </h2>
-
-        {inactiveItems.map((item) => (
-          <DashboardBox
-            key={item.id}
-            actionText={item.name}
-            reactionText={item.name}
-            checked={item.isEnabled}
-            onDelete={() => handleDelete(item.id)}
-            onCheck={(e) => handleToggleItem(item.id, e.target.checked)}
-            label={item.label || item.name}
-          />
-        ))}
+        {inactiveItems.map((item) => {
+          const [action, reaction] = item.name.split(" -> ").map((part) => part.trim());
+          return (
+            <DashboardBox
+              key={item.id}
+              actionText={action}
+              reactionText={reaction}
+              checked={item.isEnabled}
+              onDelete={() => handleDelete(item.id)}
+              onCheck={(e) => handleToggleItem(item.id, e.target.checked)}
+              label={item.label || item.name}
+            />
+          );
+        })}
       </main>
-
       <AreaPopup
         open={areaOpen}
         onClose={() => setAreaOpen(false)}
diff --git a/app/Services/page.tsx b/app/Services/page.tsx
index 58f28d6..9f4940a 100644
--- a/app/Services/page.tsx
+++ b/app/Services/page.tsx
@@ -2,7 +2,8 @@
 
 import Sidebar from "../Components/Area_sidebar";
 import Header from "../Components/Area_banner";
-import React, { use, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import { Menu, X } from "lucide-react";
 
 import GoogleIcon from '../Components/Google_Icon';
 import DiscordIcon from '../Components/Discord_Icon';
@@ -12,7 +13,8 @@ export default function ServicesPage() {
   const [userId, setUserId] = React.useState<string | null>(null);
   const [servicesStatus, setServicesStatus] = React.useState<any[]>([]);
   const [loading, setLoading] = useState(true);
-  
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
   const availableServices = [
     { name: "Google", icon: <GoogleIcon />, url: "http://localhost:8080/auth/google/login", id: 1 },
     { name: "Github", icon: <GithubIcon />, url: "http://localhost:8080/auth/github/login", id: 2 },
@@ -102,42 +104,54 @@ export default function ServicesPage() {
     return servicesStatus.find(service => service.serviceId === serviceId);
   };
 
-
-
   return (
     <div className="min-h-screen bg-[#FFFAFA] relative flex flex-col">
       <Header />
-      <Sidebar />
-
-      <main className="flex-1 ml-60 px-16 py-10 flex flex-row justify-center items-start">
-        <div className="flex flex-col w-2/3">
-          <h1 className="text-4xl font-semibold text-black">Services</h1>
-
-          <div className="mt-16 flex flex-col gap-15 w-fit">
+      <button
+        onClick={() => setSidebarOpen(!sidebarOpen)}
+        className="fixed top-4 right-4 z-50 p-2 bg-white rounded-lg shadow-lg lg:hidden hover:bg-gray-100 transition-colors"
+        aria-label="Toggle menu"
+      >
+        {sidebarOpen ? <X size={24} className="text-[#1B264F]" /> : <Menu size={24} className="text-[#1B264F]" />}
+      </button>
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-opacity-50 z-30 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+      <div className={`
+        fixed top-0 left-0 h-full z-40 transition-transform duration-300 ease-in-out
+        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} lg:translate-x-0
+      `}>
+        <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+      </div>
+      <main className="flex-1 ml-0 lg:ml-60 px-4 sm:px-6 md:px-10 lg:px-16 py-6 md:py-10 flex flex-col lg:flex-row justify-center items-start gap-8 lg:gap-12">
+        <div className="flex flex-col w-full lg:w-2/3">
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-semibold text-black">Services</h1>
+          <div className="mt-8 sm:mt-12 lg:mt-16 flex flex-col gap-4 sm:gap-6 lg:gap-15 w-full">
             {availableServices.map((s) => (
               <button
                 key={s.name}
                 onClick={() => handleOAuthLogin(s.url)}
-                className="flex items-center gap-3 px-4 py-5 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
+                className="flex items-center gap-3 px-4 py-4 sm:py-5 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer w-full"
               >
-                <div className="text-2xl">{s.icon}</div>
-                <div className="text-base font-medium text-black">Connect with {s.name}</div>
+                <div className="text-xl sm:text-2xl">{s.icon}</div>
+                <div className="text-sm sm:text-base font-medium text-black">Connect with {s.name}</div>
               </button>
             ))}
           </div>
         </div>
-
-        <div className="w-[700px] mt-25">
-          <div className="border border-black rounded-xl p-8 bg-white shadow-sm">
-            <h2 className="text-2xl text-black font-semibold text-center">
+        <div className="w-full lg:w-[700px] lg:mt-25">
+          <div className="border border-black rounded-xl p-6 sm:p-8 bg-white shadow-sm">
+            <h2 className="text-xl sm:text-2xl text-black font-semibold text-center">
               Connection Summary Panel
             </h2>
-
-            <div className="mt-8 flex flex-col gap-6">
+            <div className="mt-6 sm:mt-8 flex flex-col gap-4 sm:gap-6">
               {availableServices.map((service) => (
-                <div key={service.id} className="flex items-center gap-4">
-                  {service.icon}
-                  <span className="text-black text-lg">
+                <div key={service.id} className="flex items-center gap-3 sm:gap-4">
+                  <div className="text-lg sm:text-xl">{service.icon}</div>
+                  <span className="text-black text-base sm:text-lg">
                     {isServiceConnected(service.id) ? "Connected" : "Not Connected"}
                   </span>
                 </div>
@@ -145,7 +159,6 @@ export default function ServicesPage() {
             </div>
           </div>
         </div>
-
       </main>
     </div>
   );
diff --git a/app/SignUp/page.tsx b/app/SignUp/page.tsx
index df77cdc..40c1eb6 100644
--- a/app/SignUp/page.tsx
+++ b/app/SignUp/page.tsx
@@ -49,68 +49,71 @@ export default function SignUpPage() {
   return (
     <div className="min-h-screen bg-[#FFFAFA]">
       <Header />
-    <div className="flex flex-col items-center mt-40">
-      <div className="flex justify-center items-center w-full flex-1">
-        <div className="bg-white rounded-2xl shadow-2xl shadow-[#576CA8] max-w-3xl w-full p-10">
-          <h1 className="text-3xl font-bold text-center mb-8 text-[#1B1D20]">
-            Create an account
-          </h1>
-          <div className="mb-6">
-            <label className="block mb-2 font-medium text-[#576CA8]">Email</label>
-            <input
-              type="email"
-              name="email"
-              value={form.email}
-              onChange={handleChange}
-              placeholder="Enter your email"
-              className="w-full border border-[#576CA8] rounded-md px-3 py-2 text-[#1B1D20] placeholder:text-[#576CA8]"
-            />
-          </div>
-          <div className="mb-6">
-            <label className="block mb-2 font-medium text-[#576CA8]">Password</label>
-            <div className="relative">
+      <div className="flex flex-col items-center mt-10 sm:mt-20 md:mt-32 lg:mt-40 px-4">
+        <div className="flex justify-center items-center w-full flex-1">
+          <div className="bg-white rounded-xl sm:rounded-2xl shadow-2xl shadow-[#576CA8] max-w-3xl w-full p-6 sm:p-8 md:p-10">
+            <h1 className="text-2xl sm:text-3xl font-bold text-center mb-6 sm:mb-8 text-[#1B1D20]">
+              Create an account
+            </h1>
+            <div className="mb-5 sm:mb-6">
+              <label className="block mb-2 font-medium text-[#576CA8] text-sm sm:text-base">Email</label>
               <input
-                type={showPassword ? "text" : "password"}
-                name="password"
-                value={form.password}
+                type="email"
+                name="email"
+                value={form.email}
                 onChange={handleChange}
-                placeholder="Enter your password"
-                className="w-full border border-[#576CA8] rounded-md px-3 py-2 text-[#1B1D20] placeholder:text-[#576CA8]"
+                placeholder="Enter your email"
+                className="w-full border border-[#576CA8] rounded-md px-3 py-2 text-[#1B1D20] placeholder:text-[#576CA8] text-base"
               />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-[#576CA8]"
-              >
-                {showPassword ? <Eye /> : <EyeClosed />}
-              </button>
             </div>
-          </div>
-          <div className="mb-8">
-            <label className="block mb-2 font-medium text-[#576CA8]">Confirm Password</label>
-            <div className="relative">
-              <input
-                type={showConfirm ? "text" : "password"}
-                placeholder="Confirm your password"
-                className="w-full border border-[#576CA8] rounded-md px-3 py-2 text-[#1B1D20] placeholder:text-[#576CA8]"
-              />
-              <button
-                type="button"
-                onClick={() => setShowConfirm(!showConfirm)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-[#576CA8]"
+            <div className="mb-5 sm:mb-6">
+              <label className="block mb-2 font-medium text-[#576CA8] text-sm sm:text-base">Password</label>
+              <div className="relative">
+                <input
+                  type={showPassword ? "text" : "password"}
+                  name="password"
+                  value={form.password}
+                  onChange={handleChange}
+                  placeholder="Enter your password"
+                  className="w-full border border-[#576CA8] rounded-md px-3 py-2 text-[#1B1D20] placeholder:text-[#576CA8] text-base"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-[#576CA8]"
+                >
+                  {showPassword ? <Eye /> : <EyeClosed />}
+                </button>
+              </div>
+            </div>
+            <div className="mb-6 sm:mb-8">
+              <label className="block mb-2 font-medium text-[#576CA8] text-sm sm:text-base">Confirm Password</label>
+              <div className="relative">
+                <input
+                  type={showConfirm ? "text" : "password"}
+                  placeholder="Confirm your password"
+                  className="w-full border border-[#576CA8] rounded-md px-3 py-2 text-[#1B1D20] placeholder:text-[#576CA8] text-base"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirm(!showConfirm)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-[#576CA8]"
+                >
+                  {showConfirm ? <Eye /> : <EyeClosed />}
+                </button>
+              </div>
+            </div>
+            <div className="flex justify-center">
+              <button 
+                className="w-full sm:w-70 bg-[#274690] text-white py-3 px-8 text-base sm:text-lg rounded-md hover:opacity-90 transition-opacity" 
+                onClick={handleSubmit}
               >
-                {showConfirm ? <Eye /> : <EyeClosed />}
+                Sign up
               </button>
             </div>
           </div>
-          <div className="flex justify-center">
-            <button className="w-70 bg-[#274690] text-white py-3 px-8 text-lg rounded-md hover:opacity-90" onClick={handleSubmit}>
-              Sign up
-            </button>
-          </div>
         </div>
       </div>
     </div>
-    </div>
   );
 }
\ No newline at end of file
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 2c903c8..cfab9d8 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -76,24 +76,22 @@ function LoginForm() {
 
   return (
     <div className="min-h-screen bg-[#FFFAFA]">
-      <div className="flex items-center justify-center p-6 mt-30">
-        <div className="bg-white rounded-3xl shadow-2xl shadow-[#576CA8] w-full max-w-7xl p-6 md:p-15 grid md:grid-cols-2 gap-8 md:gap-30">
-
+      <div className="flex items-center justify-center p-4 sm:p-6 mt-10 sm:mt-20 lg:mt-30">
+        <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl shadow-[#576CA8] w-full max-w-7xl p-6 sm:p-8 md:p-10 lg:p-15 grid grid-cols-1 md:grid-cols-2 gap-8 sm:gap-12 lg:gap-30">
           <div className="flex flex-col justify-center">
-            <div className="mb-8">
-              <label className="block text-2xl font-semibold text-[#1B1D20] mb-4">Email</label>
+            <div className="mb-6 sm:mb-8">
+              <label className="block text-xl sm:text-2xl font-semibold text-[#1B1D20] mb-3 sm:mb-4">Email</label>
               <input
                 type="email"
                 name="email"
                 value={form.email}
                 onChange={handleChange}
                 placeholder="Enter your email"
-                className="w-full px-4 py-3 border-2 border-[#576CA8] rounded-lg focus:outline-none focus:border-[#1B264F] text-[#1B264F] transition-colors placeholder:text-[#576CA8]"
+                className="w-full px-4 py-3 text-base border-2 border-[#576CA8] rounded-lg focus:outline-none focus:border-[#1B264F] text-[#1B264F] transition-colors placeholder:text-[#576CA8]"
               />
             </div>
-
             <div className="mb-2">
-              <label className="block text-2xl font-semibold text-gray-800 mb-4">Password</label>
+              <label className="block text-xl sm:text-2xl font-semibold text-gray-800 mb-3 sm:mb-4">Password</label>
               <div className="relative mb-2">
                 <input
                   type={show ? "text" : "password"}
@@ -101,7 +99,7 @@ function LoginForm() {
                   value={form.password}
                   onChange={handleChange}
                   placeholder="Enter your password"
-                  className="w-full px-4 py-3 border-2 border-[#576CA8] rounded-lg focus:outline-none focus:border-[#1B264F] text-[#1B264F] transition-colors placeholder:text-[#576CA8]"
+                  className="w-full px-4 py-3 text-base border-2 border-[#576CA8] rounded-lg focus:outline-none focus:border-[#1B264F] text-[#1B264F] transition-colors placeholder:text-[#576CA8]"
                 />
                 <button
                   type="button"
@@ -112,34 +110,30 @@ function LoginForm() {
                 </button>
               </div>
             </div>
-
-            <a href="#" className="text-sm text-[#576CA8] hover:text-[#1B264F] mb-12">
+            <a href="#" className="text-sm text-[#576CA8] hover:text-[#1B264F] mb-8 sm:mb-12">
               Forgot password ?
             </a>
-
             <button
-              className="w-full max-w-xs bg-[#274690] text-white py-3.5 rounded-lg text-lg font-medium hover:bg-[#1B264F] transition-colors mb-6 mx-auto"
+              className="w-full max-w-xs bg-[#274690] text-white py-3.5 rounded-lg text-base sm:text-lg font-medium hover:bg-[#1B264F] transition-colors mb-6 mx-auto"
               onClick={handleLogin}
             >
               Log in
             </button>
-
-            <Link href="/SignUp" className="text-[#576CA8] hover:text-[#1B264F] text-center">
+            <Link href="/SignUp" className="text-[#576CA8] hover:text-[#1B264F] text-center text-base">
               Create account
             </Link>
           </div>
-
-          <div className="bg-[#1B264F] rounded-2xl p-6 md:p-8 flex flex-col justify-center">
-            <h2 className="text-[#F4FFF8] text-2xl font-semibold mb-8 text-center">
+          <div className="bg-[#1B264F] rounded-xl sm:rounded-2xl p-6 sm:p-8 flex flex-col justify-center">
+            <h2 className="text-[#F4FFF8] text-xl sm:text-2xl font-semibold mb-6 sm:mb-8 text-center">
               Other sign in methods
             </h2>
 
-            <div className="space-y-4 flex flex-col items-center">
+            <div className="space-y-3 sm:space-y-4 flex flex-col items-center">
               {services.map(service => (
                 <button
                   key={service.name}
                   onClick={() => handleOAuthLogin(service.url)}
-                  className="flex items-center gap-3 w-full max-w-xs px-4 py-3 bg-white text-[#1B264F] rounded-lg font-medium hover:bg-[#F4FFF8] transition-colors"
+                  className="flex items-center justify-center gap-3 w-full max-w-xs px-4 py-3 bg-white text-[#1B264F] rounded-lg text-base font-medium hover:bg-[#F4FFF8] transition-colors"
                 >
                   {service.icon}
                   <span>Sign in with {service.name}</span>
@@ -158,10 +152,10 @@ export default function LoginPage() {
     <div className="min-h-screen bg-[#FFFAFA]">
       <Header />
       <Suspense fallback={
-        <div className="flex items-center justify-center p-6 mt-30">
+        <div className="flex items-center justify-center p-6 mt-20 sm:mt-30">
           <div className="text-center">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#274690] mx-auto mb-4"></div>
-            <p className="text-xl text-[#1B264F]">Loading...</p>
+            <p className="text-lg sm:text-xl text-[#1B264F]">Loading...</p>
           </div>
         </div>
       }>