diff --git "a/app.py" "b/app.py"
--- "a/app.py"
+++ "b/app.py"
@@ -22,9 +22,15 @@ def read_db():
     try:
         with open(DB_FILE, 'r') as f:
             return json.load(f)
-    except (FileNotFoundError, json.JSONDecodeError):
+    except FileNotFoundError:
         init_db()
         return read_db()
+    except json.JSONDecodeError:
+        return {
+            "users": {},
+            "chatrooms": {},
+            "messages": {}
+        }
 
 def write_db(data):
     with open(DB_FILE, 'w') as f:
@@ -40,7 +46,6 @@ def index():
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
         <title>Virton Messenger</title>
         <script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
-        <script src="https://unpkg.com/@tonconnect/sdk@latest/dist/tonconnect-sdk.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
         <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
         <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -60,8 +65,7 @@ def index():
                 --success-color: #28a745;
                 --error-color: #dc3545;
                 --font-family: 'Inter', sans-serif;
-                --ton-color: #007EE5;
-                --ton-color-light: #0098EE;
+                --navbar-height: 60px;
             }
 
             * {
@@ -83,7 +87,6 @@ def index():
                 height: 100vh;
                 width: 100vw;
                 display: flex;
-                flex-direction: column;
                 align-items: center;
                 justify-content: center;
             }
@@ -94,7 +97,6 @@ def index():
                 display: flex;
                 flex-direction: column;
                 transition: opacity 0.3s ease;
-                background-color: var(--bg-primary);
             }
 
             #login-view {
@@ -128,78 +130,38 @@ def index():
             }
 
             #app-view {
-                display: none; /* Managed by JS */
+                display: none;
                 width: 100%;
                 height: 100%;
                 flex-direction: column;
             }
-            
-            #content-area {
+
+            .main-content-area {
                 flex-grow: 1;
                 overflow: hidden;
-                position: relative; /* For absolute positioning of view panels if needed */
-            }
-
-            .view-panel {
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                top: 0;
-                left: 0;
-                display: none; /* Managed by JS */
-                flex-direction: column;
-                background-color: var(--bg-primary);
-                animation: fadeIn 0.3s ease;
-            }
-
-            .view-panel.active-view {
                 display: flex;
+                flex-direction: row; /* Default desktop layout */
+                height: calc(100% - var(--navbar-height));
             }
 
-            @keyframes fadeIn {
-                from { opacity: 0.8; }
-                to { opacity: 1; }
-            }
-
-            .panel-header {
-                padding: 16px;
-                background-color: var(--bg-secondary);
-                border-bottom: 1px solid var(--border-color);
+            #chatroom-list-view,
+            #users-list-view {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+                width: 100%; /* Mobile default */
                 flex-shrink: 0;
-                font-size: 1.2rem;
-                font-weight: 600;
-                text-align: center;
-            }
-
-            #chatrooms-view .panel-header,
-            #users-view .panel-header,
-            #my-profile-view .panel-header,
-            #browser-view .panel-header {
-                 display: flex;
-                 align-items: center;
-                 justify-content: center;
-            }
-
-
-            #chatrooms-view {
-                 /* Special layout for chat list + chat window on desktop */
-            }
-
-            #chatroom-list-container {
-                 width: 100%; /* Mobile default */
-                 height: 100%;
-                 display: flex; /* Mobile default */
-                 flex-direction: column;
-                 background-color: var(--bg-secondary);
-                 overflow-y: auto;
+                background-color: var(--bg-secondary);
             }
-
-            #chat-window-container {
-                 width: 100%; /* Mobile default */
-                 height: 100%;
-                 display: none; /* Mobile default, shown by JS */
-                 flex-direction: column;
-                 background-color: var(--bg-primary);
+            
+            #chat-window-view,
+            #browser-view {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+                width: 100%; /* Mobile default */
+                flex-grow: 1;
+                background-color: var(--bg-primary);
             }
 
             .list-header {
@@ -223,12 +185,12 @@ def index():
                 background-color: var(--bg-tertiary);
                 border-radius: 8px;
                 margin-bottom: 16px;
+                word-break: break-all;
             }
-            #user-wallet-summary, #user-nickname-summary {
+            #user-wallet, #user-nickname {
                 font-size: 0.9rem;
                 color: var(--text-secondary);
                 margin-bottom: 8px;
-                word-break: break-all;
             }
             
             .username-form { display: flex; gap: 8px; }
@@ -251,39 +213,27 @@ def index():
                 border-radius: 6px;
                 cursor: pointer;
                 font-weight: 500;
-                transition: transform 0.1s ease, box-shadow 0.1s ease;
+                transition: transform 0.2s ease, box-shadow 0.2s ease;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 gap: 8px;
             }
-            .action-btn:active {
-                 transform: scale(0.95);
-            }
-            .action-btn:disabled {
-                opacity: 0.5;
-                cursor: not-allowed;
+            .action-btn:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
             }
             .action-btn.small {
                 padding: 8px 12px;
                 font-size: 0.9rem;
             }
             
-            #chatroom-list {
+            #chatroom-list,
+            #users-list {
                 flex-grow: 1;
                 overflow-y: auto;
             }
-            .chatroom-item {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-                padding: 12px 16px;
-                cursor: pointer;
-                border-bottom: 1px solid var(--border-color);
-                transition: background-color 0.2s ease;
-            }
-            .chatroom-item:hover { background-color: var(--bg-hover); }
-
+            .chatroom-item,
             .user-item {
                 display: flex;
                 align-items: center;
@@ -293,9 +243,9 @@ def index():
                 border-bottom: 1px solid var(--border-color);
                 transition: background-color 0.2s ease;
             }
+            .chatroom-item:hover,
             .user-item:hover { background-color: var(--bg-hover); }
 
-
             .avatar {
                 width: 40px;
                 height: 40px;
@@ -306,18 +256,27 @@ def index():
                 font-weight: 600;
                 color: white;
                 flex-shrink: 0;
-                user-select: none;
+                font-size: 1.1rem;
             }
-            .list-item-info {
+            .chatroom-info,
+            .user-info {
                 flex-grow: 1;
                 overflow: hidden;
             }
-            .list-item-name {
+            .chatroom-name,
+            .user-nickname {
                 font-weight: 500;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
+            .user-address {
+                 font-size: 0.8rem;
+                color: var(--text-secondary);
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
             .lock-icon {
                 width: 16px;
                 height: 16px;
@@ -325,14 +284,6 @@ def index():
                 flex-shrink: 0;
             }
 
-            #chat-window-view {
-                display: none; /* Mobile default */
-                flex-direction: column;
-                height: 100%;
-                width: 100%;
-                background-color: var(--bg-primary);
-            }
-            
             .chat-header {
                 display: flex;
                 align-items: center;
@@ -346,11 +297,7 @@ def index():
                 background: none;
                 border: none;
                 cursor: pointer;
-                display: block; /* Mobile default */
-                padding: 0;
-                width: 24px;
-                height: 24px;
-                flex-shrink: 0;
+                display: block; /* Show on mobile by default */
             }
             .back-btn svg {
                 width: 24px;
@@ -360,17 +307,7 @@ def index():
             #chat-header-title {
                 font-size: 1.2rem;
                 font-weight: 600;
-                flex-grow: 1;
-                 white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
             }
-             #chat-header-avatar {
-                 width: 36px;
-                 height: 36px;
-                 font-size: 0.9rem;
-             }
-
 
             #messages-container {
                 flex-grow: 1;
@@ -387,10 +324,10 @@ def index():
                 max-width: 80%;
             }
             .message .avatar {
-                width: 32px;
-                height: 32px;
+                width: 36px;
+                height: 36px;
                 align-self: flex-end;
-                 font-size: 0.8rem;
+                font-size: 1rem;
             }
             .message-content {
                 display: flex;
@@ -405,7 +342,7 @@ def index():
                 cursor: pointer;
             }
             .message-bubble {
-                padding: 8px 12px;
+                padding: 10px 14px;
                 border-radius: 18px;
                 line-height: 1.4;
                 word-wrap: break-word;
@@ -439,7 +376,7 @@ def index():
 
             .message-form {
                 display: flex;
-                padding: 12px 16px;
+                padding: 16px;
                 gap: 12px;
                 background-color: var(--bg-secondary);
                 border-top: 1px solid var(--border-color);
@@ -459,153 +396,41 @@ def index():
             #message-input:focus { border-color: var(--accent-blue); }
 
             .send-btn {
-                width: 40px;
-                height: 40px;
+                width: 44px;
+                height: 44px;
                 border-radius: 50%;
                 flex-shrink: 0;
                 padding: 0;
             }
-            .send-btn svg { width: 18px; height: 18px; fill: white; }
+            .send-btn svg { width: 20px; height: 20px; fill: white; }
 
-            #users-list-container {
-                flex-grow: 1;
-                overflow-y: auto;
-            }
-
-            #my-profile-view .profile-details {
-                padding: 20px;
+            #browser-view .browser-url-bar {
                 display: flex;
-                flex-direction: column;
-                align-items: center;
-                gap: 16px;
-            }
-            #my-profile-view .profile-details .avatar {
-                 width: 80px;
-                 height: 80px;
-                 font-size: 2rem;
-                 margin-bottom: 10px;
-            }
-            #my-profile-view #profile-username,
-            #my-profile-view #profile-address,
-            #my-profile-view #profile-balance {
-                 width: 100%;
-                 text-align: center;
-                 word-break: break-all;
-            }
-            #my-profile-view #profile-username {
-                 font-size: 1.5rem;
-                 font-weight: 600;
-            }
-            #my-profile-view #profile-address,
-            #my-profile-view #profile-balance {
-                font-size: 1rem;
-                color: var(--text-secondary);
-            }
-            #my-profile-view #profile-balance {
-                 color: var(--ton-color-light);
-                 font-weight: 500;
-            }
-
-            #my-profile-view #profile-qr-code {
-                background: white;
-                padding: 10px;
-                margin-top: 20px;
-                width: fit-content;
-                border-radius: 8px;
-                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-            }
-            #my-profile-view .username-form {
-                 width: 100%;
-                 max-width: 300px;
-                 margin-top: 20px;
-            }
-
-
-            #browser-view iframe {
-                width: 100%;
-                flex-grow: 1;
-                border: none;
+                padding: 12px 16px;
+                gap: 8px;
+                background-color: var(--bg-secondary);
+                border-bottom: 1px solid var(--border-color);
+                flex-shrink: 0;
             }
