diff --git a/frontend/react/src/ui/components/olstatebutton.tsx b/frontend/react/src/ui/components/olstatebutton.tsx
index be89d9c3..b870eaa7 100644
--- a/frontend/react/src/ui/components/olstatebutton.tsx
+++ b/frontend/react/src/ui/components/olstatebutton.tsx
@@ -1,4 +1,5 @@
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { faLock, faLockOpen, faUnlock, faUnlockAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import React from "react"
 
@@ -21,9 +22,21 @@ export function OlRoundStateButton(props: {
     icon: IconProp,
     onClick: () => void
 }) {
-    const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border border-gray-900 font-medium rounded-full text-sm dark:bg-[transparent] dark:data-[checked='true']:bg-white dark:text-white dark:data-[checked='true']:text-gray-900 dark:border-gray-600 `;
+    const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border-2 border-gray-900 font-medium rounded-full text-sm dark:bg-[transparent] dark:data-[checked='true']:bg-white dark:text-gray-400 dark:data-[checked='true']:text-gray-900 dark:data-[checked='true']:border-white dark:border-gray-400 `;
 
     return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
-        <FontAwesomeIcon icon={props.icon} />
+        <FontAwesomeIcon className="pt-[3px]" icon={props.icon} />
+    </button>
+}
+
+export function OlLockStateButton(props: {
+    className?: string,
+    checked: boolean,
+    onClick: () => void
+}) {
+    const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border-gray-900 font-medium rounded-full text-sm dark:bg-red-500 dark:data-[checked='true']:bg-green-500 dark:text-olympus-900 dark:data-[checked='true']:text-green-900`;
+
+    return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
+        <FontAwesomeIcon className="pt-[3px]" icon={props.checked==true ? faUnlockAlt:faLock} />
     </button>
 }
\ No newline at end of file
diff --git a/frontend/react/src/ui/panels/header.tsx b/frontend/react/src/ui/panels/header.tsx
index 95177953..140cd17f 100644
--- a/frontend/react/src/ui/panels/header.tsx
+++ b/frontend/react/src/ui/panels/header.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { OlRoundStateButton, OlStateButton } from '../components/olstatebutton';
-import { faLock, faPerson, faBrain, faRobot, faJetFighter, faHelicopter, faShield, faTruck, faShip, faPlaneDeparture, faSkull, faShieldAlt, faCamera } from '@fortawesome/free-solid-svg-icons';
+import { OlRoundStateButton, OlStateButton, OlLockStateButton } from '../components/olstatebutton';
+import { faLock, faSkull, faCamera, faFlag } from '@fortawesome/free-solid-svg-icons';
 import { EventsConsumer } from '../../eventscontext';
 import { StateConsumer } from '../../statecontext';
 import { OlDropdownItem, OlDropdown } from '../components/oldropdown';
@@ -19,7 +19,7 @@ export function Header() {
 								<img src="images/icon.png" className='h-10 w-10 p-0 rounded-md mr-2 cursor-pointer'></img>
 							</div>
 							<div className="ml-auto">
-								<OlRoundStateButton icon={faLock} checked={false} onClick={() => {}}/>
+								<OlLockStateButton checked={true} onClick={() => {}}/>
 							</div>
 							<div className="flex flex-row h-fit items-center justify-start gap-1">
 								{
@@ -56,15 +56,15 @@ export function Header() {
 								<OlRoundStateButton
 									onClick={() => getApp().getMap().setHiddenType( 'blue', !appState.mapHiddenTypes['blue'] )}
 									checked={!appState.mapHiddenTypes['blue']}
-									icon={faShield} className={"!text-blue-500"} />
+									icon={faFlag} className={"!text-blue-500"} />
 								<OlRoundStateButton
 									onClick={() => getApp().getMap().setHiddenType('red', !appState.mapHiddenTypes['red'] )}
 									checked={!appState.mapHiddenTypes['red']}
-									icon={faShield} className={"!text-red-500"} />
+									icon={faFlag} className={"!text-red-500"} />
 								<OlRoundStateButton
 									onClick={() => getApp().getMap().setHiddenType('neutral', !appState.mapHiddenTypes['neutral'] )}
 									checked={!appState.mapHiddenTypes['neutral']}
-									icon={faShield} className={"!text-gray-500"} />
+									icon={faFlag} className={"!text-gray-500"} />
 							</div>
 							<OlLabelToggle toggled={false} leftLabel={"Live"} rightLabel={"Map"} onClick={() => {}}></OlLabelToggle>
 							<OlStateButton checked={false} icon={faCamera} onClick={() => {}} />