diff --git a/frontend/react/src/eventscontext.tsx b/frontend/react/src/eventscontext.tsx
index 85b267e7..dbba9005 100644
--- a/frontend/react/src/eventscontext.tsx
+++ b/frontend/react/src/eventscontext.tsx
@@ -6,11 +6,13 @@ export const EventsContext = createContext({
     setUnitControlMenuVisible: (e: boolean) => {},
     setMeasureMenuVisible: (e: boolean) => {},
     setDrawingMenuVisible: (e: boolean) => {},
+    setOptionsMenuVisible: (e: boolean) => {},
     toggleMainMenuVisible: () => {},
     toggleSpawnMenuVisible: () => {},
     toggleUnitControlMenuVisible: () => {},
     toggleMeasureMenuVisible: () => {},
     toggleDrawingMenuVisible: () => {},
+    toggleOptionsMenuVisible: () => {},
 })
 
 export const EventsProvider = EventsContext.Provider;
diff --git a/frontend/react/src/statecontext.tsx b/frontend/react/src/statecontext.tsx
index 93f47833..ba263e33 100644
--- a/frontend/react/src/statecontext.tsx
+++ b/frontend/react/src/statecontext.tsx
@@ -7,6 +7,7 @@ export const StateContext = createContext({
     unitControlMenuVisible: false,
     measureMenuVisible: false,
     drawingMenuVisible: false,
+    optionsMenuVisible: false,
 	mapHiddenTypes: MAP_HIDDEN_TYPES_DEFAULTS,
     mapOptions: MAP_OPTIONS_DEFAULTS
 })
diff --git a/frontend/react/src/ui/components/olbuttongroup.tsx b/frontend/react/src/ui/components/olbuttongroup.tsx
index bd115478..9cd3a9ff 100644
--- a/frontend/react/src/ui/components/olbuttongroup.tsx
+++ b/frontend/react/src/ui/components/olbuttongroup.tsx
@@ -17,7 +17,7 @@ export function OlButtonGroupItem(props: {
     active: boolean,
     onClick: () => void
 }) {
-    return <button onClick={props.onClick} type="button" data-active={props.active} className="h-11 w-11 first-of-type:rounded-s-md last-of-type:rounded-e-md py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200  hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:data-[active='true']:bg-blue-500 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-500 dark:focus:ring-blue-500 dark:focus:text-white">
+    return <button onClick={props.onClick} type="button" data-active={props.active} className="h-11 w-11 first-of-type:rounded-s-md last-of-type:rounded-e-md py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:data-[active='true']:bg-blue-500 dark:data-[active='true']:border-none dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-500 dark:focus:ring-blue-500 dark:focus:text-white">
         <FontAwesomeIcon icon={props.icon} />
     </button>
 }