-             #browser-address-bar {
-                 display: flex;
-                 padding: 8px 16px;
-                 background-color: var(--bg-tertiary);
-                 gap: 8px;
-             }
-            #browser-address-bar input {
+            #browser-view .browser-url-input {
                 flex-grow: 1;
                 padding: 8px 12px;
                 border: 1px solid var(--border-color);
-                background-color: var(--bg-primary);
+                background-color: var(--bg-tertiary);
                 color: var(--text-primary);
                 border-radius: 6px;
-                font-size: 0.9rem;
                 outline: none;
+                font-size: 0.9rem;
             }
-            #browser-address-bar button {
-                padding: 8px 12px;
-                background: var(--accent-blue);
-                color: white;
-                border: none;
-                border-radius: 6px;
-                cursor: pointer;
-            }
-
+            #browser-view .browser-url-input:focus { border-color: var(--accent-blue); }
 
-            #bottom-nav {
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-                height: 60px;
-                background-color: var(--bg-secondary);
-                border-top: 1px solid var(--border-color);
-                flex-shrink: 0;
-            }
-            .nav-item {
+            #browser-view iframe {
                 flex-grow: 1;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-                color: var(--text-secondary);
-                font-size: 0.7rem;
-                transition: color 0.2s ease;
-                user-select: none;
-                padding: 4px 0;
-            }
-            .nav-item svg {
-                width: 24px;
-                height: 24px;
-                fill: var(--text-secondary);
-                margin-bottom: 4px;
-                transition: fill 0.2s ease;
-            }
-            .nav-item.active {
-                color: var(--accent-blue-light);
-            }
-             .nav-item.active svg {
-                fill: var(--accent-blue-light);
+                width: 100%;
+                height: 100%;
+                border: none;
             }
 
-             .nav-item#qr-scanner-nav {
-                 position: relative;
-                 top: -15px;
-                 width: 50px;
-                 height: 50px;
-                 border-radius: 50%;
-                 background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
-                 color: white;
-                 box-shadow: 0 4px 10px rgba(0, 136, 204, 0.4);
-                 flex-grow: 0;
-                 margin: 0 10px;
-             }
-             .nav-item#qr-scanner-nav svg {
-                 fill: white;
-                 margin: 0;
-             }
-
-
             .modal-overlay {
                 position: fixed;
                 top: 0;
@@ -631,7 +456,7 @@ def index():
             }
             .modal-content h3 { margin-bottom: 20px; font-weight: 600; font-size: 1.3rem; }
             .modal-content label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: var(--text-secondary); }
-            .modal-content input {
+            .modal-content input:not([type="checkbox"]) {
                 width: 100%;
                 padding: 12px;
                 margin-bottom: 16px;
@@ -642,18 +467,38 @@ def index():
                 font-size: 1rem;
             }
             .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
+            .modal-actions.column { flex-direction: column; align-items: stretch; }
             .modal-btn {
                 padding: 10px 20px;
                 border-radius: 6px;
                 border: none;
                 cursor: pointer;
                 font-weight: 500;
+                text-align: center;
             }
             .secondary-btn { background-color: var(--bg-hover); color: white; }
             
+            #profile-modal .modal-content { text-align: center; }
+            #profile-avatar-container { margin: 20px auto; display: inline-block; }
+            #profile-username { font-size: 1.2rem; font-weight: 600; }
+            #profile-address { color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 8px; }
+            #profile-qr-code { background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px; }
+            #profile-modal .caption { text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-top: -10px; margin-bottom: 20px; }
+            #profile-balance { margin-top: 16px; font-size: 1rem; color: var(--text-secondary); }
+
+
+            #scanner-modal .modal-content { text-align: center; }
+            #qr-reader {
+                width: 100%;
+                border: 1px solid var(--border-color);
+                margin-top: 16px;
+                border-radius: 8px;
+                overflow: hidden;
+            }
+
             #status-bar {
                 position: fixed;
-                bottom: 70px; /* Above nav bar */
+                bottom: calc(var(--navbar-height) + 20px); /* Position above navbar */
                 left: 50%;
                 transform: translateX(-50%);
                 background-color: var(--bg-tertiary);
@@ -666,19 +511,77 @@ def index():
                 transition: opacity 0.3s, visibility 0.3s;
                 z-index: 2000;
                 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
-                max-width: 90%;
-                word-break: break-word;
             }
             #status-bar.success { background-color: var(--success-color); }
             #status-bar.error { background-color: var(--error-color); }
             #status-bar.visible { opacity: 1; visibility: visible; }
 
-            /* Desktop Layout */
+            .navbar {
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                height: var(--navbar-height);
+                background-color: var(--bg-secondary);
+                border-top: 1px solid var(--border-color);
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                z-index: 900;
+            }
+            .navbar-item {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                flex-grow: 1;
+                height: 100%;
+                color: var(--text-secondary);
+                font-size: 0.75rem;
+                cursor: pointer;
+                transition: color 0.2s ease;
+            }
+             .navbar-item:hover {
+                 color: var(--text-primary);
+             }
+            .navbar-item.active {
+                color: var(--accent-blue-light);
+            }
+            .navbar-item svg {
+                width: 24px;
+                height: 24px;
+                margin-bottom: 4px;
+                fill: currentColor; /* Use parent color */
+            }
+            .navbar-item.scan-qr-item {
+                 position: relative;
+                 top: -15px; /* Lift button slightly */
+                 width: 50px;
+                 height: 50px;
+                 background: linear-gradient(45deg, var(--accent-blue), var(--accent-blue-light));
+                 border-radius: 50%;
+                 box-shadow: 0 5px 15px rgba(0, 136, 204, 0.3);
+                 color: white;
+                 display: flex;
+                 align-items: center;
+                 justify-content: center;
+                 font-size: 0; /* Hide text */
+                 flex-grow: 0;
+             }
+             .navbar-item.scan-qr-item svg {
+                 margin-bottom: 0;
+                 width: 28px;
+                 height: 28px;
+             }
+             .navbar-item.scan-qr-item:hover {
+                 color: white; /* Keep color white on hover */
+                 transform: translateY(-2px);
+                 box-shadow: 0 7px 20px rgba(0, 136, 204, 0.4);
+             }
+
+
+            /* Desktop Styles */
             @media (min-width: 768px) {
-                body {
-                     padding: 20px;
-                     background-color: var(--bg-secondary);
-                }
                 .main-container {
                     max-width: 1100px;
                     max-height: 800px;
@@ -686,68 +589,50 @@ def index():
                     overflow: hidden;
                     box-shadow: 0 10px 40px rgba(0,0,0,0.3);
                     border: 1px solid var(--border-color);
-                    flex-direction: row;
-                }
-
-                #login-view {
-                     border-radius: 12px;
                 }
 
                 #app-view {
-                    flex-direction: row;
+                    flex-direction: column; /* Keep column for desktop */
                 }
 
-                 #bottom-nav {
-                     display: none; /* Hide bottom nav on desktop */
-                 }
-
-                #content-area {
-                     flex-direction: row; /* Layout views side-by-side or within a split */
-                     position: static; /* No absolute positioning */
+                .main-content-area {
+                    flex-direction: row; /* Desktop layout */
+                    height: 100%; /* Desktop uses split view, not offset by navbar */
                 }
 
-                 .view-panel {
-                     position: static; /* No absolute positioning */
-                     width: 100%; /* Takes full content width by default */
-                 }
-
-                 #chatrooms-view.active-view {
-                    display: flex; /* Ensure flex for split */
-                    flex-direction: row; /* Arrange list and window side by side */
-                 }
-
-                #chatroom-list-container {
-                    width: 320px; /* Fixed width for list */
+                #chatroom-list-view,
+                #users-list-view {
+                    width: 320px;
                     flex-shrink: 0;
                     border-right: 1px solid var(--border-color);
