diff --git a/frontend/react/index.html b/frontend/react/index.html
index 7a0cff2c..f9de80fe 100644
--- a/frontend/react/index.html
+++ b/frontend/react/index.html
@@ -1,14 +1,20 @@
 <!doctype html>
 <html lang="en" class="dark">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body>
-    <div id="root" class="h-screen w-screen"></div>
-    <script type="module" src="/src/main.tsx"></script>
 
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React</title>
+</head>
+
+<body>
+  <div id="root" class="h-screen w-screen"></div>
+  <script type="module" src="/src/main.tsx"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/frontend/react/src/index.css b/frontend/react/src/index.css
index 7d267d2e..2903cdc7 100644
--- a/frontend/react/src/index.css
+++ b/frontend/react/src/index.css
@@ -6,6 +6,11 @@
 
 * {
   font-weight: 400;
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-variation-settings:
+    "slnt" 0;
 }
 
 .z-ui-0 {
diff --git a/frontend/react/src/ui/components/olunitsummary.tsx b/frontend/react/src/ui/components/olunitsummary.tsx
index 40f4f471..528df7cf 100644
--- a/frontend/react/src/ui/components/olunitsummary.tsx
+++ b/frontend/react/src/ui/components/olunitsummary.tsx
@@ -6,22 +6,22 @@ export function OlUnitSummary(props: {
     blueprint: UnitBlueprint,
     coalition: Coalition
 }) {
-    return <div data-coalition={props.coalition} className="relative border-l-4 flex flex-col gap-2 p-2 pt-4 items-start shadow-lg bg-white hover:bg-gray-100  dark:bg-[#243141] dark:hover:bg-gray-700 data-[coalition='blue']:border-blue-600 data-[coalition='neutral']:border-gray-400 data-[coalition='red']:border-red-500">
+    return <div data-coalition={props.coalition} className="relative border-l-4 flex flex-col gap-2 p-2 pt-4 pb-4 items-start shadow-lg bg-white dark:bg-olympus-600 data-[coalition='blue']:border-blue-600 data-[coalition='neutral']:border-gray-400 data-[coalition='red']:border-red-500">
             <div className="flex flex-row gap-2 content-center">
-            <img className="object-cover h-8 ml-2 rounded-tl-md rotate-180 invert" src={"images/units/"+props.blueprint.filename} alt="" />  
-            <div className="my-auto w-full font-bold tracking-tight text-gray-900 dark:text-white">{props.blueprint.label}</div>
+            <img className="object-cover h-7 ml-2 rounded-tl-md rotate-180 invert" src={"images/units/"+props.blueprint.filename} alt="" />  
+            <div className="my-auto w-full font-semibold tracking-tight text-gray-900 dark:text-white">{props.blueprint.label}</div>
             </div>
             <div className="flex flex-col justify-between px-2 leading-normal h-fit">
-                <p className="font-normal text-gray-700 dark:text-gray-400">{props.blueprint.description}</p>
+                <p className="text-sm text-gray-700 dark:text-gray-400 mb-1">{props.blueprint.description}</p>
             </div>
-            <div className="flex flex-row gap-2 p-2">
+            <div className="flex flex-row gap-1 px-2">
                 {props.blueprint.abilities?.split(" ").map((tag) => {
-                    return <div key={tag} className="bg-black bg-opacity-20 dark:text-gray-400 rounded-full px-2 py-0.5 text-xs">
+                    return <div key={tag} className="font-bold bg-olympus-800 dark:text-olympus-50 rounded-full px-2 py-0.5 text-xs">
                         {tag}
                     </div>
                 })}
             
-            <div className="bg-black bg-opacity-20 dark:text-gray-400 rounded-full px-2 py-0.5 text-xs">{props.blueprint.era === "WW2" ? "WW2" : props.blueprint.era.split(" ").map((word) => {
+            <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>
             </div>
