@ngn-net/nestjs-telescope 0.1.6 → 0.1.8

package/ui/index.html

@@ -4,28 +4,31 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NestJS Telescope Dashboard</title>
-  <!-- Google Fonts: Inter & JetBrains Mono -->
+  <!-- Google Fonts: Outfit (Premium Sans) & JetBrains Mono -->
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
   
   <style>
     :root {
-      --bg-main: #0b0f19;
-      --bg-sidebar: #111827;
-      --bg-card: rgba(17, 24, 39, 0.7);
-      --bg-input: #1f2937;
-      --border-color: rgba(255, 255, 255, 0.08);
-      --text-main: #f3f4f6;
-      --text-muted: #9ca3af;
+      --bg-main: #060913;
+      --bg-sidebar: rgba(10, 15, 30, 0.7);
+      --bg-card: rgba(16, 22, 42, 0.65);
+      --bg-card-hover: rgba(22, 30, 58, 0.85);
+      --bg-input: rgba(30, 41, 73, 0.5);
+      --border-color: rgba(255, 255, 255, 0.07);
+      --border-focus: rgba(99, 102, 241, 0.4);
+      --text-main: #f1f5f9;
+      --text-muted: #94a3b8;
       --primary: #6366f1;
       --primary-hover: #4f46e5;
+      --primary-glow: rgba(99, 102, 241, 0.3);
       --accent-green: #10b981;
-      --accent-red: #ef4444;
+      --accent-red: #f43f5e;
       --accent-blue: #3b82f6;
       --accent-purple: #8b5cf6;
       --accent-amber: #f59e0b;
-      --font-sans: 'Inter', sans-serif;
+      --font-sans: 'Outfit', sans-serif;
       --font-mono: 'JetBrains Mono', monospace;
     }
 
@@ -42,6 +45,9 @@
       overflow: hidden;
       height: 100vh;
       display: flex;
+      background-image: 
+        radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 40%),
+        radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
     }
 
     /* Scrollbars */
@@ -50,7 +56,7 @@
       height: 6px;
     }
     ::-webkit-scrollbar-track {
-      background: rgba(0, 0, 0, 0.1);
+      background: rgba(0, 0, 0, 0.2);
     }
     ::-webkit-scrollbar-thumb {
       background: rgba(255, 255, 255, 0.1);
@@ -66,14 +72,17 @@
       display: flex;
     }
 
