diff --git a/17th Website/package-lock.json b/17th Website/package-lock.json
index 722c023..c5bbcab 100644
--- a/17th Website/package-lock.json	
+++ b/17th Website/package-lock.json	
@@ -19,9 +19,12 @@
         "@vitejs/plugin-vue": "^4.2.1",
         "@vue/cli-plugin-router": "~5.0.0",
         "@vue/eslint-config-prettier": "^7.1.0",
+        "autoprefixer": "^10.4.14",
         "eslint": "^8.39.0",
         "eslint-plugin-vue": "^9.11.0",
+        "postcss": "^8.4.23",
         "prettier": "^2.8.8",
+        "tailwindcss": "^3.3.2",
         "vite": "^4.3.4"
       }
     },
@@ -39,6 +42,18 @@
         "node": "8 || 9 || 10 || 11 || 12 || 13 || 14 || 15 || 16 || 17 || 18 || 19"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -980,7 +995,6 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -995,7 +1009,6 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
       "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1005,7 +1018,6 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1031,7 +1043,6 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
       "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "3.1.0",
         "@jridgewell/sourcemap-codec": "1.4.14"
@@ -1041,8 +1052,7 @@
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
@@ -2174,15 +2184,13 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
       "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -2212,6 +2220,12 @@
       ],
       "peer": true
     },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2270,7 +2284,6 @@
           "url": "https://tidelift.com/funding/github/npm/autoprefixer"
         }
       ],
-      "peer": true,
       "dependencies": {
         "browserslist": "^4.21.5",
         "caniuse-lite": "^1.0.30001464",
@@ -2337,7 +2350,6 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -2446,7 +2458,6 @@
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -2469,7 +2480,6 @@
           "url": "https://tidelift.com/funding/github/npm/browserslist"
         }
       ],
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001449",
         "electron-to-chromium": "^1.4.284",
@@ -2558,6 +2568,15 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -2589,8 +2608,7 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "peer": true
+      ]
     },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -2629,7 +2647,6 @@
           "url": "https://paulmillr.com/funding/"
         }
       ],
-      "peer": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -2651,7 +2668,6 @@
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -3463,6 +3479,12 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -3476,6 +3498,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "node_modules/dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -3632,8 +3660,7 @@
       "version": "1.4.392",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.392.tgz",
       "integrity": "sha512-TXQOMW9tnhIms3jGy/lJctLjICOgyueZFJ1KUtm6DTQ+QpxX3p7ZBwB6syuZ9KBuT5S4XX7bgY1ECPgfxKUdOg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -3763,7 +3790,6 @@
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
       "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -4195,7 +4221,6 @@
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
       "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -4212,7 +4237,6 @@
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -4294,7 +4318,6 @@
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -4409,7 +4432,6 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": "*"
       },
@@ -5019,7 +5041,6 @@
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -5109,7 +5130,6 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -5243,6 +5263,15 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
+      "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/joi": {
       "version": "17.9.2",
       "resolved": "https://registry.npmjs.org/joi/-/joi-17.9.2.tgz",
@@ -5415,7 +5444,6 @@
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -5753,7 +5781,6 @@
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">= 8"
       }
@@ -5773,7 +5800,6 @@
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -6001,7 +6027,6 @@
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -6099,8 +6124,7 @@
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
       "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/normalize-package-data": {
       "version": "2.5.0",
@@ -6128,7 +6152,6 @@
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6138,7 +6161,6 @@
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6194,11 +6216,19 @@
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
@@ -6539,7 +6569,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -6547,6 +6576,24 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -6701,6 +6748,80 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "dev": true,
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^2.1.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/yaml": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz",
+      "integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/postcss-loader": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
@@ -6891,6 +7012,25 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-normalize-charset": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
@@ -7134,8 +7274,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -7419,6 +7558,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -7546,7 +7694,6 @@
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -8283,6 +8430,57 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
+      "integrity": "sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -8339,6 +8537,44 @@
         "node": ">= 10"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
+      "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.18.2",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -8421,7 +8657,6 @@
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -8431,7 +8666,6 @@
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -8500,7 +8734,6 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -8534,6 +8767,12 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "dev": true
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
     "node_modules/tslib": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
@@ -8618,7 +8857,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
@@ -9464,6 +9702,12 @@
         "js-message": "1.0.7"
       }
     },
