diff --git a/app/Http/Controllers/AdminController.php b/app/Http/Controllers/AdminController.php
index 383293c..671acd0 100644
--- a/app/Http/Controllers/AdminController.php
+++ b/app/Http/Controllers/AdminController.php
@@ -53,10 +53,13 @@ public function storeApp(Request $request)
             'name' => 'required|string|max:255',
             'url' => 'required|url|max:255',
             'icon_svg' => 'nullable|string',
-            'logo' => 'nullable|file|mimes:jpg,jpeg,png,webp,svg|max:2048',
+            'logo' => 'nullable|file|mimes:jpg,jpeg,png,webp,svg,avif,gif,bmp,ico|max:5120',
             'color' => 'nullable|string|max:20',
             'desc' => 'nullable|string',
             'tag' => 'nullable|string|max:255',
+        ], [
+            'logo.mimes' => 'Invalid file format. Only image formats (PNG, JPG, WEBP, SVG, AVIF, GIF, BMP) are allowed.',
+            'logo.max' => 'File size exceeds maximum limit of 5MB. Please upload an image under 5MB.',
         ]);
 
         $logoPath = null;
@@ -105,10 +108,13 @@ public function updateApp(Request $request, $id)
             'name' => 'required|string|max:255',
             'url' => 'required|url|max:255',
             'icon_svg' => 'nullable|string',
-            'logo' => 'nullable|file|mimes:jpg,jpeg,png,webp,svg|max:2048',
+            'logo' => 'nullable|file|mimes:jpg,jpeg,png,webp,svg,avif,gif,bmp,ico|max:5120',
             'color' => 'nullable|string|max:20',
             'desc' => 'nullable|string',
             'tag' => 'nullable|string|max:255',
+        ], [
+            'logo.mimes' => 'Invalid file format. Only image formats (PNG, JPG, WEBP, SVG, AVIF, GIF, BMP) are allowed.',
+            'logo.max' => 'File size exceeds maximum limit of 5MB. Please upload an image under 5MB.',
         ]);
 
         $logoPath = $app->logo;
diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index e5ad7a7..7b5943d 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -165,10 +165,13 @@ public function storePersonalApp(Request $request)
         $request->validate([
             'name' => 'required|string|max:255',
             'url' => 'required|url|max:255',
-            'logo' => 'nullable|file|mimes:jpg,jpeg,png,webp,svg|max:2048',
+            'logo' => 'nullable|file|mimes:jpg,jpeg,png,webp,svg,avif,gif,bmp,ico|max:5120',
             'color' => 'nullable|string|max:20',
             'desc' => 'nullable|string',
             'tag' => 'nullable|string|max:255',
+        ], [
+            'logo.mimes' => 'Invalid file format. Only image formats (PNG, JPG, WEBP, SVG, AVIF, GIF, BMP) are allowed.',
+            'logo.max' => 'File size exceeds maximum limit of 5MB. Please upload an image under 5MB.',
         ]);
 
         $logoPath = null;
@@ -201,10 +204,13 @@ public function updatePersonalApp(Request $request, $id)
         $request->validate([
             'name' => 'required|string|max:255',
             'url' => 'required|url|max:255',
-            'logo' => 'nullable|file|mimes:jpg,jpeg,png,webp,svg|max:2048',
+            'logo' => 'nullable|file|mimes:jpg,jpeg,png,webp,svg,avif,gif,bmp,ico|max:5120',
             'color' => 'nullable|string|max:20',
             'desc' => 'nullable|string',
             'tag' => 'nullable|string|max:255',
+        ], [
+            'logo.mimes' => 'Invalid file format. Only image formats (PNG, JPG, WEBP, SVG, AVIF, GIF, BMP) are allowed.',
+            'logo.max' => 'File size exceeds maximum limit of 5MB. Please upload an image under 5MB.',
         ]);
 
         $logoPath = $app->logo;
diff --git a/public/info.png b/public/info.png
new file mode 100644
index 0000000..4de1525
Binary files /dev/null and b/public/info.png differ
diff --git a/public/uploads/logos/1784539919_6a5deb0f64426.jpg b/public/uploads/logos/1784539919_6a5deb0f64426.jpg
new file mode 100644
index 0000000..9fac835
Binary files /dev/null and b/public/uploads/logos/1784539919_6a5deb0f64426.jpg differ
diff --git a/public/uploads/logos/1784545215_6a5dffbf2023f.png b/public/uploads/logos/1784545215_6a5dffbf2023f.png
new file mode 100644
index 0000000..a18a51d
Binary files /dev/null and b/public/uploads/logos/1784545215_6a5dffbf2023f.png differ
diff --git a/public/youtube.png b/public/youtube.png
new file mode 100644
index 0000000..a18a51d
Binary files /dev/null and b/public/youtube.png differ
diff --git a/resources/css/app.css b/resources/css/app.css
index 54b247e..b9f73cf 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -7,3 +7,35 @@ @theme {
     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol', 'Noto Color Emoji';
 }
+
+/* Modern Thin White Custom Scrollbars */
+html, body, * {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.4) rgba(15, 23, 42, 0.35);
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(15, 23, 42, 0.35);
+    border-radius: 999px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.85);
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
+}
+
diff --git a/resources/views/admin/dashboard.blade.php b/resources/views/admin/dashboard.blade.php
index 210a7a8..b645e3a 100644
--- a/resources/views/admin/dashboard.blade.php
+++ b/resources/views/admin/dashboard.blade.php
@@ -22,12 +22,12 @@
     <style>
         :root {
             --bg-color: #0b0f19;
-            --card-bg: rgba(15, 23, 42, 0.45); /* Darker translucent glass base */
-            --card-border: rgba(255, 255, 255, 0.18); /* High gloss border */
+            --card-bg: rgba(15, 23, 42, 0.55); /* Darker translucent glass base */
+            --card-border: rgba(255, 255, 255, 0.22); /* Crisp gloss border */
             --accent-primary: #6366f1;
             --accent-secondary: #0078d4;
-            --text-main: #f3f4f6;
-            --text-muted: #9ca3af;
+            --text-main: #ffffff;
+            --text-muted: #d1d5db;
             --success-color: #10b981;
             --error-color: #ef4444;
             --info-color: #06b6d4;
@@ -115,6 +115,48 @@
             outline: none !important;
         }
 
+        /* Modern Ultra-Thin White Custom Scrollbars */
+        html, body, *, ::-webkit-scrollbar {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(255, 255, 255, 0.4) rgba(15, 23, 42, 0.35);
+        }
+
+        ::-webkit-scrollbar {
+            width: 5px;
+            height: 5px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(15, 23, 42, 0.35);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.4);
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.85);
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
+        }
+
+        ::-webkit-scrollbar-corner {
+            background: transparent;
+        }
+
+        .select2-results__options {
+            max-height: 220px !important;
+            overflow-y: auto !important;
+            scrollbar-width: thin !important;
+            scrollbar-color: rgba(255, 255, 255, 0.4) rgba(15, 23, 42, 0.35) !important;
+        }
+
+        .select2-results__options::-webkit-scrollbar {
+            width: 4px !important;
+        }
+
         * {
             box-sizing: border-box;
             margin: 0;
@@ -174,9 +216,7 @@
             font-family: 'Outfit', sans-serif;
             font-size: 1.5rem;
             font-weight: 800;
-            background: linear-gradient(135deg, #a5b4fc 0%, #38bdf8 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            color: #ffffff;
             display: flex;
             align-items: center;
             gap: 8px;
@@ -185,7 +225,7 @@
         .nav-logo svg {
             width: 24px;
             height: 24px;
-            fill: #a5b4fc;
+            fill: #ffffff;
         }
 
         .nav-actions {
@@ -195,7 +235,7 @@
         }
 
         .btn-nav {
-            color: var(--text-muted);
+            color: #e5e7eb;
             text-decoration: none;
             font-size: 0.85rem;
             font-weight: 500;
@@ -207,13 +247,13 @@
 
         .btn-nav:hover {
             color: var(--text-main);
-            border-color: rgba(255, 255, 255, 0.2);
-            background-color: rgba(255, 255, 255, 0.05);
+            border-color: rgba(255, 255, 255, 0.3);
+            background-color: rgba(255, 255, 255, 0.08);
         }
 
         .btn-logout {
             color: #ef4444;
-            border-color: rgba(239, 68, 68, 0.2);
+            border-color: rgba(239, 68, 68, 0.25);
         }
 
         .btn-logout:hover {
@@ -225,11 +265,28 @@
         /* Dashboard Wrapper */
         .dashboard-container {
             flex: 1;
-            padding: 40px 5%;
-            /* max-width: 1200px; */
+            padding: 30px 4%;
+            max-width: 1400px;
             width: 100%;
             margin: 0 auto;
             z-index: 10;
+            box-sizing: border-box;
+        }
+
+        /* Management Grid - 2 cards per row on desktop, 3rd card shifts to lower row */
+        .management-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 30px;
+            margin-bottom: 50px;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        @media (max-width: 900px) {
+            .management-grid {
+                grid-template-columns: 1fr;
+            }
         }
 
         /* Welcome Section */
@@ -241,30 +298,33 @@
             font-family: 'Outfit', sans-serif;
             font-size: 2rem;
             font-weight: 700;
+            color: #ffffff;
             margin-bottom: 6px;
         }
 
         .admin-header p {
-            color: var(--text-muted);
+            color: #e5e7eb;
             font-size: 0.95rem;
         }
 
         /* Statistics Cards Grid */
         .stats-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-            gap: 24px;
-            margin-bottom: 50px;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 22px;
+            margin-bottom: 40px;
+            width: 100%;
+            box-sizing: border-box;
         }
 
         .stat-card {
-            background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.01) 100%), var(--card-bg);
-            border: 1.5px solid var(--card-border); /* Thicker border */
-            border-radius: 16px;
-            padding: 24px;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), var(--card-bg);
+            border: 2px solid var(--card-border);
+            border-radius: 18px;
+            padding: 26px;
             backdrop-filter: blur(25px) saturate(130%);
             -webkit-backdrop-filter: blur(25px) saturate(130%);