-                    display: flex; /* Always visible */
+                    display: flex !important; /* Always show list on desktop */
                 }
 
-                #chat-window-container {
-                    width: auto; /* Take remaining space */
-                    flex-grow: 1;
-                    display: flex; /* Always visible */
-                }
+                 #chat-window-view {
+                     width: auto;
+                     flex-grow: 1;
+                     display: flex !important; /* Always show chat on desktop */
+                 }
 
-                .back-btn {
-                    display: none !important; /* Hide back button on desktop */
-                }
+                 #browser-view {
+                     width: auto;
+                     flex-grow: 1;
+                     display: flex !important; /* Always show browser when active */
+                 }
 
-                .chat-header #chat-header-title {
-                     text-align: left;
-                }
-                .chat-header {
-                     justify-content: flex-start;
-                }
+                .back-btn { display: none !important; } /* Hide back button on desktop */
 
-                #users-view.active-view,
-                #browser-view.active-view,
-                #my-profile-view.active-view {
-                     display: flex; /* These views take the full content area */
-                }
+                .navbar {
+                     position: static; /* Navbar is integrated into layout or hidden on desktop */
+                     height: 0; /* Make navbar height 0 to not take space */
+                     border-top: none;
+                 }
+                .navbar-item {
+                     display: none; /* Hide navbar items on desktop */
+                 }
 
                  #status-bar {
-                     bottom: 20px; /* Move back to bottom */
+                     bottom: 20px; /* Move status bar down on desktop */
                  }
             }
         </style>
@@ -762,110 +647,100 @@ def index():
         </div>
 
         <div id="app-view" class="main-container">
-            <div id="content-area">
-
-                <div id="chatrooms-view" class="view-panel active-view">
-                    <div id="chatroom-list-container">
-                        <div class="list-header">
-                            <div class="list-header-top">
-                                <h2>Чаты</h2>
-                                <div style="display: flex; align-items: center; gap: 8px;">
-                                    <button id="create-room-show-modal" class="action-btn small">
-                                        <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-                                        <span>Новый</span>
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="user-profile-summary">
-                                <div id="user-wallet-summary"></div>
-                                <div id="user-nickname-summary"></div>
-                            </div>
-                        </div>
-                        <div id="chatroom-list">
-                            <!-- Chatroom items will be loaded here -->
-                        </div>
-                    </div>
-
-                    <div id="chat-window-container">
-                        <div id="chat-placeholder" class="chat-placeholder">
-                            <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
-                            <h2>Выберите чат</h2>
-                            <p>Начните общение в одном из существующих чатов или создайте свой собственный.</p>
-                        </div>
-                        <div id="active-chat" style="display: none; width: 100%; height: 100%; flex-direction: column;">
-                            <div class="chat-header">
-                                <button class="back-btn" id="back-to-list-btn">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+            <div class="main-content-area">
+                <!-- Views go here -->
+                <div id="chatroom-list-view" class="app-view-content">
+                    <div class="list-header">
+                        <div class="list-header-top">
+                            <h2>Чаты</h2>
+                            <div style="display: flex; align-items: center; gap: 8px;">
+                                <button id="create-room-show-modal" class="action-btn small">
+                                    <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+                                    <span>Новый</span>
                                 </button>
-                                <div id="chat-header-avatar" class="avatar"></div>
-                                <span id="chat-header-title"></span>
                             </div>
-                            <div id="messages-container"></div>
-                            <form id="message-form" class="message-form">
-                                <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off">
-                                <button type="submit" class="action-btn send-btn" id="send-btn">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
-                                </button>
-                            </form>
                         </div>
+                        <div class="user-profile-summary">
+                             <div id="user-wallet"></div>
+                             <div id="user-nickname"></div>
+                             <form class="username-form" id="username-form">
+                                 <input type="text" id="username-input" class="username-input" placeholder="Установить никнейм" autocomplete="off">
+                                 <button type="submit" class="action-btn small">✓</button>
+                             </form>
+                         </div>
                     </div>
+                    <div id="chatroom-list"></div>
                 </div>
 
-                <div id="users-view" class="view-panel">
-                    <div class="panel-header">Пользователи</div>
-                    <div id="users-list-container">
-                        <!-- User items will be loaded here -->
-                    </div>
-                </div>
-
-                <div id="browser-view" class="view-panel">
-                    <div class="panel-header">Браузер</div>
-                     <form id="browser-address-bar">
-                         <input type="text" id="browser-url-input" value="https://www.google.com" placeholder="Введите URL">
-                         <button type="submit">Перейти</button>
-                     </form>
-                    <iframe id="browser-iframe" src="https://www.google.com" sandbox="allow-same-origin allow-forms allow-popups allow-scripts allow-downloads allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-sequences allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"></iframe>
-                </div>
+                <div id="users-list-view" class="app-view-content" style="display: none;">
+                     <div class="list-header">
+                         <div class="list-header-top">
+                             <h2>Пользователи</h2>
+                         </div>
+                     </div>
+                     <div id="users-list">
+                         <!-- User items will be rendered here -->
+                     </div>
+                 </div>
 
-                <div id="my-profile-view" class="view-panel">
-                    <div class="panel-header">Мой профиль</div>
-                    <div class="profile-details">
-                        <div id="my-profile-avatar" class="avatar"></div>
-                        <p id="my-profile-username"></p>
-                        <p id="my-profile-address"></p>
-                        <p id="my-profile-balance"></p>
-                         <form class="username-form" id="my-profile-username-form">
-                             <input type="text" id="my-profile-username-input" class="username-input" placeholder="Установить никнейм" autocomplete="off">
-                             <button type="submit" class="action-btn small">✓</button>
+                <div id="chat-window-view" class="app-view-content">
+                     <div id="chat-placeholder" class="chat-placeholder">
+                         <img src="https://ton.org/download/ton_symbol.svg" alt="TON Symbol">
+                         <h2>Выберите чат</h2>
+                         <p>Начните общение в одном из существующих чатов или создайте свой собственный.</p>
+                     </div>
+                     <div id="active-chat" style="display: none; width: 100%; height: 100%; flex-direction: column;">
+                         <div class="chat-header">
+                             <button class="back-btn" id="back-to-list-btn">
+                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+                             </button>
+                             <div id="chat-header-avatar" class="avatar"></div>
+                             <span id="chat-header-title"></span>
+                         </div>
+                         <div id="messages-container"></div>
+                         <form id="message-form" class="message-form">
+                             <input type="text" id="message-input" placeholder="Сообщение..." autocomplete="off">
+                             <button type="submit" class="action-btn send-btn" id="send-btn">
+                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
+                             </button>
                          </form>
-                         <div id="my-profile-qr-code" style="background: white; padding: 10px; margin-top: 20px; width: fit-content; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"></div>
-                         <p style="text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-top: -10px;">Отсканируйте для быстрого добавления</p>
+                     </div>
+                 </div>
+
+                <div id="browser-view" class="app-view-content" style="display: none;">
+                    <div class="browser-url-bar">
+                        <input type="text" id="browser-url-input" class="browser-url-input" placeholder="Введите URL или поиск Google">
+                        <button id="browser-go-btn" class="action-btn small">Перейти</button>
                     </div>
+                    <iframe id="browser-iframe" src="https://www.google.com" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"></iframe>
                 </div>
 
             </div>
 
-            <nav id="bottom-nav">
-                 <div class="nav-item active" data-view="chatrooms-view">
-                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
+            <!-- Navbar -->
+            <div class="navbar">
+                 <div class="navbar-item active" data-view="chats">
+                     <svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
                      <span>Чаты</span>
                  </div>
-                 <div class="nav-item" data-view="users-view">
-                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-4 0c1.66 0 2.99-1.34 2.99-3S13.66 5 12 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-1.33 2.88c-.31.78-1.05 1.32-1.91 1.43C7.89 14.53 6.9 14.5 6 14.5c-.9 0-1.89.03-2.76.71-.86.11-1.6.65-1.91 1.43-.51 1.29-.75 2.63-.75 3.98V21c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-1.2c0-1.35-.24-2.69-.74-3.92zM18 13.88c-.31.78-1.05 1.32-1.91 1.43-.87.11-1.86.08-2.73-.69-.02-.01-.03-.02-.04-.03.88-.76 1.89-1.19 2.94-1.19h1.14c.91 0 1.77.16 2.5.45.15.06.29.14.42.23.01.01.02.01.03.02.01.01.02.02.02.03.01.01.01.02.02.03.01.01.01.02.02.03.01.01.01.02.02.03.01.01.01.02.02.03.01.01.01.02.02.03-.5 1.23-.74 2.57-.74 3.92V21c0 .55.45 1 1 1h1.45c.28 0 .5-.22.5-.5s-.22-.5-.5-.5H21v-1.2c0-1.35-.24-2.69-.74-3.92z"/></svg>
-                    <span>Юзеры</span>
+                 <div class="navbar-item" data-view="users">
+                     <svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 7V3c-2.21 0-4-1.79-4-4H8c-2.21 0-4 1.79-4 4v4c-1.1 0-2 .9-2 2v5c0 .55.45 1 1 1h.18l-.68 3.85c-.19 1.09.9 2.17 2 1.92l1.46-.32L8.87 22h6.26l1.66.37 1.46.32c1.1.25 2.19-.83 2-1.92L20.82 15H21c.55 0 1-.45 1-1V9c0-1.1-.9-2-2-2zM6 15v-5h2v5H6zm7 0v-5h-3V7c0-.55-.45-1-1-1s-1 .45-1 1v8h-2v-5H9v5h2v-4h2v4h2v-5h2v5h-2z"/></svg>
+                     <span>Юзеры</span>
                  </div>