+    "@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true
+    },
     "@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -10073,7 +10317,6 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
       "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@jridgewell/set-array": "^1.0.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -10084,15 +10327,13 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
       "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "@jridgewell/set-array": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
       "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "@jridgewell/source-map": {
       "version": "0.3.3",
@@ -10115,7 +10356,6 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
       "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@jridgewell/resolve-uri": "3.1.0",
         "@jridgewell/sourcemap-codec": "1.4.14"
@@ -10125,8 +10365,7 @@
           "version": "1.4.14",
           "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
           "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
-          "dev": true,
-          "peer": true
+          "dev": true
         }
       }
     },
@@ -11110,15 +11349,13 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
       "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "dev": true,
-      "peer": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -11131,6 +11368,12 @@
       "dev": true,
       "peer": true
     },
+    "arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -11173,7 +11416,6 @@
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
       "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
       "dev": true,
-      "peer": true,
       "requires": {
         "browserslist": "^4.21.5",
         "caniuse-lite": "^1.0.30001464",
@@ -11213,8 +11455,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "bl": {
       "version": "4.1.0",
@@ -11315,7 +11556,6 @@
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
       "dev": true,
-      "peer": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -11325,7 +11565,6 @@
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
       "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
       "dev": true,
-      "peer": true,
       "requires": {
         "caniuse-lite": "^1.0.30001449",
         "electron-to-chromium": "^1.4.284",
@@ -11385,6 +11624,12 @@
         "tslib": "^2.0.3"
       }
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -11402,8 +11647,7 @@
       "version": "1.0.30001486",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz",
       "integrity": "sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -11427,7 +11671,6 @@
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
       "dev": true,
-      "peer": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -11444,7 +11687,6 @@
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
           "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
           "dev": true,
-          "peer": true,
           "requires": {
             "is-glob": "^4.0.1"
           }
@@ -12044,6 +12286,12 @@
       "dev": true,
       "peer": true
     },
+    "didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -12054,6 +12302,12 @@
         "path-type": "^4.0.0"
       }
     },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -12180,8 +12434,7 @@
       "version": "1.4.392",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.392.tgz",
       "integrity": "sha512-TXQOMW9tnhIms3jGy/lJctLjICOgyueZFJ1KUtm6DTQ+QpxX3p7ZBwB6syuZ9KBuT5S4XX7bgY1ECPgfxKUdOg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "emoji-regex": {
       "version": "8.0.0",
@@ -12291,8 +12544,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
       "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "escape-html": {
       "version": "1.0.3",
@@ -12624,7 +12876,6 @@
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
       "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
       "dev": true,
-      "peer": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -12638,7 +12889,6 @@
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
           "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
           "dev": true,
-          "peer": true,
           "requires": {
             "is-glob": "^4.0.1"
           }
@@ -12709,7 +12959,6 @@
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
       "dev": true,
-      "peer": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -12793,8 +13042,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "fresh": {
       "version": "0.5.2",
@@ -13249,7 +13497,6 @@
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "dev": true,
-      "peer": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -13311,8 +13558,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "is-path-inside": {
       "version": "3.0.3",
@@ -13409,6 +13655,12 @@
         }
       }
     },
