diff --git a/web/src/app.css b/web/src/app.css
index 1413024..5da669b 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -5,6 +5,7 @@
 @layer base {
 	html {
 		@apply antialiased;
+		font-size: 14px;
 	}
 }
 
diff --git a/web/src/app.html b/web/src/app.html
index d453858..a92a70c 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -23,14 +23,7 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link
-			href="https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Domine:wght@400;500;600;700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Nanum+Gothic:wght@400;700;800&family=Nunito+Sans:ital,opsz,wght@0,6..12,200;0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;0,6..12,900;0,6..12,1000;1,6..12,200;1,6..12,300;1,6..12,400;1,6..12,500;1,6..12,600;1,6..12,700;1,6..12,800;1,6..12,900;1,6..12,1000&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Varela+Round&family=Vollkorn:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-			rel="stylesheet"
-		/>
-
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link
-			href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+			href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
 			rel="stylesheet"
 		/>
 	</head>
diff --git a/web/src/lib/Hadith.svelte b/web/src/lib/Hadith.svelte
index 0077a2f..8133ea1 100644
--- a/web/src/lib/Hadith.svelte
+++ b/web/src/lib/Hadith.svelte
@@ -101,7 +101,7 @@
 	transition:slide
 	class="max-w-4xl space-y-2 bg-white p-4 shadow dark:bg-storm-600 md:rounded-lg md:p-6"
 >
-	<div class="flex flex-row items-center font-semibold">
+	<div class="flex flex-row items-center">
 		<div class="w-full dark:text-gray-300">
 			<h2 class="leading-tight">{hadith.collection}</h2>
 			<span class="flex text-xs text-gray-600 dark:text-gray-400">
@@ -124,14 +124,14 @@
 	</div>
 	<div class="text-md flex flex-col gap-2 py-2">
 		{#if hadith.narrator_en}
-			<p class="text-sm font-medium text-gray-500 dark:text-gray-400">
+			<p class="text-sm text-gray-500 dark:text-gray-400">
 				{hadith.narrator_en}
 			</p>
 		{/if}
 		<p class="font-serif dark:text-gray-300">
 			{#each hadith.body_en.split(' ') as word}
 				{#if hadith.highlights && hadith.highlights.includes(word.replace(/[.,/#!$%^&*;:{}=\-_`~()"']/g, ''))}
-					<span class="font-bold dark:text-emerald-600">{word} </span>
+					<span class="font-bold text-emerald-600">{word} </span>
 				{:else}
 					<span class="">{word} </span>
 				{/if}
@@ -139,14 +139,14 @@
 		</p>
 	</div>
 	<div class="flex space-x-2">
-		<div class="flex w-full flex-col pt-2 text-xs font-medium text-gray-500 dark:text-gray-400">
+		<div class="flex w-full flex-col pt-2 text-xs text-gray-500 dark:text-gray-400">
 			<span>Book: {hadith.book_en} </span>
 			<p class="">
 				{#if hadith.chapter_en}
 					Chapter:
 					{#each hadith.chapter_en.split(' ') as word}
 						{#if hadith.highlights && hadith.highlights.includes(word.replace(/[.,/#!$%^&*;:{}=\-_`~()"']/g, ''))}
-							<span class="font-bold dark:text-emerald-600">{word} </span>
+							<span class="font-bold text-emerald-600">{word} </span>
 						{:else}
 							<span class="">{word} </span>
 						{/if}
@@ -160,7 +160,7 @@
 		<div class="mt-2 flex justify-end">
 			<button
 				aria-label="Copy Hadith"
-				class="my-auto h-7 rounded-lg border border-gray-300 px-2 text-xs font-semibold text-gray-600 transition duration-200 ease-in-out hover:bg-gray-800 hover:text-white dark:border-gray-700 dark:bg-storm-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				class="my-auto h-7 rounded-lg border border-gray-300 px-2 text-xs text-gray-600 transition duration-200 ease-in-out hover:bg-gray-800 hover:text-white dark:border-gray-700 dark:bg-storm-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-200"
 				on:click={copyText}
 			>
 				{copied ? 'Copied' : 'Copy'}
diff --git a/web/src/lib/Nav.svelte b/web/src/lib/Nav.svelte
index f024c6b..ab36830 100644
--- a/web/src/lib/Nav.svelte
+++ b/web/src/lib/Nav.svelte
@@ -36,12 +36,10 @@
 </script>
 
 <nav
-	class="sticky top-0 z-10 border-b border-gray-200 bg-white p-2 shadow-sm dark:border-gray-700 dark:bg-storm-800 md:p-4"
+	class="sticky top-0 z-10 border-b border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-storm-800"
 >
 	<div class="mx-auto max-w-7xl">
-		<ul
-			class="flex flex-row justify-end gap-4 text-sm font-medium text-gray-600 dark:text-gray-300"
-		>
+		<ul class="flex flex-row justify-end gap-4 text-sm text-gray-600 dark:text-gray-300">
 			<li>
 				<a class="flex flex-row items-center gap-1 hover:underline" href="/">
 					<SearchSvg />
@@ -58,7 +56,7 @@
 				<li>
 					<button
 						aria-label="Install App"
-						class="flex flex-row items-center gap-1 font-medium hover:underline"
+						class="flex flex-row items-center gap-1 hover:underline"
 						on:click={install}
 					>
 						<DownloadSvg />
diff --git a/web/src/routes/book/+page.svelte b/web/src/routes/book/+page.svelte
index 4e70026..c236b7f 100644
--- a/web/src/routes/book/+page.svelte
+++ b/web/src/routes/book/+page.svelte
@@ -57,7 +57,7 @@
 		</div>
 	{/if}
 	{#if $searchKey}
-		<div class="mb-20 mt-10 flex items-center justify-center font-normal underline">
+		<div class="mb-20 mt-10 flex items-center justify-center underline">
 			<a
 				href="/?search={$searchKey}"
 				class="text-sm text-blue-700 hover:text-blue-500 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index 52e2845..1c43ec7 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -16,33 +16,29 @@ module.exports = {
 					800: '#111111',
 					900: '#0d0d0d'
 				}
+			},
+			fontSize: {
+				reading: '1.05rem'
 			}
 		},
 		fontFamily: {
-			sans: [
-				'Open Sans',
-				'Work Sans',
-				'Rubik',
-				'Inter',
-				'PT Sans',
-				'Lato',
-				'Nunito',
-				'Poppins',
-				'Varela Round',
-				'Fira Sans',
-				'Roboto Slab',
-				'sans-serif'
-			],
-			serif: [
-				'Bitter',
-				'Domine',
-				'PT Serif',
-				'Lora',
-				'Vollkorn',
-				'Merriweather',
-				'Poppins',
-				'serif'
-			]
+			sans: ['Merriweather Sans', 'sans-serif'],
+			serif: ['Merriweather', 'serif']
+		},
+		fontSize: {
+			xs: ['10px', '12px'],
+			sm: ['12px', '16px'],
+			base: ['14px', '20px'],
+			lg: ['16px', '24px'],
+			xl: ['18px', '28px'],
+			'2xl': ['20px', '32px'],
+			'3xl': ['24px', '36px'],
+			'4xl': ['30px', '42px'],
+			'5xl': ['36px', '48px'],
+			'6xl': ['48px', '56px'],
+			'7xl': ['64px', '72px'],
+			'8xl': ['72px', '80px'],
+			'9xl': ['96px', '104px']
 		}
 	},
 	plugins: [],