-                 <div class="nav-item" id="qr-scanner-nav">
-                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm8-12v8h8V3h-8zm6 6h-4V5h4v4zm-2 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
+                 <div class="navbar-item scan-qr-item" data-view="scan">
+                      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zm8-12v8h8V3h-8zm6 6h-4V5h4v4zm-2 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
+                     <span>QR</span>
                  </div>
-                 <div class="nav-item" data-view="browser-view">
-                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5-5h2v-2H7v2zm3 0h2v-2h-2v2zm5 0h2v-2h-2v2zM7 13h2v-2H7v2zm3 0h2v-2h-2v2zm5 0h2v-2h-2v2zM7 11h2V9H7v2zm3 0h2V9h-2v2zm5 0h2V9h-2v2z"/></svg>
+                 <div class="navbar-item" data-view="browser">
+                      <svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14l-4-4 1.41-1.41L10 13.17l6.59-6.59L18 8l-8 8z"/></svg>
                      <span>Браузер</span>
                  </div>
-                 <div class="nav-item" data-view="my-profile-view">
-                     <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                 <div class="navbar-item" data-view="profile">
+                     <svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                      <span>Профиль</span>
                  </div>
-            </nav>
+             </div>
+
         </div>
         
         <div id="create-room-modal" class="modal-overlay">
@@ -899,14 +774,15 @@ def index():
         </div>
 
         <div id="profile-modal" class="modal-overlay">
-            <div class="modal-content" style="text-align: center;">
+            <div class="modal-content">
                 <h3 id="profile-modal-title">Профиль пользователя</h3>
                 <div id="profile-avatar-container" style="margin: 20px auto; display: inline-block;"></div>
                 <p id="profile-username" style="font-size: 1.2rem; font-weight: 600;"></p>
                 <p id="profile-address" style="color: var(--text-secondary); font-size: 0.9rem; word-break: break-all; margin-top: 8px;"></p>
+                <p id="profile-balance"></p>
                 <div id="profile-qr-code" style="background: white; padding: 10px; margin: 20px auto; width: fit-content; border-radius: 8px;"></div>
-                <p style="text-align: center; color: var(--text-secondary); font-size: 0.8rem; margin-top: -10px; margin-bottom: 20px;">Отсканируйте для открытия профиля</p>
-                <div class="modal-actions" style="flex-direction: column; gap: 12px; align-items: stretch;">
+                <p class="caption">Отсканируйте для открытия профиля</p>
+                <div class="modal-actions column">
                     <button id="send-ton-btn" class="modal-btn action-btn">Отправить TON</button>
                     <button id="profile-close-btn" class="modal-btn secondary-btn">Закрыть</button>
                 </div>
@@ -916,7 +792,7 @@ def index():
         <div id="scanner-modal" class="modal-overlay">
             <div class="modal-content">
                 <h3>Сканировать QR-код</h3>
-                <div id="qr-reader" style="width: 100%; border: 1px solid var(--border-color); margin-top: 16px; border-radius: 8px; overflow: hidden;"></div>
+                <div id="qr-reader"></div>
                 <div class="modal-actions">
                     <button id="scanner-close-btn" class="modal-btn secondary-btn">Отмена</button>
                 </div>
@@ -936,35 +812,25 @@ def index():
                 let activeChatroomId = null;
                 let messagePollingInterval = null;
                 let chatroomsData = {};
-                let usersData = {};
                 let html5QrCode = null;
-                let profileQrCodeInstance = null;
-                let myProfileQrCodeInstance = null;
-
+                let profileQrCode = null;
+                
                 const loginView = document.getElementById('login-view');
                 const appView = document.getElementById('app-view');
-                const contentView = document.getElementById('content-area');
-
-                const chatroomsView = document.getElementById('chatrooms-view');
-                const chatroomListContainer = document.getElementById('chatroom-list-container');
-                const chatWindowContainer = document.getElementById('chat-window-container');
+                const mainContentArea = document.querySelector('.main-content-area');
+                const chatroomListView = document.getElementById('chatroom-list-view');
+                const usersListView = document.getElementById('users-list-view');
+                const chatWindowView = document.getElementById('chat-window-view');
+                const browserView = document.getElementById('browser-view');
                 const chatPlaceholder = document.getElementById('chat-placeholder');
                 const activeChat = document.getElementById('active-chat');
-                const backToListBtn = document.getElementById('back-to-list-btn');
-
-                const usersView = document.getElementById('users-view');
-                const browserView = document.getElementById('browser-view');
-                const myProfileView = document.getElementById('my-profile-view');
-
-                const navItems = document.querySelectorAll('.nav-item');
-                const createRoomModal = document.getElementById('create-room-modal');
-                const passwordModal = document.getElementById('password-modal');
                 const profileModal = document.getElementById('profile-modal');
                 const scannerModal = document.getElementById('scanner-modal');
-                const browserIframe = document.getElementById('browser-iframe');
+                const navbarItems = document.querySelectorAll('.navbar-item');
                 const browserUrlInput = document.getElementById('browser-url-input');
+                const browserIframe = document.getElementById('browser-iframe');
 
-                const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292', '#a1887f', '#ff8a65', '#ba68c8'];
+                const AVATAR_COLORS = ['#e57373', '#81c784', '#64b5f6', '#ffb74d', '#9575cd', '#4db6ac', '#f06292'];
 
                 const getAvatar = (name) => {
                     const initial = (name ? name[0] : '?').toUpperCase();
@@ -1004,86 +870,22 @@ def index():
                 };
                 
                 const truncateAddress = (address) => address ? `${address.substring(0, 4)}...${address.substring(address.length - 4)}` : '';
-                const formatTonAmount = (nanotons) => {
-                     if (nanotons === null) return 'Баланс недоступен';
-                     try {
-                         // Use TON SDK utility if available, otherwise basic division
-                         if (typeof window.TonWeb !== 'undefined' && window.TonWeb.utils && window.TonWeb.utils.fromNano) {
-                            return `${parseFloat(window.TonWeb.utils.fromNano(nanotons)).toFixed(2)} TON`;
-                         } else {
-                            return `${(parseInt(nanotons) / 1_000_000_000).toFixed(2)} TON`;
-                         }
-                     } catch (e) {
-                          console.error("Failed to format TON amount:", e);
-                          return `${nanotons} nanoTON`;
-                     }
-                };
 