-    /* Sidebar */
+    /* Sidebar with Glassmorphism */
     .sidebar {
       width: 260px;
-      background-color: var(--bg-sidebar);
+      background: var(--bg-sidebar);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
       border-right: 1px solid var(--border-color);
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
+      z-index: 10;
     }
 
     .sidebar-header {
@@ -85,24 +94,24 @@
     }
 
     .logo {
-      background: linear-gradient(135deg, var(--primary), #a78bfa);
-      width: 36px;
-      height: 36px;
-      border-radius: 8px;
+      background: linear-gradient(135deg, var(--primary), #8b5cf6);
+      width: 38px;
+      height: 38px;
+      border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       color: #fff;
-      font-size: 1.2rem;
-      box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
+      font-size: 1.3rem;
+      box-shadow: 0 0 20px var(--primary-glow);
     }
 
     .sidebar-title {
-      font-weight: 600;
-      font-size: 1.1rem;
-      letter-spacing: -0.025em;
-      background: linear-gradient(to right, #fff, #9ca3af);
+      font-weight: 700;
+      font-size: 1.2rem;
+      letter-spacing: -0.02em;
+      background: linear-gradient(to right, #ffffff, #cbd5e1);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
@@ -112,7 +121,7 @@
       padding: 16px 12px;
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: 6px;
       overflow-y: auto;
       flex-grow: 1;
     }
@@ -120,38 +129,58 @@
     .nav-item {
       display: flex;
       align-items: center;
-      gap: 12px;
+      justify-content: space-between;
       padding: 10px 16px;
       border-radius: 8px;
       cursor: pointer;
       color: var(--text-muted);
       font-weight: 500;
-      font-size: 0.9rem;
-      transition: all 0.2s ease;
+      font-size: 0.92rem;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       text-decoration: none;
     }
 
     .nav-item:hover {
       color: var(--text-main);
-      background-color: rgba(255, 255, 255, 0.03);
+      background-color: rgba(255, 255, 255, 0.04);
+      transform: translateX(4px);
     }
 
     .nav-item.active {
       color: #fff;
-      background-color: rgba(99, 102, 241, 0.15);
+      background: linear-gradient(90deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.02) 100%);
       border-left: 3px solid var(--primary);
+      box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
     }
 
-    .nav-icon {
-      width: 18px;
-      height: 18px;
+    .nav-item-left {
       display: flex;
       align-items: center;
-      justify-content: center;
+      gap: 12px;
+    }
+
+    .nav-icon {
+      font-size: 1.1rem;
+      width: 20px;
+      text-align: center;
+    }
+
+    .nav-count {
+      background-color: rgba(255, 255, 255, 0.07);
+      color: var(--text-muted);
+      font-size: 0.75rem;
+      padding: 2px 6px;
+      border-radius: 20px;
+      font-weight: 600;
+    }
+
+    .nav-item.active .nav-count {
+      background-color: var(--primary);
+      color: #fff;
     }
 
     .sidebar-footer {
-      padding: 16px;
+      padding: 16px 20px;
       border-top: 1px solid var(--border-color);
       display: flex;
       align-items: center;
@@ -165,27 +194,30 @@
       border: none;
       color: var(--accent-red);
       cursor: pointer;
-      font-weight: 500;
+      font-weight: 600;
+      font-family: var(--font-sans);
+      transition: opacity 0.2s;
     }
 
     .logout-btn:hover {
+      opacity: 0.8;
       text-decoration: underline;
     }
 
-    /* Main Content */
+    /* Main Container */
     .main-container {
       flex-grow: 1;
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.05), transparent 600px);
+      background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.03), transparent 700px);
     }
 
     /* Header */
     .header {
-      height: 70px;
+      height: 72px;
       border-bottom: 1px solid var(--border-color);
-      padding: 0 24px;
+      padding: 0 28px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -195,12 +227,13 @@
     .header-left {
       display: flex;
       align-items: center;
-      gap: 16px;
+      gap: 20px;
     }
 
     .view-title {
-      font-size: 1.25rem;
-      font-weight: 600;
+      font-size: 1.35rem;
+      font-weight: 700;
+      letter-spacing: -0.01em;
     }
 
     .header-right {
@@ -214,16 +247,17 @@
       border: 1px solid var(--border-color);
       border-radius: 8px;
       color: var(--text-main);
-      padding: 8px 16px;
+      padding: 9px 16px;
       font-size: 0.875rem;
+      font-family: var(--font-sans);
       outline: none;
-      width: 240px;
+      width: 260px;
       transition: all 0.2s ease;
     }
 
     .search-input:focus {
-      border-color: var(--primary);
-      box-shadow: 0 0 8px rgba(99, 102, 241, 0.2);
+      border-color: var(--border-focus);
+      box-shadow: 0 0 12px var(--primary-glow);
     }
 
     .btn {
@@ -231,9 +265,10 @@
       color: #fff;
       border: none;
       border-radius: 8px;
-      padding: 8px 16px;
+      padding: 9px 18px;
       font-size: 0.875rem;
-      font-weight: 500;
+      font-weight: 600;
+      font-family: var(--font-sans);
       cursor: pointer;
       transition: all 0.2s ease;
       display: flex;
@@ -243,12 +278,17 @@
 
     .btn:hover {
       background-color: var(--primary-hover);
+      transform: translateY(-1px);
+    }
+
+    .btn:active {
+      transform: translateY(0);
     }
 
     .btn-danger {
-      background-color: rgba(239, 68, 68, 0.1);
+      background-color: rgba(244, 63, 94, 0.1);
       color: var(--accent-red);
-      border: 1px solid rgba(239, 68, 68, 0.2);
+      border: 1px solid rgba(244, 63, 94, 0.2);
     }
 
     .btn-danger:hover {
@@ -263,13 +303,14 @@
       font-size: 0.85rem;
       color: var(--text-muted);
       cursor: pointer;
+      user-select: none;
     }
 
     .switch {
       position: relative;
       display: inline-block;
-      width: 36px;
-      height: 20px;
+      width: 38px;
+      height: 22px;
     }
 
     .switch input {
@@ -286,7 +327,7 @@
       right: 0;
       bottom: 0;
       background-color: var(--bg-input);
-      transition: .3s;
+      transition: .2s;
       border-radius: 34px;
       border: 1px solid var(--border-color);
     }
@@ -294,17 +335,18 @@
     .slider:before {
       position: absolute;
       content: "";
-      height: 12px;
-      width: 12px;
+      height: 14px;
+      width: 14px;
       left: 3px;
       bottom: 3px;
       background-color: var(--text-muted);
-      transition: .3s;
+      transition: .2s;
       border-radius: 50%;
     }
 
     input:checked + .slider {
       background-color: var(--primary);
+      border-color: transparent;
     }
 
     input:checked + .slider:before {
@@ -316,19 +358,70 @@
     .content-area {
       flex-grow: 1;
       overflow-y: auto;
-      padding: 24px;
+      padding: 28px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+
+    /* Top Stats Grid */
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+      gap: 16px;
+      margin-bottom: 4px;
+    }
+
+    .stat-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      cursor: pointer;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .stat-card:hover {
+      background: var(--bg-card-hover);
+      border-color: rgba(255, 255, 255, 0.15);
+      transform: translateY(-2px);
+    }
+
+    .stat-card.active {
+      border-color: var(--primary);
+      background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(16, 22, 42, 0.8) 100%);
+      box-shadow: 0 4px 20px rgba(99, 102, 241, 0.05);
+    }
+
+    .stat-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: var(--text-muted);
+      font-size: 0.8rem;
+      font-weight: 600;
+    }
+
+    .stat-value {
+      font-size: 1.6rem;
+      font-weight: 700;
+      color: #fff;
     }
 
-    /* Cards & Glassmorphism */
+    /* Card & Table View */
     .card {
-      background-color: var(--bg-card);
+      background: var(--bg-card);
       backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
       border: 1px solid var(--border-color);
-      border-radius: 12px;
+      border-radius: 14px;
       overflow: hidden;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
     }
 
-    /* List Table */
     .table-container {
       overflow-x: auto;
     }
@@ -340,21 +433,22 @@
     }
 
     th {
-      padding: 14px 20px;
-      font-size: 0.75rem;
+      padding: 16px 24px;
+      font-size: 0.78rem;
       text-transform: uppercase;
-      letter-spacing: 0.05em;
+      letter-spacing: 0.06em;
       color: var(--text-muted);
       border-bottom: 1px solid var(--border-color);
-      font-weight: 600;
+      font-weight: 700;
+      background-color: rgba(10, 15, 30, 0.3);
     }
 
     td {
-      padding: 14px 20px;
-      font-size: 0.875rem;
+      padding: 16px 24px;
+      font-size: 0.9rem;
       border-bottom: 1px solid var(--border-color);
       color: var(--text-main);
-      max-width: 400px;
+      max-width: 450px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -366,42 +460,59 @@
 
     tr {
       cursor: pointer;
-      transition: background-color 0.2s ease;
+      transition: background-color 0.15s ease;
     }
 
     tr:hover {
-      background-color: rgba(255, 255, 255, 0.02);
+      background-color: rgba(255, 255, 255, 0.015);
+    }
+
+    tr.selected {
+      background-color: rgba(99, 102, 241, 0.07);
     }
 
-    /* Tags */
+    /* Badges */
     .badge {
       display: inline-flex;
       align-items: center;
       padding: 4px 8px;
       border-radius: 6px;
-      font-size: 0.75rem;
-      font-weight: 600;
-      letter-spacing: 0.025em;
+      font-size: 0.72rem;
+      font-weight: 700;
+      letter-spacing: 0.03em;
     }
 
     .badge-method {
       text-transform: uppercase;
     }
+
+    .badge-request { background-color: rgba(59, 130, 246, 0.12); color: var(--accent-blue); }
+    .badge-query { background-color: rgba(16, 185, 129, 0.12); color: var(--accent-green); }
+    .badge-cache { background-color: rgba(245, 158, 11, 0.12); color: var(--accent-amber); }
+    .badge-job { background-color: rgba(139, 92, 246, 0.12); color: var(--accent-purple); }
+    .badge-event { background-color: rgba(59, 130, 246, 0.12); color: var(--accent-blue); }
+    .badge-mail { background-color: rgba(16, 185, 129, 0.12); color: var(--accent-green); }
+    .badge-log { background-color: rgba(148, 163, 184, 0.15); color: var(--text-main); }
+    .badge-exception { background-color: rgba(244, 63, 94, 0.12); color: var(--accent-red); }
+    .badge-scheduled_task { background-color: rgba(245, 158, 11, 0.12); color: var(--accent-amber); }
+    .badge-redis { background-color: rgba(139, 92, 246, 0.12); color: var(--accent-purple); }
+
     .badge-get { background-color: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
     .badge-post { background-color: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }
     .badge-put { background-color: rgba(245, 158, 11, 0.15); color: var(--accent-amber); }
-    .badge-delete { background-color: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
+    .badge-delete { background-color: rgba(244, 63, 94, 0.15); color: var(--accent-red); }
+
     .badge-status-ok { background-color: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
-    .badge-status-err { background-color: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
+    .badge-status-err { background-color: rgba(244, 63, 94, 0.15); color: var(--accent-red); }
 
-    /* Login Modal */
+    /* Animated Login Screen */
     .login-overlay {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
-      background-color: rgba(11, 15, 25, 0.95);
+      background: radial-gradient(circle at center, #0c122c 0%, #050714 100%);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -409,16 +520,24 @@
     }
 
     .login-card {
-      width: 380px;
-      background-color: var(--bg-sidebar);
-      border: 1px solid var(--border-color);
-      border-radius: 16px;
-      padding: 32px;
-      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+      width: 400px;
+      background: rgba(13, 20, 43, 0.7);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 20px;
+      padding: 40px;
+      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.1);
       display: flex;
       flex-direction: column;
-      gap: 24px;
+      gap: 28px;
       text-align: center;
+      animation: loginFloat 6s ease-in-out infinite;
+    }
+
+    @keyframes loginFloat {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-8px); }
     }
 
     .login-logo-wrapper {
@@ -426,13 +545,28 @@
       justify-content: center;
     }
 
+    .login-logo {
+      background: linear-gradient(135deg, var(--primary), #8b5cf6);
+      width: 60px;
+      height: 60px;
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 800;
+      color: #fff;
+      font-size: 2rem;
+      box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
+    }
+
     .login-input {
-      background-color: var(--bg-main);
+      background-color: var(--bg-input);
       border: 1px solid var(--border-color);
       border-radius: 8px;
       color: var(--text-main);
-      padding: 12px 16px;
+      padding: 14px;
       font-size: 1rem;
+      font-family: var(--font-sans);
       outline: none;
       width: 100%;
       text-align: center;
@@ -440,60 +574,65 @@
     }
 
     .login-input:focus {
-      border-color: var(--primary);
+      border-color: var(--border-focus);
+      box-shadow: 0 0 12px var(--primary-glow);
     }
 
     .error-msg {
       color: var(--accent-red);
       font-size: 0.85rem;
+      font-weight: 500;
     }
 
-    /* Detail Modal */
+    /* Modal Styles with Blur & Entrance animation */
     .modal-overlay {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
-      background-color: rgba(0, 0, 0, 0.7);
-      backdrop-filter: blur(4px);
+      background-color: rgba(2, 4, 12, 0.75);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 999;
-      padding: 40px;
+      padding: 30px;
     }
 
     .modal-card {
       width: 100%;
-      max-width: 900px;
-      height: 90%;
-      background-color: var(--bg-sidebar);
+      max-width: 950px;
+      height: 85%;
+      background-color: #0b1226;
       border: 1px solid var(--border-color);
-      border-radius: 16px;
+      border-radius: 18px;
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      animation: modalFadeIn 0.2s ease-out;
+      animation: modalEntrance 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+      box-shadow: 0 25px 60px rgba(0,0,0,0.4), 0 0 2px rgba(255,255,255,0.1);
     }
 
-    @keyframes modalFadeIn {
-      from { transform: scale(0.95); opacity: 0; }
-      to { transform: scale(1); opacity: 1; }
+    @keyframes modalEntrance {
+      from { transform: scale(0.96) translateY(10px); opacity: 0; }
+      to { transform: scale(1) translateY(0); opacity: 1; }
     }
 
     .modal-header {
-      padding: 20px 24px;
+      padding: 22px 28px;
       border-bottom: 1px solid var(--border-color);
       display: flex;
       align-items: center;
       justify-content: space-between;
+      background-color: rgba(0, 0, 0, 0.15);
     }
 
     .modal-title-group {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 16px;
     }
 
     .modal-close {
@@ -501,12 +640,12 @@
       border: none;
       color: var(--text-muted);
       cursor: pointer;
-      font-size: 1.5rem;
+      font-size: 1.8rem;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 32px;
-      height: 32px;
+      width: 36px;
+      height: 36px;
       border-radius: 50%;
       transition: all 0.2s ease;
     }
@@ -514,23 +653,24 @@
     .modal-close:hover {
       background-color: rgba(255, 255, 255, 0.05);
       color: #fff;
+      transform: rotate(90deg);
     }
 
     .modal-tabs {
       display: flex;
-      background-color: rgba(0, 0, 0, 0.2);
+      background-color: rgba(0, 0, 0, 0.25);
       border-bottom: 1px solid var(--border-color);
-      padding: 0 24px;
+      padding: 0 28px;
     }
 
     .modal-tab {
-      padding: 14px 20px;
+      padding: 14px 22px;
       cursor: pointer;
       color: var(--text-muted);
-      font-weight: 500;
+      font-weight: 600;
       font-size: 0.9rem;
       border-bottom: 2px solid transparent;
-      transition: all 0.2s ease;
+      transition: all 0.2s;
     }
 
     .modal-tab:hover {
@@ -545,35 +685,36 @@
     .modal-body {
       flex-grow: 1;
       overflow-y: auto;
-      padding: 24px;
+      padding: 28px;
+      background-color: rgba(10, 15, 30, 0.2);
     }
 
-    /* JSON display */
+    /* JSON Display */
     .json-code {
       font-family: var(--font-mono);
-      font-size: 0.85rem;
-      background-color: rgba(0, 0, 0, 0.3);
-      padding: 16px;
-      border-radius: 8px;
+      font-size: 0.825rem;
+      background-color: rgba(2, 4, 10, 0.6);
+      padding: 20px;
+      border-radius: 10px;
       border: 1px solid var(--border-color);
       white-space: pre-wrap;
       word-break: break-all;
-      color: #cbd5e1;
+      color: #e2e8f0;
       overflow-x: auto;
     }
 
     .key-val-list {
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: 16px;
     }
 
     .key-val-row {
       display: grid;
-      grid-template-columns: 200px 1fr;
-      gap: 16px;
+      grid-template-columns: 220px 1fr;
+      gap: 20px;
       border-bottom: 1px solid var(--border-color);
-      padding-bottom: 12px;
+      padding-bottom: 14px;
     }
 
     .key-val-row:last-child {
@@ -583,22 +724,86 @@
     .key-val-label {
       font-weight: 600;
       color: var(--text-muted);
-      font-size: 0.875rem;
+      font-size: 0.9rem;
     }
 
     .key-val-value {
-      font-size: 0.875rem;
+      font-size: 0.9rem;
       word-break: break-all;
     }
 
-    /* Loading Spinner */
+    /* Pagination controls */
+    .pagination-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 24px;
+      border-top: 1px solid var(--border-color);
+      background-color: rgba(10, 15, 30, 0.15);
+      font-size: 0.85rem;
+      color: var(--text-muted);
+    }
+
+    .pagination-buttons {
+      display: flex;
+      gap: 8px;
+    }
+
+    .pagination-btn {
+      background-color: var(--bg-input);
+      border: 1px solid var(--border-color);
+      color: var(--text-main);
+      padding: 6px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-family: var(--font-sans);
+      font-weight: 500;
+      transition: all 0.2s;
+    }
+
+    .pagination-btn:hover:not(:disabled) {
+      background-color: var(--primary);
+      border-color: transparent;
+      color: #fff;
+    }
+
+    .pagination-btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .pagination-info {
+      font-weight: 500;
+    }
+
+    /* Keyboard Shortcuts Indicator */
+    .shortcuts-help {
+      display: flex;
+      gap: 12px;
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      align-items: center;
+    }
+
+    .key-cap {
+      background: var(--bg-input);
+      border: 1px solid var(--border-color);
+      border-radius: 4px;
+      padding: 1px 5px;
+      font-family: var(--font-mono);
+      font-weight: 600;
+      box-shadow: 0 1px 0 rgba(255,255,255,0.1);
+      color: #fff;
+    }
+
+    /* Spinner */
     .spinner {
-      border: 3px solid rgba(255, 255, 255, 0.1);
+      border: 3px solid rgba(255, 255, 255, 0.05);
       border-top: 3px solid var(--primary);
       border-radius: 50%;
-      width: 24px;
-      height: 24px;
-      animation: spin 1s linear infinite;
+      width: 28px;
+      height: 28px;
+      animation: spin 0.8s linear infinite;
     }
 
     @keyframes spin {
@@ -610,19 +815,19 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      height: 200px;
+      height: 250px;
     }
 
     .empty-state {
       text-align: center;
-      padding: 48px;
+      padding: 64px 32px;
       color: var(--text-muted);
     }
 
     .empty-icon {
-      font-size: 2.5rem;
-      margin-bottom: 12px;
-      opacity: 0.5;
+      font-size: 3rem;
+      margin-bottom: 16px;
+      opacity: 0.6;
     }
   </style>
 </head>
@@ -657,36 +862,68 @@
       const [loginError, setLoginError] = useState('');
       const [activeTab, setActiveTab] = useState('all');
       const [entries, setEntries] = useState([]);
+      const [stats, setStats] = useState({});
       const [searchTerm, setSearchTerm] = useState('');
       const [loading, setLoading] = useState(false);
       const [polling, setPolling] = useState(true);
       const [selectedEntry, setSelectedEntry] = useState(null);
       const [modalTab, setModalTab] = useState('details');
 
+      // Pagination state
+      const [currentPage, setCurrentPage] = useState(1);
+      const [totalPages, setTotalPages] = useState(1);
+      const [totalEntries, setTotalEntries] = useState(0);
+      const [perPage, setPerPage] = useState(50);
+
       const prefixPath = window.location.pathname.split('/api')[0].split('/')[1] || 'telescope';
 
+      // Load entries when dependencies change
       useEffect(() => {
         if (token) {
-          fetchEntries();
+          fetchEntries(1, false); // Reset page to 1 on tab or search change
         }
       }, [token, activeTab, searchTerm]);
 
+      // Polling effect
       useEffect(() => {
         let interval;
         if (polling && token) {
           interval = setInterval(() => {
-            fetchEntries(true);
+            fetchEntries(currentPage, true);
+            fetchStats();
           }, 3000);
         }
         return () => clearInterval(interval);
-      }, [polling, token, activeTab, searchTerm]);
+      }, [polling, token, activeTab, searchTerm, currentPage]);
+
+      // Fetch stats once on boot, and then periodically
+      useEffect(() => {
+        if (token) {
+          fetchStats();
+        }
+      }, [token]);
+
+      const fetchStats = async () => {
+        try {
+          const res = await fetch(`/${prefixPath}/api/stats`, {
+            headers: { 'Authorization': `Bearer ${token}` }
+          });
+          if (res.ok) {
+            const data = await res.json();
+            setStats(data);
+          }
+        } catch (e) {
+          console.error('Failed to fetch stats', e);
+        }
+      };
 
-      const fetchEntries = async (silent = false) => {
+      const fetchEntries = async (page = 1, silent = false) => {
         if (!silent) setLoading(true);
         try {
           const typeQuery = activeTab !== 'all' ? `type=${activeTab}` : '';
           const searchQuery = searchTerm ? `search=${encodeURIComponent(searchTerm)}` : '';
-          const query = [typeQuery, searchQuery].filter(Boolean).join('&');
+          const paginationQuery = `page=${page}&perPage=${perPage}`;
+          const query = [typeQuery, searchQuery, paginationQuery].filter(Boolean).join('&');
           
           const res = await fetch(`/${prefixPath}/api/entries?${query}`, {
             headers: {
@@ -697,8 +934,18 @@
             handleLogout();
             return;
           }
-          const data = await res.json();
-          setEntries(data);
+          const result = await res.json();
+          if (result && typeof result === 'object' && Array.isArray(result.data)) {
+            setEntries(result.data);
+            setTotalEntries(result.total);
+            setTotalPages(result.totalPages);
+            setCurrentPage(result.page);
+          } else if (Array.isArray(result)) {
+            setEntries(result);
+            setTotalEntries(result.length);
+            setTotalPages(1);
+            setCurrentPage(1);
+          }
         } catch (e) {
           console.error(e);
         } finally {
@@ -741,6 +988,7 @@
             }
           });
           setEntries([]);
+          setStats({});
           setSelectedEntry(null);
         } catch (e) {
           console.error(e);
@@ -764,17 +1012,49 @@
         return date.toLocaleDateString();
       };
 
+      // Keyboard navigation handler
+      useEffect(() => {
+        const handleKeyDown = (e) => {
+          if (!selectedEntry) return;
+          if (e.key === 'Escape') {
+            setSelectedEntry(null);
+            return;
+          }
+
+          const currentIndex = entries.findIndex(item => item.uuid === selectedEntry.uuid);
+          if (currentIndex === -1) return;
+
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            const nextIndex = currentIndex + 1;
+            if (nextIndex < entries.length) {
+              setSelectedEntry(entries[nextIndex]);
+            }
+          } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prevIndex = currentIndex - 1;
+            if (prevIndex >= 0) {
+              setSelectedEntry(entries[prevIndex]);
+            }
+          }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+      }, [selectedEntry, entries]);
+
+      // Login screen
       if (!token) {
         return (
           <div className="login-overlay">
             <form className="login-card" onSubmit={handleLogin}>
               <div className="login-logo-wrapper">
-                <div className="logo">T</div>
+                <div className="login-logo">T</div>
               </div>
               <div>
-                <h2 style={{ marginBottom: '8px' }}>Telescope Auth</h2>
-                <p style={{ color: 'var(--text-muted)', fontSize: '0.875rem' }}>
-                  Enter the password configured in your environment.
+                <h2 style={{ marginBottom: '8px', fontWeight: '700', letterSpacing: '-0.02em' }}>Telescope Dashboard</h2>
+                <p style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>
+                  Provide the password to unlock monitoring dashboard
                 </p>
               </div>
               <input
@@ -787,14 +1067,22 @@
                 autoFocus
               />
               {loginError && <div className="error-msg">{loginError}</div>}
-              <button type="submit" className="btn" style={{ justifyContent: 'center' }}>
-                Access Dashboard
+              <button type="submit" className="btn" style={{ justifyContent: 'center', padding: '12px' }}>
+                Access Monitor
               </button>
             </form>
           </div>
         );
       }
 
+      // Format navigation count
+      const getTabCount = (tabId) => {
+        if (tabId === 'all') {
+          return Object.values(stats).reduce((a, b) => a + b, 0);
+        }
+        return stats[tabId] || 0;
+      };
+
       return (
         <React.Fragment>
           {/* Sidebar */}
@@ -811,10 +1099,14 @@
                   onClick={() => {
                     setActiveTab(tab.id);
                     setSelectedEntry(null);
+                    setCurrentPage(1);
                   }}
                 >
-                  <span className="nav-icon">{tab.icon}</span>
-                  {tab.label}
+                  <div className="nav-item-left">
+                    <span className="nav-icon">{tab.icon}</span>
+                    <span>{tab.label}</span>
+                  </div>
+                  <span className="nav-count">{getTabCount(tab.id)}</span>
                 </li>
               ))}
             </ul>
@@ -856,6 +1148,25 @@
 
             {/* Content Area */}
             <div className="content-area">
+              {/* Stats Grid at the top for quick insights */}
+              {activeTab === 'all' && (
+                <div className="stats-grid">
+                  {NAVIGATION_TABS.slice(1, 7).map((tab) => (
+                    <div 
+                      key={tab.id} 
+                      className={`stat-card ${activeTab === tab.id ? 'active' : ''}`}
+                      onClick={() => setActiveTab(tab.id)}
+                    >
+                      <div className="stat-header">
+                        <span>{tab.label}</span>
+                        <span>{tab.icon}</span>
+                      </div>
+                      <div className="stat-value">{stats[tab.id] || 0}</div>
+                    </div>
+                  ))}
+                </div>
+              )}
+
               {loading ? (
                 <div className="loading-container">
                   <div className="spinner"></div>
@@ -863,50 +1174,87 @@
               ) : entries.length === 0 ? (
                 <div className="card empty-state">
                   <div className="empty-icon">📭</div>
-                  <h3>No Entries Found</h3>
-                  <p style={{ marginTop: '8px' }}>
+                  <h3 style={{ fontWeight: '600', color: '#fff' }}>No Entries Found</h3>
+                  <p style={{ marginTop: '8px', fontSize: '0.9rem' }}>
                     Trigger some actions in your application to see activity recorded here.
                   </p>
                 </div>
               ) : (
-                <div className="card table-container">
-                  <table>
-                    <thead>
-                      <tr>
-                        <th style={{ width: '150px' }}>Type</th>
-                        <th>Payload Summary</th>
-                        <th style={{ width: '100px' }}>Status</th>
-                        <th style={{ width: '180px', textAlign: 'right' }}>Happened</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {entries.map((entry) => {
-                        const summary = getEntrySummary(entry);
-                        return (
-                          <tr key={entry.uuid} onClick={() => {
-                            setSelectedEntry(entry);
-                            setModalTab('details');
-                          }}>
-                            <td>
-                              <span className={`badge badge-method badge-${entry.type}`}>
-                                {entry.type}
-                              </span>
-                            </td>
-                            <td>
-                              <span style={{ fontWeight: '500' }}>{summary.title}</span>
-                              <span style={{ color: 'var(--text-muted)', marginLeft: '8px', fontSize: '0.8rem' }}>
-                                {summary.subtitle}
-                              </span>
-                            </td>
-                            <td>{summary.status}</td>
-                            <td style={{ textAlign: 'right', color: 'var(--text-muted)' }}>
-                              {getRelativeTime(entry.recordedAt)}
-                            </td>
-                          </tr>
-                        );
-                      })}
-                    </tbody>
-                  </table>
+                <div className="card" style={{ display: 'flex', flexDirection: 'column' }}>
+                  <div className="table-container">
+                    <table>
+                      <thead>
+                        <tr>
+                          <th style={{ width: '130px' }}>Type</th>
+                          <th>Payload Summary</th>
+                          <th style={{ width: '110px' }}>Status</th>
+                          <th style={{ width: '180px', textAlign: 'right' }}>Happened</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {entries.map((entry) => {
+                          const summary = getEntrySummary(entry);
+                          const isSelected = selectedEntry && selectedEntry.uuid === entry.uuid;
+                          return (
+                            <tr 
+                              key={entry.uuid} 
+                              className={isSelected ? 'selected' : ''}
+                              onClick={() => {
+                                setSelectedEntry(entry);
+                                setModalTab('details');
+                              }}
+                            >
+                              <td>
+                                <span className={`badge badge-${entry.type}`}>
+                                  {entry.type.replace('_', ' ')}
+                                </span>
+                              </td>
+                              <td>
+                                <span style={{ fontWeight: '600', color: '#fff' }}>{summary.title}</span>
+                                <span style={{ color: 'var(--text-muted)', marginLeft: '10px', fontSize: '0.825rem', fontFamily: varMono(entry.type) }}>
+                                  {summary.subtitle}
+                                </span>
+                              </td>
+                              <td>{summary.status}</td>
+                              <td style={{ textAlign: 'right', color: 'var(--text-muted)', fontSize: '0.85rem' }}>
+                                {getRelativeTime(entry.recordedAt)}
+                              </td>
+                            </tr>
+                          );
+                        })}
+                      </tbody>
+                    </table>
+                  </div>
+
+                  {/* Pagination Footer */}
+                  <div className="pagination-bar">
+                    <div className="shortcuts-help">
+                      <span>Shortcut:</span>
+                      <span><span className="key-cap">▲</span> <span className="key-cap">▼</span> Navigate</span>
+                      <span><span className="key-cap">Esc</span> Close</span>
+                    </div>
+
+                    <div className="pagination-info">
+                      Showing page {currentPage} of {totalPages} ({totalEntries} total entries)
+                    </div>
+
+                    <div className="pagination-buttons">
+                      <button 
+                        className="pagination-btn" 
+                        disabled={currentPage <= 1}
+                        onClick={() => fetchEntries(currentPage - 1)}
+                      >
+                        Previous
+                      </button>
+                      <button 
+                        className="pagination-btn" 
+                        disabled={currentPage >= totalPages}
+                        onClick={() => fetchEntries(currentPage + 1)}
+                      >
+                        Next
+                      </button>
+                    </div>
+                  </div>
                 </div>
               )}
             </div>
@@ -918,11 +1266,11 @@
               <div className="modal-card" onClick={(e) => e.stopPropagation()}>
                 <div className="modal-header">
                   <div className="modal-title-group">
-                    <span className={`badge badge-method badge-${selectedEntry.type}`}>
-                      {selectedEntry.type}
+                    <span className={`badge badge-${selectedEntry.type}`}>
+                      {selectedEntry.type.replace('_', ' ')}
                     </span>
-                    <h3 style={{ fontSize: '1.1rem' }}>Entry Details</h3>
-                    <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem', fontFamily: 'var(--font-mono)' }}>
+                    <h3 style={{ fontSize: '1.25rem', fontWeight: '700', color: '#fff' }}>Entry Details</h3>
+                    <span style={{ color: 'var(--text-muted)', fontSize: '0.8rem', fontFamily: 'var(--font-mono)', letterSpacing: '0.05em' }}>
                       {selectedEntry.uuid}
                     </span>
                   </div>
@@ -940,7 +1288,7 @@
                     className={`modal-tab ${modalTab === 'content' ? 'active' : ''}`}
                     onClick={() => setModalTab('content')}
                   >
-                    Raw Content
+                    Raw JSON
                   </div>
                 </div>
 
@@ -949,12 +1297,14 @@
                     <div className="key-val-list">
                       <div className="key-val-row">
                         <div className="key-val-label">Recorded At</div>
-                        <div className="key-val-value">{formatTime(selectedEntry.recordedAt)}</div>
+                        <div className="key-val-value" style={{ color: '#fff', fontWeight: '500' }}>
+                          {formatTime(selectedEntry.recordedAt)}
+                        </div>
                       </div>
                       <div className="key-val-row">
                         <div className="key-val-label">Entry Type</div>
-                        <div className="key-val-value" style={{ textTransform: 'capitalize' }}>
-                          {selectedEntry.type}
+                        <div className="key-val-value" style={{ textTransform: 'capitalize', fontWeight: '500' }}>
+                          {selectedEntry.type.replace('_', ' ')}
                         </div>
                       </div>
                       {renderStructuredDetails(selectedEntry)}
@@ -972,6 +1322,11 @@
       );
     }
 
