diff --git a/new-web/bun.lockb b/new-web/bun.lockb
index bdd21ea..07d55d5 100755
Binary files a/new-web/bun.lockb and b/new-web/bun.lockb differ
diff --git a/new-web/package.json b/new-web/package.json
index 7ef445b..91a547f 100644
--- a/new-web/package.json
+++ b/new-web/package.json
@@ -12,7 +12,12 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@iconify-json/heroicons": "^1.2.1",
 		"@iconify-json/heroicons-outline": "^1.2.0",
+		"@iconify-json/mage": "^1.2.1",
+		"@iconify-json/mdi": "^1.2.1",
+		"@iconify-json/simple-icons": "^1.2.12",
+		"@iconify-json/teenyicons": "^1.2.1",
 		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/kit": "^2.7.4",
 		"@sveltejs/vite-plugin-svelte": "^3.1.2",
diff --git a/new-web/src/app.css b/new-web/src/app.css
index d05520c..f781dbb 100644
--- a/new-web/src/app.css
+++ b/new-web/src/app.css
@@ -91,9 +91,9 @@ html {
 }
 
 @layer base {
-	/**
-   * Shiki
-   */
+	/* Shiki */
+	/* --shiki-light: white; */
+	/* --shiki-dark: black; */
 	pre.shiki {
 		counter-reset: line-number;
 	}
@@ -104,14 +104,14 @@ html {
 
 	pre.shiki,
 	pre.shiki span {
-		color: var(--shiki-light) !important;
+		/* color: var(--shiki-light) !important; */
 		background-color: transparent;
 	}
 
-	/* html.dark pre.shiki,
+	html.dark pre.shiki,
 	html.dark pre.shiki span {
 		color: var(--shiki-dark) !important;
-	} */
+	}
 
 	pre.shiki .line {
 		counter-increment: line-number;
diff --git a/new-web/src/lib/elements/ArticlePage.svelte b/new-web/src/lib/elements/ArticlePage.svelte
index c427294..03dab0f 100644
--- a/new-web/src/lib/elements/ArticlePage.svelte
+++ b/new-web/src/lib/elements/ArticlePage.svelte
@@ -2,9 +2,9 @@
 	import Header from '$lib/elements/Header.svelte';
 	import { formatDate } from '$lib/utils/dateFormatter';
 	import { onMount } from 'svelte';
-	import Icon from '@iconify/svelte';
 	import ImageZoom from '$lib/elements/ImageZoom.svelte';
 	import Skeleton from '$lib/components/ui/skeleton/skeleton.svelte';
+	import Footer from '$lib/elements/Footer.svelte';
 
 	let data = {
 		title: 'UploadThing is 5x Faster',
@@ -51,7 +51,7 @@
 			href="/"
 			class="flex items-center justify-center transition bg-white rounded-full shadow-md text-primary hover:text-primary/90 group size-8 shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0 dark:ring-white/10 dark:hover:border-zinc-700 dark:hover:ring-white/20"
 		>
-			<Icon icon="heroicons:arrow-left-20-solid" class="size-6" />
+			<span class="icon-[heroicons--arrow-left-20-solid] size-6" />
 		</a>
 		<a href="/" class="font-bold text-primary hover:text-primary/90"> Original article</a>
 	</nav>
@@ -154,6 +154,8 @@
 	</div>
 </main>
 
+<Footer />
+
 <style lang="postcss">
 	/* Headings */
 	:global(.prose h1) {
diff --git a/new-web/src/lib/elements/BlogCard.svelte b/new-web/src/lib/elements/BlogCard.svelte
index 8f38579..3f3f5d7 100644
--- a/new-web/src/lib/elements/BlogCard.svelte
+++ b/new-web/src/lib/elements/BlogCard.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
 	import Lazy from 'svelte-lazy';
 
 	const sizes = ['small', 'medium', 'large'];
@@ -60,7 +59,7 @@
 		<div
 			class="flex flex-wrap items-center p-4 mt-2 space-x-2 text-sm text-gray-500 dark:text-white"
 		>
-			<Icon icon="mage:medium" class="w-4 h-4 mr-1" />
+			<span class="icon-[mage--medium] size-4 mr-1" />
 			{#if collection}
 				<div class="flex items-center">
 					<img
diff --git a/new-web/src/lib/elements/BookmarkButton.svelte b/new-web/src/lib/elements/BookmarkButton.svelte
index bd36d01..0bb20b4 100644
--- a/new-web/src/lib/elements/BookmarkButton.svelte
+++ b/new-web/src/lib/elements/BookmarkButton.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
 	import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import * as Dialog from '$lib/components/ui/dialog';
@@ -22,7 +21,7 @@
 	<Dialog.Root bind:open>
 		<Dialog.Trigger class="w-full">
 			<DropdownMenu.Item on:click={($event) => $event.preventDefault()}>
-				<Icon icon="mdi:bookmark" class="w-4 h-4 mr-2" />
+				<span class="icon-[mdi--bookmark] size-4 mr-2" />
 				<span>Bookmark</span>
 			</DropdownMenu.Item>
 		</Dialog.Trigger>
@@ -57,7 +56,7 @@
 										`javascript:window.location="https://freedium.cfd/"+encodeURIComponent(window.location)"`
 									)}
 							>
-								<Icon icon="mdi:content-copy" class="w-4 h-4" />
+								<span class="icon-[mdi--content-copy] size-4" />
 							</Button>
 						</div>
 						<p class="mb-2">Create a new bookmark with the following code as the URL:</p>
@@ -79,7 +78,7 @@
 										`javascript:(function(){window.open("https://freedium.cfd/"+encodeURIComponent(window.location))})();`
 									)}
 							>
-								<Icon icon="mdi:content-copy" class="w-4 h-4" />
+								<span class="icon-[mdi--content-copy] w-4 h-4" />
 							</Button>
 						</div>
 
@@ -101,7 +100,7 @@
 	<Drawer.Root bind:open>
 		<Drawer.Trigger class="w-full">
 			<DropdownMenu.Item on:click={($event) => $event.preventDefault()}>
-				<Icon icon="mdi:bookmark" class="w-4 h-4 mr-2" />
+				<span class="icon-[mdi--bookmark] w-4 h-4 mr-2" />
 				<span>Bookmark</span>
 			</DropdownMenu.Item>
 		</Drawer.Trigger>
@@ -134,7 +133,7 @@
 										`javascript:window.location="https://freedium.cfd/"+encodeURIComponent(window.location)"`
 									)}
 							>
