diff --git a/frontend/react/src/ui/components/olunitlistentry.tsx b/frontend/react/src/ui/components/olunitlistentry.tsx
index b4b3f209..c84aeb04 100644
--- a/frontend/react/src/ui/components/olunitlistentry.tsx
+++ b/frontend/react/src/ui/components/olunitlistentry.tsx
@@ -2,17 +2,20 @@ import React  from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { UnitBlueprint } from "../../interfaces";
+import { faArrowRightLong, faCaretRight, faCircleArrowRight, faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
 
 export function OlUnitEntryList(props: {
     icon: IconProp,
     blueprint: UnitBlueprint,
     onClick: () => void
 }) {
-    return <div onClick={props.onClick} className="relative text-sm cursor-pointer select-none flex justify-between items-center dark:text-gray-300 dark:hover:bg-white dark:hover:bg-opacity-10 px-2 py-1 rounded-md mr-2">
+    return <div onClick={props.onClick} className="group relative text-sm cursor-pointer select-none flex justify-between items-center dark:text-gray-300 dark:hover:bg-white dark:hover:bg-olympus-500 px-2 py-2 rounded-sm mr-2">
         <FontAwesomeIcon icon={props.icon} className="text-sm"></FontAwesomeIcon>
         <div className="font-normal text-left flex-1 px-2">{props.blueprint.label}</div>
         <div className="font-bold bg-olympus-800 dark:text-olympus-50 rounded-full px-2 py-0.5 text-xs">{props.blueprint.era === "WW2" ? "WW2" : props.blueprint.era.split(" ").map((word) => {
             return word.charAt(0).toLocaleUpperCase();
         })}</div>
+        <FontAwesomeIcon icon={faArrowRight} className="px-1 dark:text-olympus-50 group-hover:translate-x-1 transition-transform"></FontAwesomeIcon>
     </div>
 }
diff --git a/frontend/react/src/ui/panels/components/menu.tsx b/frontend/react/src/ui/panels/components/menu.tsx
index 6d64c7b9..8eb21ae2 100644
--- a/frontend/react/src/ui/panels/components/menu.tsx
+++ b/frontend/react/src/ui/panels/components/menu.tsx
@@ -10,7 +10,7 @@ export function Menu(props: {
 	showBackButton?: boolean,
 	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/95 backdrop-blur-lg" tabIndex={-1}>
+	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-800/90 backdrop-blur-lg backdrop-grayscale" tabIndex={-1}>
 		<h5 className="w-full inline-flex items-center py-3 pb-2 px-5 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 "/>
diff --git a/frontend/react/src/ui/panels/header.tsx b/frontend/react/src/ui/panels/header.tsx
index ed3c3c15..066fe8a0 100644
--- a/frontend/react/src/ui/panels/header.tsx
+++ b/frontend/react/src/ui/panels/header.tsx
@@ -14,7 +14,7 @@ export function Header() {
 		{(appState) =>
 			<EventsConsumer>
 				{(events) =>
-					<nav className="flex w-screen h-[66px] bg-gray-300 border-gray-200 dark:bg-olympus-900 dark:border-gray-700 px-3 z-ui-1">
+					<nav className="flex w-screen h-[66px] bg-gray-300 border-gray-200 dark:bg-olympus-900 dark:border-gray-800 px-3 z-ui-2 drop-shadow-md">
 						<div className="w-full max-w-full flex flex-nowrap items-center justify-between gap-3 my-auto">
 							<div className="flex flex-row items-center justify-center gap-6 flex-none">
 								<img src="images/icon.png" className='h-10 w-10 p-0 rounded-md'></img>
diff --git a/frontend/react/src/ui/panels/sidebar.tsx b/frontend/react/src/ui/panels/sidebar.tsx
index 2639c2c0..3db3b972 100644
--- a/frontend/react/src/ui/panels/sidebar.tsx
+++ b/frontend/react/src/ui/panels/sidebar.tsx
@@ -9,7 +9,7 @@ export function SideBar() {
 		{(appState) =>
 			<EventsConsumer>
 				{(events) =>
-					<nav className="z-ui-1 h-full bg-gray-300 dark:bg-olympus-800">
+					<nav className="z-ui-1 h-full bg-gray-300 dark:bg-olympus-900">
 						<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={faEllipsisV}></OlStateButton>