diff --git a/app/root.tsx b/app/root.tsx
index 6f01e77..1601934 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -32,7 +32,7 @@ import {
 	getConfetti,
 } from '#app/utils/confetti.server.ts'
 import { ToastSchema, createCookie, getToast } from '#app/utils/toast.server.ts'
-import '#app/styles/global.css'
+import globalStyles from '#app/styles/global.css?url'
 import Icon from '#app/components/Icon.tsx'
 import Toaster from '#app/components/toast.tsx'
 import { staticPageOptions } from '#app/constants/static-page-options.ts'
@@ -166,6 +166,7 @@ export const links: LinksFunction = () => [
 	{ rel: 'icon', href: favicon, type: 'image/svg+xml' },
 	{ rel: 'apple-touch-icon', href: favicon, type: 'image/svg+xml' },
 	{ rel: 'mask-icon', href: favicon, color: '#000000' },
+	{ rel: 'stylesheet', href: globalStyles },
 ]
 
 function App() {
diff --git a/app/routes/$staticPageSlug.tsx b/app/routes/$staticPageSlug.tsx
index 19b42f9..a452ed9 100644
--- a/app/routes/$staticPageSlug.tsx
+++ b/app/routes/$staticPageSlug.tsx
@@ -2,14 +2,15 @@ import type BaseBlockContent from '@sanity/block-content-to-react'
 import {
 	type LoaderFunctionArgs,
 	type MetaFunction,
+	type LinksFunction,
 	json,
 } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { BlockContent } from '#app/sanity/block-content.tsx'
 import { loadQuery } from '#app/sanity/loader.server.ts'
 import { createStaticPageQueryBySlug } from '#app/sanity/queries.ts'
-import '#app/styles/block.css'
-import '#app/styles/block-static-page.css'
+import blockStyles from '#app/styles/block.css?url'
+import staticPageStyles from '#app/styles/block-static-page.css?url'
 import { toPlainText } from '#app/sanity/misc.ts'
 import { invariantResponse } from '#app/utils/misc.server.ts'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -18,6 +19,19 @@ export function ErrorBoundary() {
 	return <GeneralErrorBoundary />
 }
 
+export const links: LinksFunction = () => {
+	return [
+		{
+			rel: 'stylesheet',
+			href: blockStyles,
+		},
+		{
+			rel: 'stylesheet',
+			href: staticPageStyles,
+		},
+	]
+}
+
 type StaticPage = {
 	title: string
 	body: React.ComponentProps<typeof BaseBlockContent>['blocks']
diff --git a/app/routes/articles_.$categorySlug_.$postSlug.tsx b/app/routes/articles_.$categorySlug_.$postSlug.tsx
index f4515d6..9dc3acb 100644
--- a/app/routes/articles_.$categorySlug_.$postSlug.tsx
+++ b/app/routes/articles_.$categorySlug_.$postSlug.tsx
@@ -2,6 +2,7 @@ import {
 	type LoaderFunctionArgs,
 	type MetaFunction,
 	type ActionFunctionArgs,
+	type LinksFunction,
 	json,
 } from '@remix-run/node'
 import {
@@ -23,8 +24,8 @@ import Icon from '#app/components/Icon.tsx'
 import { Link as CustomLink } from '#app/components/ui/link.tsx'
 import { prisma } from '#app/utils/prisma-client.server.ts'
 import { getUser } from '#app/utils/use-user.server'
-import '#app/styles/block.css'
-import '#app/styles/block-post.css'
+import blockStyles from '#app/styles/block.css?url'
+import postStyles from '#app/styles/block-post.css?url'
 import { type loader as rootLoader } from '#app/root.tsx'
 import { type Posts } from '#app/components/posts-block.tsx'
 import {
@@ -36,6 +37,19 @@ import { postReactionTypes } from '#app/constants/post-reactions.ts'
 import { BlockContent } from '#app/sanity/block-content.tsx'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 
+export const links: LinksFunction = () => {
+	return [
+		{
+			rel: 'stylesheet',
+			href: blockStyles,
+		},
+		{
+			rel: 'stylesheet',
+			href: postStyles,
+		},
+	]
+}
+
 export function ErrorBoundary() {
 	const params = useParams()
 
diff --git a/app/routes/author_.$authorSlug.tsx b/app/routes/author_.$authorSlug.tsx
index 6f15a48..e7ce39c 100644
--- a/app/routes/author_.$authorSlug.tsx
+++ b/app/routes/author_.$authorSlug.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx'
 import {
 	type LoaderFunctionArgs,
 	type MetaFunction,
+	type LinksFunction,
 	json,
 } from '@remix-run/node'
 import {
@@ -24,13 +25,22 @@ import {
 import { invariantResponse } from '#app/utils/misc.server.ts'
 import { type loader as rootLoader } from '#app/root.tsx'
 import { BlockContent } from '#app/sanity/block-content.tsx'
-import '#app/styles/block.css'
+import blockStyles from '#app/styles/block.css?url'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 
 export function ErrorBoundary() {
 	return <GeneralErrorBoundary />
 }
 
+export const links: LinksFunction = () => {
+	return [
+		{
+			rel: 'stylesheet',
+			href: blockStyles,
+		},
+	]
+}
+
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	const authorName = `${data?.author.firstName} "${data?.author.nickname}" ${data?.author.lastName}`
 	const title = data
diff --git a/package-lock.json b/package-lock.json
index 88bd84c..98730b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,7 @@
 	"requires": true,
 	"packages": {
 		"": {
+			"hasInstallScript": true,
 			"dependencies": {
 				"@conform-to/react": "^0.9.1",
 				"@conform-to/zod": "^0.9.1",
@@ -47,6 +48,7 @@
 				"remix-auth-socials": "^2.0.5",
 				"remix-utils": "^7.1.0",
 				"sonner": "^1.2.3",
+				"vite": "^5.1.1",
 				"zod": "^3.22.4"
 			},
 			"devDependencies": {
@@ -77,7 +79,6 @@
 				"tailwindcss": "^3.4.1",
 				"tsx": "^3.12.7",
 				"typescript": "^5.0.4",
-				"vite": "^5.0.11",
 				"vitest": "^1.1.0"
 			},
 			"engines": {
@@ -11487,9 +11488,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.32",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
-			"integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
+			"version": "8.4.35",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
+			"integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -14776,12 +14777,12 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "5.0.11",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.11.tgz",
-			"integrity": "sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==",
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-5.1.1.tgz",
+			"integrity": "sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==",
 			"dependencies": {
 				"esbuild": "^0.19.3",
-				"postcss": "^8.4.32",
+				"postcss": "^8.4.35",
 				"rollup": "^4.2.0"
 			},
 			"bin": {
diff --git a/package.json b/package.json
index 246f8eb..e5bacbb 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
 		"remix-auth-socials": "^2.0.5",
 		"remix-utils": "^7.1.0",
 		"sonner": "^1.2.3",
+		"vite": "^5.1.1",
 		"zod": "^3.22.4"
 	},
 	"devDependencies": {
@@ -90,7 +91,6 @@
 		"tailwindcss": "^3.4.1",
 		"tsx": "^3.12.7",
 		"typescript": "^5.0.4",
-		"vite": "^5.0.11",
 		"vitest": "^1.1.0"
 	},
 	"engines": {