diff --git a/.prettierrc.cjs b/.prettierrc.cjs
index 4a49707..7772ceb 100644
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@@ -1,11 +1,14 @@
 module.exports = {
-    plugins: [require.resolve("prettier-plugin-astro")],
-    overrides: [
-        {
-            files: "*.astro",
-            options: {
-                parser: "astro",
-            },
-        },
-    ],
+  plugins: [
+    require.resolve("prettier-plugin-astro"),
+    require.resolve("prettier-plugin-tailwindcss"),
+  ],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
 };
diff --git a/src/components/widgets/Fireworks.astro b/src/components/widgets/Fireworks.astro
index 0762716..f8e64f9 100644
--- a/src/components/widgets/Fireworks.astro
+++ b/src/components/widgets/Fireworks.astro
@@ -1,15 +1,16 @@
 <script>
-    import { Fireworks } from "fireworks-js";
+  import { Fireworks } from "fireworks-js";
 
-    export const fireworksContainer =
-        document.querySelector<HTMLDivElement>(".fireworks-container")!;
+  export const fireworksContainer = document.querySelector<HTMLDivElement>(
+    ".fireworks-container"
+  )!;
 
-    const fireworks = new Fireworks(fireworksContainer, {
-        rocketsPoint: {
-            min: 0,
-            max: 100,
-        },
-        autoresize: true,
-    });
-    fireworks.start();
-</script>
\ No newline at end of file
+  const fireworks = new Fireworks(fireworksContainer, {
+    rocketsPoint: {
+      min: 0,
+      max: 100,
+    },
+    autoresize: true,
+  });
+  fireworks.start();
+</script>
diff --git a/src/components/widgets/Navbar.astro b/src/components/widgets/Navbar.astro
index ba3d8fc..821f5f9 100644
--- a/src/components/widgets/Navbar.astro
+++ b/src/components/widgets/Navbar.astro
@@ -2,63 +2,58 @@
 import Container from "../atoms/Container.astro";
 
 const navItems = [
-    {
-        name: "Home",
-        link: "/",
-    },
-    {
-        name: "Projects",
-        link: "/projects",
-    },
-    {
-        name: "Blog",
-        link: "/blog",
-    },
-    {
-        name: "Docs",
-        link: "/docs",
-    },
+  {
+    name: "Home",
+    link: "/",
+  },
+  {
+    name: "Projects",
+    link: "/projects",
+  },
+  {
+    name: "Blog",
+    link: "/blog",
+  },
+  {
+    name: "Docs",
+    link: "/docs",
+  },
 ];
 ---
 
 <header class="h-16 border-b-[1px] border-neutral-800 text-xl text-white">