+    // Determine font family for subtitle
+    function varMono(type) {
+      return (type === 'query' || type === 'redis' || type === 'request') ? 'var(--font-mono)' : 'var(--font-sans)';
+    }
+
     // Helper functions for displaying table items
     function getEntrySummary(entry) {
       const { type, content } = entry;
@@ -986,19 +1341,19 @@
             <span className="badge badge-status-ok">{status}</span>
           );
           return {
-            title: `${req.method || 'GET'} ${req.url || '/'}`,
-            subtitle: duration,
+            title: `${req.method || 'GET'}`,
+            subtitle: `${req.url || '/'}`,
             status: statusBadge
           };
         case 'query':
           return {
             title: content.query || 'DB Query',
-            subtitle: `${content.operation || 'QUERY'} on ${content.entity || 'db'}`,
+            subtitle: `${content.operation || 'QUERY'} on ${content.entity || 'db'} (${content.duration || 0}ms)`,
             status: <span className="badge badge-status-ok">success</span>
           };
         case 'cache':
           return {
-            title: `${content.action} cache key`,
+            title: `${content.action}`,
             subtitle: content.key || '',
             status: <span className="badge badge-status-ok">{content.action}</span>
           };
@@ -1082,11 +1437,11 @@
             <React.Fragment>
               <div className="key-val-row">
                 <div className="key-val-label">HTTP Method</div>