+    "jiti": {
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
+      "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+      "dev": true
+    },
     "joi": {
       "version": "17.9.2",
       "resolved": "https://registry.npmjs.org/joi/-/joi-17.9.2.tgz",
@@ -13547,8 +13799,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "lines-and-columns": {
       "version": "1.2.4",
@@ -13823,8 +14074,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "methods": {
       "version": "1.1.2",
@@ -13838,7 +14088,6 @@
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
       "dev": true,
-      "peer": true,
       "requires": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -14008,7 +14257,6 @@
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
       "dev": true,
-      "peer": true,
       "requires": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -14077,8 +14325,7 @@
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
       "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "normalize-package-data": {
       "version": "2.5.0",
@@ -14104,15 +14351,13 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "normalize-url": {
       "version": "6.1.0",
@@ -14151,8 +14396,13 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
-      "peer": true
+      "dev": true
+    },
+    "object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true
     },
     "object-inspect": {
       "version": "1.12.3",
@@ -14417,8 +14667,19 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "peer": true
+      "dev": true
+    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true
+    },
+    "pirates": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
+      "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
+      "dev": true
     },
     "portfinder": {
       "version": "1.0.32",
@@ -14521,6 +14782,44 @@
       "peer": true,
       "requires": {}
     },
+    "postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      }
+    },
+    "postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1"
+      }
+    },
+    "postcss-load-config": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "dev": true,
+      "requires": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^2.1.1"
+      },
+      "dependencies": {
+        "yaml": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz",
+          "integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==",
+          "dev": true
+        }
+      }
+    },
     "postcss-loader": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz",
@@ -14641,6 +14940,15 @@
         "icss-utils": "^5.0.0"
       }
     },
+    "postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.11"
+      }
+    },
     "postcss-normalize-charset": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
@@ -14798,8 +15106,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "prelude-ls": {
       "version": "1.2.1",
@@ -15015,6 +15322,15 @@
         }
       }
     },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "requires": {
+        "pify": "^2.3.0"
+      }
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -15113,7 +15429,6 @@
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
-      "peer": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -15689,6 +16004,43 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "sucrase": {
+      "version": "3.32.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
+      "integrity": "sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+          "dev": true
+        },
+        "glob": {
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -15729,6 +16081,37 @@
         }
       }
     },
+    "tailwindcss": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
+      "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
+      "dev": true,
+      "requires": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.18.2",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      }
+    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -15783,7 +16166,6 @@
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
       "dev": true,
-      "peer": true,
       "requires": {
         "any-promise": "^1.0.0"
       }
@@ -15793,7 +16175,6 @@
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
       "dev": true,
-      "peer": true,
       "requires": {
         "thenify": ">= 3.1.0 < 4"
       }
@@ -15845,7 +16226,6 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
-      "peer": true,
       "requires": {
         "is-number": "^7.0.0"
       }
@@ -15870,6 +16250,12 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "dev": true
     },
+    "ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
     "tslib": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
@@ -15922,7 +16308,6 @@
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
       "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
       "dev": true,
-      "peer": true,
       "requires": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
diff --git a/17th Website/package.json b/17th Website/package.json
index 5553627..48c4940 100644
--- a/17th Website/package.json	
+++ b/17th Website/package.json	
@@ -21,9 +21,12 @@
     "@vitejs/plugin-vue": "^4.2.1",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/eslint-config-prettier": "^7.1.0",
+    "autoprefixer": "^10.4.14",
     "eslint": "^8.39.0",
     "eslint-plugin-vue": "^9.11.0",
+    "postcss": "^8.4.23",
     "prettier": "^2.8.8",
+    "tailwindcss": "^3.3.2",
     "vite": "^4.3.4"
   }
 }
diff --git a/17th Website/postcss.config.js b/17th Website/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/17th Website/postcss.config.js	
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/17th Website/src/assets/main.css b/17th Website/src/assets/main.css
deleted file mode 100644
index 7e29a0a..0000000
--- a/17th Website/src/assets/main.css	
+++ /dev/null
@@ -1,23 +0,0 @@
-@import './base.css';
-
-#app {
-  /* max-width: 1280px; */
-  /* margin: 0 auto;
-  padding: 2rem; */
-
-  /* font-weight: normal; */
-}
-
-
-/* @media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-} */
diff --git a/17th Website/src/components/ProfilePage/profileHeader.vue b/17th Website/src/components/ProfilePage/profileHeader.vue
index 7e365fe..d3426bb 100644
--- a/17th Website/src/components/ProfilePage/profileHeader.vue	
+++ b/17th Website/src/components/ProfilePage/profileHeader.vue	
@@ -1,13 +1,17 @@
 <script>
