diff --git a/.gitignore b/.gitignore
index 68a6ec9..e04bd29 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,5 @@ build
 *.njsproj
 *.sln
 *.sw?
+
+src/bindings.ts
diff --git a/package.json b/package.json
index ac40299..187d069 100644
--- a/package.json
+++ b/package.json
@@ -15,10 +15,13 @@
         "release": "standard-version"
     },
     "dependencies": {
+        "@fortawesome/free-brands-svg-icons": "^6.4.0",
+        "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@tauri-apps/api": "^1.4.0",
         "class-variance-authority": "^0.6.1",
         "prettier": "^2.8.8",
         "prettier-plugin-svelte": "^2.10.1",
+        "svelte-fa": "^3.0.4",
         "tailwind-merge": "^1.13.2"
     },
     "devDependencies": {
@@ -37,6 +40,7 @@
         "svelte": "^4.0.0",
         "svelte-check": "^3.4.3",
         "svelte-preprocess": "^5.0.3",
+        "svelte-routing": "^1.10.0",
         "tailwind-scrollbar": "^3.0.4",
         "tailwindcss": "^3.3.1",
         "tslib": "^2.4.1",
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index bbec553..c88133e 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,46 +1,46 @@
 {
-  "build": {
-    "beforeDevCommand": "yarn dev:client",
-    "beforeBuildCommand": "yarn build:client",
-    "devPath": "http://localhost:1420",
-    "distDir": "../build",
-    "withGlobalTauri": true
-  },
-  "package": {
-    "productName": "huehuehue",
-    "version": "0.0.5"
-  },
-  "tauri": {
-    "allowlist": {
-      "all": false,
-      "shell": {
-        "all": false,
-        "open": true
-      }
+    "build": {
+        "beforeDevCommand": "yarn dev:client",
+        "beforeBuildCommand": "yarn build:client",
+        "devPath": "http://localhost:1420",
+        "distDir": "../build",
+        "withGlobalTauri": true
     },
-    "bundle": {
-      "active": true,
-      "targets": "all",
-      "identifier": "com.huehuehue.dev",
-      "icon": [
-        "icons/32x32.png",
-        "icons/128x128.png",
-        "icons/128x128@2x.png",
-        "icons/icon.icns",
-        "icons/icon.ico"
-      ]
+    "package": {
+        "productName": "huehuehue",
+        "version": "0.0.5"
     },
-    "security": {
-      "csp": null
-    },
-    "windows": [
-      {
-        "fullscreen": false,
-        "resizable": true,
-        "title": "huehuehue",
-        "width": 800,
-        "height": 600
-      }
-    ]
-  }
+    "tauri": {
+        "allowlist": {
+            "all": false,
+            "shell": {
+                "all": false,
+                "open": true
+            }
+        },
+        "bundle": {
+            "active": true,
+            "targets": "all",
+            "identifier": "com.huehuehue.dev",
+            "icon": [
+                "icons/32x32.png",
+                "icons/128x128.png",
+                "icons/128x128@2x.png",
+                "icons/icon.icns",
+                "icons/icon.ico"
+            ]
+        },
+        "security": {
+            "csp": null
+        },
+        "windows": [
+            {
+                "fullscreen": false,
+                "resizable": true,
+                "title": "huehuehue",
+                "width": 800,
+                "height": 600
+            }
+        ]
+    }
 }
diff --git a/src/.gitignore b/src/.gitignore
deleted file mode 100644
index 73ed9e9..0000000
--- a/src/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-bindings.ts
diff --git a/src/lib/Greet.svelte b/src/lib/Greet.svelte
deleted file mode 100644
index 3fcf415..0000000
--- a/src/lib/Greet.svelte
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-    import { getDiscoveredBridges } from '../bindings';
-    const discoveredBridgesPromise = getDiscoveredBridges();
-</script>
-
-<div>
-    {#await discoveredBridgesPromise}
-        <h1 class="text-4xl bg-nebula-400 text-snow-500">hello world!</h1>
-        <p class="text-black">loading...</p>
-    {:then discoveredBridges}
-        <ul>
-            {#each discoveredBridges as [mdns, ip]}
-                <li>{`${mdns} - ${ip}`}</li>
-            {/each}
-        </ul>
-    {:catch error}
-        <p class="text-black">error: {error.message}</p>
-    {/await}
-</div>
diff --git a/src/lib/components/discovery/BridgesList.svelte b/src/lib/components/discovery/BridgesList.svelte
new file mode 100644
index 0000000..82c98e9
--- /dev/null
+++ b/src/lib/components/discovery/BridgesList.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import BridgesListItem from './BridgesListItem.svelte';
+
+    export let bridges: [string, string][];
+    export let selected: [string, string] | undefined = undefined;
+    export let onSelectedBridge: (bridge: [string, string]) => void;
+</script>
+
+<ul class="bg-ink-500 p-3 rounded-lg flex flex-col gap-1">
+    {#each bridges as [mdns, ip]}
+        <BridgesListItem
+            {mdns}
+            {ip}
+            onSelect={onSelectedBridge}
+            isSelected={selected && selected[0] === mdns && selected[1] === ip}
+        />
+    {/each}
+    <BridgesListItem
+        mdns="0017884119b9.local"
+        ip="192.168.1.219"
+        onSelect={onSelectedBridge}
+        isSelected={selected &&
+            selected[0] === '0017884119b9.local' &&
+            selected[1] === '192.168.1.219'}
+    />
+    <BridgesListItem
+        mdns="0017884119ba.local"
+        ip="192.168.1.220"
+        onSelect={onSelectedBridge}
+        isSelected={selected &&
+            selected[0] === '0017884119ba.local' &&
+            selected[1] === '192.168.1.220'}
+    />
+    <BridgesListItem
+        mdns="0017884119bb.local"
+        ip="192.168.1.221"
+        onSelect={onSelectedBridge}
+        isSelected={selected &&
+            selected[0] === '0017884119bb.local' &&
+            selected[1] === '192.168.1.221'}
+    />
+</ul>
diff --git a/src/lib/components/discovery/BridgesListItem.svelte b/src/lib/components/discovery/BridgesListItem.svelte
new file mode 100644
index 0000000..d342e12
--- /dev/null
+++ b/src/lib/components/discovery/BridgesListItem.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+    import Checkbox from '../primitives/Checkbox.svelte';
+    import Typeface from '../primitives/Typeface.svelte';
+
+    export let mdns: string;
+    export let ip: string;
+    export let isSelected: boolean = false;
+    export let onSelect: (bridge: [string, string]) => void;
+</script>
+
+<li>
+    <button
+        class="w-full flex flex-row items-center px-2 py-1 rounded-md hover:bg-ink-600
+cursor-pointer transition-colors"
+        on:click={() => onSelect([mdns, ip])}
+    >
+        <Typeface
+            >{ip}
+            <Typeface class="inline-flex opacity-50" size="sm"
+                >({mdns})</Typeface
+            ></Typeface
+        >
+        <Checkbox checked={isSelected} shadow class="ml-auto" />
+    </button>
+</li>
diff --git a/src/lib/components/primitives/Button.svelte b/src/lib/components/primitives/Button.svelte
new file mode 100644
index 0000000..46115c0
--- /dev/null
+++ b/src/lib/components/primitives/Button.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+    import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+    import { cva, type VariantProps } from 'class-variance-authority';
+    import Fa from 'svelte-fa/src/fa.svelte';
+    import type { HTMLButtonAttributes } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import Icon from './Icon.svelte';
+
+    let styling = cva('transition-all px-4 py-2 font-semibold', {
+        variants: {
+            variant: {
+                dark: 'bg-ink-500 enabled:hover:bg-ink-600 text-snow-500',
+                light: 'bg-snow-500 enabled:hover:bg-snow-600 text-ink-400',
+                nebula: 'bg-nebula-500 enabled:hover:bg-nebula-600 text-ink-400',
+                nebulaSlightGradient:
+                    'bg-gradient-to-br from-nebula-400 to-nebula-600 hover:brightness-110',
+            },
+            rounding: {
+                full: 'rounded-full',
+                xl: 'rounded-xl',
+                lg: 'rounded-lg',
+                md: 'rounded-md',
+            },
+            size: {
+                lg: 'text-base',
+                md: 'text-sm tracking-wide',
+            },
+            fullWidth: {
+                true: 'w-full grow',
+            },
+            disabled: {
+                true: 'contrast-75 opacity-80',
+            },
+            shadow: {
+                true: 'shadow-md shadow-deepDark/10',
+            },
+        },
+        defaultVariants: {
+            variant: 'dark',
+            rounding: 'lg',
+            size: 'lg',
+        },
+    });
+
+    /**
+     * This defines the props for this component.
+     * NOTE: 'disabled' is omit from the cva to use the actual button disabled prop.
+     */
+    interface $$Props
+        extends Partial<HTMLButtonAttributes>,
+            Omit<VariantProps<typeof styling>, 'disabled'> {
+        icon?: IconDefinition;
+        iconOnRight?: boolean;
+        label: string;
+        fullWidth?: boolean;
+    }
+
+    export let icon: $$Props['icon'] = undefined;
+    export let iconOnRight: $$Props['iconOnRight'] = false;
+    export let label: $$Props['label'] = '';
+    export let disabled: $$Props['disabled'] = false;
+    export let fullWidth: $$Props['fullWidth'] = false;
+    export let variant: $$Props['variant'] = 'dark';
+    export let rounding: $$Props['rounding'] = 'lg';
+    export let size: $$Props['size'] = 'lg';
+    export let shadow: $$Props['shadow'] = false;
+</script>
+
+<button
+    on:click
+    {...$$props}
+    class={styling({
+        variant,
+        rounding,
+        fullWidth,
+        disabled,
+        size,
+        shadow,
+        class: $$props.class,
+    })}
+>
+    <span
+        class={twMerge(
+            'flex flex-row gap-2 items-center justify-center',
+            iconOnRight ? 'flex-row-reverse' : ''
+        )}
+    >
+        <Icon {icon} variant={variant === 'dark' ? 'light' : 'dark'} />
+        {label}</span
+    >
+</button>
diff --git a/src/lib/components/primitives/Checkbox.svelte b/src/lib/components/primitives/Checkbox.svelte
new file mode 100644
index 0000000..cff723c
--- /dev/null
+++ b/src/lib/components/primitives/Checkbox.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+    import { faCheck } from '@fortawesome/free-solid-svg-icons';
+    import { cva, type VariantProps } from 'class-variance-authority';
+    import Icon from './Icon.svelte';
+
+    let styling = cva(
+        'aspect-square flex items-center justify-center rounded-sm',
+        {
+            variants: {
+                variant: {
+                    dark: 'bg-ink-400 text-nebula-500',
+                    light: 'bg-snow-500 text-ink-500',
+                    nebula: 'bg-nebula-500 text-ink-400',
+                },
+                checked: {
+                    true: 'bg-opacity-100 hover:bg-opacity-75',
+                    false: 'bg-opacity-0 hover:bg-opacity-40',
+                },
+                outline: {
+                    true: 'border-2',
+                },
+                size: {
+                    md: 'h-5 w-5',
+                    lg: 'h-6 w-6',
+                },
+                shadow: {
+                    true: 'shadow-md shadow-deepDark/10',
+                },
+            },
+            defaultVariants: {
+                outline: true,
+                variant: 'nebula',
+                size: 'md',
+            },
+            compoundVariants: [
+                {
+                    variant: 'dark',
+                    outline: true,
+                    class: 'border-ink-400',
+                },
+                {
+                    variant: 'light',
+                    outline: true,
+                    class: 'border-snow-500',
+                },
+                {
+                    variant: 'nebula',
+                    outline: true,
+                    class: 'border-nebula-500',
+                },
+            ],
+        }
+    );
+
+    interface $$Props extends VariantProps<typeof styling> {
+        checked: boolean;
+        class?: string;
+    }
+
+    export let checked: $$Props['checked'] = true;
+    export let variant: $$Props['variant'] = 'nebula';
+    export let outline: $$Props['outline'] = true;
+    export let size: $$Props['size'] = 'md';
+    export let shadow: $$Props['shadow'] = false;
+</script>
+
+<div
+    class={styling({
+        variant,
+        outline,
+        size,
+        checked,
+        shadow,
+        class: $$props.class,
+    })}
+>
+    {#if checked}
+        <Icon icon={faCheck} variant={variant === 'dark' ? 'light' : 'dark'} />
+    {/if}
+</div>
diff --git a/src/lib/components/primitives/Icon.svelte b/src/lib/components/primitives/Icon.svelte
new file mode 100644
index 0000000..82df3d9
--- /dev/null
+++ b/src/lib/components/primitives/Icon.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+    import { cva, type VariantProps } from 'class-variance-authority';
+    // @ts-ignore
+    import Fa from 'svelte-fa/src/fa.svelte';
+    import type { IconSize } from './types';
+
+    const styling = cva('transition-colors', {
+        variants: {
+            variant: {
+                light: 'text-snow-500',
+                dark: 'text-ink-400',
+                nebula: 'text-nebula-500',
+            },
+        },
+    });
+
+    interface $$Props extends VariantProps<typeof styling> {
+        icon?: IconDefinition;
+        class?: string;
+        size?: IconSize;
+    }
+
+    export let icon: $$Props['icon'] = undefined;
+    export let variant: $$Props['variant'] = 'dark';
+    export let size: $$Props['size'] = '1x';
+</script>
+
+{#if icon}
+    <Fa {icon} {size} fw class={styling({ variant, class: $$props.class })} />
+{/if}
diff --git a/src/lib/components/primitives/Input.svelte b/src/lib/components/primitives/Input.svelte
new file mode 100644
index 0000000..ef1ed8f
--- /dev/null
+++ b/src/lib/components/primitives/Input.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { cva } from 'class-variance-authority';
+
+    let styling = cva('transition-colors', {
+        variants: {},
+    });
+
+    export let value: string = '';
+</script>
+
+<input {value} />
diff --git a/src/lib/components/primitives/LoadingIndicator.svelte b/src/lib/components/primitives/LoadingIndicator.svelte
new file mode 100644
index 0000000..7b42ac0
--- /dev/null
+++ b/src/lib/components/primitives/LoadingIndicator.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
+    import { twMerge } from 'tailwind-merge';
+    import Icon from './Icon.svelte';
+    import Typeface from './Typeface.svelte';
+    import type { IconSize, TypefaceSize } from './types';
+
+    export let iconSize: IconSize = '2x';
+    export let label: string | undefined = undefined;
+    export let labelSize: TypefaceSize = 'sm';
+    export let layout: 'row' | 'col' = 'col';
+</script>
+
+<span
+    class={twMerge(
+        'flex gap-3 items-center justify-center',
+        layout === 'row' ? 'flex-row' : 'flex-col'
+    )}
+>
+    <Icon
+        variant="light"
+        size={iconSize}
+        icon={faCircleNotch}
+        class="animate-spin text-snow-300"
+    />
+    {#if label}
+        <Typeface size={labelSize}>{label}</Typeface>
+    {/if}
+</span>
diff --git a/src/lib/components/primitives/Typeface.svelte b/src/lib/components/primitives/Typeface.svelte
new file mode 100644
index 0000000..c1f94cf
--- /dev/null
+++ b/src/lib/components/primitives/Typeface.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { cva, type VariantProps } from 'class-variance-authority';
+    import type { SvelteHTMLElements } from 'svelte/elements';
+
+    let styling = cva('select-none', {
+        variants: {
+            variant: {
+                light: 'text-snow-500',
+                dark: 'text-ink-400',
+                code: 'text-snow-500 font-mono',
+            },
+            size: {
+                xxl: 'text-4xl font-black',
+                xl: 'text-2xl font-extrabold',
+                lg: 'text-xl font-bold',
+                md: 'text-base',
+                sm: 'text-sm',
+            },
+        },
+        defaultVariants: {
+            variant: 'light',
+            size: 'md',
+        },
+    });
+
+    interface $$Props
+        extends Partial<SvelteHTMLElements['p']>,
+            VariantProps<typeof styling> {}
+
+    export let variant: $$Props['variant'] = 'light';
+    export let size: $$Props['size'] = 'md';
+</script>
+
+<p {...$$props} class={styling({ variant, size, class: $$props.class })}>
+    <slot />
+</p>
diff --git a/src/lib/components/primitives/types.ts b/src/lib/components/primitives/types.ts
new file mode 100644
index 0000000..57914eb
--- /dev/null
+++ b/src/lib/components/primitives/types.ts
@@ -0,0 +1,2 @@
+export type IconSize = `${number}x`;
+export type TypefaceSize = 'xxl' | 'xl' | 'lg' | 'md' | 'sm';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..7a8c11b
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import '../styles.css';
+
+    let needsDiscovery = true;
+
+    if (needsDiscovery) {
+        goto('/discovery');
+    }
+</script>
+
+<div class="bg-ink-400 w-screen h-screen p-6"><slot /></div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3c6762c..278eb5e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1 @@
-<script>
-    import Greet from '../lib/Greet.svelte';
-</script>
-
-<h1>Gaggi?</h1>
-<Greet />
-
+<p>main route</p>
diff --git a/src/routes/discovery/+page.svelte b/src/routes/discovery/+page.svelte
new file mode 100644
index 0000000..01f4a62
--- /dev/null
+++ b/src/routes/discovery/+page.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    import BridgesList from '$lib/components/discovery/BridgesList.svelte';
+    import Button from '$lib/components/primitives/Button.svelte';
+    import LoadingIndicator from '$lib/components/primitives/LoadingIndicator.svelte';
+    import Typeface from '$lib/components/primitives/Typeface.svelte';
+    import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
+    import { getDiscoveredBridges } from '../../bindings';
+
+    const bridges = getDiscoveredBridges();
+    let selectedBridge: [string, string] | undefined = undefined;
+</script>
+
+<div class="h-full w-full flex items-center justify-center">
+    <div class="w-3/5 flex flex-col gap-3 items-center">
+        <Typeface class="text-center mb-6" size="xxl"
+            >Select your Hue Bridge</Typeface
+        >
+
+        {#await bridges}
+            <LoadingIndicator
+                label="Searching for Bridges in your network..."
+            />
+        {:then bridges}
+            {#if bridges.length !== 0}
+                <LoadingIndicator
+                    label="Searching for Bridges in your network..."
+                />
+            {:else}
+                <div class="flex flex-col gap-6 w-2/3 min-w-[400px]">
+                    <div class="opacity-70">
+                        <LoadingIndicator
+                            label="Still searching for Bridges in your network..."
+                            iconSize="1.5x"
+                            labelSize="sm"
+                            layout="row"
+                        />
+                    </div>
+
+                    <BridgesList
+                        {bridges}
+                        selected={selectedBridge}
+                        onSelectedBridge={(bridge) => {
+                            selectedBridge = bridge;
+                        }}
+                    />
+
+                    <Button
+                        icon={faArrowRight}
+                        iconOnRight
+                        label="Continue"
+                        disabled={selectedBridge === undefined}
+                        variant="nebulaSlightGradient"
+                        shadow
+                    />
+                </div>
+            {/if}
+        {:catch error}
+            <Typeface>{error.message}</Typeface>
+        {/await}
+    </div>
+</div>
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..153f6d3
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,20 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+    font-family: 'Inter';
+    src: url('/Inter.ttf');
+    font-feature-settings: 'tnum';
+    font-weight: 100 900;
+}
+
+:root {
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+
+    font-family: 'Inter';
+}
diff --git a/svelte.config.js b/svelte.config.js
index 87f3f8d..c8012d2 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,5 +1,5 @@
-import preprocess from 'svelte-preprocess';
 import adapter from '@sveltejs/adapter-static';
+import preprocess from 'svelte-preprocess';
 
 const config = {
     preprocess: [
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 20d8861..c94b2b4 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,13 +1,19 @@
+/**
+ * Colors link: https://coolors.co/16141d-1d1a23-2f2d34-f0fbff-542dc1-6f00ff-8666fb-ff63f7
+ */
+
 /** @type {import('tailwindcss').Config}*/
 const config = {
     content: ['./src/**/*.{html,js,svelte,ts}'],
 
     theme: {
         colors: {
+            deepDark: '#000000',
+            albino: '#FFFFFF',
             ink: {
                 400: '#16141D',
-                500: '#1D1A23',
-                600: '#2F2D34',
+                500: '#211C29',
+                600: '#302D3A',
             },
             nebula: {
                 400: '#542DC1',
@@ -18,7 +24,10 @@ const config = {
                 500: '#FF63F7',
             },
             snow: {
+                300: '#B7C4C8',
+                400: '#D2DFE3',
                 500: '#F0FBFF',
+                600: '#FCFEFF',
             },
         },
         extend: {},
diff --git a/yarn.lock b/yarn.lock
index be616d1..1e5bf54 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -158,6 +158,25 @@
   resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz"
   integrity sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==
 
+"@fortawesome/fontawesome-common-types@6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
+  integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
+
+"@fortawesome/free-brands-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.0.tgz#c785cf5563231eadc5ef5f8cd0274e0b8920433f"
+  integrity sha512-qvxTCo0FQ5k2N+VCXb/PZQ+QMhqRVM4OORiO6MXdG6bKolIojGU/srQ1ptvKk0JTbRgaJOfL2qMqGvBEZG7Z6g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
+"@fortawesome/free-solid-svg-icons@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119"
+  integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.0"
+
 "@hutson/parse-repository-url@^3.0.0":
   version "3.0.2"
   resolved "https://registry.npmjs.org/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz"
@@ -2364,6 +2383,11 @@ svelte-check@^3.4.3:
     svelte-preprocess "^5.0.3"
     typescript "^5.0.3"
 
+svelte-fa@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/svelte-fa/-/svelte-fa-3.0.4.tgz#22543b801950fe4a9a801ba8d4769a53d80c0782"
+  integrity sha512-y04vEuAoV1wwVDItSCzPW7lzT6v1bj/y1p+W1V+NtIMpQ+8hj8MBkx7JFD7JHSnalPU1QiI8BVfguqheEA3nPg==
+
 svelte-hmr@^0.15.2:
   version "0.15.2"
   resolved "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.2.tgz"
@@ -2380,6 +2404,11 @@ svelte-preprocess@^5.0.3:
     sorcery "^0.11.0"
     strip-indent "^3.0.0"
 
+svelte-routing@^1.10.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/svelte-routing/-/svelte-routing-1.11.0.tgz#8ef3e486f63725ba36d14b491e6e0fc8c2392458"
+  integrity sha512-/JlBAB6KxgM+Xl+4J/vOy4i4uYAJpWWbjh7vtRwsuu0MPl5B+ml+N/jCRkfjRa9ulODcS/G6PL8opyhczmrV8Q==
+
 svelte@^4.0.0:
   version "4.0.4"
   resolved "https://registry.npmjs.org/svelte/-/svelte-4.0.4.tgz"