diff --git a/tank-frontend/src/App.css b/tank-frontend/src/App.css
index 2846800..af2fb25 100644
--- a/tank-frontend/src/App.css
+++ b/tank-frontend/src/App.css
@@ -4,12 +4,3 @@
     flex-wrap: wrap;
     row-gap: var(--padding-big);
 }
-
-.DropDown {
-    border: solid var(--border-size-thin);
-    padding: var(--padding-normal);
-
-    background: var(--color-background);
-    border-color: var(--color-primary);
-    color: var(--color-primary);
-}
\ No newline at end of file
diff --git a/tank-frontend/src/App.tsx b/tank-frontend/src/App.tsx
index a00b7c6..1496522 100644
--- a/tank-frontend/src/App.tsx
+++ b/tank-frontend/src/App.tsx
@@ -6,7 +6,7 @@ import Column from './components/Column.tsx';
 import Row from './components/Row.tsx';
 import Scoreboard from './Scoreboard.tsx';
 import Button from './components/Button.tsx';
-import MapDropDown from './MapDropDown.tsx';
+import MapChooser from './MapChooser.tsx';
 import './App.css';
 import {getRandomTheme, useStoredTheme} from "./theme.ts";
 import { useState } from 'react';
@@ -21,7 +21,7 @@ export default function App() {
 
         <Row>
             <h1 className="flex-grow">CCCB-Tanks!</h1>
-            <MapDropDown />
+            <MapChooser />
             <Button text="change colors" onClick={() => setTheme(_ => getRandomTheme())}/>
             <Button
                 onClick={() => window.open('https://github.com/kaesaecracker/cccb-tanks-cs', '_blank')?.focus()}
diff --git a/tank-frontend/src/MapChooser.css b/tank-frontend/src/MapChooser.css
new file mode 100644
index 0000000..77086a7
--- /dev/null
+++ b/tank-frontend/src/MapChooser.css
@@ -0,0 +1,9 @@
+
+.MapChooser-DropDown {
+    border: solid var(--border-size-thin);
+    padding: var(--padding-normal);
+
+    background: var(--color-background);
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+}
diff --git a/tank-frontend/src/MapDropDown.tsx b/tank-frontend/src/MapChooser.tsx
similarity index 85%
rename from tank-frontend/src/MapDropDown.tsx
rename to tank-frontend/src/MapChooser.tsx
index c235969..9491570 100644
--- a/tank-frontend/src/MapDropDown.tsx
+++ b/tank-frontend/src/MapChooser.tsx
@@ -1,7 +1,8 @@
 import { ChangeEvent, useEffect, useState } from "react";
 import { getMaps, postMaps } from "./serverCalls";
+import './MapChooser.css'
 
-export default function MapDropDown() {
+export default function MapChooser() {
     const [mapList, setMaps] = useState<string[] | null>(null);
 
     useEffect(() => {
@@ -20,7 +21,7 @@ export default function MapDropDown() {
         event.preventDefault();
     };
 
-    return <select value="maps" className='DropDown' onChange={onChange}>
+    return <select value="maps" className='MapChooser-DropDown' onChange={onChange}>
         <option value="" defaultValue={""} >Choose map</option>
         {mapList?.map(m =>
             <option key={m} value={m}>{m}</option>)}