+// import {subnav} from './profileSubNav.vue'
+
 export default {
     name: 'profileHeader',
     data() {
         return {
             count: 0
         }
-    }
+    },
+    // components: {
+    //     subnav,
+    // }
 }
-
 </script>
 
 <template>
diff --git a/17th Website/src/components/ProfilePage/profileSubNav.vue b/17th Website/src/components/ProfilePage/profileSubNav.vue
index 90da27b..400383d 100644
--- a/17th Website/src/components/ProfilePage/profileSubNav.vue	
+++ b/17th Website/src/components/ProfilePage/profileSubNav.vue	
@@ -8,7 +8,7 @@ import { RouterLink } from 'vue-router'
         link: String,
         content: String,
         active: Boolean
-    }
+    },
  }
 </script>
 
diff --git a/17th Website/src/components/dropdown/Dropdown.vue b/17th Website/src/components/dropdown/Dropdown.vue
index 0b77fd2..74783a6 100644
--- a/17th Website/src/components/dropdown/Dropdown.vue	
+++ b/17th Website/src/components/dropdown/Dropdown.vue	
@@ -1,71 +1,32 @@
-<script>
-import { provide } from 'vue';
-import { Icon } from '@iconify/vue'
-import clickOutSide from '@mahdikhashan/vue3-click-outside'
-
-export default {
-    name: 'Dropdown',
-    provide() {
-        return {
-            sharedState: this.sharedState
-        }
-    },
-    data() {
-        return {
-            sharedState: {
-                active: false
-            }
-        }
-    },
-    methods: {
-        toggle() {
-            this.sharedState.active = !this.sharedState.active
-        },
-        away() {
-            this.sharedState.active = false
-        }
-    },
-    components: {
-        Icon
-    },
-    props: {
-        title: String
-    },
-    directives: {
-        clickOutSide,
-    }
-}
-</script>
-
 <template>
-    <div id="button" @click="toggle" v-click-out-side="away">
-        <slot name="toggler">
-            <button>
-                <p>{{ title }}</p>
-                <Icon icon="carbon:caret-down" />
-            </button>
+    <Listbox v-model="unitFilter" class="w-32 mx-5">
+        <div class="relative">
+            <ListboxButton class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
 
-        </slot>
-        
-        <slot />
-    </div>
+                <span class="block w-full text-left">{{ unitFilter.name }}</span>
+                <span class="absolute inset-y-0 right-0 flex items-center pr-2">
+                    <Icon icon="carbon:chevron-sort" />
+                </span>
+            </ListboxButton>
+            <ListboxOptions class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
+                <ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit" :disabled="unit.disabled"
+                    v-slot="{ active, selected }"
+                    class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
+                    <li>
+                        {{ unit.name }}
+                    </li>
+                </ListboxOption>
+            </ListboxOptions>
+        </div>
+    </Listbox>
 </template>
 