\ No newline at end of file
diff --git a/frontend/react/src/ui/components/oldropdown.tsx b/frontend/react/src/ui/components/oldropdown.tsx
index 8ec9d77f..c1593024 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-600 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-700 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 3f783dc7..7a314634 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-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>
+    return <button onClick={props.onClick} className="border dark:border-gray-600 relative text-sm flex flex-row flex-none my-auto contents-center justify-between w-[120px] 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-14 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 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>
+        <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.5 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 ce56e2ec..23ac1400 100644
--- a/frontend/react/src/ui/components/olnumberinput.tsx
+++ b/frontend/react/src/ui/components/olnumberinput.tsx
@@ -9,14 +9,14 @@ export function OlNumberInput(props: {
     onChange: (e: ChangeEvent<HTMLInputElement>) => void
 }) {
     return <div className="w-fit">
-        <div className="relative flex items-center max-w-[8rem]">
-            <button type="button" onClick={props.onDecrease} 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-s-lg p-3 h-10 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
+        <div className="relative flex items-center max-w-[7rem]">
+            <button type="button" onClick={props.onDecrease} className="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-200 rounded-s-lg p-3 h-10 focus:ring-gray-100 dark:focus:ring-blue-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 2">
                     <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 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">
+            <input type="text" onChange={props.onChange} min={props.min} max={props.max} className="bg-gray-50 h-10 text-center text-gray-900 text-sm font-bold focus:ring-blue-500 focus:border-blue-700 block w-full py-2.5 dark:bg-olympus-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-700 dark:focus:border-blue-700" value={props.value} />
+            <button type="button" onClick={props.onIncrease}  className="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 hover:bg-gray-200 rounded-e-lg p-3 h-10 focus:ring-gray-100 dark:focus:ring-blue-500 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"/>
                 </svg>
diff --git a/frontend/react/src/ui/panels/components/menu.tsx b/frontend/react/src/ui/panels/components/menu.tsx
index 4daed6c7..bccd4510 100644
--- a/frontend/react/src/ui/panels/components/menu.tsx
+++ b/frontend/react/src/ui/panels/components/menu.tsx
@@ -1,4 +1,4 @@
-import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft, faClose } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 
@@ -11,13 +11,9 @@ export function Menu(props: {
 	children?: JSX.Element | JSX.Element[],
 }) {
 	return <div data-open={props.open} className="w-[430px] absolute top-[62px] left-16 z-ui-0 h-screen overflow-y-auto transition-transform data-[open='false']:-translate-x-full bg-gray-200 dark:bg-olympus-700" tabIndex={-1}>
-		<h5 className="w-full inline-flex items-center pb-3 p-4 shadow-lg dark:border-gray-700 text-base font-semibold text-gray-900 dark:text-gray-400">
-			{props.showBackButton && <FontAwesomeIcon onClick={props.onBack ?? (() => { })} icon={faArrowLeft} className="mr-4 cursor-pointer dark:hover:bg-gray-600 p-2 rounded-md" />} {props.title}
-			<button type="button" onClick={props.onClose} className="text-gray-900 dark:text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white ml-auto" >
-				<svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-					<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
-				</svg>
-			</button>
+		<h5 className="w-full inline-flex items-center pb-3 p-4 shadow-lg font-semibold text-gray-800 dark:text-gray-400">
+			{props.showBackButton && <FontAwesomeIcon onClick={props.onBack ?? (() => { })} icon={faArrowLeft} className="mr-1 cursor-pointer p-2 rounded-md dark:hover:bg-gray-700  dark:text-gray-500 dark:hover:text-white"/>} {props.title}
+			<FontAwesomeIcon onClick={props.onClose} icon={faClose} className="flex text-lg items-center cursor-pointer justify-center ml-auto p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:text-gray-500 "/>
 		</h5>
 		{props.children}
 	</div>
diff --git a/frontend/react/src/ui/panels/header.tsx b/frontend/react/src/ui/panels/header.tsx
index 32f61e44..95177953 100644
--- a/frontend/react/src/ui/panels/header.tsx
+++ b/frontend/react/src/ui/panels/header.tsx
@@ -21,7 +21,7 @@ export function Header() {
 							<div className="ml-auto">
 								<OlRoundStateButton icon={faLock} checked={false} onClick={() => {}}/>
 							</div>
-							<div className="flex flex-row h-fit items-center justify-start gap-2">
+							<div className="flex flex-row h-fit items-center justify-start gap-1">
 								{
 									Object.entries({
 										'human': olButtonsVisibilityHuman,'olympus': olButtonsVisibilityOlympus, 'dcs': olButtonsVisibilityDcs
@@ -35,7 +35,7 @@ export function Header() {
 									})
 								}
 							</div>
-							<div className='h-11 w-0 border-l-[1px] border-gray-700'></div>
+							<div className='h-8 w-0 border-l-[2px] border-gray-700'></div>
 							<div className="flex flex-row h-fit items-center justify-start gap-1">
 								{
 									Object.entries({
@@ -51,7 +51,7 @@ export function Header() {
 									})
 								}
 							</div>
-							<div className='h-11 w-0 border-l-[1px] border-gray-700'></div>
+							<div className='h-8 w-0 border-l-[2px] border-gray-700'></div>
 							<div className="flex flex-row h-fit items-center justify-start gap-1">
 								<OlRoundStateButton
 									onClick={() => getApp().getMap().setHiddenType( 'blue', !appState.mapHiddenTypes['blue'] )}
diff --git a/frontend/react/src/ui/panels/sidebar.tsx b/frontend/react/src/ui/panels/sidebar.tsx
index 48b1e5ba..df277211 100644
--- a/frontend/react/src/ui/panels/sidebar.tsx
+++ b/frontend/react/src/ui/panels/sidebar.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { OlStateButton } from '../components/olstatebutton';
-import { faPlus, faGamepad, faRuler, faPencil, faListDots } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faGamepad, faRuler, faPencil, faEllipsisV, faCog } from '@fortawesome/free-solid-svg-icons';
 import { EventsConsumer } from '../../eventscontext';
 import { StateConsumer } from '../../statecontext';
 
@@ -12,11 +12,12 @@ export function SideBar() {
 					<nav className="z-ui-1 h-full bg-gray-300 border-gray-200 dark:bg-olympus-800 dark:border-gray-700">
 						<div className="flex flex-wrap items-center justify-center p-4 w-16">
 							<div className="flex flex-col items-center justify-center gap-2.5">
-								<OlStateButton onClick={events.toggleMainMenuVisible} checked={appState.mainMenuVisible} icon={faListDots}></OlStateButton>
+								<OlStateButton onClick={events.toggleMainMenuVisible} checked={appState.mainMenuVisible} icon={faEllipsisV}></OlStateButton>
 								<OlStateButton onClick={events.toggleSpawnMenuVisible} checked={appState.spawnMenuVisible} icon={faPlus}></OlStateButton>
 								<OlStateButton onClick={events.toggleUnitControlMenuVisible} checked={appState.unitControlMenuVisible}  icon={faGamepad}></OlStateButton>
 								<OlStateButton onClick={events.toggleMeasureMenuVisible} checked={appState.measureMenuVisible} icon={faRuler}></OlStateButton>
 								<OlStateButton onClick={events.toggleDrawingMenuVisible} checked={appState.drawingMenuVisible} icon={faPencil}></OlStateButton>
+								<OlStateButton onClick={events.toggleOptionsMenuVisible} checked={appState.optionsMenuVisible} icon={faCog}></OlStateButton>
 							</div>
 						</div>
 					</nav>
diff --git a/frontend/react/src/ui/panels/unitcontrolmenu.tsx b/frontend/react/src/ui/panels/unitcontrolmenu.tsx
index def94b1a..3c7361a5 100644
--- a/frontend/react/src/ui/panels/unitcontrolmenu.tsx
+++ b/frontend/react/src/ui/panels/unitcontrolmenu.tsx
@@ -139,7 +139,7 @@ export function UnitControlMenu() {
 							<span className="font-normal dark:text-white">Altitude</span>
 							<span
 								data-flash={selectedUnitsData.desiredAltitude === undefined}
-								className="data-[flash='true']:animate-pulse dark:text-blue-500 font-bold">{selectedUnitsData.desiredAltitude !== undefined ? (selectedUnitsData.desiredAltitude + " FT") : "Different values"}
+								className="data-[flash='true']:animate-pulse dark:text-blue-500 font-bold">{selectedUnitsData.desiredAltitude !== undefined ? (Intl.NumberFormat("en-US").format(selectedUnitsData.desiredAltitude) + " FT") : "Different values"}
 							</span>
 						</div>
 						<OlLabelToggle
diff --git a/frontend/react/src/ui/panels/unitspawnmenu.tsx b/frontend/react/src/ui/panels/unitspawnmenu.tsx
index 0d96b3f7..9d50c527 100644
--- a/frontend/react/src/ui/panels/unitspawnmenu.tsx
+++ b/frontend/react/src/ui/panels/unitspawnmenu.tsx
@@ -72,7 +72,7 @@ export function UnitSpawnMenu(props: {
                 <div className="flex flex-row content-center justify-between">
                     <div className="flex flex-col">
                         <span className="font-normal dark:text-white">Altitude</span>
-                        <span className="font-bold dark:text-blue-500">{`${spawnAltitude} FT`}</span>
+                        <span className="font-bold dark:text-blue-500">{`${Intl.NumberFormat("en-US").format(spawnAltitude)} FT`}</span>
                     </div>
                     <OlLabelToggle toggled={spawnAltitudeType} leftLabel={"AGL"} rightLabel={"ASL"} onClick={() => setSpawnAltitudeType(!spawnAltitudeType)} />
                 </div>