problem: invalid base path

src/components/Menu.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { Badge } from '@/components/ui/badge';
 	import Separator from '@/components/ui/separator/separator.svelte';
@@ -19,7 +20,7 @@
 </script>
 
 <a
-	href="/rockets"
+	href="{base}/rockets"
 	class={getClass("rockets")}
 >
 	<Rocket class={iconClass} />

src/layouts/SidePanelLayout.svelte

@@ -11,6 +11,7 @@
     import { Rocket } from "lucide-svelte";
     import NewMenu from "../components/Menu.svelte";
     import RocketPillCard from "../components/RocketPillCard.svelte";
+	import { base } from "$app/paths";
 
     export let title = ""
   
@@ -19,7 +20,7 @@
   <div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
     <div class="hidden border-r bg-muted/40 md:block">
       <div class="flex h-full max-h-screen flex-col gap-2">
-        <div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+        <div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
           <a href="{base}/" class="flex items-center gap-2 font-semibold">
             <Rocket class="h-6 w-6" />
             <span class="">Nostrocket LFG</span>

src/views/n00b/N00b.svelte

@@ -4,6 +4,7 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { Switch } from '$lib/components/ui/switch/index.js';
+	import { base } from '$app/paths';
 
 	const notifications = [
 		{
@@ -29,7 +30,7 @@
 					<Card.Title>Proof of Work</Card.Title>
 					<Card.Description>I have skills, and I want sats.</Card.Description>
 				</Card.Header>
-        <img src="/a.png" />
+        <img src="{base}/a.png" />
 				<Card.Content class="grid gap-4">
 					<div>
 						<ul class="ml-6 list-disc [&>li]:mt-2">
@@ -51,7 +52,7 @@
 					<Card.Description>I have Sats, and I want a slice of a Rocket's satflow.</Card.Description
 					>
 				</Card.Header>
-        <img src="/scrooge.png" width="100%" />
+        <img src="{base}/scrooge.png" width="100%" />
 				<Card.Content class="grid gap-4">
 					<div>
 						<ul class="ml-6 list-disc [&>li]:mt-2">
@@ -76,7 +77,7 @@
 						>I have an open source project or product and I want other people to work on it with me.</Card.Description
 					>
 				</Card.Header>
-        <img src="/rocket.jpg" width="100%" />
+        <img src="{base}/rocket.jpg" width="100%" />
 				<Card.Content class="grid gap-4">
 					<div>
             <ul class="ml-6 list-disc [&>li]:mt-2">