-                <div className="key-val-value">{content.request?.method}</div>
+                <div className="key-val-value" style={{ fontWeight: '600', color: '#fff' }}>{content.request?.method}</div>
               </div>
               <div className="key-val-row">
                 <div className="key-val-label">URL</div>
-                <div className="key-val-value" style={{ fontFamily: 'var(--font-mono)' }}>{content.request?.url}</div>
+                <div className="key-val-value" style={{ fontFamily: 'var(--font-mono)', color: '#818cf8' }}>{content.request?.url}</div>
               </div>
               <div className="key-val-row">
                 <div className="key-val-label">IP Address</div>
@@ -1096,18 +1451,24 @@
                 <div className="key-val-label">Duration</div>
                 <div className="key-val-value">{content.duration} ms</div>
               </div>
-              <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
-                <div className="key-val-label">Request Headers</div>
-                <pre className="json-code">{JSON.stringify(content.request?.headers, null, 2)}</pre>
-              </div>
-              <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
-                <div className="key-val-label">Request Body</div>
-                <pre className="json-code">{JSON.stringify(content.request?.body, null, 2)}</pre>
-              </div>
-              <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
-                <div className="key-val-label">Response Payload</div>
-                <pre className="json-code">{JSON.stringify(content.response, null, 2)}</pre>
-              </div>
+              {content.request?.headers && (
+                <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
+                  <div className="key-val-label">Request Headers</div>
+                  <pre className="json-code">{JSON.stringify(content.request?.headers, null, 2)}</pre>
+                </div>
+              )}
+              {content.request?.body && (
+                <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
+                  <div className="key-val-label">Request Body</div>
+                  <pre className="json-code">{JSON.stringify(content.request?.body, null, 2)}</pre>
+                </div>
+              )}
+              {content.response && (
+                <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
+                  <div className="key-val-label">Response Payload</div>
+                  <pre className="json-code">{JSON.stringify(content.response, null, 2)}</pre>
+                </div>
+              )}
             </React.Fragment>
           );
         case 'query':