-            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(255, 255, 255, 0.05);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(255, 255, 255, 0.05);
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -273,65 +333,127 @@
         
         .stat-card:hover {
             transform: translateY(-2px);
-            border-color: rgba(255, 255, 255, 0.28);
-            box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(255, 255, 255, 0.08);
+            border-color: rgba(255, 255, 255, 0.35);
+            box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.28);
         }
 
         .admin-card {
-            background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.01) 100%), var(--card-bg);
-            border: 1.5px solid var(--card-border);
-            border-radius: 20px;
-            padding: 30px;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), var(--card-bg);
+            border: 2px solid var(--card-border);
+            border-radius: 24px;
+            padding: 34px;
             backdrop-filter: blur(25px) saturate(130%);
             -webkit-backdrop-filter: blur(25px) saturate(130%);
-            box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(255, 255, 255, 0.05);
+            box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.18);
             transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            min-height: 450px;
         }
 
         .admin-card:hover {
-            border-color: rgba(255, 255, 255, 0.28);
-            box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(255, 255, 255, 0.08);
+            border-color: rgba(255, 255, 255, 0.35);
+            box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.28);
             transform: translateY(-2px);
         }
 
         .stat-label {
             font-size: 0.8rem;
-            color: var(--text-muted);
+            color: #d1d5db;
             text-transform: uppercase;
             letter-spacing: 0.5px;
             margin-bottom: 6px;
-            font-weight: 500;
+            font-weight: 600;
         }
 
         .stat-value {
             font-family: 'Outfit', sans-serif;
             font-size: 1.8rem;
-            font-weight: 700;
+            font-weight: 800;
+            color: #ffffff;
         }
 
         .stat-icon {
             font-size: 2rem;
-            opacity: 0.6;
+            opacity: 0.85;
         }
 
         /* Users Management Card */
         .users-card {
-            background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.01) 100%), var(--card-bg);
-            border: 1.5px solid var(--card-border);
-            border-radius: 20px;
-            padding: 30px;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%), var(--card-bg);
+            border: 2px solid var(--card-border);
+            border-radius: 24px;
+            padding: 34px;
             backdrop-filter: blur(25px) saturate(130%);
             -webkit-backdrop-filter: blur(25px) saturate(130%);
-            box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(255, 255, 255, 0.05);
+            box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.18);
             transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
         }
 
         .users-card:hover {
-            border-color: rgba(255, 255, 255, 0.28);
-            box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(255, 255, 255, 0.08);
+            border-color: rgba(255, 255, 255, 0.35);
+            box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.28);
             transform: translateY(-2px);
         }
 
