From d20d16c2068cfb77079554acf476934be51d1d14 Mon Sep 17 00:00:00 2001
From: Amal Shaji <amalshajid@gmail.com>
Date: Fri, 14 Jun 2024 13:20:34 +0530
Subject: [PATCH] Update client and admin ui (#68)

* update portr client ui

* update admin ui
---
 .../src/lib/components/team-selector.svelte   |   2 +-
 .../src/lib/components/users/delete.svelte    |   5 +-
 .../lib/components/users/invite-user.svelte   |   8 +-
 admin/src/web/src/pages/app/myaccount.svelte  |   4 +-
 admin/src/web/src/pages/app/settings.svelte   |   4 +-
 admin/src/web/src/pages/home.svelte           |  13 +-
 .../instance-settings/emailSettings.svelte    |  12 +-
 .../pages/instance-settings/newteam.svelte    |   6 +-
 .../internal/client/dashboard/ui/package.json |   2 +
 .../client/dashboard/ui/pnpm-lock.yaml        |  17 +++
 .../ui/src/lib/components/HttpBadge.svelte    |  43 ++++++
 .../src/lib/components/InspectorIcon.svelte   |  46 +++----
 .../src/lib/components/RenderContent.svelte   |   7 +-
 .../components/RenderFormUrlEncoded.svelte    |   2 +-
 .../components/RenderMultipartFormData.svelte |   6 +-
 .../client/dashboard/ui/src/lib/types.d.ts    |   1 +
 .../client/dashboard/ui/src/lib/utils.ts      | 127 +++++++++++-------
 .../client/dashboard/ui/src/pages/Home.svelte |   8 +-
 .../dashboard/ui/src/pages/Inspect.svelte     |  17 +--
 .../ui/src/pages/RequestDetails.svelte        |  87 ++++++++----
 20 files changed, 277 insertions(+), 140 deletions(-)
 create mode 100644 tunnel/internal/client/dashboard/ui/src/lib/components/HttpBadge.svelte

diff --git a/admin/src/web/src/lib/components/team-selector.svelte b/admin/src/web/src/lib/components/team-selector.svelte
index 6afb633a..bee49840 100644
--- a/admin/src/web/src/lib/components/team-selector.svelte
+++ b/admin/src/web/src/lib/components/team-selector.svelte
@@ -44,7 +44,7 @@
 </script>
 
 <Select.Root bind:selected onSelectedChange={switchTeams}>
-  <Select.Trigger class="text-[14px] border-black focus:ring-0">
+  <Select.Trigger class="text-[14px] focus:ring-0">
     <div class="flex items-center space-x-2">
       <Avatar.Root class="w-5 h-5 rounded-full">
         <Avatar.Image
diff --git a/admin/src/web/src/lib/components/users/delete.svelte b/admin/src/web/src/lib/components/users/delete.svelte
index 68c98abe..e8a5bb42 100644
--- a/admin/src/web/src/lib/components/users/delete.svelte
+++ b/admin/src/web/src/lib/components/users/delete.svelte
@@ -3,8 +3,7 @@
   import { Button } from "$lib/components/ui/button/index.js";
   import { currentUser, users } from "$lib/store";
   import type { TeamUser } from "$lib/types";
-  import { Trash2 } from "lucide-svelte";
-  import { Reload } from "radix-icons-svelte";
+  import { Loader, Trash2 } from "lucide-svelte";
   import { getContext } from "svelte";
   import { toast } from "svelte-sonner";
 
@@ -64,7 +63,7 @@
       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
       <Button on:click={removeUser} disabled={isLoading}>
         {#if isLoading}
-          <Reload class="mr-2 h-4 w-4 animate-spin" />
+          <Loader class="mr-2 h-4 w-4 animate-spin" />
         {/if}
         Remove
       </Button>
diff --git a/admin/src/web/src/lib/components/users/invite-user.svelte b/admin/src/web/src/lib/components/users/invite-user.svelte
index c5d84e11..b7505b27 100644
--- a/admin/src/web/src/lib/components/users/invite-user.svelte
+++ b/admin/src/web/src/lib/components/users/invite-user.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-  import { Button } from "$lib/components/ui/button";
   import * as AlertDialog from "$lib/components/ui/alert-dialog";
-  import { Reload } from "radix-icons-svelte";
+  import { Button } from "$lib/components/ui/button";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
+  import { Loader } from "lucide-svelte";
 
   import * as Select from "$lib/components/ui/select";
-  import { toast } from "svelte-sonner";
   import { currentUser, users } from "$lib/store";
   import { getContext } from "svelte";
+  import { toast } from "svelte-sonner";
   import ApiError from "../ApiError.svelte";
 
   import { Checkbox } from "$lib/components/ui/checkbox";
@@ -135,7 +135,7 @@
       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
       <Button on:click={add_member} disabled={isLoading}>
         {#if isLoading}
-          <Reload class="mr-2 h-4 w-4 animate-spin" />
+          <Loader class="mr-2 h-4 w-4 animate-spin" />
         {/if}
         Add
       </Button>
diff --git a/admin/src/web/src/pages/app/myaccount.svelte b/admin/src/web/src/pages/app/myaccount.svelte
index 6521bbf3..b3a3d487 100644
--- a/admin/src/web/src/pages/app/myaccount.svelte
+++ b/admin/src/web/src/pages/app/myaccount.svelte
@@ -5,7 +5,7 @@
   import * as Card from "$lib/components/ui/card";
   import { currentUser } from "$lib/store";
   import { toast } from "svelte-sonner";
-  import { Reload } from "radix-icons-svelte";
+  import { Loader } from "lucide-svelte";
   import { getContext } from "svelte";
 
   let team = getContext("team") as string;
@@ -85,7 +85,7 @@
     <Card.Footer>
       <Button on:click={updateProfile} disabled={isUpdating}>
         {#if isUpdating}
-          <Reload class="mr-2 h-4 w-4 animate-spin" />
+          <Loader class="mr-2 h-4 w-4 animate-spin" />
         {/if}
         Save changes
       </Button>
diff --git a/admin/src/web/src/pages/app/settings.svelte b/admin/src/web/src/pages/app/settings.svelte
index 19f4e9b0..a4d91379 100644
--- a/admin/src/web/src/pages/app/settings.svelte
+++ b/admin/src/web/src/pages/app/settings.svelte
@@ -4,7 +4,7 @@
   import * as Card from "$lib/components/ui/card";
   import { currentUser } from "$lib/store";
   import { toast } from "svelte-sonner";
-  import { Reload } from "radix-icons-svelte";
+  import { Loader } from "lucide-svelte";
   import { getContext } from "svelte";
   import { copyCodeToClipboard } from "$lib/utils";
 
@@ -64,7 +64,7 @@
         disabled={isRotatingSecretKey}
       >
         {#if isRotatingSecretKey}
-          <Reload class="mr-2 h-4 w-4 animate-spin" />
+          <Loader class="mr-2 h-4 w-4 animate-spin" />
         {/if}
         Rotate key
       </Button>
diff --git a/admin/src/web/src/pages/home.svelte b/admin/src/web/src/pages/home.svelte
index 9a2c6aa5..1db531bc 100644
--- a/admin/src/web/src/pages/home.svelte
+++ b/admin/src/web/src/pages/home.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Github, Lock, TriangleAlert, X } from "lucide-svelte";
+  import { Github, Lock, TriangleAlert, X, TreePalm } from "lucide-svelte";
   import { onMount } from "svelte";
 
   import * as Alert from "$lib/components/ui/alert";
@@ -52,9 +52,14 @@
   <div
     class="w-full max-w-sm p-6 m-auto mx-auto rounded-md dark:bg-gray-800 py-8"
   >
-    <p class="text-center my-6 text-2xl font-semibold tracking-wide">
-      Log into Portr
-    </p>
+    <div class="flex space-x-2 items-center justify-center">
+      <TreePalm />
+      <span
+        class="items-center text-center my-6 text-2xl font-semibold tracking-wide"
+      >
+        Welcome back!
+      </span>
+    </div>
     <Button
       variant="outline"
       class="w-full"
diff --git a/admin/src/web/src/pages/instance-settings/emailSettings.svelte b/admin/src/web/src/pages/instance-settings/emailSettings.svelte
index 372df4ca..5489594a 100644
--- a/admin/src/web/src/pages/instance-settings/emailSettings.svelte
+++ b/admin/src/web/src/pages/instance-settings/emailSettings.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-  import { Label } from "$lib/components/ui/label";
+  import ErrorText from "$lib/components/ErrorText.svelte";
   import { Button } from "$lib/components/ui/button";
   import * as Card from "$lib/components/ui/card";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { Switch } from "$lib/components/ui/switch";
   import { Textarea } from "$lib/components/ui/textarea";
   import { instanceSettings } from "$lib/store";
+  import { Loader } from "lucide-svelte";
   import { onDestroy, onMount } from "svelte";
   import { toast } from "svelte-sonner";
-  import { Reload } from "radix-icons-svelte";
-  import { Switch } from "$lib/components/ui/switch";
-  import { Input } from "$lib/components/ui/input";
-  import ErrorText from "$lib/components/ErrorText.svelte";
 
   let smtpEnabled: boolean;
 
@@ -239,7 +239,7 @@
   <Card.Footer>
     <Button on:click={updateEmailSettings} disabled={isUpdating}>
       {#if isUpdating}
-        <Reload class="mr-2 h-4 w-4 animate-spin" />
+        <Loader class="mr-2 h-4 w-4 animate-spin" />
       {/if}
       Save changes
     </Button>
diff --git a/admin/src/web/src/pages/instance-settings/newteam.svelte b/admin/src/web/src/pages/instance-settings/newteam.svelte
index 6bf67256..6e32a4e3 100644
--- a/admin/src/web/src/pages/instance-settings/newteam.svelte
+++ b/admin/src/web/src/pages/instance-settings/newteam.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { Input } from "$lib/components/ui/input";
   import { Button } from "$lib/components/ui/button";
   import * as Card from "$lib/components/ui/card";
+  import { Input } from "$lib/components/ui/input";
+  import { Loader } from "lucide-svelte";
   import { toast } from "svelte-sonner";
-  import { Reload } from "radix-icons-svelte";
   import ErrorText from "../../lib/components/ErrorText.svelte";
 
   let teamName: string = "",
@@ -63,7 +63,7 @@
   <Card.Footer>
     <Button on:click={createTeam} disabled={isUpdating}>
       {#if isUpdating}
-        <Reload class="mr-2 h-4 w-4 animate-spin" />
+        <Loader class="mr-2 h-4 w-4 animate-spin" />
       {/if}
       Create team
     </Button>
diff --git a/tunnel/internal/client/dashboard/ui/package.json b/tunnel/internal/client/dashboard/ui/package.json
index 30708951..ac123be4 100644
--- a/tunnel/internal/client/dashboard/ui/package.json
+++ b/tunnel/internal/client/dashboard/ui/package.json
@@ -13,10 +13,12 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "@tsconfig/svelte": "^5.0.4",
     "autoprefixer": "^10.4.19",
+    "highlight.js": "^11.9.0",
     "postcss": "^8.4.38",
     "postcss-load-config": "^5.0.3",
     "svelte": "^4.2.13",
     "svelte-check": "^3.6.9",
+    "svelte-highlight": "^7.6.1",
     "tailwindcss": "^3.4.3",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
diff --git a/tunnel/internal/client/dashboard/ui/pnpm-lock.yaml b/tunnel/internal/client/dashboard/ui/pnpm-lock.yaml
index 8b19c9b0..7086426f 100644
--- a/tunnel/internal/client/dashboard/ui/pnpm-lock.yaml
+++ b/tunnel/internal/client/dashboard/ui/pnpm-lock.yaml
@@ -40,6 +40,9 @@ devDependencies:
   autoprefixer:
     specifier: ^10.4.19
     version: 10.4.19(postcss@8.4.38)
+  highlight.js:
+    specifier: ^11.9.0
+    version: 11.9.0
   postcss:
     specifier: ^8.4.38
     version: 8.4.38
@@ -52,6 +55,9 @@ devDependencies:
   svelte-check:
     specifier: ^3.6.9
     version: 3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@4.2.13)
+  svelte-highlight:
+    specifier: ^7.6.1
+    version: 7.6.1
   tailwindcss:
     specifier: ^3.4.3
     version: 3.4.3
@@ -939,6 +945,11 @@ packages:
     dependencies:
       function-bind: 1.1.2
 
+  /highlight.js@11.9.0:
+    resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
   /http-status-codes@2.3.0:
     resolution: {integrity: sha512-RJ8XvFvpPM/Dmc5SV+dC4y5PCeOhT3x1Hq0NU3rjGeg5a/CqlhZ7uudknPwZFz4aeAXDcbAyaeP7GAo9lvngtA==}
     dev: false
@@ -1471,6 +1482,12 @@ packages:
       - sugarss
     dev: true
 
+  /svelte-highlight@7.6.1:
+    resolution: {integrity: sha512-YIpA6LBVpghQndBsbZQLl3ufEje179vQTtC7FH/utbEmUwYecIXsBq4mcwNkCeUuCrpcaF0DkrppWmMp/ZoPfA==}
+    dependencies:
+      highlight.js: 11.9.0
+    dev: true
+
   /svelte-hmr@0.16.0(svelte@4.2.13):
     resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
diff --git a/tunnel/internal/client/dashboard/ui/src/lib/components/HttpBadge.svelte b/tunnel/internal/client/dashboard/ui/src/lib/components/HttpBadge.svelte
new file mode 100644
index 00000000..33126ba8
--- /dev/null
+++ b/tunnel/internal/client/dashboard/ui/src/lib/components/HttpBadge.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  export let method:
+    | "GET"
+    | "POST"
+    | "PUT"
+    | "DELETE"
+    | "PATCH"
+    | "OPTIONS"
+    | "HEAD"
+    | "CONNECT"
+    | "TRACE";
+
+  const getColorByMethod = (method: string) => {
+    switch (method) {
+      case "GET":
+        return "bg-green-500";
+      case "POST":
+        return "bg-blue-500";
+      case "PUT":
+        return "bg-yellow-500";
+      case "DELETE":
+        return "bg-red-500";
+      case "PATCH":
+        return "bg-purple-500";
+      case "OPTIONS":
+        return "bg-gray-500";
+      case "HEAD":
+        return "bg-gray-500";
+      case "CONNECT":
+        return "bg-gray-500";
+      case "TRACE":
+        return "bg-gray-500";
+      default:
+        return "bg-gray-500";
+    }
+  };
+</script>
+
+<span
+  class={`rounded-sm px-2 py-1 text-white text-xs font-light ${getColorByMethod(method)}`}
+>
+  {method}
+</span>
diff --git a/tunnel/internal/client/dashboard/ui/src/lib/components/InspectorIcon.svelte b/tunnel/internal/client/dashboard/ui/src/lib/components/InspectorIcon.svelte
index 73aa8bfd..24de31f9 100644
--- a/tunnel/internal/client/dashboard/ui/src/lib/components/InspectorIcon.svelte
+++ b/tunnel/internal/client/dashboard/ui/src/lib/components/InspectorIcon.svelte
@@ -1,24 +1,24 @@
-<div class="flex items-center gap-2">
-  <svg
-    class="h-6"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0.63 42.8 98.74 14.4"
+<svg
+  width="231.4"
+  height="26.819654148298632"
+  viewBox="0 0 370 42.88363022848095"
+  ><defs id="SvgjsDefs1483"></defs><g
+    id="SvgjsG1484"
+    transform="matrix(0.7177205101974772,0,0,0.7177205101974772,-10.886384173001131,-14.428765943671163)"
+    fill="#000000"
+    ><g xmlns="http://www.w3.org/2000/svg"
+      ><path
+        d="M26.957,43.888c-0.042-0.002-0.082-0.013-0.124-0.013h-8.831c-1.565,0-2.834,1.269-2.834,2.834v6.581   c0,1.565,1.269,2.835,2.834,2.835h8.831c0.042,0,0.082-0.011,0.124-0.013c2.537,7.35,9.499,12.638,17.71,12.638v-37.5   C36.455,31.25,29.494,36.538,26.957,43.888z"
+      ></path><path
+        d="M81.999,43.875h-8.831c-0.042,0-0.082,0.011-0.124,0.013c-2.537-7.35-9.498-12.638-17.711-12.638v11.138h-6   c-0.829,0-1.5,0.671-1.5,1.5s0.671,1.5,1.5,1.5h6v9.225h-6c-0.829,0-1.5,0.672-1.5,1.5s0.671,1.5,1.5,1.5h6V68.75   c8.213,0,15.174-5.288,17.711-12.638c0.042,0.002,0.082,0.013,0.124,0.013h8.831c1.565,0,2.834-1.27,2.834-2.835v-6.581   C84.833,45.144,83.564,43.875,81.999,43.875z"
+      ></path></g
+    ></g
+  ><g
+    id="SvgjsG1485"
+    transform="matrix(2.3180340664043757,0,0,2.3180340664043757,66.01298133946499,-13.073711825029742)"
+    fill="#2e2e2e"
     ><path
-      fill="#000000"
-      d="M0.63 53.66L0.63 42.83Q0.74 42.83 1.14 42.82Q1.54 42.82 2.04 42.82Q2.54 42.82 3.03 42.81Q3.53 42.80 3.85 42.80L3.85 42.80Q5.80 42.80 6.73 43.67Q7.66 44.54 7.66 46.06L7.66 46.06Q7.66 46.80 7.40 47.42Q7.14 48.03 6.64 48.48Q6.14 48.93 5.39 49.18Q4.65 49.42 3.66 49.42L3.66 49.42L2.54 49.42L2.54 53.66L0.63 53.66ZM2.54 44.18L2.54 48L3.77 48Q4.78 48 5.21 47.47Q5.64 46.94 5.64 46.13L5.64 46.13Q5.64 45.76 5.54 45.41Q5.45 45.06 5.22 44.78Q4.98 44.50 4.59 44.33Q4.20 44.16 3.61 44.16L3.61 44.16Q3.26 44.16 2.99 44.16Q2.73 44.16 2.54 44.18L2.54 44.18ZM11.56 45.50Q13.40 45.50 14.23 46.59Q15.06 47.68 15.06 49.58L15.06 49.58Q15.06 50.48 14.84 51.26Q14.62 52.03 14.16 52.60Q13.70 53.17 13.02 53.50Q12.33 53.82 11.42 53.82L11.42 53.82Q10.50 53.82 9.84 53.54Q9.18 53.26 8.74 52.74Q8.31 52.21 8.11 51.46Q7.91 50.70 7.91 49.76L7.91 49.76Q7.91 48.85 8.14 48.07Q8.36 47.30 8.82 46.73Q9.27 46.16 9.96 45.83Q10.65 45.50 11.56 45.50L11.56 45.50ZM11.40 46.85Q10.94 46.85 10.64 47.06Q10.34 47.26 10.18 47.64Q10.01 48.02 9.94 48.52Q9.88 49.02 9.88 49.60L9.88 49.60Q9.88 50.19 9.95 50.72Q10.02 51.25 10.22 51.64Q10.41 52.03 10.74 52.26Q11.06 52.48 11.58 52.48L11.58 52.48Q12.04 52.48 12.34 52.27Q12.63 52.06 12.80 51.69Q12.97 51.31 13.03 50.82Q13.10 50.32 13.10 49.74L13.10 49.74Q13.10 49.15 13.02 48.62Q12.95 48.10 12.76 47.70Q12.57 47.30 12.24 47.07Q11.91 46.85 11.40 46.85L11.40 46.85ZM20.23 47.36Q19.94 47.36 19.66 47.50Q19.37 47.65 19.14 47.90Q18.92 48.14 18.78 48.50Q18.63 48.85 18.63 49.28L18.63 49.28L18.63 53.66L16.81 53.66L16.81 49.63Q16.81 48.67 16.68 48.02Q16.55 47.38 16.41 46.98L16.41 46.98Q16.23 46.51 16.02 46.22L16.02 46.22L17.46 45.65Q17.61 45.82 17.77 46.08L17.77 46.08Q17.90 46.30 18.02 46.61Q18.15 46.91 18.23 47.33L18.23 47.33Q18.55 46.40 19.16 45.99Q19.77 45.58 20.54 45.58L20.54 45.58Q20.90 45.58 21.22 45.67Q21.54 45.76 21.53 45.76L21.53 45.76L21.02 47.54Q21.03 47.54 20.83 47.45Q20.63 47.36 20.23 47.36L20.23 47.36ZM21.85 46.99L21.85 45.70L23.29 45.70L23.61 43.82L25.11 43.49L25.11 45.70L27.08 45.70L26.86 46.99L25.11 46.99L25.11 51.73Q25.11 52.14 25.34 52.26Q25.56 52.38 25.83 52.38L25.83 52.38Q26.06 52.38 26.28 52.35Q26.50 52.32 26.68 52.27L26.68 52.27Q26.89 52.22 27.08 52.16L27.08 52.16L27.38 53.36L27.24 53.41Q27.10 53.47 26.82 53.54Q26.54 53.62 26.16 53.67Q25.78 53.73 25.34 53.73L25.34 53.73Q24.89 53.73 24.51 53.63Q24.14 53.54 23.86 53.32Q23.59 53.10 23.44 52.77Q23.29 52.43 23.29 51.94L23.29 51.94L23.29 46.99L21.85 46.99ZM32.07 47.36Q31.78 47.36 31.50 47.50Q31.21 47.65 30.98 47.90Q30.76 48.14 30.62 48.50Q30.47 48.85 30.47 49.28L30.47 49.28L30.47 53.66L28.65 53.66L28.65 49.63Q28.65 48.67 28.52 48.02Q28.39 47.38 28.25 46.98L28.25 46.98Q28.07 46.51 27.86 46.22L27.86 46.22L29.30 45.65Q29.45 45.82 29.61 46.08L29.61 46.08Q29.74 46.30 29.86 46.61Q29.99 46.91 30.07 47.33L30.07 47.33Q30.39 46.40 31.00 45.99Q31.61 45.58 32.38 45.58L32.38 45.58Q32.74 45.58 33.06 45.67Q33.38 45.76 33.37 45.76L33.37 45.76L32.86 47.54Q32.87 47.54 32.67 47.45Q32.47 47.36 32.07 47.36L32.07 47.36ZM38.57 53.66L38.57 42.83L40.47 42.83L40.47 53.66L38.57 53.66ZM49.30 53.66L47.50 53.66L47.50 48.50Q47.50 47.82 47.26 47.42Q47.02 47.01 46.44 47.01L46.44 47.01Q46.07 47.01 45.73 47.19Q45.38 47.38 45.11 47.73Q44.84 48.08 44.67 48.58Q44.50 49.09 44.50 49.71L44.50 49.71L44.50 53.66L42.68 53.66L42.68 49.63Q42.68 48.67 42.55 48.02Q42.42 47.38 42.28 46.98L42.28 46.98Q42.10 46.51 41.90 46.22L41.90 46.22L43.34 45.65Q43.50 45.82 43.66 46.08L43.66 46.08Q43.78 46.30 43.91 46.63Q44.04 46.96 44.12 47.38L44.12 47.38Q44.54 46.42 45.32 45.99Q46.10 45.57 46.97 45.57L46.97 45.57Q48.20 45.57 48.75 46.31Q49.30 47.06 49.30 48.32L49.30 48.32L49.30 53.66ZM53.67 45.50L53.67 45.50Q54.14 45.50 54.58 45.60Q55.03 45.70 55.38 45.82L55.38 45.82Q55.80 45.97 56.15 46.13L56.15 46.13L55.61 47.38Q55.29 47.23 54.97 47.12L54.97 47.12Q54.70 47.02 54.37 46.94Q54.04 46.85 53.72 46.85L53.72 46.85Q53.35 46.85 53.09 47.02Q52.82 47.20 52.82 47.55L52.82 47.55Q52.82 48.46 54.15 48.98L54.15 48.98Q54.65 49.17 55.05 49.38Q55.45 49.60 55.73 49.89Q56.01 50.18 56.15 50.55Q56.30 50.93 56.30 51.44L56.30 51.44Q56.30 51.89 56.11 52.32Q55.93 52.75 55.57 53.09Q55.21 53.42 54.69 53.62Q54.17 53.82 53.51 53.82L53.51 53.82Q52.98 53.82 52.47 53.70Q51.96 53.58 51.55 53.44Q51.14 53.30 50.90 53.17L50.90 53.17L50.66 53.06L51.26 51.71L51.46 51.82Q51.67 51.95 51.99 52.10Q52.31 52.24 52.68 52.36Q53.05 52.48 53.35 52.48L53.35 52.48Q53.91 52.48 54.18 52.26Q54.46 52.03 54.46 51.66L54.46 51.66Q54.46 51.25 54.16 50.90Q53.86 50.56 53.27 50.34L53.27 50.34Q52.04 49.87 51.50 49.28Q50.97 48.69 50.97 47.74L50.97 47.74Q50.97 47.30 51.18 46.89Q51.38 46.48 51.74 46.17Q52.10 45.86 52.60 45.68Q53.10 45.50 53.67 45.50ZM59.88 56.88L58.06 57.20L58.06 49.63Q58.06 48.67 57.93 48.02Q57.80 47.38 57.66 46.98L57.66 46.98Q57.48 46.51 57.27 46.22L57.27 46.22L58.71 45.65Q58.90 45.84 59.06 46.13L59.06 46.13Q59.19 46.37 59.32 46.71Q59.45 47.06 59.51 47.52L59.51 47.52Q59.78 46.56 60.38 46.06Q60.97 45.57 62.02 45.57L62.02 45.57Q62.78 45.57 63.33 45.85Q63.88 46.13 64.24 46.65Q64.60 47.17 64.78 47.90Q64.95 48.64 64.95 49.54L64.95 49.54Q64.95 50.45 64.68 51.22Q64.41 52 63.90 52.56Q63.40 53.12 62.70 53.44Q61.99 53.76 61.13 53.76L61.13 53.76Q60.82 53.76 60.51 53.73Q60.20 53.70 59.88 53.66L59.88 53.66L59.88 56.88ZM61.72 46.85Q61.32 46.85 60.98 47.12Q60.65 47.39 60.40 47.84Q60.15 48.29 60.02 48.85Q59.88 49.41 59.88 50L59.88 50L59.88 52.30Q60.04 52.35 60.36 52.42Q60.68 52.48 60.92 52.48L60.92 52.48Q61.53 52.48 61.93 52.27Q62.33 52.06 62.57 51.70Q62.81 51.33 62.90 50.82Q63.00 50.30 63.00 49.70L63.00 49.70Q63.00 49.14 62.97 48.62Q62.94 48.11 62.80 47.71Q62.66 47.31 62.41 47.08Q62.15 46.85 61.72 46.85L61.72 46.85ZM66.09 49.87Q66.09 48.80 66.38 47.98Q66.68 47.17 67.20 46.62Q67.72 46.06 68.42 45.78Q69.13 45.50 69.94 45.50L69.94 45.50Q70.66 45.50 71.17 45.68Q71.67 45.86 71.99 46.16Q72.31 46.46 72.46 46.88Q72.62 47.30 72.62 47.78L72.62 47.78Q72.62 48.35 72.30 48.87Q71.98 49.39 71.38 49.78Q70.78 50.18 69.93 50.41Q69.08 50.64 68.02 50.66L68.02 50.66Q68.07 51.02 68.18 51.35Q68.28 51.68 68.48 51.93Q68.68 52.18 69.00 52.32Q69.32 52.46 69.80 52.46L69.80 52.46Q70.15 52.46 70.55 52.38Q70.95 52.30 71.29 52.19L71.29 52.19Q71.69 52.06 72.07 51.90L72.07 51.90L72.55 53.04Q72.14 53.25 71.66 53.41L71.66 53.41Q71.24 53.55 70.70 53.66Q70.15 53.78 69.54 53.78L69.54 53.78Q68.62 53.78 67.96 53.50Q67.30 53.22 66.89 52.70Q66.47 52.19 66.28 51.47Q66.09 50.75 66.09 49.87L66.09 49.87ZM69.80 46.75Q69.27 46.75 68.93 47Q68.58 47.25 68.38 47.64Q68.17 48.03 68.08 48.52Q67.99 49.01 67.98 49.50L67.98 49.50Q68.74 49.47 69.28 49.30Q69.82 49.14 70.15 48.89Q70.49 48.64 70.64 48.35Q70.79 48.06 70.79 47.78L70.79 47.78Q70.79 47.31 70.52 47.03Q70.25 46.75 69.80 46.75L69.80 46.75ZM79.48 46.59L78.46 47.57Q78.22 47.30 77.97 47.10Q77.72 46.91 77.30 46.91L77.30 46.91Q77.06 46.91 76.77 46.98Q76.47 47.06 76.22 47.34Q75.96 47.62 75.79 48.16Q75.62 48.70 75.62 49.63L75.62 49.63Q75.62 50.58 75.79 51.13Q75.96 51.68 76.22 51.98Q76.49 52.29 76.79 52.38Q77.10 52.46 77.38 52.46L77.38 52.46Q77.61 52.46 77.85 52.42Q78.09 52.38 78.31 52.33Q78.54 52.27 78.70 52.22Q78.87 52.18 78.95 52.14L78.95 52.14L79.40 53.30Q79.35 53.31 79.18 53.39Q79.02 53.47 78.73 53.55Q78.44 53.63 78.04 53.70Q77.64 53.78 77.14 53.78L77.14 53.78Q76.22 53.78 75.56 53.50Q74.90 53.22 74.48 52.70Q74.06 52.19 73.86 51.47Q73.66 50.75 73.66 49.87L73.66 49.87Q73.66 48.82 73.94 48Q74.22 47.18 74.71 46.63Q75.21 46.08 75.88 45.79Q76.55 45.50 77.32 45.50L77.32 45.50Q78.07 45.50 78.59 45.79Q79.11 46.08 79.48 46.59L79.48 46.59ZM79.82 46.99L79.82 45.70L81.26 45.70L81.58 43.82L83.08 43.49L83.08 45.70L85.05 45.70L84.82 46.99L83.08 46.99L83.08 51.73Q83.08 52.14 83.30 52.26Q83.53 52.38 83.80 52.38L83.80 52.38Q84.02 52.38 84.25 52.35Q84.47 52.32 84.65 52.27L84.65 52.27Q84.86 52.22 85.05 52.16L85.05 52.16L85.35 53.36L85.21 53.41Q85.06 53.47 84.78 53.54Q84.50 53.62 84.13 53.67Q83.75 53.73 83.30 53.73L83.30 53.73Q82.86 53.73 82.48 53.63Q82.10 53.54 81.83 53.32Q81.56 53.10 81.41 52.77Q81.26 52.43 81.26 51.94L81.26 51.94L81.26 46.99L79.82 46.99ZM89.40 45.50Q91.24 45.50 92.07 46.59Q92.90 47.68 92.90 49.58L92.90 49.58Q92.90 50.48 92.68 51.26Q92.46 52.03 92.00 52.60Q91.54 53.17 90.86 53.50Q90.17 53.82 89.26 53.82L89.26 53.82Q88.34 53.82 87.68 53.54Q87.02 53.26 86.58 52.74Q86.15 52.21 85.95 51.46Q85.75 50.70 85.75 49.76L85.75 49.76Q85.75 48.85 85.98 48.07Q86.20 47.30 86.66 46.73Q87.11 46.16 87.80 45.83Q88.49 45.50 89.40 45.50L89.40 45.50ZM89.24 46.85Q88.78 46.85 88.48 47.06Q88.18 47.26 88.02 47.64Q87.85 48.02 87.78 48.52Q87.72 49.02 87.72 49.60L87.72 49.60Q87.72 50.19 87.79 50.72Q87.86 51.25 88.06 51.64Q88.25 52.03 88.58 52.26Q88.90 52.48 89.42 52.48L89.42 52.48Q89.88 52.48 90.18 52.27Q90.47 52.06 90.64 51.69Q90.81 51.31 90.87 50.82Q90.94 50.32 90.94 49.74L90.94 49.74Q90.94 49.15 90.86 48.62Q90.79 48.10 90.60 47.70Q90.41 47.30 90.08 47.07Q89.75 46.85 89.24 46.85L89.24 46.85ZM98.07 47.36Q97.78 47.36 97.50 47.50Q97.21 47.65 96.98 47.90Q96.76 48.14 96.62 48.50Q96.47 48.85 96.47 49.28L96.47 49.28L96.47 53.66L94.65 53.66L94.65 49.63Q94.65 48.67 94.52 48.02Q94.39 47.38 94.25 46.98L94.25 46.98Q94.07 46.51 93.86 46.22L93.86 46.22L95.30 45.65Q95.45 45.82 95.61 46.08L95.61 46.08Q95.74 46.30 95.86 46.61Q95.99 46.91 96.07 47.33L96.07 47.33Q96.39 46.40 97.00 45.99Q97.61 45.58 98.38 45.58L98.38 45.58Q98.74 45.58 99.06 45.67Q99.38 45.76 99.37 45.76L99.37 45.76L98.86 47.54Q98.87 47.54 98.67 47.45Q98.47 47.36 98.07 47.36L98.07 47.36Z"
-    /></svg
-  >
-
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="h-7"
-    ><path d="m8 11 2 2 4-4" /><circle cx="11" cy="11" r="8" /><path
-      d="m21 21-4.3-4.3"
-    /></svg
-  >
-</div>
+      d="M3.66 7.300000000000001 l0 4.98 l3.86 0 c1.74 0 2.92 -0.64 2.92 -2.58 c0 -1.82 -1.24 -2.4 -2.84 -2.4 l-3.94 0 z M3.66 13.940000000000001 l0 6.06 l-1.94 0 l0 -14.36 l6.46 0 c2.66 0 4.26 1.72 4.26 4.04 c0 2 -1.14 4.26 -4.26 4.26 l-4.52 0 z M14.04 14.76 c0 -2.7 1.52 -5.52 4.86 -5.52 s4.86 2.82 4.86 5.52 s-1.52 5.52 -4.86 5.52 s-4.86 -2.82 -4.86 -5.52 z M15.86 14.76 c0 1.4 0.52 4 3.04 4 s3.04 -2.6 3.04 -4 s-0.52 -4 -3.04 -4 s-3.04 2.6 -3.04 4 z M27.76 13.92 l0 6.08 l-1.76 0 l0 -10.46 l1.66 0 l0 1.74 l0.04 0 c0.7 -1.22 1.62 -2.04 2.94 -2.04 c0.22 0 0.32 0.02 0.46 0.06 l0 1.82 l-0.66 0 c-1.64 0 -2.68 1.28 -2.68 2.8 z M36.26 11 l-1.68 0 l0 6.8 c0 0.82 0.7 0.82 1.06 0.82 l0.62 0 l0 1.38 c-0.64 0.06 -1.14 0.14 -1.32 0.14 c-1.74 0 -2.12 -0.98 -2.12 -2.24 l0 -6.9 l-1.42 0 l0 -1.46 l1.42 0 l0 -2.92 l1.76 0 l0 2.92 l1.68 0 l0 1.46 z M39.98 13.92 l0 6.08 l-1.76 0 l0 -10.46 l1.66 0 l0 1.74 l0.04 0 c0.7 -1.22 1.62 -2.04 2.94 -2.04 c0.22 0 0.32 0.02 0.46 0.06 l0 1.82 l-0.66 0 c-1.64 0 -2.68 1.28 -2.68 2.8 z M52.660000000000004 5.640000000000001 l0 14.36 l-1.94 0 l0 -14.36 l1.94 0 z M64.28 12.879999999999999 l0 7.12 l-1.76 0 l0 -6.44 c0 -1.82 -0.52 -2.74 -2.24 -2.74 c-1 0 -2.76 0.64 -2.76 3.48 l0 5.7 l-1.76 0 l0 -10.46 l1.66 0 l0 1.48 l0.04 0 c0.38 -0.56 1.36 -1.78 3.16 -1.78 c1.62 0 3.66 0.66 3.66 3.64 z M74.52000000000001 12.52 l-1.7 0 c-0.02 -0.66 -0.26 -1.76 -2.48 -1.76 c-0.54 0 -2.08 0.18 -2.08 1.48 c0 0.86 0.54 1.06 1.9 1.4 l1.76 0.44 c2.18 0.54 2.94 1.34 2.94 2.76 c0 2.16 -1.78 3.46 -4.14 3.46 c-4.14 0 -4.44 -2.4 -4.5 -3.66 l1.7 0 c0.06 0.82 0.3 2.14 2.78 2.14 c1.26 0 2.4 -0.5 2.4 -1.66 c0 -0.84 -0.58 -1.12 -2.08 -1.5 l-2.04 -0.5 c-1.46 -0.36 -2.42 -1.1 -2.42 -2.54 c0 -2.3 1.9 -3.34 3.96 -3.34 c3.74 0 4 2.76 4 3.28 z M78.42000000000002 15.26 c0 2.78 1.74 3.52 2.86 3.52 c1.92 0 2.82 -1.74 2.82 -4.04 c0 -1.34 -0.14 -3.92 -2.86 -3.92 c-2.54 0 -2.82 2.74 -2.82 4.44 z M76.74000000000001 24.14 l0 -14.6 l1.66 0 l0 1.48 l0.04 0 c0.42 -0.6 1.22 -1.78 3.12 -1.78 c2.78 0 4.36 2.28 4.36 5.22 c0 2.5 -1.04 5.84 -4.6 5.84 c-1.4 0 -2.32 -0.66 -2.78 -1.4 l-0.04 0 l0 5.24 l-1.76 0 z M95.12000000000002 16.72 l1.76 0 c-0.06 0.5 -0.54 1.98 -1.86 2.86 c-0.48 0.32 -1.16 0.72 -2.84 0.72 c-2.94 0 -4.68 -2.22 -4.68 -5.24 c0 -3.24 1.56 -5.82 5.02 -5.82 c3.02 0 4.5 2.4 4.5 6.1 l-7.64 0 c0 2.18 1.02 3.44 3.04 3.44 c1.66 0 2.64 -1.28 2.7 -2.06 z M89.38000000000002 13.940000000000001 l5.82 0 c-0.1 -1.62 -0.78 -3.12 -2.92 -3.12 c-1.62 0 -2.9 1.5 -2.9 3.12 z M107.36000000000001 13.059999999999999 l-1.7 0 c-0.22 -1.4 -1 -2.24 -2.48 -2.24 c-2.18 0 -2.88 2.08 -2.88 3.94 c0 1.8 0.44 4.02 2.86 4.02 c1.18 0 2.2 -0.88 2.5 -2.48 l1.7 0 c-0.18 1.66 -1.2 4 -4.26 4 c-2.94 0 -4.68 -2.22 -4.68 -5.24 c0 -3.24 1.56 -5.82 5.02 -5.82 c2.74 0 3.78 2 3.92 3.82 z M112.96000000000002 11 l-1.68 0 l0 6.8 c0 0.82 0.7 0.82 1.06 0.82 l0.62 0 l0 1.38 c-0.64 0.06 -1.14 0.14 -1.32 0.14 c-1.74 0 -2.12 -0.98 -2.12 -2.24 l0 -6.9 l-1.42 0 l0 -1.46 l1.42 0 l0 -2.92 l1.76 0 l0 2.92 l1.68 0 l0 1.46 z M114.08000000000003 14.76 c0 -2.7 1.52 -5.52 4.86 -5.52 s4.86 2.82 4.86 5.52 s-1.52 5.52 -4.86 5.52 s-4.86 -2.82 -4.86 -5.52 z M115.90000000000002 14.76 c0 1.4 0.52 4 3.04 4 s3.04 -2.6 3.04 -4 s-0.52 -4 -3.04 -4 s-3.04 2.6 -3.04 4 z M127.80000000000003 13.92 l0 6.08 l-1.76 0 l0 -10.46 l1.66 0 l0 1.74 l0.04 0 c0.7 -1.22 1.62 -2.04 2.94 -2.04 c0.22 0 0.32 0.02 0.46 0.06 l0 1.82 l-0.66 0 c-1.64 0 -2.68 1.28 -2.68 2.8 z"
+    ></path></g
+  ></svg
+>
diff --git a/tunnel/internal/client/dashboard/ui/src/lib/components/RenderContent.svelte b/tunnel/internal/client/dashboard/ui/src/lib/components/RenderContent.svelte
index 848321a5..981e9b6c 100644
--- a/tunnel/internal/client/dashboard/ui/src/lib/components/RenderContent.svelte
+++ b/tunnel/internal/client/dashboard/ui/src/lib/components/RenderContent.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import { currentRequest } from "$lib/store";
+  import Highlight from "svelte-highlight";
+  import json from "svelte-highlight/languages/json";
   import RenderFormUrlEncoded from "./RenderFormUrlEncoded.svelte";
   import RenderMultipartFormData from "./RenderMultipartFormData.svelte";
   import Button from "./ui/button/button.svelte";
@@ -38,7 +40,10 @@
     <div class="text-gray-500 dark:text-gray-400">No content</div>
   {:else if contentType.startsWith("application/json")}
     {#await loadResponse(`/api/tunnels/render/${$currentRequest?.ID}?type=${type}`) then response}
-      <pre class="text-sm">{JSON.stringify(JSON.parse(response), null, 2)}</pre>
+      <Highlight
+        language={json}
+        code={JSON.stringify(JSON.parse(response), null, 2)}
+      />
     {/await}
   {:else if contentType.startsWith("application/x-www-form-urlencoded")}
     {#await loadResponse(`/api/tunnels/render/${$currentRequest?.ID}?type=${type}`) then response}
diff --git a/tunnel/internal/client/dashboard/ui/src/lib/components/RenderFormUrlEncoded.svelte b/tunnel/internal/client/dashboard/ui/src/lib/components/RenderFormUrlEncoded.svelte
index e585cee3..cafb206a 100644
--- a/tunnel/internal/client/dashboard/ui/src/lib/components/RenderFormUrlEncoded.svelte
+++ b/tunnel/internal/client/dashboard/ui/src/lib/components/RenderFormUrlEncoded.svelte
@@ -19,7 +19,7 @@
       <Label for={key} class="font-normal">{decodeURIComponent(key)}</Label>
       <Input
         value={decodeURIComponent(value)}
-        class="outline-none ring-0 border-none w-1/2 overflow-auto bg-[#FBFBFB]"
+        class="outline-none ring-0 w-1/2 overflow-auto bg-white border"
         readonly
       ></Input>
     </div>
diff --git a/tunnel/internal/client/dashboard/ui/src/lib/components/RenderMultipartFormData.svelte b/tunnel/internal/client/dashboard/ui/src/lib/components/RenderMultipartFormData.svelte
index 851c4395..abf8282a 100644
--- a/tunnel/internal/client/dashboard/ui/src/lib/components/RenderMultipartFormData.svelte
+++ b/tunnel/internal/client/dashboard/ui/src/lib/components/RenderMultipartFormData.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { currentRequest } from "$lib/store";
   import { onMount } from "svelte";
-  import Label from "./ui/label/label.svelte";
-  import Input from "./ui/input/input.svelte";
   import Button from "./ui/button/button.svelte";
+  import Input from "./ui/input/input.svelte";
+  import Label from "./ui/label/label.svelte";
 
   let formData,
     data = {};
@@ -52,7 +52,7 @@
         {:else}
           <Input
             {value}
-            class="outline-none ring-0 border-none w-1/2 overflow-auto bg-[#FBFBFB]"
+            class="outline-none ring-0 w-1/2 overflow-auto bg-white border"
             readonly
           ></Input>
         {/if}
diff --git a/tunnel/internal/client/dashboard/ui/src/lib/types.d.ts b/tunnel/internal/client/dashboard/ui/src/lib/types.d.ts
index 78ad7996..cb3f6861 100644
--- a/tunnel/internal/client/dashboard/ui/src/lib/types.d.ts
+++ b/tunnel/internal/client/dashboard/ui/src/lib/types.d.ts
@@ -16,4 +16,5 @@ export type Request = {
   ResponseBody: string;
   IsReplayed: boolean;
   ParentID: string;
+  LoggedAt: string;
 };
diff --git a/tunnel/internal/client/dashboard/ui/src/lib/utils.ts b/tunnel/internal/client/dashboard/ui/src/lib/utils.ts
index 230a1fbd..174aae0c 100644
--- a/tunnel/internal/client/dashboard/ui/src/lib/utils.ts
+++ b/tunnel/internal/client/dashboard/ui/src/lib/utils.ts
@@ -1,62 +1,89 @@
 import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
 import { cubicOut } from "svelte/easing";
 import type { TransitionConfig } from "svelte/transition";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs));
 }
 
 type FlyAndScaleParams = {
-    y?: number;
-    x?: number;
-    start?: number;
-    duration?: number;
+  y?: number;
+  x?: number;
+  start?: number;
+  duration?: number;
 };
 
 export const flyAndScale = (
-    node: Element,
-    params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+  node: Element,
+  params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
 ): TransitionConfig => {
-    const style = getComputedStyle(node);
-    const transform = style.transform === "none" ? "" : style.transform;
-
-    const scaleConversion = (
-        valueA: number,
-        scaleA: [number, number],
-        scaleB: [number, number]
-    ) => {
-        const [minA, maxA] = scaleA;
-        const [minB, maxB] = scaleB;
-
-        const percentage = (valueA - minA) / (maxA - minA);
-        const valueB = percentage * (maxB - minB) + minB;
-
-        return valueB;
-    };
-
-    const styleToString = (
-        style: Record<string, number | string | undefined>
-    ): string => {
-        return Object.keys(style).reduce((str, key) => {
-            if (style[key] === undefined) return str;
-            return str + `${key}:${style[key]};`;
-        }, "");
-    };
-
-    return {
-        duration: params.duration ?? 200,
-        delay: 0,
-        css: (t) => {
-            const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
-            const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
-            const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
-
-            return styleToString({
-                transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
-                opacity: t
-            });
-        },
-        easing: cubicOut
-    };
-};
\ No newline at end of file
+  const style = getComputedStyle(node);
+  const transform = style.transform === "none" ? "" : style.transform;
+
+  const scaleConversion = (
+    valueA: number,
+    scaleA: [number, number],
+    scaleB: [number, number]
+  ) => {
+    const [minA, maxA] = scaleA;
+    const [minB, maxB] = scaleB;
+
+    const percentage = (valueA - minA) / (maxA - minA);
+    const valueB = percentage * (maxB - minB) + minB;
+
+    return valueB;
+  };
+
+  const styleToString = (
+    style: Record<string, number | string | undefined>
+  ): string => {
+    return Object.keys(style).reduce((str, key) => {
+      if (style[key] === undefined) return str;
+      return str + `${key}:${style[key]};`;
+    }, "");
+  };
+
+  return {
+    duration: params.duration ?? 200,
+    delay: 0,
+    css: (t) => {
+      const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+      const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+      const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+      return styleToString({
+        transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+        opacity: t,
+      });
+    },
+    easing: cubicOut,
+  };
+};
+
+export const convertDateToHumanReadable = (input: Date | string) => {
+  let date;
+  if (typeof input === "string") {
+    date = new Date(input);
+  } else {
+    date = input;
+  }
+
+  const dateOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  };
+
+  const timeOptions = {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    hour12: true,
+  };
+
+  const formattedDate = date.toLocaleDateString("en-US", dateOptions);
+  const formattedTime = date.toLocaleTimeString("en-US", timeOptions);
+
+  return `${formattedDate} at ${formattedTime}`;
+};
diff --git a/tunnel/internal/client/dashboard/ui/src/pages/Home.svelte b/tunnel/internal/client/dashboard/ui/src/pages/Home.svelte
index f7be0934..d8684c84 100644
--- a/tunnel/internal/client/dashboard/ui/src/pages/Home.svelte
+++ b/tunnel/internal/client/dashboard/ui/src/pages/Home.svelte
@@ -20,7 +20,9 @@
   });
 </script>
 
