chore: update the server page layout

web/src/routes/[serverId]/+layout.svelte

@@ -1,19 +1,7 @@
 <script>
-  import { Button } from '$lib/components/ui/button';
   import BasePage from '$lib/components/page/BasePage.svelte';
 </script>
 
 <BasePage showLogout={true}>
-  <div class="py-3 px-2">
-    <a href="/" title="Home">
-      <Button variant="outline" class="leading-none px-3 space-x-2.5">
-        <i class="far fa-arrow-left"></i>
-        <span> Back to Home </span>
-      </Button>
-    </a>
-  </div>
-
-  <div class="space-y-3.5">
   <slot />
-  </div>
 </BasePage>

web/src/routes/[serverId]/+page.svelte

@@ -83,18 +83,27 @@
   });
 </script>
 
-<Card>
+<div class="flex items-center gap-2 py-4 px-2 leading-none">
+  <a
+    href="/"
+    title="Home"
+    class="space-x-1 font-bold text-sm text-primary hover:text-primary/80 tracking-tight"
+  >
+    <i class="fa-solid fa-chevron-left"></i>
+    <span> Back to Home </span>
+  </a>
+  <i class="fa-regular fa-slash-forward"></i>
+  <span class="mb-0.5"> {data.server.name} </span>
+</div>
+
+
+<div class="space-y-3.5">
+  <Card>
     <CardHeader>
       <CardTitle>Server</CardTitle>
     </CardHeader>
 
     <CardContent>
-    <DetailRow label={'Name'}>
-      <CopiableText value={data.server.name}>
-        {data.server.name}
-      </CopiableText>
-    </DetailRow>
-
       {#if data.server.tor}
         <DetailRow label={'Mode'}>
           <Badge variant="tor">Tor</Badge>
@@ -170,9 +179,9 @@
         >
       {/if}
     </CardFooter>
-</Card>
+  </Card>
 
-<Card>
+  <Card>
     <CardHeader class="flex flex-row items-center justify-between">
       <CardTitle>Clients</CardTitle>
     </CardHeader>
@@ -203,4 +212,5 @@
         <Button size="sm" builders={[builder]}>Add Client</Button>
       </CreatePeerDialog>
     </CardFooter>
-</Card>
+  </Card>
+</div>