-                const updateUserInfoSummary = () => {
-                    document.getElementById('user-wallet-summary').textContent = `Кошелек: ${truncateAddress(currentUser.address)}`;
-                    document.getElementById('user-nickname-summary').textContent = currentUser.username ? `Ник: ${currentUser.username}` : `Никнейм не установлен`;
+                const updateUserInfo = () => {
+                    document.getElementById('user-wallet').textContent = `Кошелек: ${truncateAddress(currentUser.address)}`;
+                    const nicknameEl = document.getElementById('user-nickname');
+                    const usernameInput = document.getElementById('username-input');
+                    nicknameEl.textContent = currentUser.username ? `Ник: ${currentUser.username}` : `Никнейм не установлен`;
+                    usernameInput.value = currentUser.username || '';
                 };
-
-                const updateMyProfileView = async () => {
-                     const profileAvatarEl = document.getElementById('my-profile-avatar');
-                     const usernameEl = document.getElementById('my-profile-username');
-                     const addressEl = document.getElementById('my-profile-address');
-                     const balanceEl = document.getElementById('my-profile-balance');
-                     const usernameInput = document.getElementById('my-profile-username-input');
-                     const qrCodeEl = document.getElementById('my-profile-qr-code');
-
-                     profileAvatarEl.innerHTML = '';
-                     profileAvatarEl.appendChild(getAvatar(currentUser.username || currentUser.address));
-
-                     usernameEl.textContent = currentUser.username || 'Никнейм не установлен';
-                     addressEl.textContent = currentUser.address;
-
-                     if (tonConnectUI.wallet && tonConnectUI.wallet.account) {
-                          try {
-                            // Fetch balance if needed, or rely on wallet status change data
-                            // For simplicity, let's use the balance from wallet status if available
-                            const balance = tonConnectUI.wallet.account.balance; // This is nanoTON string
-                            currentUser.balance = balance;
-                            balanceEl.textContent = `Баланс: ${formatTonAmount(balance)}`;
-                          } catch (e) {
-                            console.error("Failed to get balance:", e);
-                             balanceEl.textContent = `Баланс: Недоступно`;
-                          }
-                     } else {
-                          balanceEl.textContent = `Баланс: Подключите кошелек`;
-                     }
-
-
-                     usernameInput.value = currentUser.username || '';
-
-                     qrCodeEl.innerHTML = '';
-                     if (myProfileQrCodeInstance) {
-                         myProfileQrCodeInstance.clear();
-                     }
-                     if (currentUser.address) {
-                         myProfileQrCodeInstance = new QRCode(qrCodeEl, {
-                             text: currentUser.address,
-                             width: 150,
-                             height: 150,
-                             colorDark : "#000000",
-                             colorLight : "#ffffff",
-                             correctLevel : QRCode.CorrectLevel.H
-                         });
-                     }
-                };
-
-                document.getElementById('my-profile-username-form').addEventListener('submit', async (e) => {
+                
+                document.getElementById('username-form').addEventListener('submit', async (e) => {
                     e.preventDefault();
-                    const newUsername = document.getElementById('my-profile-username-input').value.trim();
-                    if (!newUsername || newUsername.length < 3) {
-                        showStatus('Никнейм должен быть не короче 3 символов.', 'error');
+                    const newUsername = document.getElementById('username-input').value.trim();
+                    if (!newUsername || newUsername.length < 3 || newUsername.length > 20) {
+                        showStatus('Никнейм должен быть от 3 до 20 символов.', 'error');
                         return;
                     }
-                    if (newUsername.length > 20) {
-                         showStatus('Никнейм должен быть не длиннее 20 символов.', 'error');
-                         return;
-                    }
-
                     try {
                         await apiCall('/api/set_username', {
                             method: 'POST',
@@ -1091,17 +893,28 @@ def index():
                             body: JSON.stringify({ address: currentUser.address, username: newUsername })
                         });
                         currentUser.username = newUsername;
-                        updateUserInfoSummary();
-                        updateMyProfileView();
+                        updateUserInfo();
                         showStatus('Никнейм успешно обновлен!', 'success');
-                        fetchChatrooms(); // Update chat list names
-                        if (activeChatroomId) fetchMessages(activeChatroomId); // Update sender names in chat
+                        fetchChatrooms();
+                        fetchUsers(); // Update users list as well
+                        if (activeChatroomId) fetchMessages(activeChatroomId);
                     } catch (err) {}
                 });
 
-                const initializeUser = async (wallet) => {
-                    currentUser.address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false);
-                     currentUser.balance = wallet.account.balance; // Store initial balance from wallet
+                const initializeUser = async (address) => {
+                    currentUser.address = address;
+                     if (tonConnectUI.wallet && tonConnectUI.wallet.account) {
+                         try {
+                            const balance = await tonConnectUI.getBalance();
+                            currentUser.balance = balance / 1e9; // Convert nanoton to ton
+                            console.log("Balance:", currentUser.balance);
+                         } catch (e) {
+                            console.error("Failed to get balance:", e);
+                            currentUser.balance = null;
+                         }
+                     }
+
+
                     try {
                         const data = await apiCall('/api/user_data', {
                             method: 'POST',
@@ -1110,20 +923,15 @@ def index():
                         });
                         currentUser.username = data.username;
                     } catch (err) {
-                        currentUser.username = null; // User not found in DB or error
+                        currentUser.username = null;
                     }
-                    
-                    updateUserInfoSummary();
-                    updateMyProfileView();
-
+                    updateUserInfo();
                     loginView.style.display = 'none';
                     appView.style.display = 'flex';
                     
-                    // Ensure default view is chats and handle responsiveness
-                    handleResize();
-                    navigateToView('chatrooms-view');
-
+                    switchView('chats'); // Default view after login
                     fetchChatrooms();
+                    fetchUsers(); // Fetch users list on login
                 };
 
                 const renderChatrooms = (rooms) => {
@@ -1139,9 +947,9 @@ def index():
                         item.appendChild(getAvatar(room.name));
 
                         const infoDiv = document.createElement('div');
-                        infoDiv.className = 'list-item-info';
+                        infoDiv.className = 'chatroom-info';
                         const nameSpan = document.createElement('div');
-                        nameSpan.className = 'list-item-name';
+                        nameSpan.className = 'chatroom-name';
                         nameSpan.textContent = room.name;
                         infoDiv.appendChild(nameSpan);
                         item.appendChild(infoDiv);
@@ -1161,34 +969,30 @@ def index():
                     try {
                         const data = await apiCall('/api/chatrooms');
                         renderChatrooms(data.chatrooms);
-                    } catch (err) {
-                        // Errors are shown in status bar
-                    }
+                    } catch (err) {}
                 };
 
                 const renderUsers = (users) => {
-                     const list = document.getElementById('users-list-container');
+                     const list = document.getElementById('users-list');
                      list.innerHTML = '';
-                     usersData = {};
                      users.forEach(user => {
-                         usersData[user.address] = user;
                          const item = document.createElement('div');
                          item.className = 'user-item';
                          item.dataset.address = user.address;
 
-                         item.appendChild(getAvatar(user.username || user.address));
+                         item.appendChild(getAvatar(user.username || truncateAddress(user.address)));
 
                          const infoDiv = document.createElement('div');
-                         infoDiv.className = 'list-item-info';
-                         const nameSpan = document.createElement('div');
-                         nameSpan.className = 'list-item-name';
-                         nameSpan.textContent = user.username || truncateAddress(user.address);
-                         infoDiv.appendChild(nameSpan);
+                         infoDiv.className = 'user-info';
+
+                         const nicknameSpan = document.createElement('div');
+                         nicknameSpan.className = 'user-nickname';
+                         nicknameSpan.textContent = user.username || `User ${truncateAddress(user.address)}`;
+                         infoDiv.appendChild(nicknameSpan);
 
                          const addressSpan = document.createElement('div');
-                         addressSpan.style.fontSize = '0.8rem';
-                         addressSpan.style.color = 'var(--text-secondary)';
-                         addressSpan.textContent = truncateAddress(user.address);
+                         addressSpan.className = 'user-address';
+                         addressSpan.textContent = user.address;
                          infoDiv.appendChild(addressSpan);
 
                          item.appendChild(infoDiv);
@@ -1196,17 +1000,14 @@ def index():
                          item.addEventListener('click', () => showProfile(user.address));
                          list.appendChild(item);
                      });
-                };
-
-                const fetchUsers = async () => {
-                    try {
-                        const data = await apiCall('/api/users');
-                        renderUsers(data.users);
-                    } catch (err) {
-                        // Errors are shown in status bar
-                    }
-                };
+                 };
 
+                 const fetchUsers = async () => {
+                     try {
+                         const data = await apiCall('/api/users');
+                         renderUsers(data.users);
+                     } catch (err) {}
+                 };
 
                 const renderMessages = (messages) => {
                     const container = document.getElementById('messages-container');
@@ -1241,8 +1042,8 @@ def index():
                         container.appendChild(msgDiv);
                     });
 
-                    if(shouldScroll || messages.length < 10) { // Scroll to bottom on initial load or new messages if already at bottom
-                         container.scrollTop = container.scrollHeight;
+                    if(shouldScroll) {
+                        container.scrollTop = container.scrollHeight;
                     }
                 };
                 
@@ -1252,50 +1053,143 @@ def index():
                         const data = await apiCall(`/api/messages/${roomId}`);
                         renderMessages(data.messages);
                     } catch (err) {
-                        // Errors are shown in status bar
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
                     }
                 };