-<div class="h-screen place-items-center w-[600px] mx-auto py-8 items-center">
+<div
+  class="place-items-center w-1/4 border mx-auto h-[750px] items-center overflow-auto my-12 rounded-lg"
+>
   <Table.Root>
     <Table.Header>
       <Table.Row>
@@ -32,9 +34,9 @@
       {#each tunnels as tunnel, i (i)}
         <Table.Row
           on:click={() => gotoTunnel(tunnel)}
-          class="hover:cursor-pointer"
+          class="hover:cursor-pointer hover:bg-gray-100"
         >
-          <Table.Cell class="font-medium">{tunnel.Subdomain}</Table.Cell>
+          <Table.Cell class="">{tunnel.Subdomain}</Table.Cell>
           <Table.Cell class="text-right">{tunnel.Localport}</Table.Cell>
         </Table.Row>
       {/each}
diff --git a/tunnel/internal/client/dashboard/ui/src/pages/Inspect.svelte b/tunnel/internal/client/dashboard/ui/src/pages/Inspect.svelte
index 6af36eab..98f1edf4 100644
--- a/tunnel/internal/client/dashboard/ui/src/pages/Inspect.svelte
+++ b/tunnel/internal/client/dashboard/ui/src/pages/Inspect.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import { onDestroy, onMount } from "svelte";
   // @ts-ignore
+  import HttpBadge from "$lib/components/HttpBadge.svelte";
+  import InspectorIcon from "$lib/components/InspectorIcon.svelte";
   import { currentRequest } from "$lib/store";
   import type { Request } from "$lib/types";
   import HttpStatus from "http-status-codes";
+  import { RefreshCw } from "lucide-svelte";
   import { Link } from "svelte-routing";
   import RequestDetails from "./RequestDetails.svelte";
-  import InspectorIcon from "$lib/components/InspectorIcon.svelte";
-  import { Repeat } from "lucide-svelte";
 
   export let id: string;
 
@@ -91,24 +92,24 @@
     <div
       class="w-80 border-r overflow-y-auto dark:border-gray-800 bg-white dark:bg-gray-800"
     >
-      <div class="p-4 space-y-2">
+      <div>
         {#each filteredRequests as request, i (i)}
           <!-- svelte-ignore a11y-click-events-have-key-events -->
           <!-- svelte-ignore a11y-no-static-element-interactions -->
           <div
-            class="p-4 rounded-md border transition-all hover:bg-accent {$currentRequest?.ID ===
+            class="p-4 space-y-1 border-b transition-all hover:bg-accent {$currentRequest?.ID ===
             request.ID
-              ? 'border bg-[#F4F4F5]'
-              : 'border-muted'} dark:bg-gray-700 m-1 hover:cursor-pointer space-y-2"
+              ? 'bg-[#F4F4F5]'
+              : 'border-muted'} dark:bg-gray-700 hover:cursor-pointer"
             on:click={() => setCurrentRequest(request)}
           >
             <div
               class="text-sm text-gray-800 dark:text-gray-200 flex justify-between items-center text-clip"
             >
               <span class="flex items-center gap-2">