-<style scoped>
-button {
-    background-color: var(--background-secondary);
-    border: none;
-    border-radius: 5px;
-    font-size: 15px;
-    padding: 10px;
-    padding-left: 15px;
-    color: var(--white);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+<script>
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/vue'
+
+export default {
+    props: ['currentValue', 'values'],
+    emits: ['update:currentValue']
 }
 
-p {
-    margin: 0 10px 0 0px;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/17th Website/src/components/dropdown/DropdownContent.vue b/17th Website/src/components/dropdown/DropdownContent.vue
deleted file mode 100644
index b526309..0000000
--- a/17th Website/src/components/dropdown/DropdownContent.vue	
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-import { inject } from 'vue';
-
-export default {
-    name: 'DropdownContent',
-    inject: ['sharedState'],
-    computed: {
-        active() {
-            return this.sharedState.active
-        }
-    }
-}
-</script>
-
-<template>
-    <div v-if="active">
-        <slot />
-    </div>
-</template>
-
-<style scoped>
-div {
-    display: block;
-    width: 10%;
-    position: absolute;
-    background-color: var(--background-secondary);
-    border-radius: 0px 0px 10px 10px;
-}
-</style>
\ No newline at end of file
diff --git a/17th Website/src/components/dropdown/DropdownItem.vue b/17th Website/src/components/dropdown/DropdownItem.vue
deleted file mode 100644
index a6c29a0..0000000
--- a/17th Website/src/components/dropdown/DropdownItem.vue	
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-export default {
-    name: 'dropdownItem',
-}
-</script>
-
-<template>
-    <div>
-        <slot></slot>
-    </div>
-</template>
-
-<style scoped>
-* {
-    color: var(--white);
-    padding: 10px;
-}
-
-div {
-    padding: 15px;
-}
-
-div:last-child {
-    border-radius: 0 0 5px 5px;
-}
-
-div:hover {
-    background-color: var(--accent-primary);
-}
-
-</style>
\ No newline at end of file
diff --git a/17th Website/src/components/dropdown/testDropdown.vue b/17th Website/src/components/dropdown/testDropdown.vue
deleted file mode 100644
index fa7adc8..0000000
--- a/17th Website/src/components/dropdown/testDropdown.vue	
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <Listbox v-model="selectedPerson">
-        <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
-        <ListboxOptions>
-            <ListboxOption v-for="person in people" :key="person.id" :value="person" :disabled="person.unavailable">
-                {{ person.name }}
-            </ListboxOption>
-        </ListboxOptions>
-    </Listbox>
-</template>
-  
-<script setup>
-import { ref } from 'vue'
-import {
-    Listbox,
-    ListboxButton,
-    ListboxOptions,
-    ListboxOption,
-} from '@headlessui/vue'
-
-const people = [
-    { id: 1, name: 'Durward Reynolds', unavailable: false },
-    { id: 2, name: 'Kenton Towne', unavailable: false },
-    { id: 3, name: 'Therese Wunsch', unavailable: false },
-    { id: 4, name: 'Benedict Kessler', unavailable: true },
-    { id: 5, name: 'Katelyn Rohan', unavailable: false },
-]
-const selectedPerson = ref(people[0])
-</script>
-  
-<script>
-    export default {
-        name: 'testDropdown'
-    }
-</script>
\ No newline at end of file
diff --git a/17th Website/src/components/navigation/Navbar.vue b/17th Website/src/components/navigation/Navbar.vue
index 5a6ffab..8dc57f2 100644
--- a/17th Website/src/components/navigation/Navbar.vue	
+++ b/17th Website/src/components/navigation/Navbar.vue	
@@ -25,7 +25,7 @@ export default {
 
         <!-- TODO: Connect these buttons to the scripts, figure out if I can turn this into a component or summ -->
         <navitem icon="carbon:user" link="/profile" @click="setActive('#user')" :active="activeButton === '#user'" />
-        <hr>
+        <hr class="text-white">
         <navitem icon="carbon:home" link="/" @click="setActive('#home')" :active="activeButton === '#home'" />
         <navitem icon="carbon:events" link="/users" @click="setActive('#users')" :active="activeButton === '#users'"/>
         <navitem icon="carbon:align-box-bottom-left" link="#" @click="setActive('#docs')"  :active="activeButton === '#docs'"/>
diff --git a/17th Website/src/components/navigation/navitem.vue b/17th Website/src/components/navigation/navitem.vue
index ae88817..374e3fa 100644
--- a/17th Website/src/components/navigation/navitem.vue	
+++ b/17th Website/src/components/navigation/navitem.vue	
@@ -35,23 +35,25 @@ export default {
 </script>
 
 <template>
-    <RouterLink :to="link" class="button" :class="{active: active}">
-        <Icon :icon="icon" />
-    </RouterLink>
+    <div class="aspect-square flex items-center place-content-center">
+        <RouterLink :to="link" class="button" :class="{ active: active }">
+            <Icon :icon="icon" />
+        </RouterLink>
+    </div>
 </template>
 
 
 <style scoped>
 .button {
     color: var(--white);
-    font-size: 30px;
-    overflow: hidden;
-    height: 40px;
+    font-size: 35px;
+    /* overflow: hidden; */
+    /* height: 40px; */
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: 10px 10px;
-    padding: 5px;
+    margin: 10px;
+    padding: 10px;
     transition: color 0.2s ease-in-out;
 }
 
diff --git a/17th Website/src/main.js b/17th Website/src/main.js
index c7a852f..b16dcfb 100644
--- a/17th Website/src/main.js	
+++ b/17th Website/src/main.js	
@@ -1,4 +1,5 @@
-import './assets/main.css'
+// import './assets/main.css'
+import './style.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'
diff --git a/17th Website/src/assets/base.css b/17th Website/src/style.css
similarity index 89%
rename from 17th Website/src/assets/base.css
rename to 17th Website/src/style.css
index c665264..87a23e9 100644
--- a/17th Website/src/assets/base.css	
+++ b/17th Website/src/style.css	
@@ -1,4 +1,9 @@
 /* color palette from <https://github.com/vuejs/theme> */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --background-primary: #272731;
   --background-secondary: #1C1C21;
diff --git a/17th Website/src/views/users.vue b/17th Website/src/views/users.vue
index 3fa11f1..e41575f 100644
--- a/17th Website/src/views/users.vue	
+++ b/17th Website/src/views/users.vue	
@@ -1,7 +1,7 @@
 <script>
 import { ref } from 'vue'
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
-import testDropdown from '../components/dropdown/testDropdown.vue'
+import { Icon } from '@iconify/vue'
 
 export default {
     data() {
@@ -10,9 +10,6 @@ export default {
             items: [{ message: 'Foo' }, { message: 'Bar' }],
             dropped: false,
             search: '',
-            filter1: 'All Groups',
-
-            filter2: 'All Roles',
 
             unitFilters: [
                 { id: 1, name: 'All Groups', disabled: false },
@@ -23,6 +20,16 @@ export default {
             ],
 
             unitFilter: { id: 1, name: 'All Groups', disabled: false },
+
+            roleFilters: [
+                { id: 1, name: 'All Roles', disabled: false },
+                { id: 2, name: 'NCO', disabled: false },
+                { id: 3, name: 'Admin', disabled: false },
+                { id: 4, name: 'Recruiter', disabled: false },
+                { id: 5, name: 'RRC', disabled: false },
+            ],
+
+            roleFilter: { id: 1, name: 'All Roles', disabled: false },
         }
     },
     methods: {
@@ -30,11 +37,9 @@ export default {
             this.dropped = !this.dropped
         },
         resetFilters() {
-            this.filter1 = 'All Groups'
-            this.filter2 = 'All Roles'
             this.search = ''
-            this.unitFilter.id = 1
-            this.unitFilter.name = 'All Groups'
+            this.unitFilter = this.unitFilters[0];
+            this.roleFilter = this.roleFilters[0];
         }
     },
     components: {
@@ -42,9 +47,8 @@ export default {
         ListboxButton,
         ListboxOption,
         ListboxOptions,
-        testDropdown,
+        Icon,
     },
-
 }
 
 // const unitFilter = ref(unitFilters[1])
@@ -58,35 +62,56 @@ export default {
         <div id="searchRow">
             <input type="text" v-model="search" placeholder="Search..." />
             <div id="dropdownWrapper">
-                <select v-model="filter1">
-                    <option>All Groups</option>
-                    <option>Alpha</option>
-                    <option>Echo</option>
-                    <option>HHC</option>
-                    <option>Recruit</option>
-                </select>
-                <select v-model="filter2">
-                    <option>All Roles</option>
-                    <option>NCO</option>
-                    <option>Admin</option>
-                    <option>Recruiter</option>
-                    <option>RRC</option>
-                </select>
 
-                <Listbox v-model="unitFilter">
-                    <ListboxButton class="lbButton">
-                        {{ unitFilter.name }}
-                        <Icon icon="carbon:caret-down" />
-                    </ListboxButton>
-                    <ListboxOptions class="lbOptions">
-                        <ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit" :disabled="unit.disabled">
-                            {{ unit.name }}
-                        </ListboxOption>
-                    </ListboxOptions>
+                <Listbox v-model="unitFilter" class="w-32 mx-2">
+                    <div class="relative">
+                        <ListboxButton
+                            class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
+
+                            <span class="block w-full text-left">{{ unitFilter.name }}</span>
+                            <span class="absolute inset-y-0 right-0 flex items-center pr-2">
+                                <Icon icon="carbon:chevron-sort" />
+                            </span>
+                        </ListboxButton>
+                        <ListboxOptions
+                            class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
+                            <ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit"
+                                :disabled="unit.disabled" v-slot="{ active, selected }"
+                                class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
+                                <li>
+                                    {{ unit.name }}
+                                </li>
+                            </ListboxOption>
+                        </ListboxOptions>
+                    </div>
                 </Listbox>
 
-                <!-- This button needs to get finished -->
-                <button @click="resetFilters()">Clear Filters</button>
+                <Listbox v-model="roleFilter" class="w-32 mx-2">
+                    <div class="relative">
+                        <ListboxButton
+                            class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
+
+                            <span class="block w-full text-left">{{ roleFilter.name }}</span>
+                            <span class="absolute inset-y-0 right-0 flex items-center pr-2">
+                                <Icon icon="carbon:chevron-sort" />
+                            </span>
+                        </ListboxButton>
+                        <ListboxOptions
+                            class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
+                            <ListboxOption v-for="role in roleFilters" :key="role.id" :value="role"
+                                :disabled="role.disabled" v-slot="{ active, selected }"
+                                class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
+                                <li>
+                                    {{ role.name }}
+                                </li>
+                            </ListboxOption>
+                        </ListboxOptions>
+                    </div>
+                </Listbox>
+
+                <button @click="resetFilters()"
+                    class="bg-gray-dark hover:bg-blue text-white transition-colors duration-0.5s rounded-md px-5">Clear
+                    Filters</button>
             </div>
         </div>
 
@@ -112,10 +137,7 @@ export default {
     </table>
 </template>
 
-<style>
-@import '../assets/base.css';
-
-
+<style scoped>
 .lbButton {
     background-color: var(--background-secondary);
     border: none;
@@ -128,15 +150,6 @@ export default {
     position: absolute;
 }
 
-button {
-    transition: all 0.2s ease-out;
-    cursor: pointer;
-}
-
-button:hover {
-    background-color: var(--accent-primary);
-}
-
 .clicked {
     filter: brightness(85%)
 }
@@ -146,16 +159,6 @@ button:hover {
     display: flex;
 }
 
-#dropdownWrapper select {
-    background-color: var(--background-secondary);
-    border: none;
-    border-radius: 5px;
-    color: var(--white);
-    padding: 10px;
-    outline: none;
-    cursor: pointer;
-}
-
 input {
     background-color: var(--background-secondary);
     padding: 10px;
@@ -164,24 +167,13 @@ input {
     border-style: none;
     border-radius: 5px;
     width: 25vw;
-    /* transition: all 0.2s ease-out; THESE TRANSITIONS ARE BROKEN*/
 }
 
-/* textarea:focus, input:focus {
-    outline-color: var(--accent-primary);
-    border-color: var(--accent-primary);
-}  */
-
 #searchRow {
     margin: 30px 0;
     display: flex;
 }
 
-#searchRow select,
-button {
-    margin: 0 15px 0 0;
-}
-
 #header h1 {
     color: var(--white);
     font-weight: 400;
diff --git a/17th Website/tailwind.config.js b/17th Website/tailwind.config.js
new file mode 100644
index 0000000..3c42481
--- /dev/null
+++ b/17th Website/tailwind.config.js	
@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  darkMode: true,
+  theme: {
+    colors: {
+      'white': '#EDF2F4',
+      'blue': '#01bde7',
+      'gray-dark': '#1C1C21',
+      'gray-light': '#272731'
+
+    },
+    extend: {},
+  },
+  plugins: [],
+}
+