diff --git a/package.json b/package.json
index f6f7682..d87b8d8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ticketsystem",
-  "version": "1.2.0",
+  "version": "1.3",
   "description": "",
   "main": "server.js",
   "scripts": {
diff --git a/public/admin-script.js b/public/admin-script.js
index 5a837cd..3b41190 100644
--- a/public/admin-script.js
+++ b/public/admin-script.js
@@ -191,7 +191,6 @@ document.addEventListener('DOMContentLoaded', () => {
         <tr>
           <td>${ticket.id}</td>
           <td class="ticket-title">${escapeHtml(shortTitle)}</td>
-          <td>${escapeHtml(ticket.requester)}</td>
           <td>${escapeHtml(ticket.category) || '-'}</td>
           <td><span class="status-badge status-${statusClass}">${escapeHtml(ticket.status) || 'Unknown'}</span></td>
           <td><span class="priority-badge priority-${priorityClass}">${escapeHtml(ticket.priority) || 'None'}</span></td>
diff --git a/public/admin.css b/public/admin.css
index 5cd08a0..9cca409 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -1,179 +1,124 @@
-/* admin.css - Dark Mode Only */
-
-/* ===== GLOBAL STYLES & VARIABLES ===== */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
-:root {
-  --primary-color: #4A90E2;
-  --primary-hover-color: #357ABD;
-  --secondary-color: #50E3C2;
-  --accent-color: #F5A623;
-  --success-color: #7ED321;
-  --danger-color: #D0021B;
-  --neutral-dark: #f0f0f0;
-  --neutral-medium: #cccccc;
-  --neutral-light: #999999;
-  --bg-color: #121212;
-  --card-bg-color: #1e1e1e;
-  --border-color: #2a2a2a;
-  --shadow-color: rgba(0, 0, 0, 0.5);
-  --text-color: #f5f5f5;
-  --link-color: var(--primary-color);
-  --font-family: 'Inter', sans-serif;
-  --border-radius: 8px;
-  --card-padding: 25px;
-  --input-padding: 12px 15px;
-  --transition-speed: 0.2s ease-in-out;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: var(--font-family);
-  background-color: var(--bg-color);
-  color: var(--text-color);
-  font-size: 16px;
-  line-height: 1.6;
-}
-
-a {
-  color: var(--link-color);
-  text-decoration: none;
-  transition: color var(--transition-speed);
-}
-a:hover {
-  color: var(--primary-hover-color);
-  text-decoration: underline;
-}
-
-/* ===== UTILITY CLASSES ===== */
-.container {
-  max-width: 1400px;
-  margin: auto;
-  padding: 20px 30px;
-}
-
-/* ===== HEADER ===== */
-.header {
-  background: var(--card-bg-color);
-  padding: 20px var(--card-padding);
-  border-radius: var(--border-radius);
-  box-shadow: 0 2px 10px var(--shadow-color);
-  margin-bottom: 30px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 20px;
-}
-
-.header h1 {
-  color: var(--primary-color);
-  font-size: 1.7rem;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-}
-.header h1 i {
-  margin-right: 12px;
-}
-
-/* ===== SECTION HEADER ===== */
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 25px;
-  flex-wrap: wrap;
-  gap: 15px;
-}
-.section-header h2 {
-  color: var(--neutral-dark);
-  font-size: 1.6rem;
-  font-weight: 700;
-}
-.section-header h2 i {
-  margin-right: 10px;
-  color: var(--primary-color);
-}
+/* admin.css - Glassmorphism + Gradient Design (Admin) */
+/* NOTE: admin.html also loads user.css for shared base styles */
 
 /* ===== STATS CARDS ===== */
 .admin-stats {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 20px;
-  background: var(--card-bg-color);
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--card-blur));
+  -webkit-backdrop-filter: blur(var(--card-blur));
+  border: 1px solid var(--glass-border);
   padding: var(--card-padding);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-lg);
   margin-bottom: 30px;
-  box-shadow: 0 4px 15px var(--shadow-color);
+  box-shadow: var(--glass-shadow);
 }
+
 .stat-card {
   text-align: center;
+  padding: 12px;
+  background: rgba(30, 30, 30, 0.3);
+  border-radius: var(--border-radius);
+  border: 1px solid rgba(148, 163, 184, 0.06);
+  transition: all var(--transition-speed);
 }
+.stat-card:hover {
+  border-color: rgba(99, 102, 241, 0.2);
+  background: rgba(99, 102, 241, 0.05);
+}
+
 .stat-value {
-  font-size: 2.5rem;
+  font-size: 2.4rem;
   color: var(--primary-color);
-  font-weight: bold;
+  font-weight: 800;
+  line-height: 1.2;
+}
+  font-weight: 800;
+  line-height: 1.2;
 }
 .stat-label {
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: var(--neutral-medium);
+  margin-top: 4px;
 }
 
 /* ===== FILTERS ===== */
 .admin-filters {
   display: flex;
   flex-wrap: wrap;
-  gap: 15px;
+  gap: 12px;
 }
 .admin-filters input,
 .admin-filters select {
   padding: var(--input-padding);
-  background: #1c1c1c;
-  border: 1px solid var(--border-color);
+  background: rgba(30, 30, 30, 0.5);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--glass-border);
   color: var(--text-color);
   border-radius: var(--border-radius);
   font-size: 0.95rem;
+  font-family: var(--font-family);
+  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
+}
+.admin-filters input:focus,
+.admin-filters select:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px var(--primary-glow);
 }
 
-/* ===== TICKET TABLE STYLES (OPEN + CLOSED) ===== */
+/* ===== TICKET TABLE ===== */
 .admin-tickets-list {
-  background: var(--card-bg-color);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--card-blur));
+  -webkit-backdrop-filter: blur(var(--card-blur));
+  border: 1px solid var(--glass-border);
   padding: var(--card-padding);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-lg);
+  overflow-x: auto;
 }
+
 table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.95rem;
 }