-    <Container
-        class="flex justify-around md:justify-between items-center h-full"
-    >
-        <a class="text-2xl font-extrabold" href="/">xHyroM</a>
-        <nav>
-            <ul
-                class="nav-links absolute top-0 left-0 z-20 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-gray transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4"
-            >
-                {
-                    navItems.map((item) => (
-                        <li class=" transition-all hover:-translate-y-[2px]">
-                            <a
-                                href={item.link}
-                                class="hover:text-hyroGold text-neutral-300"
-                            >
-                                {item.name}
-                            </a>
-                        </li>
-                    ))
-                }
-            </ul>
-        </nav>
-        <button class="hamburger block md:hidden">
-            <span class="sr-only">menu</span>
-            <img
-                src="/icons/menu.svg"
-                alt="hamburger menu icon"
-                class="h-[23px] w-[24px]"
-            />
-        </button>
-        <button class="hamburger-close z-30 hidden md:hidden">
-            <span class="sr-only">menu</span>
-            <img
-                src="/icons/x.svg"
-                alt="hamburger menu icon"
-                class="h-[23px] w-[24px]"
-            />
-        </button>
-    </Container>
+  <Container class="flex justify-around md:justify-between items-center h-full">
+    <a class="text-2xl font-extrabold" href="/">xHyroM</a>
+    <nav>
+      <ul
+        class="nav-links absolute top-0 left-0 z-20 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-gray transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4"
+      >
+        {
+          navItems.map((item) => (
+            <li class=" transition-all hover:-translate-y-[2px]">
+              <a href={item.link} class="hover:text-hyroGold text-neutral-300">
+                {item.name}
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+    </nav>
+    <button class="hamburger block md:hidden">
+      <span class="sr-only">menu</span>
+      <img
+        src="/icons/menu.svg"
+        alt="hamburger menu icon"
+        class="h-[23px] w-[24px]"
+      />
+    </button>
+    <button class="hamburger-close z-30 hidden md:hidden">
+      <span class="sr-only">menu</span>
+      <img
+        src="/icons/x.svg"
+        alt="hamburger menu icon"
+        class="h-[23px] w-[24px]"
+      />
+    </button>
+  </Container>
 </header>
diff --git a/src/components/widgets/Snow.astro b/src/components/widgets/Snow.astro
index f2f5ea9..68bbfc6 100644
--- a/src/components/widgets/Snow.astro
+++ b/src/components/widgets/Snow.astro
@@ -1,3 +1,3 @@
 <script>
-    import "../../scripts/snow.js";
+  import "../../scripts/snow.js";
 </script>
diff --git a/src/components/widgets/index/Hero.astro b/src/components/widgets/index/Hero.astro
index 7702873..4f40583 100644
--- a/src/components/widgets/index/Hero.astro
+++ b/src/components/widgets/index/Hero.astro
@@ -6,20 +6,20 @@ import Name from "./Name.astro";
 ---
 
 <main
-    class="mt-24 flex flex-col items-center justify-center md:mt-64 md:flex-row"
+  class="mt-24 flex flex-col items-center justify-center md:mt-64 md:flex-row"
 >
-    <div class="justify-cener flex items-center">
-        <Picture
-            src={logo}
-            formats={["png"]}
-            sizes="(max-width: 200px) 100vw, 200px"
-            widths={[200, 400]}
-            alt="descriptive text"
-            class={"h-[200px] w-[200px]"}
-        />
-    </div>
-    <section class="text-center md:ml-6 md:text-left">
-        <Name />
-        <Socials />
-    </section>
+  <div class="justify-cener flex items-center">
+    <Picture
+      src={logo}
+      formats={["png"]}
+      sizes="(max-width: 200px) 100vw, 200px"
+      widths={[200, 400]}
+      alt="descriptive text"
+      class={"h-[200px] w-[200px]"}
+    />
+  </div>
+  <section class="text-center md:ml-6 md:text-left">
+    <Name />
+    <Socials />
+  </section>
 </main>
diff --git a/src/components/widgets/index/Name.astro b/src/components/widgets/index/Name.astro
index 0eb9a6d..6bf8961 100644
--- a/src/components/widgets/index/Name.astro
+++ b/src/components/widgets/index/Name.astro
@@ -1,3 +1,3 @@
 <div class="flex drop-shadow-yellow">
-    <h1 class="text-6xl font-extrabold text-white">xHyroM</h1>
+  <h1 class="text-6xl font-extrabold text-white">xHyroM</h1>
 </div>
diff --git a/src/components/widgets/index/Socials.astro b/src/components/widgets/index/Socials.astro
index e90ab61..3660b5e 100644
--- a/src/components/widgets/index/Socials.astro
+++ b/src/components/widgets/index/Socials.astro
@@ -1,40 +1,40 @@
 ---
 const socials = [
-    {
-        name: "GitHub",
-        link: "https://github.com/xHyroM/",
-        icon: "github",
-    },
-    {
-        name: "Discord",
-        link: "https://discord.gg/kFPKmEKeMS/",
-        icon: "discord",
-    },
-    {
-        name: "Twitter",
-        link: "https://twitter.com/hyrousek/",
-        icon: "twitter",
-    },
-    {
-        name: "Instagram",
-        link: "https://www.instagram.com/hyro.dev/",
-        icon: "instagram",
-    },
+  {
+    name: "GitHub",
+    link: "https://github.com/xHyroM/",
+    icon: "github",
+  },
+  {
+    name: "Discord",
+    link: "https://discord.gg/kFPKmEKeMS/",
+    icon: "discord",
+  },
+  {
+    name: "Twitter",
+    link: "https://twitter.com/hyrousek/",
+    icon: "twitter",
+  },
+  {
+    name: "Instagram",
+    link: "https://www.instagram.com/hyro.dev/",
+    icon: "instagram",
+  },
 ];
 ---
 
 <ul class="my-5 flex justify-center text-white md:justify-start">
-    {
-        socials.map((social) => (
-            <li class="mr-4 ">
-                <a class="h-10 w-10" href={social.link} title={social.name}>
-                    <img
-                        class="h-8 w-8 transition-all hover:-translate-y-1"
-                        src={`/icons/${social.icon}.svg`}
-                        alt={`${social.name} icon`}
-                    />
-                </a>
-            </li>
-        ))
-    }
+  {
+    socials.map((social) => (
+      <li class="mr-4 ">
+        <a class="h-10 w-10" href={social.link} title={social.name}>
+          <img
+            class="h-8 w-8 transition-all hover:-translate-y-1"
+            src={`/icons/${social.icon}.svg`}
+            alt={`${social.name} icon`}
+          />
+        </a>
+      </li>
+    ))
+  }
 </ul>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c988450..1991d5d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -30,16 +30,17 @@ const Head = head || DefaultHead;
     <script>
       import "../scripts/menu.js";
     </script>
-  </body><style is:global>
-    ::-webkit-scrollbar {
-      width: 16px;
-    }
+    <style is:global>
+      ::-webkit-scrollbar {
+        width: 16px;
+      }
 
-    ::-webkit-scrollbar-thumb {
-      border: 6px solid rgba(0, 0, 0, 0);
-      background-clip: padding-box;
-      border-radius: 9999px;
-      background-color: #aaaaaa;
-    }
-  </style>
+      ::-webkit-scrollbar-thumb {
+        border: 6px solid rgba(0, 0, 0, 0);
+        background-clip: padding-box;
+        border-radius: 9999px;
+        background-color: #aaaaaa;
+      }
+    </style>
+  </body>
 </html>
diff --git a/src/layouts/blog/PostLayout.astro b/src/layouts/blog/PostLayout.astro
index 6c4853b..d9c3d50 100644
--- a/src/layouts/blog/PostLayout.astro
+++ b/src/layouts/blog/PostLayout.astro
@@ -18,12 +18,12 @@ const {
 
 <Layout head={PostHead} title={title} date={date}>
   <Navbar />
-  <h1 class="text-white text-5xl w-full text-center py-32 font-extrabold">
+  <h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
     {title}
   </h1>
 
   <Container>
-    <main class="text-white text-2xl prose">
+    <main class="prose text-2xl text-white">
       <article>
         <slot />
       </article>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 79f8007..67a493d 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -5,43 +5,40 @@ import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout>
-    <Navbar />
-    <h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
-        WRONG TURN?
-    </h1>
+  <Navbar />
+  <h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
+    WRONG TURN?
+  </h1>
 
-    <Container>
-        <main class="text-2xl text-white">
-            <p class="mb-4">
-                We're sorry, but it looks like the page you were trying to visit
-                has been misplaced. It's not entirely clear where it's gone, but
-                we suspect it may have gotten lost in the vast expanse of the
-                internet.
-            </p>
+  <Container>
+    <main class="text-2xl text-white">
+      <p class="mb-4">
+        We're sorry, but it looks like the page you were trying to visit has
+        been misplaced. It's not entirely clear where it's gone, but we suspect
+        it may have gotten lost in the vast expanse of the internet.
+      </p>
 
-            <p class="mb-4">
-                We've searched high and low, but alas, we can't seem to find it.
-                It's possible that it's hiding behind a particularly stubborn
-                firewall, or maybe it's taking a much-needed vacation on a
-                remote server farm.
-            </p>
+      <p class="mb-4">
+        We've searched high and low, but alas, we can't seem to find it. It's
+        possible that it's hiding behind a particularly stubborn firewall, or
+        maybe it's taking a much-needed vacation on a remote server farm.
+      </p>
 
-            <p class="mb-4">
-                Despite our best efforts, we just can't seem to locate the page
-                you were looking for. We apologize for any inconvenience this
-                may have caused.
-            </p>
+      <p class="mb-4">
+        Despite our best efforts, we just can't seem to locate the page you were
+        looking for. We apologize for any inconvenience this may have caused.
+      </p>
 
-            <p class="mb-4">
-                In the meantime, why not take a look around our <a
-                    class="text-hyroGold"
-                    href="/">homepage</a
-                > and see if you can find something else that piques your interest?
-                Who knows, you might just stumble upon something even better than
-                what you were originally looking for.
-            </p>
+      <p class="mb-4">
+        In the meantime, why not take a look around our <a
+          class="text-hyroGold"
+          href="/">homepage</a
+        > and see if you can find something else that piques your interest? Who knows,
+        you might just stumble upon something even better than what you were originally
+        looking for.
+      </p>
 
-            <p>Thanks for stopping by, and we hope to see you again soon!</p>
-        </main>
-    </Container>
+      <p>Thanks for stopping by, and we hope to see you again soon!</p>
+    </main>
+  </Container>
 </Layout>