diff --git a/liberica/src/assets/themes.json b/liberica/src/assets/themes.json
index 8e6b7cd..2b5bcee 100644
--- a/liberica/src/assets/themes.json
+++ b/liberica/src/assets/themes.json
@@ -1,11 +1,28 @@
 {
+    "Rosé Pine Dawn": {
+        "base":         "#faf4ed",
+        "surface":      "#fffaf3",
+        "muted":        "#9893a5",
+        "primary":      "#d7827e",
+        "secondary":    "#286983",
+
+        "onBase":       "#575279",
+        "onSurface":    "@onBase",
+        "onMuted":      "@onBase",
+        "onPrimary":    "@base",
+        "onSecondary":  "@base"
+    },
     "Rosé Pine": {
-        "base": "#faf4ed",
-        "surface": "#fffaf3",
-        "muted": "#9893a5",
-        "text": "#575279",
-        "primary": "#d7827e",
-        "secondary": "#286983",
-        "accent": "#ea9d34"
+        "base":         "#191724",
+        "surface":      "#1f1d2e",
+        "muted":        "#6e6a86",
+        "primary":      "#ebbcba",
+        "secondary":    "#31748f",
+
+        "onBase":       "#e0def4",
+        "onSurface":    "@onBase",
+        "onMuted":      "@onBase",
+        "onPrimary":    "@base",
+        "onSecondary":  "@base"
     }
 }
