diff --git a/src/pages/assets/[...package_name].astro b/src/pages/assets/[...package_name].astro
index ac4fa93..59a2014 100644
--- a/src/pages/assets/[...package_name].astro
+++ b/src/pages/assets/[...package_name].astro
@@ -6,40 +6,22 @@ const assets_json = await response.json();
 ---
 
 <Layout title="Package">
-  <div
-    class="flex flex-wrap mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center pb-64 roboto"
-  >
-    {
-      assets_json.error ? (
-        <h1 class="text-text-color text-3xl">
-          Unexpected error. Are you sure you typed the name right?
-        </h1>
+  <div class="flex flex-wrap mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center pb-64 roboto">
+    {assets_json.error ? (
+        <h1 class="text-text-color text-3xl"> Unexpected error. Are you sure you typed the name right? </h1>
       ) : (
         <div class="flex flex-row items-center text-text-color bg-navbar-color rounded-2xl">
           {assets_json.background_video ? (
             // Background video
-            <video
-              src={`/videos/${assets_json.background_video}`}
-              controls
-              class="w-[44rem] h-[25rem] object-cover rounded-xl"
-            >
+            <video src={`/videos/${assets_json.background_video}`} controls class="w-[44rem] h-[25rem] object-cover rounded-xl">
               Your browser does not support the video tag.
             </video>
           ) : assets_json.backgroundImage ? (
             // Background image
-            <div
-              style={{
-                backgroundImage: `url(/images/${assets_json.backgroundImage})`,
-              }}
-              class="w-[44rem] h-[25rem] bg-cover bg-center rounded-xl"
-            />
+            <div style={{backgroundImage: `url(/images/${assets_json.backgroundImage})`}} class="w-[44rem] h-[25rem] bg-cover bg-center rounded-xl"/>
           ) : (
             // Fallback to cover image
-            <img
-              src={`/images/${assets_json.image}`}
-              alt={assets_json.title}
-              class="w-[44rem] h-[25rem] object-cover rounded-xl"
-            />
+            <img src={`/images/${assets_json.image}`} alt={assets_json.title} class="w-[44rem] h-[25rem] object-cover rounded-xl"/>
           )}
           <div class="flex flex-col ml-7 p-16">
             <div class="text-xl">{assets_json.type}</div>
@@ -48,10 +30,7 @@ const assets_json = await response.json();
               By <strong>{assets_json.author}</strong>
             </div>
             <div class="text-xl">{assets_json.description}</div>
-            <button
-              class="bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9"
-              id="install"
-            >
+            <button class="bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9" id="install">
               Install
             </button>
           </div>
diff --git a/src/pages/catalog/[...page].astro b/src/pages/catalog/[...page].astro
index 4484ea3..b3ae7af 100644
--- a/src/pages/catalog/[...page].astro
+++ b/src/pages/catalog/[...page].astro
@@ -15,65 +15,30 @@ const last_page = assets_json.pages;
 ---
 
 <Layout title="Catalog">
-  <div
-    class="flex mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center overflow-auto"
-  >
-    <div>
-      {page}
-      The Nebula Catalog is a place for you to find user-created themes and plugins.
-    </div>
+  <div class="flex mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center overflow-auto">
+    <div> The Nebula Catalog is a place for you to find user-created themes and plugins. </div>
     <CatalogCard client:only="svelte" page={page} />
     <div class="flex flex-row pb-8 gap-4 roboto">
-      {
-        /* The first page. If the user is on this page, or the one after it, don't show it. */
-      }
-      {
-        parseInt(page!) > 2 && (
-          <a
-            href={"/catalog/" + 1}
-            class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
-          >
-            1
-          </a>
+      {/* The first page. If the user is on this page, or the one after it, don't show it. */}
+      {parseInt(page!) > 2 && (
+          <a href={"/catalog/" + 1} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"> 1 </a>
         )
       }
-      {
-        previous_page > 0 && (
-          <a
-            href={"/catalog/" + previous_page}
-            class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
-          >
-            {previous_page}
-          </a>
+      {previous_page > 0 && (
+          <a href={"/catalog/" + previous_page} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{previous_page}</a>
         )
       }
-
       {/* The greyed out page the user is currently on */}
-      <a
-        class="w-8 h-8 bg-lighter items-center text-center content-center text-text-color rounded-md"
-      >
-        {page}
-      </a>
-
-      {
-        next_page < last_page && (
-          <a
-            href={"/catalog/" + next_page}
-            class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
-          >
-            {next_page}
-          </a>
+      <a class="w-8 h-8 bg-lighter items-center text-center content-center text-text-color rounded-md">{page}</a>
+      {next_page < last_page && (
+        <a href={"/catalog/" + next_page} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{next_page}</a>
         )
       }
       {/* Pagnation input */}
       <Pagnation />
       {/* The last page. If the user is on this page, don't show it. */}
-      {
-        page != last_page && (
-          <a
-            href={"/catalog/" + assets_json.pages}
-            class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
-          >
+      {page != last_page && (
+          <a href={"/catalog/" + assets_json.pages} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">
             {assets_json.pages}
           </a>
         )
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 8028336..c66427f 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -3,13 +3,13 @@ export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     colors: {
-      primary: "var(--background-primary)",
-      lighter: "var(--background-lighter)",
+      "primary": "var(--background-primary)",
+      "lighter": "var(--background-lighter)",
       "navbar-text-color": "var(--navbar-text-color)",
       "navbar-color": "var(--navbar-color)",
       "text-color": "var(--navbar-link-color)",
       "text-hover-color": "var(--navbar-link-hover-color)",
-      input: "var(--input-background-color)",
+      "input": "var(--input-background-color)",
       "input-text": "var(--input-text-color)",
       "input-border-color": "var(--input-border-color)",
       "dropdown-option-hover-color": "var(--dropdown-option-hover-color)",