-								<Icon icon="mdi:content-copy" class="w-4 h-4" />
+								<span class="icon-[mdi--content-copy] w-4 h-4" />
 							</Button>
 						</div>
 						<p class="mb-2">Create a new bookmark with the following code as the URL:</p>
@@ -156,7 +155,7 @@
 										`javascript:(function(){window.open("https://freedium.cfd/"+encodeURIComponent(window.location))})();`
 									)}
 							>
-								<Icon icon="mdi:content-copy" class="w-4 h-4" />
+								<span class="icon-[mdi--content-copy] w-4 h-4" />
 							</Button>
 						</div>
 
diff --git a/new-web/src/lib/elements/ExtensionsButton.svelte b/new-web/src/lib/elements/ExtensionsButton.svelte
index 1a510f9..474013a 100644
--- a/new-web/src/lib/elements/ExtensionsButton.svelte
+++ b/new-web/src/lib/elements/ExtensionsButton.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import BookmarkButton from './BookmarkButton.svelte';
@@ -11,7 +10,7 @@
 			builders={[builder]}
 			variant="ghost"
 			class="px-3 text-gray-600 py-7 dark:text-white hover:text-primary dark:hover:text-primary"
-			><Icon icon="mdi:puzzle" class="size-5" /></Button
+			><span class="icon-[mdi--puzzle] size-5" /></Button
 		>
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content class="w-56 text-zinc-600 dark:text-zinc-300 ">
@@ -28,14 +27,14 @@
 		<DropdownMenu.Separator />
 		<DropdownMenu.Group>
 			<DropdownMenu.Item>
-				<Icon icon="mdi:firefox" class="w-4 h-4 mr-2" />
+				<span class="icon-[mdi--firefox] w-4 h-4 mr-2" />
 				<span>Firefox</span>
-				<Icon icon="heroicons-outline:external-link" class="size-3.5" />
+				<span class="icon-[heroicons-outline--external-link] size-3.5" />
 			</DropdownMenu.Item>
 			<DropdownMenu.Item>
-				<Icon icon="mdi:google-chrome" class="w-4 h-4 mr-2" />
+				<span class="icon-[mdi--google-chrome] w-4 h-4 mr-2" />
 				<span>Chrome</span>