+                
+                const switchView = (viewName) => {
+                    const views = {
+                         chats: chatroomListView,
+                         users: usersListView,
+                         chat: chatWindowView, // This is a secondary view managed by selectChatroom
+                         browser: browserView
+                    };
+
+                    // Hide all main content views
+                    Object.values(views).forEach(view => {
+                         if (view) view.style.display = 'none';
+                    });
 
-                const showChatWindow = () => {
-                    if (window.innerWidth < 768) {
-                        chatroomListContainer.style.display = 'none';
-                        chatWindowContainer.style.display = 'flex';
+                    // Handle desktop layout where chat list is always visible
+                    const isDesktop = window.innerWidth >= 768;
+
+                    if (viewName === 'chats') {
+                        chatroomListView.style.display = 'flex';
+                        if (!activeChatroomId) { // If no chat is selected, show placeholder in chat window
+                             chatWindowView.style.display = 'flex'; // Ensure chat window area is visible
+                             chatPlaceholder.style.display = 'flex';
+                             activeChat.style.display = 'none';
+                        } else { // If a chat is active, show it
+                             selectChatroom(activeChatroomId, chatroomsData[activeChatroomId]?.is_private, false); // Re-show active chat without password prompt
+                        }
+                         // Stop message polling when leaving the active chat window view
+                        if (messagePollingInterval) clearInterval(messagePollingInterval);
+                        messagePollingInterval = null;
+
+                    } else if (viewName === 'users') {
+                         usersListView.style.display = 'flex';
+                         // On mobile, hide the chat window area
+                         if (!isDesktop) chatWindowView.style.display = 'none';
+                         if (messagePollingInterval) clearInterval(messagePollingInterval);
+                         messagePollingInterval = null;
+
+                    } else if (viewName === 'browser') {
+                         browserView.style.display = 'flex';
+                         // On mobile, hide the chat window area
+                         if (!isDesktop) chatWindowView.style.display = 'none';
+                         if (messagePollingInterval) clearInterval(messagePollingInterval);
+                         messagePollingInterval = null;
+
+                    } else if (viewName === 'scan') {
+                         showScanner(); // Open scanner modal
+                         // Revert navbar active state as modal is temporary
+                         const activeNav = document.querySelector('.navbar-item.active');
+                         if (activeNav) activeNav.classList.remove('active');
+                         const currentViewName = document.querySelector('.main-content-area > .app-view-content[style*="display: flex"]').dataset.viewName;
+                         const currentNavItem = document.querySelector(`.navbar-item[data-view="${currentViewName}"]`);
+                         if(currentNavItem) currentNavItem.classList.add('active');
+                         return; // Don't update active state below
+                    } else if (viewName === 'profile') {
+                         if (currentUser.address) showProfile(currentUser.address); // Open profile modal
+                         // Revert navbar active state
+                         const activeNav = document.querySelector('.navbar-item.active');
+                         if (activeNav) activeNav.classList.remove('active');
+                         const currentViewElement = document.querySelector('.main-content-area > .app-view-content[style*="display: flex"]');
+                         const currentView = currentViewElement ? currentViewElement.dataset.viewName : 'chats'; // Default to chats if none active
+                         const currentNavItem = document.querySelector(`.navbar-item[data-view="${currentView}"]`);
+                         if(currentNavItem) currentNavItem.classList.add('active');
+                         return; // Don't update active state below
+                    } else {
+                         // Handle switching FROM chat window back to list on mobile
+                         if (isDesktop) {
+                             // Do nothing, list is always visible
+                         } else {
+                             chatroomListView.style.display = 'flex';
+                             chatWindowView.style.display = 'none';
+                         }
+                         viewName = 'chats'; // Ensure correct navbar item is active
+                         if (messagePollingInterval) clearInterval(messagePollingInterval);
+                         messagePollingInterval = null;
                     }
-                     // On desktop, both are always visible (controlled by CSS media query)
-                };
 
-                const hideChatWindow = () => {
-                     if (window.innerWidth < 768) {
-                         chatroomListContainer.style.display = 'flex';
-                         chatWindowContainer.style.display = 'none';
-                     }
-                     // On desktop, both remain visible
-                }
 
-                const selectChatroom = (roomId, isPrivate) => {
+                    // Update active navbar item
+                    navbarItems.forEach(item => item.classList.remove('active'));
+                    const targetNavItem = document.querySelector(`.navbar-item[data-view="${viewName}"]`);
+                    if (targetNavItem) {
+                        targetNavItem.classList.add('active');
+                        mainContentArea.dataset.activeView = viewName; // Store active view name
+                    } else {
+                         // If we switched from chat window back to list, activate chats item
+                         document.querySelector('.navbar-item[data-view="chats"]').classList.add('active');
+                         mainContentArea.dataset.activeView = 'chats';
+                    }
+                };
+
+                const selectChatroom = (roomId, isPrivate, checkPassword = true) => {
                     const roomData = chatroomsData[roomId];
-                    if (!roomData) return;
+                    if (!roomData) {
+                         showStatus('Чат не найден.', 'error');
+                         return;
+                    }
 
                     const proceedToRoom = () => {
-                        if (messagePollingInterval) clearInterval(messagePollingInterval);
-                        activeChatroomId = roomId;
-                        
-                        document.getElementById('chat-header-title').textContent = roomData.name;
-                        const headerAvatar = document.getElementById('chat-header-avatar');
-                        headerAvatar.innerHTML = '';
-                        headerAvatar.appendChild(getAvatar(roomData.name));
+                         if (messagePollingInterval) clearInterval(messagePollingInterval);
+                         activeChatroomId = roomId;
+
+                         // Ensure chat window view is visible
+                         chatWindowView.style.display = 'flex';
+                         chatPlaceholder.style.display = 'none';
+                         activeChat.style.display = 'flex';
+
+                         // Hide list view on mobile
+                         if (window.innerWidth < 768) {
+                             chatroomListView.style.display = 'none';
+                         }
 
-                        chatPlaceholder.style.display = 'none';
-                        activeChat.style.display = 'flex';
 
-                        showChatWindow();
+                         document.getElementById('chat-header-title').textContent = roomData.name;
+                         const headerAvatar = document.getElementById('chat-header-avatar');
+                         headerAvatar.innerHTML = '';
+                         headerAvatar.appendChild(getAvatar(roomData.name));
 
-                        fetchMessages(roomId);
-                        messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
+                         fetchMessages(roomId);
+                         messagePollingInterval = setInterval(() => fetchMessages(roomId), 3000);
+
+                         // Ensure 'chats' navbar item is active if not already
+                         const activeNav = document.querySelector('.navbar-item.active');
+                         if (activeNav && activeNav.dataset.view !== 'chats') {
+                              activeNav.classList.remove('active');
+                              document.querySelector('.navbar-item[data-view="chats"]').classList.add('active');
+                              mainContentArea.dataset.activeView = 'chats';
+                         } else if (!activeNav) {
+                              document.querySelector('.navbar-item[data-view="chats"]').classList.add('active');
+                              mainContentArea.dataset.activeView = 'chats';
+                         }
                     };
                     
-                    if (isPrivate) {
+                    if (isPrivate && checkPassword) {
+                        const passwordModal = document.getElementById('password-modal');
                         const passwordForm = document.getElementById('password-form');
                         const passwordInput = document.getElementById('password-input');
                         passwordModal.style.display = 'flex';
@@ -1305,8 +1199,6 @@ def index():
                         const formSubmitHandler = async (e) => {
                             e.preventDefault();
                             passwordForm.removeEventListener('submit', formSubmitHandler);
-                            document.getElementById('password-cancel').removeEventListener('click', passwordCancelHandler);
-
                             const password = passwordInput.value;
                             passwordModal.style.display = 'none';
                             try {
@@ -1316,17 +1208,16 @@ def index():
                                     body: JSON.stringify({ chatroom_id: roomId, password })
                                 });
                                 proceedToRoom();
-                            } catch (err) {}
+                            } catch (err) {
+                                 showStatus('Неверный пароль.', 'error');
+                            }
                         };
                         passwordForm.addEventListener('submit', formSubmitHandler);
 
-                        const passwordCancelHandler = () => {
+                        document.getElementById('password-cancel').onclick = () => {
                             passwordModal.style.display = 'none';
                             passwordForm.removeEventListener('submit', formSubmitHandler);
-                            document.getElementById('password-cancel').removeEventListener('click', passwordCancelHandler);
                         };
-                        document.getElementById('password-cancel').addEventListener('click', passwordCancelHandler);
-
                     } else {
                         proceedToRoom();
                     }
@@ -1351,10 +1242,9 @@ def index():
                                     text: text
                                 })
                             });
-                            // Instead of full fetch, could optimistically add message,
-                            // but polling will update shortly anyway. Fetching ensures consistency.
-                             await fetchMessages(activeChatroomId);
-                             // Auto scroll happens in renderMessages if needed
+                            // Optimistic update or wait for poll
+                            // await fetchMessages(activeChatroomId);
+                            // document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
                         } finally {
                             input.disabled = false;
                             sendBtn.disabled = false;
@@ -1363,6 +1253,7 @@ def index():
                     }
                 });
 