-                {request.Method}
+                <HttpBadge method={request.Method} />
                 {#if request.IsReplayed}
-                  <Repeat class="w-4 h-4" />
+                  <RefreshCw class="w-3 h-3" />
                 {/if}
               </span>
               <span class="overflow-clip h-6 w-40 text-right"
diff --git a/tunnel/internal/client/dashboard/ui/src/pages/RequestDetails.svelte b/tunnel/internal/client/dashboard/ui/src/pages/RequestDetails.svelte
index e5ce3fad..48287571 100644
--- a/tunnel/internal/client/dashboard/ui/src/pages/RequestDetails.svelte
+++ b/tunnel/internal/client/dashboard/ui/src/pages/RequestDetails.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
-  import { currentRequest } from "$lib/store";
+  import HttpBadge from "$lib/components/HttpBadge.svelte";
+  import RenderContent from "$lib/components/RenderContent.svelte";
   import { Button } from "$lib/components/ui/button";
+  import { currentRequest } from "$lib/store";
+  import { convertDateToHumanReadable } from "$lib/utils";
+  import { Loader, Play } from "lucide-svelte";
+  import Highlight from "svelte-highlight";
+  import json from "svelte-highlight/languages/json";
+  import atomonelight from "svelte-highlight/styles/atom-one-light";
   import { toast } from "svelte-sonner";
-  import { RotateCw } from "lucide-svelte";
-  import { Play } from "lucide-svelte";
-  import RenderContent from "$lib/components/RenderContent.svelte";
 
   const convertJsonToSingleValue = (data: any) => {
     const jsonKeyValue: any = {};
@@ -39,21 +43,34 @@
   };
 </script>
 
+<svelte:head>
+  {@html atomonelight}
+</svelte:head>
+
 <div class="flex-1 p-6 overflow-y-auto bg-white dark:bg-gray-800">
   <h2
-    class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200 flex justify-between"
+    class="text-xl font-medium text-gray-800 dark:text-gray-200 flex justify-between"
   >
     <div class="flex space-x-4 items-center">
-      <div class="font-normal">{$currentRequest?.Method}</div>
-      <div><code class="font-light text-lg">{$currentRequest?.Url}</code></div>
+      <HttpBadge method={$currentRequest?.Method} />
+      <div>
+        <p class="font-light text-lg">{$currentRequest?.Url}</p>
+      </div>
     </div>
     <div class="flex items-center gap-2">
-      <Button on:click={viewParent} disabled={$currentRequest?.ParentID === ""}>
-        <p class="text-sm">View parent</p>
-      </Button>
-      <Button variant="outline" disabled={replaying} on:click={replayRequest}>
+      {#if $currentRequest?.ParentID !== ""}
+        <Button on:click={viewParent}>
+          <p class="text-sm">View parent</p>
+        </Button>
+      {/if}
+      <Button
+        variant="outline"
+        class="shadow-md"
+        disabled={replaying}
+        on:click={replayRequest}
+      >
         {#if replaying}
-          <RotateCw class="mr-2 w-4 h-4 animate-spin" />
+          <Loader class="mr-2 w-4 h-4 animate-spin" />
         {:else}
           <Play class="mr-2 w-4 h-4" />
         {/if}
@@ -61,48 +78,66 @@
       </Button>
     </div>
   </h2>
+  <div>
+    {#if $currentRequest?.LoggedAt}
+      <p class="font-light mb-4">
+        {convertDateToHumanReadable($currentRequest.LoggedAt)}
+      </p>
+    {/if}
+  </div>
   <div class="space-y-6">
     <div>
-      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">
         Request Headers
       </h3>
-      <div class="rounded-md bg-[#F4F4F5] dark:bg-gray-700 p-4 mt-2">
-        <pre
-          class="text-sm font-mono text-gray-800 dark:text-gray-200 text-wrap break-words">{JSON.stringify(
+      <div class="rounded-md bg-[#FAFAFA] border dark:bg-gray-700 p-4 mt-2">
+        <Highlight
+          language={json}
+          code={JSON.stringify(
             convertJsonToSingleValue($currentRequest?.Headers),
             null,
             2
-          )}</pre>
+          )}
+        />
       </div>
     </div>
     <div>
-      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">
         Request Body
       </h3>
-      <div class="rounded-md bg-[#F4F4F5] dark:bg-gray-700 p-4 mt-2">
+      <div class="rounded-md bg-[#FAFAFA] border dark:bg-gray-700 p-4 mt-2">
         <RenderContent type="request" />
       </div>
     </div>
     <div>
-      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">
         Response Headers
       </h3>
-      <div class="rounded-md bg-[#F4F4F5] dark:bg-gray-700 p-4 mt-2">
-        <pre
-          class="text-sm font-mono text-gray-800 dark:text-gray-200 text-wrap break-words">{JSON.stringify(
+      <div class="rounded-md bg-[#FAFAFA] border dark:bg-gray-700 p-4 mt-2">
+        <Highlight
+          language={json}
+          code={JSON.stringify(
             convertJsonToSingleValue($currentRequest?.ResponseHeaders),
             null,
             2
-          )}</pre>
+          )}
+        />
       </div>
     </div>
     <div>
-      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
+      <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">
         Response Body
       </h3>
-      <div class="rounded-md bg-[#F4F4F5] p-4 mt-2">
+      <div class="rounded-md bg-[#FAFAFA] border p-4 mt-2">
         <RenderContent type="response" />
       </div>
     </div>
   </div>
 </div>
+
+<style>
+  :global(.hljs) {
+    font-size: 14px !important;
+    padding: 16px !important;
+  }
+</style>