-				<Icon icon="heroicons-outline:external-link" class="size-3.5" />
+				<span class="icon-[heroicons-outline--external-link] size-3.5" />
 			</DropdownMenu.Item>
 		</DropdownMenu.Group>
 		<DropdownMenu.Separator />
@@ -45,9 +44,9 @@
 				href="https://gist.github.com/mathix420/e0604ab0e916622972372711d2829555"
 				target="_blank"
 			>
-				<Icon icon="mdi:script-text" class="w-4 h-4 mr-2" />
+				<span class="icon-[mdi--script-text] w-4 h-4 mr-2" />
 				<span>Userscript - only Medium</span>
-				<Icon icon="heroicons-outline:external-link" class="size-3.5" />
+				<span class="icon-[heroicons-outline--external-link] size-3.5" />
 			</a>
 		</DropdownMenu.Item>
 		<DropdownMenu.Separator />
diff --git a/new-web/src/lib/elements/Footer.svelte b/new-web/src/lib/elements/Footer.svelte
index 31caff1..8217cea 100644
--- a/new-web/src/lib/elements/Footer.svelte
+++ b/new-web/src/lib/elements/Footer.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
 	import { Button } from '$lib/components/ui/button/index.js';
 </script>
 
@@ -40,7 +39,7 @@
 				target="_blank"
 				rel="noopener noreferrer"
 			>
-				<Icon class="size-5" icon="simple-icons:github" />
+				<span class="icon-[simple-icons--github] size-5" />
 			</Button>
 			<Button
 				variant="ghost"
@@ -49,7 +48,7 @@
 				target="_blank"
 				rel="noopener noreferrer"
 			>
-				<Icon class="size-5" icon="simple-icons:codeberg" />
+				<span class="icon-[simple-icons--codeberg] size-5" />
 			</Button>
 		</div>
 	</div>
diff --git a/new-web/src/lib/elements/Header.svelte b/new-web/src/lib/elements/Header.svelte
index 1ad3e59..88236a5 100644
--- a/new-web/src/lib/elements/Header.svelte
+++ b/new-web/src/lib/elements/Header.svelte
@@ -5,7 +5,6 @@
 	import ReportProblem from './ReportProblem.svelte';
 	import PayButtons from './PayButtons.svelte';
 	import ExtensionsButton from './ExtensionsButton.svelte';
-	import Icon from '@iconify/svelte';
 	import SearchDialog from './SearchDialog.svelte';
 	import { Menu } from 'lucide-svelte';
 
@@ -44,24 +43,24 @@
 				on:click={toggleSearch}
 				aria-label="Open search"
 			>
-				<Icon icon="heroicons:magnifying-glass" />
+				<span class="icon-[heroicons-outline--magnifying-glass]" />
 				<span>Search articles...</span>
 			</Button>
 		</div>
 
 		<div class="items-center hidden space-x-2 md:flex">
 			<Button class="lg:hidden" variant="ghost" size="icon" on:click={toggleSearch}>
-				<Icon class="size-5" icon="heroicons:magnifying-glass" />
+				<span class="icon-[heroicons-outline--magnifying-glass] size-5" />
 			</Button>
 			<ExtensionsButton />
 			<div class="w-px h-6 bg-zinc-300 dark:bg-zinc-700"></div>
-			<PayButtons name="Ko-fi" url="https://ko-fi.com/zhymabekroman" icon="teenyicons:cup-solid" />
+			<PayButtons name="Ko-fi" url="https://ko-fi.com/zhymabekroman" icon="icon-[teenyicons--cup-solid]" />
 			<PayButtons
 				name="Liberapay"
 				url="https://liberapay.com/ZhymabekRoman/"
-				icon="simple-icons:liberapay"
+				icon="icon-[simple-icons--liberapay]"
 			/>
-			<PayButtons name="Discord" url="discord.gg/dAxCuG9nYM" icon="simple-icons:discord" />
+			<PayButtons name="Discord" url="https://discord.gg/dAxCuG9nYM" icon="icon-[simple-icons--discord]" />
 			<div class="w-px h-6 bg-zinc-300 dark:bg-zinc-700"></div>
 			<ThemeToggle />
 			<ReportProblem />
@@ -69,7 +68,7 @@
 
 		<div class="flex items-center space-x-2 md:hidden">
 			<Button class="lg:hidden" variant="ghost" size="icon" on:click={toggleSearch}>
