diff --git a/assets/scripts/navigation.lua b/assets/scripts/navigation.lua
index ade3c60..c330e1d 100644
--- a/assets/scripts/navigation.lua
+++ b/assets/scripts/navigation.lua
@@ -17,7 +17,8 @@ local screens = {
 if not _G.nav_state then
     _G.nav_state = {
         history = {},
-        current_screen = "home"
+        current_screen = "home",
+        nav_direction = "none"  -- "forward", "back", "home", "none"
     }
 end
 
@@ -25,6 +26,33 @@ end
 local history = _G.nav_state.history
 local function get_current() return _G.nav_state.current_screen end
 local function set_current(s) _G.nav_state.current_screen = s end
+local function get_direction() return _G.nav_state.nav_direction end
+local function set_direction(d) _G.nav_state.nav_direction = d end
+
+-- Apply animation class based on navigation direction
+local function applyNavAnimation()
+    local dir = get_direction()
+    print("Applying animation, direction: " .. dir)
+    if dir ~= "none" and document then
+        -- In RmlUi Lua, get body element
+        local body = document.body
+        if body then
+            print("Found body element, setting class nav-" .. dir)
+            -- Set the appropriate animation class
+            if dir == "forward" then
+                body:SetClass("nav-forward", true)
+            elseif dir == "back" then
+                body:SetClass("nav-back", true)
+            elseif dir == "home" then
+                body:SetClass("nav-home", true)
+            else
+                body:SetClass("nav-default", true)
+            end
+        else
+            print("Body element not found!")
+        end
+    end
+end
 
 -- Navigate to a screen by name
 function navigateTo(screen_name)
@@ -34,10 +62,12 @@ function navigateTo(screen_name)
         -- Push current screen to history before navigating
         table.insert(history, get_current())
         set_current(screen_name)
+        set_direction("forward")
 
         -- Load the new screen using C++ function
         local success = loadScreen(path)
         if success then
+            applyNavAnimation()
             print("Navigated to: " .. screen_name .. " (history depth: " .. #history .. ")")
         else
             -- Restore previous state on failure
@@ -59,7 +89,9 @@ function goBack()
         local path = screens[previous]
         if path then
             set_current(previous)
+            set_direction("back")
             loadScreen(path)
+            applyNavAnimation()
             print("Back to: " .. previous)
             return true
         end
@@ -76,7 +108,9 @@ function goHome()
         history[i] = nil
     end
     set_current("home")
+    set_direction("home")
     loadScreen(screens.home)
+    applyNavAnimation()
     print("Navigated to home")
 end
 
diff --git a/assets/ui/theme.rcss b/assets/ui/theme.rcss
index e8515c9..6df89ac 100644
--- a/assets/ui/theme.rcss
+++ b/assets/ui/theme.rcss
@@ -11,6 +11,7 @@ body {
     height: 100%;
     margin: 0;
     padding: 0;
+    animation: 0.2s cubic-out fade-in;
 }
 
 /* ============== Typography ============== */
@@ -245,3 +246,74 @@ body {
     flex: 1;
     overflow: auto;
 }
+
+/* ============== Animations ============== */
+/* RmlUi syntax: animation: <duration> <delay>? <tweening-function>? <iterations>? alternate? paused? <keyframes-name> */
+
+/* Fade in animation */
+@keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+/* Slide in from right */
+@keyframes slide-in-right {
+    0% { transform: translateX(100px); opacity: 0; }
+    100% { transform: translateX(0px); opacity: 1; }
+}
+
+/* Slide in from left */
+@keyframes slide-in-left {
+    0% { transform: translateX(-100px); opacity: 0; }
+    100% { transform: translateX(0px); opacity: 1; }
+}
+
+/* Slide up animation */
+@keyframes slide-up {
+    0% { transform: translateY(50px); opacity: 0; }
+    100% { transform: translateY(0px); opacity: 1; }
+}
+
+/* Scale in animation */
+@keyframes scale-in {
+    0% { transform: scale(0.9); opacity: 0; }
+    100% { transform: scale(1.0); opacity: 1; }
+}
+
+/* Screen transition classes */
+.nav-forward {
+    animation: 0.2s cubic-out slide-in-right;
+}
+
+.nav-back {
+    animation: 0.2s cubic-out slide-in-left;
+}
+
+.nav-home {
+    animation: 0.2s back-out scale-in;
+}
+
+.nav-default {
+    animation: 0.15s cubic-out fade-in;
+}
+
+/* Animation utility classes */
+.animate-fade-in {
+    animation: 0.2s cubic-out fade-in;
+}
+
+.animate-slide-right {
+    animation: 0.25s cubic-out slide-in-right;
+}
+
+.animate-slide-left {
+    animation: 0.25s cubic-out slide-in-left;
+}
+
+.animate-slide-up {
+    animation: 0.2s cubic-out slide-up;
+}
+
+.animate-scale-in {
+    animation: 0.2s back-out scale-in;
+}