+                const createRoomModal = document.getElementById('create-room-modal');
                 document.getElementById('create-room-show-modal').addEventListener('click', () => {
                     createRoomModal.style.display = 'flex';
                     document.getElementById('create-room-form').reset();
@@ -1375,13 +1266,13 @@ def index():
                     const name = document.getElementById('room-name').value.trim();
                     const password = document.getElementById('room-password').value;
                     if (!name) {
-                         showStatus('Название чата обязательно.', 'error');
+                        showStatus('Название чата не может быть пустым.', 'error');
+                        return;
+                    }
+                    if (!currentUser.address) {
+                        showStatus('Необходимо подключить кошелек для создания чата.', 'error');
                          return;
                     }
-                     if (!currentUser.address) {
-                          showStatus('Не подключен кошелек для создания чата.', 'error');
-                          return;
-                     }
 
                     try {
                         await apiCall('/api/create_chatroom', {
@@ -1405,10 +1296,10 @@ def index():
                         });
                         
                         const username = userData.username || `User ${truncateAddress(address)}`;
-                        
                         const avatarContainer = document.getElementById('profile-avatar-container');
                         const usernameEl = document.getElementById('profile-username');
                         const addressEl = document.getElementById('profile-address');
+                        const balanceEl = document.getElementById('profile-balance');
                         const qrCodeEl = document.getElementById('profile-qr-code');
                         const sendTonBtn = document.getElementById('send-ton-btn');
                         
@@ -1417,12 +1308,21 @@ def index():
                         
                         usernameEl.textContent = username;
                         addressEl.textContent = address;
+
+                        // Show balance only for current user's profile
+                        if (address === currentUser.address && currentUser.balance !== null) {
+                            balanceEl.textContent = `Баланс: ${currentUser.balance.toFixed(2)} TON`;
+                            balanceEl.style.display = 'block';
+                        } else {
+                             balanceEl.style.display = 'none';
+                        }
                         
                         qrCodeEl.innerHTML = '';
-                        if (profileQrCodeInstance) {
-                            profileQrCodeInstance.clear();
+                        if (profileQrCode) {
+                            profileQrCode.clear();
+                            profileQrCode = null;
                         }
-                        profileQrCodeInstance = new QRCode(qrCodeEl, {
+                        profileQrCode = new QRCode(qrCodeEl, {
                             text: address,
                             width: 150,
                             height: 150,
@@ -1445,7 +1345,7 @@ def index():
                                 return;
                             }
                             
-                            const amountInNanoTon = TON_CONNECT_SDK.toNano(amount).toString();
+                            const amountInNanoTon = Math.floor(amount * 1_000_000_000).toString();
 
                             const transaction = {
                                 validUntil: Math.floor(Date.now() / 1000) + 600,
@@ -1454,11 +1354,10 @@ def index():
 
                             try {
                                 await tonConnectUI.sendTransaction(transaction);
-                                showStatus(`Транзакция отправлена успешно!`, 'success');
+                                showStatus(`Транзакция на ${amount} TON отправлена!`, 'success');
                                 profileModal.style.display = 'none';
                             } catch (error) {
-                                console.error("Send transaction failed:", error);
-                                showStatus('Транзакция отклонена или не удалась.', 'error');
+                                showStatus('Транзакция отклонена.', 'error');
                             }
                         };
                         
@@ -1471,30 +1370,26 @@ def index():
 
                 const showScanner = () => {
                     scannerModal.style.display = 'flex';
-                    const qrReaderElement = document.getElementById('qr-reader');
-                    if (!html5QrCode) {
-                         html5QrCode = new Html5Qrcode("qr-reader");
+                    // Stop previous scanner if running
+                    if (html5QrCode && html5QrCode.isScanning) {
+                        html5QrCode.stop().catch(err => console.error("Failed to stop existing QR scanner:", err));
                     }
-
+                    html5QrCode = new Html5Qrcode("qr-reader");
                     const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                         hideScanner();
-                        // Basic check for TON address pattern
-                        if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ') || decodedText.startsWith('0:'))) {
+                        // Basic TON address validation
+                        if (decodedText && decodedText.length > 40 && (decodedText.startsWith('EQ') || decodedText.startsWith('UQ'))) {
                             showProfile(decodedText);
                         } else {
-                            showStatus('Отсканирован недействительный TON QR-код.', 'error');
+                            showStatus('Отсканирован недействительный QR-код TON.', 'error');
                         }
                     };
-                    const config = { fps: 10, qrbox: { width: 250, height: 250 } };
-
-                    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback, (errorMessage) => {
-                        // Optional: handle scan errors if needed
-                        // console.warn(`QR Code scanning error: ${errorMessage}`);
-                    })
+                    const config = { fps: 10, qrbox: { width: 250, height: 250 }, aspectRatio: 1.0 };
+                    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
                         .catch(err => {
-                             console.error("Failed to start QR scanner.", err);
                             showStatus('Не удалось запустить сканер. Проверьте разрешения камеры.', 'error');
-                            hideScanner(); // Ensure modal closes on startup failure
+                            console.error("QR Scanner start error:", err);
+                            hideScanner();
                         });
                 };
 
@@ -1505,158 +1400,119 @@ def index():
                     scannerModal.style.display = 'none';
                 };
 
-                 const navigateToView = (viewId) => {
-                     const views = contentView.querySelectorAll('.view-panel');
-                     views.forEach(view => {
-                         view.classList.remove('active-view');
-                     });
-                     document.getElementById(viewId).classList.add('active-view');
-
-                     navItems.forEach(item => {
-                         item.classList.remove('active');
-                     });
-                     document.querySelector(`.nav-item[data-view="${viewId}"]`)?.classList.add('active');
-
-                     // Specific actions for views
-                     if (viewId === 'chatrooms-view') {
-                          fetchChatrooms();
-                          handleResize(); // Re-apply chat window/list visibility logic
-                     } else {
-                         // When navigating away from chat, stop polling
-                         if (messagePollingInterval) {
-                             clearInterval(messagePollingInterval);
-                             messagePollingInterval = null;
-                         }
-                          if (window.innerWidth < 768) {
-                              // Hide chat window if open on mobile
-                               chatWindowContainer.style.display = 'none';
-                               chatroomListContainer.style.display = 'flex'; // Show list default
-                          }
-                     }
-                     if (viewId === 'users-view') {
-                         fetchUsers();
-                     }
-                      if (viewId === 'my-profile-view') {
-                          updateMyProfileView(); // Refresh profile data
-                      }
-                 };
-
-                 navItems.forEach(item => {
-                     item.addEventListener('click', () => {
-                         const viewId = item.dataset.view;
-                         if (viewId) {
-                            navigateToView(viewId);
-                         } else if (item.id === 'qr-scanner-nav') {
-                             showScanner();
-                         }
-                     });
-                 });
-
-                document.getElementById('profile-close-btn').addEventListener('click', () => profileModal.style.display = 'none');
-                document.getElementById('scanner-close-btn').addEventListener('click', hideScanner);
-                document.getElementById('back-to-list-btn').addEventListener('click', () => {
-                     activeChatroomId = null; // Reset active chat
-                     if (messagePollingInterval) clearInterval(messagePollingInterval);
-                     hideChatWindow(); // Hide window and show list on mobile
-                     chatPlaceholder.style.display = 'flex'; // Show placeholder
-                     activeChat.style.display = 'none'; // Hide active chat elements
-                });
-
-                document.getElementById('browser-address-bar').addEventListener('submit', (e) => {
-                    e.preventDefault();
+                const loadBrowserUrl = () => {
                     let url = browserUrlInput.value.trim();
                     if (!url) return;
-                    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+
+                    // Simple check if it looks like a domain, otherwise assume search
+                    if (!url.includes('.') || url.startsWith(' ') || url.endsWith(' ')) {
+                        url = 'https://www.google.com/search?q=' + encodeURIComponent(url);
+                    } else if (!url.startsWith('http://') && !url.startsWith('https://')) {
                         url = 'https://' + url; // Default to https
                     }
                     browserIframe.src = url;
-                });
-
-                const handleResize = () => {
-                    const isMobile = window.innerWidth < 768;
-
-                     // Adjust main container based on desktop/mobile
-                    const containers = document.querySelectorAll('.main-container');
-                    containers.forEach(container => {
-                        if (isMobile) {
-                             container.style.maxWidth = '100%';
-                             container.style.maxHeight = '100%';
-                             container.style.borderRadius = '0';
-                             container.style.border = 'none';
-                             container.style.boxShadow = 'none';
-                        } else {
-                            container.style.maxWidth = '1100px';
-                            container.style.maxHeight = '800px';
-                            container.style.borderRadius = '12px';
-                            container.style.border = '1px solid var(--border-color)';
-                            container.style.boxShadow = '0 10px 40px rgba(0,0,0,0.3)';
+                    browserUrlInput.value = url; // Update input to full URL
+                };
+                
+                document.getElementById('profile-close-btn').addEventListener('click', () => profileModal.style.display = 'none');
+                document.getElementById('scanner-close-btn').addEventListener('click', hideScanner);
+                document.getElementById('back-to-list-btn').addEventListener('click', () => switchView('chats')); // Back button goes to chats view
+
+                // Navbar event listeners
+                navbarItems.forEach(item => {
+                    item.addEventListener('click', () => {
+                        const viewName = item.dataset.view;
+                        if (viewName) {
+                            switchView(viewName);
                         }
                     });
+                });
 
+                 // Browser URL bar event listener
+                 document.getElementById('browser-go-btn').addEventListener('click', loadBrowserUrl);
+                 browserUrlInput.addEventListener('keypress', function(event) {
+                     if (event.key === 'Enter') {
+                         event.preventDefault();
+                         loadBrowserUrl();
+                     }
+                 });
 
-                    // Handle chat view split visibility
-                    if (document.getElementById('chatrooms-view').classList.contains('active-view')) {
-                        if (isMobile) {
-                            backToListBtn.style.display = 'block';
-                            if (activeChatroomId) {
-                                chatroomListContainer.style.display = 'none';
-                                chatWindowContainer.style.display = 'flex';
-                            } else {
-                                chatroomListContainer.style.display = 'flex';
-                                chatWindowContainer.style.display = 'none';
-                            }
-                        } else {
-                            backToListBtn.style.display = 'none';
-                            chatroomListContainer.style.display = 'flex';
-                            chatWindowContainer.style.display = 'flex';
-                        }
-                    } else {
-                         // If not on chatrooms view, ensure mobile only shows the active view
-                         if (isMobile) {
-                              chatroomListContainer.style.display = 'none';
-                              chatWindowContainer.style.display = 'none';
+
+                const handleResize = () => {
+                    const isDesktop = window.innerWidth >= 768;
+                    const isChatActive = activeChat.style.display === 'flex';
+                    const currentViewName = mainContentArea.dataset.activeView || 'chats'; // Default to chats
+
+                    // Manage back button visibility
+                    document.getElementById('back-to-list-btn').style.display = isDesktop ? 'none' : (isChatActive ? 'block' : 'none');
+
+                    // Manage view visibility based on desktop/mobile and active chat state
+                    if (isDesktop) {
+                         chatroomListView.style.display = 'flex';
+                         usersListView.style.display = (currentViewName === 'users') ? 'flex' : 'none';
+                         browserView.style.display = (currentViewName === 'browser') ? 'flex' : 'none';
+                         chatWindowView.style.display = (currentViewName === 'chats') ? 'flex' : 'none';
+
+                         // On desktop, chat window is always visible when chats view is active, regardless of selected chat
+                         if (currentViewName === 'chats') chatWindowView.style.display = 'flex';
+
+                    } else { // Mobile layout
+                         // Hide all content views initially
+                         document.querySelectorAll('.app-view-content').forEach(view => view.style.display = 'none');
+
+                         // Show the active view
+                         if (isChatActive && currentViewName === 'chats') {
+                              chatWindowView.style.display = 'flex';
                          } else {
-                             // Desktop views take full content area
+                              switch (currentViewName) {
+                                   case 'chats': chatroomListView.style.display = 'flex'; break;
+                                   case 'users': usersListView.style.display = 'flex'; break;
+                                   case 'browser': browserView.style.display = 'flex'; break;
+                                   // Profile and Scan are modals, not main content views
+                              }
                          }
                     }
                 };
 
                 window.addEventListener('resize', handleResize);
 
+
                 tonConnectUI.onStatusChange(wallet => {
                     if (wallet) {
-                        initializeUser(wallet);
+                        const address = TON_CONNECT_UI.toUserFriendlyAddress(wallet.account.address, false);
+                        initializeUser(address);
                     } else {
                         currentUser = { address: null, username: null, balance: null };
                         appView.style.display = 'none';
                         loginView.style.display = 'flex';
                         if (messagePollingInterval) clearInterval(messagePollingInterval);
+                        messagePollingInterval = null;
                         activeChatroomId = null;
-                        // Reset UI state
+                        // Clear UI elements
+                        document.getElementById('chatroom-list').innerHTML = '';
+                        document.getElementById('users-list').innerHTML = '';
+                        document.getElementById('messages-container').innerHTML = '';
                         chatPlaceholder.style.display = 'flex';
                         activeChat.style.display = 'none';
-                         document.getElementById('chatroom-list').innerHTML = '';
-                         document.getElementById('users-list-container').innerHTML = '';
-                         // Update summary and profile
-                         updateUserInfoSummary();
-                         updateMyProfileView();
-                         // Navigate back to login on disconnect
-                         navigateToView('chatrooms-view'); // Reset active view state
+                        document.getElementById('user-wallet').textContent = '';
+                        document.getElementById('user-nickname').textContent = '';
+                         document.getElementById('username-input').value = '';
+
                     }
                 });
 
-                // Initial resize check and set default view on load
-                handleResize();
-                 if (!tonConnectUI.connected) {
-                     // Only show login if not already connected
+                 // Check initial TON Connect status
+                 if (tonConnectUI.connected) {
+                     const address = TON_CONNECT_UI.toUserFriendlyAddress(tonConnectUI.wallet.account.address, false);
+                     initializeUser(address);
+                 } else {
+                     // Show login view by default if not connected
                      loginView.style.display = 'flex';
                      appView.style.display = 'none';
-                 } else {
-                     // If already connected on load, trigger initialization
-                     initializeUser(tonConnectUI.wallet);
                  }
 
-
+                 // Initial view setup and resize handling
+                 handleResize();
             });
         </script>
     </body>
@@ -1664,7 +1520,6 @@ def index():
     '''
     return Response(html_content, mimetype='text/html')
 
-
 @app.route('/api/user_data', methods=['POST'])
 def get_user_data():
     data = request.get_json()
@@ -1674,37 +1529,20 @@ def get_user_data():
     db = read_db()
     user_info = db['users'].get(address)
     username = user_info.get('username') if user_info else None
-    # Always return the address and the found username (or null)
-    return jsonify({'address': address, 'username': username})
+    return jsonify({'username': username})
 
 @app.route('/api/users', methods=['GET'])
 def get_users():
     db = read_db()
     users_list = []
-    for address, user_info in db['users'].items():
-         users_list.append({
-             'address': address,
-             'username': user_info.get('username') # Include username if exists
-         })
-    # Include users who might have sent messages but don't have a username set explicitly
-    # This ensures all participants in chats are listed, even if just by address
-    all_addresses = set(db['users'].keys())
-    for room_messages in db['messages'].values():
-        for msg in room_messages:
-            all_addresses.add(msg['sender_address'])
-
-    final_users_list = []
-    for address in all_addresses:
-        user_info = db['users'].get(address, {})
-        final_users_list.append({
-             'address': address,
-             'username': user_info.get('username')
+    for address, user_data in db.get('users', {}).items():
+        users_list.append({
+            'address': address,
+            'username': user_data.get('username')
         })
-
-    # Sort by username or address
-    final_users_list.sort(key=lambda x: x['username'] or x['address'])
-
-    return jsonify({'users': final_users_list})
+    # Sort users alphabetically by username or address
+    users_list.sort(key=lambda x: x['username'] if x['username'] else x['address'])
+    return jsonify({'users': users_list})
 
 
 @app.route('/api/set_username', methods=['POST'])
@@ -1728,11 +1566,11 @@ def set_username():
 def get_chatrooms():
     db = read_db()
     chatrooms_list = []
-    for room_id, room_data in db['chatrooms'].items():
+    for room_id, room_data in db.get('chatrooms', {}).items():
         chatrooms_list.append({
             'id': room_id,
             'name': room_data['name'],
-            'is_private': room_data['is_private']
+            'is_private': room_data.get('is_private', False)
         })
     return jsonify({'chatrooms': sorted(chatrooms_list, key=lambda x: x['name'])})
 
@@ -1744,15 +1582,18 @@ def create_chatroom():
     creator_address = data.get('creator_address')
     if not name or not creator_address:
         return jsonify({'error': 'Name and creator address are required'}), 400
+    if not name.strip():
+         return jsonify({'error': 'Chatroom name cannot be empty'}), 400
+
 
     db = read_db()
     room_id = str(uuid.uuid4())
     db['chatrooms'][room_id] = {
-        'id': room_id, # Store id in object too for easier reference if needed
-        'name': name,
+        'id': room_id,
+        'name': name.strip(),
         'creator': creator_address,
         'is_private': bool(password),
-        'password_hash': generate_password_hash(password).decode('utf-8') if password else None # Ensure hash is string
+        'password_hash': generate_password_hash(password) if password else None
     }
     db['messages'][room_id] = []
     write_db(db)
@@ -1767,32 +1608,23 @@ def join_chatroom():
     chatroom = db['chatrooms'].get(chatroom_id)
     if not chatroom:
         return jsonify({'error': 'Chatroom not found'}), 404
-    if chatroom['is_private']:
-        if not password or not check_password_hash(chatroom['password_hash'], password):
+    if chatroom.get('is_private', False):
+        if not password or not chatroom.get('password_hash') or not check_password_hash(chatroom['password_hash'], password):
             return jsonify({'error': 'Invalid password'}), 403
     return jsonify({'success': True})
 
 @app.route('/api/messages/<chatroom_id>', methods=['GET'])
 def get_messages(chatroom_id):
     db = read_db()
-    if chatroom_id not in db['messages']:
-        return jsonify({'error': 'Chatroom not found'}), 404
-    
-    messages_with_names = []
     room_messages = db['messages'].get(chatroom_id, [])
-    
-    # Pre-fetch usernames to avoid repeated lookups in the loop
-    user_names = {}
-    for address, user_info in db['users'].items():
-        user_names[address] = user_info.get('username')
 
+    messages_with_names = []
     for msg in room_messages:
         sender_address = msg['sender_address']
-        # Get display name, prioritize username, fall back to truncated address
-        display_name = user_names.get(sender_address)
-        if not display_name:
-             display_name = f"{sender_address[:4]}...{sender_address[-4:]}"
-        
+        user_info = db['users'].get(sender_address)
+        display_name = (user_info.get('username') if user_info and user_info.get('username')
+                        else f"{sender_address[:4]}...{sender_address[-4:]}")
+
         msg_copy = msg.copy()
         msg_copy['display_name'] = display_name
         messages_with_names.append(msg_copy)
@@ -1819,8 +1651,7 @@ def send_message():
         'text': text,
         'timestamp': datetime.utcnow().isoformat() + "Z"
     }
-    
-    # Keep only the last 100 messages per room
+
     if len(db['messages'][chatroom_id]) >= 100:
         db['messages'][chatroom_id].pop(0)
 
@@ -1831,5 +1662,4 @@ def send_message():
 
 if __name__ == '__main__':
     init_db()
-    # Use host='0.0.0.0' for accessibility in development environments like Hugging Face Spaces
     app.run(host='0.0.0.0', port=7860)
\ No newline at end of file