diff --git a/package.json b/package.json
index 1f320df7..57374dcc 100644
--- a/package.json
+++ b/package.json
@@ -69,5 +69,10 @@
 		]
 	},
 	"type": "module",
-	"packageManager": "pnpm@10.4.1"
+	"packageManager": "pnpm@10.4.1",
+	"dependencies": {
+		"@fontsource-variable/inter-tight": "^5.1.1",
+		"@fontsource-variable/playfair-display": "^5.1.1",
+		"@fontsource/iosevka": "^5.1.0"
+	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c44196ee..48578e64 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,16 @@ settings:
 importers:
 
   .:
+    dependencies:
+      '@fontsource-variable/inter-tight':
+        specifier: ^5.1.1
+        version: 5.1.1
+      '@fontsource-variable/playfair-display':
+        specifier: ^5.1.1
+        version: 5.1.1
+      '@fontsource/iosevka':
+        specifier: ^5.1.0
+        version: 5.1.0
     devDependencies:
       '@eslint/js':
         specifier: ^9.20.0
@@ -353,6 +363,15 @@ packages:
   '@floating-ui/utils@0.2.8':
     resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
 
+  '@fontsource-variable/inter-tight@5.1.1':
+    resolution: {integrity: sha512-uPBgjWbkau/7q/IGu/offWoaQqx9dky6shbqQFsBUsoosG6rhrX7azqh0tnrENpgjoE+CwgEotQ8eZaha1ni8w==}
+
+  '@fontsource-variable/playfair-display@5.1.1':
+    resolution: {integrity: sha512-89gLVOcVRIp0aayWwTcaLGQxhxDT2ZIv7cFU/BjxcWA8iALi8SrlT7dNHdhakb8MeXc0UUw9n8k6kG+jWvX61A==}
+
+  '@fontsource/iosevka@5.1.0':
+    resolution: {integrity: sha512-wfo4Tzbb3Lz3Zf+UMF5c/bEQL5enPJ7LT83q/UQxbgXtg+BtleIETkziIwP8lZsw8MwhSou8HVCmSZnY0sfiCw==}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -2467,6 +2486,12 @@ snapshots:
 
   '@floating-ui/utils@0.2.8': {}
 
+  '@fontsource-variable/inter-tight@5.1.1': {}
+
+  '@fontsource-variable/playfair-display@5.1.1': {}
+
+  '@fontsource/iosevka@5.1.0': {}
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
diff --git a/src/app.css b/src/app.css
index 3207042c..c9d1c7f0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -8,6 +8,10 @@
 	--breakpoint-xs: 475px;
 	--breakpoint-2xl: 1400px;
 
+	--font-display: "GT Super Display", serif;
+	--font-sans: "Inter Tight Variable", sans-serif;
+	--font-mono: "Iosevka", monospace;
+
 	--color-background: hsl(var(--background));
 	--color-foreground: hsl(var(--foreground));
 
@@ -119,7 +123,7 @@
 		--radius: 0.5rem;
 	}
 	.dark {
-		--background: 20 14.3% 4.1%;
+		--background: 276 10.64% 9.22%;
 		--foreground: 60 9.1% 97.8%;
 		--card: 20 14.3% 4.1%;
 		--card-foreground: 60 9.1% 97.8%;
diff --git a/src/app.html b/src/app.html
index 3539310c..9c617b81 100644
--- a/src/app.html
+++ b/src/app.html
@@ -6,6 +6,8 @@
 			rel="icon"
 			href="https://raw.githubusercontent.com/sveltejs/branding/master/svelte-logo.svg"
 		/>
+
+		<link rel="stylesheet" href="/fonts/gt-super.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
diff --git a/src/lib/components/MarkdownRenderer.svelte b/src/lib/components/MarkdownRenderer.svelte
index d738b42a..faa8cab5 100644
--- a/src/lib/components/MarkdownRenderer.svelte
+++ b/src/lib/components/MarkdownRenderer.svelte
@@ -31,7 +31,8 @@
 <svelte:element
 	this={inline ? "span" : "div"}
 	class={cn(
-		"prose dark:prose-invert prose-a:[overflow-wrap:_anywhere] prose-a:text-primary prose-a:no-underline prose-a:underline-offset-4 prose-a:hover:underline prose-code:[overflow-wrap:_anywhere] prose-li:my-1",
+		"prose-code:[overflow-wrap:_anywhere]p prose dark:prose-invert prose-a:[overflow-wrap:_anywhere] prose-a:text-primary prose-a:no-underline prose-a:underline-offset-4 prose-a:hover:underline",
+		"prose-code:rounded-md  prose-code:bg-neutral-800 prose-code:px-[4px] prose-code:py-[3px] prose-li:my-1",
 		"prose-pre:text-wrap", // remove with TODO
 		inline && "*:inline",
 		className
diff --git a/src/lib/components/ui/tabs/tabs-list.svelte b/src/lib/components/ui/tabs/tabs-list.svelte
index f03e5fc7..fa7f335f 100644
--- a/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/src/lib/components/ui/tabs/tabs-list.svelte
@@ -12,7 +12,7 @@
 <TabsPrimitive.List
 	bind:ref
 	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
+		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-xl p-1",
 		className
 	)}
 	{...restProps}
diff --git a/src/lib/components/ui/tabs/tabs-trigger.svelte b/src/lib/components/ui/tabs/tabs-trigger.svelte
index f1f5825e..745bb1b3 100644
--- a/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -12,7 +12,7 @@
 <TabsPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+		"ring-offset-background focus-visible:ring-ring  data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
 		className
 	)}
 	{...restProps}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 90e3537f..1e77ca20 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
 	import "../app.css";