-table th,
-table td {
+table th, table td {
   padding: 12px 15px;
   text-align: left;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
   color: var(--text-color);
 }
 table th {
-  background: #1a1a1a;
+  background: rgba(30, 30, 30, 0.4);
   color: var(--neutral-medium);
   font-weight: 600;
   text-transform: uppercase;
   font-size: 0.8rem;
+  letter-spacing: 0.5px;
+}
+table tr {
+  transition: background var(--transition-speed);
+}
+table tbody tr:hover {
+  background: rgba(99, 102, 241, 0.05);
+}
+.empty-table {
+  text-align: center;
+  color: var(--neutral-light);
+  padding: 30px !important;
 }
 
-/* ===== TABLE ACTION BUTTONS ===== */
+/* ===== TABLE BUTTONS ===== */
 .table-actions {
   display: flex;
   gap: 8px;
   justify-content: center;
 }
 .table-btn {
-  padding: 6px 10px;
+  padding: 7px 12px;
   border-radius: var(--border-radius);
   color: white;
   font-size: 0.85rem;
@@ -181,76 +126,64 @@ table th {
   align-items: center;
   gap: 5px;
   cursor: pointer;
+  border: none;
+  transition: all var(--transition-speed);
 }
-.view-btn {
-  background-color: var(--primary-color);
+.table-btn.view-btn {
+  background: var(--primary-color);
+  
 }
-.view-btn:hover {
-  background-color: var(--primary-hover-color);
+.table-btn.view-btn:hover {
+  transform: translateY(-1px);
+  
 }
-.delete-btn {
-  background-color: var(--danger-color);
+.table-btn.delete-btn {
+  background: #ef4444;
+  
 }
-.delete-btn:hover {
-  background-color: #a60014;
+.table-btn.delete-btn:hover {
+  transform: translateY(-1px);
+  
 }
 
 /* ===== BADGES ===== */
-.status-Open { background-color: rgba(74, 144, 226, 0.15); color: #4A90E2; }
-.status-In-Progress { background-color: rgba(245, 166, 35, 0.15); color: #F5A623; }
-.status-On-Hold { background-color: rgba(155, 155, 155, 0.15); color: #9B9B9B; }
-.status-Closed { background-color: rgba(126, 211, 33, 0.15); color: #7ED321; }
-
-.priority-Low { background-color: rgba(80, 227, 194, 0.2); color: #50E3C2; }
-.priority-Medium { background-color: rgba(74, 144, 226, 0.2); color: #4A90E2; }
-.priority-High { background-color: rgba(245, 166, 35, 0.2); color: #F5A623; }
-.priority-Urgent { background-color: rgba(208, 2, 27, 0.15); color: #D0021B; }
-
-.status-badge,
-.priority-badge {
-  padding: 0.25em 0.6em;
+.status-badge, .priority-badge {
+  padding: 4px 12px;
   border-radius: 9999px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  white-space: nowrap;
 }
 
-/* ===== CLOSED TICKETS SECTION ===== */
+.status-Open { background: rgba(99,102,241,0.15); color: #818cf8; }
+.status-In-Progress { background: rgba(245,158,11,0.15); color: #fbbf24; }
+.status-On-Hold { background: rgba(100,116,139,0.2); color: #94a3b8; }
+.status-Closed { background: rgba(34,197,94,0.15); color: #4ade80; }
+
+.priority-Low { background: rgba(6,182,212,0.15); color: #22d3ee; }
+.priority-Medium { background: rgba(99,102,241,0.15); color: #818cf8; }
+.priority-High { background: rgba(245,158,11,0.15); color: #fbbf24; }
+.priority-Urgent { background: rgba(239,68,68,0.15); color: #f87171; }
+
+/* ===== CLOSED TICKETS ===== */
 .closed-tickets-section {
-  margin-top: 30px;
-}
-.closed-tickets-section .section-header h2 {
-  color: var(--success-color);
+  margin: 30px 30px 0;
+  position: relative;
+  z-index: 1;
 }
 
 /* ===== RESPONSIVE ===== */
 @media (max-width: 768px) {
-  .container {
-    padding: 15px 20px;
-  }
-  .header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  .section-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-  }
+  .container { padding: 15px 20px; }
+  .header { flex-direction: column; align-items: flex-start; }
+  .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
+  .closed-tickets-section { margin: 20px 16px 0; }
 }
 @media (max-width: 480px) {
-  .header h1 {
-    font-size: 1.3rem;
-  }
-  .stat-value {
-    font-size: 2rem;
-  }
-  .btn-primary,
-  .btn-small {
-    width: 100%;
-  }
-  table {
-    font-size: 0.85rem;
-  }
-  table th,
-  table td {
-    padding: 8px 10px;
-  }
-}
+  .header h1 { font-size: 1.3rem; }
+  .stat-value { font-size: 1.8rem; }
+  .admin-stats { grid-template-columns: repeat(2, 1fr); }
+  .btn-primary { width: 100%; }
+  table { font-size: 0.85rem; }
+  table th, table td { padding: 8px 10px; }
+}
\ No newline at end of file
diff --git a/public/admin.html b/public/admin.html
index 2316493..9854cfa 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -13,12 +13,12 @@
   <div class="container">
     <header class="header">
       <h1><i class="fas fa-ticket-alt"></i> Admin Dashboard</h1>
-      <div class="user-actions">
-        <span>Welcome, Admin!</span>
-        <img class="avatar" src="/assets/admin.jpg" alt="Admin Avatar">
+      <div class="header-right">
         <button id="update-pfp-btn" class="btn-update-pfp small-btn">
           <i class="fas fa-camera"></i> Update Picture
         </button>
+        <span>Welcome, Admin!</span>
+        <img class="avatar" src="/assets/admin.jpg" alt="Admin Avatar">
         <a href="/">User View</a>
       </div>
     </header>
@@ -91,7 +91,6 @@
               <tr>
                 <th>ID</th>
                 <th>Title</th>
-                <th>Requester</th>
                 <th>Category</th>
                 <th>Status</th>
                 <th>Priority</th>
@@ -122,7 +121,6 @@
                 <tr>
                   <th>ID</th>
                   <th>Title</th>
-                  <th>Requester</th>
                   <th>Category</th>
                   <th>Status</th>
                   <th>Priority</th>
@@ -139,7 +137,7 @@
     </section>
 
     <footer class="footer">
-      <p class="app-footer-text"></p>
+      <p class="app-footer-text">Ticket System by Honey</p>
     </footer>
   </div>
 
diff --git a/public/index.html b/public/index.html
index a6d6369..eef9bd4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,15 +12,15 @@
   <div class="container">
     <header class="header">
       <h1><i class="fas fa-ticket-alt"></i> My Tickets</h1>
-      <div class="user-actions">
-        <span>Hi Laila!</span>
-        <img class="avatar" src="/assets/user.jpg" alt="User Avatar">
+      <div class="header-right">
         <button id="open-modal-btn" class="btn-primary small-btn">
           <i class="fas fa-plus"></i> Create Ticket
         </button>
         <button id="update-pfp-btn" class="btn-update-pfp small-btn">
           <i class="fas fa-camera"></i> Update Picture
         </button>
+        <span>Hi Laila!</span>
+        <img class="avatar" src="/assets/user.jpg" alt="User Avatar">
       </div>
     </header>
 
@@ -38,6 +38,9 @@
               <textarea id="description" rows="3" placeholder="Describe your issue..." required></textarea>
             </div>
             <div class="form-row">
+              <div class="form-group">
+                <select id="category"></select>
+              </div>
               <div class="form-group">
                 <select id="priority">
                   <option value="Low">Low Priority</option>
@@ -46,9 +49,6 @@
                   <option value="Urgent">Urgent</option>
                 </select>
               </div>
-              <div class="form-group">
-                <select id="category"></select>
-              </div>
             </div>
             <div class="form-group button-wrapper">
               <button type="submit" class="btn-primary">
@@ -113,10 +113,26 @@
     </main>
 
     <footer class="footer">
-      <p class="app-footer-text"></p>
+      <p class="app-footer-text">Ticket System by Honey</p>
     </footer>
   </div>
 
+  <!-- Mobile Bottom Navigation -->
+  <nav class="mobile-bottom-nav">
+    <button onclick="window.scrollTo({top:0,behavior:'smooth'})">
+      <i class="fas fa-home"></i>Home
+    </button>
+    <button onclick="document.getElementById('search-input')?.focus()">
+      <i class="fas fa-search"></i>Search
+    </button>
+    <button class="nav-create" onclick="document.getElementById('open-modal-btn')?.click()">
+      <i class="fas fa-plus"></i>
+    </button>
+    <button onclick="document.getElementById('closed-toggle')?.click();document.getElementById('closed-toggle')?.scrollIntoView({behavior:'smooth'})">
+      <i class="fas fa-archive"></i>Closed
+    </button>
+  </nav>
+
   <script src="user-script.js"></script>
   <script src="version.js"></script>
 </body>
diff --git a/public/ticketview/admin-view.css b/public/ticketview/admin-view.css
index 444fd1b..df395cf 100644
--- a/public/ticketview/admin-view.css
+++ b/public/ticketview/admin-view.css
@@ -1,7 +1,7 @@
 /* ==== ADMIN COMMENT STYLING ==== */
 .comment.admin .comment-content {
-  background-color: var(--color-admin-highlight);
-  border-left: 4px solid var(--color-primary);
+  background-color: rgba(99, 102, 241, 0.08);
+  border-left: 3px solid var(--color-primary);
 }
 .comment.admin .comment-author::after {
   content: " (Admin)";
@@ -19,18 +19,17 @@
 }
 .btn-secondary {
   padding: 10px 16px;
-  border: none;
+  border: 1px solid rgba(99, 102, 241, 0.2);
   border-radius: var(--radius);
   cursor: pointer;
   font-weight: 600;
-  transition: background 0.2s ease;
-}
-.btn-secondary {
-  background-color: var(--color-accent);
-  color: white;
+  transition: all 0.25s ease;
+  background: rgba(99, 102, 241, 0.15);
+  color: #818cf8;
 }
 .btn-secondary:hover {
-  background-color: #1976d2;
+  background: rgba(99, 102, 241, 0.25);
+  border-color: rgba(99, 102, 241, 0.3);
 }
 
 /* ==== CUSTOM ADMIN LAYOUT FIX ==== */
@@ -43,58 +42,47 @@
   .ticket-info-grid {
     grid-template-columns: repeat(3, 1fr);
   }
-}
 /* GRID ADMIN SIDE ORDER */
 
 .ticket-info-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
-  grid-template-rows: auto auto auto;    /* 3 rows */
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto auto auto;
   gap: 15px;
 }
 
-/* Requester: span all 3 columns on row 1 */
-.info-item.requester {
+/* Description: span all 3 columns on row 1 */
+.info-item.description {
   grid-column: 1 / 4;
   grid-row: 1 / 2;
 }
 
-/* Description: span all 3 columns on row 2 */
-.info-item.description {
-  grid-column: 1 / 4;
-  grid-row: 2 / 3;
-}
-
-/* Created, Updated, Time: row 3, columns 1-3 */
+/* Created, Updated, Time: row 2 */
 .info-item.created {
   grid-column: 1 / 2;
-  grid-row: 3 / 4;
+  grid-row: 2 / 3;
 }
 .info-item.updated {
   grid-column: 2 / 3;
-  grid-row: 3 / 4;
+  grid-row: 2 / 3;
 }
-/* Time div isn’t .info-item, so select it directly by nth-child */
-.ticket-info-grid > div:nth-child(5) {
+.ticket-info-grid > div:nth-child(4) {
   grid-column: 3 / 4;
-  grid-row: 3 / 4;
-  display: flex;
-  align-items: center;
-  gap: 10px;
+  grid-row: 2 / 3;
 }
 
-/* Status, Priority, Category: row 4, columns 1-3 */
+/* Status, Priority, Category: row 3 */
 .info-item.status {
   grid-column: 1 / 2;
-  grid-row: 4 / 5;
+  grid-row: 3 / 4;
 }
 .info-item.priority {
   grid-column: 2 / 3;
-  grid-row: 4 / 5;
+  grid-row: 3 / 4;
 }
 .info-item.category {
   grid-column: 3 / 4;
-  grid-row: 4 / 5;
+  grid-row: 3 / 4;
 }
 
 .forms-row {
@@ -119,4 +107,4 @@
   .forms-row {
     flex-direction: column;
   }
-}
+}
\ No newline at end of file
diff --git a/public/ticketview/ticket-admin.js b/public/ticketview/ticket-admin.js
index b6ccf46..f74d0e2 100644
--- a/public/ticketview/ticket-admin.js
+++ b/public/ticketview/ticket-admin.js
@@ -52,7 +52,6 @@ document.addEventListener('DOMContentLoaded', async () => {
     categorySelect.value = ticket.category || '';
 
     document.getElementById('ticket-id-val').textContent = ticket.id;
-    document.getElementById('ticket-requester').textContent = ticket.requester;
     document.getElementById('ticket-created').textContent = formatDateTime(ticket.created_at);
     document.getElementById('ticket-updated').textContent = formatDateTime(ticket.updated_at);
     totalTimeDisplay.textContent = formatMinutes(typeof ticket.total_time === 'number' ? ticket.total_time : 0);
diff --git a/public/ticketview/ticket-user.js b/public/ticketview/ticket-user.js
index 62e9ed0..0f8a0b0 100644
--- a/public/ticketview/ticket-user.js
+++ b/public/ticketview/ticket-user.js
@@ -14,7 +14,6 @@ document.addEventListener('DOMContentLoaded', () => {
   const ticketStatus = document.getElementById('ticket-status-badge');
   const ticketPriority = document.getElementById('priority-text');
   const ticketDescription = document.getElementById('ticket-description-text');
-  const ticketRequester = document.getElementById('ticket-requester');
   const ticketCreated = document.getElementById('ticket-created');
   const ticketUpdated = document.getElementById('ticket-updated');
   const ticketCategory = document.getElementById('ticket-category');
@@ -34,7 +33,6 @@ document.addEventListener('DOMContentLoaded', () => {
     ticketIdElem.textContent = ticket.id;
     ticketStatus.textContent = ticket.status;
     ticketDescription.innerHTML = linkify(ticket.description || '');
-    ticketRequester.textContent = ticket.requester;
     ticketCreated.textContent = formatDateTime(ticket.created_at);
     ticketUpdated.textContent = formatDateTime(ticket.updated_at);
     ticketPriority.textContent = ticket.priority;
diff --git a/public/ticketview/ticket-view-admin.html b/public/ticketview/ticket-view-admin.html
index 7a299b2..6ebb394 100644
--- a/public/ticketview/ticket-view-admin.html
+++ b/public/ticketview/ticket-view-admin.html
@@ -34,10 +34,6 @@
           </div>
 
           <div class="ticket-info-grid">
-            <div class="info-item requester">
-              <h4>Requester</h4>
-              <p id="ticket-requester">-</p>
-            </div>
             <div class="info-item description">
               <h3>Description</h3>
               <p id="ticket-description-text">Loading...</p>
@@ -122,7 +118,7 @@
     </main>
 
     <footer class="footer">
-      <p class="app-footer-text"></p>
+      <p class="app-footer-text">Ticket System by Honey</p>
     </footer>
   </div>
 
diff --git a/public/ticketview/ticket-view-user.html b/public/ticketview/ticket-view-user.html
index fc6e1d6..ccad9a0 100644
--- a/public/ticketview/ticket-view-user.html
+++ b/public/ticketview/ticket-view-user.html
@@ -35,13 +35,7 @@
           </div>
 
           <div class="ticket-body">
-            <!-- Requester first -->
-            <div class="info-item requester">
-              <h4>Requester</h4>
-              <p id="ticket-requester">-</p>
-            </div>
-
-            <!-- Then description -->
+            <!-- Description -->
             <h3>Description</h3>
             <p id="ticket-description-text">Loading...</p>
 
@@ -110,11 +104,11 @@
     </main>
 
     <footer class="footer">
-      <p class="app-footer-text"></p>
+      <p class="app-footer-text">Ticket System by Honey</p>
     </footer>
   </div>
 
   <script type="module" src="ticket-user.js"></script>
   <script src="../version.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/ticketview/ticket-view.css b/public/ticketview/ticket-view.css
index 079b7cd..c1a4881 100644
--- a/public/ticketview/ticket-view.css
+++ b/public/ticketview/ticket-view.css
@@ -1,86 +1,109 @@
+/* ticket-view.css - Glassmorphism + Gradient Design */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 :root {
-  --color-bg: #2e2e2e;
-  --color-surface: #3c3c3c;
-  --color-primary: #4caf50;
-  --color-primary-hover: #45a049;
-  --color-accent: #2196f3;
-  --color-text: #f5f5f5;
-  --color-muted: #b0b0b0;
-  --color-border: #4f4f4f;
-  --color-danger: #e53935;
-  --color-admin-highlight: #424242;
-  --radius: 8px;
+  --color-bg: #1a1a1a;
+  --color-surface: rgba(40, 40, 40, 0.6);
+  --color-primary: #6366f1;
+  --color-primary-hover: #818cf8;
+  --color-accent: #06b6d4;
+  --color-text: #d4d4d4;
+  --color-muted: #9a9a9a;
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-danger: #ef4444;
+  --color-admin-highlight: rgba(99, 102, 241, 0.05);
+
+  --glass-bg: rgba(40, 40, 40, 0.6);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  --glass-blur: 16px;
+
+  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
+  --primary-glow: rgba(99, 102, 241, 0.25);
+
+  --radius: 12px;
+  --radius-lg: 16px;
+  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+*, *::before, *::after {
+  margin: 0; padding: 0; box-sizing: border-box;
 }
 
 body {
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background-color: var(--color-bg);
+  font-family: 'Inter', sans-serif;
+  background: var(--color-bg);
   color: var(--color-text);
   line-height: 1.6;
   padding: 20px;
+  min-height: 100vh;
 }
 
-a {
-  color: var(--color-accent);
-  text-decoration: none;
-}
-a:hover {
-  text-decoration: underline;
-}
+a { color: var(--color-primary-hover); text-decoration: none; }
+a:hover { text-decoration: underline; color: var(--color-accent); }
 
+/* ===== CONTAINER ===== */
 .container {
   max-width: 1200px;
   margin: 0 auto;
-  background-color: var(--color-surface);
-  border-radius: var(--radius);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
   overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--glass-shadow);
+  position: relative;
+  z-index: 1;
 }
 
+/* ===== HEADER ===== */
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px;
-  border-bottom: 1px solid var(--color-border);
+  padding: 20px 24px;
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border-bottom: 1px solid var(--glass-border);
 }
+
 .header h1 {
-  font-size: 1.8rem;
+  font-size: 1.6rem;
   display: flex;
   align-items: center;
   gap: 10px;
+  color: var(--color-text);
+}
+.header h1 i {
+  color: var(--color-primary-hover);
 }
 .back-link {
   font-size: 1rem;
+  color: var(--color-muted);
+  transition: color var(--transition);
 }
-.back-link i {
-  margin-right: 5px;
-}
+.back-link:hover { color: var(--color-primary-hover); text-decoration: none; }
+.back-link i { margin-right: 5px; }
 
-.main-content {
-  padding: 20px;
-}
+/* ===== MAIN ===== */
+.main-content { padding: 20px; }
 .ticket-details-layout {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 @media (min-width: 900px) {
-  .ticket-details-layout {
-    flex-direction: row;
-  }
+  .ticket-details-layout { flex-direction: row; }
 }
+
 .ticket-details,
 .ticket-activity {
-  background-color: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
+  background: rgba(30, 30, 30, 0.4);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
   padding: 20px;
   flex: 1;
   min-width: 0;
@@ -91,6 +114,7 @@ a:hover {
   flex-direction: column;
   height: 600px;
 }
+
 .tab-content {
   display: none;
   flex-direction: column;
@@ -98,9 +122,8 @@ a:hover {
   overflow: hidden;
   height: 100%;
 }
-.tab-content.active {
-  display: flex;
-}
+.tab-content.active { display: flex; }
+
 #comments-container,
 #history-container {
   flex-grow: 1;
@@ -111,74 +134,21 @@ a:hover {
   scrollbar-color: var(--color-primary) transparent;
 }
 #comments-container::-webkit-scrollbar,
-#history-container::-webkit-scrollbar {
-  width: 8px;
-}
+#history-container::-webkit-scrollbar { width: 8px; }
 #comments-container::-webkit-scrollbar-thumb,
 #history-container::-webkit-scrollbar-thumb {
-  background-color: var(--color-primary);
+  background: rgba(99, 102, 241, 0.3);
   border-radius: 4px;
 }
 
+/* ===== TICKET HEADER ===== */
 .ticket-header {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 20px;
 }
-.ticket-header-left {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  max-width: 100%;
-}
-.ticket-header-right {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 8px;
-}
-.ticket-header h2 {
-  font-size: 1.4rem;
-  font-weight: bold;
-}
-
-.ticket-status-priority-requester {
-  display: flex;
-  gap: 15px;
-  align-items: center;
-  margin-top: 5px;
-  flex-wrap: wrap;
-}
-
-.ticket-status,
-.ticket-priority,
-.ticket-requester,
-.ticket-category {
-  padding: 6px 14px;
-  border-radius: 20px;
-  font-weight: bold;
-  font-size: 0.9rem;
-  white-space: nowrap;
-  display: inline-block;
-  overflow: visible;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-.ticket-status {
-  background-color: var(--color-primary);
-  color: white;
-}
-.ticket-priority {
-  background-color: var(--color-accent);
-  color: white;
-}
-.ticket-requester,
-.ticket-category {
-  background-color: var(--color-muted);
-  color: var(--color-bg);
-}
-
+.ticket-header h2 { font-size: 1.4rem; font-weight: bold; }
 .ticket-meta {
   margin-top: 10px;
   font-size: 0.9rem;
@@ -188,101 +158,117 @@ a:hover {
   gap: 20px;
 }
 
-.ticket-body h3 {
-  margin: 20px 0 10px;
+.ticket-id span {
+  color: var(--color-primary-hover);
+  font-weight: 700;
   font-size: 1.1rem;
 }
-#ticket-description-text {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  max-width: 100%;
-  max-height: 200px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-right: 10px;
-  margin-bottom: 20px;
+
+/* ===== BADGES ===== */
+.ticket-status, .ticket-priority, .ticket-requester, .ticket-category {
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-weight: 600;
+  font-size: 0.9rem;
+  white-space: nowrap;
+  display: inline-block;
 }
-@media (min-width: 600px) {
-  .ticket-info-grid {
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  }
+.ticket-status { background: rgba(99, 102, 241, 0.2); color: var(--color-primary-hover); }
+.ticket-priority { background: rgba(6, 182, 212, 0.2); color: var(--color-accent); }
+.ticket-requester, .ticket-category {
+  background: rgba(148, 163, 184, 0.15);
+  color: var(--color-muted);
 }
+
+/* ===== INFO GRID ===== */
+.ticket-info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 15px;
+}
+@media (max-width: 600px) {
+  .ticket-info-grid { grid-template-columns: 1fr 1fr; }
+}
+.info-item { min-width: 0; overflow: hidden; }
 .info-item h4 {
   margin-bottom: 4px;
-  font-size: 1rem;
+  font-size: 0.85rem;
   font-weight: 600;
+  color: var(--color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 .form-control {
+  width: 100%;
   padding: 10px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--color-border);
-  background-color: var(--color-surface);
+  border-radius: var(--radius);
+  border: 1px solid var(--glass-border);
+  background: rgba(30, 30, 30, 0.5);
+  backdrop-filter: blur(8px);
   color: var(--color-text);
+  font-family: 'Inter', sans-serif;
+  font-size: 0.95rem;
+  transition: border-color var(--transition), box-shadow var(--transition);
 }
 .form-control:focus {
   outline: none;
   border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--primary-glow);
 }
 
-.ticket-info-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr; /* 3 columns */
-  gap: 15px;
-  grid-auto-rows: auto;
-}
-.ticket-info-grid .info-item {
-  min-width: 0;
-  overflow: hidden;
-}
-.info-item .form-control {
-  width: 100%;
-  box-sizing: border-box;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+#ticket-description-text {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  max-height: 200px;
+  overflow-y: auto;
+  padding-right: 10px;
+  margin-bottom: 20px;
 }
 
+/* ===== TABS ===== */
 .tabs {
   display: flex;
   margin-bottom: 15px;
-  gap: 10px;
+  gap: 8px;
 }
 .tab-btn {
   flex: 1;
   padding: 10px;
-  border: none;
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius);
-  background-color: var(--color-surface);
+  background: rgba(30, 30, 30, 0.3);
   color: var(--color-text);
   cursor: pointer;
-  transition: background 0.2s ease;
-}
-.tab-btn:hover {
-  background-color: var(--color-border);
+  transition: all var(--transition);
+  font-family: 'Inter', sans-serif;
+  font-weight: 500;
 }
+.tab-btn:hover { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.2); }
 .tab-btn.active {
-  background-color: var(--color-primary);
+  background: var(--color-primary);
+  border-color: transparent;
+  color: white;
+  font-weight: 600;
 }
 
+/* ===== COMMENTS ===== */
 .comment {
   display: flex;
   align-items: flex-start;
-  gap: 16px;
-  margin-bottom: 20px;
-  max-width: 800px;
+  gap: 14px;
+  margin-bottom: 16px;
 }
 .comment-avatar {
-  width: 50px;
-  height: 50px;
+  width: 44px; height: 44px;
   border-radius: 50%;
   object-fit: cover;
-  flex-shrink: 0;
   border: 2px solid var(--color-border);
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
 }
 .comment-content {
-  background-color: var(--color-surface);
+  background: rgba(30, 30, 30, 0.4);
+  border: 1px solid var(--glass-border);
   padding: 12px 16px;
   border-radius: var(--radius);
   width: 100%;
@@ -294,59 +280,49 @@ a:hover {
   margin-bottom: 5px;
   font-size: 0.85rem;
 }
-.comment-author {
-  font-weight: bold;
-}
-.comment-date {
-  color: var(--color-muted);
-  font-size: 0.8rem;
-}
-.comment-text {
-  font-size: 0.95rem;
-  line-height: 1.5;
-  word-wrap: break-word;
-}
+.comment-author { font-weight: 600; }
+.comment-date { color: var(--color-muted); font-size: 0.8rem; }
+.comment-text { font-size: 0.95rem; line-height: 1.5; word-wrap: break-word; }
 
 .comment-form {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  margin-bottom: 20px;
+  gap: 8px;
+  margin-bottom: 16px;
 }
 .comment-form input,
 .comment-form textarea {
-  background-color: var(--color-surface);
+  background: rgba(30, 30, 30, 0.5);
   color: var(--color-text);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--glass-border);
   border-radius: var(--radius);
   padding: 10px;
-  font-size: 1rem;
+  font-size: 0.95rem;
+  font-family: 'Inter', sans-serif;
+  transition: border-color var(--transition), box-shadow var(--transition);
 }
 .comment-form input:focus,
 .comment-form textarea:focus {
   outline: none;
   border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--primary-glow);
 }
 
+/* ===== HISTORY ===== */
 .history-item {
   display: flex;
   gap: 12px;
-  margin-bottom: 15px;
-}
-.history-icon {
-  font-size: 1.2rem;
-  color: var(--color-primary);
+  margin-bottom: 12px;
 }
+.history-icon { font-size: 1.2rem; color: var(--color-primary-hover); }
 .history-content {
-  background-color: var(--color-surface);
+  background: rgba(30, 30, 30, 0.4);
+  border: 1px solid var(--glass-border);
   padding: 10px 15px;
   border-radius: var(--radius);
   width: 100%;
 }
-.history-action {
-  font-weight: bold;
-  margin-bottom: 4px;
-}
+.history-action { font-weight: 600; margin-bottom: 4px; }
 .history-meta {
   display: flex;
   justify-content: space-between;
@@ -354,21 +330,45 @@ a:hover {
   color: var(--color-muted);
 }
 
-/* Post Comment Button Styling */
+/* ===== BUTTONS ===== */
 .btn-primary {
   padding: 10px 16px;
-  background-color: var(--color-primary);
+  background: var(--color-primary);
   color: white;
   border: none;
   border-radius: var(--radius);
   cursor: pointer;
   font-weight: 600;
-  transition: background 0.2s ease;
-  align-self: flex-start; /* damit er nicht breit wird */
+  font-family: 'Inter', sans-serif;
+  transition: all var(--transition);
+  align-self: flex-start;
+  
+}
+.btn-primary:hover {
+  transform: translateY(-1px);
+  
 }
 
-.btn-primaryt-btn:hover {
-  background-color: var(--color-primary-hover);
+.btn-secondary {
+  padding: 10px 16px;
+  background: rgba(99, 102, 241, 0.15);
+  color: var(--color-primary-hover);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-weight: 600;
+  font-family: 'Inter', sans-serif;
+  transition: all var(--transition);
+}
+.btn-secondary:hover {
+  background: rgba(99, 102, 241, 0.25);
+  border-color: rgba(99, 102, 241, 0.3);
+}
+
+.ticket-actions-bar {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
 }
 
 .footer {
@@ -376,5 +376,11 @@ a:hover {
   text-align: center;
   font-size: 0.85rem;
   color: var(--color-muted);
-  border-top: 1px solid var(--color-border);
-}
\ No newline at end of file
+  border-top: 1px solid var(--glass-border);
+}
+
+/* ===== SCROLLBAR ===== */
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.5); }
\ No newline at end of file
diff --git a/public/user-script.js b/public/user-script.js
index 29c342c..9d2a502 100644
--- a/public/user-script.js
+++ b/public/user-script.js
@@ -237,14 +237,13 @@ document.addEventListener('DOMContentLoaded', () => {
         <h3>${escapeHtml(ticket.title)} <span class="ticket-id">#${ticket.id}</span> <small class="total-time">Time: (${ticket.total_time} min)</small></h3>
         <p class="description">${escapeHtml(ticket.description)}</p>
         <div class="meta">
-          <span class="requester"><i class="fas fa-user"></i> ${escapeHtml(ticket.requester)}</span>
           <span class="date"><i class="fas fa-calendar"></i> ${formatDate(ticket.created_at)}</span>
-          ${ticket.category ? `<span class="category"><i class="fas fa-tag"></i> ${escapeHtml(ticket.category)}</span>` : ''}
         </div>
         <div class="status-row">
           <div class="status status-${statusSafe.replace(/\s+/g, '-')}">
             <i class="fas fa-circle"></i> ${escapeHtml(ticket.status)}
           </div>
+          ${ticket.category ? `<div class="category-badge"><i class="fas fa-tag"></i> ${escapeHtml(ticket.category)}</div>` : ''}
           <div class="priority priority-${prioritySafe.replace(/\s+/g, '-')}">
             <i class="fas fa-flag"></i> ${escapeHtml(prioritySafe)}
           </div>
diff --git a/public/user.css b/public/user.css
index 7abf5ab..a5c334f 100644
--- a/public/user.css
+++ b/public/user.css
@@ -1,37 +1,46 @@
-/* user.css - Dark Mode Default - Improved */
+/* user.css - Glassmorphism + Gradient Design */
 
-/* ===== FONT IMPORT ===== */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 /* ===== CSS CUSTOM PROPERTIES ===== */
 :root {
-  --primary-color: #4A90E2;
-  --primary-hover-color: #6fb4f5;
-  --secondary-color: #50E3C2;
-  --accent-color: #F5A623;
-  --success-color: #7ED321;
-  --danger-color: #D0021B;
-  --neutral-dark: #e0e0e0;
-  --neutral-medium: #aaaaaa;
-  --neutral-light: #777777;
-  --bg-color: #1e1e1e;
-  --card-bg-color: #2a2a2a;
-  --border-color: #444;
-  --shadow-color: rgba(0, 0, 0, 0.6);
-  --text-color: #e0e0e0;
-  --link-color: var(--primary-color);
+  --primary-color: #6366f1;
+  --primary-hover-color: #818cf8;
+  --primary-glow: rgba(99, 102, 241, 0.25);
+  --secondary-color: #06b6d4;
+  --accent-color: #f59e0b;
+  --success-color: #22c55e;
+  --danger-color: #ef4444;
+
+  --neutral-dark: #e8e8e8;
+  --neutral-medium: #9a9a9a;
+  --neutral-light: #6b6b6b;
+
+  --bg-color: #1a1a1a;
+  --card-bg-color: rgba(45, 45, 45, 0.7);
+  --card-border: rgba(255, 255, 255, 0.06);
+  --card-blur: 16px;
+  --border-color: rgba(255, 255, 255, 0.08);
+  --shadow-color: rgba(0, 0, 0, 0.4);
+  --text-color: #d4d4d4;
+
+  --glass-bg: rgba(40, 40, 40, 0.6);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+
+  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
+
   --font-family: 'Inter', sans-serif;
-  --border-radius: 8px;
-  --card-padding: 15px;
-  --input-padding: 12px 15px;
-  --transition-speed: 0.2s ease-in-out;
+  --border-radius: 12px;
+  --border-radius-lg: 16px;
+  --card-padding: 20px;
+  --input-padding: 12px 16px;
+  --transition-speed: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   --container-max-width: 1400px;
 }
 
-/* ===== RESET & BASE STYLES ===== */
-*,
-*::before,
-*::after {
+/* ===== RESET & BASE ===== */
+*, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -39,37 +48,32 @@
 
 body {
   font-family: var(--font-family);
-  background-color: var(--bg-color);
+  background: var(--bg-color);
   color: var(--text-color);
   font-size: 16px;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
 }
 
-/* ===== TYPOGRAPHY ===== */
+
 h1, h2, h3, h4, h5, h6 {
   color: var(--neutral-dark);
   margin-bottom: 0.75em;
   font-weight: 600;
   line-height: 1.2;
 }
-
 h1 { font-size: 2.2rem; }
 h2 { font-size: 1.8rem; }
 h3 { font-size: 1.4rem; }
 
-/* ===== LINKS ===== */
 a {
-  color: var(--link-color);
+  color: var(--primary-hover-color);
   text-decoration: none;
   transition: color var(--transition-speed);
-  cursor: pointer;
 }
-
-a:hover,
-a:focus {
-  color: var(--primary-hover-color);
+a:hover, a:focus {
+  color: var(--secondary-color);
   text-decoration: underline;
   outline: none;
 }
@@ -80,14 +84,19 @@ a:focus {
   margin: 0 auto;
   padding: 20px 30px;
   width: 100%;
+  position: relative;
+  z-index: 1;
 }
 
 /* ===== HEADER ===== */
 .header {
-  background: var(--card-bg-color);
-  padding: 20px var(--card-padding);
-  border-radius: var(--border-radius);
-  box-shadow: 0 2px 10px var(--shadow-color);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--card-blur));
+  -webkit-backdrop-filter: blur(var(--card-blur));
+  border: 1px solid var(--glass-border);
+  padding: 24px 28px;
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--glass-shadow);
   margin-bottom: 30px;
   display: flex;
   justify-content: space-between;
@@ -96,26 +105,24 @@ a:focus {
 }
 
 .header h1 {
-  color: var(--primary-color);
+  color: var(--neutral-dark);
   font-size: 1.7rem;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 12px;
 }
-
 .header h1 i {
   font-size: 1.6rem;
+  color: var(--primary-hover-color);
 }
 
-.user-actions {
+.header-right {
   display: flex;
-  gap: 20px;
   align-items: center;
-  flex-wrap: wrap;
+  gap: 14px;
 }
-
-.user-actions span {
+.header-right span {
   color: var(--neutral-medium);
   font-weight: 500;
 }
@@ -126,108 +133,90 @@ a:focus {
   margin-top: 50px;
   padding: 25px;
   color: var(--neutral-light);
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   border-top: 1px solid var(--border-color);
 }
 
-/* ===== FORM ELEMENTS ===== */
-.form-group {
-  margin-bottom: 20px;
+/* ===== GLASSMORPHISM SECTIONS ===== */
+.ticket-form,
+.tickets-section {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--card-blur));
+  -webkit-backdrop-filter: blur(var(--card-blur));
+  border: 1px solid var(--glass-border);
+  padding: var(--card-padding);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--glass-shadow);
+  margin-bottom: 30px;
+  max-width: 100%;
   width: 100%;
 }
+.ticket-form h2 {
+  margin-bottom: 20px;
+  font-weight: 700;
+  font-size: 1.5rem;
+}
+
+/* Remove double background when ticket-form is inside modal */
+.modal-content .ticket-form {
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  margin-bottom: 0;
+}
+
+/* ===== FORM ELEMENTS ===== */
+.form-group { margin-bottom: 20px; width: 100%; }
 
 .form-group input[type="text"],
 .form-group textarea,
 .form-group select {
   width: 100%;
   padding: var(--input-padding);
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--glass-border);
   border-radius: var(--border-radius);
-  background-color: var(--bg-color);
+  background: rgba(30, 30, 30, 0.6);
+  backdrop-filter: blur(8px);
   color: var(--text-color);
   font-family: var(--font-family);
   font-size: 1rem;
   transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
 }
-
-.form-group input[type="text"]:focus,
+.form-group input:focus,
 .form-group textarea:focus,
 .form-group select:focus {
   outline: none;
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
-}
-
-.form-group textarea {
-  resize: vertical;
-  min-height: 80px;
-  line-height: 1.4;
-}
-
-.form-row {
-  display: flex;
-  gap: 15px;
-  flex-wrap: wrap;
-}
-
-.form-row .form-group {
-  flex: 1;
-  min-width: 180px;
-}
-
-.button-wrapper {
-  text-align: center;
+  box-shadow: 0 0 0 3px var(--primary-glow);
 }
+.form-group textarea { resize: vertical; min-height: 80px; }
+.form-row { display: flex; gap: 15px; flex-wrap: wrap; }
+.form-row .form-group { flex: 1; min-width: 180px; }
+.button-wrapper { text-align: center; }
 
 /* ===== BUTTONS ===== */
 .btn-primary {
-  padding: 10px 20px;
+  padding: 10px 22px;
   border: none;
   border-radius: var(--border-radius);
   cursor: pointer;
   font-size: 1rem;
-  font-weight: 500;
-  transition: background-color var(--transition-speed), transform var(--transition-speed);
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  background-color: var(--primary-color);
+  font-weight: 600;
+  transition: all var(--transition-speed);
+  background: var(--primary-color);
   color: white;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
-
-.btn-primary:hover,
-.btn-primary:focus {
-  background-color: var(--primary-hover-color);
+.btn-primary:hover, .btn-primary:focus {
+  background: var(--primary-hover-color);
   transform: translateY(-1px);
   outline: none;
 }
-
-.btn-primary:active {
-  transform: translateY(0);
-}
-
-/* ===== CARDS & SECTIONS ===== */
-.ticket-form,
-.tickets-section {
-  background: var(--card-bg-color);
-  padding: var(--card-padding);
-  border-radius: var(--border-radius);
-  box-shadow: 0 4px 15px var(--shadow-color);
-  margin-bottom: 30px;
-  max-width: 100%;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-/* Improved ticket-form styles for clearer layout */
-.ticket-form h2 {
-  margin-bottom: 20px;
-  color: var(--neutral-dark);
-  font-weight: 700;
-  font-size: 1.5rem;
-}
+.btn-primary:active { transform: translateY(0); }
 
 /* ===== SECTION HEADER ===== */
 .section-header {
@@ -238,20 +227,14 @@ a:focus {
   flex-wrap: wrap;
   gap: 15px;
 }
-
 .section-header h2 {
   margin: 0;
-  color: var(--neutral-dark);
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 10px;
 }
-
-.section-header h2 i {
-  color: var(--primary-color);
-  font-size: 1.4rem;
-}
+.section-header h2 i { color: var(--primary-hover-color); font-size: 1.4rem; }
 
 /* ===== FILTERS ===== */
 .filters-row {
@@ -260,24 +243,23 @@ a:focus {
   flex-wrap: wrap;
   align-items: center;
 }
-
 .filters-row input,
 .filters-row select {
-  padding: 6px 10px;
-  border-radius: 5px;
-  border: 1px solid var(--border-color);
-  background-color: var(--bg-color);
+  padding: 8px 14px;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--glass-border);
+  background: rgba(30, 30, 30, 0.5);
+  backdrop-filter: blur(8px);
   color: var(--text-color);
   font-family: var(--font-family);
   font-size: 0.95rem;
   min-width: 120px;
   transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
 }
-
 .filters-row input:focus,
 .filters-row select:focus {
   border-color: var(--primary-color);
-  box-shadow: 0 0 5px rgba(74, 144, 226, 0.3);
+  box-shadow: 0 0 0 3px var(--primary-glow);
   outline: none;
 }
 
@@ -285,35 +267,53 @@ a:focus {
 .tickets-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 25px;
+  gap: 20px;
 }
 
-/* ===== TICKET CARDS ===== */
+/* ===== GLASSMORPHISM TICKET CARDS ===== */
 .ticket {
-  background: var(--card-bg-color);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--card-blur));
+  -webkit-backdrop-filter: blur(var(--card-blur));
+  border: 1px solid var(--glass-border);
   padding: var(--card-padding);
-  border-radius: var(--border-radius);
-  box-shadow: 0 2px 8px var(--shadow-color);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--glass-shadow);
   display: flex;
   flex-direction: column;
-  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
+  transition: all var(--transition-speed);
   min-height: 250px;
   position: relative;
   overflow: hidden;
 }
-
-.ticket:hover,
-.ticket:focus-within {
-  transform: translateY(-3px);
-  box-shadow: 0 6px 12px var(--shadow-color);
-  outline: none;
+.ticket:hover, .ticket:focus-within {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(99,102,241,0.2);
+  border-color: rgba(99, 102, 241, 0.25);
 }
 
+/* Top accent line per status */
+.ticket::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
+  background: var(--primary-color);
+  opacity: 0.6;
+  transition: opacity var(--transition-speed);
+}
+.ticket:hover::before { opacity: 1; }
+.ticket.status-Open::before { background: linear-gradient(90deg, #6366f1, #818cf8); }
+.ticket.status-In-Progress::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
+.ticket.status-On-Hold::before { background: linear-gradient(90deg, #64748b, #94a3b8); }
+.ticket.status-Closed::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
+
 .ticket h3 {
-  margin-top: 0;
+  margin-top: 6px;
   margin-bottom: 16px;
   color: var(--neutral-dark);
-  font-size: 1.2rem;
+  font-size: 1.15rem;
   font-weight: 600;
   line-height: 1.3;
   display: -webkit-box;
@@ -324,23 +324,20 @@ a:focus {
   position: relative;
   padding-right: 80px;
   padding-top: 8px;
-  user-select: text;
 }
-
 .ticket .ticket-id {
-  background-color: var(--primary-color);
+  background: var(--primary-color);
   color: white;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-weight: 700;
-  padding: 6px 10px;
-  border-radius: 12px;
+  padding: 5px 10px;
+  border-radius: 20px;
   position: absolute;
-  top: 5px;
-  right: 0;
+  top: 5px; right: 0;
   letter-spacing: 0.5px;
   user-select: none;
+  
 }
-
 .ticket .description {
   color: var(--neutral-medium);
   font-size: 0.95rem;
@@ -353,36 +350,38 @@ a:focus {
   -webkit-line-clamp: 1;
   text-overflow: ellipsis;
   height: 22px;
-  user-select: text;
 }
-
 .ticket .meta {
   display: flex;
   justify-content: space-between;
   font-size: 0.85rem;
   color: var(--neutral-light);
   margin-bottom: 15px;
-  flex-shrink: 0;
-  user-select: none;
 }
+.ticket .meta i { margin-right: 5px; }
 
-.ticket .meta i {
-  margin-right: 5px;
-}
-
-/* Status row and actions */
 .status-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
-  flex-shrink: 0;
+  gap: 8px;
 }
 
-.ticket-actions {
-  margin-top: auto;
-  flex-shrink: 0;
+.category-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 12px;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  white-space: nowrap;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--neutral-medium);
+  user-select: none;
 }
+.category-badge i { margin-right: 5px; }
+.ticket-actions { margin-top: auto; }
 
 .action-btn {
   display: block;
@@ -391,317 +390,289 @@ a:focus {
   border-radius: var(--border-radius);
   text-decoration: none;
   font-size: 0.95rem;
-  font-weight: 500;
+  font-weight: 600;
   transition: all var(--transition-speed);
-  user-select: none;
   cursor: pointer;
 }
-
 .action-btn.view-btn {
-  background-color: var(--primary-color);
+  background: var(--primary-color);
   color: white;
+  
 }
-
-.action-btn.view-btn:hover,
-.action-btn.view-btn:focus {
-  background-color: var(--primary-hover-color);
-  transform: translateY(-1px);
-  outline: none;
-}
-
-.action-btn.view-btn:active {
-  transform: translateY(0);
+.action-btn.view-btn:hover {
+  transform: translateY(-2px);
+  
+  text-decoration: none;
 }
 
 .total-time {
   font-size: 0.8em;
-  color: #555;
+  color: var(--neutral-light);
   margin-left: 8px;
-  user-select: none;
 }
 
 /* ===== BADGES ===== */
-.status,
-.priority {
-  display: inline-block;
-  padding: 5px 12px;
+.status, .priority {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 14px;
   border-radius: 20px;
   font-size: 0.85rem;
   font-weight: 600;
   text-transform: capitalize;
-  line-height: 1.4;
   white-space: nowrap;
   user-select: none;
 }
+.status i, .priority i { margin-right: 5px; }
 
-.status i,
-.priority i {
-  margin-right: 5px;
-}
+.status-Open { background: rgba(99,102,241,0.15); color: #818cf8; }
+.status-In-Progress { background: rgba(245,158,11,0.15); color: #fbbf24; }
+.status-On-Hold { background: rgba(100,116,139,0.2); color: #94a3b8; }
+.status-Closed { background: rgba(34,197,94,0.15); color: #4ade80; }
+.status-Cancelled { background: rgba(239,68,68,0.15); color: #f87171; }
 
-/* Status colors */
-.status-Open {
-  background-color: rgba(74, 144, 226, 0.15);
-  color: #4A90E2;
-}
-.status-In-Progress {
-  background-color: rgba(245, 166, 35, 0.15);
-  color: #F5A623;
-}
-.status-On-Hold {
-  background-color: rgba(155, 155, 155, 0.15);
-  color: #9B9B9B;
-}
-.status-Closed {
-  background-color: rgba(126, 211, 33, 0.15);
-  color: #7ED321;
-}
-.status-Cancelled {
-  background-color: rgba(208, 2, 27, 0.15);
-  color: #D0021B;
-}
-
-/* Priority colors */
-.priority-Low {
-  background-color: rgba(80, 227, 194, 0.2);
-  color: #60b8a5;
-}
-.priority-Medium {
-  background-color: rgba(74, 144, 226, 0.2);
-  color: #4A90E2;
-}
-.priority-High {
-  background-color: rgba(245, 166, 35, 0.2);
-  color: #F5A623;
-}
-.priority-Urgent {
-  background-color: rgba(208, 2, 27, 0.15);
-  color: #D0021B;
-}
+.priority-Low { background: rgba(6,182,212,0.15); color: #22d3ee; }
+.priority-Medium { background: rgba(99,102,241,0.15); color: #818cf8; }
+.priority-High { background: rgba(245,158,11,0.15); color: #fbbf24; }
+.priority-Urgent { background: rgba(239,68,68,0.15); color: #f87171; }
 
 /* ===== MODAL ===== */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 999;
-}
-
 .modal {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: none; /* hidden by default */
-  justify-content: center; /* center horizontally */
-  align-items: center; /* center vertically */
-  background: rgba(24, 23, 23, 0.6);
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  background: rgba(30, 30, 30, 0.7);
+  backdrop-filter: blur(8px);
   z-index: 9999;
   overflow-y: auto;
   padding: 40px 20px;
 }
-
-.modal.show {
-  display: flex;
-  opacity: 1;
-  pointer-events: auto;
-}
+.modal.show { display: flex; }
 
 .modal-content {
+  background: rgba(32, 32, 32, 0.95);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--border-radius-lg);
   padding: 30px 35px;
   max-width: 800px;
   width: 100%;
   animation: fadeInUp 0.3s ease;
   position: relative;
-  box-sizing: border-box;
+  box-shadow: 0 24px 48px rgba(0,0,0,0.4);
 }
-
-/* Close button */
-.modal-close-btn,
-.modal-close {
+.modal-close-btn, .modal-close {
   position: absolute;
-  top: 30px;
-  right: 35px;
+  top: 15px; right: 15px;
   font-size: 1.5rem;
   background: none;
   border: none;
   cursor: pointer;
   color: var(--neutral-light);
-  transition: color var(--transition-speed), background-color var(--transition-speed);
   padding: 6px 10px;
   border-radius: var(--border-radius);
+  transition: all var(--transition-speed);
+  z-index: 10;
 }
-
-.modal-close-btn:hover,
-.modal-close-btn:focus,
-.modal-close:hover,
-.modal-close:focus {
-  color: var(--primary-color);
-  background-color: rgba(74, 144, 226, 0.1);
-  outline: none;
+.modal-close-btn:hover, .modal-close:hover {
+  color: var(--primary-hover-color);
+  background: rgba(99,102,241,0.1);
 }
+.modal-header { margin-bottom: 20px; }
+.modal-header h2 { margin: 0; font-weight: 700; font-size: 1.6rem; }
 
-.modal-header {
-  margin-bottom: 20px;
-}
-
-.modal-header h2 {
-  margin: 0;
-  font-weight: 700;
-  color: var(--primary-color);
-  font-size: 1.6rem;
-}
-
-/* Animations */
 @keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(15px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(15px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-/* ===== User PFP ===== */
-
+/* ===== AVATAR & PFP ===== */
 .avatar {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    object-fit: cover;
-    flex-shrink: 0;
+  width: 50px; height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--border-color);
 }
 
 .btn-update-pfp {
-  background-color: #10b981; /* emerald green */
+  background: #10b981;
   color: #fff;
   border: none;
-  border-radius: 8px;
-  padding: 6px 12px;
-  align-items: center;
-  gap: 6px;
+  border-radius: var(--border-radius);
+  padding: 8px 14px;
   cursor: pointer;
-  transition: background 0.2s ease;
+  font-weight: 500;
+  transition: all var(--transition-speed);
+  
 }
-
 .btn-update-pfp:hover {
-  background-color: #059669; /* darker emerald */
+  transform: translateY(-1px);
+  
 }
 
-/* Smaller modal size */
-.small-modal {
-  max-width: 350px;
-  text-align: center;
-}
+.small-modal { max-width: 380px; text-align: center; }
 
-/* Drag & drop zone */
 #drop-zone {
-  border: 2px dashed #4b5563; /* gray tone */
-  background-color: #1f2937; /* dark mode box */
-  border-radius: 8px;
-  padding: 20px;
+  border: 2px dashed rgba(99,102,241,0.3);
+  background: rgba(30,30,30,0.4);
+  border-radius: var(--border-radius);
+  padding: 28px;
   cursor: pointer;
-  color: #9ca3af;
-  transition: border-color 0.2s ease, background 0.2s ease;
+  color: var(--neutral-medium);
+  transition: all var(--transition-speed);
 }
-
 #drop-zone:hover {
-  border-color: #10b981; /* emerald green accent */
-  background-color: #111827;
+  border-color: var(--primary-color);
+  background: rgba(99,102,241,0.05);
 }
 
-/* ===== RESPONSIVE ===== */
-@media (max-width: 991px) {
-  .header {
-    flex-direction: column;
-    gap: 15px;
-  }
-  .header h1 {
-    font-size: 1.4rem;
-    justify-content: center;
-  }
-  .user-actions {
-    justify-content: center;
-  }
-  .tickets-grid {
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  }
-  .ticket {
-    min-height: 230px;
-  }
-}
-
-@media (max-width: 575px) {
-  .container {
-    padding: 15px 20px;
-  }
-  .ticket-form,
-  .tickets-section {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-  .tickets-grid {
-    grid-template-columns: 1fr;
-  }
-  .ticket h3 {
-    padding-right: 50px;
-  }
-  .header h1 {
-    font-size: 1.2rem;
-  }
-}
 /* ===== ACCORDION ===== */
-.accordion-section {
-  margin-top: 2rem;
-}
-
+.accordion-section { margin-top: 2rem; }
 .accordion-toggle {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 20px;
-  background: var(--card-bg-color);
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--card-blur));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--border-radius-lg);
   color: var(--neutral-medium);
   font-size: 1.1rem;
   font-weight: 600;
   cursor: pointer;
-  transition: background-color 0.2s ease, color 0.2s ease;
+  transition: all var(--transition-speed);
   user-select: none;
 }
-
 .accordion-toggle:hover {
-  background: var(--border-color);
+  border-color: rgba(99,102,241,0.25);
   color: var(--text-color);
 }
-
 .accordion-toggle .accordion-arrow {
   margin-left: auto;
   transition: transform 0.3s ease;
 }
-
-.accordion-toggle.open .accordion-arrow {
-  transform: rotate(180deg);
-}
-
+.accordion-toggle.open .accordion-arrow { transform: rotate(180deg); }
 .accordion-count {
   background: var(--primary-color);
   color: white;
   font-size: 0.8rem;
   font-weight: 700;
-  padding: 2px 10px;
+  padding: 3px 12px;
   border-radius: 12px;
   min-width: 24px;
   text-align: center;
 }
+.accordion-body { padding-top: 15px; }
 
-.accordion-body {
-  padding-top: 15px;
-}
\ No newline at end of file
+/* ===== EMPTY STATE ===== */
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: var(--neutral-light);
+}
+.empty-state i { font-size: 3rem; margin-bottom: 15px; opacity: 0.4; }
+.empty-state h3 { color: var(--neutral-medium); }
+
+/* ===== RESPONSIVE ===== */
+@media (max-width: 991px) {
+  .header { flex-direction: column; gap: 15px; text-align: center; }
+  .header-right { justify-content: center; flex-wrap: wrap; }
+  .header h1 { font-size: 1.4rem; justify-content: center; }
+  .tickets-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
+  .ticket { min-height: 230px; }
+}
+
+/* ===== MOBILE ===== */
+@media (max-width: 575px) {
+  body { padding-bottom: 70px; }
+  .container { padding: 15px 16px; }
+
+  .header {
+    border-radius: 0;
+    margin: -15px -16px 20px;
+    padding: 16px;
+    width: calc(100% + 32px);
+  }
+
+  .ticket-form, .tickets-section {
+    padding: 16px;
+    border-radius: var(--border-radius);
+  }
+  .tickets-grid { grid-template-columns: 1fr; gap: 12px; }
+  .ticket { min-height: auto; padding: 16px; }
+  .ticket h3 { padding-right: 50px; font-size: 1.05rem; }
+  .header h1 { font-size: 1.2rem; }
+
+  /* Hide desktop buttons on mobile */
+  .header-right .btn-primary.small-btn,
+  .header-right .btn-update-pfp.small-btn {
+    display: none;
+  }
+
+  /* Bottom Navigation Bar */
+  .mobile-bottom-nav {
+    position: fixed;
+    bottom: 0; left: 0; right: 0;
+    display: flex !important;
+    justify-content: space-around;
+    align-items: center;
+    background: rgba(30, 30, 30, 0.92);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-top: 1px solid var(--glass-border);
+    padding: 8px 0;
+    padding-bottom: max(8px, env(safe-area-inset-bottom));
+    z-index: 9000;
+    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
+  }
+
+  .mobile-bottom-nav button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3px;
+    background: none;
+    border: none;
+    color: var(--neutral-medium);
+    font-size: 0.65rem;
+    font-family: var(--font-family);
+    cursor: pointer;
+    padding: 6px 12px;
+    border-radius: var(--border-radius);
+    transition: color var(--transition-speed);
+    -webkit-tap-highlight-color: transparent;
+  }
+  .mobile-bottom-nav button i { font-size: 1.15rem; }
+  .mobile-bottom-nav button:active { color: var(--primary-hover-color); }
+
+  /* Floating create button */
+  .mobile-bottom-nav .nav-create {
+    background: var(--primary-color);
+    color: white !important;
+    border-radius: 50%;
+    width: 52px; height: 52px;
+    margin-top: -24px;
+    
+    font-size: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+  .mobile-bottom-nav .nav-create i { font-size: 1.4rem; }
+}
+
+/* Hide bottom nav on desktop */
+.mobile-bottom-nav { display: none; }
+
+/* ===== SCROLLBAR ===== */
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.5); }
\ No newline at end of file