-				<Icon class="size-5" icon="heroicons:magnifying-glass" />
+				<span class="icon-[heroicons-outline--magnifying-glass] size-5" />
 			</Button>
 			<ThemeToggle />
 			<Button
@@ -95,14 +94,14 @@
 				<PayButtons
 					name="Ko-fi"
 					url="https://ko-fi.com/zhymabekroman"
-					icon="teenyicons:cup-solid"
+					icon="icon-[teenyicons--cup-solid]"
 				/>
 				<PayButtons
 					name="Liberapay"
 					url="https://liberapay.com/ZhymabekRoman/"
-					icon="simple-icons:liberapay"
+					icon="icon-[simple-icons--liberapay]"
 				/>
-				<PayButtons name="Discord" url="discord.gg/dAxCuG9nYM" icon="simple-icons:discord" />
+				<PayButtons name="Discord" url="discord.gg/dAxCuG9nYM" icon="icon-[simple-icons--discord]" />
 				<!-- <ExtensionsButton /> -->
 				<ReportProblem />
 			</div>
diff --git a/new-web/src/lib/elements/PayButtons.svelte b/new-web/src/lib/elements/PayButtons.svelte
index c94d2df..5c035bf 100644
--- a/new-web/src/lib/elements/PayButtons.svelte
+++ b/new-web/src/lib/elements/PayButtons.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button/index.js';
-	import Icon from '@iconify/svelte';
 
 	export let name: string;
 	export let url: string;
@@ -9,12 +8,12 @@
 
 <Button variant="ghost" class="w-24 px-3 py-7">
 	<a
-		class="transition-colors text-zinc-600 dark:text-zinc-300 hover:text-primary dark:hover:text-primary"
+		class="flex flex-col items-center gap-1 transition-colors text-zinc-600 dark:text-zinc-300 hover:text-primary dark:hover:text-primary"
 		href={url}
 		target="_blank"
 		rel="noopener noreferrer"
 	>
-		<Icon {icon} class="size-5" />
+		<span class={`${icon} size-5`} />
 		{name}
 	</a>
 </Button>
diff --git a/new-web/src/lib/elements/ReportProblem.svelte b/new-web/src/lib/elements/ReportProblem.svelte
index b76ad60..201cf25 100644
--- a/new-web/src/lib/elements/ReportProblem.svelte
+++ b/new-web/src/lib/elements/ReportProblem.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
 	import { Label, Separator } from 'bits-ui';
 	import { mediaQuery } from 'svelte-legos';
 	import { Textarea } from '$lib/components/ui/textarea/index.js';
@@ -27,7 +26,7 @@
 	<Dialog.Root bind:open>
 		<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>
 			<div class="flex items-center space-x-2 text-white">
-				<Icon icon="heroicons:exclamation-triangle-solid" class="size-5" />
+				<span class="icon-[heroicons--exclamation-triangle-solid] size-5" />
 				<span class="hidden text-sm font-medium lg:block">Report a problem</span>
 			</div>
 		</Dialog.Trigger>
@@ -98,7 +97,7 @@
 	<Drawer.Root bind:open>
 		<Drawer.Trigger class={buttonVariants({ variant: 'default' })}>
 			<div class="flex items-center space-x-2 text-white">
-				<Icon icon="heroicons:exclamation-triangle-solid" class="size-5" />
+				<span class="icon-[heroicons--exclamation-triangle-solid] size-5" />
 				<span class="hidden text-sm font-medium lg:block">Report a problem</span>
 			</div>
 		</Drawer.Trigger>
diff --git a/new-web/src/lib/elements/ThemeToggle.svelte b/new-web/src/lib/elements/ThemeToggle.svelte
index b5d4738..8ac67f8 100644
--- a/new-web/src/lib/elements/ThemeToggle.svelte
+++ b/new-web/src/lib/elements/ThemeToggle.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { browser } from '$app/environment';
 
@@ -32,5 +31,5 @@
 	on:click={handleSwitchDarkMode}
 	variant="ghost"
 >
-	<Icon icon={darkMode ? 'heroicons:moon-solid' : 'heroicons:sun-solid'} class="size-5" />
+	<span class={`${darkMode ? 'icon-[heroicons--moon-solid]' : 'icon-[heroicons--sun-solid]'} size-5`} />
 </Button>