diff --git a/.gitignore b/.gitignore
index 9568818..5675e48 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@
 /cmake-build*
 /out
 /dump
+/material-design-icons
\ No newline at end of file
diff --git a/assets/demo.rml b/assets/demo.rml
index f4d8c90..07c4c0e 100644
--- a/assets/demo.rml
+++ b/assets/demo.rml
@@ -35,19 +35,19 @@
     <div class="home-content">
         <div class="app-grid">
             <!-- Row 1 -->
-            <div class="app-icon">
+            <div class="app-icon" onclick="navigateTo('dialer')">
                 <div class="app-icon-image" style="background-color: #4CAF50;">P</div>
                 <span class="app-icon-label">Phone</span>
             </div>
-            <div class="app-icon">
+            <div class="app-icon" onclick="navigateTo('messages')">
                 <div class="app-icon-image" style="background-color: #2196F3;">M</div>
                 <span class="app-icon-label">Messages</span>
             </div>
-            <div class="app-icon">
+            <div class="app-icon" onclick="navigateTo('contacts')">
                 <div class="app-icon-image" style="background-color: #FF9800;">C</div>
                 <span class="app-icon-label">Contacts</span>
             </div>
-            <div class="app-icon">
+            <div class="app-icon" onclick="navigateTo('browser')">
                 <div class="app-icon-image" style="background-color: #F44336;">B</div>
                 <span class="app-icon-label">Browser</span>
             </div>
@@ -61,7 +61,7 @@
                 <div class="app-icon-image" style="background-color: #00BCD4;">C</div>
                 <span class="app-icon-label">Camera</span>
             </div>
-            <div class="app-icon">
+            <div class="app-icon" onclick="navigateTo('settings')">
                 <div class="app-icon-image" style="background-color: #607D8B;">S</div>
                 <span class="app-icon-label">Settings</span>
             </div>
@@ -110,10 +110,10 @@
 
     <!-- Dock -->
     <div class="dock">
-        <div class="dock-item" style="background-color: #4CAF50;">P</div>
-        <div class="dock-item" style="background-color: #2196F3;">M</div>
-        <div class="dock-item" style="background-color: #FF9800;">C</div>
-        <div class="dock-item" style="background-color: #F44336;">B</div>
+        <div class="dock-item" style="background-color: #4CAF50;" onclick="navigateTo('dialer')">P</div>
+        <div class="dock-item" style="background-color: #2196F3;" onclick="navigateTo('messages')">M</div>
+        <div class="dock-item" style="background-color: #FF9800;" onclick="navigateTo('contacts')">C</div>
+        <div class="dock-item" style="background-color: #F44336;" onclick="navigateTo('browser')">B</div>
     </div>
 </body>
 </rml>
