diff --git a/package-lock.json b/package-lock.json
index b2c4ccc..2e5276e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "typescript": "5.0.2"
       },
       "devDependencies": {
+        "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.9",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.21",
@@ -493,6 +494,18 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
+      "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
+      "dev": true,
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.10",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
@@ -2894,6 +2907,15 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
diff --git a/package.json b/package.json
index f3cd13f..8c103e5 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "typescript": "5.0.2"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.21",
diff --git a/src/components/item_list.tsx b/src/components/item_list.tsx
index 5f09e21..48a351e 100644
--- a/src/components/item_list.tsx
+++ b/src/components/item_list.tsx
@@ -1,5 +1,4 @@
 import {Collection, Item} from "@/lib/types";
-import Image from "next/image";
 
 export default function ItemList(collection: Collection) {
 
@@ -64,7 +63,7 @@ export default function ItemList(collection: Collection) {
 
     return (
         <div className="w-full text-center py-10" id={ collection.caption.toLowerCase() }>
-            <h1 className="text-3xl font-bold" id={ collection.caption.toLowerCase() + "_header" }>{collection.caption}</h1>
+            <h1 className="text-3xl font-bold dark:text-white text-black" id={ collection.caption.toLowerCase() + "_header" }>{collection.caption}</h1>
             <div className="py-3 px-4 lg:px-12 flex flex-wrap justify-center" key={ collection.caption.toLowerCase() }>
                 {getItems().map((value) => {
                     return buildItem(value)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d095909..3323175 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -42,8 +42,8 @@ export default function Home() {
     }
 
     return (
-        <div className="w-full h-full bg-gray-100" key={"home_page"}>
-            <div className={mobileMenu ? "bg-gray-800 w-full h-full fixed z-10" : "hidden"} key={"mobile_menu"}>
+        <div className="w-screen h-full bg-gray-100 dark:bg-gray-700" key={"home_page"}>
+            <div className={mobileMenu ? "bg-gray-800 w-screen h-full fixed z-20 translate-x-0 transition-all duration-150 ease-in-out md:-translate-x-full" : "bg-gray-800 w-screen h-full fixed z-10 -translate-x-full transition-all duration-150 ease-in-out"} key={"mobile_menu"}>
                 <ul className="flex flex-col gap-3 pt-12 px-5">
                     {
                         collections.map((collection) => {
@@ -89,7 +89,7 @@ export default function Home() {
                     }
                 </a>
             </div>
-            <div className="py-12">
+            <div className="py-12 z-0">
                 {
                     collections.map((value) => {
                         return ItemList(getCollection(value))
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 239fd6d..e6b425f 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -26,7 +26,7 @@ root {
 }
 
 .item {
-    @apply shadow-md rounded-md overflow-hidden inline-block relative my-2;
+    @apply shadow-md rounded-md overflow-hidden inline-block relative my-2 bg-white dark:bg-gray-800;
 }
 
 .item img {
@@ -35,7 +35,7 @@ root {
 }
 
 .item .description {
-    @apply opacity-0 bg-neutral-700 bg-opacity-75 w-full h-full text-white absolute left-0 top-0 z-10 p-5 transition-all duration-300 ease-in-out;
+    @apply opacity-0 bg-black bg-opacity-65 w-full h-full text-white absolute left-0 top-0 z-10 p-5 transition-all duration-300 ease-in-out;
 }
 
 .item:hover .description {
diff --git a/tailwind.config.js b/tailwind.config.js
index ec30926..fece616 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
     extend: {},
   },
   plugins: [
+    require('@tailwindcss/forms'),
     require('@tailwindcss/typography')
   ],
 }