diff --git a/.prettierignore b/.prettierignore
index a680367..9ff61a8 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1,3 @@
 .next
+.yarn
+.pnp*
diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index 0967ef4..0000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/additional.d.ts b/additional.d.ts
index 63dc2f5..3139776 100644
--- a/additional.d.ts
+++ b/additional.d.ts
@@ -1,4 +1,4 @@
 type FrontMatter = {
-  title?: string
-  weight?: number
-}
+  title?: string;
+  weight?: number;
+};
diff --git a/components/AmePreview.tsx b/components/AmePreview.tsx
index 754001a..4522224 100644
--- a/components/AmePreview.tsx
+++ b/components/AmePreview.tsx
@@ -1,12 +1,12 @@
 const AmePreview = () => (
-  <div className="bg-ctp-mantle h-fit w-full md:w-auto rounded-lg [&_p]:text-xs [&_p]:md:text-base md:text-base p-5 font-bold shadow-ctp-crust whitespace-nowrap overflow-hidden shadow-lg font-fira-code select-none border-ctp-crust border">
-    <p className="text-ctp-blue font-normal">{"~"}</p>
+  <div className="h-fit w-full select-none overflow-hidden whitespace-nowrap rounded-lg border border-ctp-crust bg-ctp-mantle p-5 font-fira-code font-bold shadow-lg shadow-ctp-crust md:w-auto md:text-base [&_p]:text-xs [&_p]:md:text-base">
+    <p className="font-normal text-ctp-blue">{"~"}</p>
     <p className="font-normal">
       <span className="text-ctp-blue">{">"}</span>
       <span className="text-ctp-green">{" ame"}</span>
       {" install neovim-git"}
     </p>
-    <p className="text-ctp-green font-normal">All packages found</p>
+    <p className="font-normal text-ctp-green">All packages found</p>
     <p className="text-ctp-green">neovim-git</p>
     <p>
       Do you want to install these packages and package dependencies?
@@ -61,7 +61,7 @@ const AmePreview = () => (
     <p>
       Net Upgrade Size:<span className="font-bold">{"       0.19 MiB"}</span>
     </p>
-    <p className="mt-4 after:content-[''] after:w-[10px] after:h-[20px] after:bg-ctp-rosewater after:inline-block after:animate-blink flex items-center gap-2">
+    <p className="mt-4 flex items-center gap-2 after:inline-block after:h-[20px] after:w-[10px] after:animate-blink after:bg-ctp-rosewater after:content-['']">
       <span className="text-ctp-blue">{":: "}</span>Proceed with installation?
       [Y/n]
     </p>
diff --git a/components/DocWrapper.tsx b/components/DocWrapper.tsx
index d79752e..2949930 100644
--- a/components/DocWrapper.tsx
+++ b/components/DocWrapper.tsx
@@ -3,7 +3,7 @@ import { FC, ReactNode } from "react";
 const DocWrapper: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <>
-      <article className="prose max-w-full [&_table]:overflow-x-scroll [&_table]:block [&_table]:max-w-full !mt-0 lg:pl-80 dark:prose-invert [&_pre]:!bg-ctp-mantle">
+      <article className="prose !mt-0 max-w-full dark:prose-invert lg:pl-80 [&_table]:block [&_table]:max-w-full [&_table]:overflow-x-scroll [&_pre]:!bg-ctp-mantle">
         {children}
       </article>
     </>
diff --git a/components/HomeSection.tsx b/components/HomeSection.tsx
index ea7121f..32cfc0f 100644
--- a/components/HomeSection.tsx
+++ b/components/HomeSection.tsx
@@ -4,12 +4,8 @@ const HomeSection: FC<{ children: ReactNode; className?: string }> = ({
   children,
   className,
 }) => (
-  <section
-    className={`py-6 w-full ${
-      className ? className : ""
-    }`}
-  >
-    <div className="flex flex-col px-8 lg:flex-row gap-8 mx-auto max-w-8xl">
+  <section className={`w-full py-6 ${className ? className : ""}`}>
+    <div className="mx-auto flex max-w-8xl flex-col gap-8 px-8 lg:flex-row">
       {children}
     </div>
   </section>
diff --git a/components/ThemeSwitcher/NativeThemeSwitcher.tsx b/components/ThemeSwitcher/NativeThemeSwitcher.tsx
index fd5fd8c..c5a7b7e 100644
--- a/components/ThemeSwitcher/NativeThemeSwitcher.tsx
+++ b/components/ThemeSwitcher/NativeThemeSwitcher.tsx
@@ -17,7 +17,7 @@ const NativeThemeSwitcher = () => {
   }
 
   return (
-    <div className="relative flex gap-2 capitalize items-center rounded-lg shadow-sm p-2 px-4 text-ctp-text font-semibold bg-ctp-surface0">
+    <div className="relative flex items-center gap-2 rounded-lg bg-ctp-surface0 p-2 px-4 font-semibold capitalize text-ctp-text shadow-sm">
       <FontAwesomeIcon icon={resolvedTheme === "light" ? faSun : faMoon} />
       {theme}
       <FontAwesomeIcon icon={faAngleDown} size="sm" />
@@ -25,7 +25,7 @@ const NativeThemeSwitcher = () => {
         onClick={(e) => {
           setTheme(e.currentTarget.value);
         }}
-        className="absolute appearance-none inset-0 w-full h-full opacity-0"
+        className="absolute inset-0 h-full w-full appearance-none opacity-0"
       >
         <option value="light">Light</option>
         <option value="dark">Dark</option>
diff --git a/components/TreeItem.tsx b/components/TreeItem.tsx
index c30b146..062aa60 100644
--- a/components/TreeItem.tsx
+++ b/components/TreeItem.tsx
@@ -13,9 +13,7 @@ const TreeNode: FC<{ node: TreeItem; path: string }> = ({
           {children.length > 0 ? (
             <span
               className={`text-left ${
-                current
-                  ? "font-semibold"
-                  : ""
+                current ? "font-semibold" : ""
               } text-ctp-text`}
             >
               {pretty ? pretty : value}
@@ -26,9 +24,9 @@ const TreeNode: FC<{ node: TreeItem; path: string }> = ({
                 <a
                   className={`${
                     current
-                      ? "font-semibold border-ctp-mauve text-ctp-mauve"
-                      : "font-normal text-ctp-subtext0 hover:text-ctp-subtext1 hover:border-ctp-surface2 border-transparent"
-                  } first-letter transition-colors no-underline -ml-px hover:no-underline border-l pl-4`}
+                      ? "border-ctp-mauve font-semibold text-ctp-mauve"
+                      : "border-transparent font-normal text-ctp-subtext0 hover:border-ctp-surface2 hover:text-ctp-subtext1"
+                  } first-letter -ml-px border-l pl-4 no-underline transition-colors hover:no-underline`}
                 >
                   {pretty ? pretty : value}
                 </a>
@@ -41,9 +39,7 @@ const TreeNode: FC<{ node: TreeItem; path: string }> = ({
       {children.length > 0 && (
         <div
           className={`flex flex-col gap-1 ${
-            value !== "root"
-              ? "border-l border-ctp-surface0"
-              : ""
+            value !== "root" ? "border-l border-ctp-surface0" : ""
           }`}
         >
           {children.map((child) => (
diff --git a/components/footer.tsx b/components/footer.tsx
index c4e6411..ea24de6 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -10,7 +10,7 @@ import Link from "next/link";
 
 const Footer = () => (
   <footer className="bg-ctp-base text-ctp-text">
-    <div className="px-8 mx-auto max-w-8xl gap-8 flex md:flex-row flex-col py-6">
+    <div className="mx-auto flex max-w-8xl flex-col gap-8 px-8 py-6 md:flex-row">
       <section className="basis-1/3">
         <h4 className="text-2xl font-bold">About</h4>
         <p>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 43367ee..28db8f2 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -31,7 +31,7 @@ const Navbar = () => {
     <nav
       className={`py-2.5 ${
         scrollTop != 0 || toggled
-          ? "bg-opacity-80 backdrop-blur-md bg-ctp-base border-b border-ctp-mantle"
+          ? "border-b border-ctp-mantle bg-ctp-base bg-opacity-80 backdrop-blur-md"
           : ""
       } fixed top-0 left-0 z-20 w-full `}
     >
@@ -55,7 +55,7 @@ const Navbar = () => {
           </a>
 
           <a
-            className="mr-3 rounded-lg bg-ctp-mauve hidden md:block px-5 py-2.5 text-center text-sm font-medium text-ctp-base !no-underline focus:outline-none focus:ring-4 md:mr-0"
+            className="mr-3 hidden rounded-lg bg-ctp-mauve px-5 py-2.5 text-center text-sm font-medium text-ctp-base !no-underline focus:outline-none focus:ring-4 md:mr-0 md:block"
             href="https://github.com/crystal-linux/iso/releases/latest"
           >
             Download
@@ -96,7 +96,7 @@ const Navbar = () => {
                     route === "/"
                       ? "bg-ctp-mauve text-ctp-base md:text-ctp-mauve"
                       : "text-ctp-text md:hover:text-ctp-mauve"
-                  } md:p-0 no-underline`}
+                  } no-underline md:p-0`}
                 >
                   Home
                 </a>
@@ -105,7 +105,7 @@ const Navbar = () => {
             <li>
               <a
                 href="https://forum.getcryst.al/"
-                className="md:dark:hover:bg-transparen block rounded py-2 pr-4 pl-3 text-ctp-text md:p-0 md:hover:bg-transparent md:hover:text-ctp-mauve no-underline"
+                className="md:dark:hover:bg-transparen block rounded py-2 pr-4 pl-3 text-ctp-text no-underline md:p-0 md:hover:bg-transparent md:hover:text-ctp-mauve"
               >
                 Forum
                 <FontAwesomeIcon
@@ -121,7 +121,7 @@ const Navbar = () => {
                     route.split("/")[1] === "docs"
                       ? "bg-ctp-mauve text-ctp-base md:text-ctp-mauve"
                       : "text-ctp-text md:hover:text-ctp-mauve"
-                  } md:p-0 no-underline`}
+                  } no-underline md:p-0`}
                 >
                   Docs
                 </a>
@@ -129,7 +129,7 @@ const Navbar = () => {
             </li>
             <li className="visible md:hidden">
               <a
-                className={`block rounded py-2 pr-4 pl-3 md:bg-transparent text-ctp-text md:hover:text-ctp-mauve md:p-0 no-underline`}
+                className={`block rounded py-2 pr-4 pl-3 text-ctp-text no-underline md:bg-transparent md:p-0 md:hover:text-ctp-mauve`}
                 href="https://github.com/crystal-linux/"
               >
                 Github
@@ -141,7 +141,7 @@ const Navbar = () => {
             </li>
             <li className="visible md:hidden">
               <a
-                className={`block rounded py-2 pr-4 pl-3 md:bg-transparent text-ctp-text md:hover:text-ctp-mauve md:p-0 no-underline`}
+                className={`block rounded py-2 pr-4 pl-3 text-ctp-text no-underline md:bg-transparent md:p-0 md:hover:text-ctp-mauve`}
                 href="https://github.com/crystal-linux/iso/releases/latest"
               >
                 Download
diff --git a/lib/tree.ts b/lib/tree.ts
index cad05fd..0f71d3e 100644
--- a/lib/tree.ts
+++ b/lib/tree.ts
@@ -43,6 +43,6 @@ export class TreeItemConstructor {
     this.children.forEach((child) => child.sort());
     this.children.sort((a, b) => b.weight - a.weight);
 
-    return this
+    return this;
   }
 }
diff --git a/next.config.mjs b/next.config.mjs
index 0246355..95c1df4 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -11,22 +11,21 @@ const nextConfig = {
       test: /\.svg$/,
       use: ["@svgr/webpack"],
     });
-    config.experiments.topLevelAwait = true
+    config.experiments.topLevelAwait = true;
 
     return config;
   },
-  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
   experimental: { images: { allowFutureImage: true } },
   async redirects() {
     return [
       {
-        source: '/discord',
-        destination: 'https://discord.com/invite/76RR4VC45V',
+        source: "/discord",
+        destination: "https://discord.com/invite/76RR4VC45V",
         permanent: true,
       },
-    ]
+    ];
   },
-
 };
 
 const withMDX = createMDX({
diff --git a/pages/_document.tsx b/pages/_document.tsx
index cb323ef..52cff2b 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -13,7 +13,10 @@ const Document = () => (
         href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
         rel="stylesheet"
       />
-      <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet" />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap"
+        rel="stylesheet"
+      />
       <link
         rel="apple-touch-icon"
         sizes="180x180"
diff --git a/pages/blog/[...slug].tsx b/pages/blog/[...slug].tsx
index 4049d12..a540ef3 100644
--- a/pages/blog/[...slug].tsx
+++ b/pages/blog/[...slug].tsx
@@ -2,13 +2,10 @@ import { useRouter } from "next/router";
 import { FC } from "react";
 
 const DocPage: FC<{}> = () => {
-  const route = useRouter()
+  const route = useRouter();
 
-  console.log(route.query)
-  return (
-    <>
-    </>
-  );
+  console.log(route.query);
+  return <></>;
 };
 
 export default DocPage;
diff --git a/pages/docs/[[...slug]].tsx b/pages/docs/[[...slug]].tsx
index c3d5322..8f3b1f4 100644
--- a/pages/docs/[[...slug]].tsx
+++ b/pages/docs/[[...slug]].tsx
@@ -141,8 +141,8 @@ const DocPage: NextPageWithLayout<{
   tree: TreeItem;
 }> = ({ source, tree }) => {
   return (
-    <div className="max-w-8xl px-8 min-h-screen mx-auto pt-24 space-y-12 lg:pt-28">
-      <aside className="lg:fixed mb-8 lg:mb-0 right-auto flex max-w-80 flex-col break-normal align-top">
+    <div className="mx-auto min-h-screen max-w-8xl space-y-12 px-8 pt-24 lg:pt-28">
+      <aside className="max-w-80 right-auto mb-8 flex flex-col break-normal align-top lg:fixed lg:mb-0">
         <TreeNode node={tree} path="/docs" />
       </aside>
 
@@ -155,11 +155,7 @@ const DocPage: NextPageWithLayout<{
 };
 
 DocPage.getLayout = function getLayout(page: ReactElement) {
-  return (
-    <main className="bg-ctp-base">
-      {page}
-    </main>
-  );
+  return <main className="bg-ctp-base">{page}</main>;
 };
 
 export default DocPage;
diff --git a/pages/index.tsx b/pages/index.tsx
index fe7b334..0ac64be 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -18,25 +18,25 @@ const Home: NextPageWithLayout = () => {
   return (
     <>
       <section>
-        <div className="flex justify-center flex-col items-center text-center px-8 pt-36 lg:pt-44 pb-32">
-          <h1 className="mb-4 text-4xl font-extrabold tracking-tight leading-none text-ctp-text md:text-5xl lg:text-6xl">
+        <div className="flex flex-col items-center justify-center px-8 pt-36 pb-32 text-center lg:pt-44">
+          <h1 className="mb-4 text-4xl font-extrabold leading-none tracking-tight text-ctp-text md:text-5xl lg:text-6xl">
             An arch based distribution
           </h1>
-          <p className="mb-6 text-lg font-normal text-ctp-subtext1 lg:text-xl sm:px-16 xl:px-48">
+          <p className="mb-6 text-lg font-normal text-ctp-subtext1 sm:px-16 lg:text-xl xl:px-48">
             Crystal Linux is a brand new Arch Linux based distritbution.
             Powerful and easy to use.
           </p>
 
-          <div className="w-full space-2 space-y-2">
+          <div className="space-2 w-full space-y-2">
             <a
-              className="inline-flex w-full sm:w-fit justify-center items-center py-3 px-5 text-base font-medium text-center text-ctp-base bg-ctp-mauve rounded-lg focus:ring-4"
+              className="inline-flex w-full items-center justify-center rounded-lg bg-ctp-mauve py-3 px-5 text-center text-base font-medium text-ctp-base focus:ring-4 sm:w-fit"
               href="https://github.com/crystal-linux/iso/releases/latest"
             >
               Download
             </a>
 
             <Link href="/docs/crystal-linux/getting-started">
-              <a className="inline-flex w-full sm:w-fit gap-2 justify-center items-center py-3 px-5 text-base font-medium text-center text-ctp-text rounded-lg focus:ring-4">
+              <a className="inline-flex w-full items-center justify-center gap-2 rounded-lg py-3 px-5 text-center text-base font-medium text-ctp-text focus:ring-4 sm:w-fit">
                 Getting Started
                 <FontAwesomeIcon icon={faArrowRight} />
               </a>
@@ -48,16 +48,16 @@ const Home: NextPageWithLayout = () => {
       <HomeSection className="">
         <div className="basis-1/4">
           <p className="mt-8 font-semibold text-ctp-maroon">Beautiful</p>
-          <p className="mt-4 text-3xl sm:text-4xl text-ctp-text font-extrabold tracking-tight">
+          <p className="mt-4 text-3xl font-extrabold tracking-tight text-ctp-text sm:text-4xl">
             Onyx built-in
           </p>
           <p className="mt-4 max-w-3xl text-ctp-subtext1">
-            Install Crystal with it{"'"}s in-house desktop experience, a custom GNOME session
-            with a familiar layout. Or choose your favourite!
+            Install Crystal with it{"'"}s in-house desktop experience, a custom
+            GNOME session with a familiar layout. Or choose your favourite!
           </p>
         </div>
 
-        <div className="basis-3/4 flex justify-center">
+        <div className="flex basis-3/4 justify-center">
           <Image
             src={resolvedTheme === "dark" ? onyxDark : onyxLight}
             className="rounded-xl shadow-lg shadow-ctp-crust"
@@ -69,7 +69,7 @@ const Home: NextPageWithLayout = () => {
       <HomeSection>
         <div>
           <p className="mt-8 font-semibold text-ctp-rosewater">Buttery</p>
-          <p className="mt-4 text-3xl sm:text-4xl text-ctp-text font-extrabold tracking-tight">
+          <p className="mt-4 text-3xl font-extrabold tracking-tight text-ctp-text sm:text-4xl">
             Automatic Backups
           </p>
           <p className="mt-4 max-w-3xl space-y-6 text-ctp-subtext1">
@@ -81,7 +81,7 @@ const Home: NextPageWithLayout = () => {
       <HomeSection className="pb-28">
         <div className="basis-1/4">
           <p className="mt-8 font-semibold text-ctp-mauve">Rusty Quartz?</p>
-          <p className="mt-4 text-3xl sm:text-4xl text-ctp-text font-extrabold tracking-tight">
+          <p className="mt-4 text-3xl font-extrabold tracking-tight text-ctp-text sm:text-4xl">
             Amethyst
           </p>
           <p className="mt-4 max-w-3xl text-ctp-subtext1">
@@ -91,7 +91,7 @@ const Home: NextPageWithLayout = () => {
           </p>
         </div>
 
-        <div className="basis-3/4 flex justify-center">
+        <div className="flex basis-3/4 justify-center">
           <AmePreview />
         </div>
       </HomeSection>
@@ -100,7 +100,7 @@ const Home: NextPageWithLayout = () => {
 };
 
 Home.getLayout = function getLayout(page: ReactElement) {
-  return <main className="bg-ctp-base flex flex-col items-center">{page}</main>;
+  return <main className="flex flex-col items-center bg-ctp-base">{page}</main>;
 };
 
 export default Home;
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 0000000..4660506
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  plugins: [require("prettier-plugin-tailwindcss")],
+  tailwindConfig: "./tailwind.config.js",
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 03c768b..c563c69 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,4 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
+const defaultTheme = require("tailwindcss/defaultTheme");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -13,24 +13,24 @@ module.exports = {
         "8xl": "90rem",
       },
       animation: {
-        blink: 'blink 1.5s steps(2) infinite;'
+        blink: "blink 1.5s steps(2) infinite;",
       },
       keyframes: {
         blink: {
-          '0%': { opacity: 0 },
-          '100%': { opacity: 100 }
-        }
+          "0%": { opacity: 0 },
+          "100%": { opacity: 100 },
+        },
       },
       fontFamily: {
-        'fira-code': ['Fira Code', ...defaultTheme.fontFamily.mono]
-      }
+        "fira-code": ["Fira Code", ...defaultTheme.fontFamily.mono],
+      },
     },
   },
   plugins: [
     require("@tailwindcss/typography"),
     require("@catppuccin/tailwindcss")({
       prefix: "ctp",
-      defaultFlavour: ""
+      defaultFlavour: "",
     }),
   ],
 };