diff --git a/static/css/dark_theme.css b/static/css/dark_theme.css
new file mode 100644
index 0000000..f856c6c
--- /dev/null
+++ b/static/css/dark_theme.css
@@ -0,0 +1,81 @@
+/* dark_theme.css */
+body {
+    background-color: #121212;
+    color: white;
+    font-family: 'Arial', sans-serif;
+}
+
+h1, h2, h3, p {
+    color: white;
+}
+
+a {
+    color: #1e90ff;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #00bfff; /* Light blue on hover */
+}
+
+button {
+    background-color: #444;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #555; /* Lighten the button color on hover */
+    animation: shake 0.5s; /* Add shake animation on hover */
+}
+
+@keyframes shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    25% {
+        transform: translateX(-3px);
+    }
+    50% {
+        transform: translateX(3px);
+    }
+    75% {
+        transform: translateX(-3px);
+    }
+}
+
+.navbar {
+    background-color: #333;
+    padding: 10px;
+}
+
+.navbar a {
+    color: #1e90ff;
+    padding: 10px;
+    border-radius: 5px;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.navbar a:hover {
+    background-color: #444;
+    color: #00bfff;
+}
+
+.card {
+    background-color: #1e1e1e;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    margin: 10px 0;
+}
+
+.card-header {
+    color: #1e90ff;
+    font-weight: bold;
+}
diff --git a/static/css/halloween_theme.css b/static/css/halloween_theme.css
new file mode 100644
index 0000000..4311597
--- /dev/null
+++ b/static/css/halloween_theme.css
@@ -0,0 +1,46 @@
+/* halloween_theme.css */
+body {
+    background-color: #000000;
+    color: #ffa500;
+    font-family: 'Arial', sans-serif;
+}
+
+h1, h2, h3, p {
+    color: #ff8c00;
+}
+
+a {
+    color: #ff4500;
+}
+
+button {
+    background-color: #333333;
+    color: #ffa500;
+    border: 2px solid #ff4500;
+    padding: 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(255, 69, 0, 0.5);
+}
+
+.navbar {
+    background-color: #333333;
+}
+
+.navbar a {
+    color: #ffa500;
+}
+
+.navbar a:hover {
+    color: #ff4500;
+}
+
+.card {
+    background-color: #1a1a1a;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(255, 165, 0, 0.3);
+}
+
+.card-header {
+    color: #ff8c00;
+}
diff --git a/static/css/light_theme.css b/static/css/light_theme.css
new file mode 100644
index 0000000..8fee504
--- /dev/null
+++ b/static/css/light_theme.css
@@ -0,0 +1,66 @@
+/* light_theme.css */
+body {
+    background-color: #f4f4f4;
+    color: black;
+    font-family: 'Arial', sans-serif;
+}
+
+h1, h2, h3, p {
+    color: black;
+}
+
+a {
+    color: #1e90ff;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #6495ed; /* Slightly darker blue on hover */
+}
+
+button {
+    background-color: #ddd;
+    color: black;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #ccc; /* Lighten the button color on hover */
+}
+
+.navbar {
+    background-color: #fff;
+    padding: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for the navbar */
+}
+
+.navbar a {
+    color: #1e90ff;
+    padding: 10px;
+    border-radius: 5px;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.navbar a:hover {
+    background-color: #e0e0e0; /* Light grey background on hover */
+    color: #6495ed;
+}
+
+.card {
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin: 10px 0;
+}
+
+.card-header {
+    color: #1e90ff;
+    font-weight: bold;
+}
diff --git a/static/css/modern_theme.css b/static/css/modern_theme.css
new file mode 100644
index 0000000..feaa0f4
--- /dev/null
+++ b/static/css/modern_theme.css
@@ -0,0 +1,53 @@
+/* modern_theme.css */
+body {
+    background-color: #1c1c1c;
+    color: #dcdcdc;
+    font-family: 'Arial', sans-serif;
+}
+
+h1, h2, h3, p {
+    color: #f0f0f0;
+}
+
+a {
+    color: #00bcd4;
+}
+
+button {
+    background-color: #00796b;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+}
+
+.navbar {
+    background-color: #263238;
+}
+
+.navbar a {
+    color: #ffffff;
+}
+
+.navbar a:hover {
+    color: #00bcd4;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.card {
+    background-color: #2c2c2c;
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+.card-header {
+    font-size: 1.5rem;
+    color: #00bcd4;
+}
diff --git a/static/css/nordic_theme.css b/static/css/nordic_theme.css
new file mode 100644
index 0000000..8c7f3d5
--- /dev/null
+++ b/static/css/nordic_theme.css
@@ -0,0 +1,46 @@
+/* nordic_theme.css */
+body {
+    background-color: #e0f7fa;
+    color: #01579b;
+    font-family: 'Arial', sans-serif;
+}
+
+h1, h2, h3, p {
+    color: #0277bd;
+}
+
+a {
+    color: #01579b;
+}
+
+button {
+    background-color: #0288d1;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.navbar {
+    background-color: #01579b;
+}
+
+.navbar a {
+    color: #ffffff;
+}
+
+.navbar a:hover {
+    color: #81d4fa;
+}
+
+.card {
+    background-color: #b3e5fc;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+    color: #01579b;
+}
diff --git a/static/css/vampire_theme.css b/static/css/vampire_theme.css
new file mode 100644
index 0000000..75a1a27
--- /dev/null
+++ b/static/css/vampire_theme.css
@@ -0,0 +1,67 @@
+/* vampire_theme.css */
+body {
+    background-color: #1a001a;
+    color: #e6e6e6;
+    font-family: 'Arial', sans-serif;
+}
+
+h1, h2, h3, p {
+    color: #ff0033;
+}
+
+a {
+    color: #9900cc;
+}
+
+button {
+    background-color: #4d004d;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+button:hover {
+    background-color: #660066; /* Lighten the button color */
+    animation: shake 0.5s; /* Apply shake animation */
+}
+
+@keyframes shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    25% {
+        transform: translateX(-3px);
+    }
+    50% {
+        transform: translateX(3px);
+    }
+    75% {
+        transform: translateX(-3px);
+    }
+}
+
+.navbar {
+    background-color: #330033;
+}
+
+.navbar a {
+    color: #ff6699;
+}
+
+.navbar a:hover {
+    color: #ff0033;
+}
+
+.card {
+    background-color: #2e0032;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(255, 0, 51, 0.3);
+}
+
+.card-header {
+    color: #ff0033;
+}