+	import "@fontsource-variable/playfair-display";
+	import "@fontsource-variable/inter-tight";
+	import "@fontsource/iosevka/400.css";
+	import "@fontsource/iosevka/500.css";
+	import "@fontsource/iosevka/600.css";
+
 	import { onMount, type SvelteComponent } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
 	import { fade } from "svelte/transition";
@@ -134,7 +140,7 @@
 <ModeWatcher />
 <Toaster />
 <header
-	class="sticky top-0 z-40 w-full bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60"
+	class="top-0 z-40 hidden w-full bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60"
 >
 	<div
 		class={[
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ebb82afc..126bce37 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -265,7 +265,7 @@
 />
 
 <div class="container py-8">
-	<h2 class="text-3xl font-bold">
+	<h2 class="font-display text-[52px] font-medium">
 		<span class="text-primary">{data.repos[currentTab].name}</span>
 		Releases
 	</h2>
diff --git a/src/routes/navbar.svelte b/src/routes/navbar.svelte
new file mode 100644
index 00000000..d64863eb
--- /dev/null
+++ b/src/routes/navbar.svelte
@@ -0,0 +1,343 @@
+<script lang="ts">
+	import "@fontsource-variable/playfair-display";
+	import "../app.css";
+
+	import { dev } from "$app/environment";
+	import { page } from "$app/state";
+	import { env } from "$env/dynamic/public";
+	import * as Avatar from "$lib/components/ui/avatar";
+	import { Button } from "$lib/components/ui/button";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+	import { Progress } from "$lib/components/ui/progress";
+	import { FAVICON_URL } from "$lib/config";
+	import { news } from "$lib/news/news.json";
+	import { getTabState, initTabState, plainTextSerializer } from "$lib/stores";
+	import { tokenKey } from "$lib/types";
+	import { typedEntries } from "$lib/util";
+	import { ChevronDown, LoaderCircle, LogOut, Monitor, Moon, Sun, X } from "lucide-svelte";
+	import { resetMode, setMode } from "mode-watcher";
+	import { Octokit } from "octokit";
+	import { onMount, type SvelteComponent } from "svelte";
+	import { persisted } from "svelte-persisted-store";
+	import { toast } from "svelte-sonner";
+	import type { SvelteHTMLElements } from "svelte/elements";
+	import { fade } from "svelte/transition";
+
+	// State
+	initTabState();
+	const tabState = getTabState();
+
+	let { data, children } = $props();
+
+	let scrollY = $state(0);
+
+	// User dropdown
+	const token = persisted(tokenKey, "", {
+		serializer: plainTextSerializer
+	});
+	const toastedTokens = persisted<string[]>("toastedTokens", []);
+	let isAuthenticating = $state(false);
+	let authenticatingToastId = $state<string | number>();
+	let user =
+		$state<
+			Awaited<ReturnType<InstanceType<typeof Octokit>["rest"]["users"]["getAuthenticated"]>>["data"]
+		>();
+	toastedTokens.subscribe(tokens => {
+		if (tokens.includes($token)) return;
+		if (isAuthenticating) {
+			authenticatingToastId = toast.loading("Authenticating...", {
+				description: "Logging you in with GitHub"
+			});
+		}
+		if (user) {
+			if (authenticatingToastId) {
+				toast.info("Authenticated", {
+					id: authenticatingToastId
+				});
+				authenticatingToastId = undefined;
+			}
+			toast.success("Authenticated", {
+				description: `Welcome, ${user.login}!`
+			});
+			toastedTokens.update(toasted => [...new Set([...toasted, $token])]);
+		}
+	});
+	token.subscribe(newToken => {
+		if (!newToken) return;
+		isAuthenticating = true;
+		user = undefined;
+		new Octokit({ auth: newToken }).rest.users
+			.getAuthenticated()
+			.then(({ data }) => {
+				isAuthenticating = false;
+				user = data;
+			})
+			.catch(() => {
+				isAuthenticating = false;
+			});
+	});
+	let userDropdownOpen = $state(false);
+
+	// Theme selector
+	type Theme = {
+		value: typeof theme;
+		label: string;
+		icon: typeof SvelteComponent<SvelteHTMLElements["svg"]>;
+	};
+	const themes: Theme[] = [
+		{
+			value: "light",
+			label: "Light",
+			icon: Sun
+		},
+		{
+			value: "dark",
+			label: "Dark",
+			icon: Moon
+		},
+		{
+			value: "system",
+			label: "System",
+			icon: Monitor
+		}
+	];
+	let theme = $state<"light" | "dark" | "system">("system");
+	let themeSwitcherOpen = $state(false);
+
+	// News
+	let newsToDisplay = $state<(typeof news)[number]>();
+	const closedNewsKey = "closedNews";
+	function getClosedNewsIds() {
+		return JSON.parse(localStorage.getItem(closedNewsKey) ?? "[]") as (typeof news)[number]["id"][];
+	}
+
+	onMount(() => {
+		// Theme
+		theme =
+			"mode-watcher-mode" in localStorage
+				? localStorage["mode-watcher-mode"].replace(/"/g, "")
+				: "system";
+
+		// News
+		const closedNews = getClosedNewsIds();
+		const now = new Date();
+		newsToDisplay = news.find(
+			({ id, content, endDate }) => !closedNews.includes(id) && new Date(endDate) > now && content
+		);
+	});
+</script>
+
+<header
+	class="sticky top-0 z-40 w-full bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/60"
+>
+	<div
+		class={[
+			"border-b transition-colors duration-500",
+			{
+				"border-transparent": !newsToDisplay && scrollY < 25
+			}
+		]}
+	>
+		<div class="mx-auto flex h-14 w-full items-center px-8">
+			<!-- Left part -->
+			<a href="/" class="flex items-center gap-2" onclick={() => tabState.set("svelte")}>
+				<img src={FAVICON_URL} alt="Svelte" class="size-8" />
+				<h2 class="hidden text-xl font-semibold xs:inline-block">
+					Svelte
+					<span class="text-primary">Changelog</span>
+				</h2>
+			</a>
+
+			<!-- Navigation -->
+			<!-- TODO: don't hardcode scrollY? -->
+			{#if scrollY > 150 && page.route.id === "/"}
+				<ul transition:fade={{ duration: 200 }} class="ml-6 hidden sm:block">
+					<li>
+						{#each typedEntries(data.repos) as [id, { name }]}
+							<Button
+								variant="ghost"
+								class="hover:bg-accent/75"
+								onclick={() => tabState.set(id)}
+								disabled={$tabState === id}
+							>
+								{name}
+							</Button>
+						{/each}
+					</li>
+				</ul>
+			{/if}
+
+			<!-- Right part -->
+			<div class="flex flex-1 items-center justify-end space-x-2 sm:space-x-4">
+				<nav class="flex items-center space-x-1">
+					{#if isAuthenticating}
+						<Button variant="outline" size="icon" disabled>
+							<LoaderCircle class="size-4 animate-spin" />
+						</Button>
+					{:else if !user}
+						<Button href="/login" variant="outline" class="gap-1.5">
+							Log in with
+							<img src="/github.svg" alt="GitHub" class="size-4 dark:invert" />
+							<span class="sr-only">GitHub</span>
+						</Button>
+					{:else}
+						<DropdownMenu.Root bind:open={userDropdownOpen}>
+							<DropdownMenu.Trigger>
+								{#snippet child({ props })}
+									<Button {...props} variant="ghost" size="icon" class="w-14 gap-1">
+										<Avatar.Root class="size-6">
+											<Avatar.Image src={user?.avatar_url} alt={user?.login} />
+											<Avatar.Fallback>
+												{user?.login.charAt(0).toUpperCase()}
+											</Avatar.Fallback>
+										</Avatar.Root>
+										<ChevronDown
+											class="size-4 opacity-50 transition-transform {userDropdownOpen
+												? 'rotate-180'
+												: ''}"
+										/>
+										<span class="sr-only">Manage user</span>
+									</Button>
+								{/snippet}
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content class="max-w-60">
+								<DropdownMenu.Label class="font-normal">
+									<span class="font-semibold">Logged in as {user.login}</span>
+									{#if dev && env.PUBLIC_GITHUB_TOKEN}
+										<em class="mt-1 block text-xs font-light text-red-500">
+											Dev mode with custom token enabled, user token not used
+										</em>
+									{/if}
+									{#await new Octokit({ auth: $token }).rest.users.getAuthenticated()}
+										<div class="mt-1 flex items-center gap-2">
+											<LoaderCircle class="size-4 animate-spin" />
+											Loading stats...
+										</div>
+									{:then { headers }}
+										{@const currentUsageHeader = headers["x-ratelimit-used"]}
+										{@const currentUsage = currentUsageHeader ? Number(currentUsageHeader) : 0}
+										{@const maxUsageHeader = headers["x-ratelimit-remaining"]}
+										{@const maxUsage = maxUsageHeader ? Number(maxUsageHeader) : 0}
+										{@const resetHeader = headers["x-ratelimit-reset"]}
+										{@const resetTime = resetHeader
+											? new Date(Number(resetHeader) * 1000)
+											: undefined}
+										{#if currentUsageHeader && maxUsageHeader}
+											<div class="my-1 inline-flex items-baseline gap-1.5">
+												<h4 class="font-semibold">Token consumption</h4>
+												{#if currentUsage < maxUsage}
+													{@const percentage = (currentUsage / maxUsage) * 100}
+													<span class="text-sm font-light text-muted-foreground">
+														• {Math.round(percentage)}%
+													</span>
+												{/if}
+											</div>
+											{#if currentUsage < maxUsage}
+												<Progress value={currentUsage} max={maxUsage} />
+											{:else}
+												<p class="text-sm text-red-500">
+													You have no requests left.
+													{#if resetTime}
+														Reset at {resetTime.toLocaleTimeString()}.
+													{/if}
+												</p>
+											{/if}
+										{/if}
+									{/await}
+								</DropdownMenu.Label>
+								<DropdownMenu.Separator />
+								<DropdownMenu.Item
+									onclick={() => {
+										toastedTokens.update(toasted => toasted.filter(t => t !== $token));
+										localStorage.removeItem(tokenKey);
+										user = undefined;
+										toast.success("Logged out", {
+											description: "You have been logged out. Refreshing in 3 seconds...",
+											duration: 3000,
+											onAutoClose: () => location.reload()
+										});
+									}}
+									class="cursor-pointer text-red-500"
+								>
+									<LogOut class="mr-2 size-4" />
+									Logout
+								</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.Root>
+					{/if}
+					<Button
+						href="https://github.com/WarningImHack3r/svelte-changelog"
+						target="_blank"
+						variant="ghost"
+						size="icon"
+					>
+						<img src="/github.svg" alt="GitHub" class="size-5 dark:invert" />
+						<span class="sr-only">Visit the repository</span>
+					</Button>
+					<DropdownMenu.Root bind:open={themeSwitcherOpen}>
+						<DropdownMenu.Trigger>
+							{#snippet child({ props })}
+								<Button {...props} variant="ghost" size="icon" class="w-14 gap-1">
+									<div class="flex items-center">
+										<Sun
+											class="!size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
+										/>
+										<Moon
+											class="absolute !size-5 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
+										/>
+									</div>
+									<ChevronDown
+										class="size-4 opacity-50 transition-transform {themeSwitcherOpen
+											? 'rotate-180'
+											: ''}"
+									/>
+									<span class="sr-only">Change theme</span>
+								</Button>
+							{/snippet}
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content>
+							<DropdownMenu.Label>Theme</DropdownMenu.Label>
+							<DropdownMenu.Separator />
+							<DropdownMenu.RadioGroup bind:value={theme}>
+								{#each themes as availableTheme}
+									<DropdownMenu.RadioItem
+										class="cursor-pointer data-[disabled]:opacity-75"
+										value={availableTheme.value}
+										disabled={theme === availableTheme.value}
+										onclick={() => {
+											return availableTheme.value === "system"
+												? resetMode()
+												: setMode(availableTheme.value);
+										}}
+									>
+										<availableTheme.icon class="mr-2 size-4" />
+										<span>{availableTheme.label}</span>
+									</DropdownMenu.RadioItem>
+								{/each}
+							</DropdownMenu.RadioGroup>
+						</DropdownMenu.Content>
+					</DropdownMenu.Root>
+				</nav>
+			</div>
+		</div>
+	</div>
+	{#if newsToDisplay}
+		<div class="flex items-center bg-primary/90">
+			<span class="mx-auto my-1 px-4 text-center">{newsToDisplay.content}</span>
+			<Button
+				variant="ghost"
+				class="mr-4 h-auto rounded-none px-3 py-2 transition-transform hover:scale-110 hover:rotate-90 hover:bg-background/0"
+				onclick={() => {
+					if (!newsToDisplay) return;
+					localStorage.setItem(
+						closedNewsKey,
+						JSON.stringify([...getClosedNewsIds(), newsToDisplay.id])
+					);
+					newsToDisplay = undefined;
+				}}
+			>
+				<X class="size-4" />
+			</Button>
+		</div>
+	{/if}
+</header>
diff --git a/static/fonts/GTSuperDisplay-Bold.woff b/static/fonts/GTSuperDisplay-Bold.woff
new file mode 100644
index 00000000..d4182a31
Binary files /dev/null and b/static/fonts/GTSuperDisplay-Bold.woff differ
diff --git a/static/fonts/GTSuperDisplay-Bold.woff2 b/static/fonts/GTSuperDisplay-Bold.woff2
new file mode 100644
index 00000000..c4837d5e
Binary files /dev/null and b/static/fonts/GTSuperDisplay-Bold.woff2 differ
diff --git a/static/fonts/GTSuperDisplay-BoldItalic.woff b/static/fonts/GTSuperDisplay-BoldItalic.woff
new file mode 100644
index 00000000..af2bc2b9
Binary files /dev/null and b/static/fonts/GTSuperDisplay-BoldItalic.woff differ
diff --git a/static/fonts/GTSuperDisplay-BoldItalic.woff2 b/static/fonts/GTSuperDisplay-BoldItalic.woff2
new file mode 100644
index 00000000..5f2777a6
Binary files /dev/null and b/static/fonts/GTSuperDisplay-BoldItalic.woff2 differ
diff --git a/static/fonts/GTSuperDisplay-Light.woff b/static/fonts/GTSuperDisplay-Light.woff
new file mode 100644
index 00000000..9f2ace60
Binary files /dev/null and b/static/fonts/GTSuperDisplay-Light.woff differ
diff --git a/static/fonts/GTSuperDisplay-Light.woff2 b/static/fonts/GTSuperDisplay-Light.woff2
new file mode 100644
index 00000000..646e42c5
Binary files /dev/null and b/static/fonts/GTSuperDisplay-Light.woff2 differ
diff --git a/static/fonts/GTSuperDisplay-LightItalic.woff b/static/fonts/GTSuperDisplay-LightItalic.woff
new file mode 100644
index 00000000..5eb084be
Binary files /dev/null and b/static/fonts/GTSuperDisplay-LightItalic.woff differ
diff --git a/static/fonts/GTSuperDisplay-LightItalic.woff2 b/static/fonts/GTSuperDisplay-LightItalic.woff2
new file mode 100644
index 00000000..7971e4c9
Binary files /dev/null and b/static/fonts/GTSuperDisplay-LightItalic.woff2 differ
diff --git a/static/fonts/GTSuperDisplay-Medium.woff b/static/fonts/GTSuperDisplay-Medium.woff
new file mode 100644
index 00000000..16870b61
Binary files /dev/null and b/static/fonts/GTSuperDisplay-Medium.woff differ
diff --git a/static/fonts/GTSuperDisplay-Medium.woff2 b/static/fonts/GTSuperDisplay-Medium.woff2
new file mode 100644
index 00000000..3827e514
Binary files /dev/null and b/static/fonts/GTSuperDisplay-Medium.woff2 differ
diff --git a/static/fonts/GTSuperDisplay-MediumItalic.woff b/static/fonts/GTSuperDisplay-MediumItalic.woff
new file mode 100644
index 00000000..72f0a109
Binary files /dev/null and b/static/fonts/GTSuperDisplay-MediumItalic.woff differ
diff --git a/static/fonts/GTSuperDisplay-MediumItalic.woff2 b/static/fonts/GTSuperDisplay-MediumItalic.woff2
new file mode 100644
index 00000000..b491fc63
Binary files /dev/null and b/static/fonts/GTSuperDisplay-MediumItalic.woff2 differ
diff --git a/static/fonts/GTSuperDisplay-Regular.woff b/static/fonts/GTSuperDisplay-Regular.woff
new file mode 100644
index 00000000..6a7fc2b0
Binary files /dev/null and b/static/fonts/GTSuperDisplay-Regular.woff differ
diff --git a/static/fonts/GTSuperDisplay-Regular.woff2 b/static/fonts/GTSuperDisplay-Regular.woff2
new file mode 100644
index 00000000..0bd29832
Binary files /dev/null and b/static/fonts/GTSuperDisplay-Regular.woff2 differ
diff --git a/static/fonts/GTSuperDisplay-RegularItalic.woff b/static/fonts/GTSuperDisplay-RegularItalic.woff
new file mode 100644
index 00000000..7c764d89
Binary files /dev/null and b/static/fonts/GTSuperDisplay-RegularItalic.woff differ
diff --git a/static/fonts/GTSuperDisplay-RegularItalic.woff2 b/static/fonts/GTSuperDisplay-RegularItalic.woff2
new file mode 100644
index 00000000..4d300066
Binary files /dev/null and b/static/fonts/GTSuperDisplay-RegularItalic.woff2 differ
diff --git a/static/fonts/GTSuperDisplay-SuperItalic.woff b/static/fonts/GTSuperDisplay-SuperItalic.woff
new file mode 100644
index 00000000..7c98650f
Binary files /dev/null and b/static/fonts/GTSuperDisplay-SuperItalic.woff differ
diff --git a/static/fonts/GTSuperDisplay-SuperItalic.woff2 b/static/fonts/GTSuperDisplay-SuperItalic.woff2
new file mode 100644
index 00000000..0b74123e
Binary files /dev/null and b/static/fonts/GTSuperDisplay-SuperItalic.woff2 differ
diff --git a/static/fonts/gt-super.css b/static/fonts/gt-super.css
new file mode 100644
index 00000000..4363d988
--- /dev/null
+++ b/static/fonts/gt-super.css
@@ -0,0 +1,81 @@
+@font-face {
+    font-family: 'GT Super Display';
+    src: url('/fonts/GTSuperDisplay-RegularItalic.woff2') format('woff2'),
+        url('/fonts/GTSuperDisplay-RegularItalic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GT Super Display';
+    src: url('/fonts/GTSuperDisplay-Light.woff2') format('woff2'),
+        url('/fonts/GTSuperDisplay-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GT Super Display';
+    src: url('/fonts/GTSuperDisplay-Bold.woff2') format('woff2'),
+        url('/fonts/GTSuperDisplay-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GT Super Display';
+    src: url('/fonts/GTSuperDisplay-Regular.woff2') format('woff2'),
+        url('/fonts/GTSuperDisplay-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GT Super Display';
+    src: url('/fonts/GTSuperDisplay-MediumItalic.woff2') format('woff2'),
+        url('/fonts/GTSuperDisplay-MediumItalic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GT Super Display';
+    src: url('/fonts/GTSuperDisplay-Medium.woff2') format('woff2'),
+        url('/fonts/GTSuperDisplay-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GT Super Display';
+    src: url('/fonts/GTSuperDisplay-BoldItalic.woff2') format('woff2'),
+        url('/fonts/GTSuperDisplay-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GT Super Display Super';
+    src: url('/fonts/GTSuperDisplay-SuperItalic.woff2') format('woff2'),
+        url('/fonts/GTSuperDisplay-SuperItalic.woff') format('woff');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'GT Super Display';
+    src: url('/fonts/GTSuperDisplay-LightItalic.woff2') format('woff2'),
+        url('/fonts/GTSuperDisplay-LightItalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+