diff --git a/liberica/src/components/InputElements.tsx b/liberica/src/components/InputElements.tsx
index 1128c47..04a417e 100644
--- a/liberica/src/components/InputElements.tsx
+++ b/liberica/src/components/InputElements.tsx
@@ -1,3 +1,5 @@
+import { Select } from "./lila/select";
+
 export const TextInput = ({
     className,
     onTextChange,
@@ -28,17 +30,15 @@ export const TextInput = ({
 };
 
 export function DropDown<T extends string>({
-    className,
     items,
     onItemChange,
     ...props
-}: React.SelectHTMLAttributes<HTMLSelectElement> & {
+}: React.ComponentProps<"select"> & {
     items: T[];
     onItemChange?: (item: T) => void;
 }) {
     return (
-        <select
-            className={`border-slate-300 bg-white placeholder-slate-400 focus:border-purple-500 focus:ring-purple-500 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none focus:ring-1 sm:text-sm ${className ?? ""}`}
+        <Select
             onChange={(item) =>
                 onItemChange?.(items[item.currentTarget.selectedIndex])
             }
@@ -47,17 +47,6 @@ export function DropDown<T extends string>({
             {items.map((item) => (
                 <option key={item}>{item}</option>
             ))}
-        </select>
+        </Select>
     );
 }
-
-export const Button = (props: React.ComponentProps<"button">) => {
-    return (
-        <button
-            className="hover: select-none rounded-lg bg-primary px-4 py-2 font-sans font-bold capitalize text-contrast transition-all"
-            {...props}
-        >
-            {props.children}
-        </button>
-    );
-};
diff --git a/liberica/src/components/Navbar.tsx b/liberica/src/components/Navbar.tsx
index 5227761..c3debf8 100644
--- a/liberica/src/components/Navbar.tsx
+++ b/liberica/src/components/Navbar.tsx
@@ -1,19 +1,11 @@
 import { PropsWithChildren } from "react";
-import { Button } from "./InputElements";
 import { FaHome } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
+import { Button } from "components/lila/button";
 
 export function Navbar(props: PropsWithChildren) {
     return (
-        <div
-            className="absolute bottom-0 flex w-max gap-3 bg-surface p-2"
-            style={{
-                position: "fixed",
-                justifyContent: "space-between",
-                alignItems: "center",
-                zIndex: 1000,
-            }}
-        >
+        <div className="fixed bottom-0 z-auto flex w-dvw items-center justify-between gap-3 bg-base p-2">
             {props.children}
         </div>
     );
@@ -23,7 +15,7 @@ export function HomeButton() {
     const navigate = useNavigate();
 
     return (
-        <Button onClick={() => navigate("/")}>
+        <Button onClick={() => navigate("/")} variant="primary" size="lg">
             <FaHome />
         </Button>
     );
diff --git a/liberica/src/components/TeamCard.tsx b/liberica/src/components/TeamCard.tsx
index 347a18b..d8b7ff6 100644
--- a/liberica/src/components/TeamCard.tsx
+++ b/liberica/src/components/TeamCard.tsx
@@ -8,19 +8,18 @@ export function TeamCard(props: {
     const team = props.team;
 
     const states = {
-        selected: "outline outline-solid outline-2 outline-slate-300",
-        default: "",
+        selected:
+            "flex w-full items-center rounded-xl cursor-pointer bg-muted/20",
+        default:
+            "flex w-full items-center rounded-xl cursor-pointer hover:bg-muted/10",
     };
 
     const state = props.selected ? "selected" : "default";
 
     return (
-        <div
-            className={`hover:bg-slate-100 my-1 flex w-full items-center rounded-md transition-all ${states[state]}`}
-            onClick={props.onClick}
-        >
+        <div className={states[state]} onClick={props.onClick}>
             <div
-                className="m-2 h-10 w-10 rounded"
+                className="m-2 h-10 w-10 rounded-xl"
                 style={{ backgroundColor: team.color }}
             />
             <div className="flex flex-col justify-center">
diff --git a/liberica/src/components/lila/button.tsx b/liberica/src/components/lila/button.tsx
index 4943abf..f25b06e 100644
--- a/liberica/src/components/lila/button.tsx
+++ b/liberica/src/components/lila/button.tsx
@@ -1,19 +1,22 @@
+import { classes } from "components/lila";
+
 const BASE =
-    "select-none transition-all font-sans disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ";
+    "select-none transition-all font-sans disabled:pointer-events-none active:opacity-[0.85] disabled:opacity-50 disabled:shadow-none ";
 
 export const BUTTON_VARIANTS = {
-    filled: BASE + "bg-secondary text-contrast rounded-xl font-bold",
-    tonal:
-        BASE +
-        "bg-muted/10 text-contrast rounded-xl font-bold hover:bg-muted/20 animate-entry text-text",
-    text: BASE + " py-0 px-0 font-bold uppercase text-primary",
+    primary:
+        "bg-primary text-on-primary rounded-xl font-bold hover:bg-primary/90 animate-entry",
+    secondary:
+        "bg-secondary text-on-secondary rounded-xl font-bold hover:bg-secondary/90 animate-entry",
+    muted: "bg-muted/10 text-on-muted rounded-xl font-bold hover:bg-muted/20 animate-entry",
 };
 
 export const BUTTON_SIZES = {
     sm: "py-1 px-4 text-xs",
     md: "py-2 px-5 text-xs",
     lg: "py-2.5 px-7 text-sm",
-    "sm-wide": "w-full py-1 text-xs",
+    "sm-wide": "w-full py-1 text-sm",
+    "md-wide": "w-full py-2 text-md",
 };
 
 export type ButtonVariant = keyof typeof BUTTON_VARIANTS;
@@ -27,14 +30,14 @@ export interface ButtonPropsExt {
 export type ButtonProps = Omit<React.ComponentProps<"button">, "className"> &
     ButtonPropsExt;
 
-export function BaseButton(props: ButtonProps) {
+export function Button(props: ButtonProps) {
     return (
         <button
-            className={
-                BUTTON_VARIANTS[props.variant] +
-                " " +
-                BUTTON_SIZES[props.size ?? "sm"]
-            }
+            className={classes(
+                BASE,
+                BUTTON_VARIANTS[props.variant],
+                BUTTON_SIZES[props.size ?? "sm"],
+            )}
             {...props}
         >
             {props.children}
diff --git a/liberica/src/components/lila/index.tsx b/liberica/src/components/lila/index.tsx
new file mode 100644
index 0000000..d6cbf76
--- /dev/null
+++ b/liberica/src/components/lila/index.tsx
@@ -0,0 +1,8 @@
+import { Button } from "./button";
+import { TextInput } from "./input.tsx";
+
+export function classes(...inputs: string[]): string {
+    return inputs.join(" ");
+}
+
+export { Button, TextInput };
diff --git a/liberica/src/components/lila/input.tsx b/liberica/src/components/lila/input.tsx
new file mode 100644
index 0000000..ce48676
--- /dev/null
+++ b/liberica/src/components/lila/input.tsx
@@ -0,0 +1,16 @@
+export type TextInputProps = Omit<
+    React.ComponentProps<"input">,
+    "className" | "type"
+>;
+
+export function TextInput(props: TextInputProps) {
+    return (
+        <input
+            {...props}
+            type="text"
+            className="text-text rounded-xl bg-muted/20 px-6 py-3 outline-none ring-muted focus:ring-2"
+        >
+            {props.children}
+        </input>
+    );
+}
diff --git a/liberica/src/components/lila/select.tsx b/liberica/src/components/lila/select.tsx
new file mode 100644
index 0000000..0a7c01a
--- /dev/null
+++ b/liberica/src/components/lila/select.tsx
@@ -0,0 +1,9 @@
+export type SelectProps = Omit<React.ComponentProps<"select">, "className">;
+
+export function Select(props: SelectProps) {
+    return (
+        <select className="text-text rounded-xl bg-muted/20 px-6 py-3">
+            {props.children}
+        </select>
+    );
+}
diff --git a/liberica/src/components/map/Map.tsx b/liberica/src/components/map/Map.tsx
index a5f8c2e..74074a8 100644
--- a/liberica/src/components/map/Map.tsx
+++ b/liberica/src/components/map/Map.tsx
@@ -12,7 +12,7 @@ import {
 import { createContext, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { MrXIcon, TrainIcon, DetectiveIcon } from "components/MapIcons";
-import { Button } from "components/InputElements";
+import { Button } from "components/lila";
 import { Marker } from "./Marker";
 import { GameState, Stop, TeamState, Train } from "lib/bindings";
 import { getStops } from "lib/api";
@@ -39,7 +39,11 @@ function ResetMapViewButton() {
     return (
         <div className="leaflet-top leaflet-center">
             <div className="leaflet-control leaflet-bar">
-                <Button onClick={() => map.setView(CENTER, DEFAULT_ZOOM)}>
+                <Button
+                    onClick={() => map.setView(CENTER, DEFAULT_ZOOM)}
+                    variant={"primary"}
+                    size="lg"
+                >
                     {t("ResetMapView")}
                 </Button>
             </div>
@@ -119,7 +123,7 @@ export function Map(
         <MapContainer
             center={CENTER}
             zoom={DEFAULT_ZOOM}
-            className="h-max w-max"
+            className="z-0 h-dvh w-dvw"
             {...props.containerProps}
         >
             <TileLayer
diff --git a/liberica/src/i18n/de.json b/liberica/src/i18n/de.json
index ef3a7d2..3f5e6ba 100644
--- a/liberica/src/i18n/de.json
+++ b/liberica/src/i18n/de.json
@@ -1,5 +1,5 @@
 {
-    "SelectTeam": "Team auswählen",
+    "SelectTeam": "Wähle dein Team",
     "ResetMapView": "Kartenansicht zurücksetzen",
     "CreateTeam": "Team erstellen",
     "InvalidName": "ungültiger Name",
@@ -17,5 +17,6 @@
     "time": "{{time, datetime(dateStyle: medium; timeStyle: long)}}",
     "FailedParseReplay": "Replay-Datei konnte nicht geparst werden",
     "ReplayTooBig": "Replay-Datei ist zu groß",
-    "Speed": "Geschwindigkeit"
+    "Speed": "Geschwindigkeit",
+    "Cancel": "Abbrechen"
 }
diff --git a/liberica/src/i18n/en.json b/liberica/src/i18n/en.json
index 0a155aa..d6b004e 100644
--- a/liberica/src/i18n/en.json
+++ b/liberica/src/i18n/en.json
@@ -1,7 +1,7 @@
 {
-    "SelectTeam": "Select team",
+    "SelectTeam": "Select your team",
     "ResetMapView": "Reset Map View",
-    "CreateTeam": "Create",
+    "CreateTeam": "Create team",
     "InvalidName": "invalid name",
     "NameAlreadyExists": "name already exists",
     "Detective": "Detective",
@@ -17,5 +17,6 @@
     "time": "{{time, datetime(dateStyle: medium; timeStyle: long)}}",
     "FailedParseReplay": "failed to parse replay file",
     "ReplayTooBig": "replay file is too big",
-    "Speed": "Speed"
+    "Speed": "Speed",
+    "Cancel": "Cancel"
 }
diff --git a/liberica/src/lib/colors.ts b/liberica/src/lib/colors.ts
index 110d120..e1be43f 100644
--- a/liberica/src/lib/colors.ts
+++ b/liberica/src/lib/colors.ts
@@ -14,7 +14,7 @@ export function HexToRGB(hex: string): RGB {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
 
     if (!result) {
-        throw new Error("Could not parse Hex Color");
+        throw new Error("Could not parse Hex Color " + hex);
     }
 
     const rHex = parseInt(result[1], 16);
diff --git a/liberica/src/lib/theme.ts b/liberica/src/lib/theme.ts
index 763c6a1..062b681 100644
--- a/liberica/src/lib/theme.ts
+++ b/liberica/src/lib/theme.ts
@@ -1,24 +1,42 @@
 import THEMES_JSON from "assets/themes.json";
 import { HexToHSL } from "lib/colors";
+import { fromCamelToKebabCase } from "lib/util";
 
 export const THEMES: Record<string, Theme> = THEMES_JSON;
 
 export interface Theme {
     base: string;
     surface: string;
-    text: string;
+    muted: string;
     primary: string;
     secondary: string;
-    accent: string;
+
+    onBase: string;
+    onSurface: string;
+    onPrimary: string;
+    onSecondary: string;
+    onMuted: string;
 }
 
 export function applyTheme(theme: Theme) {
     const style = document.documentElement.style;
-    for (const [name, color] of Object.entries(theme)) {
-        const { h, s, l } = HexToHSL(color as string);
-        style.setProperty(
-            `--color-${name}`,
-            `${h.toString()} ${s.toString()}% ${l.toString()}%`,
-        );
+
+    for (const [name, val] of Object.entries(theme) as [
+        keyof Theme,
+        string,
+    ][]) {
+        let color = val;
+
+        if (val.startsWith("@")) {
+            const link = val.substring(1) as keyof Theme;
+            color = theme[link];
+            console.log(name, "links to " + link + " --> " + color);
+        }
+
+        const { h, s, l } = HexToHSL(color);
+        const hsl = `${h.toString()} ${s.toString()}% ${l.toString()}%`;
+
+        console.log(name, fromCamelToKebabCase(name));
+        style.setProperty("--color-" + fromCamelToKebabCase(name), hsl);
     }
 }
diff --git a/liberica/src/lib/util.ts b/liberica/src/lib/util.ts
index 029da71..c23eb51 100644
--- a/liberica/src/lib/util.ts
+++ b/liberica/src/lib/util.ts
@@ -21,3 +21,6 @@ export const getContrastingTextColor = (bg: string) => {
 export const clamp = (x: number, min: number, max: number) => {
     return Math.min(Math.max(x, min), max);
 };
+
+export const fromCamelToKebabCase = (input: string) =>
+    input.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
diff --git a/liberica/src/page/CreateTeam.tsx b/liberica/src/page/CreateTeam.tsx
index 4bc4e41..2e9163f 100644
--- a/liberica/src/page/CreateTeam.tsx
+++ b/liberica/src/page/CreateTeam.tsx
@@ -1,4 +1,6 @@
-import { Button, DropDown, TextInput } from "components/InputElements";
+import { DropDown } from "components/InputElements";
+import { Button } from "components/lila/button";
+import { TextInput } from "components/lila/input";
 import { defaultErrorHandler, postCreateTeam } from "lib/api";
 import { TeamKind } from "lib/bindings";
 import { FormEvent, useState } from "react";
@@ -39,12 +41,15 @@ export function CreateTeam() {
             style={{ backgroundColor: color }}
         >
             <form
-                className="container flex w-80 flex-col gap-3 rounded-xl bg-surface p-8 shadow-md"
+                className="container flex w-80 flex-col gap-3 rounded-xl bg-base p-8 shadow-md"
                 onSubmit={onSubmit}
             >
                 <h2 className="text-xl font-bold">{t("CreateTeam")}</h2>
 
-                <TextInput onTextChange={setName} trim="all" />
+                <TextInput
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Lila pause"
+                />
 
                 <DropDown<TeamKind>
                     onItemChange={setKind}
@@ -62,13 +67,24 @@ export function CreateTeam() {
                     ))}
                 </div>
 
-                <Button disabled={loading}>
+                <Button variant="primary" size="md-wide" disabled={loading}>
                     {loading ? (
                         <div className="h-4 w-4 animate-spin rounded-full border-4 border-dashed"></div>
                     ) : (
                         <>{t("CreateTeam")}</>
                     )}
                 </Button>
+                <Button
+                    variant="muted"
+                    size="md-wide"
+                    disabled={loading}
+                    onClick={(e) => {
+                        e.preventDefault();
+                        navigate("/");
+                    }}
+                >
+                    {t("Cancel")}
+                </Button>
             </form>
         </div>
     );
diff --git a/liberica/src/page/Debug.tsx b/liberica/src/page/Debug.tsx
index 712551b..f7a4fb0 100644
--- a/liberica/src/page/Debug.tsx
+++ b/liberica/src/page/Debug.tsx
@@ -1,10 +1,12 @@
 import {
     BUTTON_SIZES,
     BUTTON_VARIANTS,
-    BaseButton,
+    Button,
     ButtonSize,
     ButtonVariant,
 } from "components/lila/button";
+import { TextInput } from "components/lila/input";
+import { THEMES, applyTheme } from "lib/theme";
 import { useState } from "react";
 
 export function Debug() {
@@ -14,13 +16,17 @@ export function Debug() {
     const [text, setText] = useState("Test");
 
     return (
-        <div className="bg-base flex h-screen w-dvw flex-col items-center justify-center gap-10">
-            <input
-                className="border-b-2 outline-none"
-                type="text"
+        <div className="flex h-screen w-dvw flex-col items-center justify-center gap-10 bg-base">
+            <TextInput
                 placeholder="Enter example text"
                 onChange={(e) => setText(e.target.value || "Test")}
-            ></input>
+            ></TextInput>
+
+            <select onChange={(e) => applyTheme(THEMES[e.target.value])}>
+                {Object.keys(THEMES).map((theme) => (
+                    <option key={theme}>{theme}</option>
+                ))}
+            </select>
 
             <table className="table-auto border-spacing-2">
                 <thead>
@@ -41,12 +47,12 @@ export function Debug() {
                                 <td className="py-2 pr-4">{variant}</td>
                                 <td className="py-2 pr-8">{size}</td>
                                 <td className="py-2">
-                                    <BaseButton
+                                    <Button
                                         variant={variant as ButtonVariant}
                                         size={size as ButtonSize}
                                     >
                                         {text}
-                                    </BaseButton>
+                                    </Button>
                                 </td>
                             </tr>
                         ))}
diff --git a/liberica/src/page/Game.tsx b/liberica/src/page/Game.tsx
index ca1a4c2..70e6546 100644
--- a/liberica/src/page/Game.tsx
+++ b/liberica/src/page/Game.tsx
@@ -5,7 +5,7 @@ import { WebSocketApi } from "lib/websockets";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { HomeButton, Navbar } from "components/Navbar";
-import { Button } from "components/InputElements";
+import { Button } from "components/lila/button";
 import { useTranslation } from "react-i18next";
 
 export function Game() {
@@ -67,7 +67,7 @@ export function Game() {
     }, [ws]);
 
     const Game = (
-        <div className="flex h-max w-max flex-col">
+        <div className="flex h-dvh w-dvw flex-col">
             <GameStateContext.Provider value={gs}>
                 <Map
                     tileProps={{ updateInterval: 500 }}
@@ -96,7 +96,12 @@ export function Game() {
                     </span>
                 )}
 
-                <Button disabled={!embarkedTrain} onClick={disembark}>
+                <Button
+                    disabled={!embarkedTrain}
+                    onClick={disembark}
+                    variant={"primary"}
+                    size="lg"
+                >
                     {t("Disembark")}
                 </Button>
             </Navbar>
@@ -104,12 +109,12 @@ export function Game() {
     );
 
     const LandingPage = (
-        <div className="flex h-max w-max flex-col items-center justify-center gap-5">
+        <div className="flex h-dvh w-dvw flex-col items-center justify-center gap-5">
             <div className="flex flex-col items-center">
-                <span className="text-slate-400 italic">
+                <span className="italic text-on-base">
                     {t("ConnectionLost")}
                 </span>
-                <span className="text-slate-400 italic">{t("Reconnect")}</span>
+                <span className="italic text-on-base">{t("Reconnect")}</span>
             </div>
         </div>
     );
diff --git a/liberica/src/page/Replay.tsx b/liberica/src/page/Replay.tsx
index d00255c..3ab8358 100644
--- a/liberica/src/page/Replay.tsx
+++ b/liberica/src/page/Replay.tsx
@@ -1,7 +1,7 @@
 import { useRef, useState } from "react";
 import { useInterval } from "use-interval";
 import { GameStateContext, Map } from "components/map/Map";
-import { Button } from "components/InputElements";
+import { Button } from "components/lila";
 import { HomeButton, Navbar } from "components/Navbar";
 import { GameState } from "lib/bindings";
 import { clamp } from "lib/util";
@@ -203,6 +203,7 @@ export function Replay() {
 
                 <div className="flex-center flex">
                     <Button
+                        variant="primary"
                         onClick={() => setPaused((p) => !p)}
                         disabled={!running}
                     >
diff --git a/liberica/src/page/SelectTeam.tsx b/liberica/src/page/SelectTeam.tsx
index 7619581..ad5f97c 100644
--- a/liberica/src/page/SelectTeam.tsx
+++ b/liberica/src/page/SelectTeam.tsx
@@ -1,4 +1,4 @@
-import { BaseButton } from "components/lila/button";
+import { Button } from "components/lila/button";
 import { TeamCard } from "components/TeamCard";
 import { getTeams } from "lib/api";
 import { Team } from "lib/bindings";
@@ -28,8 +28,8 @@ export function SelectTeam() {
 
     return (
         <form className="flex h-screen items-center justify-center bg-base">
-            <div className="bg-white container flex w-80 flex-col gap-4 p-8">
-                <h2 className="text-lg font-semibold">{t("SelectTeam")}</h2>
+            <div className="bg-white container flex w-80 flex-col gap-4">
+                <span className="text-xl font-semibold">{t("SelectTeam")}</span>
                 <div className="flex flex-col gap-2">
                     {teams.map((team, index) => (
                         <TeamCard
@@ -40,20 +40,23 @@ export function SelectTeam() {
                         />
                     ))}
                 </div>
-                <BaseButton
-                    variant="primary"
-                    size="md-wide"
-                    disabled={selected === undefined}
-                    onClick={process}
-                >
-                    {t("JoinTeam")}
-                </BaseButton>
-                <Link
-                    className="text-muted text-center underline"
-                    to="/create"
-                >
-                    {t("CreateTeam")}
-                </Link>
+
+                <div className="flex flex-col gap-4 text-center">
+                    <Button
+                        variant="primary"
+                        size="md-wide"
+                        disabled={selected === undefined}
+                        onClick={process}
+                    >
+                        {t("JoinTeam")}
+                    </Button>
+                    <Link
+                        className="text-center text-muted underline"
+                        to="/create"
+                    >
+                        {t("CreateTeam")}
+                    </Link>
+                </div>
             </div>
         </form>
     );
diff --git a/liberica/src/style/main.css b/liberica/src/style/main.css
index a090dbb..0f6bcbe 100644
--- a/liberica/src/style/main.css
+++ b/liberica/src/style/main.css
@@ -1,25 +1,12 @@
 @tailwind base;
+@layer base { 
+      html { 
+        @apply text-on-base; 
+      } 
+}
 @tailwind components;
 @tailwind utilities;
 
-body,html {
-    margin: 0;
-    padding: 0
-}
-
-.h-max {
-    height: 100vh;
-}
-
-.w-max {
-    width: 100vw;
-}
-
-.flex-center {
-    justify-content: center;
-    align-items: center;
-}
-
 .leaflet-center {
   position: absolute;
   left: 50%;
diff --git a/liberica/tailwind.config.js b/liberica/tailwind.config.js
index 1e6f551..8bf6e6b 100644
--- a/liberica/tailwind.config.js
+++ b/liberica/tailwind.config.js
@@ -3,14 +3,18 @@ export default {
     content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
     theme: {
         colors: {
-            "surface": "hsl(var(--color-surface) / <alpha-value>)",
-            "overlay": "hsl(var(--color-overlay) / <alpha-value>)",
-            "muted": "hsl(var(--color-muted) / <alpha-value>)",
-            "text": "hsl(var(--color-text) / <alpha-value>)",
-            "contrast": "hsl(var(--color-surface) / <alpha-value>)",
-            "primary": "hsl(var(--color-primary) / <alpha-value>)",
-            "secondary": "hsl(var(--color-secondary) / <alpha-value>)",
-            "accent": "hsl(var(--color-accent) / <alpha-value>)"
+            base: "hsl(var(--color-base) / <alpha-value>)",
+            surface: "hsl(var(--color-surface) / <alpha-value>)",
+            muted: "hsl(var(--color-muted) / <alpha-value>)",
+            primary: "hsl(var(--color-primary) / <alpha-value>)",
+            secondary: "hsl(var(--color-secondary) / <alpha-value>)",
+            on: {
+                base: "hsl(var(--color-on-base) / <alpha-value>)",
+                surface: "hsl(var(--color-on-surface) / <alpha-value>)",
+                muted: "hsl(var(--color-on-muted) / <alpha-value>)",
+                primary: "hsl(var(--color-on-primary) / <alpha-value>)",
+                secondary: "hsl(var(--color-on-secondary) / <alpha-value>)",
+            }
         },
     },
     plugins: [],