diff --git a/frontend/react/src/ui/components/olcoalitiontoggle.tsx b/frontend/react/src/ui/components/olcoalitiontoggle.tsx
index 4d28cdcb..43af1b47 100644
--- a/frontend/react/src/ui/components/olcoalitiontoggle.tsx
+++ b/frontend/react/src/ui/components/olcoalitiontoggle.tsx
@@ -15,7 +15,7 @@ export function OlCoalitionToggle(props: {
 		"data-[coalition='red']:after:translate-x-full rtl:data-[coalition='red']:after:-translate-x-full data-[coalition='red']:after:border-white " + 
 		" data-[coalition='blue']:bg-blue-600 data-[coalition='neutral']:bg-gray-400 data-[coalition='red']:bg-red-500"}>
 		</div>
-		<span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300 data-[flash='true']:after:animate-pulse">
+		<span className="ms-3 text-gray-900 dark:text-white data-[flash='true']:after:animate-pulse">
 			{props.coalition? `Coalition (${props.coalition[0].toLocaleUpperCase() + props.coalition.substring(1)})`: "Different values"}
 		</span>
 	</div>
diff --git a/frontend/react/src/ui/components/oldropdown.tsx b/frontend/react/src/ui/components/oldropdown.tsx
index adcef79c..8ec9d77f 100644
--- a/frontend/react/src/ui/components/oldropdown.tsx
+++ b/frontend/react/src/ui/components/oldropdown.tsx
@@ -74,7 +74,7 @@ export function OlDropdown(props: {
     })
 
     return <div className={(props.className ?? "") + " relative"}>
-        <button ref={buttonRef} onClick={() => { setOpen(!open) }} className={"w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-2 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-between border dark:border-gray-600 dark:text-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800 dark:focus:ring-blue-800"} type="button">
+        <button ref={buttonRef} onClick={() => { setOpen(!open) }} className={"w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-2 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-between border dark:border-gray-600 dark:text-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-blue-800"} type="button">
             {props.leftIcon && <FontAwesomeIcon icon={props.leftIcon} className="mr-3" />}
             <span className="text-nowrap text-ellipsis overflow-hidden">
                 {props.label}
diff --git a/frontend/react/src/ui/components/ollabeltoggle.tsx b/frontend/react/src/ui/components/ollabeltoggle.tsx
index 9b5c14d3..3f783dc7 100644
--- a/frontend/react/src/ui/components/ollabeltoggle.tsx
+++ b/frontend/react/src/ui/components/ollabeltoggle.tsx
@@ -6,9 +6,9 @@ export function OlLabelToggle(props: {
     rightLabel: string,
     onClick: () => void
 }) {
-    return <button onClick={props.onClick} className=" relative flex flex-row flex-none my-auto contents-center justify-between w-32 h-10 border dark:border-transparent dark:bg-[#2A3949] rounded-lg py-[5px] px-1 select-none cursor-pointer focus:ring-2 focus:outline-none focus:ring-blue-300 dark:hover:bg-gray-800 dark:focus:ring-blue-800">
+    return <button onClick={props.onClick} className=" relative flex flex-row flex-none my-auto contents-center justify-between w-32 h-10 border dark:border-transparent dark:bg-gray-700 rounded-md py-[5px] px-1 select-none cursor-pointer focus:ring-2 focus:outline-none focus:ring-blue-300 dark:hover:bg-gray-600 dark:focus:ring-blue-800">
         <span data-flash={props.toggled === undefined} data-toggled={props.toggled ?? false} className="data-[flash='true']:animate-pulse absolute my-auto h-[28px] w-[54px] bg-blue-500 rounded-md data-[toggled='true']:translate-x-16 transition-transform"></span>
-        <span data-active={!(props.toggled ?? false)} className="my-auto dark:data-[active='true']:text-white font-normal dark:data-[active='false']:text-gray-400 pl-3 z-ui-2 transition-colors">{props.leftLabel}</span>
+        <span data-active={!(props.toggled ?? false)} className="my-auto dark:data-[active='true']:text-white font-normal dark:data-[active='false']:text-gray-400 dark:data-[active='false']:text-gray-400 pl-3 z-ui-2 transition-colors">{props.leftLabel}</span>
         <span data-active={props.toggled ?? false} className="my-auto dark:data-[active='true']:text-white font-normal dark:data-[active='false']:text-gray-400 pr-3 z-ui-2 transition-colors">{props.rightLabel}</span>
     </button>
 }
\ No newline at end of file
diff --git a/frontend/react/src/ui/components/olnumberinput.tsx b/frontend/react/src/ui/components/olnumberinput.tsx
index c9101452..ce56e2ec 100644
--- a/frontend/react/src/ui/components/olnumberinput.tsx
+++ b/frontend/react/src/ui/components/olnumberinput.tsx
@@ -15,7 +15,7 @@ export function OlNumberInput(props: {
                     <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h16"/>
                 </svg>
             </button>
-            <input type="text" onChange={props.onChange} min={props.min} max={props.max} className="bg-gray-50 border-x-0 border-gray-300 h-10 text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full py-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value={props.value} />
+            <input type="text" onChange={props.onChange} min={props.min} max={props.max} className="bg-gray-50 border border-gray-300 h-10 text-center text-gray-900 text-sm font-bold focus:ring-blue-500 focus:border-blue-500 block w-full py-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value={props.value} />
             <button type="button" onClick={props.onIncrease}  className="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-10 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
                 <svg className="w-3 h-3 text-gray-900 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                     <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 1v16M1 9h16"/>
diff --git a/frontend/react/src/ui/panels/unitspawnmenu.tsx b/frontend/react/src/ui/panels/unitspawnmenu.tsx
index 2f634fdf..0d96b3f7 100644
--- a/frontend/react/src/ui/panels/unitspawnmenu.tsx
+++ b/frontend/react/src/ui/panels/unitspawnmenu.tsx
@@ -112,7 +112,7 @@ export function UnitSpawnMenu(props: {
         <div className="dark:bg-[#243141] h-fit p-4 flex flex-col gap-1">
             {spawnLoadout && spawnLoadout.items.map((item) => {
                 return <div className="flex gap-2 content-center">
-                    <div className="my-auto text-sm rounded-full text-gray-500 dark:bg-[#17212D] px-1.5 py-0.5 text-center">{item.quantity}</div>
+                    <div className="my-auto font-bold text-sm rounded-full text-gray-500 dark:bg-[#17212D] w-6 py-0.5 text-center">{item.quantity}</div>
                     <div className="my-auto text-sm dark:text-gray-300">{item.name}</div>
                 </div>
             })}