diff --git a/frontend/app/dashboard/agents/page.tsx b/frontend/app/dashboard/agents/page.tsx
index 78d3088..f83486c 100644
--- a/frontend/app/dashboard/agents/page.tsx
+++ b/frontend/app/dashboard/agents/page.tsx
@@ -175,38 +175,40 @@ export default function AgentsPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900">Agent Management</h1>
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+          <div className="text-left">
+            <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Agent Management</h1>
             <p className="text-gray-600 mt-1">Manage all agents and partnerships</p>
           </div>
-          <Dialog
-            open={isAddDialogOpen}
-            onOpenChange={(open) => {
-              setIsAddDialogOpen(open)
-              if (open) resetForm()
-            }}
-          >
-            <DialogTrigger asChild>
-              <Button className="bg-blue-600 hover:bg-blue-700">
-                <UserPlus className="w-4 h-4 mr-2" />
-                Add New Agent
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-              <DialogHeader>
-                <DialogTitle>Add New Agent</DialogTitle>
-                <DialogDescription>Enter agent details</DialogDescription>
-              </DialogHeader>
-              <AgentForm formData={formData} setFormData={setFormData} />
-              <DialogFooter>
-                <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
-                <Button onClick={handleAddAgent} className="bg-blue-600">
-                  Add Agent
+          <div className="mt-4 md:mt-0 text-left">
+            <Dialog
+              open={isAddDialogOpen}
+              onOpenChange={(open) => {
+                setIsAddDialogOpen(open)
+                if (open) resetForm()
+              }}
+            >
+              <DialogTrigger asChild>
+                <Button className="bg-blue-600 hover:bg-blue-700">
+                  <UserPlus className="w-4 h-4 mr-2" />
+                  Add New Agent
                 </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+              </DialogTrigger>