@@ -1115,7 +1476,7 @@
             <React.Fragment>
               <div className="key-val-row">
                 <div className="key-val-label">Operation</div>
-                <div className="key-val-value" style={{ fontWeight: '600' }}>{content.operation}</div>
+                <div className="key-val-value" style={{ fontWeight: '600', color: '#fff' }}>{content.operation}</div>
               </div>
               <div className="key-val-row">
                 <div className="key-val-label">Entity/Table</div>
@@ -1125,14 +1486,18 @@
                 <div className="key-val-label">SQL Query</div>
                 <pre className="json-code" style={{ color: '#818cf8', fontWeight: '500' }}>{content.query}</pre>
               </div>
-              <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
-                <div className="key-val-label">Parameters</div>
-                <pre className="json-code">{JSON.stringify(content.parameters, null, 2)}</pre>
-              </div>
-              <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
-                <div className="key-val-label">Entity Data</div>
-                <pre className="json-code">{JSON.stringify(content.data, null, 2)}</pre>
-              </div>
+              {content.parameters && content.parameters.length > 0 && (
+                <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
+                  <div className="key-val-label">Parameters</div>
+                  <pre className="json-code">{JSON.stringify(content.parameters, null, 2)}</pre>
+                </div>
+              )}
+              {content.data && (
+                <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
+                  <div className="key-val-label">Entity Data</div>
+                  <pre className="json-code">{JSON.stringify(content.data, null, 2)}</pre>
+                </div>
+              )}
             </React.Fragment>
           );
         case 'exception':
