diff --git a/.prettierrc b/.prettierrc
index 31d9a37..8103a0b 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -12,5 +12,5 @@
 			}
 		}
 	],
-	"tailwindStylesheet": "./src/lib/styles/app.css"
+	"tailwindStylesheet": "./src/app.css"
 }
diff --git a/bun.lock b/bun.lock
index d987752..0d6e292 100644
--- a/bun.lock
+++ b/bun.lock
@@ -5,6 +5,7 @@
     "": {
       "name": "rss-privacy-news",
       "dependencies": {
+        "@fontsource/courier-prime": "^5.2.8",
         "fast-xml-parser": "^5.5.8",
         "isomorphic-dompurify": "^3.4.0",
         "js-yaml": "^4.1.1",
@@ -184,6 +185,8 @@
 
     "@exodus/bytes": ["@exodus/bytes@1.15.0", "", { "peerDependencies": { "@noble/hashes": "^1.8.0 || ^2.0.0" }, "optionalPeers": ["@noble/hashes"] }, "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ=="],
 
+    "@fontsource/courier-prime": ["@fontsource/courier-prime@5.2.8", "", {}, "sha512-M3xOCcXnGuFi9TcGCrz4hm5yeWg4Sn35MALRLPnqNoHhawTFvhyi2KSI2+5RyFtDNJrb58bPh8LLipgiI9KA0w=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
diff --git a/package.json b/package.json
index aeda9a7..21ea858 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
 		"wrangler": "^4.76.0"
 	},
 	"dependencies": {
+		"@fontsource/courier-prime": "^5.2.8",
 		"fast-xml-parser": "^5.5.8",
 		"isomorphic-dompurify": "^3.4.0",
 		"js-yaml": "^4.1.1",
diff --git a/src/lib/styles/app.css b/src/app.css
similarity index 98%
rename from src/lib/styles/app.css
rename to src/app.css
index 6b0ab86..ef2e637 100644
--- a/src/lib/styles/app.css
+++ b/src/app.css
@@ -1,6 +1,15 @@
 @import 'https://www.nerdfonts.com/assets/css/webfont.css';
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
+
+.ascii {
+	font-family: 'Courier Prime', monospace;
+}
+
+/*----------------------------------------------------------------------*/
+/* daisyui themes                                                       */
+/*----------------------------------------------------------------------*/
+
 @plugin 'daisyui' {
 	logs: false;
 
diff --git a/src/lib/assets/brand.txt b/src/lib/assets/brand.txt
new file mode 100644
index 0000000..f591058
--- /dev/null
+++ b/src/lib/assets/brand.txt
@@ -0,0 +1,7 @@
+  ▄▄▄▄   ▄▄▄▄         ▄▄▄▄▄▄▄                                    
+▄█████ ▄██████▄       ███▀▀███▄       ▀▀                         
+   ███ ███  ███ ██ ██ ███▄▄███▀ ████▄ ██ ██ ██  ▀▀█▄ ▄████ ██ ██ 
+   ███ ███▄▄███  ███  ███▀▀▀▀   ██ ▀▀ ██ ██▄██ ▄█▀██ ██    ██▄██ 
+   ███  ▀████▀  ██ ██ ███       ██    ██▄ ▀█▀  ▀█▄██ ▀████  ▀██▀ 
+                                                             ██  
+                                                           ▀▀▀   
diff --git a/src/lib/components/brand.svelte b/src/lib/components/brand.svelte
new file mode 100644
index 0000000..5a5f839
--- /dev/null
+++ b/src/lib/components/brand.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import brand from '$lib/assets/brand.txt?raw';
+	import { cn } from '$lib/utils/cn';
+
+	export let brandVariants = {
+		base: 'ascii whitespace-pre text-primary leading-none',
+		size: {
+			lg: 'text-[6px] sm:text-xs md:text-sm  ',
+			default: 'text-xs',
+			xs: 'text-[4px] '
+		}
+	} as const;
+
+	type BrandProps = HTMLAttributes<HTMLPreElement> & {
+		size?: keyof typeof brandVariants.size;
+	};
+</script>
+
+<script lang="ts">
+	let { class: className, size = 'default', ...props }: BrandProps = $props();
+</script>
+
+<div>
+	<pre
+		class={cn(brandVariants.base, brandVariants.size[size], className)}
+		aria-disabled="true"
+		{...props}>{brand}</pre>
+	<span class="sr-only">10xPrivacy</span>
+</div>
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index dd70ea3..3b91fa2 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import Brand from './brand.svelte';
+
 	import { resolve } from '$app/paths';
 	import { Link } from '$lib/components/text';
 	import ThemeChange from '$lib/components/theme-change.svelte';
-	import { LOGO } from '$lib/configs';
 </script>
 
 <nav class="navbar flex-col justify-center gap-y-2 bg-base-100 px-4 shadow-sm">
@@ -10,10 +11,7 @@
 		<!-- logo -->
 		<div class="flex-none">
 			<a class=" text-xl font-bold text-primary" href={resolve('/')}>
-				<pre unselectable="on" class="font-mono text-[2px] leading-none whitespace-pre">
-          {LOGO}
-            <span class="sr-only">10xPrivacy</span>
-        </pre>
+				<Brand size="xs" />
 			</a>
 		</div>
 
diff --git a/src/lib/components/navbar.test.ts b/src/lib/components/navbar.test.ts
index b9cf5b0..ff994ad 100644
--- a/src/lib/components/navbar.test.ts
+++ b/src/lib/components/navbar.test.ts
@@ -7,14 +7,6 @@ vi.mock('theme-change');
 
 describe('Navbar component', () => {
 	describe('URLs', () => {
-		it('home link has correct href', () => {
-			render(Navbar);
-
-			const homeLink = screen.getByRole('link', { name: /10xPrivacy/i });
-
-			expect(homeLink.getAttribute('href')).toBe('/');
-		});
-
 		it('Privacy News link has correct href', () => {
 			render(Navbar);
 			const links = screen.getAllByRole('link', { name: /Privacy News/i });
diff --git a/src/lib/configs.ts b/src/lib/configs.ts
index bd21d6c..6af828f 100644
--- a/src/lib/configs.ts
+++ b/src/lib/configs.ts
@@ -6,17 +6,3 @@ export const FEATURED_CATEGORIES = Object.freeze([
 	'Operating Systems',
 	'Productivity'
 ]);
-
-export const LOGO = `
- ████     █████                ███████████             ███                                           
-▒▒███   ███▒▒▒███             ▒▒███▒▒▒▒▒███           ▒▒▒                                            
- ▒███  ███   ▒▒███ █████ █████ ▒███    ▒███ ████████  ████  █████ █████  ██████    ██████  █████ ████
- ▒███ ▒███    ▒███▒▒███ ▒▒███  ▒██████████ ▒▒███▒▒███▒▒███ ▒▒███ ▒▒███  ▒▒▒▒▒███  ███▒▒███▒▒███ ▒███ 
- ▒███ ▒███    ▒███ ▒▒▒█████▒   ▒███▒▒▒▒▒▒   ▒███ ▒▒▒  ▒███  ▒███  ▒███   ███████ ▒███ ▒▒▒  ▒███ ▒███ 
- ▒███ ▒▒███   ███   ███▒▒▒███  ▒███         ▒███      ▒███  ▒▒███ ███   ███▒▒███ ▒███  ███ ▒███ ▒███ 
- █████ ▒▒▒█████▒   █████ █████ █████        █████     █████  ▒▒█████   ▒▒████████▒▒██████  ▒▒███████ 
-▒▒▒▒▒    ▒▒▒▒▒▒   ▒▒▒▒▒ ▒▒▒▒▒ ▒▒▒▒▒        ▒▒▒▒▒     ▒▒▒▒▒    ▒▒▒▒▒     ▒▒▒▒▒▒▒▒  ▒▒▒▒▒▒    ▒▒▒▒▒███ 
-                                                                                            ███ ▒███ 
-                                                                                           ▒▒██████  
-                                                                                            ▒▒▒▒▒▒   
-`;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d666ba6..e7f0b79 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
+	import '@fontsource/courier-prime';
 	import favicon from '$lib/assets/favicon.png';
 	import Footer from '$lib/components/footer.svelte';
 	import LlmTermsOfServiceLink from '$lib/components/llm-terms-of-service-link.svelte';
 	import Navbar from '$lib/components/navbar.svelte';
-	import '$lib/styles/app.css';
+	import '../app.css';
 
 	let { children } = $props();
 </script>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e393a9d..8fc1d0e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import About from '$lib/components/about.svelte';
-	import { LOGO } from '$lib/configs';
+	import Brand from '$lib/components/brand.svelte';
 </script>
 
 <main class="m-auto flex max-w-3xl flex-col items-center px-4 py-8">
-	<pre
-		class="font-mono text-[5px] leading-none whitespace-pre text-primary sm:text-[10px] md:text-xs">
-		{LOGO}
-	</pre>
+	<Brand size="lg" />
 
 	<div class="mx-auto mt-6 flex flex-col items-center gap-4 sm:mt-20 sm:flex-row">
 		<a class="btn btn-primary" href={resolve('/privacy-news')}> Privacy News </a>