diff --git a/components.json b/components.json
index 1972f24..1c3517c 100644
--- a/components.json
+++ b/components.json
@@ -3,7 +3,7 @@
   "style": "new-york",
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "src/lib/app.pcss",
+    "css": "src/lib/app.css",
     "baseColor": "zinc"
   },
   "aliases": {
diff --git a/src/lib/app.pcss b/src/lib/app.css
similarity index 100%
rename from src/lib/app.pcss
rename to src/lib/app.css
diff --git a/src/lib/styles/markdown.pcss b/src/lib/styles/markdown.css
similarity index 100%
rename from src/lib/styles/markdown.pcss
rename to src/lib/styles/markdown.css
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e82f03e..37290c7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,49 +1,49 @@
 <script lang="ts">
-	import '$lib/app.pcss';
-	import Navbar from '$lib/components/Navbar/Navbar.svelte';
-	import { ModeWatcher } from 'mode-watcher';
-	import '@fontsource/geist-sans/latin.css';
-	import '@fontsource/geist-mono/latin.css';
-	import '@fontsource/zilla-slab/latin.css';
-	import '@fontsource/merriweather/latin.css';
-	import Footer from '$lib/components/Footer.svelte';
-	import { Toaster } from '$lib/components/ui/sonner';
-	import { onMount } from 'svelte';
-	import { afterNavigate, beforeNavigate } from '$app/navigation';
-	import Loading from '$lib/components/Loading.svelte';
+  import '$lib/app.css'
+  import Navbar from '$lib/components/Navbar/Navbar.svelte'
+  import { ModeWatcher } from 'mode-watcher'
+  import '@fontsource/geist-sans/latin.css'
+  import '@fontsource/geist-mono/latin.css'
+  import '@fontsource/zilla-slab/latin.css'
+  import '@fontsource/merriweather/latin.css'
+  import Footer from '$lib/components/Footer.svelte'
+  import { Toaster } from '$lib/components/ui/sonner'
+  import { onMount } from 'svelte'
+  import { afterNavigate, beforeNavigate } from '$app/navigation'
+  import Loading from '$lib/components/Loading.svelte'
 
-	let root: HTMLElement | null;
-	let navigating = false;
+  let root: HTMLElement | null
+  let navigating = false
 
-	onMount(() => {
-		root = document.getElementsByTagName('html')[0];
+  onMount(() => {
+    root = document.getElementsByTagName('html')[0]
 
-		root?.classList.add('smoothscroll');
+    root?.classList.add('smoothscroll')
 
-		navigating = false;
-	});
+    navigating = false
+  })
 
-	beforeNavigate(() => {
-		navigating = true;
-		root?.classList.remove('smoothscroll');
-	});
+  beforeNavigate(() => {
+    navigating = true
+    root?.classList.remove('smoothscroll')
+  })
 
-	afterNavigate(() => {
-		navigating = false;
-		root?.classList.add('smoothscroll');
-	});
+  afterNavigate(() => {
+    navigating = false
+    root?.classList.add('smoothscroll')
+  })
 </script>
 
 <Toaster />
 <ModeWatcher />
 
 {#if navigating}
-	<Loading />
+  <Loading />
 {/if}
 
 <Navbar />
 <div class="pt-16 lg:pt-24">
-	<slot />
+  <slot />
 </div>
 
 <Footer />
diff --git a/src/routes/blog/[...slug]/+page.svelte b/src/routes/blog/[...slug]/+page.svelte
index 3e41ccc..fa3371f 100644
--- a/src/routes/blog/[...slug]/+page.svelte
+++ b/src/routes/blog/[...slug]/+page.svelte
@@ -5,7 +5,7 @@
   import StickyToc from '$lib/components/Toc/StickyToc.svelte'
   import TocHeader from '$lib/components/Toc/TocHeader.svelte'
   import '$lib/styles/katex.css'
-  import '$lib/styles/markdown.pcss'
+  import '$lib/styles/markdown.css'
   import '$lib/styles/tokyo-night-dark.min.css'
 
   const tocStore = createTocStore()