@@ -1144,7 +1509,7 @@
               </div>
               <div className="key-val-row">
                 <div className="key-val-label">Message</div>
-                <div className="key-val-value" style={{ fontWeight: '500' }}>{content.message}</div>
+                <div className="key-val-value" style={{ fontWeight: '500', color: '#fff' }}>{content.message}</div>
               </div>
               {content.status && (
                 <div className="key-val-row">
@@ -1155,7 +1520,7 @@
               {content.stack && (
                 <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
                   <div className="key-val-label">Stack Trace</div>
-                  <pre className="json-code" style={{ color: '#ef4444', overflowX: 'auto' }}>{content.stack}</pre>
+                  <pre className="json-code" style={{ color: '#f43f5e', overflowX: 'auto' }}>{content.stack}</pre>
                 </div>
               )}
             </React.Fragment>
@@ -1165,7 +1530,7 @@
             <React.Fragment>
               <div className="key-val-row">
                 <div className="key-val-label">Level</div>
-                <div className="key-val-value" style={{ textTransform: 'uppercase' }}>{content.level}</div>
+                <div className="key-val-value" style={{ textTransform: 'uppercase', fontWeight: '600' }}>{content.level}</div>
               </div>
               <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
                 <div className="key-val-label">Log Message</div>
@@ -1178,7 +1543,7 @@
             <React.Fragment>
               <div className="key-val-row">
                 <div className="key-val-label">Action</div>
-                <div className="key-val-value">{content.action}</div>
+                <div className="key-val-value" style={{ fontWeight: '600', color: '#fff' }}>{content.action}</div>
               </div>
               <div className="key-val-row">
                 <div className="key-val-label">Key</div>
@@ -1203,7 +1568,7 @@
             <React.Fragment>
               <div className="key-val-row">
                 <div className="key-val-label">Job ID</div>
-                <div className="key-val-value">{content.jobId}</div>
+                <div className="key-val-value" style={{ fontFamily: 'var(--font-mono)' }}>{content.jobId}</div>
               </div>
               <div className="key-val-row">
                 <div className="key-val-label">Status</div>
@@ -1236,16 +1601,18 @@
               </div>
               <div className="key-val-row">
                 <div className="key-val-label">Subject</div>
-                <div className="key-val-value" style={{ fontWeight: '600' }}>{content.subject}</div>
-              </div>
-              <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
-                <div className="key-val-label">Plain Text Content</div>
-                <pre className="json-code" style={{ whiteSpace: 'pre-wrap' }}>{content.text}</pre>
+                <div className="key-val-value" style={{ fontWeight: '600', color: '#fff' }}>{content.subject}</div>
               </div>
+              {content.text && (
+                <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
+                  <div className="key-val-label">Plain Text Content</div>
+                  <pre className="json-code" style={{ whiteSpace: 'pre-wrap' }}>{content.text}</pre>
+                </div>
+              )}
               {content.html && (
                 <div className="key-val-row" style={{ flexDirection: 'column', display: 'flex', gap: '8px' }}>
                   <div className="key-val-label">HTML Content</div>
-                  <iframe srcDoc={content.html} style={{ border: '1px solid var(--border-color)', borderRadius: '8px', background: '#fff', width: '100%', height: '300px' }} />
+                  <iframe srcDoc={content.html} style={{ border: '1px solid var(--border-color)', borderRadius: '8px', background: '#fff', width: '100%', height: '350px' }} />
                 </div>
               )}
             </React.Fragment>