diff --git a/package-lock.json b/package-lock.json
index f960b710..9f882acf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
                 "eslint-plugin-svelte": "^2.46.1",
                 "globals": "^15.13.0",
                 "jsdom": "^25.0.1",
+                "jwt-decode": "^4.0.0",
                 "lucide-svelte": "^0.456.0",
                 "msw": "^2.6.9",
                 "postcss": "^8.4.49",
@@ -3856,6 +3857,15 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/jwt-decode": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
+            "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
+            "dev": true,
+            "engines": {
+                "node": ">=18"
+            }
+        },
         "node_modules/keyv": {
             "version": "4.5.4",
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
diff --git a/package.json b/package.json
index 3bcb17eb..4b3b5b84 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
         "eslint-plugin-svelte": "^2.46.1",
         "globals": "^15.13.0",
         "jsdom": "^25.0.1",
+        "jwt-decode": "^4.0.0",
         "lucide-svelte": "^0.456.0",
         "msw": "^2.6.9",
         "postcss": "^8.4.49",
diff --git a/src/lib/backend-api.ts b/src/lib/backend-api.ts
index 68b2a32e..6f12df5e 100644
--- a/src/lib/backend-api.ts
+++ b/src/lib/backend-api.ts
@@ -90,7 +90,7 @@ export interface IAuthorController {
 }
 
 export interface IBackendController {
-    signIn(email: string, password: string): Promise<User>;
+    signIn(email: string, password: string): Promise<void>;
     signOut(): Promise<void>;
     requestEmailForgottenPassword(email: string): Promise<void>;
 
diff --git a/src/lib/components/composites/navigation-bar/NavigationBar.svelte b/src/lib/components/composites/navigation-bar/NavigationBar.svelte
index 314d6c44..ca46c1ce 100644
--- a/src/lib/components/composites/navigation-bar/NavigationBar.svelte
+++ b/src/lib/components/composites/navigation-bar/NavigationBar.svelte
@@ -8,7 +8,7 @@
     import type { User } from "$lib/model/backend";
 
     interface Props {
-        user: User;
+        user?: User;
         backRef?: string | undefined;
         tabs: Tab[];
         defaultTabValue: (typeof tabs)[number]["value"];
diff --git a/src/lib/components/composites/navigation-bar/PaperNavigationBar.svelte b/src/lib/components/composites/navigation-bar/PaperNavigationBar.svelte
index 58828069..bef2c603 100644
--- a/src/lib/components/composites/navigation-bar/PaperNavigationBar.svelte
+++ b/src/lib/components/composites/navigation-bar/PaperNavigationBar.svelte
@@ -4,7 +4,7 @@
     import type { Paper, PaperSpec, User } from "$lib/model/backend";
 
     interface Props {
-        user: User;
+        user?: User;
         backRef?: string | undefined;
         paper: Paper | PaperSpec;
     }
diff --git a/src/lib/components/composites/navigation-bar/ProjectNavigationBar.svelte b/src/lib/components/composites/navigation-bar/ProjectNavigationBar.svelte
index 98084b44..9261a27a 100644
--- a/src/lib/components/composites/navigation-bar/ProjectNavigationBar.svelte
+++ b/src/lib/components/composites/navigation-bar/ProjectNavigationBar.svelte
@@ -5,7 +5,7 @@
 
     type TabValue = (typeof tabs)[number]["value"];
     interface Props {
-        user: User;
+        user?: User;
         project: Project;
         defaultTabValue: TabValue;
     }
diff --git a/src/lib/components/composites/navigation-bar/SimpleNavigationBar.svelte b/src/lib/components/composites/navigation-bar/SimpleNavigationBar.svelte
index 4bddc897..4e5a585a 100644
--- a/src/lib/components/composites/navigation-bar/SimpleNavigationBar.svelte
+++ b/src/lib/components/composites/navigation-bar/SimpleNavigationBar.svelte
@@ -4,7 +4,7 @@
     import type { User } from "$lib/model/backend";
 
     interface Props {
-        user: User;
+        user?: User;
         backRef?: string | undefined;
         title: string;
         tabs: Tab[];
diff --git a/src/lib/components/composites/navigation-bar/UserMenu.svelte b/src/lib/components/composites/navigation-bar/UserMenu.svelte
index 06290f89..8c3573b4 100644
--- a/src/lib/components/composites/navigation-bar/UserMenu.svelte
+++ b/src/lib/components/composites/navigation-bar/UserMenu.svelte
@@ -9,9 +9,10 @@
     import type { Icon } from "lucide-svelte";
     import type { User } from "$lib/model/backend";
     import UserAvatar from "$lib/components/composites/user-avatar/UserAvatar.svelte";
+    import { goto } from "$app/navigation";
 
     interface Props {
-        user: User;
+        user?: User;
     }
     const { user }: Props = $props();
 
@@ -47,6 +48,11 @@
             href: "/settings/account",
         },
     ];
+
+    function signOut() {
+        localStorage.removeItem("token");
+        goto("/signin");
+    }
 </script>
 
 <DropdownMenu.Root>
@@ -56,7 +62,11 @@
     <DropdownMenu.Content class="w-60" side="bottom" sideOffset={0} align="start">
         <DropdownMenu.Group>
             <DropdownMenu.GroupHeading>
-                {`${user.firstName} ${user.lastName}`}
+                {#if user}
+                    {`${user.firstName} ${user.lastName}`}
+                {:else}
+                    Loading User...
+                {/if}
             </DropdownMenu.GroupHeading>
             <DropdownMenu.Separator />
             <DropdownMenu.Group>
@@ -73,7 +83,7 @@
                 {/each}
             </DropdownMenu.Group>
             <DropdownMenu.Separator />
-            <DropdownMenu.Item>
+            <DropdownMenu.Item onclick={signOut}>
                 <LogOut class="mr-2 size-4" />
                 <span>Sign out</span>
                 <DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
diff --git a/src/lib/components/composites/user-avatar/UserAvatar.svelte b/src/lib/components/composites/user-avatar/UserAvatar.svelte
index 9d82f36e..1b7afc1c 100644
--- a/src/lib/components/composites/user-avatar/UserAvatar.svelte
+++ b/src/lib/components/composites/user-avatar/UserAvatar.svelte
@@ -5,14 +5,14 @@
     import X from "lucide-svelte/icons/x";
 
     interface Props {
-        user: User;
+        user?: User;
         reviewDecision?: ReviewDecision;
     }
 
     const { user, reviewDecision }: Props = $props();
 
     const getInitial = (text: string) => (text.length > 0 ? text[0].toUpperCase() : "");
-    const userInitials = `${getInitial(user.firstName)}${getInitial(user.lastName)}`;
+    const userInitials = `${getInitial(user?.firstName ?? "")}${getInitial(user?.lastName ?? "")}`;
 </script>
 
 <!--
diff --git a/src/lib/controller/backend-controller.ts b/src/lib/controller/backend-controller.ts
index a8fbcbfb..eee14e6d 100644
--- a/src/lib/controller/backend-controller.ts
+++ b/src/lib/controller/backend-controller.ts
@@ -14,6 +14,7 @@ import type {
     AuthorSpec,
     Paper,
     PaperSpec,
+    SignInResponse,
 } from "../model/backend";
 import { AuthorController } from "./author-controller";
 import { HttpClient } from "./http-client";
@@ -33,9 +34,16 @@ export class BackendController implements IBackendController {
         return BackendController.instance;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async signIn(email: string, password: string): Promise<User> {
-        throw new Error("Method not implemented.");
+    async signIn(email: string, password: string): Promise<void> {
+        const payload = {
+            email: email,
+            password: password,
+        };
+        // TODO: Omit trailing slash, when backend doesn't hardcode unauthorized routes anymore
+        const response: SignInResponse = await this.client
+            .post("login/", payload)
+            .then((response) => response.json());
+        localStorage.setItem("token", response.token);
     }
 
     async signOut(): Promise<void> {
diff --git a/src/lib/controller/http-client.ts b/src/lib/controller/http-client.ts
index 513b35c2..0e343249 100644
--- a/src/lib/controller/http-client.ts
+++ b/src/lib/controller/http-client.ts
@@ -1,3 +1,4 @@
+import { browser } from "$app/environment";
 import { PUBLIC_API_BASE_URL } from "$env/static/public";
 
 /**
@@ -37,12 +38,24 @@ export class HttpClient {
         body?: T,
         headers?: HeadersInit,
     ): Promise<Response> {
+        let jwt: string | null = null;
+        if (browser) {
+            jwt = localStorage.getItem("token");
+        }
+
+        const requestHeaders: Headers = new Headers({
+            "Content-Type": "application/json",
+            ...headers,
+        });
+        if (jwt) {
+            // TODO: Change to "Authorization" when backend is updated
+            // requestHeaders.set("Authorization", `Bearer ${jwt}`);
+            requestHeaders.set("authenticationToken", jwt);
+        }
+
         return fetch(`${this.basePath}/${path}`, {
             method,
-            headers: {
-                "Content-Type": "application/json",
-                ...headers,
-            },
+            headers: requestHeaders,
             body: body ? JSON.stringify(body) : undefined,
         });
     }
diff --git a/src/lib/current-user.ts b/src/lib/current-user.ts
new file mode 100644
index 00000000..a274ed85
--- /dev/null
+++ b/src/lib/current-user.ts
@@ -0,0 +1,28 @@
+import { goto } from "$app/navigation";
+import { jwtDecode } from "jwt-decode";
+import type { User } from "./model/backend";
+import { browser } from "$app/environment";
+
+/**
+ * Resolves the current user from the local storage token
+ *
+ * @param redirectOnMissing - When true, and the jwt is missing, the page will be redirected to the sign-in page
+ * @returns The currently signed in user - if they exist, otherwise undefined
+ */
+export function getCurrentUser(redirectOnMissing: boolean = true): User | undefined {
+    // If the script is not running in the browser, the local storage cannot be accessed
+    if (!browser) {
+        return undefined;
+    }
+
+    const jwt = localStorage.getItem("token");
+    if (jwt) {
+        return jwtDecode(jwt) as User;
+    }
+
+    // When no JWT is stored, redirect to the sign-in page
+    if (redirectOnMissing) {
+        goto("/signin");
+    }
+    return undefined;
+}
diff --git a/src/lib/model/backend.ts b/src/lib/model/backend.ts
index b5cdcd98..97c5db0c 100644
--- a/src/lib/model/backend.ts
+++ b/src/lib/model/backend.ts
@@ -88,3 +88,7 @@ export interface Author {
 }
 
 export type AuthorSpec = Omit<Author, "id">;
+
+export interface SignInResponse {
+    token: string;
+}
diff --git a/src/routes/(auth)/signin/+page.svelte b/src/routes/(auth)/signin/+page.svelte
index a1e09369..37331bfe 100644
--- a/src/routes/(auth)/signin/+page.svelte
+++ b/src/routes/(auth)/signin/+page.svelte
@@ -3,17 +3,33 @@
     import PasswordInput from "$lib/components/composites/input/PasswordInput.svelte";
     import { Button } from "$lib/components/primitives/button/index.js";
     import * as Card from "$lib/components/primitives/card/index.js";
+    import { BackendController } from "$lib/controller/backend-controller";
+    import CircleAlert from "lucide-svelte/icons/circle-alert";
+    import * as Alert from "$lib/components/primitives/alert/index.js";
+    import LoaderCircle from "lucide-svelte/icons/loader-circle";
+    import { goto } from "$app/navigation";
+    import { getCurrentUser } from "$lib/current-user";
 
     let email = $state("");
     let password = $state("");
+    let error = $state<string | undefined>(undefined);
+    let loading = $state(false);
+    const user = getCurrentUser();
 
-    function handleSubmit(event: Event) {
+    async function handleSubmit(event: Event) {
         event.preventDefault();
 
-        // Don't validate the input fields as they only need to match data on the server
-        const signInData = { email, password };
-        // TODO: CALL API TO SIGN IN
-        console.log("sign in with", signInData);
+        error = undefined;
+        loading = true;
+        await BackendController.getInstance()
+            .signIn(email, password)
+            .then(() => {
+                goto("/");
+            })
+            .catch((signInError) => {
+                error = signInError.message;
+            });
+        loading = false;
     }
 </script>
 
@@ -25,7 +41,16 @@
         <Card.Title class="text-3xl">Sign In</Card.Title>
         <Card.Description>Enter your credentials below to sign in to your account</Card.Description>
     </Card.Header>
-    <Card.Content class="flex flex-col w-full">
+    <Card.Content class="flex flex-col w-full gap-4">
+        {#if user}
+            <Alert.Root variant="default">
+                <CircleAlert class="size-4" />
+                <Alert.Title>Already Signed In</Alert.Title>
+                <Alert.Description>
+                    Do you want to preceed to the <a href="/" class="underline">Home Page</a>?
+                </Alert.Description>
+            </Alert.Root>
+        {/if}
         <form class="flex flex-col gap-5" onsubmit={handleSubmit}>
             <Input
                 class="w-full"
@@ -37,11 +62,25 @@
                 bind:value={email}
             />
             <PasswordInput class="w-full" showForgotPasswordLink bind:value={password} />
-            <Button type="submit" class="w-full">Sign In</Button>
+            {#if loading}
+                <Button type="submit" class="w-full" disabled>
+                    <LoaderCircle class="animate-spin" />
+                    Signing In
+                </Button>
+            {:else}
+                <Button type="submit" class="w-full">Sign In</Button>
+            {/if}
         </form>
-        <div class="mt-4 text-center text-sm">
+        <div class="text-center text-sm">
             You don't have an account?
             <a href="/signup" class="underline"> Sign Up </a>
         </div>
+        {#if error}
+            <Alert.Root variant="destructive">
+                <CircleAlert class="size-4" />
+                <Alert.Title>Error</Alert.Title>
+                <Alert.Description>{error}</Alert.Description>
+            </Alert.Root>
+        {/if}
     </Card.Content>
 </Card.Root>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
deleted file mode 100644
index ddb244cb..00000000
--- a/src/routes/+layout.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { User } from "$lib/model/backend";
-import type { LayoutLoad } from "./$types";
-
-export const load: LayoutLoad = async () => {
-    const user: User = {
-        id: 0,
-        status: "active",
-        firstName: "John",
-        lastName: "Doe",
-        isAdmin: false,
-        email: "john.doe@example.com",
-    };
-    return {
-        user,
-    };
-};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a626766b..38bc9208 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import SimpleNavigationBar from "$lib/components/composites/navigation-bar/SimpleNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
-    const { data } = $props();
-    const { user } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>
diff --git a/src/routes/archivedprojects/+page.svelte b/src/routes/archivedprojects/+page.svelte
index 7e0f9450..b47b2bc3 100644
--- a/src/routes/archivedprojects/+page.svelte
+++ b/src/routes/archivedprojects/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import SimpleNavigationBar from "$lib/components/composites/navigation-bar/SimpleNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
-    const { data } = $props();
-    const { user } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>
diff --git a/src/routes/componentsusage/+page.svelte b/src/routes/componentsusage/+page.svelte
index ee8b6ad8..9896ebc5 100644
--- a/src/routes/componentsusage/+page.svelte
+++ b/src/routes/componentsusage/+page.svelte
@@ -2,9 +2,11 @@
     import SimpleNavigationBar from "$lib/components/composites/navigation-bar/SimpleNavigationBar.svelte";
     import SearchBar from "$lib/components/composites/search-bar/SearchBar.svelte";
     import PaperListEntry from "$lib/components/composites/paper-components/PaperListEntry.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
     const { data } = $props();
-    const { user, paper, paper2 } = data;
+    const { paper, paper2 } = data;
+    const user = getCurrentUser();
 
     const searchPlaceholderText: string = "Search paper";
 </script>
diff --git a/src/routes/invitations/+page.svelte b/src/routes/invitations/+page.svelte
index cf4ba87f..3433379a 100644
--- a/src/routes/invitations/+page.svelte
+++ b/src/routes/invitations/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import SimpleNavigationBar from "$lib/components/composites/navigation-bar/SimpleNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
-    const { data } = $props();
-    const { user } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>
diff --git a/src/routes/paper/[paperId]/+page.svelte b/src/routes/paper/[paperId]/+page.svelte
index 9e3a29a1..51239c2b 100644
--- a/src/routes/paper/[paperId]/+page.svelte
+++ b/src/routes/paper/[paperId]/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     import PaperNavigationBar from "$lib/components/composites/navigation-bar/PaperNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
     const { data } = $props();
-    const { user, paper } = data;
+    const { paper } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>
diff --git a/src/routes/project/[projectId]/dashboard/+page.svelte b/src/routes/project/[projectId]/dashboard/+page.svelte
index 11ce4176..e9a105a5 100644
--- a/src/routes/project/[projectId]/dashboard/+page.svelte
+++ b/src/routes/project/[projectId]/dashboard/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     import ProjectNavigationBar from "$lib/components/composites/navigation-bar/ProjectNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
     const { data } = $props();
-    const { user, project } = data;
+    const { project } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>
diff --git a/src/routes/project/[projectId]/paper/[paperId]/+page.svelte b/src/routes/project/[projectId]/paper/[paperId]/+page.svelte
index ce3e1bf0..31e36caa 100644
--- a/src/routes/project/[projectId]/paper/[paperId]/+page.svelte
+++ b/src/routes/project/[projectId]/paper/[paperId]/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     import PaperNavigationBar from "$lib/components/composites/navigation-bar/PaperNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
     const { data } = $props();
-    const { user, project, paper } = data;
+    const { project, paper } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>
diff --git a/src/routes/project/[projectId]/paper/new/+page.svelte b/src/routes/project/[projectId]/paper/new/+page.svelte
index 9786b2e6..b3cabb49 100644
--- a/src/routes/project/[projectId]/paper/new/+page.svelte
+++ b/src/routes/project/[projectId]/paper/new/+page.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
     import PaperNavigationBar from "$lib/components/composites/navigation-bar/PaperNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
     import type { PaperSpec } from "$lib/model/backend";
 
     const { data } = $props();
-    const { user, project } = data;
+    const { project } = data;
+    const user = getCurrentUser();
     const paper: PaperSpec = {
         doi: "Doi",
         title: "Field-Sensitive Pointer Analysis for Static Dataflow in the R Programming Language",
diff --git a/src/routes/project/[projectId]/papers/+page.svelte b/src/routes/project/[projectId]/papers/+page.svelte
index 5cb5ff57..ae76548b 100644
--- a/src/routes/project/[projectId]/papers/+page.svelte
+++ b/src/routes/project/[projectId]/papers/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     import ProjectNavigationBar from "$lib/components/composites/navigation-bar/ProjectNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
     let { data } = $props();
-    const { user, project } = data;
+    const { project } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>
diff --git a/src/routes/project/[projectId]/settings/+layout.svelte b/src/routes/project/[projectId]/settings/+layout.svelte
index 9a2056d8..116a2d8d 100644
--- a/src/routes/project/[projectId]/settings/+layout.svelte
+++ b/src/routes/project/[projectId]/settings/+layout.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     import ProjectNavigationBar from "$lib/components/composites/navigation-bar/ProjectNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
     const { children, data } = $props();
-    const { user, project } = data;
+    const { project } = data;
+    const user = getCurrentUser();
 </script>
 
 <ProjectNavigationBar {user} {project} defaultTabValue="settings" />
diff --git a/src/routes/project/[projectId]/statistics/+page.svelte b/src/routes/project/[projectId]/statistics/+page.svelte
index 786c5fd0..b78d78ea 100644
--- a/src/routes/project/[projectId]/statistics/+page.svelte
+++ b/src/routes/project/[projectId]/statistics/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
     import ProjectNavigationBar from "$lib/components/composites/navigation-bar/ProjectNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
     const { data } = $props();
-    const { user, project } = data;
+    const { project } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>
diff --git a/src/routes/readinglist/+page.svelte b/src/routes/readinglist/+page.svelte
index b3fc0dab..487617f9 100644
--- a/src/routes/readinglist/+page.svelte
+++ b/src/routes/readinglist/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import SimpleNavigationBar from "$lib/components/composites/navigation-bar/SimpleNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
-    const { data } = $props();
-    const { user } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>
diff --git a/src/routes/settings/+layout.svelte b/src/routes/settings/+layout.svelte
index 05598b7d..7e49e0b6 100644
--- a/src/routes/settings/+layout.svelte
+++ b/src/routes/settings/+layout.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
     import SimpleNavigationBar from "$lib/components/composites/navigation-bar/SimpleNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user";
 
-    const { data, children } = $props();
+    const { children } = $props();
+    const user = getCurrentUser();
 </script>
 
-<SimpleNavigationBar user={data.user} title="Settings" backRef="/" tabs={[]} defaultTabValue="" />
+<SimpleNavigationBar {user} title="Settings" backRef="/" tabs={[]} defaultTabValue="" />
 
 {@render children()}