diff --git a/assets/screens/browser.rml b/assets/screens/browser.rml
index de34ae3..eaac1c6 100644
--- a/assets/screens/browser.rml
+++ b/assets/screens/browser.rml
@@ -2,6 +2,7 @@
 <head>
     <link type="text/rcss" href="../ui/theme.rcss"/>
     <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/navigation.lua"></script>
     <title>Browser</title>
     <style>
         .browser-screen {
@@ -172,7 +173,7 @@
 
     <!-- Browser Toolbar -->
     <div class="browser-toolbar">
-        <div class="browser-nav-btn" onclick="navigateTo('home')">←</div>
+        <div class="browser-nav-btn" onclick="goBack()">←</div>
         <div class="browser-nav-btn disabled">→</div>
         <div class="browser-url-bar">
             <span class="browser-secure-icon">L</span>
@@ -211,7 +212,7 @@
 
     <!-- Bottom Bar -->
     <div class="browser-bottom-bar">
-        <div class="browser-tab-btn" onclick="navigateTo('home')">
+        <div class="browser-tab-btn" onclick="goHome()">
             <span class="browser-tab-icon">H</span>
             <span class="browser-tab-label">Home</span>
         </div>
diff --git a/assets/screens/contacts.rml b/assets/screens/contacts.rml
index a62ac82..27b5a80 100644
--- a/assets/screens/contacts.rml
+++ b/assets/screens/contacts.rml
@@ -2,6 +2,7 @@
 <head>
     <link type="text/rcss" href="../ui/theme.rcss"/>
     <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/navigation.lua"></script>
     <title>Contacts</title>
     <style>
         .contacts-screen {
@@ -70,7 +71,7 @@
 <body class="contacts-screen">
     <!-- App Bar -->
     <div class="app-bar">
-        <div class="btn-icon" onclick="navigateTo('home')">←</div>
+        <div class="btn-icon" onclick="goBack()">←</div>
         <span class="app-bar-title">Contacts</span>
         <div class="btn-icon">+</div>
     </div>
diff --git a/assets/screens/dialer.rml b/assets/screens/dialer.rml
index 4d60db0..7eaee37 100644
--- a/assets/screens/dialer.rml
+++ b/assets/screens/dialer.rml
@@ -2,6 +2,7 @@
 <head>
     <link type="text/rcss" href="../ui/theme.rcss"/>
     <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/navigation.lua"></script>
     <script src="../scripts/phone.lua"></script>
     <title>Phone</title>
     <style>
@@ -106,7 +107,7 @@
 <body class="dialer-screen">
     <!-- App Bar -->
     <div class="app-bar">
-        <div class="btn-icon" onclick="navigateTo('home')">←</div>
+        <div class="btn-icon" onclick="goBack()">←</div>
         <span class="app-bar-title">Phone</span>
     </div>
 
diff --git a/assets/screens/lock.rml b/assets/screens/lock.rml
index 14adac4..91a5f9e 100644
--- a/assets/screens/lock.rml
+++ b/assets/screens/lock.rml
@@ -2,6 +2,7 @@
 <head>
     <link type="text/rcss" href="../ui/theme.rcss"/>
     <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/navigation.lua"></script>
     <title>Lock Screen</title>
     <style>
         .lock-screen {
@@ -124,7 +125,7 @@
         }
     </style>
 </head>
-<body class="lock-screen" onclick="navigateTo('home')">
+<body class="lock-screen" onclick="goHome()">
     <!-- Status Bar -->
     <div class="status-bar">
         <span class="status-bar-time">12:30</span>
diff --git a/assets/screens/messages.rml b/assets/screens/messages.rml
index 80a8fbe..c900e1c 100644
--- a/assets/screens/messages.rml
+++ b/assets/screens/messages.rml
@@ -2,6 +2,7 @@
 <head>
     <link type="text/rcss" href="../ui/theme.rcss"/>
     <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/navigation.lua"></script>
     <title>Messages</title>
     <style>
         .messages-screen {
@@ -130,7 +131,7 @@
 <body class="messages-screen">
     <!-- App Bar -->
     <div class="app-bar">
-        <div class="btn-icon" onclick="navigateTo('home')">←</div>
+        <div class="btn-icon" onclick="goBack()">←</div>
         <span class="app-bar-title">Messages</span>
         <div class="btn-icon">Q</div>
     </div>
diff --git a/assets/screens/settings.rml b/assets/screens/settings.rml
index 3d0c46f..3eb0551 100644
--- a/assets/screens/settings.rml
+++ b/assets/screens/settings.rml
@@ -2,6 +2,7 @@
 <head>
     <link type="text/rcss" href="../ui/theme.rcss"/>
     <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/navigation.lua"></script>
     <title>Settings</title>
     <style>
         .settings-screen {
@@ -148,7 +149,7 @@
 <body class="settings-screen">
     <!-- App Bar -->
     <div class="app-bar">
-        <div class="btn-icon" onclick="navigateTo('home')">←</div>
+        <div class="btn-icon" onclick="goBack()">←</div>
         <span class="app-bar-title">Settings</span>
         <div class="btn-icon">Q</div>
     </div>
diff --git a/assets/scripts/navigation.lua b/assets/scripts/navigation.lua
index 6ef45c3..a78460c 100644
--- a/assets/scripts/navigation.lua
+++ b/assets/scripts/navigation.lua
@@ -1,9 +1,9 @@
 -- Navigation System for Virtual Smartphone
 -- Handles screen transitions and state management
 
--- Screen registry
+-- Screen registry - maps screen names to RML file paths
 local screens = {
-    home = "screens/home.rml",
+    home = "demo.rml",
     lock = "screens/lock.rml",
     dialer = "screens/dialer.rml",
     contacts = "screens/contacts.rml",
@@ -12,33 +12,59 @@ local screens = {
     browser = "screens/browser.rml"
 }
 
--- Current screen state
-local current_screen = "home"
-local screen_history = {}
+-- Navigation history stack
+local history = {}
 
--- Navigate to a screen
+-- Current screen name
+local current_screen = "home"
+
+-- Navigate to a screen by name
 function navigateTo(screen_name)
-    if screens[screen_name] then
-        -- Add current screen to history
-        table.insert(screen_history, current_screen)
+    local path = screens[screen_name]
+    if path then
+        -- Push current screen to history before navigating
+        table.insert(history, current_screen)
         current_screen = screen_name
 
-        -- Load the new document
-        -- Note: In RmlUi, we'd typically use document loading
-        print("Navigating to: " .. screen_name)
+        -- Load the new screen using C++ function
+        local success = loadScreen(path)
+        if success then
+            print("Navigated to: " .. screen_name)
+        else
+            -- Restore previous state on failure
+            current_screen = table.remove(history)
+            print("Failed to navigate to: " .. screen_name)
+        end
+        return success
     else
         print("Unknown screen: " .. screen_name)
+        return false
     end
 end
 
 -- Go back to previous screen
 function goBack()
-    if #screen_history > 0 then
-        current_screen = table.remove(screen_history)
-        print("Going back to: " .. current_screen)
+    if #history > 0 then
+        local previous = table.remove(history)
+        local path = screens[previous]
+        if path then
+            current_screen = previous
+            loadScreen(path)
+            print("Back to: " .. previous)
+            return true
+        end
     else
         print("No history to go back to")
     end
+    return false
+end
+
+-- Go to home screen (clear history)
+function goHome()
+    history = {}
+    current_screen = "home"
+    loadScreen(screens.home)
+    print("Navigated to home")
 end
 
 -- Get current screen name
@@ -46,9 +72,19 @@ function getCurrentScreen()
     return current_screen
 end
 
+-- Check if we can go back
+function canGoBack()
+    return #history > 0
+end
+
 -- Clear navigation history
 function clearHistory()
-    screen_history = {}
+    history = {}
+end
+
+-- Get history depth
+function getHistoryDepth()
+    return #history
 end
 
 print("Navigation system initialized")
diff --git a/main.cpp b/main.cpp
index 1a7bedd..523b44a 100644
--- a/main.cpp
+++ b/main.cpp
@@ -9,12 +9,26 @@
 #include <RmlUi/Core.h>
 #include <RmlUi/Debugger.h>
 #include <RmlUi/Lua.h>
+#include <RmlUi/Lua/Interpreter.h>
 #include <RmlUi_Backend.h>
 #include <RmlUi_Include_Windows.h>
 #include <RmlUi_Include_GL3.h>
 #include <GLFW/glfw3.h>
 #include <png.h>
 
+extern "C" {
+#include <lua.h>
+#include <lauxlib.h>
+#include <lualib.h>
+}
+
+// Global app state for Lua access
+struct AppState {
+    Rml::Context* context = nullptr;
+    Rml::ElementDocument* document = nullptr;
+    std::filesystem::path assets_path;
+} g_app;
+
 void load_fonts(const std::filesystem::path& dir)
 {
     for (const auto& file : std::filesystem::directory_iterator(dir))
@@ -26,6 +40,57 @@ void load_fonts(const std::filesystem::path& dir)
     }
 }
 
+// Lua function: loadScreen(path) - loads a new RML document
+// Path is relative to assets folder
+int lua_loadScreen(lua_State* L)
+{
+    const char* path = luaL_checkstring(L, 1);
+
+    std::filesystem::path full_path = g_app.assets_path / path;
+
+    if (!std::filesystem::exists(full_path))
+    {
+        std::println("Screen not found: {}", full_path.string());
+        lua_pushboolean(L, false);
+        return 1;
+    }
+
+    // Unload current document
+    if (g_app.document)
+    {
+        g_app.context->UnloadDocument(g_app.document);
+        g_app.document = nullptr;
+    }
+
+    // Load new document
+    g_app.document = g_app.context->LoadDocument(full_path.string());
+    if (g_app.document)
+    {
+        g_app.document->Show();
+        std::println("Loaded screen: {}", path);
+        lua_pushboolean(L, true);
+    }
+    else
+    {
+        std::println("Failed to load screen: {}", path);
+        lua_pushboolean(L, false);
+    }
+
+    return 1;
+}
+
+// Register custom Lua functions
+void registerLuaFunctions()
+{
+    lua_State* L = Rml::Lua::Interpreter::GetLuaState();
+
+    // Register global function
+    lua_pushcfunction(L, lua_loadScreen);
+    lua_setglobal(L, "loadScreen");
+
+    std::println("Registered Lua functions");
+}
+
 void DumpElementTree(Rml::Element* element, std::ofstream& out, int depth = 0)
 {
     if (!element) return;
@@ -173,22 +238,25 @@ int main(const int argc, const char* argv[])
     Rml::Initialise();
     Rml::Lua::Initialise();
 
-    Rml::Context* context = Rml::CreateContext("main", Rml::Vector2i(window_width, window_height));
-    if (!context)
+    g_app.context = Rml::CreateContext("main", Rml::Vector2i(window_width, window_height));
+    if (!g_app.context)
     {
         Rml::Shutdown();
         Backend::Shutdown();
         return EXIT_FAILURE;
     }
 
+    // Register custom Lua functions
+    registerLuaFunctions();
+
     // Find the assets folder by checking for fonts
-    std::filesystem::path assets_path = std::filesystem::absolute(file.parent_path());
+    g_app.assets_path = std::filesystem::absolute(file.parent_path());
 
     // Walk up the directory tree to find a folder containing .ttf fonts
-    while (!assets_path.empty() && assets_path.has_parent_path())
+    while (!g_app.assets_path.empty() && g_app.assets_path.has_parent_path())
     {
         bool has_fonts = false;
-        for (const auto& entry : std::filesystem::directory_iterator(assets_path))
+        for (const auto& entry : std::filesystem::directory_iterator(g_app.assets_path))
         {
             if (entry.path().extension() == ".ttf")
             {
@@ -197,15 +265,15 @@ int main(const int argc, const char* argv[])
             }
         }
         if (has_fonts) break;
-        assets_path = assets_path.parent_path();
+        g_app.assets_path = g_app.assets_path.parent_path();
     }
 
-    load_fonts(assets_path);
+    load_fonts(g_app.assets_path);
 
-    Rml::ElementDocument* document = context->LoadDocument(file.string());
-    if (document)
+    g_app.document = g_app.context->LoadDocument(file.string());
+    if (g_app.document)
     {
-        document->Show();
+        g_app.document->Show();
     }
 
     // Dump mode: render and capture screenshot
@@ -222,10 +290,10 @@ int main(const int argc, const char* argv[])
         }
 
         // First render to default framebuffer to initialize everything
-        Backend::ProcessEvents(context);
-        context->Update();
+        Backend::ProcessEvents(g_app.context);
+        g_app.context->Update();
         Backend::BeginFrame();
-        context->Render();
+        g_app.context->Render();
         Backend::PresentFrame();
 
         // Create dump folder if it doesn't exist
@@ -238,7 +306,7 @@ int main(const int argc, const char* argv[])
         {
             dump_file << "Window: " << window_width << "x" << window_height << "\n";
             dump_file << "\n=== Element Layout ===\n";
-            DumpElementTree(document, dump_file);
+            DumpElementTree(g_app.document, dump_file);
             dump_file.close();
         }
 
@@ -252,8 +320,8 @@ int main(const int argc, const char* argv[])
         glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
 
         // Render to FBO
-        context->Update();
-        context->Render();
+        g_app.context->Update();
+        g_app.context->Render();
 
         // Read pixels
         auto pixels = fbo.readPixels();
@@ -269,7 +337,7 @@ int main(const int argc, const char* argv[])
         return EXIT_SUCCESS;
     }
 
-    const HANDLE hNotif = FindFirstChangeNotification(assets_path.c_str(),
+    const HANDLE hNotif = FindFirstChangeNotification(g_app.assets_path.c_str(),
         TRUE, FILE_NOTIFY_CHANGE_LAST_WRITE);
 
     bool running = true;
@@ -278,22 +346,22 @@ int main(const int argc, const char* argv[])
         if (const DWORD wait_result = WaitForSingleObject(hNotif, 100);
             wait_result == WAIT_OBJECT_0)
         {
-            if (document)
-                context->UnloadDocument(document);
-            context->Update();
+            if (g_app.document)
+                g_app.context->UnloadDocument(g_app.document);
+            g_app.context->Update();
             std::this_thread::sleep_for(std::chrono::milliseconds(100));
-            document = context->LoadDocument(file.string());
-            if (document)
+            g_app.document = g_app.context->LoadDocument(file.string());
+            if (g_app.document)
             {
-                document->ReloadStyleSheet();
-                document->Show();
+                g_app.document->ReloadStyleSheet();
+                g_app.document->Show();
             }
             FindNextChangeNotification(hNotif);
         }
-        running = Backend::ProcessEvents(context);
-        context->Update();
+        running = Backend::ProcessEvents(g_app.context);
+        g_app.context->Update();
         Backend::BeginFrame();
-        context->Render();
+        g_app.context->Render();
         Backend::PresentFrame();
     }
 
