diff --git a/assets/demo.rml b/assets/demo.rml
index 44964dc..f4d8c90 100644
--- a/assets/demo.rml
+++ b/assets/demo.rml
@@ -1,39 +1,119 @@
 <rml>
-  <head>
-    <link type="text/rcss" href="html.rcss"/>
-    <link type="text/rcss" href="phone.rcss"/>
-    <script src="demo.lua"></script>
-    <title>Fullscreen Mobile UI</title>
-  </head>
-  <body>
-    <div id="status-bar">
-      <span class="time">22:47</span>
-      <div class="status-icons">
-        <span class="icon">📶</span>
-        <span class="icon">🔋</span>
-        <span class="icon">📶</span>
-        <span class="icon">🔋</span>
-        <span class="icon">📶</span>
-        <span class="icon">🔋</span>
-      </div>
+<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>Virtual Smartphone - Home</title>
+    <style>
+        .home-screen {
+            width: 100%;
+            height: 100%;
+            background-color: #121212;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .home-content {
+            flex: 1;
+            padding-bottom: 80px;
+        }
+    </style>
+</head>
+<body class="home-screen">
+    <!-- Status Bar -->
+    <div class="status-bar">
+        <span class="status-bar-time">12:30</span>
+        <div class="status-bar-icons">
+            <span>*</span>
+            <span>+</span>
+            <span>|</span>
+        </div>
     </div>
 
-    <div id="content">
-      <div class="header-section">
-        <h1>Hello omar 3 hello! and hello LEO 2 Hello!</h1>
-      </div>
-      <div class="button-container">
-        <button id="main-button" onclick="onButtonClick(event)">Click Me!</button>
-      </div>
+    <!-- App Grid -->
+    <div class="home-content">
+        <div class="app-grid">
+            <!-- Row 1 -->
+            <div class="app-icon">
+                <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-image" style="background-color: #2196F3;">M</div>
+                <span class="app-icon-label">Messages</span>
+            </div>
+            <div class="app-icon">
+                <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-image" style="background-color: #F44336;">B</div>
+                <span class="app-icon-label">Browser</span>
+            </div>
+
+            <!-- Row 2 -->
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #9C27B0;">G</div>
+                <span class="app-icon-label">Gallery</span>
+            </div>
+            <div class="app-icon">
+                <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-image" style="background-color: #607D8B;">S</div>
+                <span class="app-icon-label">Settings</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #E91E63;">M</div>
+                <span class="app-icon-label">Music</span>
+            </div>
+
+            <!-- Row 3 -->
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #3F51B5;">C</div>
+                <span class="app-icon-label">Calendar</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #009688;">C</div>
+                <span class="app-icon-label">Clock</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #795548;">N</div>
+                <span class="app-icon-label">Notes</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #FF5722;">M</div>
+                <span class="app-icon-label">Maps</span>
+            </div>
+
+            <!-- Row 4 -->
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #8BC34A;">S</div>
+                <span class="app-icon-label">Store</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #CDDC39;">F</div>
+                <span class="app-icon-label">Files</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #FFC107;">C</div>
+                <span class="app-icon-label">Calculator</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #673AB7;">W</div>
+                <span class="app-icon-label">Weather</span>
+            </div>
+        </div>
     </div>
 
-    <div id="nav-bar">
-      <div class="nav-item">Home</div>
-      <div class="nav-item">Apps</div>
-      <div class="nav-item">Settings</div>
-      <div class="nav-item">Home</div>
-      <div class="nav-item">Apps</div>
-      <div class="nav-item">Settings</div>
+    <!-- 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>
-  </body>
+</body>
 </rml>