+        /* Users Table styling */
+        .table-responsive {
+            width: 100%;
+            overflow-x: auto;
+            scrollbar-width: thin;
+        }
+
+        /* Modern Industry-Standard Role Cell Hover & Quick Edit */
+        .role-cell-container {
+            position: relative;
+            padding: 8px 12px;
+            border-radius: 10px;
+            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+            border: 1px solid transparent;
+            cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .role-cell-container:hover {
+            background-color: rgba(99, 102, 241, 0.08);
+            border-color: rgba(99, 102, 241, 0.3);
+            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
+        }
+
+        .role-quick-edit-btn {
+            position: absolute;
+            top: 6px;
+            right: 6px;
+            opacity: 0;
+            transform: scale(0.85);
+            background: linear-gradient(135deg, #6366f1 0%, #38bdf8 100%);
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+            z-index: 5;
+        }
+
+        .role-cell-container:hover .role-quick-edit-btn {
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        .role-quick-edit-btn:hover {
+            transform: scale(1.18) rotate(6deg);
+            box-shadow: 0 6px 18px rgba(99, 102, 241, 0.6);
+        }
+
         /* Alert Styling */
         .alert {
             padding: 14px 20px;
@@ -504,6 +626,49 @@
             background-color: rgba(255, 255, 255, 0.05);
         }
 
+        /* Universal Edit & Delete Buttons */
+        .action-btn-edit {
+            color: var(--info-color) !important;
+            border-color: rgba(6, 182, 212, 0.25) !important;
+            background-color: rgba(6, 182, 212, 0.05) !important;
+            padding: 6px !important;
+            display: inline-flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            border-radius: 6px !important;
+            cursor: pointer;
+            transition: all 0.2s ease !important;
+        }
+
+        .action-btn-edit:hover {
+            color: #38bdf8 !important;
+            border-color: rgba(56, 189, 248, 0.5) !important;
+            background-color: rgba(6, 182, 212, 0.2) !important;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3) !important;
+        }
+
+        .action-btn-delete {
+            color: #ef4444 !important;
+            border-color: rgba(239, 68, 68, 0.25) !important;
+            background-color: rgba(239, 68, 68, 0.05) !important;
+            padding: 6px !important;
+            display: inline-flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            border-radius: 6px !important;
+            cursor: pointer;
+            transition: all 0.2s ease !important;
+        }
+
+        .action-btn-delete:hover {
+            color: #f87171 !important;
+            border-color: rgba(239, 68, 68, 0.5) !important;
+            background-color: rgba(239, 68, 68, 0.2) !important;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
+        }
+
         .microsoft-icon-tiny {
             display: inline-grid;
             grid-template-columns: 1fr 1fr;
@@ -550,13 +715,13 @@
             pointer-events: all;
         }
         .admin-modal-content {
-            background-color: rgba(25, 30, 45, 0.95);
-            border: 1px solid var(--card-border);
-            border-radius: 20px;
-            padding: 30px;
+            background-color: rgba(25, 30, 45, 0.96);
+            border: 2px solid var(--card-border);
+            border-radius: 22px;
+            padding: 32px;
             width: 90%;
             max-width: 500px;
-            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
+            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
             transform: scale(0.9);
             transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1);
         }
@@ -574,8 +739,8 @@
         .modal-title {
             font-family: 'Outfit', sans-serif;
             font-size: 1.25rem;
-            font-weight: 600;
-            color: #a5b4fc;
+            font-weight: 700;
+            color: #ffffff;
         }
         .modal-close {
             background: transparent;
@@ -741,7 +906,7 @@
         <!-- Users Table Card -->
         <section class="users-card" style="margin-bottom: 50px;">
             <div class="card-header" style="margin-bottom: 20px;">
-                <div class="card-title" style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 600; color: #a5b4fc;">User Accounts Directory</div>
+                <div class="card-title" style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 700; color: #ffffff;">User Accounts Directory</div>
                 <div style="font-size: 0.8rem; color: var(--text-muted);">
                     Showing registered system entities and block controls
                 </div>
@@ -784,25 +949,65 @@
                                     </div>
                                 </td>
                                 <td>
-                                    @if($usr->role === 'admin')
-                                        <span class="badge badge-admin">Admin</span>
-                                    @else
-                                        <span class="badge badge-user">User Portal</span>
-                                    @endif
-                                    @if($usr->roles->isNotEmpty())
-                                        <div style="display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;">
-                                            @foreach($usr->roles as $role)
-                                                @if(strtolower($role->name) === 'admin')
-                                                    @continue
-                                                @endif
-                                                <span class="badge" style="background-color:rgba(99,102,241,0.1); color:#818cf8; border:1px solid rgba(99,102,241,0.25); font-size:0.65rem;">{{ $role->name }}</span>
-                                            @endforeach
+                                    <div class="role-cell-container" onclick="openAssignRolesModal({{ $usr->id }}, '{{ addslashes($usr->name) }}', {{ json_encode($usr->roles->pluck('id')) }})" title="Click to modify roles for {{ $usr->name }}">
+                                        <!-- Quick Edit Floating Button on Hover -->
+                                        @if($usr->id !== $admin->id)
+                                            <button class="role-quick-edit-btn" onclick="event.stopPropagation(); openAssignRolesModal({{ $usr->id }}, '{{ addslashes($usr->name) }}', {{ json_encode($usr->roles->pluck('id')) }})" title="Edit User Roles">
+                                                <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor">
+                                                    <path d="M14.06,9L15,9.94L5.92,19H5V18.06L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z" />
+                                                </svg>
+                                            </button>
+                                        @endif
+
+                                        <div>
+                                            @if($usr->role === 'admin')
+                                                <span class="badge badge-admin">Admin</span>
+                                            @else
+                                                <span class="badge badge-user">User Portal</span>
+                                            @endif
                                         </div>
-                                    @elseif($usr->role !== 'admin')
-                                        <div style="display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;">
-                                            <span class="badge" style="background-color:rgba(99,102,241,0.1); color:#818cf8; border:1px solid rgba(99,102,241,0.25); font-size:0.65rem;">{{ $defaultRoleName }}</span>
-                                        </div>
-                                    @endif
+
+                                        @if($usr->roles->isNotEmpty())
+                                            <div style="display:flex; flex-wrap:wrap; gap:4px; margin-top:2px;">
+                                                @foreach($usr->roles as $role)
+                                                    @if(strtolower($role->name) === 'admin')
+                                                        @continue
+                                                    @endif
+                                                    <span class="badge" style="background-color:rgba(99,102,241,0.1); color:#818cf8; border:1px solid rgba(99,102,241,0.25); font-size:0.65rem;">{{ $role->name }}</span>
+                                                @endforeach
+                                            </div>
+                                        @elseif($usr->role !== 'admin')
+                                            <div style="display:flex; flex-wrap:wrap; gap:4px; margin-top:2px;">
+                                                <span class="badge" style="background-color:rgba(99,102,241,0.1); color:#818cf8; border:1px solid rgba(99,102,241,0.25); font-size:0.65rem;">{{ $defaultRoleName }}</span>
+                                            </div>
+                                        @endif
+
+                                        @if($usr->overrides->isNotEmpty())
+                                            <div style="display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;">
+                                                @foreach($usr->overrides as $ov)
+                                                    @if($ov->type === 'allow')
+                                                        <span class="badge" style="background-color:rgba(16,185,129,0.15); color:#34d399; border:1px solid rgba(16,185,129,0.3); font-size:0.65rem; display:inline-flex; align-items:center; gap:4px;" title="Explicitly Allowed Service">
+                                                            + {{ $ov->app->name ?? 'App' }}
+                                                            <form action="{{ route('admin.overrides.destroy', $ov->id) }}" method="POST" onsubmit="return confirm('Remove override for {{ addslashes($ov->app->name ?? 'App') }}?')" style="display:inline; margin:0;" onclick="event.stopPropagation();">
+                                                                @csrf
+                                                                @method('DELETE')
+                                                                <button type="submit" style="background:none; border:none; color:#34d399; cursor:pointer; padding:0 2px; line-height:1; font-weight:bold; font-size:0.75rem;" title="Remove Override">&times;</button>
+                                                            </form>
+                                                        </span>
+                                                    @else
+                                                        <span class="badge" style="background-color:rgba(239,68,68,0.15); color:#fca5a5; border:1px solid rgba(239,68,68,0.3); font-size:0.65rem; display:inline-flex; align-items:center; gap:4px;" title="Explicitly Revoked Service">
+                                                            &minus; {{ $ov->app->name ?? 'App' }}
+                                                            <form action="{{ route('admin.overrides.destroy', $ov->id) }}" method="POST" onsubmit="return confirm('Remove revoked override for {{ addslashes($ov->app->name ?? 'App') }}?')" style="display:inline; margin:0;" onclick="event.stopPropagation();">
+                                                                @csrf
+                                                                @method('DELETE')
+                                                                <button type="submit" style="background:none; border:none; color:#fca5a5; cursor:pointer; padding:0 2px; line-height:1; font-weight:bold; font-size:0.75rem;" title="Remove Revoked Override">&times;</button>
+                                                            </form>
+                                                        </span>
+                                                    @endif
+                                                @endforeach
+                                            </div>
+                                        @endif
+                                    </div>
                                 </td>
                                 <td>
                                     @if($usr->microsoft_id)
@@ -827,6 +1032,12 @@
                                 <td style="text-align: right; white-space: nowrap;">
                                      @if($usr->id !== $admin->id)
                                          <button class="action-btn" onclick="openAssignRolesModal({{ $usr->id }}, '{{ addslashes($usr->name) }}', {{ json_encode($usr->roles->pluck('id')) }})" style="color:var(--accent-primary); border-color:rgba(99,102,241,0.2); font-size:0.75rem; padding:6px 12px; margin-right:4px;">Assign Roles</button>
+                                         <button class="action-btn" onclick="openCreateOverrideModalForUser({{ $usr->id }})" style="color:#06b6d4; border-color:rgba(6,182,212,0.25); background-color:rgba(6,182,212,0.05); font-size:0.75rem; padding:6px 10px; margin-right:4px; font-weight:600;" title="Manage Service Overrides">
+                                             <svg viewBox="0 0 24 24" style="width: 13px; height: 13px; fill: currentColor; vertical-align: text-bottom; margin-right: 2px;">
+                                                 <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M11,7V11H7V13H11V17H13V13H17V11H13V7H11Z"/>
+                                             </svg>
+                                             Overrides
+                                         </button>
                                          
                                          @if($usr->isAdmin())
                                              <button class="action-btn" onclick="confirmAdminToggle({{ $usr->id }}, '{{ addslashes($usr->name) }}', 'revoke')" 
@@ -866,23 +1077,23 @@
         </section>
 
         <!-- App Management, Roles Management, & User Overrides Grid -->
-        <section class="management-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 30px; margin-bottom: 50px;">
+        <section class="management-grid">
             
             <!-- App Management Card -->
             <div class="admin-card">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-                    <h3 style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 600; color: #a5b4fc; margin: 0;">Manage System Services</h3>
+                    <h3 style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 700; color: #ffffff; margin: 0;">Manage System Services</h3>
                     <button onclick="openModal('add-service-modal')" class="action-btn" style="color:var(--accent-primary); border-color:var(--accent-primary); font-size:0.75rem; padding:6px 12px; font-weight:600; cursor:pointer;">+ Add Service</button>
                 </div>
 
                 <!-- Registered Apps List -->
-                <div class="table-responsive" style="max-height: 350px; overflow-y: auto;">
+                <div class="table-responsive" style="max-height: 480px; overflow-y: auto;">
                     <table class="users-table" style="font-size:0.8rem;">
                         <thead>
                             <tr>
-                                <th>Service</th>
-                                <th>Tag</th>
-                                <th style="text-align: right;">Action</th>
+                                <th style="width: 45%;">Service</th>
+                                <th style="width: 35%;">Tag</th>
+                                <th style="width: 20%; text-align: right;">Action</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -903,7 +1114,7 @@
                                     <td><span class="badge" style="background-color:rgba(255,255,255,0.05); color:#cbd5e1; border:1px solid rgba(255,255,255,0.1);">{{ $app->tag }}</span></td>
                                     <td style="text-align: right;">
                                         <div style="display: inline-flex; gap: 6px; justify-content: flex-end; align-items: center;">
-                                            <button class="action-btn" onclick="openEditAppModal({{ $app->id }}, {{ json_encode($app->name) }}, {{ json_encode($app->url) }}, {{ json_encode($app->tag) }}, {{ json_encode($app->icon_svg) }}, {{ json_encode($app->color) }}, {{ json_encode($app->desc) }}, {{ json_encode($app->logo) }})" style="color:var(--info-color); border-color:rgba(6,182,212,0.2); padding:6px; display:flex; align-items:center; justify-content:center; border-radius:6px;" title="Edit Service">
+                                            <button class="action-btn action-btn-edit" onclick="openEditAppModal({{ $app->id }}, {{ json_encode($app->name) }}, {{ json_encode($app->url) }}, {{ json_encode($app->tag) }}, {{ json_encode($app->icon_svg) }}, {{ json_encode($app->color) }}, {{ json_encode($app->desc) }}, {{ json_encode($app->logo) }})" title="Edit Service">
                                                 <svg viewBox="0 0 24 24" style="width: 14px; height: 14px; fill: currentColor;">
                                                     <path d="M14.06,9L15,9.94L5.92,19H5V18.06L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z" />
                                                 </svg>
@@ -911,7 +1122,7 @@
                                             <form action="{{ route('admin.apps.destroy', $app->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this service?')" style="margin: 0; display: inline;">
                                                 @csrf
                                                 @method('DELETE')
-                                                <button type="submit" class="action-btn" style="color:#ef4444; border-color:rgba(239,68,68,0.2); padding:6px; display:flex; align-items:center; justify-content:center; border-radius:6px;" title="Delete Service">
+                                                <button type="submit" class="action-btn action-btn-delete" title="Delete Service">
                                                     <svg viewBox="0 0 24 24" style="width: 14px; height: 14px; fill: currentColor;">
                                                         <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
                                                     </svg>
@@ -933,7 +1144,7 @@
             <!-- Role Management Card -->
             <div class="admin-card">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-                    <h3 style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 600; color: #a5b4fc; margin: 0;">Manage Roles & Services</h3>
+                    <h3 style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 700; color: #ffffff; margin: 0;">Manage Roles & Services</h3>
                     <button onclick="openModal('create-role-modal')" class="action-btn" style="color:var(--accent-primary); border-color:var(--accent-primary); font-size:0.75rem; padding:6px 12px; font-weight:600; cursor:pointer;">+ Add Role</button>
                 </div>
                 
@@ -956,13 +1167,13 @@
                 </form>
 
                 <!-- Registered Roles List -->
-                <div class="table-responsive" style="max-height: 280px; overflow-y: auto;">
+                <div class="table-responsive" style="max-height: 480px; overflow-y: auto;">
                     <table class="users-table" style="font-size:0.8rem;">
                         <thead>
                             <tr>
-                                <th>Role Name</th>
-                                <th>Assigned Services</th>
-                                <th style="text-align: right;">Actions</th>
+                                <th style="width: 35%;">Role Name</th>
+                                <th style="width: 45%;">Assigned Services</th>
+                                <th style="width: 20%; text-align: right;">Actions</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -986,12 +1197,22 @@
                                         </div>
                                     </td>
                                     <td style="text-align: right; white-space: nowrap;">
-                                        <button class="action-btn" onclick="openEditRoleModal({{ $role->id }}, '{{ addslashes($role->name) }}', '{{ addslashes($role->description) }}', {{ json_encode($role->apps->pluck('id')) }})" style="color:var(--info-color); border-color:rgba(6,182,212,0.2); font-size:0.75rem; padding:4px 8px; margin-right:4px;">Edit</button>
-                                        <form action="{{ route('admin.roles.destroy', $role->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this role?')" style="display:inline;">
-                                            @csrf
-                                            @method('DELETE')
-                                            <button type="submit" class="action-btn" style="color:#ef4444; border-color:rgba(239,68,68,0.2); font-size:0.75rem; padding:4px 8px;">Delete</button>
-                                        </form>
+                                        <div style="display: inline-flex; gap: 6px; justify-content: flex-end; align-items: center;">
+                                            <button class="action-btn action-btn-edit" onclick="openEditRoleModal({{ $role->id }}, '{{ addslashes($role->name) }}', '{{ addslashes($role->description) }}', {{ json_encode($role->apps->pluck('id')) }})" title="Edit Role">
+                                                <svg viewBox="0 0 24 24" style="width: 14px; height: 14px; fill: currentColor;">
+                                                    <path d="M14.06,9L15,9.94L5.92,19H5V18.06L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z" />
+                                                </svg>
+                                            </button>
+                                            <form action="{{ route('admin.roles.destroy', $role->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this role?')" style="margin: 0; display: inline;">
+                                                @csrf
+                                                @method('DELETE')
+                                                <button type="submit" class="action-btn action-btn-delete" title="Delete Role">
+                                                    <svg viewBox="0 0 24 24" style="width: 14px; height: 14px; fill: currentColor;">
+                                                        <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
+                                                    </svg>
+                                                </button>
+                                            </form>
+                                        </div>
                                     </td>
                                 </tr>
                             @empty
@@ -1001,70 +1222,8 @@
                             @endforelse
                         </tbody>
                     </table>
-                </div>
-            </div>
-
-            <!-- User Service Overrides Card -->
-            <div class="admin-card">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-                    <h3 style="font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 600; color: #a5b4fc; margin: 0;">User Service Overrides</h3>
-                    <button onclick="openModal('create-override-modal')" class="action-btn" style="color:var(--accent-primary); border-color:var(--accent-primary); font-size:0.75rem; padding:6px 12px; font-weight:600; cursor:pointer;">+ Add Override</button>
-                </div>
-
-                <!-- Active Overrides List -->
-                <div class="table-responsive" style="max-height: 350px; overflow-y: auto;">
-                    <table class="users-table" style="font-size:0.8rem;">
-                        <thead>
-                            <tr>
-                                <th>User</th>
-                                <th>App</th>
-                                <th>Type</th>
-                                <th style="text-align: right;">Action</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            @forelse($overrides as $override)
-                                <tr>
-                                    <td>
-                                        <div>
-                                            <strong>{{ $override->user->name }}</strong>
-                                            <div style="font-size:0.7rem; color:var(--text-muted);">{{ $override->user->email }}</div>
-                                        </div>
-                                    </td>
-                                    <td>
-                                        @if($override->app)
-                                            <span style="display:flex; align-items:center; gap:6px;">
-                                                <div style="width:8px; height:8px; border-radius:50%; background-color:{{ $override->app->color }};"></div>
-                                                {{ $override->app->name }}
-                                            </span>
-                                        @else
-                                            <span style="color:#ef4444;">App Deleted</span>
-                                        @endif
-                                    </td>
-                                    <td>
-                                        @if($override->type === 'allow')
-                                            <span class="badge" style="background-color:rgba(16,185,129,0.12); color:#10b981; border:1px solid rgba(16,185,129,0.3); font-size:0.65rem; padding:2px 6px;">ADDITIONAL</span>
-                                        @else
-                                            <span class="badge" style="background-color:rgba(239,68,68,0.12); color:#ef4444; border:1px solid rgba(239,68,68,0.3); font-size:0.65rem; padding:2px 6px;">REVOKED</span>
-                                        @endif
-                                    </td>
-                                    <td style="text-align: right;">
-                                        <form action="{{ route('admin.overrides.destroy', $override->id) }}" method="POST" style="display:inline;">
-                                            @csrf
-                                            @method('DELETE')
-                                            <button type="submit" class="action-btn" style="color:#ef4444; border-color:rgba(239,68,68,0.2); font-size:0.75rem; padding:4px 8px;">Remove</button>
-                                        </form>
-                                    </td>
-                                </tr>
-                            @empty
-                                <tr>
-                                    <td colspan="4" style="text-align: center; color: var(--text-muted); padding: 20px;">No custom overrides active. Services resolved by roles.</td>
-                                </tr>
-                            @endforelse
-                        </tbody>
-                    </table>
-                </div>
             </div>
+        </section>
 
         </section>
 
@@ -1077,16 +1236,18 @@
                 <h3 class="modal-title">Register New Service App</h3>
                 <button class="modal-close" onclick="closeModal('add-service-modal')">&times;</button>
             </div>
-            <form action="{{ route('admin.apps.store') }}" method="POST" enctype="multipart/form-data">
+            <form action="{{ route('admin.apps.store') }}" method="POST" enctype="multipart/form-data" class="validated-form">
                 @csrf
                 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                     <div>
-                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Service Name</label>
+                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Service Name <span style="color: #ef4444; font-weight: bold;">*</span></label>
                         <input type="text" name="name" required placeholder="e.g. Keka HR" class="form-input" style="width:100%; padding:10px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;">
+                        <div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">This field is required.</div>
                     </div>
                     <div>
-                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">SSO URL</label>
+                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">SSO URL <span style="color: #ef4444; font-weight: bold;">*</span></label>
                         <input type="url" name="url" required placeholder="https://..." class="form-input" style="width:100%; padding:10px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;">
+                        <div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">Please enter a valid URL.</div>
                     </div>
                 </div>
                 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
@@ -1104,8 +1265,9 @@
                     <textarea name="icon_svg" rows="2" placeholder="e.g. keka, outlook, teams, or raw <svg>...</svg>" class="form-input" style="width:100%; padding:10px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white; font-family:monospace; font-size:0.8rem;"></textarea>
                 </div>
                 <div style="margin-bottom: 16px;">
-                    <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Upload Service Logo (Optional)</label>
-                    <input type="file" name="logo" accept=".jpg,.jpeg,.png,.webp,.svg" class="form-input" style="width:100%; padding:8px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;">
+                    <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Upload Service Logo (Optional - Max 5MB)</label>
+                    <input type="file" name="logo" accept=".jpg,.jpeg,.png,.webp,.svg" class="form-input logo-upload-5mb" style="width:100%; padding:8px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;">
+                    <div class="file-size-error" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">File size exceeds maximum limit of 5MB.</div>
                 </div>
                 <div style="margin-bottom: 20px;">
                     <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Service Description</label>
@@ -1126,11 +1288,12 @@
                 <h3 class="modal-title">Create Application Role</h3>
                 <button class="modal-close" onclick="closeModal('create-role-modal')">&times;</button>
             </div>
-            <form action="{{ route('admin.roles.store') }}" method="POST">
+            <form action="{{ route('admin.roles.store') }}" method="POST" class="validated-form">
                 @csrf
                 <div style="margin-bottom: 16px;">
-                    <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Role Name</label>
+                    <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Role Name <span style="color: #ef4444; font-weight: bold;">*</span></label>
                     <input type="text" name="name" required placeholder="e.g. Developer, HR" class="form-input" style="width:100%; padding:10px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;">
+                    <div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">This field is required.</div>
                 </div>
                 <div style="margin-bottom: 16px;">
                     <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Role Description</label>
@@ -1138,14 +1301,11 @@
                 </div>
                 <div style="margin-bottom: 20px;">
                     <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Assign Services Access</label>
-                    <div class="checkbox-grid" style="background:rgba(0,0,0,0.2); border:1px solid var(--card-border); border-radius:8px; padding:12px; max-height:150px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;">
+                    <select name="apps[]" id="create-role-apps-select" multiple="multiple" class="form-input select2-multiple" style="width: 100%;">
                         @foreach($apps as $app)
-                            <label class="checkbox-item">
-                                <input type="checkbox" name="apps[]" value="{{ $app->id }}">
-                                {{ $app->name }}
-                            </label>
+                            <option value="{{ $app->id }}">{{ $app->name }}</option>
                         @endforeach
-                    </div>
+                    </select>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn-cancel" onclick="closeModal('create-role-modal')">Cancel</button>
@@ -1162,10 +1322,10 @@
                 <h3 class="modal-title">Create User Service Override</h3>
                 <button class="modal-close" onclick="closeModal('create-override-modal')">&times;</button>
             </div>
-            <form action="{{ route('admin.overrides.store') }}" method="POST">
+            <form action="{{ route('admin.overrides.store') }}" method="POST" class="validated-form">
                 @csrf
                 <div style="margin-bottom: 16px;">
-                    <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Select User Account</label>
+                    <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Select User Account <span style="color: #ef4444; font-weight: bold;">*</span></label>
                     <select name="user_id" required class="form-input" style="width:100%; padding:10px; background:rgba(11,15,25,0.9); border:1px solid var(--card-border); border-radius:8px; color:white;">
                         <option value="">-- Choose User --</option>
                         @foreach($users as $usr)
@@ -1174,19 +1334,21 @@
                             @endif
                         @endforeach
                     </select>
+                    <div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">Please select a user account.</div>
                 </div>
                 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;">
                     <div>
-                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Service App</label>
+                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Service App <span style="color: #ef4444; font-weight: bold;">*</span></label>
                         <select name="app_id" required class="form-input" style="width:100%; padding:10px; background:rgba(11,15,25,0.9); border:1px solid var(--card-border); border-radius:8px; color:white;">
                             <option value="">-- Choose App --</option>
                             @foreach($apps as $app)
                                 <option value="{{ $app->id }}">{{ $app->name }}</option>
                             @endforeach
                         </select>
+                        <div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">Please select a service app.</div>
                     </div>
                     <div>
-                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Override Mode</label>
+                        <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Override Mode <span style="color: #ef4444; font-weight: bold;">*</span></label>
                         <select name="type" required class="form-input" style="width:100%; padding:10px; background:rgba(11,15,25,0.9); border:1px solid var(--card-border); border-radius:8px; color:white;">
                             <option value="allow">ALLOW (Add extra service)</option>
                             <option value="deny">DENY (Revoke service)</option>
@@ -1208,26 +1370,24 @@
                 <h3 class="modal-title">Edit Application Role</h3>
                 <button class="modal-close" onclick="closeModal('edit-role-modal')">&times;</button>
             </div>
-            <form id="edit-role-form" method="POST">
+            <form id="edit-role-form" method="POST" class="validated-form">
                 @csrf
                 <div style="margin-bottom: 16px;">
-                    <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Role Name</label>
+                    <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Role Name <span style="color: #ef4444; font-weight: bold;">*</span></label>
                     <input type="text" id="edit-role-name" name="name" required class="form-input" style="width:100%; padding:10px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;">
+                    <div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">This field is required.</div>
                 </div>
                 <div style="margin-bottom: 16px;">
                     <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Description</label>
                     <input type="text" id="edit-role-description" name="description" class="form-input" style="width:100%; padding:10px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;">
                 </div>
-                <div style="margin-bottom: 16px;">
+                <div style="margin-bottom: 20px;">
                     <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Services Access</label>
-                    <div class="checkbox-grid">
+                    <select name="apps[]" id="edit-role-apps-select" multiple="multiple" class="form-input select2-multiple" style="width: 100%;">
                         @foreach($apps as $app)
-                            <label class="checkbox-item">
-                                <input type="checkbox" name="apps[]" value="{{ $app->id }}" class="edit-role-app-checkbox" id="edit-role-app-{{ $app->id }}">
-                                {{ $app->name }}
-                            </label>
+                            <option value="{{ $app->id }}">{{ $app->name }}</option>
                         @endforeach
-                    </div>
+                    </select>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn-cancel" onclick="closeModal('edit-role-modal')">Cancel</button>
@@ -1244,16 +1404,18 @@
                 <h3 class="modal-title">Edit Service App</h3>
                 <button class="modal-close" onclick="closeModal('edit-app-modal')">&times;</button>
             </div>
-            <form id="edit-app-form" method="POST" enctype="multipart/form-data">
+            <form id="edit-app-form" method="POST" enctype="multipart/form-data" class="validated-form">
                 @csrf
                 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                      <div>
-                         <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Service Name</label>
+                         <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Service Name <span style="color: #ef4444; font-weight: bold;">*</span></label>
                          <input type="text" id="edit-app-name" name="name" required class="form-input" style="width:100%; padding:10px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;">
+                         <div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">This field is required.</div>
                      </div>
                      <div>
-                         <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Service URL</label>
+                         <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Service URL <span style="color: #ef4444; font-weight: bold;">*</span></label>
                          <input type="url" id="edit-app-url" name="url" required class="form-input" style="width:100%; padding:10px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;">
+                         <div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">Please enter a valid URL.</div>
                      </div>
                 </div>
                 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
@@ -1271,8 +1433,9 @@
                      <textarea id="edit-app-icon_svg" name="icon_svg" rows="2" placeholder="e.g. keka, outlook, teams, or raw <svg>...</svg>" class="form-input" style="width:100%; padding:10px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white; font-family:monospace; font-size:0.8rem;"></textarea>
                 </div>
                 <div style="margin-bottom: 16px;">
-                     <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Upload Service Logo (Optional - overrides preset SVG)</label>
-                     <input type="file" name="logo" accept=".jpg,.jpeg,.png,.webp,.svg" class="form-input" style="width:100%; padding:8px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;">
+                     <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Upload Service Logo (Optional - Max 5MB)</label>
+                     <input type="file" name="logo" accept=".jpg,.jpeg,.png,.webp,.svg" class="form-input logo-upload-5mb" style="width:100%; padding:8px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;">
+                     <div class="file-size-error" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">File size exceeds maximum limit of 5MB.</div>
                      <div style="font-size:0.7rem; color:var(--text-muted); margin-top:4px;">Currently: <span id="edit-app-logo-status" style="font-weight:600; color:#38bdf8;">None</span></div>
                 </div>
                 <div style="margin-bottom: 20px;">
@@ -1287,17 +1450,21 @@
         </div>
     </div>
 
-    <!-- Assign User Roles Modal -->
+    <!-- Assign User Roles & Service Overrides Modal -->
     <div id="assign-roles-modal" class="admin-modal">
-        <div class="admin-modal-content">
+        <div class="admin-modal-content" style="max-width: 580px; max-height: 90vh; overflow-y: auto;">
             <div class="modal-header">
-                <h3 class="modal-title">Assign Roles to <span id="assign-user-name">User</span></h3>
+                <h3 class="modal-title">Manage Access for <span id="assign-user-name" style="color:var(--accent-primary);">User</span></h3>
                 <button class="modal-close" onclick="closeModal('assign-roles-modal')">&times;</button>
             </div>
-            <form id="assign-roles-form" method="POST">
+
+            <!-- Section 1: Assigned Application Roles -->
+            <form id="assign-roles-form" method="POST" style="margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--card-border);">
                 @csrf
-                <div style="margin-bottom: 16px;">
-                    <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Select Roles for User</label>
+                <div style="margin-bottom: 12px;">
+                    <label style="display:block; font-size:0.85rem; color:#ffffff; font-weight:600; margin-bottom:8px;">
+                        1. Application Roles (Group Access)
+                    </label>
                     <select name="roles[]" id="assign-roles-select" multiple="multiple" class="form-input select2-multiple" style="width: 100%;">
                         @foreach($roles as $role)
                             @if(strtolower($role->name) === 'admin')
@@ -1307,16 +1474,60 @@
                         @endforeach
                     </select>
                 </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn-cancel" onclick="closeModal('assign-roles-modal')">Cancel</button>
-                    <button type="submit" class="action-btn" style="background-color:var(--accent-primary); color:white; border-color:transparent; font-weight:600; padding:8px 16px; border-radius:8px; cursor:pointer;">Update Roles</button>
+                <div style="display:flex; justify-content:flex-end;">
+                    <button type="submit" class="action-btn" style="background-color:var(--accent-primary); color:white; border-color:transparent; font-weight:600; padding:6px 14px; border-radius:8px; cursor:pointer; font-size:0.8rem;">Update Roles</button>
                 </div>
             </form>
+
+            <!-- Section 2: Specific Service Overrides (Grant or Revoke Specific Apps) -->
+            <div>
+                <label style="display:block; font-size:0.85rem; color:#ffffff; font-weight:600; margin-bottom:10px;">
+                    2. Specific Service Overrides (Add / Revoke Individual Services)
+                </label>
+
+                <!-- Active Overrides List -->
+                <div id="modal-active-overrides-container" style="margin-bottom: 16px;">
+                    <!-- Dynamically populated via JS -->
+                </div>
+
+                <!-- Add New Override Sub-Form -->
+                <form action="{{ route('admin.overrides.store') }}" method="POST" class="validated-form" style="background: rgba(255,255,255,0.03); border: 1px dashed var(--card-border); border-radius: 12px; padding: 14px;">
+                    @csrf
+                    <input type="hidden" name="user_id" id="override-form-user-id" value="">
+                    <div style="font-size: 0.75rem; color: var(--text-muted); font-weight: 600; margin-bottom: 10px;">+ Add New Service Override for User</div>
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;">
+                        <div>
+                            <select name="app_id" required class="form-input" style="width:100%; padding:8px; background:rgba(11,15,25,0.9); border:1px solid var(--card-border); border-radius:8px; color:white; font-size:0.75rem;">
+                                <option value="">-- Select Service App --</option>
+                                @foreach($apps as $app)
+                                    <option value="{{ $app->id }}">{{ $app->name }}</option>
+                                @endforeach
+                            </select>
+                        </div>
+                        <div>
+                            <select name="type" required class="form-input" style="width:100%; padding:8px; background:rgba(11,15,25,0.9); border:1px solid var(--card-border); border-radius:8px; color:white; font-size:0.75rem;">
+                                <option value="allow">ALLOW (Grant Service Access)</option>
+                                <option value="deny">DENY (Revoke Service Access)</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div style="display:flex; justify-content:flex-end;">
+                        <button type="submit" class="action-btn" style="background-color:#06b6d4; color:white; border-color:transparent; font-weight:600; padding:6px 14px; border-radius:6px; cursor:pointer; font-size:0.75rem;">Apply Override</button>
+                    </div>
+                </form>
+            </div>
+
+            <div class="modal-footer" style="margin-top: 20px;">
+                <button type="button" class="btn-cancel" onclick="closeModal('assign-roles-modal')">Close</button>
+            </div>
         </div>
     </div>
 
     <script>
         function openModal(modalId) {
+            if (modalId === 'create-role-modal') {
+                $('#create-role-apps-select').val([]).trigger('change');
+            }
             document.getElementById(modalId).classList.add('active');
         }
 
@@ -1331,26 +1542,82 @@ function openEditRoleModal(id, name, description, appIds) {
             document.getElementById('edit-role-name').value = name;
             document.getElementById('edit-role-description').value = description || '';
 
-            // Reset and check assigned apps
-            document.querySelectorAll('.edit-role-app-checkbox').forEach(cb => {
-                cb.checked = appIds.includes(parseInt(cb.value));
-            });
+            // Set select values and trigger Select2 update
+            $('#edit-role-apps-select').val(appIds).trigger('change');
 
             openModal('edit-role-modal');
         }
 
+        const allUserOverridesData = {
+            @foreach($users as $usr)
+                {{ $usr->id }}: [
+                    @foreach($usr->overrides as $ov)
+                        {
+                            id: {{ $ov->id }},
+                            app_name: "{{ addslashes($ov->app->name ?? 'App') }}",
+                            type: "{{ $ov->type }}"
+                        },
+                    @endforeach
+                ],
+            @endforeach
+        };
+
         function openAssignRolesModal(userId, name, roleIds) {
             const form = document.getElementById('assign-roles-form');
             form.action = "{{ route('admin.users.roles.update', ':id') }}".replace(':id', userId);
 
             document.getElementById('assign-user-name').innerText = name;
+            const userIdInput = document.getElementById('override-form-user-id');
+            if (userIdInput) userIdInput.value = userId;
 
             // Set select values and trigger Select2 update
             $('#assign-roles-select').val(roleIds).trigger('change');
 
+            // Populate active overrides list for this user inside the modal
+            const container = document.getElementById('modal-active-overrides-container');
+            const overrides = allUserOverridesData[userId] || [];
+            
+            if (overrides.length === 0) {
+                container.innerHTML = `<div style="font-size:0.75rem; color:var(--text-muted); padding:6px 0; font-style:italic;">No custom service overrides active for this user.</div>`;
+            } else {
+                let html = `<div style="display:flex; flex-direction:column; gap:6px;">`;
+                overrides.forEach(ov => {
+                    const isAllow = ov.type === 'allow';
+                    const bg = isAllow ? 'rgba(16,185,129,0.12)' : 'rgba(239,68,68,0.12)';
+                    const color = isAllow ? '#34d399' : '#fca5a5';
+                    const border = isAllow ? 'rgba(16,185,129,0.3)' : 'rgba(239,68,68,0.3)';
+                    const label = isAllow ? '+ ALLOWED (Granted Access)' : '&minus; REVOKED (Access Denied)';
+                    const destroyUrl = "{{ route('admin.overrides.destroy', ':id') }}".replace(':id', ov.id);
+
+                    html += `
+                        <div style="display:flex; justify-content:space-between; align-items:center; background:${bg}; border:1px solid ${border}; padding:6px 12px; border-radius:8px; font-size:0.75rem;">
+                            <span style="color:${color}; font-weight:600;">
+                                <strong>${ov.app_name}</strong> &bull; <span style="font-size:0.7rem;">${label}</span>
+                            </span>
+                            <form action="${destroyUrl}" method="POST" onsubmit="return confirm('Remove override for ${ov.app_name}?')" style="margin:0;">
+                                @csrf
+                                @method('DELETE')
+                                <button type="submit" class="action-btn action-btn-delete" style="padding:2px 8px; font-size:0.7rem;" title="Delete Override">
+                                    Remove
+                                </button>
+                            </form>
+                        </div>
+                    `;
+                });
+                html += `</div>`;
+                container.innerHTML = html;
+            }
+
             openModal('assign-roles-modal');
         }
 
+        function openCreateOverrideModalForUser(userId) {
+            const usr = {!! json_encode($users->map(fn($u) => ['id' => $u->id, 'name' => $u->name, 'roles' => $u->roles->pluck('id')])) !!}.find(u => u.id === userId);
+            if (usr) {
+                openAssignRolesModal(usr.id, usr.name, usr.roles);
+            }
+        }
+
         $(document).ready(function() {
             $('#assign-roles-select').select2({
                 placeholder: "Select roles...",
@@ -1358,6 +1625,73 @@ function openAssignRolesModal(userId, name, roleIds) {
                 width: '100%',
                 dropdownParent: $('#assign-roles-modal')
             });
+
+            $('#create-role-apps-select').select2({
+                placeholder: "Select services access...",
+                allowClear: true,
+                width: '100%',
+                dropdownParent: $('#create-role-modal')
+            });
+
+            $('#edit-role-apps-select').select2({
+                placeholder: "Select services access...",
+                allowClear: true,
+                width: '100%',
+                dropdownParent: $('#edit-role-modal')
+            });
+
+            // Client-side file format and size validation (JPG, PNG, WEBP, SVG, AVIF, GIF, BMP | 5MB max)
+            const allowedFormats = ['jpg', 'jpeg', 'png', 'webp', 'svg', 'avif', 'gif', 'bmp', 'ico'];
+            $('.logo-upload-5mb').on('change', function() {
+                const file = this.files[0];
+                const errorDiv = $(this).siblings('.file-size-error');
+                if (file) {
+                    const ext = file.name.split('.').pop().toLowerCase();
+                    if (!allowedFormats.includes(ext)) {
+                        errorDiv.text('Invalid file format ".' + ext + '". Only PNG, JPG, WEBP, SVG, AVIF, GIF, and BMP image formats are allowed.').show();
+                        this.value = '';
+                        return;
+                    }
+                    if (file.size > 5 * 1024 * 1024) {
+                        errorDiv.text('File size (' + (file.size / (1024*1024)).toFixed(2) + 'MB) exceeds maximum limit of 5MB. Please upload an image under 5MB.').show();
+                        this.value = '';
+                        return;
+                    }
+                    errorDiv.hide();
+                }
+            });
+
+            // Client-side required field validation
+            $('form.validated-form').on('submit', function(e) {
+                let isValid = true;
+                $(this).find('[required]').each(function() {
+                    const input = $(this);
+                    const val = input.val();
+                    const errorDiv = input.siblings('.field-error-msg');
+                    if (!val || (Array.isArray(val) && val.length === 0)) {
+                        isValid = false;
+                        input.css('border-color', '#ef4444');
+                        if (errorDiv.length) errorDiv.show();
+                    } else {
+                        input.css('border-color', 'var(--card-border)');
+                        if (errorDiv.length) errorDiv.hide();
+                    }
+                });
+
+                if (!isValid) {
+                    e.preventDefault();
+                }
+            });
+
+            $('form.validated-form [required]').on('input change', function() {
+                const input = $(this);
+                const val = input.val();
+                const errorDiv = input.siblings('.field-error-msg');
+                if (val && (!Array.isArray(val) || val.length > 0)) {
+                    input.css('border-color', 'rgba(255, 255, 255, 0.18)');
+                    if (errorDiv.length) errorDiv.hide();
+                }
+            });
         });
 
         function openEditAppModal(id, name, url, tag, iconSvg, color, desc, logoPath) {
diff --git a/resources/views/auth/admin-login.blade.php b/resources/views/auth/admin-login.blade.php
index 98fc4e5..72fded8 100644
--- a/resources/views/auth/admin-login.blade.php
+++ b/resources/views/auth/admin-login.blade.php
@@ -22,6 +22,37 @@
             --success-color: #10b981;
         }
 
+        /* Modern Thin White Scrollbars */
+        html, body, *, ::-webkit-scrollbar {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(255, 255, 255, 0.4) rgba(15, 23, 42, 0.35);
+        }
+
+        ::-webkit-scrollbar {
+            width: 5px;
+            height: 5px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(15, 23, 42, 0.35);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.4);
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.85);
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
+        }
+
+        ::-webkit-scrollbar-corner {
+            background: transparent;
+        }
+
         * {
             box-sizing: border-box;
             margin: 0;
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index f0ffcd8..40a5072 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -73,6 +73,58 @@
             pointer-events: auto !important;
         }
 
+        /* Drag and Drop Facilities Styling */
+        .service-card-glass {
+            cursor: grab;
+            user-select: none;
+            -webkit-user-select: none;
+        }
+        .service-card-glass:active {
+            cursor: grabbing;
+        }
+        .service-card-glass.dragging {
+            opacity: 0.35;
+            transform: scale(0.94);
+            border: 2px dashed rgba(255, 255, 255, 0.6) !important;
+            box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
+        }
+        .service-card-glass.drag-over {
+            border: 2px solid #38bdf8 !important;
+            transform: translateY(-6px) scale(1.04);
+            box-shadow: 0 12px 30px rgba(56, 189, 248, 0.35);
+        }
+
+        /* Modern Ultra-Thin White Custom Scrollbars */
+        html, body, *, ::-webkit-scrollbar {
+            scrollbar-width: thin;
+            scrollbar-color: rgba(255, 255, 255, 0.4) rgba(15, 23, 42, 0.35);
+        }
+
+        ::-webkit-scrollbar {
+            width: 5px;
+            height: 5px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(15, 23, 42, 0.35);
+            border-radius: 10px;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.4);
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.85);
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
+        }
+
+        ::-webkit-scrollbar-corner {
+            background: transparent;
+        }
+
         /* Personal Modal Styling */
         .personal-modal {
             position: fixed;
@@ -130,7 +182,7 @@
             font-family: 'Outfit', sans-serif;
             font-size: 1.2rem;
             font-weight: 700;
-            color: #a5b4fc;
+            color: #ffffff;
         }
 
         .modal-close {
@@ -714,9 +766,7 @@
             font-size: 1.4rem;
             font-weight: 700;
             margin-bottom: 12px;
-            background: linear-gradient(135deg, #a5b4fc 0%, #38bdf8 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            color: #ffffff;
         }
 
         .sso-subtitle {
@@ -848,9 +898,9 @@
         <section class="services-container">
             <h2 class="section-title">Authorized Corporate Services</h2>
             
-            <div class="services-grid">
+            <div class="services-grid" id="corporate-services-grid">
                 @foreach($services as $service)
-                    <div class="service-card-glass" onclick="launchSSO('{{ $service['name'] }}', '{{ route('sso.launch', $service['id']) }}')" style="--service-color: {{ $service['color'] ?? '#4f46e5' }}">
+                    <div class="service-card-glass" draggable="true" data-id="corp-{{ $service['id'] }}" onclick="launchSSO('{{ $service['name'] }}', '{{ route('sso.launch', $service['id']) }}')" style="--service-color: {{ $service['color'] ?? '#4f46e5' }}">
                         <!-- Logo Highlight Wrapper -->
                         <div class="service-logo-wrapper">
                             @if($service['logo'])
@@ -905,20 +955,19 @@
                 </button>
             </div>
             
-            <div class="services-grid">
+            <div class="services-grid" id="personal-services-grid">
                 @forelse($personalApps as $pApp)
-                    <div class="service-card-glass personal-app-card" style="--service-color: {{ $pApp->color ?? '#4f46e5' }};">
+                    <div class="service-card-glass personal-app-card" draggable="true" data-id="personal-{{ $pApp->id }}" style="--service-color: {{ $pApp->color ?? '#4f46e5' }};">
                         
                         <!-- Relative Wrapper for Logo + Actions -->
                         <div style="position: relative; display: inline-block;">
                             <!-- Delete & Edit overlay buttons on hover -->
                             <div class="personal-app-actions" style="position: absolute; top: -6px; right: -6px; display: flex; gap: 6px; z-index: 100; opacity: 0; transition: opacity 0.2s ease; pointer-events: none;">
                                 <button onclick="event.stopPropagation(); openEditPersonalAppModal({{ $pApp->id }}, '{{ addslashes($pApp->name) }}', '{{ addslashes($pApp->url) }}', '{{ addslashes($pApp->color) }}', '{{ addslashes($pApp->tag) }}', '{{ addslashes($pApp->desc) }}', '{{ $pApp->logo }}')" 
-                                        style="pointer-events: auto; background: #6366f1; border: 1.5px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.6); transition: transform 0.2s;"
+                                        style="pointer-events: auto; background: #06b6d4; border: 1.5px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.6); transition: transform 0.2s;"
                                         onmouseover="this.style.transform='scale(1.15)'" onmouseout="this.style.transform='scale(1)'" title="Edit App">
-                                    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                                    <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor">
+                                        <path d="M14.06,9L15,9.94L5.92,19H5V18.06L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z" />
                                     </svg>
                                 </button>
                                 <form action="{{ route('dashboard.personal-apps.destroy', $pApp->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this custom app?')" style="display: inline;">
@@ -927,9 +976,8 @@
                                     <button type="submit" onclick="event.stopPropagation();" 
                                             style="pointer-events: auto; background: #ef4444; border: 1.5px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.6); transition: transform 0.2s;"
                                             onmouseover="this.style.transform='scale(1.15)'" onmouseout="this.style.transform='scale(1)'" title="Delete App">
-                                        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-                                            <polyline points="3 6 5 6 21 6"/>
-                                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                        <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor">
+                                            <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
                                         </svg>
                                     </button>
                                 </form>
@@ -985,20 +1033,23 @@
                 <h3 class="modal-title">Add Custom Application</h3>
                 <button class="modal-close" onclick="closePersonalModal('add-personal-app-modal')">&times;</button>
             </div>
-            <form action="{{ route('dashboard.personal-apps.store') }}" method="POST" enctype="multipart/form-data">
+            <form action="{{ route('dashboard.personal-apps.store') }}" method="POST" enctype="multipart/form-data" class="validated-form">
                 @csrf
                 <div class="form-group">
-                    <label class="form-label">Application Name *</label>
+                    <label class="form-label">Application Name <span style="color: #ef4444; font-weight: bold;">*</span></label>
                     <input type="text" name="name" required placeholder="e.g. My Github, Internal Wiki" class="form-input">
+                    <div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">This field is required.</div>
                 </div>
                 <div class="form-group">
-                    <label class="form-label">Redirect URL *</label>
+                    <label class="form-label">Redirect URL <span style="color: #ef4444; font-weight: bold;">*</span></label>
                     <input type="url" name="url" required placeholder="https://github.com" class="form-input">
+                    <div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">Please enter a valid URL.</div>
                 </div>
                 <div class="form-group">
-                    <label class="form-label">Custom Logo Image (Optional)</label>
-                    <input type="file" name="logo" class="form-input" style="padding: 6px 12px;">
-                    <div style="font-size:0.65rem; color:var(--text-muted); margin-top:4px;">Supported: PNG, JPG, WEBP, SVG (Max 2MB)</div>
+                    <label class="form-label">Custom Logo Image (Optional - Max 5MB)</label>
+                    <input type="file" name="logo" class="form-input logo-upload-5mb" style="padding: 6px 12px;">
+                    <div class="file-size-error" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">File size exceeds maximum limit of 5MB.</div>
+                    <div style="font-size:0.65rem; color:var(--text-muted); margin-top:4px;">Supported: PNG, JPG, WEBP, SVG (Max 5MB)</div>
                 </div>
                 <div class="form-group">
                     <label class="form-label">Brand Color (Hex Code)</label>
@@ -1030,19 +1081,22 @@
                 <h3 class="modal-title">Edit Custom Application</h3>
                 <button class="modal-close" onclick="closePersonalModal('edit-personal-app-modal')">&times;</button>
             </div>
-            <form id="edit-personal-app-form" method="POST" enctype="multipart/form-data">
+            <form id="edit-personal-app-form" method="POST" enctype="multipart/form-data" class="validated-form">
                 @csrf
                 <div class="form-group">
-                    <label class="form-label">Application Name *</label>
+                    <label class="form-label">Application Name <span style="color: #ef4444; font-weight: bold;">*</span></label>
                     <input type="text" id="edit-papp-name" name="name" required class="form-input">
+                    <div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">This field is required.</div>
                 </div>
                 <div class="form-group">
-                    <label class="form-label">Redirect URL *</label>
+                    <label class="form-label">Redirect URL <span style="color: #ef4444; font-weight: bold;">*</span></label>
                     <input type="url" id="edit-papp-url" name="url" required class="form-input">
+                    <div class="field-error-msg" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">Please enter a valid URL.</div>
                 </div>
                 <div class="form-group">
-                    <label class="form-label">Custom Logo Image (Optional)</label>
-                    <input type="file" name="logo" class="form-input" style="padding: 6px 12px;">
+                    <label class="form-label">Custom Logo Image (Optional - Max 5MB)</label>
+                    <input type="file" name="logo" class="form-input logo-upload-5mb" style="padding: 6px 12px;">
+                    <div class="file-size-error" style="color: #ef4444; font-size: 0.75rem; margin-top: 4px; font-weight: 500; display: none;">File size exceeds maximum limit of 5MB.</div>
                     <div id="edit-papp-logo-status" style="font-size:0.65rem; margin-top:4px;"></div>
                 </div>
                 <div class="form-group">
@@ -1115,7 +1169,7 @@ function closePersonalModal(modalId) {
             document.getElementById(modalId).classList.remove('active');
         }
 
-        // Theme Switcher Logic
+        // Theme Switcher & Drag-and-Drop Facilities
         document.addEventListener('DOMContentLoaded', () => {
             const themeToggleBtn = document.getElementById('theme-toggle');
             const sunIcon = themeToggleBtn.querySelector('.theme-icon-light');
@@ -1140,6 +1194,130 @@ function updateIcons() {
                 localStorage.setItem('theme', newTheme);
                 updateIcons();
             });
+
+            // Bidirectional Drag and Drop facilities for frontend services
+            function initDragAndDrop(gridId, storageKey) {
+                const grid = document.getElementById(gridId);
+                if (!grid) return;
+
+                // Restore saved order from localStorage
+                const savedOrder = JSON.parse(localStorage.getItem(storageKey) || '[]');
+                if (savedOrder.length > 0) {
+                    const cards = Array.from(grid.children);
+                    const cardMap = new Map();
+                    cards.forEach(card => {
+                        const id = card.getAttribute('data-id');
+                        if (id) cardMap.set(id, card);
+                    });
+                    savedOrder.forEach(id => {
+                        const card = cardMap.get(id);
+                        if (card) grid.appendChild(card);
+                    });
+                }
+
+                let draggedCard = null;
+
+                grid.querySelectorAll('.service-card-glass').forEach(card => {
+                    card.addEventListener('dragstart', (e) => {
+                        draggedCard = card;
+                        card.classList.add('dragging');
+                        e.dataTransfer.effectAllowed = 'move';
+                        e.dataTransfer.setData('text/plain', card.getAttribute('data-id') || '');
+                    });
+
+                    card.addEventListener('dragend', () => {
+                        card.classList.remove('dragging');
+                        grid.querySelectorAll('.service-card-glass').forEach(c => c.classList.remove('drag-over'));
+                        draggedCard = null;
+
+                        // Persist new layout order
+                        const newOrder = Array.from(grid.children)
+                            .map(c => c.getAttribute('data-id'))
+                            .filter(Boolean);
+                        localStorage.setItem(storageKey, JSON.stringify(newOrder));
+                    });
+
+                    card.addEventListener('dragover', (e) => {
+                        e.preventDefault();
+                        e.dataTransfer.dropEffect = 'move';
+                        const targetCard = e.target.closest('.service-card-glass');
+                        if (targetCard && draggedCard && targetCard !== draggedCard && targetCard.parentNode === grid) {
+                            targetCard.classList.add('drag-over');
+                            const rect = targetCard.getBoundingClientRect();
+                            const mouseX = e.clientX - rect.left;
+                            const mouseY = e.clientY - rect.top;
+                            
+                            // Realtime bidirectional placement (left/right/up/down)
+                            const isAfter = (mouseX > rect.width / 2) || (mouseY > rect.height / 2);
+                            if (isAfter) {
+                                grid.insertBefore(draggedCard, targetCard.nextSibling);
+                            } else {
+                                grid.insertBefore(draggedCard, targetCard);
+                            }
+                        }
+                    });
+
+                    card.addEventListener('dragleave', () => {
+                        card.classList.remove('drag-over');
+                    });
+
+                    card.addEventListener('drop', (e) => {
+                        e.preventDefault();
+                        card.classList.remove('drag-over');
+                    });
+                });
+            }
+
+            initDragAndDrop('corporate-services-grid', 'user_corp_services_order');
+            initDragAndDrop('personal-services-grid', 'user_personal_services_order');
+
+            // 5MB Logo upload & explicit format validation (JPG, PNG, WEBP, SVG, AVIF, GIF, BMP)
+            const allowedImageFormats = ['jpg', 'jpeg', 'png', 'webp', 'svg', 'avif', 'gif', 'bmp', 'ico'];
+            document.querySelectorAll('.logo-upload-5mb').forEach(input => {
+                input.addEventListener('change', function() {
+                    const file = this.files[0];
+                    const errorDiv = this.parentElement.querySelector('.file-size-error');
+                    if (file) {
+                        const ext = file.name.split('.').pop().toLowerCase();
+                        if (!allowedImageFormats.includes(ext)) {
+                            if (errorDiv) {
+                                errorDiv.textContent = 'Invalid file format ".' + ext + '". Only PNG, JPG, WEBP, SVG, AVIF, GIF, and BMP image formats are allowed.';
+                                errorDiv.style.display = 'block';
+                            }
+                            this.value = '';
+                            return;
+                        }
+                        if (file.size > 5 * 1024 * 1024) {
+                            if (errorDiv) {
+                                errorDiv.textContent = 'File size (' + (file.size / (1024*1024)).toFixed(2) + 'MB) exceeds maximum limit of 5MB. Please upload an image under 5MB.';
+                                errorDiv.style.display = 'block';
+                            }
+                            this.value = '';
+                            return;
+                        }
+                        if (errorDiv) errorDiv.style.display = 'none';
+                    }
+                });
+            });
+
+            // Form validation
+            document.querySelectorAll('form.validated-form').forEach(form => {
+                form.addEventListener('submit', function(e) {
+                    let isValid = true;
+                    form.querySelectorAll('[required]').forEach(input => {
+                        const errorDiv = input.parentElement.querySelector('.field-error-msg');
+                        if (!input.value || !input.value.trim()) {
+                            isValid = false;
+                            input.style.borderColor = '#ef4444';
+                            if (errorDiv) errorDiv.style.display = 'block';
+                        } else {
+                            input.style.borderColor = 'var(--card-border)';
+                            if (errorDiv) errorDiv.style.display = 'none';
+                        }
+                    });
+                    if (!isValid) e.preventDefault();
+                });
+            });
         });
     </script>
 </body>
diff --git a/routes/web.php b/routes/web.php
index 6ad5465..6c12f3f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -8,8 +8,12 @@
 // Authentication & Portal landing
 Route::get('/', [LoginController::class, 'showLoginForm']);
 Route::get('/login', [LoginController::class, 'showLoginForm'])->name('login');
-Route::get('/admin/login', [LoginController::class, 'showAdminLoginForm'])->name('admin.login');
-Route::post('/admin/login', [LoginController::class, 'adminLogin'])->name('admin.login.submit');
+
+// Control Panel Login
+Route::get('/controlpannel/login', [LoginController::class, 'showAdminLoginForm'])->name('admin.login');
+Route::post('/controlpannel/login', [LoginController::class, 'adminLogin'])->name('admin.login.submit');
+Route::get('/admin/login', fn() => redirect()->route('admin.login'));
+
 Route::post('/logout', [LoginController::class, 'logout'])->name('logout');
 Route::get('/logout', [LoginController::class, 'logout']); // For ease of development/testing via GET
 
@@ -35,24 +39,27 @@
     Route::delete('/dashboard/personal-apps/{id}', [DashboardController::class, 'destroyPersonalApp'])->name('dashboard.personal-apps.destroy');
 });
 