+              <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+                <DialogHeader>
+                  <DialogTitle>Add New Agent</DialogTitle>
+                  <DialogDescription>Enter agent details</DialogDescription>
+                </DialogHeader>
+                <AgentForm formData={formData} setFormData={setFormData} />
+                <DialogFooter>
+                  <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
+                  <Button onClick={handleAddAgent} className="bg-blue-600">
+                    Add Agent
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
@@ -254,12 +256,12 @@ export default function AgentsPage() {
 
         <Card>
           <CardHeader>
-            <div className="flex justify-between items-center">
-              <div>
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+              <div className="text-left">
                 <CardTitle>All Agents</CardTitle>
                 <CardDescription>Active agents and booking statistics</CardDescription>
               </div>
-              <div className="relative w-64">
+              <div className="relative w-full md:w-64 mt-4 md:mt-0 text-left">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 <Input 
                   placeholder="Search agents..." 
diff --git a/frontend/app/dashboard/commissions/page.tsx b/frontend/app/dashboard/commissions/page.tsx
index f87dbc9..7ac8a37 100644
--- a/frontend/app/dashboard/commissions/page.tsx
+++ b/frontend/app/dashboard/commissions/page.tsx
@@ -19,15 +19,15 @@ export default function CommissionsPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
+        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
           <div>
             <h1 className="text-3xl font-bold text-gray-900">Commission Settings</h1>
             <p className="text-gray-600 mt-1">Manage agent commission rates and payouts</p>
           </div>
-          <Button className="bg-blue-600 hover:bg-blue-700">
+            <Button className="bg-blue-600 hover:bg-blue-700 w-fit">
             <DollarSign className="w-4 h-4 mr-2" />
             Adjust Rates
-          </Button>
+            </Button>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
diff --git a/frontend/app/dashboard/doctor-hospitals/page.tsx b/frontend/app/dashboard/doctor-hospitals/page.tsx
index dd1e6c2..6549bf7 100644
--- a/frontend/app/dashboard/doctor-hospitals/page.tsx
+++ b/frontend/app/dashboard/doctor-hospitals/page.tsx
@@ -68,15 +68,15 @@ export default function DoctorHospitalsPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
+        <div className="flex flex-col gap-4 md:flex-row md:justify-between md:items-center">
           <div>
             <h1 className="text-3xl font-bold text-gray-900">Hospital Assignments</h1>
             <p className="text-gray-600 mt-1">Manage doctor-hospital relationships and sessions</p>
           </div>
-          <Button className="bg-blue-600 hover:bg-blue-700">
+            <Button className="bg-blue-600 hover:bg-blue-700 w-fit">
             <Link2 className="w-4 h-4 mr-2" />
             Assign Doctor
-          </Button>
+            </Button>
         </div>
 
         {error && (
diff --git a/frontend/app/dashboard/doctors/page.tsx b/frontend/app/dashboard/doctors/page.tsx
index f22b266..fd2ea85 100644
--- a/frontend/app/dashboard/doctors/page.tsx
+++ b/frontend/app/dashboard/doctors/page.tsx
@@ -204,40 +204,42 @@ export default function DoctorsPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900">Doctor Management</h1>
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+          <div className="text-left">
+            <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Doctor Management</h1>
             <p className="text-gray-600 mt-1">Manage doctor profiles and schedules</p>
           </div>
-          <Dialog
-            open={isAddDialogOpen}
-            onOpenChange={(open) => {
-              setIsAddDialogOpen(open)
-              if (open) {
-                resetForm()
-              }
-            }}
-          >
-            <DialogTrigger asChild>
-              <Button className="bg-blue-600 hover:bg-blue-700">
-                <UserPlus className="w-4 h-4 mr-2" />
-                Add New Doctor
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-              <DialogHeader>
-                <DialogTitle>Add New Doctor</DialogTitle>
-                <DialogDescription>Enter doctor details to add to the system</DialogDescription>
-              </DialogHeader>
-              <DoctorForm formData={formData} setFormData={setFormData} />
-              <DialogFooter>
-                <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
-                <Button onClick={handleAddDoctor} className="bg-blue-600">
-                  Add Doctor
+          <div className="mt-4 md:mt-0 text-left">
+            <Dialog
+              open={isAddDialogOpen}
+              onOpenChange={(open) => {
+                setIsAddDialogOpen(open)
+                if (open) {
+                  resetForm()
+                }
+              }}
+            >
+              <DialogTrigger asChild>
+                <Button className="bg-blue-600 hover:bg-blue-700">
+                  <UserPlus className="w-4 h-4 mr-2" />
+                  Add New Doctor
                 </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+              </DialogTrigger>
+              <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+                <DialogHeader>
+                  <DialogTitle>Add New Doctor</DialogTitle>
+                  <DialogDescription>Enter doctor details to add to the system</DialogDescription>
+                </DialogHeader>
+                <DoctorForm formData={formData} setFormData={setFormData} />
+                <DialogFooter>
+                  <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
+                  <Button onClick={handleAddDoctor} className="bg-blue-600">
+                    Add Doctor
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -263,12 +265,12 @@ export default function DoctorsPage() {
 
         <Card>
           <CardHeader>
-            <div className="flex justify-between items-center">
-              <div>
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+              <div className="text-left">
                 <CardTitle>All Doctors</CardTitle>
                 <CardDescription>Registered medical practitioners on the platform</CardDescription>
               </div>
-              <div className="relative w-64">
+              <div className="relative w-full md:w-64 mt-4 md:mt-0 text-left">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 <Input 
                   placeholder="Search doctors..." 
diff --git a/frontend/app/dashboard/hospitals/page.tsx b/frontend/app/dashboard/hospitals/page.tsx
index 27a8acb..b9bbfbc 100644
--- a/frontend/app/dashboard/hospitals/page.tsx
+++ b/frontend/app/dashboard/hospitals/page.tsx
@@ -176,38 +176,40 @@ export default function HospitalsPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900">Hospital Management</h1>
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+          <div className="text-left">
+            <h1 className="text-2xl md:text-3xl font-bold text-gray-900">Hospital Management</h1>
             <p className="text-gray-600 mt-1">Manage hospitals, facilities, and assignments</p>
           </div>
-          <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
-            <DialogTrigger asChild>
-              <Button className="bg-blue-600 hover:bg-blue-700">
-                <Plus className="w-4 h-4 mr-2" />
-                Add New Hospital
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-              <DialogHeader>
-                <DialogTitle>Add New Hospital</DialogTitle>
-                <DialogDescription>Enter hospital details to add to the system</DialogDescription>
-              </DialogHeader>
-              <HospitalForm
-                formData={formData}
-                setFormData={setFormData}
-                facilitiesText={facilitiesText}
-                onFacilitiesChange={handleFacilitiesChange}
-              />
-              <DialogFooter>
-                <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
-                <Button onClick={handleAddHospital} className="bg-blue-600">
-                  Add Hospital
+          <div className="mt-4 md:mt-0 text-left">
+            <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
+              <DialogTrigger asChild>
+                <Button className="bg-blue-600 hover:bg-blue-700">
+                  <Plus className="w-4 h-4 mr-2" />
+                  Add New Hospital
                 </Button>
-              </DialogFooter>
-            </DialogContent>
-        </Dialog>
-      </div>
+              </DialogTrigger>
+              <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+                <DialogHeader>
+                  <DialogTitle>Add New Hospital</DialogTitle>
+                  <DialogDescription>Enter hospital details to add to the system</DialogDescription>
+                </DialogHeader>
+                <HospitalForm
+                  formData={formData}
+                  setFormData={setFormData}
+                  facilitiesText={facilitiesText}
+                  onFacilitiesChange={handleFacilitiesChange}
+                />
+                <DialogFooter>
+                  <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
+                  <Button onClick={handleAddHospital} className="bg-blue-600">
+                    Add Hospital
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          </div>
+        </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <Card>
@@ -233,12 +235,12 @@ export default function HospitalsPage() {
 
         <Card>
           <CardHeader>
-            <div className="flex justify-between items-center">
-              <div>
+            <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
+              <div className="text-left">
                 <CardTitle>All Hospitals</CardTitle>
                 <CardDescription>Registered medical facilities on the platform</CardDescription>
               </div>
-              <div className="relative w-64">
+              <div className="relative w-full md:w-64 mt-4 md:mt-0 text-left">
                 <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 <Input 
                   placeholder="Search hospitals..." 
diff --git a/frontend/app/dashboard/user-activity/page.tsx b/frontend/app/dashboard/user-activity/page.tsx
index 0de63dd..cd5be31 100644
--- a/frontend/app/dashboard/user-activity/page.tsx
+++ b/frontend/app/dashboard/user-activity/page.tsx
@@ -122,12 +122,12 @@ export default function UserActivityPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900">User Activity Logs</h1>
+        <div className="flex flex-col md:flex-row justify-between items-center">
+          <div className="text-left">
+            <h1 className="text-2xl md:text-3xl font-bold text-gray-900">User Activity Logs</h1>
             <p className="text-gray-600 mt-1">Monitor user actions and system activities (live from users table)</p>
           </div>
-          <div className="flex gap-2">
+            <div className="flex flex-row gap-2 mt-4 md:mt-0">
             <Button variant="outline" onClick={() => setLive(!live)}>
               {live ? 'Live: ON' : 'Live: OFF'}
             </Button>
@@ -139,7 +139,7 @@ export default function UserActivityPage() {
               <Download className="w-4 h-4 mr-2" />
               Export Logs
             </Button>
-          </div>
+            </div>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
@@ -183,14 +183,14 @@ export default function UserActivityPage() {
 
         <Card>
           <CardHeader>
-            <div className="flex justify-between items-center">
+            <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
               <div>
-                <CardTitle>Recent Activities</CardTitle>
-                <CardDescription>Real-time user activity monitoring</CardDescription>
+              <CardTitle>Recent Activities</CardTitle>
+              <CardDescription>Real-time user activity monitoring</CardDescription>
               </div>
-              <div className="relative w-64">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <Input placeholder="Search logs..." className="pl-10" />
+              <div className="relative w-full md:w-64">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <Input placeholder="Search logs..." className="pl-10" />
               </div>
             </div>
           </CardHeader>
diff --git a/frontend/app/dashboard/users/page.tsx b/frontend/app/dashboard/users/page.tsx
index c877ae5..fad7656 100644
--- a/frontend/app/dashboard/users/page.tsx
+++ b/frontend/app/dashboard/users/page.tsx
@@ -190,7 +190,7 @@ export default function UsersPage() {
   return (
     <ProtectedLayout>
       <div className="space-y-6">
-        <div className="flex justify-between items-center">
+        <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
           <div>
             <h1 className="text-3xl font-bold text-gray-900">User Management</h1>
             <p className="text-gray-600 mt-1">Manage all system users and their permissions</p>
@@ -200,27 +200,27 @@ export default function UsersPage() {
             onOpenChange={(open) => {
               setIsAddDialogOpen(open)
               if (open) {
-                resetForm()
+          resetForm()
               }
             }}
           >
             <DialogTrigger asChild>
-              <Button className="bg-blue-600 hover:bg-blue-700">
-                <UserPlus className="w-4 h-4 mr-2" />
-                Add New User
+              <Button className="bg-blue-600 hover:bg-blue-700 w-full md:w-auto">
+          <UserPlus className="w-4 h-4 mr-2" />
+          Add New User
               </Button>
             </DialogTrigger>
             <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
               <DialogHeader>
-                <DialogTitle>Add New User</DialogTitle>
-                <DialogDescription>Enter user details to add to the system</DialogDescription>
+          <DialogTitle>Add New User</DialogTitle>
+          <DialogDescription>Enter user details to add to the system</DialogDescription>
               </DialogHeader>
               <UserForm formData={formData} setFormData={setFormData} roleOptions={roleOptions} />
               <DialogFooter>
-                <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
-                <Button onClick={handleAddUser} className="bg-blue-600">
-                  Add User
-                </Button>
+          <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>Cancel</Button>
+          <Button onClick={handleAddUser} className="bg-blue-600">
+            Add User
+          </Button>
               </DialogFooter>
             </DialogContent>
           </Dialog>
@@ -249,19 +249,19 @@ export default function UsersPage() {
 
         <Card>
           <CardHeader>
-            <div className="flex justify-between items-center">
+            <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
               <div>
-                <CardTitle>All Users</CardTitle>
-                <CardDescription>Total {stats.total} users in the system</CardDescription>
+              <CardTitle>All Users</CardTitle>
+              <CardDescription>Total {stats.total} users in the system</CardDescription>
               </div>
-              <div className="relative w-64">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                <Input 
-                  placeholder="Search users..." 
-                  className="pl-10"
-                  value={searchTerm}
-                  onChange={(e) => handleSearch(e.target.value)}
-                />
+              <div className="relative w-full md:w-64">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <Input 
+                placeholder="Search users..." 
+                className="pl-10"
+                value={searchTerm}
+                onChange={(e) => handleSearch(e.target.value)}
+              />
               </div>
             </div>
           </CardHeader>