diff --git a/assets/screens/browser.rml b/assets/screens/browser.rml
new file mode 100644
index 0000000..de34ae3
--- /dev/null
+++ b/assets/screens/browser.rml
@@ -0,0 +1,232 @@
+<rml>
+<head>
+    <link type="text/rcss" href="../ui/theme.rcss"/>
+    <link type="text/rcss" href="../ui/components.rcss"/>
+    <title>Browser</title>
+    <style>
+        .browser-screen {
+            width: 100%;
+            height: 100%;
+            background-color: #121212;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .browser-toolbar {
+            display: flex;
+            align-items: center;
+            padding: 8px;
+            background-color: #1E1E1E;
+            gap: 8px;
+        }
+
+        .browser-nav-btn {
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            color: #B3B3B3;
+            cursor: pointer;
+            border-radius: 20px;
+        }
+
+        .browser-nav-btn:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .browser-nav-btn.disabled {
+            color: #444444;
+        }
+
+        .browser-url-bar {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            padding: 8px 16px;
+            background-color: #2D2D2D;
+            border-radius: 20px;
+        }
+
+        .browser-secure-icon {
+            font-size: 14px;
+            color: #4CAF50;
+            margin-right: 8px;
+        }
+
+        .browser-url {
+            flex: 1;
+            font-size: 14px;
+            color: #FFFFFF;
+            background: transparent;
+            border: none;
+        }
+
+        .browser-content {
+            flex: 1;
+            background-color: #FFFFFF;
+            overflow: auto;
+        }
+
+        .browser-page {
+            padding: 16px;
+            color: #000000;
+        }
+
+        .browser-page-title {
+            font-size: 24px;
+            font-weight: bold;
+            color: #1a0dab;
+            margin-bottom: 16px;
+        }
+
+        .browser-page-text {
+            font-size: 14px;
+            line-height: 1.6;
+            color: #333333;
+            margin-bottom: 16px;
+        }
+
+        .browser-page-link {
+            color: #1a0dab;
+            text-decoration: underline;
+        }
+
+        .browser-search-results {
+            padding: 16px;
+        }
+
+        .browser-search-item {
+            margin-bottom: 24px;
+        }
+
+        .browser-search-title {
+            font-size: 18px;
+            color: #1a0dab;
+            margin-bottom: 4px;
+        }
+
+        .browser-search-url {
+            font-size: 13px;
+            color: #006621;
+            margin-bottom: 4px;
+        }
+
+        .browser-search-desc {
+            font-size: 14px;
+            color: #545454;
+            line-height: 1.4;
+        }
+
+        .browser-bottom-bar {
+            display: flex;
+            align-items: center;
+            padding: 8px 16px;
+            background-color: #1E1E1E;
+            border-top: 1px solid #333333;
+        }
+
+        .browser-tab-btn {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 8px;
+            cursor: pointer;
+            color: #B3B3B3;
+        }
+
+        .browser-tab-btn:hover {
+            color: #FFFFFF;
+        }
+
+        .browser-tab-icon {
+            font-size: 20px;
+            margin-bottom: 4px;
+        }
+
+        .browser-tab-label {
+            font-size: 11px;
+        }
+
+        .browser-tabs-indicator {
+            padding: 4px 8px;
+            border: 1px solid #B3B3B3;
+            border-radius: 4px;
+            font-size: 12px;
+            color: #B3B3B3;
+        }
+    </style>
+</head>
+<body class="browser-screen">
+    <!-- Status Bar -->
+    <div class="status-bar">
+        <span class="status-bar-time">12:30</span>
+        <div class="status-bar-icons">
+            <span>*</span>
+            <span>+</span>
+            <span>|</span>
+        </div>
+    </div>
+
+    <!-- Browser Toolbar -->
+    <div class="browser-toolbar">
+        <div class="browser-nav-btn" onclick="navigateTo('home')">←</div>
+        <div class="browser-nav-btn disabled">→</div>
+        <div class="browser-url-bar">
+            <span class="browser-secure-icon">L</span>
+            <input class="browser-url" type="text" value="example.com"/>
+        </div>
+        <div class="browser-nav-btn">R</div>
+        <div class="browser-nav-btn">:</div>
+    </div>
+
+    <!-- Browser Content -->
+    <div class="browser-content">
+        <div class="browser-page">
+            <div class="browser-page-title">Example Domain</div>
+            <div class="browser-page-text">
+                This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.
+            </div>
+            <div class="browser-page-text">
+                <span class="browser-page-link">More information...</span>
+            </div>
+
+            <div style="margin-top: 32px; padding-top: 16px; border-top: 1px solid #e0e0e0;">
+                <div class="browser-page-title" style="font-size: 18px;">Related Links</div>
+                <div class="browser-search-item">
+                    <div class="browser-search-title">IANA — IANA-managed Reserved Domains</div>
+                    <div class="browser-search-url">www.iana.org > domains > reserved</div>
+                    <div class="browser-search-desc">Certain domains are set aside and unavailable for registration. Learn about reserved top-level domains.</div>
+                </div>
+                <div class="browser-search-item">
+                    <div class="browser-search-title">RFC 2606 - Reserved Top Level DNS Names</div>
+                    <div class="browser-search-url">tools.ietf.org > html > rfc2606</div>
+                    <div class="browser-search-desc">This document describes some domain names that are reserved for documentation purposes.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bottom Bar -->
+    <div class="browser-bottom-bar">
+        <div class="browser-tab-btn" onclick="navigateTo('home')">
+            <span class="browser-tab-icon">H</span>
+            <span class="browser-tab-label">Home</span>
+        </div>
+        <div class="browser-tab-btn">
+            <span class="browser-tabs-indicator">3</span>
+            <span class="browser-tab-label">Tabs</span>
+        </div>
+        <div class="browser-tab-btn">
+            <span class="browser-tab-icon">+</span>
+            <span class="browser-tab-label">New Tab</span>
+        </div>
+        <div class="browser-tab-btn">
+            <span class="browser-tab-icon">:</span>
+            <span class="browser-tab-label">Menu</span>
+        </div>
+    </div>
+</body>
+</rml>
diff --git a/assets/screens/contacts.rml b/assets/screens/contacts.rml
new file mode 100644
index 0000000..a62ac82
--- /dev/null
+++ b/assets/screens/contacts.rml
@@ -0,0 +1,197 @@
+<rml>
+<head>
+    <link type="text/rcss" href="../ui/theme.rcss"/>
+    <link type="text/rcss" href="../ui/components.rcss"/>
+    <title>Contacts</title>
+    <style>
+        .contacts-screen {
+            width: 100%;
+            height: 100%;
+            background-color: #121212;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .contacts-list {
+            flex: 1;
+            overflow: auto;
+            padding-bottom: 56px;
+        }
+
+        .contact-letter {
+            padding: 8px 16px;
+            font-size: 14px;
+            font-weight: 500;
+            color: #BB86FC;
+            background-color: #1E1E1E;
+            position: sticky;
+            top: 0;
+        }
+
+        .contact-item {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            cursor: pointer;
+        }
+
+        .contact-item:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+
+        .contact-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 20px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            color: #000000;
+        }
+
+        .contact-info {
+            flex: 1;
+        }
+
+        .contact-name {
+            font-size: 16px;
+            color: #FFFFFF;
+        }
+
+        .contact-phone {
+            font-size: 13px;
+            color: #B3B3B3;
+            margin-top: 2px;
+        }
+    </style>
+</head>
+<body class="contacts-screen">
+    <!-- App Bar -->
+    <div class="app-bar">
+        <div class="btn-icon" onclick="navigateTo('home')">←</div>
+        <span class="app-bar-title">Contacts</span>
+        <div class="btn-icon">+</div>
+    </div>
+
+    <!-- Search Bar -->
+    <div class="search-bar">
+        <span class="search-icon">Q</span>
+        <input class="search-input" type="text" placeholder="Search contacts"/>
+    </div>
+
+    <!-- Contacts List -->
+    <div class="contacts-list">
+        <!-- A -->
+        <div class="contact-letter">A</div>
+        <div class="contact-item">
+            <div class="contact-avatar" style="background-color: #E91E63;">A</div>
+            <div class="contact-info">
+                <div class="contact-name">Alice Johnson</div>
+                <div class="contact-phone">+1 (555) 123-4567</div>
+            </div>
+        </div>
+        <div class="contact-item">
+            <div class="contact-avatar" style="background-color: #9C27B0;">A</div>
+            <div class="contact-info">
+                <div class="contact-name">Andrew Smith</div>
+                <div class="contact-phone">+1 (555) 234-5678</div>
+            </div>
+        </div>
+
+        <!-- B -->
+        <div class="contact-letter">B</div>
+        <div class="contact-item">
+            <div class="contact-avatar" style="background-color: #2196F3;">B</div>
+            <div class="contact-info">
+                <div class="contact-name">Bob Williams</div>
+                <div class="contact-phone">+1 (555) 345-6789</div>
+            </div>
+        </div>
+        <div class="contact-item">
+            <div class="contact-avatar" style="background-color: #00BCD4;">B</div>
+            <div class="contact-info">
+                <div class="contact-name">Brian Davis</div>
+                <div class="contact-phone">+1 (555) 456-7890</div>
+            </div>
+        </div>
+
+        <!-- C -->
+        <div class="contact-letter">C</div>
+        <div class="contact-item">
+            <div class="contact-avatar" style="background-color: #4CAF50;">C</div>
+            <div class="contact-info">
+                <div class="contact-name">Carol Martinez</div>
+                <div class="contact-phone">+1 (555) 567-8901</div>
+            </div>
+        </div>
+
+        <!-- D -->
+        <div class="contact-letter">D</div>
+        <div class="contact-item">
+            <div class="contact-avatar" style="background-color: #FF9800;">D</div>
+            <div class="contact-info">
+                <div class="contact-name">David Lee</div>
+                <div class="contact-phone">+1 (555) 678-9012</div>
+            </div>
+        </div>
+
+        <!-- J -->
+        <div class="contact-letter">J</div>
+        <div class="contact-item">
+            <div class="contact-avatar" style="background-color: #F44336;">J</div>
+            <div class="contact-info">
+                <div class="contact-name">John Wilson</div>
+                <div class="contact-phone">+1 (555) 789-0123</div>
+            </div>
+        </div>
+
+        <!-- M -->
+        <div class="contact-letter">M</div>
+        <div class="contact-item">
+            <div class="contact-avatar" style="background-color: #673AB7;">M</div>
+            <div class="contact-info">
+                <div class="contact-name">Mom</div>
+                <div class="contact-phone">+1 (555) 890-1234</div>
+            </div>
+        </div>
+        <div class="contact-item">
+            <div class="contact-avatar" style="background-color: #3F51B5;">M</div>
+            <div class="contact-info">
+                <div class="contact-name">Mike Brown</div>
+                <div class="contact-phone">+1 (555) 901-2345</div>
+            </div>
+        </div>
+
+        <!-- S -->
+        <div class="contact-letter">S</div>
+        <div class="contact-item">
+            <div class="contact-avatar" style="background-color: #009688;">S</div>
+            <div class="contact-info">
+                <div class="contact-name">Sarah Taylor</div>
+                <div class="contact-phone">+1 (555) 012-3456</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- FAB -->
+    <div class="btn-fab">+</div>
+
+    <!-- Bottom Navigation -->
+    <div class="bottom-nav">
+        <div class="bottom-nav-item" onclick="navigateTo('dialer')">
+            <span class="bottom-nav-icon">*</span>
+            <span class="bottom-nav-label">Keypad</span>
+        </div>
+        <div class="bottom-nav-item">
+            <span class="bottom-nav-icon">O</span>
+            <span class="bottom-nav-label">Recent</span>
+        </div>
+        <div class="bottom-nav-item active">
+            <span class="bottom-nav-icon">@</span>
+            <span class="bottom-nav-label">Contacts</span>
+        </div>
+    </div>
+</body>
+</rml>
diff --git a/assets/screens/dialer.rml b/assets/screens/dialer.rml
new file mode 100644
index 0000000..4d60db0
--- /dev/null
+++ b/assets/screens/dialer.rml
@@ -0,0 +1,196 @@
+<rml>
+<head>
+    <link type="text/rcss" href="../ui/theme.rcss"/>
+    <link type="text/rcss" href="../ui/components.rcss"/>
+    <script src="../scripts/phone.lua"></script>
+    <title>Phone</title>
+    <style>
+        .dialer-screen {
+            width: 100%;
+            height: 100%;
+            background-color: #121212;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .dialer-tabs {
+            display: flex;
+            background-color: #1E1E1E;
+            border-bottom: 1px solid #333333;
+        }
+
+        .dialer-tab {
+            flex: 1;
+            padding: 16px;
+            text-align: center;
+            font-size: 14px;
+            color: #B3B3B3;
+            cursor: pointer;
+        }
+
+        .dialer-tab.active {
+            color: #BB86FC;
+            border-bottom: 2px solid #BB86FC;
+        }
+
+        .dialer-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .recent-calls {
+            flex: 1;
+            overflow: auto;
+        }
+
+        .call-item {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+        }
+
+        .call-item:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+
+        .call-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 20px;
+            background-color: #BB86FC;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            color: #000000;
+        }
+
+        .call-info {
+            flex: 1;
+        }
+
+        .call-name {
+            font-size: 16px;
+            color: #FFFFFF;
+        }
+
+        .call-type {
+            font-size: 13px;
+            color: #B3B3B3;
+            margin-top: 2px;
+        }
+
+        .call-type.missed {
+            color: #CF6679;
+        }
+
+        .call-time {
+            font-size: 13px;
+            color: #666666;
+        }
+
+        .call-action {
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            color: #4CAF50;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body class="dialer-screen">
+    <!-- App Bar -->
+    <div class="app-bar">
+        <div class="btn-icon" onclick="navigateTo('home')">←</div>
+        <span class="app-bar-title">Phone</span>
+    </div>
+
+    <!-- Tabs -->
+    <div class="dialer-tabs">
+        <div class="dialer-tab" id="tab-keypad">Keypad</div>
+        <div class="dialer-tab active" id="tab-recent">Recent</div>
+        <div class="dialer-tab" id="tab-contacts">Contacts</div>
+    </div>
+
+    <!-- Dial Display -->
+    <div class="dial-display" id="dial-display"></div>
+
+    <!-- Dial Pad -->
+    <div class="dial-pad">
+        <div class="dial-key" onclick="dialPress('1')">
+            <span class="dial-key-number">1</span>
+            <span class="dial-key-letters"></span>
+        </div>
+        <div class="dial-key" onclick="dialPress('2')">
+            <span class="dial-key-number">2</span>
+            <span class="dial-key-letters">ABC</span>
+        </div>
+        <div class="dial-key" onclick="dialPress('3')">
+            <span class="dial-key-number">3</span>
+            <span class="dial-key-letters">DEF</span>
+        </div>
+        <div class="dial-key" onclick="dialPress('4')">
+            <span class="dial-key-number">4</span>
+            <span class="dial-key-letters">GHI</span>
+        </div>
+        <div class="dial-key" onclick="dialPress('5')">
+            <span class="dial-key-number">5</span>
+            <span class="dial-key-letters">JKL</span>
+        </div>
+        <div class="dial-key" onclick="dialPress('6')">
+            <span class="dial-key-number">6</span>
+            <span class="dial-key-letters">MNO</span>
+        </div>
+        <div class="dial-key" onclick="dialPress('7')">
+            <span class="dial-key-number">7</span>
+            <span class="dial-key-letters">PQRS</span>
+        </div>
+        <div class="dial-key" onclick="dialPress('8')">
+            <span class="dial-key-number">8</span>
+            <span class="dial-key-letters">TUV</span>
+        </div>
+        <div class="dial-key" onclick="dialPress('9')">
+            <span class="dial-key-number">9</span>
+            <span class="dial-key-letters">WXYZ</span>
+        </div>
+        <div class="dial-key" onclick="dialPress('*')">
+            <span class="dial-key-number">*</span>
+            <span class="dial-key-letters"></span>
+        </div>
+        <div class="dial-key" onclick="dialPress('0')">
+            <span class="dial-key-number">0</span>
+            <span class="dial-key-letters">+</span>
+        </div>
+        <div class="dial-key" onclick="dialPress('#')">
+            <span class="dial-key-number">#</span>
+            <span class="dial-key-letters"></span>
+        </div>
+    </div>
+
+    <!-- Call Button -->
+    <div class="dial-actions">
+        <div class="dial-call-btn" onclick="makeCall()">C</div>
+    </div>
+
+    <!-- Bottom Navigation -->
+    <div class="bottom-nav">
+        <div class="bottom-nav-item active">
+            <span class="bottom-nav-icon">*</span>
+            <span class="bottom-nav-label">Keypad</span>
+        </div>
+        <div class="bottom-nav-item">
+            <span class="bottom-nav-icon">O</span>
+            <span class="bottom-nav-label">Recent</span>
+        </div>
+        <div class="bottom-nav-item" onclick="navigateTo('contacts')">
+            <span class="bottom-nav-icon">@</span>
+            <span class="bottom-nav-label">Contacts</span>
+        </div>
+    </div>
+</body>
+</rml>
diff --git a/assets/screens/home.rml b/assets/screens/home.rml
new file mode 100644
index 0000000..04076f7
--- /dev/null
+++ b/assets/screens/home.rml
@@ -0,0 +1,126 @@
+<rml>
+<head>
+    <link type="text/rcss" href="../ui/theme.rcss"/>
+    <link type="text/rcss" href="../ui/components.rcss"/>
+    <title>Home</title>
+    <style>
+        .home-screen {
+            width: 100%;
+            height: 100%;
+            background-color: #121212;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .home-content {
+            flex: 1;
+            padding-bottom: 80px;
+        }
+
+        .wallpaper-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(180deg, rgba(18,18,18,0.3) 0%, rgba(18,18,18,0.8) 100%);
+        }
+    </style>
+</head>
+<body class="home-screen">
+    <!-- Status Bar -->
+    <div class="status-bar">
+        <span class="status-bar-time">12:30</span>
+        <div class="status-bar-icons">
+            <span>*</span>
+            <span>+</span>
+            <span>|</span>
+        </div>
+    </div>
+
+    <!-- App Grid -->
+    <div class="home-content">
+        <div class="app-grid">
+            <!-- Row 1 -->
+            <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" 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" 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" onclick="navigateTo('browser')">
+                <div class="app-icon-image" style="background-color: #F44336;">B</div>
+                <span class="app-icon-label">Browser</span>
+            </div>
+
+            <!-- Row 2 -->
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #9C27B0;">G</div>
+                <span class="app-icon-label">Gallery</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #00BCD4;">C</div>
+                <span class="app-icon-label">Camera</span>
+            </div>
+            <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>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #E91E63;">M</div>
+                <span class="app-icon-label">Music</span>
+            </div>
+
+            <!-- Row 3 -->
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #3F51B5;">C</div>
+                <span class="app-icon-label">Calendar</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #009688;">C</div>
+                <span class="app-icon-label">Clock</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #795548;">N</div>
+                <span class="app-icon-label">Notes</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #FF5722;">M</div>
+                <span class="app-icon-label">Maps</span>
+            </div>
+
+            <!-- Row 4 -->
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #8BC34A;">S</div>
+                <span class="app-icon-label">Store</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #CDDC39;">F</div>
+                <span class="app-icon-label">Files</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #FFC107;">C</div>
+                <span class="app-icon-label">Calculator</span>
+            </div>
+            <div class="app-icon">
+                <div class="app-icon-image" style="background-color: #673AB7;">W</div>
+                <span class="app-icon-label">Weather</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Dock -->
+    <div class="dock">
+        <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/lock.rml b/assets/screens/lock.rml
new file mode 100644
index 0000000..14adac4
--- /dev/null
+++ b/assets/screens/lock.rml
@@ -0,0 +1,174 @@
+<rml>
+<head>
+    <link type="text/rcss" href="../ui/theme.rcss"/>
+    <link type="text/rcss" href="../ui/components.rcss"/>
+    <title>Lock Screen</title>
+    <style>
+        .lock-screen {
+            width: 100%;
+            height: 100%;
+            background-color: #121212;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .lock-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .lock-time {
+            font-size: 72px;
+            font-weight: 200;
+            color: #FFFFFF;
+            letter-spacing: 2px;
+        }
+
+        .lock-date {
+            font-size: 18px;
+            color: #B3B3B3;
+            margin-top: 8px;
+        }
+
+        .lock-swipe {
+            position: absolute;
+            bottom: 100px;
+            left: 0;
+            right: 0;
+            text-align: center;
+        }
+
+        .lock-swipe-text {
+            font-size: 14px;
+            color: #666666;
+        }
+
+        .lock-swipe-icon {
+            font-size: 24px;
+            color: #666666;
+            margin-top: 8px;
+        }
+
+        .lock-shortcuts {
+            position: absolute;
+            bottom: 32px;
+            left: 0;
+            right: 0;
+            display: flex;
+            justify-content: space-between;
+            padding: 0 32px;
+        }
+
+        .lock-shortcut {
+            width: 48px;
+            height: 48px;
+            border-radius: 24px;
+            background-color: rgba(255, 255, 255, 0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            color: #FFFFFF;
+            cursor: pointer;
+        }
+
+        .lock-shortcut:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+
+        .lock-notifications {
+            margin-top: 48px;
+            width: 100%;
+            padding: 0 24px;
+        }
+
+        .lock-notification {
+            background-color: rgba(255, 255, 255, 0.1);
+            border-radius: 16px;
+            padding: 16px;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+        }
+
+        .lock-notification-icon {
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            background-color: #2196F3;
+            margin-right: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            color: #FFFFFF;
+        }
+
+        .lock-notification-content {
+            flex: 1;
+        }
+
+        .lock-notification-title {
+            font-size: 14px;
+            font-weight: 500;
+            color: #FFFFFF;
+        }
+
+        .lock-notification-text {
+            font-size: 13px;
+            color: #B3B3B3;
+            margin-top: 2px;
+        }
+    </style>
+</head>
+<body class="lock-screen" onclick="navigateTo('home')">
+    <!-- Status Bar -->
+    <div class="status-bar">
+        <span class="status-bar-time">12:30</span>
+        <div class="status-bar-icons">
+            <span>*</span>
+            <span>+</span>
+            <span>|</span>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="lock-content">
+        <div class="lock-time">12:30</div>
+        <div class="lock-date">Wednesday, January 15</div>
+
+        <!-- Notifications -->
+        <div class="lock-notifications">
+            <div class="lock-notification">
+                <div class="lock-notification-icon">M</div>
+                <div class="lock-notification-content">
+                    <div class="lock-notification-title">Messages</div>
+                    <div class="lock-notification-text">John: Hey, are you coming to...</div>
+                </div>
+            </div>
+            <div class="lock-notification">
+                <div class="lock-notification-icon" style="background-color: #4CAF50;">P</div>
+                <div class="lock-notification-content">
+                    <div class="lock-notification-title">Missed Call</div>
+                    <div class="lock-notification-text">Mom - 10 minutes ago</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Swipe to unlock -->
+    <div class="lock-swipe">
+        <div class="lock-swipe-icon">^</div>
+        <div class="lock-swipe-text">Swipe up to unlock</div>
+    </div>
+
+    <!-- Shortcuts -->
+    <div class="lock-shortcuts">
+        <div class="lock-shortcut" onclick="navigateTo('dialer')">P</div>
+        <div class="lock-shortcut">C</div>
+    </div>
+</body>
+</rml>
diff --git a/assets/screens/messages.rml b/assets/screens/messages.rml
new file mode 100644
index 0000000..80a8fbe
--- /dev/null
+++ b/assets/screens/messages.rml
@@ -0,0 +1,222 @@
+<rml>
+<head>
+    <link type="text/rcss" href="../ui/theme.rcss"/>
+    <link type="text/rcss" href="../ui/components.rcss"/>
+    <title>Messages</title>
+    <style>
+        .messages-screen {
+            width: 100%;
+            height: 100%;
+            background-color: #121212;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .conversations-list {
+            flex: 1;
+            overflow: auto;
+        }
+
+        .conversation-item {
+            display: flex;
+            align-items: center;
+            padding: 12px 16px;
+            cursor: pointer;
+        }
+
+        .conversation-item:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+
+        .conversation-avatar {
+            width: 48px;
+            height: 48px;
+            border-radius: 24px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            color: #000000;
+        }
+
+        .conversation-content {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .conversation-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .conversation-name {
+            font-size: 16px;
+            font-weight: 500;
+            color: #FFFFFF;
+        }
+
+        .conversation-time {
+            font-size: 12px;
+            color: #666666;
+        }
+
+        .conversation-preview {
+            font-size: 14px;
+            color: #B3B3B3;
+            margin-top: 4px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .conversation-unread {
+            width: 20px;
+            height: 20px;
+            border-radius: 10px;
+            background-color: #BB86FC;
+            color: #000000;
+            font-size: 11px;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 8px;
+        }
+
+        /* Chat View Styles */
+        .chat-header {
+            display: flex;
+            align-items: center;
+            padding: 8px 0;
+        }
+
+        .chat-header-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 18px;
+            background-color: #BB86FC;
+            margin-right: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            color: #000000;
+        }
+
+        .chat-header-info {
+            flex: 1;
+        }
+
+        .chat-header-name {
+            font-size: 16px;
+            font-weight: 500;
+            color: #FFFFFF;
+        }
+
+        .chat-header-status {
+            font-size: 12px;
+            color: #B3B3B3;
+        }
+
+        .chat-messages {
+            flex: 1;
+            overflow: auto;
+            padding: 16px;
+        }
+    </style>
+</head>
+<body class="messages-screen">
+    <!-- App Bar -->
+    <div class="app-bar">
+        <div class="btn-icon" onclick="navigateTo('home')">←</div>
+        <span class="app-bar-title">Messages</span>
+        <div class="btn-icon">Q</div>
+    </div>
+
+    <!-- Conversations List -->
+    <div class="conversations-list">
+        <div class="conversation-item">
+            <div class="conversation-avatar" style="background-color: #4CAF50;">J</div>
+            <div class="conversation-content">
+                <div class="conversation-header">
+                    <span class="conversation-name">John Wilson</span>
+                    <span class="conversation-time">2:30 PM</span>
+                </div>
+                <div class="conversation-preview">Hey, are you coming to the party tonight?</div>
+            </div>
+            <div class="conversation-unread">2</div>
+        </div>
+
+        <div class="conversation-item">
+            <div class="conversation-avatar" style="background-color: #673AB7;">M</div>
+            <div class="conversation-content">
+                <div class="conversation-header">
+                    <span class="conversation-name">Mom</span>
+                    <span class="conversation-time">1:15 PM</span>
+                </div>
+                <div class="conversation-preview">Don't forget to call your grandmother!</div>
+            </div>
+        </div>
+
+        <div class="conversation-item">
+            <div class="conversation-avatar" style="background-color: #E91E63;">A</div>
+            <div class="conversation-content">
+                <div class="conversation-header">
+                    <span class="conversation-name">Alice Johnson</span>
+                    <span class="conversation-time">Yesterday</span>
+                </div>
+                <div class="conversation-preview">Thanks for the help with the project!</div>
+            </div>
+        </div>
+
+        <div class="conversation-item">
+            <div class="conversation-avatar" style="background-color: #2196F3;">B</div>
+            <div class="conversation-content">
+                <div class="conversation-header">
+                    <span class="conversation-name">Bob Williams</span>
+                    <span class="conversation-time">Yesterday</span>
+                </div>
+                <div class="conversation-preview">Did you see the game last night?</div>
+            </div>
+        </div>
+
+        <div class="conversation-item">
+            <div class="conversation-avatar" style="background-color: #FF9800;">W</div>
+            <div class="conversation-content">
+                <div class="conversation-header">
+                    <span class="conversation-name">Work Group</span>
+                    <span class="conversation-time">Mon</span>
+                </div>
+                <div class="conversation-preview">Sarah: Meeting moved to 3pm</div>
+            </div>
+        </div>
+
+        <div class="conversation-item">
+            <div class="conversation-avatar" style="background-color: #009688;">S</div>
+            <div class="conversation-content">
+                <div class="conversation-header">
+                    <span class="conversation-name">Sarah Taylor</span>
+                    <span class="conversation-time">Sun</span>
+                </div>
+                <div class="conversation-preview">See you at the coffee shop!</div>
+            </div>
+        </div>
+
+        <div class="conversation-item">
+            <div class="conversation-avatar" style="background-color: #F44336;">D</div>
+            <div class="conversation-content">
+                <div class="conversation-header">
+                    <span class="conversation-name">David Lee</span>
+                    <span class="conversation-time">Sat</span>
+                </div>
+                <div class="conversation-preview">Great talking to you!</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- FAB -->
+    <div class="btn-fab">+</div>
+</body>
+</rml>
diff --git a/assets/screens/settings.rml b/assets/screens/settings.rml
new file mode 100644
index 0000000..3d0c46f
--- /dev/null
+++ b/assets/screens/settings.rml
@@ -0,0 +1,292 @@
+<rml>
+<head>
+    <link type="text/rcss" href="../ui/theme.rcss"/>
+    <link type="text/rcss" href="../ui/components.rcss"/>
+    <title>Settings</title>
+    <style>
+        .settings-screen {
+            width: 100%;
+            height: 100%;
+            background-color: #121212;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .settings-list {
+            flex: 1;
+            overflow: auto;
+        }
+
+        .settings-section {
+            margin-bottom: 8px;
+        }
+
+        .settings-header {
+            padding: 16px 16px 8px 16px;
+            font-size: 14px;
+            font-weight: 500;
+            color: #BB86FC;
+        }
+
+        .settings-item {
+            display: flex;
+            align-items: center;
+            padding: 16px;
+            cursor: pointer;
+            background-color: #1E1E1E;
+        }
+
+        .settings-item:hover {
+            background-color: #252525;
+        }
+
+        .settings-item + .settings-item {
+            border-top: 1px solid #333333;
+        }
+
+        .settings-icon {
+            width: 40px;
+            height: 40px;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 22px;
+            color: #B3B3B3;
+        }
+
+        .settings-content {
+            flex: 1;
+        }
+
+        .settings-title {
+            font-size: 16px;
+            color: #FFFFFF;
+        }
+
+        .settings-subtitle {
+            font-size: 13px;
+            color: #B3B3B3;
+            margin-top: 2px;
+        }
+
+        .settings-action {
+            font-size: 20px;
+            color: #666666;
+        }
+
+        .settings-toggle {
+            width: 44px;
+            height: 24px;
+            border-radius: 12px;
+            background-color: #666666;
+            position: relative;
+        }
+
+        .settings-toggle.active {
+            background-color: rgba(187, 134, 252, 0.5);
+        }
+
+        .settings-toggle-thumb {
+            width: 20px;
+            height: 20px;
+            border-radius: 10px;
+            background-color: #B3B3B3;
+            position: absolute;
+            top: 2px;
+            left: 2px;
+        }
+
+        .settings-toggle.active .settings-toggle-thumb {
+            background-color: #BB86FC;
+            left: 22px;
+        }
+
+        .settings-value {
+            font-size: 14px;
+            color: #B3B3B3;
+        }
+
+        .user-card {
+            display: flex;
+            align-items: center;
+            padding: 20px 16px;
+            background-color: #1E1E1E;
+            margin-bottom: 8px;
+        }
+
+        .user-avatar {
+            width: 64px;
+            height: 64px;
+            border-radius: 32px;
+            background-color: #BB86FC;
+            margin-right: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 28px;
+            color: #000000;
+        }
+
+        .user-info {
+            flex: 1;
+        }
+
+        .user-name {
+            font-size: 20px;
+            font-weight: 500;
+            color: #FFFFFF;
+        }
+
+        .user-email {
+            font-size: 14px;
+            color: #B3B3B3;
+            margin-top: 4px;
+        }
+    </style>
+</head>
+<body class="settings-screen">
+    <!-- App Bar -->
+    <div class="app-bar">
+        <div class="btn-icon" onclick="navigateTo('home')">←</div>
+        <span class="app-bar-title">Settings</span>
+        <div class="btn-icon">Q</div>
+    </div>
+
+    <!-- Settings List -->
+    <div class="settings-list">
+        <!-- User Card -->
+        <div class="user-card">
+            <div class="user-avatar">U</div>
+            <div class="user-info">
+                <div class="user-name">User Name</div>
+                <div class="user-email">user@example.com</div>
+            </div>
+            <span class="settings-action">></span>
+        </div>
+
+        <!-- Network Section -->
+        <div class="settings-section">
+            <div class="settings-header">Network</div>
+            <div class="settings-item">
+                <div class="settings-icon">W</div>
+                <div class="settings-content">
+                    <div class="settings-title">Wi-Fi</div>
+                    <div class="settings-subtitle">Connected to Home_Network</div>
+                </div>
+                <div class="settings-toggle active">
+                    <div class="settings-toggle-thumb"></div>
+                </div>
+            </div>
+            <div class="settings-item">
+                <div class="settings-icon">B</div>
+                <div class="settings-content">
+                    <div class="settings-title">Bluetooth</div>
+                    <div class="settings-subtitle">Off</div>
+                </div>
+                <div class="settings-toggle">
+                    <div class="settings-toggle-thumb"></div>
+                </div>
+            </div>
+            <div class="settings-item">
+                <div class="settings-icon">A</div>
+                <div class="settings-content">
+                    <div class="settings-title">Airplane Mode</div>
+                </div>
+                <div class="settings-toggle">
+                    <div class="settings-toggle-thumb"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Device Section -->
+        <div class="settings-section">
+            <div class="settings-header">Device</div>
+            <div class="settings-item">
+                <div class="settings-icon">D</div>
+                <div class="settings-content">
+                    <div class="settings-title">Display</div>
+                    <div class="settings-subtitle">Brightness, wallpaper, sleep</div>
+                </div>
+                <span class="settings-action">></span>
+            </div>
+            <div class="settings-item">
+                <div class="settings-icon">S</div>
+                <div class="settings-content">
+                    <div class="settings-title">Sound</div>
+                    <div class="settings-subtitle">Volume, ringtone, vibration</div>
+                </div>
+                <span class="settings-action">></span>
+            </div>
+            <div class="settings-item">
+                <div class="settings-icon">N</div>
+                <div class="settings-content">
+                    <div class="settings-title">Notifications</div>
+                    <div class="settings-subtitle">App notifications, Do not disturb</div>
+                </div>
+                <span class="settings-action">></span>
+            </div>
+            <div class="settings-item">
+                <div class="settings-icon">B</div>
+                <div class="settings-content">
+                    <div class="settings-title">Battery</div>
+                    <div class="settings-subtitle">85% - About 12h remaining</div>
+                </div>
+                <span class="settings-action">></span>
+            </div>
+            <div class="settings-item">
+                <div class="settings-icon">S</div>
+                <div class="settings-content">
+                    <div class="settings-title">Storage</div>
+                    <div class="settings-subtitle">45.2 GB used of 128 GB</div>
+                </div>
+                <span class="settings-action">></span>
+            </div>
+        </div>
+
+        <!-- Privacy Section -->
+        <div class="settings-section">
+            <div class="settings-header">Privacy &amp; Security</div>
+            <div class="settings-item">
+                <div class="settings-icon">L</div>
+                <div class="settings-content">
+                    <div class="settings-title">Lock Screen</div>
+                    <div class="settings-subtitle">PIN, pattern, fingerprint</div>
+                </div>
+                <span class="settings-action">></span>
+            </div>
+            <div class="settings-item">
+                <div class="settings-icon">P</div>
+                <div class="settings-content">
+                    <div class="settings-title">Privacy</div>
+                    <div class="settings-subtitle">Permissions, account activity</div>
+                </div>
+                <span class="settings-action">></span>
+            </div>
+            <div class="settings-item">
+                <div class="settings-icon">L</div>
+                <div class="settings-content">
+                    <div class="settings-title">Location</div>
+                    <div class="settings-subtitle">On - High accuracy</div>
+                </div>
+                <div class="settings-toggle active">
+                    <div class="settings-toggle-thumb"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- About Section -->
+        <div class="settings-section">
+            <div class="settings-header">About</div>
+            <div class="settings-item">
+                <div class="settings-icon">I</div>
+                <div class="settings-content">
+                    <div class="settings-title">About Phone</div>
+                    <div class="settings-subtitle">Model, software version</div>
+                </div>
+                <span class="settings-action">></span>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>
diff --git a/assets/scripts/navigation.lua b/assets/scripts/navigation.lua
new file mode 100644
index 0000000..6ef45c3
--- /dev/null
+++ b/assets/scripts/navigation.lua
@@ -0,0 +1,54 @@
+-- Navigation System for Virtual Smartphone
+-- Handles screen transitions and state management
+
+-- Screen registry
+local screens = {
+    home = "screens/home.rml",
+    lock = "screens/lock.rml",
+    dialer = "screens/dialer.rml",
+    contacts = "screens/contacts.rml",
+    messages = "screens/messages.rml",
+    settings = "screens/settings.rml",
+    browser = "screens/browser.rml"
+}
+
+-- Current screen state
+local current_screen = "home"
+local screen_history = {}
+
+-- Navigate to a screen
+function navigateTo(screen_name)
+    if screens[screen_name] then
+        -- Add current screen to history
+        table.insert(screen_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)
+    else
+        print("Unknown screen: " .. screen_name)
+    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)
+    else
+        print("No history to go back to")
+    end
+end
+
+-- Get current screen name
+function getCurrentScreen()
+    return current_screen
+end
+
+-- Clear navigation history
+function clearHistory()
+    screen_history = {}
+end
+
+print("Navigation system initialized")
diff --git a/assets/scripts/phone.lua b/assets/scripts/phone.lua
new file mode 100644
index 0000000..06780a3
--- /dev/null
+++ b/assets/scripts/phone.lua
@@ -0,0 +1,80 @@
+-- Phone/Dialer functionality for Virtual Smartphone
+
+-- Dial pad state
+local dial_number = ""
+local max_digits = 15
+
+-- Add a digit to the dial display
+function dialPress(digit)
+    if #dial_number < max_digits then
+        dial_number = dial_number .. digit
+        updateDialDisplay()
+        print("Dialed: " .. digit .. " | Number: " .. dial_number)
+    end
+end
+
+-- Clear the last digit
+function dialBackspace()
+    if #dial_number > 0 then
+        dial_number = dial_number:sub(1, -2)
+        updateDialDisplay()
+        print("Backspace | Number: " .. dial_number)
+    end
+end
+
+-- Clear all digits
+function dialClear()
+    dial_number = ""
+    updateDialDisplay()
+    print("Cleared dial pad")
+end
+
+-- Update the dial display element
+function updateDialDisplay()
+    local display = document:GetElementById("dial-display")
+    if display then
+        -- Format number with dashes for readability
+        local formatted = formatPhoneNumber(dial_number)
+        display.inner_rml = formatted
+    end
+end
+
+-- Format phone number for display
+function formatPhoneNumber(number)
+    local len = #number
+    if len == 0 then
+        return ""
+    elseif len <= 3 then
+        return number
+    elseif len <= 6 then
+        return number:sub(1, 3) .. "-" .. number:sub(4)
+    elseif len <= 10 then
+        return "(" .. number:sub(1, 3) .. ") " .. number:sub(4, 6) .. "-" .. number:sub(7)
+    else
+        return "+1 (" .. number:sub(1, 3) .. ") " .. number:sub(4, 6) .. "-" .. number:sub(7, 10)
+    end
+end
+
+-- Make a call (simulated)
+function makeCall()
+    if #dial_number > 0 then
+        print("Calling: " .. dial_number)
+        -- In a real app, this would initiate a call
+        -- For now, just show feedback
+    else
+        print("No number to call")
+    end
+end
+
+-- End a call (simulated)
+function endCall()
+    print("Call ended")
+    dialClear()
+end
+
+-- Get the current dial number
+function getDialNumber()
+    return dial_number
+end
+
+print("Phone system initialized")
diff --git a/assets/ui/components.rcss b/assets/ui/components.rcss
new file mode 100644
index 0000000..80dfaa8
--- /dev/null
+++ b/assets/ui/components.rcss
@@ -0,0 +1,704 @@
+/* ==============================================
+   Components: Material UI Components
+   ============================================== */
+
+/* ============== Status Bar ============== */
+
+.status-bar {
+    height: 24px;
+    padding: 0 12px;
+    background-color: transparent;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 12px;
+    color: #FFFFFF;
+}
+
+.status-bar-time {
+    font-weight: 500;
+}
+
+.status-bar-icons {
+    display: flex;
+    gap: 4px;
+}
+
+/* ============== App Bar ============== */
+
+.app-bar {
+    height: 56px;
+    padding: 0 16px;
+    background-color: #1E1E1E;
+    display: flex;
+    align-items: center;
+}
+
+.app-bar-nav {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+}
+
+.app-bar-title {
+    font-size: 20px;
+    font-weight: 500;
+    flex: 1;
+    color: #FFFFFF;
+}
+
+.app-bar-actions {
+    display: flex;
+}
+
+/* ============== Buttons ============== */
+
+.btn {
+    padding: 12px 24px;
+    font-size: 14px;
+    font-weight: 500;
+    font-family: LatoLatin;
+    text-align: center;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.btn-primary {
+    background-color: #BB86FC;
+    color: #000000;
+}
+
+.btn-primary:hover {
+    background-color: #D4A5FF;
+}
+
+.btn-primary:active {
+    background-color: #9A67EA;
+}
+
+.btn-secondary {
+    background-color: #03DAC6;
+    color: #000000;
+}
+
+.btn-secondary:hover {
+    background-color: #4AEADB;
+}
+
+.btn-outlined {
+    background-color: transparent;
+    border: 1px solid #BB86FC;
+    color: #BB86FC;
+}
+
+.btn-outlined:hover {
+    background-color: rgba(187, 134, 252, 0.1);
+}
+
+.btn-text {
+    background-color: transparent;
+    color: #BB86FC;
+    padding: 8px 16px;
+}
+
+.btn-text:hover {
+    background-color: rgba(187, 134, 252, 0.1);
+}
+
+/* Icon Button */
+.btn-icon {
+    width: 48px;
+    height: 48px;
+    padding: 0;
+    border-radius: 24px;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+}
+
+.btn-icon:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Floating Action Button */
+.btn-fab {
+    width: 56px;
+    height: 56px;
+    border-radius: 28px;
+    background-color: #BB86FC;
+    color: #000000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    position: absolute;
+    bottom: 72px;
+    right: 16px;
+}
+
+.btn-fab:hover {
+    background-color: #D4A5FF;
+}
+
+/* ============== Input Fields ============== */
+
+.input-container {
+    margin-bottom: 16px;
+}
+
+.input-label {
+    font-size: 12px;
+    color: #B3B3B3;
+    margin-bottom: 4px;
+}
+
+.input-field {
+    width: 100%;
+    padding: 12px 0;
+    font-size: 16px;
+    font-family: LatoLatin;
+    color: #FFFFFF;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid #333333;
+}
+
+.input-field:focus {
+    border-bottom-color: #BB86FC;
+}
+
+.input-field:hover {
+    border-bottom-color: #666666;
+}
+
+/* Search Input */
+.search-bar {
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    background-color: #2D2D2D;
+    border-radius: 24px;
+    margin: 8px 16px;
+}
+
+.search-icon {
+    font-size: 20px;
+    color: #B3B3B3;
+    margin-right: 12px;
+}
+
+.search-input {
+    flex: 1;
+    background-color: transparent;
+    border: none;
+    font-size: 16px;
+    color: #FFFFFF;
+}
+
+/* ============== Cards ============== */
+
+.card {
+    background-color: #1E1E1E;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 8px;
+}
+
+.card-elevated {
+    background-color: #2D2D2D;
+}
+
+.card-header {
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: #FFFFFF;
+}
+
+.card-subtitle {
+    font-size: 14px;
+    color: #B3B3B3;
+    margin-bottom: 12px;
+}
+
+.card-content {
+    font-size: 14px;
+    color: #B3B3B3;
+}
+
+.card-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+    gap: 8px;
+}
+
+/* ============== Lists ============== */
+
+.list {
+    display: flex;
+    flex-direction: column;
+}
+
+.list-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    min-height: 48px;
+    cursor: pointer;
+}
+
+.list-item:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+.list-item:active {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.list-item-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    background-color: #BB86FC;
+    margin-right: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    color: #000000;
+}
+
+.list-item-icon {
+    width: 40px;
+    height: 40px;
+    margin-right: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: #B3B3B3;
+}
+
+.list-item-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.list-item-title {
+    font-size: 16px;
+    color: #FFFFFF;
+}
+
+.list-item-subtitle {
+    font-size: 14px;
+    color: #B3B3B3;
+    margin-top: 2px;
+}
+
+.list-item-action {
+    font-size: 24px;
+    color: #666666;
+}
+
+.list-divider {
+    height: 1px;
+    background-color: #333333;
+    margin-left: 72px;
+}
+
+.list-header {
+    padding: 16px 16px 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #BB86FC;
+}
+
+/* ============== Bottom Navigation ============== */
+
+.bottom-nav {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 56px;
+    background-color: #1E1E1E;
+    display: flex;
+    border-top: 1px solid #333333;
+}
+
+.bottom-nav-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #666666;
+}
+
+.bottom-nav-item:hover {
+    color: #B3B3B3;
+}
+
+.bottom-nav-item.active {
+    color: #BB86FC;
+}
+
+.bottom-nav-icon {
+    font-size: 24px;
+    margin-bottom: 4px;
+}
+
+.bottom-nav-label {
+    font-size: 12px;
+}
+
+/* ============== Dialogs/Modals ============== */
+
+.modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-dialog {
+    background-color: #2D2D2D;
+    border-radius: 8px;
+    padding: 24px;
+    width: 280px;
+    max-width: 90%;
+}
+
+.modal-title {
+    font-size: 20px;
+    font-weight: 500;
+    color: #FFFFFF;
+    margin-bottom: 16px;
+}
+
+.modal-content {
+    font-size: 14px;
+    color: #B3B3B3;
+    margin-bottom: 24px;
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+}
+
+/* ============== Toast/Snackbar ============== */
+
+.toast {
+    position: absolute;
+    bottom: 72px;
+    left: 16px;
+    right: 16px;
+    background-color: #323232;
+    color: #FFFFFF;
+    padding: 14px 16px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+}
+
+.toast-action {
+    color: #BB86FC;
+    font-weight: 500;
+    margin-left: 16px;
+}
+
+/* ============== Toggle/Switch ============== */
+
+.toggle {
+    width: 36px;
+    height: 20px;
+    border-radius: 10px;
+    background-color: #666666;
+    position: relative;
+    cursor: pointer;
+}
+
+.toggle.active {
+    background-color: rgba(187, 134, 252, 0.5);
+}
+
+.toggle-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+    background-color: #B3B3B3;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+}
+
+.toggle.active .toggle-thumb {
+    background-color: #BB86FC;
+    left: 18px;
+}
+
+/* ============== Chips/Tags ============== */
+
+.chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 12px;
+    background-color: #2D2D2D;
+    border-radius: 16px;
+    font-size: 14px;
+    color: #FFFFFF;
+    margin: 4px;
+}
+
+.chip-icon {
+    margin-right: 8px;
+}
+
+.chip-delete {
+    margin-left: 8px;
+    font-size: 18px;
+    color: #B3B3B3;
+}
+
+/* ============== Dividers ============== */
+
+.divider {
+    height: 1px;
+    background-color: #333333;
+}
+
+.divider-inset {
+    margin-left: 72px;
+}
+
+/* ============== App Grid (Home Screen) ============== */
+
+.app-grid {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 16px;
+}
+
+.app-icon {
+    width: 25%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 0;
+    cursor: pointer;
+}
+
+.app-icon:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+}
+
+.app-icon-image {
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    background-color: #BB86FC;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    color: #000000;
+    margin-bottom: 8px;
+}
+
+.app-icon-label {
+    font-size: 12px;
+    color: #FFFFFF;
+    text-align: center;
+}
+
+/* ============== Dock ============== */
+
+.dock {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 80px;
+    background-color: rgba(30, 30, 30, 0.9);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0 32px;
+}
+
+.dock-item {
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
+    background-color: #BB86FC;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    color: #000000;
+    cursor: pointer;
+}
+
+.dock-item:hover {
+    transform: scale(1.1);
+}
+
+/* ============== Dial Pad ============== */
+
+.dial-pad {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 16px;
+}
+
+.dial-key {
+    width: 33.33%;
+    height: 72px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 36px;
+}
+
+.dial-key:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.dial-key:active {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.dial-key-number {
+    font-size: 32px;
+    font-weight: 300;
+    color: #FFFFFF;
+}
+
+.dial-key-letters {
+    font-size: 10px;
+    color: #B3B3B3;
+    letter-spacing: 2px;
+    margin-top: 2px;
+}
+
+.dial-display {
+    font-size: 36px;
+    font-weight: 300;
+    color: #FFFFFF;
+    text-align: center;
+    padding: 24px 16px;
+    letter-spacing: 2px;
+}
+
+.dial-actions {
+    display: flex;
+    justify-content: center;
+    padding: 16px;
+    gap: 48px;
+}
+
+.dial-call-btn {
+    width: 64px;
+    height: 64px;
+    border-radius: 32px;
+    background-color: #4CAF50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    color: #FFFFFF;
+    cursor: pointer;
+}
+
+.dial-call-btn:hover {
+    background-color: #66BB6A;
+}
+
+/* ============== Chat Bubbles ============== */
+
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    gap: 8px;
+}
+
+.chat-bubble {
+    max-width: 75%;
+    padding: 10px 14px;
+    border-radius: 18px;
+    font-size: 14px;
+}
+
+.chat-bubble-sent {
+    align-self: flex-end;
+    background-color: #BB86FC;
+    color: #000000;
+    border-bottom-right-radius: 4px;
+}
+
+.chat-bubble-received {
+    align-self: flex-start;
+    background-color: #2D2D2D;
+    color: #FFFFFF;
+    border-bottom-left-radius: 4px;
+}
+
+.chat-timestamp {
+    font-size: 11px;
+    color: #666666;
+    text-align: center;
+    margin: 8px 0;
+}
+
+.chat-input-container {
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    background-color: #1E1E1E;
+    border-top: 1px solid #333333;
+}
+
+.chat-input {
+    flex: 1;
+    padding: 10px 16px;
+    background-color: #2D2D2D;
+    border-radius: 24px;
+    border: none;
+    font-size: 16px;
+    color: #FFFFFF;
+    margin-right: 8px;
+}
+
+.chat-send-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    background-color: #BB86FC;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: #000000;
+    cursor: pointer;
+}
diff --git a/assets/ui/theme.rcss b/assets/ui/theme.rcss
new file mode 100644
index 0000000..e8515c9
--- /dev/null
+++ b/assets/ui/theme.rcss
@@ -0,0 +1,247 @@
+/* ==============================================
+   Theme: Material Dark for Virtual Smartphone
+   ============================================== */
+
+/* Base body styling */
+body {
+    font-family: LatoLatin;
+    background-color: #121212;
+    color: #FFFFFF;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+/* ============== Typography ============== */
+
+.text-h1 {
+    font-size: 96px;
+    font-weight: 300;
+}
+
+.text-h2 {
+    font-size: 60px;
+    font-weight: 300;
+}
+
+.text-h3 {
+    font-size: 48px;
+    font-weight: 400;
+}
+
+.text-h4 {
+    font-size: 34px;
+    font-weight: 400;
+}
+
+.text-h5 {
+    font-size: 24px;
+    font-weight: 400;
+}
+
+.text-h6 {
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.text-body1 {
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.text-body2 {
+    font-size: 14px;
+    font-weight: 400;
+}
+
+.text-caption {
+    font-size: 12px;
+    font-weight: 400;
+}
+
+.text-overline {
+    font-size: 10px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+}
+
+/* ============== Text Colors ============== */
+
+.text-primary {
+    color: #FFFFFF;
+}
+
+.text-secondary {
+    color: #B3B3B3;
+}
+
+.text-disabled {
+    color: #666666;
+}
+
+.text-accent {
+    color: #BB86FC;
+}
+
+.text-accent-secondary {
+    color: #03DAC6;
+}
+
+.text-error {
+    color: #CF6679;
+}
+
+/* ============== Background Colors ============== */
+
+.bg-primary {
+    background-color: #121212;
+}
+
+.bg-surface {
+    background-color: #1E1E1E;
+}
+
+.bg-surface-variant {
+    background-color: #2D2D2D;
+}
+
+.bg-accent {
+    background-color: #BB86FC;
+}
+
+.bg-accent-secondary {
+    background-color: #03DAC6;
+}
+
+.bg-error {
+    background-color: #CF6679;
+}
+
+/* ============== Spacing Utilities ============== */
+
+.p-0 { padding: 0; }
+.p-1 { padding: 4px; }
+.p-2 { padding: 8px; }
+.p-3 { padding: 12px; }
+.p-4 { padding: 16px; }
+.p-5 { padding: 24px; }
+.p-6 { padding: 32px; }
+.p-8 { padding: 48px; }
+
+.m-0 { margin: 0; }
+.m-1 { margin: 4px; }
+.m-2 { margin: 8px; }
+.m-3 { margin: 12px; }
+.m-4 { margin: 16px; }
+.m-5 { margin: 24px; }
+.m-6 { margin: 32px; }
+.m-8 { margin: 48px; }
+
+.mt-1 { margin-top: 4px; }
+.mt-2 { margin-top: 8px; }
+.mt-3 { margin-top: 12px; }
+.mt-4 { margin-top: 16px; }
+
+.mb-1 { margin-bottom: 4px; }
+.mb-2 { margin-bottom: 8px; }
+.mb-3 { margin-bottom: 12px; }
+.mb-4 { margin-bottom: 16px; }
+
+/* ============== Layout Utilities ============== */
+
+.flex {
+    display: flex;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.flex-between {
+    display: flex;
+    justify-content: space-between;
+}
+
+.flex-around {
+    display: flex;
+    justify-content: space-around;
+}
+
+.flex-1 {
+    flex: 1;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.h-full {
+    height: 100%;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-right {
+    text-align: right;
+}
+
+/* ============== Border Utilities ============== */
+
+.rounded {
+    border-radius: 4px;
+}
+
+.rounded-lg {
+    border-radius: 8px;
+}
+
+.rounded-xl {
+    border-radius: 16px;
+}
+
+.rounded-full {
+    border-radius: 50%;
+}
+
+.border {
+    border: 1px solid #333333;
+}
+
+.border-bottom {
+    border-bottom: 1px solid #333333;
+}
+
+/* ============== Screen Structure ============== */
+
+.screen {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: #121212;
+}
+
+.screen-content {
+    flex: 1;
+    overflow: auto;
+}
diff --git a/main.cpp b/main.cpp
index 7499e6a..1a7bedd 100644
--- a/main.cpp
+++ b/main.cpp
@@ -181,7 +181,25 @@ int main(const int argc, const char* argv[])
         return EXIT_FAILURE;
     }
 
-    const std::filesystem::path assets_path = std::filesystem::absolute(file.parent_path());
+    // Find the assets folder by checking for fonts
+    std::filesystem::path 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())
+    {
+        bool has_fonts = false;
+        for (const auto& entry : std::filesystem::directory_iterator(assets_path))
+        {
+            if (entry.path().extension() == ".ttf")
+            {
+                has_fonts = true;
+                break;
+            }
+        }
+        if (has_fonts) break;
+        assets_path = assets_path.parent_path();
+    }
+
     load_fonts(assets_path);
 
     Rml::ElementDocument* document = context->LoadDocument(file.string());