-
 // Admin Control Panel (requires admin role)
-Route::middleware(['auth', 'role:admin'])->group(function () {
-    Route::get('/admin/dashboard', [AdminController::class, 'index'])->name('admin.dashboard')->middleware('verify-ms-session');
-    Route::post('/admin/apps', [AdminController::class, 'storeApp'])->name('admin.apps.store');
-    Route::post('/admin/apps/{id}/update', [AdminController::class, 'updateApp'])->name('admin.apps.update');
-    Route::delete('/admin/apps/{id}', [AdminController::class, 'destroyApp'])->name('admin.apps.destroy');
-    Route::post('/admin/users/{id}/toggle-block', [AdminController::class, 'toggleBlockUser'])->name('admin.users.toggle-block');
-    Route::post('/admin/users/{id}/toggle-admin', [AdminController::class, 'toggleAdminPrivilege'])->name('admin.users.toggle-admin');
+Route::middleware(['auth', 'role:admin'])->prefix('controlpannel')->group(function () {
+    Route::get('/', [AdminController::class, 'index'])->middleware('verify-ms-session');
+    Route::get('/dashboard', [AdminController::class, 'index'])->name('admin.dashboard')->middleware('verify-ms-session');
+    Route::post('/apps', [AdminController::class, 'storeApp'])->name('admin.apps.store');
+    Route::post('/apps/{id}/update', [AdminController::class, 'updateApp'])->name('admin.apps.update');
+    Route::delete('/apps/{id}', [AdminController::class, 'destroyApp'])->name('admin.apps.destroy');
+    Route::post('/users/{id}/toggle-block', [AdminController::class, 'toggleBlockUser'])->name('admin.users.toggle-block');
+    Route::post('/users/{id}/toggle-admin', [AdminController::class, 'toggleAdminPrivilege'])->name('admin.users.toggle-admin');
 
     // Roles CRUD
-    Route::post('/admin/roles', [AdminController::class, 'storeRole'])->name('admin.roles.store');
-    Route::post('/admin/roles/{id}/update', [AdminController::class, 'updateRole'])->name('admin.roles.update');
-    Route::delete('/admin/roles/{id}', [AdminController::class, 'destroyRole'])->name('admin.roles.destroy');
-    Route::post('/admin/settings/default-role', [AdminController::class, 'updateDefaultRole'])->name('admin.settings.default-role');
+    Route::post('/roles', [AdminController::class, 'storeRole'])->name('admin.roles.store');
+    Route::post('/roles/{id}/update', [AdminController::class, 'updateRole'])->name('admin.roles.update');
+    Route::delete('/roles/{id}', [AdminController::class, 'destroyRole'])->name('admin.roles.destroy');
+    Route::post('/settings/default-role', [AdminController::class, 'updateDefaultRole'])->name('admin.settings.default-role');
 
     // User Roles & Overrides
-    Route::post('/admin/users/{id}/roles', [AdminController::class, 'updateUserRoles'])->name('admin.users.roles.update');
-    Route::post('/admin/overrides', [AdminController::class, 'storeUserOverride'])->name('admin.overrides.store');
-    Route::delete('/admin/overrides/{id}', [AdminController::class, 'destroyUserOverride'])->name('admin.overrides.destroy');
+    Route::post('/users/{id}/roles', [AdminController::class, 'updateUserRoles'])->name('admin.users.roles.update');
+    Route::post('/overrides', [AdminController::class, 'storeUserOverride'])->name('admin.overrides.store');
+    Route::delete('/overrides/{id}', [AdminController::class, 'destroyUserOverride'])->name('admin.overrides.destroy');
 });
+
+// Legacy /admin redirect to /controlpannel/dashboard
+Route::get('/admin/{any?}', fn() => redirect()->route('admin.dashboard'))->where('any', '.*');
diff --git a/tests/Feature/SecurityAndAdminTest.php b/tests/Feature/SecurityAndAdminTest.php
index 7f2e697..735704e 100644
--- a/tests/Feature/SecurityAndAdminTest.php
+++ b/tests/Feature/SecurityAndAdminTest.php
@@ -31,17 +31,17 @@ public function test_admin_can_access_admin_dashboard_but_not_standard_users():
         ]);
 
         // Unauthenticated user is redirected to login
-        $this->get('/admin/dashboard')
+        $this->get('/controlpannel/dashboard')
             ->assertRedirect(route('login'));
 
         // Admin can access admin dashboard
         $this->actingAs($admin)
-            ->get('/admin/dashboard')
+            ->get('/controlpannel/dashboard')
             ->assertStatus(200);
 
         // Standard user gets allowed standard user access to dashboard (our middleware handles this)
         $this->actingAs($user)
-            ->get('/admin/dashboard')
+            ->get('/controlpannel/dashboard')
             ->assertRedirect(route('dashboard'));
     }
 
@@ -304,7 +304,7 @@ public function test_user_multiple_roles_admin_link(): void
 
         // And they can access the Admin Dashboard
         $responseAdmin = $this->actingAs($user)
-            ->get('/admin/dashboard');
+            ->get('/controlpannel/dashboard');
         $responseAdmin->assertStatus(200);
     }