diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3874f92..4c970c9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -67,7 +67,7 @@ export default function Home() {
                         <select
                             value={selectedSubject}
                             onChange={(e) => setSelectedSubject(e.target.value)}
-                            className="w-56 max-w-lg h-10 px-4 text-sm bg-white border border-gray-300 rounded-lg focus:outline-none"
+                            className="bg-[#181a1b] text-[#efefef] w-56 max-w-lg h-10 px-4 text-sm border border-[#3C4143] rounded-lg focus:outline-none"
                         >
                             <option value="">Tantárgy</option>
                             {subjects.map((subject) => (
@@ -84,7 +84,7 @@ export default function Home() {
                         <select
                             value={selectedYear}
                             onChange={(e) => setSelectedYear(e.target.value)}
-                            className="w-56 max-w-lg h-10 px-4 text-sm bg-white border border-gray-300 rounded-lg focus:outline-none"
+                            className="bg-[#181a1b] text-[#efefef] w-56 max-w-lg h-10 px-4 text-sm border border-[#3C4143] rounded-lg focus:outline-none"
                         >
                             <option value="">Év</option>
                             {years.map((year) => (
@@ -98,7 +98,7 @@ export default function Home() {
                         <select
                             value={selectedSeason}
                             onChange={(e) => setSelectedSeason(e.target.value)}
-                            className="w-56 max-w-lg h-10 px-4 text-sm bg-white border border-gray-300 rounded-lg focus:outline-none"
+                            className="bg-[#181a1b] text-[#efefef] w-56 max-w-lg h-10 px-4 text-sm border border-[#3C4143] rounded-lg focus:outline-none"
                         >
                             <option value="">Évszak</option>
                             <option value="osz">Ősz</option>
@@ -109,7 +109,7 @@ export default function Home() {
                         <select
                             value={selectedLevel}
                             onChange={(e) => setSelectedLevel(e.target.value)}
-                            className="w-56 max-w-lg h-10 px-4 text-sm bg-white border border-gray-300 rounded-lg focus:outline-none"
+                            className="bg-[#181a1b] text-[#efefef] w-56 max-w-lg h-10 px-4 text-sm border border-[#3C4143] rounded-lg focus:outline-none"
                         >
                             <option value="">Szint</option>
                             <option value="kozep">Közép</option>
@@ -120,7 +120,7 @@ export default function Home() {
                         <select
                             value={selectedType}
                             onChange={(e) => setSelectedType(e.target.value)}
-                            className="w-56 max-w-lg h-10 px-4 text-sm bg-white border border-gray-300 rounded-lg focus:outline-none"
+                            className="bg-[#181a1b] text-[#efefef] w-56 max-w-lg h-10 px-4 text-sm border border-[#3C4143] rounded-lg focus:outline-none"
                         >
                             <option value="">Típus</option>
                             <option value="fl">Feladatlap</option>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b9dc9f1..f2c7d14 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,22 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
 body {
-    background-color: #121212;
-    color: #efefef;
-}
-
-option {
-    background-color: #121212;
-    color: #efefef;
-}
-
-select {
-    color: #121212;
+    background-color: #0e0f0f;
 }