Finished implementing user settings -> security

Started implementing user settings -> security -> e-mail management
Started implementing user settings -> security -> password management
2026-04-19 12:37:52 +02:00 · 2026-04-18 19:28:51 +02:00 · 2026-04-18 15:24:37 +02:00 · 2026-04-17 17:55:42 +02:00 · 2026-04-15 17:35:55 +02:00 · 2026-04-14 17:51:02 +02:00
63 changed files with 2172 additions and 281 deletions
--- a/README.md
+++ b/README.md
@@ -1,2 +1,2 @@
-# Chatenium On Web
-A modern web application for Chatenium compatible with a wide range of devices.
+# Chatenium Nexum
+The next generation Web application for Chatenium, built on modern standards powered by Chatenium SDK (TypeScript).
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
        "@angular/platform-browser": "^21.2.0",
        "@angular/router": "^21.2.0",
        "@angular/service-worker": "^21.2.0",
-        "@chatenium/chatenium-sdk": "^1.1.8",
+        "@chatenium/chatenium-sdk": "^1.2.2",
        "@fortawesome/angular-fontawesome": "^4.0.0",
        "@fortawesome/free-brands-svg-icons": "^7.1.0",
        "@fortawesome/free-solid-svg-icons": "^7.1.0",
@@ -27,9 +27,11 @@
        "@taiga-ui/addon-table": "^5.1.0",
        "@taiga-ui/cdk": "^5.1.0",
        "@taiga-ui/core": "^5.1.0",
+        "@taiga-ui/i18n": "^5.2.0",
        "@taiga-ui/icons": "^5.1.0",
        "@taiga-ui/kit": "^5.1.0",
        "@taiga-ui/layout": "^5.1.0",
+        "libphonenumber-js": "^1.12.41",
        "ngx-cookie-service": "^21.3.1",
        "rxjs": "~7.8.0",
        "tslib": "^2.3.0",
@@ -1011,9 +1013,9 @@
      }
    },
    "node_modules/@chatenium/chatenium-sdk": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/@chatenium/chatenium-sdk/-/chatenium-sdk-1.1.8.tgz",
-      "integrity": "sha512-UuPCr/NqZhLrT/lt8I1AM+UNFAdI00adtvvlu3BQgqCYPASoUpTJJ4HdMzJ+E0cb0pUS6DmN0Kv+w3vFQfRYwg==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chatenium/chatenium-sdk/-/chatenium-sdk-1.2.2.tgz",
+      "integrity": "sha512-LVaw46XAf3gUXRtTjvUPA15SG+iqmOT9XFdeyc77X24vqv0f2IkvepnFqb/o3SVJ+7JRpibUx4QwnOmLy1enEg==",
      "dependencies": {
        "@faker-js/faker": "^10.4.0",
        "axios": "^1.14.0",
@@ -4384,11 +4386,10 @@
      "peer": true
    },
    "node_modules/@taiga-ui/i18n": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-5.1.0.tgz",
-      "integrity": "sha512-NqCo1fK95w6aXHkvIZ3aqZOA2z+CnvD/eEEXZjbCs/Ik6QfWmGP8GbS5uwb7SzqNZz9QiVaJi5RNZtoInHf/tQ==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-5.2.0.tgz",
+      "integrity": "sha512-dyjp5hqDR272EPX+aQVtCXKiFKEUggdf1Y/Gcdt4JGZ0WqYR5n5CjP1EoKRG3GQcgd1mCSXnAt2BQJpujGcaHw==",
      "license": "Apache-2.0",
-      "peer": true,
      "dependencies": {
        "tslib": ">=2.8.1"
      },
@@ -7061,8 +7062,7 @@
      "version": "1.12.41",
      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.41.tgz",
      "integrity": "sha512-lsmMmGXBxXIK/VMLEj0kL6MtUs1kBGj1nTCzi6zgQoG1DEwqwt2DQyHxcLykceIxAnfE3hya7NuIh6PpC6S3fA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/listr2": {
      "version": "9.0.5",
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
    "@angular/platform-browser": "^21.2.0",
    "@angular/router": "^21.2.0",
    "@angular/service-worker": "^21.2.0",
-    "@chatenium/chatenium-sdk": "^1.1.8",
+    "@chatenium/chatenium-sdk": "^1.2.2",
    "@fortawesome/angular-fontawesome": "^4.0.0",
    "@fortawesome/free-brands-svg-icons": "^7.1.0",
    "@fortawesome/free-solid-svg-icons": "^7.1.0",
@@ -30,9 +30,11 @@
    "@taiga-ui/addon-table": "^5.1.0",
    "@taiga-ui/cdk": "^5.1.0",
    "@taiga-ui/core": "^5.1.0",
+    "@taiga-ui/i18n": "^5.2.0",
    "@taiga-ui/icons": "^5.1.0",
    "@taiga-ui/kit": "^5.1.0",
    "@taiga-ui/layout": "^5.1.0",
+    "libphonenumber-js": "^1.12.41",
    "ngx-cookie-service": "^21.3.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
--- a/public/i18n/en.json
+++ b/public/i18n/en.json
@@ -1,5 +1,5 @@
 {
-  "version": "3.0 Beta 5 (April 13, 2026)",
+  "version": "Chatenium Nexum 3.0 Beta 9 (April 19, 2026)",
  "ok": "Ok",
  "back": "Back",
  "aChatProgram": "A messaging platform that you can trust.",
@@ -8,14 +8,16 @@
  "independent": "Independent",
  "scrollDownForMore": "Scroll down for more",
  "whatIsChtn": "Chatenium is a chat platform aiming to provide a secure, well integrated fast chatting experience across any devices. You can create a new account for free and start chatting and broadcasting messages.",
+  "updating": "Updating...",
  "home": {
+    "soon": "Coming soon...",
    "chtn": "Chatenium ",
    "chtnIs": "Chatenium is ",
    "help": "Help",
    "blog": "Blog",
    "apiSpecs": "API specifications",
-    "adaptsToYou": "adapts to you",
-    "adaptsToYouDesc": "We actively work on bringing Chatenium to every device, but not the fast way, the good way by developing a native application for each platform.",
+    "adaptsTo": "Chatenium adapts to ",
+    "adaptsToYouDesc": "Choose your platform:",
    "chtnOnWeb": "Chatenium On Web",
    "chtnOnWebDesc": "Built for maximum compatibility. The Web will work on every device you have.",
    "chtnOnAndroid": "Chatenium On Android™",
@@ -95,18 +97,129 @@
    }
  },
  "chat": {
+    "userSettingsDialog": {
+      "label": "Settings",
+      "options": {
+        "security": "Privacy & Security",
+        "profile": "Profile",
+        "themes": "Themes",
+        "sessions": "Sessions",
+        "storage": "Data and Storage"
+      },
+      "security": {
+        "changePasswordDialog": {
+          "label": "Change password",
+          "labelSet": "Set password",
+          "labelRemove": "Remove password",
+          "warn": "After you change your password, you will be logged out of all your sessions.",
+          "currentPassword": "Current password",
+          "newPassword": "New password",
+          "newPasswordRepeat": "Repeat new password"
+        },
+        "changeEmailDialog": {
+          "label": "Change e-mail address",
+          "labelSet": "Set e-mail address",
+          "labelRemove": "Remove e-mail address",
+          "warn": "After you change your e-mail address, you will be logged out of all your sessions.",
+          "newMail": "New e-mail address",
+          "currentPassword": "Current password",
+          "oldCode": "Code sent to the old e-mail address",
+          "newCode": "Code sent to the new e-mail address"
+        },
+        "changePhoneDialog": {
+          "label": "Change phone number",
+          "labelSet": "Set phone number",
+          "labelRemove": "Remove phone number",
+          "warn": "After you change your phone number, you will be logged out of all your sessions.",
+          "newPhone": "New phone number",
+          "currentPassword": "Current password",
+          "oldCode": "Code sent to the old phone number",
+          "newCode": "Code sent to the new phone number"
+        },
+        "label": "Keep your account safe by using as much sign in methods as possible. Also check your credentials regularly to keep them up to date.",
+        "password": "Password",
+        "set": "Set",
+        "notSet": "Not set",
+        "changePassword": "Change password",
+        "phoneNumber": "Phone number",
+        "email": "E-mail address",
+        "removePassword": "Remove password",
+        "changePhone": "Change phone number",
+        "changeMail": "Change e-mail address",
+        "removePhone": "Remove phone number",
+        "removeMail": "Remove e-mail address",
+        "setPassword": "Set password",
+        "setPhone": "Set phone number",
+        "setMail": "Set e-mail address"
+      }
+    },
    "tabBar": {
      "tab1": "Chats",
      "tab2": "Networks",
      "tab3": "Pictures",
      "tab4": "Settings"
    },
+    "network": {
+      "tabs": {
+        "channels": "Channels",
+        "members": "Members",
+        "settings": "Settings"
+      },
+      "settings": {
+        "options": {
+          "categories": {
+            "apps": "Apps",
+            "moderation": "Moderation",
+            "community": "Community"
+          },
+          "overview": "Overview",
+          "rank": "Ranks",
+          "emoji": "Emojis",
+          "embed": "Embed",
+          "invite": "Invites",
+          "webhook": "Webhooks",
+          "bots": "Bots",
+          "activityHistory": "Activity history",
+          "bans": "Bans",
+          "communityChannels": "Community channels",
+          "networkIntroducer": "Network introducer",
+          "members": "Members"
+        },
+        "overviewPage": {
+          "networkPicture": "Network picture",
+          "networkName": "Network name",
+          "networkVisibility": "Network visibility",
+          "uploadNewPicture": "Upload new picture",
+          "setNewName": "Set new name",
+          "changeToPrivate": "Change to private",
+          "changeToPrivateDialog": {
+            "label": "You are about to make your network private",
+            "warn": {
+              "1": "Your network will be delisted from Network Discovery.",
+              "2": "Users will no longer be able to freely join your network without an invite.",
+              "3": "Your broadcasts may be unavailable to users outside your network."
+            }
+          },
+          "changeToPublic": "Change to public",
+          "changeToPublicDialog": {
+            "label": "You are about to make your network public",
+            "warn": {
+              "1": "Your network will be listed in Network Discovery.",
+              "2": "Users will be able to freely join your network without an invite.",
+              "3": "Your broadcasts will be available to users outside your network."
+            }
+          },
+          "setNewNameDialog": {
+            "label": "New name"
+          }
+        }
+      }
+    },
    "changeLogDialog": {
      "label": "Chatenium has been updated",
      "changeLog": {
-        "1": "Started implementing Chatenium Pictures",
-        "2": "Made small changes to the UI",
-        "3": "Minor bug fixes in message box"
+        "1": "Started implementing user settings, Privacy & Security is now available.",
+        "2": "Enabled Chatenium Pictures on mobile devices."
      }
    },
    "chatnav": {
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -6,6 +6,8 @@ import {routes} from './app.routes';
 import {provideTranslateService} from '@ngx-translate/core';
 import {provideTranslateHttpLoader} from '@ngx-translate/http-loader';
 import {provideServiceWorker} from '@angular/service-worker';
+import {tuiInputPhoneInternationalOptionsProvider} from '@taiga-ui/kit';
+import {defer} from 'rxjs';

 export const appConfig: ApplicationConfig = {
  providers: [
@@ -25,6 +27,11 @@ export const appConfig: ApplicationConfig = {
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWhenStable:30000'
-    })
+    }),
+    tuiInputPhoneInternationalOptionsProvider({
+      metadata: defer(async () =>
+        import('libphonenumber-js/max/metadata').then((m) => m.default),
+      ),
+    }),
  ],
 };
--- a/src/app/chat/chat.html
+++ b/src/app/chat/chat.html
@@ -11,6 +11,10 @@
  </button>
 </ng-template>

+<ng-template [(tuiDialog)]="userSettingsOpen" [tuiDialogOptions]="{closable: false, appearance: 'taiga big'}" class="user-settings">
+  <user-settings (close)="userSettingsOpen.set(false)"/>
+</ng-template>
+
@if (serviceManager.currentSession() == null) {
  <main style="width: 100%; height: 100svh; display: flex; justify-content: center; align-items: center;">
    <tui-loader size="xl"/>
@@ -32,7 +36,7 @@
            </button>
          </tui-segmented>

-          <button id="bottom_btn" tuiButton appearance="flat" disabled>
+          <button id="bottom_btn" tuiButton [appearance]="userSettingsOpen() ? 'primary' : 'flat'" (click)="userSettingsOpen.set(true)">
            <tui-icon icon="@tui.cog"/>
          </button>
        </aside>
@@ -57,7 +61,7 @@

      <main id="content">
        <div id="content_tint">
-          @if (router.url.startsWith("/chat/dm") && router.url.startsWith("/chat/picture")) {
+          @if (router.url.startsWith("/chat/dm") || router.url.startsWith("/chat/picture")) {
            <!-- To ensure data is loaded -->
            @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
              <router-outlet/>
@@ -86,6 +90,13 @@
                <network-list [token]="serviceManager.currentSession()!.token"
                              [userid]="serviceManager.currentSession()!.userData.userid"></network-list>
              }
+              @case (2) {
+                <app-picture-list [token]="serviceManager.currentSession()!.token"
+                              [userid]="serviceManager.currentSession()!.userData.userid"></app-picture-list>
+              }
+              @case (3) {
+                <user-settings/>
+              }
            }
          </div>

@@ -106,10 +117,10 @@
        </div>
      }

-      @if (router.url.startsWith("/chat/dm")) {
+      @if (router.url.startsWith("/chat/dm") || router.url.startsWith("/chat/picture")) {
        <!-- To ensure data is loaded -->
        @defer (when serviceManager.chatsStatus() != LoadStatus.loading) {
-          <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"/>
+        <router-outlet (activate)="routerOutletActive.set(true)" (deactivate)="routerOutletActive.set(false)"/>
        }
      } @else if (router.url.startsWith("/chat/network")) {
        @defer (when serviceManager.networksStatus() != LoadStatus.loading) {
--- a/src/app/chat/chat.scss
+++ b/src/app/chat/chat.scss
@@ -79,8 +79,14 @@
    }

    #navigation_content {
+      overflow-y: scroll;
      height: 100%;
      padding: 20px;
    }
  }
 }
+
+::ng-deep tui-dialog[data-appearance~=big] {
+  height: 90svh;
+  width: 90svw !important;
+}
--- a/src/app/chat/chat.ts
+++ b/src/app/chat/chat.ts
@@ -13,6 +13,9 @@ import {environment} from '../../environments/environment';
 import {TuiTabBarComponent, TuiTabBarItem} from '@taiga-ui/addon-mobile';
 import {NetworkList} from './network-list/network-list';
 import {PictureList} from './picture-list/picture-list';
+import {UserSettings} from './user-settings/user-settings';
+import {AuthService} from '@chatenium/chatenium-sdk/services/authService';
+import {UserService} from '@chatenium/chatenium-sdk/services/userService';

@Component({
  selector: 'app-chat',
@@ -31,7 +34,8 @@ import {PictureList} from './picture-list/picture-list';
    TuiTabBarComponent,
    TuiTabBarItem,
    NetworkList,
-    PictureList
+    PictureList,
+    UserSettings
  ],
  templateUrl: './chat.html',
  styleUrl: './chat.scss',
@@ -43,6 +47,7 @@ export class Chat implements OnInit {
  router = inject(Router)

  routerOutletActive = signal(false)
+  userSettingsOpen = signal(false)

  navigationActiveIndex = 0
  // Mobile navigation //
@@ -60,12 +65,12 @@ export class Chat implements OnInit {
    {
      text: "chat.tabBar.tab3",
      icon: '@tui.image',
-      implemented: false,
+      implemented: true,
    },
    {
      text: "chat.tabBar.tab4",
      icon: '@tui.cog',
-      implemented: false,
+      implemented: true,
    }
  ];

@@ -81,7 +86,19 @@ export class Chat implements OnInit {
    this.indexedDb.openDatabase().then(async () => {
      const session = await this.serviceManager.sessionManager.loadPreferredSession()
      this.serviceManager.currentSession.set(session)
+      this.serviceManager.currentSessionHandler = new UserService(session.userData.userid, session.token, this.indexedDb.getApi())
      await WebSocketHandler.getInstance().connect(session.userData.userid, session.token)
+      try {
+        console.log("Updating sessions...")
+        const sessions = await this.serviceManager.sessionManager.loadSessions()
+        console.log("Updating sessions: saved sessions loaded...")
+        await this.serviceManager.sessionManager.updateSessions(sessions)
+        const session = await this.serviceManager.sessionManager.loadPreferredSession()
+        console.log("Updating sessions succeeded: updating sessions...")
+        this.serviceManager.currentSession.set(session)
+      } catch (e) {
+        console.warn("Session update failed, skipping...", e)
+      }
    })

    setTimeout(() => {
--- a/src/app/chat/dm-list/dm-list.html
+++ b/src/app/chat/dm-list/dm-list.html
@@ -1,22 +1,29 @@
 <button disabled tuiButton appearance="secondary" iconStart="@tui.mail-plus">
-  {{"chat.chatnav.dmList.newChat"|translate}}
+  {{ "chat.chatnav.dmList.newChat"|translate }}
 </button>
-
+@if (serviceManager.chatsStatus() == LoadStatus.updating) {
+  <div id="loader">
+    <tui-loader/>
+    {{ "updating"|translate }}
+  </div>
+}
@for (chat of serviceManager.chats(); track chat.chatid) {
-  <button [class.enlarge]="breakpoint() == 'mobile'" tuiButton [appearance]="router.url == '/chat/dm/' + chat.chatid ? 'primary' : 'flat'" [routerLink]="'/chat/dm/' + chat.chatid">
+  <button [class.enlarge]="breakpoint() == 'mobile'" tuiButton
+          [appearance]="router.url == '/chat/dm/' + chat.chatid ? 'primary' : 'flat'"
+          [routerLink]="'/chat/dm/' + chat.chatid">
    <oimg [src]="chat.pfp" height="35px" width="35px" [radius]="10"></oimg>
    <div class="info">
      @if (chat.displayName == "") {
-        <span>{{'@'+chat.username}}</span>
+        <span>{{ '@' + chat.username }}</span>
      } @else {
-        <span>{{chat.displayName}}</span>
+        <span>{{ chat.displayName }}</span>
      }
      @if (chat.latestMessage) {
        <span class="latest_message">
          @if (chat.latestMessage.isAuthor) {
-            {{"chat.chatnav.dmList.messageBox.latestMessage.you"|translate}}
+            {{ "chat.chatnav.dmList.messageBox.latestMessage.you"|translate }}
          }
-          {{chat.latestMessage.message}}
+          {{ chat.latestMessage.message }}
        </span>
      }
    </div>
--- a/src/app/chat/dm-list/dm-list.scss
+++ b/src/app/chat/dm-list/dm-list.scss
@@ -3,6 +3,14 @@
  flex-direction: column;
  gap: 5px;

+  #loader {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    padding: 5px;
+    gap: 5px;
+  }
+
  button {
    width: 100%;
    display: flex;
--- a/src/app/chat/dm-list/dm-list.ts
+++ b/src/app/chat/dm-list/dm-list.ts
@@ -1,8 +1,7 @@
-import {Component, inject, input, OnInit, signal} from '@angular/core';
+import {Component, inject, input, OnInit} from '@angular/core';
 import {ChatService} from '@chatenium/chatenium-sdk/services/chatService';
 import {IndexedDB} from '../../storage/indexed-db';
-import {Chat} from '@chatenium/chatenium-sdk/domain/chatService.schema';
-import {TUI_BREAKPOINT, TuiButton} from '@taiga-ui/core';
+import {TUI_BREAKPOINT, TuiButton, TuiLoader} from '@taiga-ui/core';
 import {Oimg} from '../elements/oimg/oimg';
 import {Router, RouterLink} from '@angular/router';
 import {TranslatePipe} from '@ngx-translate/core';
@@ -14,7 +13,8 @@ import {LoadStatus, ServiceManager} from '../../service-manager';
    TuiButton,
    Oimg,
    RouterLink,
-    TranslatePipe
+    TranslatePipe,
+    TuiLoader
  ],
  templateUrl: './dm-list.html',
  styleUrl: './dm-list.scss',
@@ -30,12 +30,22 @@ export class DmList implements OnInit {

  async ngOnInit() {
    this.serviceManager.chatService = new ChatService(this.userid(), this.token(), this.indexedDb.getApi(), () => {})
-    try {
-      this.serviceManager.chats.set(await this.serviceManager.chatService.get())
-      this.serviceManager.chatsStatus.set(LoadStatus.loaded)
-    } catch (e) {
-      console.error(e)
-      this.serviceManager.chatsStatus.set(LoadStatus.error)
+    if (this.serviceManager.chatsStatus() != LoadStatus.loaded) {
+      try {
+        this.serviceManager.chats.set(await this.serviceManager.chatService.getQuick())
+        this.serviceManager.chatsStatus.set(LoadStatus.updating)
+      } catch (e) {
+        console.warn(`Cache load failed: ${e}. Skipping cache load...`)
+      }
+      try {
+        this.serviceManager.chats.set(await this.serviceManager.chatService.get())
+        this.serviceManager.chatsStatus.set(LoadStatus.loaded)
+      } catch (e) {
+        console.error(e)
+        this.serviceManager.chatsStatus.set(LoadStatus.error)
+      }
    }
  }
+
+  protected readonly LoadStatus = LoadStatus;
 }
--- a/src/app/chat/dm/dm.html
+++ b/src/app/chat/dm/dm.html
@@ -20,7 +20,7 @@
      </div>
    </navbar>

-    <messages [messageBoxViewModel]="store.messageBox" [messages]="store.messages()" id="scrollContainer" (onDelete)="deleteMessage($event)"/>
+    <messages (scrollend)="handleMessagesScroll($event)" [loading]="store.messagesStatus() == LoadStatus.loading" [messageBoxViewModel]="store.messageBox" [messages]="store.messages()" id="scrollContainer" (onDelete)="deleteMessage($event)"/>

    <message-box [viewModel]="store.messageBox"/>
  }
--- a/src/app/chat/dm/dm.ts
+++ b/src/app/chat/dm/dm.ts
@@ -1,5 +1,5 @@
 import {Component, inject, OnInit, signal} from '@angular/core';
-import {DmStorage, ServiceManager} from '../../service-manager';
+import {DmStorage, LoadStatus, ServiceManager} from '../../service-manager';
 import {ActivatedRoute} from '@angular/router';
 import {DMService} from '@chatenium/chatenium-sdk/services/dmService';
 import {IndexedDB} from '../../storage/indexed-db';
@@ -11,9 +11,10 @@ import {Messages} from '../elements/messages/messages';
 import {Chat} from '@chatenium/chatenium-sdk/domain/chatService.schema';
 import {Message} from '@chatenium/chatenium-sdk/domain/dmService.schema';
 import {MessageBoxViewModel} from '../elements/message-box/message-box-viewmodel';
-import {WebSocketHandler} from '@chatenium/chatenium-sdk/core/webSocketHandler';
-import {FileData, FileUploadProgressListener} from '@chatenium/chatenium-sdk/domain/fileUploadService.schema';
+import {FileUploadProgressListener} from '@chatenium/chatenium-sdk/domain/fileUploadService.schema';
 import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
+import {MessagesViewModel} from '../elements/messages/messages-viewmodel';
+import {v4 as uuidv4} from 'uuid';

@Component({
  selector: 'app-dm',
@@ -42,6 +43,7 @@ export class Dm implements OnInit {

  async sendMessage(message: string, files: FileDataWithPreview[] | null) {
    if (!files && message.trim() == "") return
+    this.scrollToBottom("smooth")

    const session = this.serviceManager.currentSession();
    if (session != null) {
@@ -66,8 +68,11 @@ export class Dm implements OnInit {

      let attachments: Attachment[] = []
      files?.forEach(file => {
-        const extraMetaData: Record<string, string> = {}
+        const extraMetaData: Record<string, any> = {}
        extraMetaData["thumbnailMetaData"] = file.videoThumbnail ?? ""
+        extraMetaData["progressShown"] = true
+        extraMetaData["totalChunks"] = 0
+        extraMetaData["uploadedChunks"] = 0

        attachments.push({
          fileName: file.name,
@@ -81,6 +86,7 @@ export class Dm implements OnInit {
        })
      })

+      const tempMsgId = uuidv4()
      this.store.messages.update(value => [...value, {
        message: message,
        chatid: this.chatid,
@@ -88,7 +94,7 @@ export class Dm implements OnInit {
        replyTo: "",
        author: session.userData.userid,
        seen: false,
-        msgid: "",
+        msgid: tempMsgId,
        forwardedFrom: "",
        isEdited: false,
        sent_at: {T: 0, I: 0},
@@ -98,14 +104,13 @@ export class Dm implements OnInit {

      this.scrollToBottom("smooth")

-      await this.store.service.sendMessage("", message, null, null, files, <FileUploadProgressListener>{
+      const respMessage = await this.store.service.sendMessage(tempMsgId, message, null, null, files, <FileUploadProgressListener>{
        fileProgressUpdate: (tempMsgId, fileId, allChunks, chunksDone) => {
          this.uploadProgressUpdate(tempMsgId, fileId, allChunks, chunksDone)
        }
      })
+      this.updateTempMessage(tempMsgId, respMessage)
    }
-
-    this.store.messageBox.message.set("")
  }

  async deleteMessage(messageId: string) {
@@ -125,15 +130,61 @@ export class Dm implements OnInit {
    setTimeout(() => {
      const scrollContainer = <HTMLDivElement>document.querySelector("#scrollContainer")
      scrollContainer.scroll({
-        top: scrollContainer.scrollHeight,
+        top: this.store.messagesVm.scrollBarStatus() == -1 ? scrollContainer.scrollHeight : this.store.messagesVm.scrollBarStatus(),
        left: 0,
        behavior: anim
      });
+
+      if (this.store.messagesVm.scrollBarStatus() == -1) {
+        this.store.messagesVm.scrollBarStatus.set(scrollContainer.scrollHeight)
+      }
    }, 0)
  }

+  handleMessagesScroll(e: any) {
+    this.store.messagesVm.scrollBarStatus.set(e.target.scrollTop)
+  }
+
  uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
-    console.log(fileId, allChunks, chunksDone)
+    console.log(tempMsgId, fileId, allChunks, chunksDone)
+    this.store.messages.update(messages =>
+      messages.map(m => {
+        if (m.msgid !== tempMsgId) return m;
+
+        return {
+          ...m,
+          files: m.files.map(f => {
+            if (f.fileId !== fileId) return f;
+            return {
+              ...f,
+              extraMetaData: {
+                ...f.extraMetaData,
+                totalChunks: allChunks,
+                uploadedChunks: chunksDone
+              }
+            };
+          })
+        };
+      })
+    );
+  }
+
+  updateTempMessage(tempMsgId: string, message: Message) {
+    this.store.messages.update(messages =>
+      messages.map(m => {
+        if (m.msgid !== tempMsgId) return m;
+
+        return {
+          ...m,
+          msgid: message.msgid,
+          sent_at: message.sent_at,
+          files: m.files.map(f => {
+            f.extraMetaData["progressShown"] = false
+            return f
+          })
+        };
+      })
+    );
  }

  // The chatid parameter ensures isolation
@@ -156,6 +207,7 @@ export class Dm implements OnInit {
    this.route.params.subscribe(async params => {
      const chatid = params['chatid'];
      this.chatid = chatid;
+      console.log(`Loading chat ${chatid}...`)

      const session = this.serviceManager.currentSession();
      const chatData = this.serviceManager.chats().find(c => c.chatid === chatid);
@@ -168,7 +220,9 @@ export class Dm implements OnInit {
        const newStore = {
          chatData: signal<Chat>(chatData),
          messages: signal<Message[]>([]),
+          messagesStatus: signal<LoadStatus>(LoadStatus.loading),
          messageBox: new MessageBoxViewModel((msg, files) => this.sendMessage(msg, files)),
+          messagesVm: new MessagesViewModel(),
          wsListener: (action, data) => this.onWsListen(action, data, chatid),
        } as DmStorage;

@@ -183,12 +237,25 @@ export class Dm implements OnInit {
        this.serviceManager.dmServices()[chatid] = newStore;

        const currentStore = this.serviceManager.dmServices()[chatid];
-        const history = await currentStore.service.get();
-        currentStore.messages.set(history);
+        try {
+          const messagesCache = await currentStore.service.getQuick();
+          currentStore.messages.set(messagesCache);
+          this.store.messagesStatus.set(LoadStatus.updating)
+          this.scrollToBottom("instant")
+        } catch (e) {
+          console.warn(`Cache load failed: ${e}. Skipping cache load...`)
+        }
+        const messages = await currentStore.service.get();
+        currentStore.messages.set(messages);
+        this.store.messagesStatus.set(LoadStatus.loaded)
        this.scrollToBottom("instant")

        await currentStore.service.joinWebSocketRoom();
+      } else {
+        this.scrollToBottom("instant")
      }
    });
  }
+
+  protected readonly LoadStatus = LoadStatus;
 }
--- a/src/app/chat/elements/message-box/message-box.html
+++ b/src/app/chat/elements/message-box/message-box.html
@@ -50,7 +50,7 @@
 </ng-template>

 <main>
-  <div id="message-box-extension" tuiAppearance="floating" [class.shown]="viewModel().editingMessage()">
+  <div id="message-box-extension" tuiAppearance="floating" [class.shown]="viewModel().editingMessage()" [class.fullWidth]="breakpoint() != 'desktopLarge'">
    <div id="content">
      @if (viewModel().editingMessage()) {
        <tui-icon icon="@tui.pencil"></tui-icon>
@@ -59,7 +59,7 @@
          <tui-icon icon="@tui.paperclip"></tui-icon>
          <span>{{"chat.elements.messageBox.attachments"|translate}}</span>
        } @else {
-          {{viewModel().editingMessage()!.message}}
+          <span style="width: 300px" tuiScrollable tuiFade>{{viewModel().editingMessage()!.message}}</span>
        }
      }
    </div>
@@ -80,12 +80,12 @@
      </button>
    </div>
    <div class="items-middle">
-      <textarea (keydown.enter)="viewModel().message.set(''); handleEnterKeydown($event); viewModel().onMessageSend(message.value, null)" [style]="'height:'+textareaHeight+'px;'" #message (input)="onTextAreaInput(message)" [(ngModel)]="viewModel().message"></textarea>
+      <textarea (keydown.enter)="viewModel().onMessageSend(message.value, null); viewModel().message.set(''); viewModel().editingMessage.set(null); handleEnterKeydown($event)" [style]="'height:'+textareaHeight+'px;'" #message (input)="onTextAreaInput(message)" [(ngModel)]="viewModel().message"></textarea>
      <span class="placeholder"
            [class.hidden]="message.value != ''">{{ "chat.elements.messageBox.placeholder"|translate }}</span>
    </div>
    <div class="items-right">
-      <button [disabled]="message.value.trim() == ''" tuiButton appearance="flat" (click)="viewModel().message.set(''); viewModel().onMessageSend(message.value, null)">
+      <button [disabled]="message.value.trim() == ''" tuiButton appearance="flat" (click)="viewModel().onMessageSend(message.value, null); viewModel().message.set(''); viewModel().editingMessage.set(null);">
        <tui-icon icon="@tui.send"/>
      </button>
    </div>
--- a/src/app/chat/elements/message-box/message-box.scss
+++ b/src/app/chat/elements/message-box/message-box.scss
@@ -67,6 +67,10 @@
      justify-content: center;
      height: 0;

+      &.fullWidth {
+        width: 100%;
+      }
+
      #content {
        padding-left: 10px;
        display: flex;
--- a/src/app/chat/elements/message-box/message-box.ts
+++ b/src/app/chat/elements/message-box/message-box.ts
@@ -5,7 +5,7 @@ import {
  TuiButton,
  TuiDialog,
  TuiGroup,
-  TuiIcon,
+  TuiIcon, TuiScrollable,
  TuiScrollbarDirective,
  TuiTextfield
 } from '@taiga-ui/core';
@@ -17,7 +17,7 @@ import {v4 as uuidv4} from 'uuid';
 import {Masonry} from '../masonry/masonry';
 import {Oimg} from '../oimg/oimg';
 import {FileData} from '@chatenium/chatenium-sdk/domain/fileUploadService.schema';
-import {TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
+import {TuiFade, TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';

@Component({
  selector: 'message-box',
@@ -33,7 +33,9 @@ import {TuiTextarea, TuiTextareaComponent} from '@taiga-ui/kit';
    Oimg,
    Masonry,
    TuiTextfield,
-    TuiTextarea
+    TuiTextarea,
+    TuiScrollable,
+    TuiFade
  ],
  templateUrl: './message-box.html',
  styleUrl: './message-box.scss',
--- a/src/app/chat/elements/messages/messages-viewmodel.ts
+++ b/src/app/chat/elements/messages/messages-viewmodel.ts
@@ -0,0 +1,6 @@
+import {signal} from '@angular/core';
+
+export class MessagesViewModel {
+  // Saves scrolling state. First value initialized when scrolling to bottom on the message load
+  scrollBarStatus = signal<number>(-1)
+}
--- a/src/app/chat/elements/messages/messages.html
+++ b/src/app/chat/elements/messages/messages.html
@@ -1,69 +1,108 @@
-@if (serviceManager.currentSession != null) {
-  @for (message of messages(); track message.msgid; let i = $index) {
-    <div
-      class="message"
-      [class.author]="
+@if (loading()) {
+  @for (_ of [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]; track _; let i = $index) {
+    <div class="message"
+         [class.chained_start]="i == 0 || i == 3 || i == 6"
+         [class.chained_end]="i == 2 || i == 5 || i == 9"
+         [class.chained_middle]="i != 0 && i != 3 && i != 6 && i != 2 && i != 5 && i != 9"
+         [class.author]="i == 3 || i == 4 || i == 5"
+    >
+      <div class="bubble" [tuiSkeleton]="true">
+        {{i}}
+      </div>
+    </div>
+  }
+} @else {
+  @if (serviceManager.currentSession != null) {
+    @for (message of messages(); track message.msgid; let i = $index) {
+      <div
+        class="message"
+        [class.author]="
        messageAsDm(message).author == serviceManager.currentSession()!.userData.userid ||
        messageAsNetwork(message).author.userid == serviceManager.currentSession()!.userData.userid
      "
-      [class.chained_start]="isMessageStartOfChain(i)"
-      [class.chained_middle]="isMessageMiddleInChain(i)"
-      [class.chained_end]="isMessageEndOfChain(i)"
-    >
-      <div class="above">
-        <span>{{ message.sent_at.T * 1000 | date: 'HH:mm' }}</span>
-      </div>
-      <div class="bubble" tuiDropdownContext [tuiDropdown]="messageContextMenu">
-        <span class="message-text">{{ message.message }}</span>
-        <masonry style="max-height: 300px">
-          @for (file of filterExpressedMedia(message.files); track file) {
-            @if (file.type == "image") {
-              <img [src]="file.path"
-                   style="width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 25px"/>
-            } @else if (file.type == "video") {
-              @if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
-                <video-player maxHeight="300px" maxWidth="300px" [src]="file.path"
-                              [thumbnailOverwrite]="file.extraMetaData['thumbnailMetaData']"></video-player>
-              } @else {
-                <video-player maxHeight="300px" maxWidth="300px" [src]="file.path"></video-player>
-              }
-            }
-          }
-        </masonry>
-
-        <div tuiGroup orientation="vertical" style="width: 100%">
-          @for (file of filterNonExpressedMedia(message.files); track file) {
-            <div style="width: 100%; height: 50px; display: flex; align-items: center; padding: 0 10px; background: var(--tui-background-accent-1); gap: 5px">
-              <tui-icon icon="@tui.file"/>
-              <span>{{ file.fileName }}</span>
-            </div>
-          }
+        [class.chained_start]="isMessageStartOfChain(i)"
+        [class.chained_middle]="isMessageMiddleInChain(i)"
+        [class.chained_end]="isMessageEndOfChain(i)"
+      >
+        <div class="above">
+          <span>{{ message.sent_at.T * 1000 | date: 'HH:mm' }}</span>
        </div>
+        <div class="bubble" tuiDropdownContext [tuiDropdown]="messageContextMenu">
+          <span class="message-text">{{ message.message }}</span>
+          <masonry style="max-height: 300px">
+            @for (file of filterExpressedMedia(message.files); track file) {
+              <div style="position:relative;">
+                @if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
+                  @if (file.extraMetaData['progressShown']) {
+                    <tui-progress-circle
+                      style="position: absolute; top: 0; right: 0; z-index: 10; transform: translate(-50%, -50%)"
+                      [max]="file.extraMetaData['totalChunks']"
+                      [value]="file.extraMetaData['uploadedChunks']"
+                    />
+                  }
+                }
+                @if (file.type == "image") {
+                  <img [src]="file.path"
+                       style="width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 25px"/>
+                } @else if (file.type == "video") {
+                  @if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
+                    <video-player maxHeight="300px" maxWidth="300px" [src]="file.path"
+                                  [thumbnailOverwrite]="file.extraMetaData['thumbnailMetaData']"></video-player>
+                  } @else {
+                    <video-player maxHeight="300px" maxWidth="300px" [src]="file.path"></video-player>
+                  }
+                }
+              </div>
+            }
+          </masonry>
+
+          <div tuiGroup orientation="vertical" style="width: 100%">
+            @for (file of filterNonExpressedMedia(message.files); track file) {
+              <div style="width: 100%; height: 50px; display: flex; align-items: center; padding: 0 10px; background: var(--tui-background-base-alt); gap: 5px">
+                @if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
+                  @if (file.extraMetaData['progressShown']) {
+                    <tui-progress-circle
+                      size="xs"
+                      [max]="file.extraMetaData['totalChunks']"
+                      [value]="file.extraMetaData['uploadedChunks']"
+                    />
+                  } @else {
+                    <tui-icon icon="@tui.file"/>
+                  }
+                } @else {
+                  <tui-icon icon="@tui.file"/>
+                }
+                <span>{{ file.fileName }}</span>
+              </div>
+            }
+          </div>
+        </div>
+        <div class="below"></div>
+
+        <ng-template #messageContextMenu>
+          <tui-data-list>
+            <button
+              tuiOption
+              type="button"
+              iconEnd="@tui.pencil"
+              (click)="messageBoxViewModel().editingMessage.set({message: message.message, messageId: message.msgid}); messageBoxViewModel().message.set(message.message);"
+            >
+              {{ "chat.elements.messages.contextMenu.edit" | translate }}
+            </button>
+
+            <button
+              style="color: var(--tui-text-negative)"
+              tuiOption
+              type="button"
+              iconEnd="@tui.trash"
+              (click)="onDelete.emit(message.msgid)"
+            >
+              {{ "chat.elements.messages.contextMenu.delete" | translate }}
+            </button>
+          </tui-data-list>
+        </ng-template>
      </div>
-      <div class="below"></div>
-
-      <ng-template #messageContextMenu>
-        <tui-data-list>
-          <button
-            tuiOption
-            type="button"
-            iconEnd="@tui.pencil"
-            (click)="messageBoxViewModel().editingMessage.set({message: message.message, messageId: message.msgid}); messageBoxViewModel().message.set(message.message);"
-          >
-            {{ "chat.elements.messages.contextMenu.edit" | translate }}
-          </button>
-
-          <button
-            style="color: var(--tui-text-negative)"
-            tuiOption
-            type="button"
-            iconEnd="@tui.trash"
-            (click)="onDelete.emit(message.msgid)"
-          >
-            {{ "chat.elements.messages.contextMenu.delete" | translate }}
-          </button>
-        </tui-data-list>
-      </ng-template>
-    </div>
+    }
  }
+
 }
--- a/src/app/chat/elements/messages/messages.scss
+++ b/src/app/chat/elements/messages/messages.scss
@@ -17,6 +17,24 @@
      .bubble {
        background: var(--tui-background-accent-1-hover);
      }
+
+      &.chained_start {
+        .bubble {
+          border-radius: 10px 25px 10px 10px !important;
+        }
+      }
+
+      &.chained_middle {
+        .bubble {
+          border-radius: 10px !important;
+        }
+      }
+
+      &.chained_end {
+        .bubble {
+          border-radius: 10px 10px 25px 10px !important;
+        }
+      }
    }

    &.chained_start {
@@ -65,7 +83,7 @@
      padding: 10px;

      .message-text {
-        white-space: none;
+        white-space: break-spaces;
        overflow-wrap: anywhere;
      }
    }
--- a/src/app/chat/elements/messages/messages.ts
+++ b/src/app/chat/elements/messages/messages.ts
@@ -18,6 +18,7 @@ import {TranslatePipe} from '@ngx-translate/core';
 import {MessageBoxViewModel} from '../message-box/message-box-viewmodel';
 import {FileDataWithPreview} from '../message-box/message-box';
 import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
+import {TuiProgressCircle, TuiSkeleton} from '@taiga-ui/kit';

@Component({
  selector: 'messages',
@@ -32,7 +33,9 @@ import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
    TranslatePipe,
    TuiDataListComponent,
    TuiGroup,
-    TuiIcon
+    TuiIcon,
+    TuiProgressCircle,
+    TuiSkeleton
  ],
  templateUrl: './messages.html',
  styleUrl: './messages.scss',
@@ -42,6 +45,7 @@ export class Messages {

  messages = input.required<Message[] | NetworkMessage[]>()
  messageBoxViewModel = input.required<MessageBoxViewModel>()
+  loading = input(false)

  @Output() onDelete = new EventEmitter<string>()

--- a/src/app/chat/network-list/network-list.html
+++ b/src/app/chat/network-list/network-list.html
@@ -1,7 +1,12 @@
 <button disabled tuiButton appearance="secondary" iconStart="@tui.plus">
  {{ "chat.chatnav.networkList.newNetwork"|translate }}
 </button>
-
+@if (serviceManager.networksStatus() == LoadStatus.updating) {
+  <div id="loader">
+    <tui-loader />
+    {{"updating"|translate}}
+  </div>
+}
@for (network of serviceManager.networks(); track network.networkId) {
  <button [class.enlarge]="breakpoint() == 'mobile'" tuiButton
          [appearance]="router.url.startsWith('/chat/network/' + network.networkId) ? 'primary' : 'flat'"
--- a/src/app/chat/network-list/network-list.ts
+++ b/src/app/chat/network-list/network-list.ts
@@ -2,8 +2,7 @@ import {Component, inject, input, OnInit} from '@angular/core';
 import {IndexedDB} from '../../storage/indexed-db';
 import {Router, RouterLink} from '@angular/router';
 import {LoadStatus, ServiceManager} from '../../service-manager';
-import {TUI_BREAKPOINT, TuiButton} from '@taiga-ui/core';
-import {ChatService} from '@chatenium/chatenium-sdk/services/chatService';
+import {TUI_BREAKPOINT, TuiButton, TuiLoader} from '@taiga-ui/core';
 import {NetworkService} from '@chatenium/chatenium-sdk/services/networkService';
 import {Oimg} from '../elements/oimg/oimg';
 import {TranslatePipe} from '@ngx-translate/core';
@@ -14,7 +13,8 @@ import {TranslatePipe} from '@ngx-translate/core';
    Oimg,
    TranslatePipe,
    TuiButton,
-    RouterLink
+    RouterLink,
+    TuiLoader
  ],
  templateUrl: './network-list.html',
  styleUrl: './network-list.scss',
@@ -30,12 +30,22 @@ export class NetworkList implements OnInit {

  async ngOnInit() {
    this.serviceManager.networkService = new NetworkService(this.userid(), this.token(), "", this.indexedDb.getApi(), () => {})
-    try {
-      this.serviceManager.networks.set(await this.serviceManager.networkService.get())
-      this.serviceManager.networksStatus.set(LoadStatus.loaded)
-    } catch (e) {
-      console.error(e)
-      this.serviceManager.networksStatus.set(LoadStatus.error)
+    if (this.serviceManager.networksStatus() != LoadStatus.loaded) {
+      try {
+        this.serviceManager.networks.set(await this.serviceManager.networkService.getQuick())
+        this.serviceManager.networksStatus.set(LoadStatus.updating)
+      } catch (e) {
+        console.warn(`Cache load failed: ${e}. Skipping cache load...`)
+      }
+      try {
+        this.serviceManager.networks.set(await this.serviceManager.networkService.get())
+        this.serviceManager.networksStatus.set(LoadStatus.loaded)
+      } catch (e) {
+        console.error(e)
+        this.serviceManager.networksStatus.set(LoadStatus.error)
+      }
    }
  }
+
+  protected readonly LoadStatus = LoadStatus;
 }
--- a/src/app/chat/network/channel/text/text.html
+++ b/src/app/chat/network/channel/text/text.html
@@ -25,7 +25,7 @@
      </div>
    </navbar>

-    <messages [messageBoxViewModel]="store!.messageBox" [messages]="store!.messages()" id="scrollContainer"
+    <messages [loading]="store!.messagesStatus() == LoadStatus.loading" (scrollend)="handleMessagesScroll($event)" [messageBoxViewModel]="store!.messageBox" [messages]="store!.messages()" id="scrollContainer"
              (onDelete)="deleteMessage($event)"/>

    <message-box [viewModel]="store!.messageBox"/>
--- a/src/app/chat/network/channel/text/text.ts
+++ b/src/app/chat/network/channel/text/text.ts
@@ -1,5 +1,5 @@
 import {Component, inject, signal} from '@angular/core';
-import {DmStorage, ServiceManager, TextChannelStorage} from '../../../../service-manager';
+import {DmStorage, LoadStatus, ServiceManager, TextChannelStorage} from '../../../../service-manager';
 import {ActivatedRoute} from '@angular/router';
 import {IndexedDB} from '../../../../storage/indexed-db';
 import {TUI_BREAKPOINT, TuiButton, TuiIcon} from '@taiga-ui/core';
@@ -12,6 +12,8 @@ import {Message} from '@chatenium/chatenium-sdk/domain/textChannelService.schema
 import {Messages} from '../../../elements/messages/messages';
 import {Navbar} from '../../../elements/navbar/navbar';
 import {Oimg} from '../../../elements/oimg/oimg';
+import {MessagesViewModel} from '../../../elements/messages/messages-viewmodel';
+import {v4 as uuidv4} from 'uuid';

@Component({
  selector: 'app-text',
@@ -65,15 +67,16 @@ export class Text {
          }
        }

-        this.store.messageBox.editingMessage.set(null)
-        this.store.messageBox.message.set("")
        return
      }

      let attachments: Attachment[] = []
      files?.forEach(file => {
-        const extraMetaData: Record<string, string> = {}
+        const extraMetaData: Record<string, any> = {}
        extraMetaData["thumbnailMetaData"] = file.videoThumbnail ?? ""
+        extraMetaData["progressShown"] = true
+        extraMetaData["totalChunks"] = 0
+        extraMetaData["uploadedChunks"] = 0

        attachments.push({
          fileName: file.name,
@@ -87,6 +90,7 @@ export class Text {
        })
      })

+      const tempMsgId = uuidv4()
      this.store.messages.update(value => [...value, {
        author: {
          userid: session.userData.userid,
@@ -94,7 +98,7 @@ export class Text {
          username: session.userData.username,
          displayName: session.userData.displayName
        },
-        msgid: "",
+        msgid: tempMsgId,
        message: message,
        sent_at: {
          T: 0,
@@ -104,7 +108,7 @@ export class Text {
        channelId: "",
        networkId: "",
        categoryId: "",
-        files: [],
+        files: attachments,
        seen: false,
        replyTo: "",
        replyToId: "",
@@ -114,11 +118,12 @@ export class Text {

      this.scrollToBottom("smooth")

-      await this.store.service.sendMessage("", message, null, null, files, <FileUploadProgressListener>{
+      const respMessage = await this.store.service.sendMessage(tempMsgId, message, null, null, files, <FileUploadProgressListener>{
        fileProgressUpdate: (tempMsgId, fileId, allChunks, chunksDone) => {
          this.uploadProgressUpdate(tempMsgId, fileId, allChunks, chunksDone)
        }
      })
+      this.updateTempMessage(tempMsgId, respMessage)
    }
  }

@@ -138,19 +143,69 @@ export class Text {

  scrollToBottom(anim: 'instant' | 'smooth'): void {
    setTimeout(() => {
+      if (!this.store) {
+        return
+      }
      const scrollContainer = <HTMLDivElement>document.querySelector("#scrollContainer")
      scrollContainer.scroll({
-        top: scrollContainer.scrollHeight,
+        top: this.store.messagesVm.scrollBarStatus() == -1 ? scrollContainer.scrollHeight : this.store.messagesVm.scrollBarStatus(),
        left: 0,
        behavior: anim
      });
+
+      if (this.store.messagesVm.scrollBarStatus() == -1) {
+        this.store.messagesVm.scrollBarStatus.set(scrollContainer.scrollHeight)
+      }
    }, 0)
  }

-  uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
-    console.log(fileId, allChunks, chunksDone)
+  handleMessagesScroll(e: any) {
+    if (!this.store) return
+    this.store.messagesVm.scrollBarStatus.set(e.target.scrollTop)
  }

+  uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
+    if (!this.store) return
+    this.store.messages.update(messages =>
+      messages.map(m => {
+        if (m.msgid !== tempMsgId) return m;
+
+        return {
+          ...m,
+          files: m.files.map(f => {
+            if (f.fileId !== fileId) return f;
+            return {
+              ...f,
+              extraMetaData: {
+                ...f.extraMetaData,
+                totalChunks: allChunks,
+                uploadedChunks: chunksDone
+              }
+            };
+          })
+        };
+      })
+    );
+  }
+
+  updateTempMessage(tempMsgId: string, message: Message) {
+    if (!this.store) return
+    this.store.messages.update(messages =>
+      messages.map(m => {
+        if (m.msgid !== tempMsgId) return m;
+
+        return {
+          ...m,
+          msgid: message.msgid,
+          sent_at: message.sent_at,
+          files: m.files.map(f => {
+            f.extraMetaData["progressShown"] = false
+            return f
+          })
+        };
+      })
+    );
+  }
  // The chatid parameter ensures isolation
  onWsListen(action: string, message: string, networkId: string, channelId: string) {
    const data = JSON.parse(message);
@@ -205,6 +260,8 @@ export class Text {
          categoryData: signal(categoryData),
          channelData: signal(channelData),
          messages: signal<Message[]>([]),
+          messagesVm: new MessagesViewModel(),
+          messagesStatus: signal<LoadStatus>(LoadStatus.loading),
          messageBox: new MessageBoxViewModel((msg, files) => this.sendMessage(msg, files)),
          wsListener: (action, data) => this.onWsListen(action, data, networkId, categoryId),
        } as TextChannelStorage;
@@ -222,12 +279,25 @@ export class Text {
        this.serviceManager.networkServices()[networkId].textChannels()[channelId] = newStore;

        const currentStore = this.serviceManager.networkServices()[networkId].textChannels()[channelId]
-        const history = await currentStore.service.get();
-        currentStore.messages.set(history);
+        try {
+          const messagesCache = await currentStore.service.getQuick();
+          currentStore.messages.set(messagesCache);
+          this.scrollToBottom("instant")
+          currentStore.messagesStatus.set(LoadStatus.updating)
+        } catch (e) {
+          console.warn(`Cache load failed: ${e}. Skipping cache load...`)
+        }
+        const messages = await currentStore.service.get();
+        currentStore.messages.set(messages);
+        currentStore.messagesStatus.set(LoadStatus.loaded)
        this.scrollToBottom("instant")

        await currentStore.service.joinWebSocketRoom();
+      } else {
+        this.scrollToBottom("instant")
      }
    });
  }
+
+  protected readonly LoadStatus = LoadStatus;
 }
--- a/src/app/chat/network/network.html
+++ b/src/app/chat/network/network.html
@@ -13,32 +13,70 @@
        <div class="items-right"></div>
      </navbar>

-      <main tuiGroup orientation="vertical" style="width: 100%">
-        @for (category of store.networkData().categories; track category) {
-          <div class="category">
-            <h2>{{category.name}}</h2>
+      <tui-tabs [(activeItemIndex)]="tabActiveIndex">
+        <button
+          iconStart="@tui.hash"
+          tuiTab
+          type="button"
+        >
+          {{"chat.network.tabs.channels"|translate}}
+        </button>

-            <div tuiGroup orientation="vertical" style="width: 100%">
-              @for (channel of category.channels; track channel) {
-                <button tuiButton class="channel" [appearance]="router.url.endsWith(channel.channelId) ? 'primary' : 'secondary'" [disabled]="channel.type != 'message'" [routerLink]="'/chat/network/'+store.networkData().networkId+'/'+category.categoryId+'/'+channel.channelId">
-                  @switch (channel.type) {
-                    @case ("message") {
-                      <tui-icon icon="@tui.hash"></tui-icon>
-                    }
-                    @case ("broadcast") {
-                      <tui-icon icon="@tui.radio"></tui-icon>
-                    }
-                    @case ("voice") {
-                      <tui-icon icon="@tui.audio-lines"></tui-icon>
-                    }
+        <button
+          disabled
+          iconStart="@tui.users"
+          tuiTab
+          type="button"
+        >
+          {{"chat.network.tabs.members"|translate}}
+        </button>
+
+        <button
+          iconStart="@tui.cog"
+          tuiTab
+          type="button"
+        >
+          {{"chat.network.tabs.settings"|translate}}
+        </button>
+      </tui-tabs>
+
+      <br/>
+
+      @switch (tabActiveIndex) {
+        @case (0) {
+          <main tuiGroup orientation="vertical" style="width: 100%">
+            @for (category of store.networkData().categories; track category) {
+              <div class="category">
+                <h2>{{category.name}}</h2>
+
+                <div tuiGroup orientation="vertical" style="width: 100%">
+                  @for (channel of category.channels; track channel) {
+                    <button tuiButton class="channel" [appearance]="router.url.endsWith(channel.channelId) ? 'primary' : 'secondary'" [disabled]="channel.type != 'message'" [routerLink]="'/chat/network/'+store.networkData().networkId+'/'+category.categoryId+'/'+channel.channelId">
+                      @switch (channel.type) {
+                        @case ("message") {
+                          <tui-icon icon="@tui.hash"></tui-icon>
+                        }
+                        @case ("broadcast") {
+                          <tui-icon icon="@tui.radio"></tui-icon>
+                        }
+                        @case ("voice") {
+                          <tui-icon icon="@tui.audio-lines"></tui-icon>
+                        }
+                      }
+                      <span>{{channel.name}}</span>
+                    </button>
                  }
-                  <span>{{channel.name}}</span>
-                </button>
-              }
-            </div>
-          </div>
+                </div>
+              </div>
+            }
+          </main>
        }
-      </main>
+        @case (2) {
+          <main id="settings">
+            <network-settings [networkStore]="this.store"></network-settings>
+          </main>
+        }
+      }
    </div>
  </div>
 }
--- a/src/app/chat/network/network.scss
+++ b/src/app/chat/network/network.scss
@@ -8,6 +8,11 @@
  padding: 15px;
  transition: 0.2s;

+  #network-data {
+    display: flex;
+    flex-direction: column;
+  }
+
  &.routerOutletActive {
    overflow-y: hidden;
    padding: 0;
@@ -42,4 +47,11 @@
      justify-content: start;
    }
  }
+
+  #settings {
+    width: 100%;
+    height: 100%;
+    background: var(--tui-background-base-alt);
+    border-radius: 20px;
+  }
 }
--- a/src/app/chat/network/network.ts
+++ b/src/app/chat/network/network.ts
@@ -11,6 +11,10 @@ import {IndexedDB} from '../../storage/indexed-db';
 import {Navbar} from '../elements/navbar/navbar';
 import {Oimg} from '../elements/oimg/oimg';
 import {TUI_BREAKPOINT, TuiButton, TuiGroup, TuiIcon} from '@taiga-ui/core';
+import {TuiTab, TuiTabsHorizontal, TuiTabsWithMore} from '@taiga-ui/kit';
+import {TuiItem} from '@taiga-ui/cdk';
+import {TranslatePipe} from '@ngx-translate/core';
+import {Settings} from './settings/settings';

@Component({
  selector: 'app-network',
@@ -21,7 +25,13 @@ import {TUI_BREAKPOINT, TuiButton, TuiGroup, TuiIcon} from '@taiga-ui/core';
    TuiGroup,
    TuiButton,
    TuiIcon,
-    RouterLink
+    RouterLink,
+    TuiTabsWithMore,
+    TuiItem,
+    TuiTab,
+    TranslatePipe,
+    TuiTabsHorizontal,
+    Settings
  ],
  templateUrl: './network.html',
  styleUrl: './network.scss',
@@ -33,6 +43,8 @@ export class Network implements OnInit {
  breakpoint = inject(TUI_BREAKPOINT)
  router = inject(Router)

+  tabActiveIndex = 2
+
  routerOutletActive = signal(false)

  networkId = ""
--- a/src/app/chat/network/settings/overview/overview.html
+++ b/src/app/chat/network/settings/overview/overview.html
@@ -0,0 +1,114 @@
+<div tuiGroup id="options" orientation="vertical">
+  <div>
+    <header>
+      <tui-icon icon="@tui.image"></tui-icon>
+      {{ "chat.network.settings.overviewPage.networkPicture"|translate }}
+      <oimg [src]="networkStore().networkData().picture" height="25px" width="25px" [radius]="6"/>
+    </header>
+
+    <main>
+      <button tuiButton appearance="outline" disabled iconEnd="@tui.file-up">
+        {{ "chat.network.settings.overviewPage.uploadNewPicture"|translate }}
+      </button>
+    </main>
+  </div>
+  <div>
+    <ng-template [(tuiDialog)]="setNewNameDialogOpen"
+                 [tuiDialogOptions]="{label: 'chat.network.settings.overviewPage.setNewName'|translate}">
+
+      <tui-textfield #newName iconStart="@tui.signature">
+        <label tuiLabel>{{"chat.network.settings.overviewPage.setNewNameDialog.label"|translate}}</label>
+        <input type="text" tuiInput>
+      </tui-textfield>
+      @if (setNewNameError() != "") {
+        <tui-error [error]="setNewNameError()"></tui-error>
+      }
+
+      <footer>
+        <button tuiButton iconStart="@tui.check" [loading]="setNewNamePending()" [disabled]="setNewNamePending()" (click)="setNewName(newName.value())">
+          {{'chat.network.settings.overviewPage.setNewName'|translate}}
+        </button>
+      </footer>
+    </ng-template>
+
+    <header>
+      <tui-icon icon="@tui.network"></tui-icon>
+      {{ "chat.network.settings.overviewPage.networkName"|translate }}
+      <b style="color: gray">{{ networkStore().networkData().name }}</b>
+    </header>
+    <main>
+      <button (click)="setNewNameDialogOpen.set(true)" tuiButton appearance="outline" iconEnd="@tui.pencil">
+        {{ "chat.network.settings.overviewPage.setNewName"|translate }}
+      </button>
+    </main>
+
+  </div>
+  <div>
+    <ng-template [(tuiDialog)]="makeNetworkPrivateWarnDialogOpen"
+                 [tuiDialogOptions]="{label: 'chat.network.settings.overviewPage.changeToPrivateDialog.label'|translate}">
+      <ul>
+        <li>
+          <tui-icon icon="@tui.eye-off"/>
+          {{ "chat.network.settings.overviewPage.changeToPrivateDialog.warn.1"|translate }}
+        </li>
+        <li>
+          <tui-icon icon="@tui.ticket"/>
+          {{ "chat.network.settings.overviewPage.changeToPrivateDialog.warn.2"|translate }}
+        </li>
+        <li>
+          <tui-icon icon="@tui.radio"/>
+          {{ "chat.network.settings.overviewPage.changeToPrivateDialog.warn.3"|translate }}
+        </li>
+      </ul>
+      <footer>
+        <button tuiButton iconStart="@tui.eye-off" [loading]="networkVisChangePending()" [disabled]="networkVisChangePending()" (click)="changeVisibility('private')">
+          {{'chat.network.settings.overviewPage.changeToPrivate'|translate}}
+        </button>
+      </footer>
+    </ng-template>
+
+    <ng-template [(tuiDialog)]="makeNetworkPublicWarnDialogOpen"
+                 [tuiDialogOptions]="{label: 'chat.network.settings.overviewPage.changeToPublicDialog.label'|translate}">
+      <ul>
+        <li>
+          <tui-icon icon="@tui.eye"/>
+          {{ "chat.network.settings.overviewPage.changeToPublicDialog.warn.1"|translate }}
+        </li>
+        <li>
+          <tui-icon icon="@tui.ticket"/>
+          {{ "chat.network.settings.overviewPage.changeToPublicDialog.warn.2"|translate }}
+        </li>
+        <li>
+          <tui-icon icon="@tui.radio"/>
+          {{ "chat.network.settings.overviewPage.changeToPublicDialog.warn.3"|translate }}
+        </li>
+      </ul>
+      <footer>
+        <button tuiButton iconStart="@tui.eye" [loading]="networkVisChangePending()" [disabled]="networkVisChangePending()" (click)="changeVisibility('public')">
+          {{'chat.network.settings.overviewPage.changeToPublic'|translate}}
+        </button>
+      </footer>
+    </ng-template>
+
+    <header>
+      @if (networkStore().networkData().visibility == "public") {
+        <tui-icon icon="@tui.eye"></tui-icon>
+      } @else {
+        <tui-icon icon="@tui.eye-off"></tui-icon>
+      }
+      {{ "chat.network.settings.overviewPage.networkVisibility"|translate }}
+    </header>
+
+    <main>
+      @if (networkStore().networkData().visibility == "public") {
+        <button tuiButton appearance="outline" iconEnd="@tui.eye-off" (click)="makeNetworkPrivateWarnDialogOpen.set(true)">
+          {{ "chat.network.settings.overviewPage.changeToPrivate"|translate }}
+        </button>
+      } @else {
+        <button tuiButton appearance="outline" iconEnd="@tui.eye" (click)="makeNetworkPublicWarnDialogOpen.set(true)">
+          {{ "chat.network.settings.overviewPage.changeToPublic"|translate }}
+        </button>
+      }
+    </main>
+  </div>
+</div>
--- a/src/app/chat/network/settings/overview/overview.scss
+++ b/src/app/chat/network/settings/overview/overview.scss
@@ -0,0 +1,31 @@
+#options {
+  display: flex;
+  flex-direction: column;
+
+  div {
+    width: 100%;
+    height: 60px;
+    background: var(--tui-background-base-alt);
+    padding: 15px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    gap: 10px;
+
+    header {
+      display: flex;
+      gap: 5px;
+      align-items: center;
+    }
+
+    main {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+
+      button {
+        height: 35px;
+      }
+    }
+  }
+}
--- a/src/app/chat/network/settings/overview/overview.spec.ts
+++ b/src/app/chat/network/settings/overview/overview.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Overview } from './overview';
+
+describe('Overview', () => {
+  let component: Overview;
+  let fixture: ComponentFixture<Overview>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Overview],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Overview);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/chat/network/settings/overview/overview.ts
+++ b/src/app/chat/network/settings/overview/overview.ts
@@ -0,0 +1,79 @@
+import {Component, inject, input, signal} from '@angular/core';
+import {NetworkStorage} from '../../../../service-manager';
+import {
+  TuiAlertService,
+  TuiButton,
+  TuiDialog,
+  TuiErrorComponent,
+  TuiGroup,
+  TuiIcon,
+  TuiInputDirective
+} from '@taiga-ui/core';
+import {TranslatePipe} from '@ngx-translate/core';
+import {Oimg} from '../../../elements/oimg/oimg';
+import {environment} from '../../../../../environments/environment';
+import {TuiButtonLoading, TuiComboBox} from '@taiga-ui/kit';
+
+@Component({
+  selector: 'network-settings-overview',
+  imports: [
+    TuiGroup,
+    TranslatePipe,
+    TuiIcon,
+    Oimg,
+    TuiButton,
+    TuiDialog,
+    TuiComboBox,
+    TuiInputDirective,
+    TuiButtonLoading,
+    TuiErrorComponent
+  ],
+  templateUrl: './overview.html',
+  styleUrl: './overview.scss',
+})
+export class Overview {
+  networkStore = input.required<NetworkStorage>()
+  protected readonly environment = environment;
+  protected readonly localStorage = localStorage;
+
+  setNewNameDialogOpen = signal(false)
+  setNewNamePending = signal(false)
+  setNewNameError = signal("")
+
+  makeNetworkPrivateWarnDialogOpen = signal(false)
+  makeNetworkPublicWarnDialogOpen = signal(false)
+  networkVisChangePending = signal(false)
+
+  async setNewName(name: string) {
+    this.setNewNameError.set("")
+    this.setNewNamePending.set(true)
+    try {
+      await this.networkStore().service.editName(name)
+      this.setNewNamePending.set(false)
+      this.setNewNameDialogOpen.set(false)
+      this.networkStore().networkData.update(
+        value => {
+          value.name = name
+          return value
+        }
+      )
+    } catch (e) {
+      this.setNewNamePending.set(false)
+      this.setNewNameError.set(e as string)
+    }
+  }
+
+  async changeVisibility(newVisibility: "public" | "private") {
+    this.networkVisChangePending.set(true)
+    await this.networkStore().service.changeVisibility(newVisibility)
+    this.networkStore().networkData.update(
+      value => {
+        value.visibility = newVisibility
+        return value
+      }
+    )
+    this.networkVisChangePending.set(false)
+    this.makeNetworkPrivateWarnDialogOpen.set(false)
+    this.makeNetworkPublicWarnDialogOpen.set(false)
+  }
+}
--- a/src/app/chat/network/settings/settings.html
+++ b/src/app/chat/network/settings/settings.html
@@ -0,0 +1,29 @@
+<aside>
+  @for (category of networkSettingsOptions; track category) {
+    <header>
+      <tui-icon [icon]="'@tui.'+category.icon"></tui-icon>
+      @if (category.name == "networkName") {
+        {{networkStore().networkData().name}}
+      } @else {
+        {{'chat.network.settings.options.categories.'+category.name|translate}}
+      }
+    </header>
+
+    <div class="optionList">
+      @for (option of category.options; track option;) {
+        <button (click)="selectedOption = option.name" [appearance]="selectedOption == option.name ? 'primary' : 'flat'" tuiButton [disabled]="!option.implemented || !optionRequiredPermissionsGranted(networkStore().networkData().permissions, option.requiredAtLeastOneOf ?? [])">
+          <tui-icon [icon]="'@tui.'+option.icon"></tui-icon>
+          {{'chat.network.settings.options.'+option.name|translate}}
+        </button>
+      }
+    </div>
+  }
+</aside>
+
+<main>
+  @switch (selectedOption) {
+    @case ("overview") {
+      <network-settings-overview [networkStore]="networkStore()"/>
+    }
+  }
+</main>
--- a/src/app/chat/network/settings/settings.scss
+++ b/src/app/chat/network/settings/settings.scss
@@ -0,0 +1,37 @@
+:host {
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 300px 1fr;
+
+  aside {
+    height: 100%;
+    width: 100%;
+    border-radius: 20px 0 0 20px;
+    padding: 15px;
+
+    header {
+      display: flex;
+      gap: 5px;
+      align-items: center;
+    }
+    div {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      padding: 5px;
+
+      button {
+        height: 40px;
+        display: flex;
+        justify-content: start;
+      }
+    }
+  }
+
+  main {
+    background: var(--tui-background-neutral-2);
+    border-radius: 0 20px 20px 0;
+    padding: 15px;
+  }
+}
--- a/src/app/chat/network/settings/settings.spec.ts
+++ b/src/app/chat/network/settings/settings.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Settings } from './settings';
+
+describe('Settings', () => {
+  let component: Settings;
+  let fixture: ComponentFixture<Settings>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Settings],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Settings);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/chat/network/settings/settings.ts
+++ b/src/app/chat/network/settings/settings.ts
@@ -0,0 +1,150 @@
+import {Component, inject, input} from '@angular/core';
+import {TuiButton, TuiGroup, TuiIcon} from '@taiga-ui/core';
+import {permissionGranted, permissions} from '@chatenium/chatenium-sdk/core/permissions';
+import {NetworkStorage, ServiceManager} from '../../../service-manager';
+import {Session} from '@chatenium/chatenium-sdk/domain/sessionManager.schema';
+import {SessionManager} from '@chatenium/chatenium-sdk/services/sessionManager';
+import {TranslatePipe} from '@ngx-translate/core';
+import {Overview} from './overview/overview';
+
+@Component({
+  selector: 'network-settings',
+  imports: [
+    TuiGroup,
+    TuiIcon,
+    TranslatePipe,
+    TuiButton,
+    Overview
+  ],
+  templateUrl: './settings.html',
+  styleUrl: './settings.scss',
+})
+export class Settings {
+  serviceManager = inject(ServiceManager)
+  networkStore = input.required<NetworkStorage>()
+
+  selectedOption = "overview"
+
+  optionRequiredPermissionsGranted(permissions: number, required: number[]) {
+    if (!this.serviceManager.currentSession) {
+      return false
+    }
+
+    let granted = false;
+
+    if (this.networkStore().networkData().createdBy == this.serviceManager.currentSession()!.userData.userid) {
+      return true
+    }
+
+    required.forEach((permission) => {
+      if (permissionGranted(permissions, permission)) {
+        granted = true
+      }
+    })
+
+    return granted
+  }
+
+  networkSettingsOptions: {
+    name: string,
+    icon: string,
+    options: {
+      name: string, // ? channel.settings.[name]
+      icon: string // ? Class name
+      requiredAtLeastOneOf?: number[],
+      implemented: boolean
+    }[]
+  }[] = [
+    {
+      name: "networkName", // ? UI Will show network name
+      icon: "network",
+      options: [
+        {
+          icon: "eye",
+          name: "overview",
+          implemented: true,
+          requiredAtLeastOneOf: [permissions.changeNetworkNamePictureAndVisibility]
+        },
+        {
+          name: "rank",
+          icon: "book",
+          requiredAtLeastOneOf: [permissions.createAndEditRanks, permissions.deleteRanks],
+          implemented: false,
+        },
+        {
+          name: "emoji",
+          icon: "smile",
+          implemented: false,
+          requiredAtLeastOneOf: [permissions.createEmojis]
+        },
+        {
+          name: "embed",
+          icon: "code",
+          implemented: false,
+          requiredAtLeastOneOf: [permissions.manageEmbed]
+        },
+        {
+          name: "invite",
+          icon: "ticket",
+          implemented: false,
+          requiredAtLeastOneOf: [permissions.createInvites, permissions.deleteInvites]
+        }
+      ]
+    },
+    {
+      name: "apps",
+      icon: "layout-panel-left",
+      options: [
+        {
+          name: "webhook",
+          icon: "globe",
+          implemented: false,
+          requiredAtLeastOneOf: [permissions.deleteWebhooks, permissions.createWebhooks]
+        },
+        {
+          name: "bots",
+          icon: "bot",
+          implemented: false,
+        }
+      ]
+    },
+    {
+      name: "moderation",
+      icon: "shield-half",
+      options: [
+        {
+          name: "activityHistory",
+          icon: "scroll-text",
+          implemented: false,
+        },
+        {
+          name: "bans",
+          icon: "gavel",
+          implemented: false,
+          requiredAtLeastOneOf: [permissions.banMembers]
+        }
+      ]
+    },
+    {
+      name: "community",
+      icon: "users",
+      options: [
+        {
+          name: "communityChannels",
+          icon: "hash",
+          implemented: false,
+        },
+        {
+          name: "networkIntroducer",
+          icon: "network",
+          implemented: false,
+        },
+        {
+          name: "members",
+          icon: "users",
+          implemented: false,
+        }
+      ]
+    }
+  ]
+}
--- a/src/app/chat/picture-list/picture-list.ts
+++ b/src/app/chat/picture-list/picture-list.ts
@@ -30,12 +30,20 @@ export class PictureList implements OnInit {

  async ngOnInit() {
    this.serviceManager.chatService = new ChatService(this.userid(), this.token(), this.indexedDb.getApi(), () => {})
-    try {
-      this.serviceManager.chats.set(await this.serviceManager.chatService.get())
-      this.serviceManager.chatsStatus.set(LoadStatus.loaded)
-    } catch (e) {
-      console.error(e)
-      this.serviceManager.chatsStatus.set(LoadStatus.error)
+    if (this.serviceManager.chatsStatus() != LoadStatus.loaded) {
+      try {
+        this.serviceManager.chats.set(await this.serviceManager.chatService.getQuick())
+        this.serviceManager.chatsStatus.set(LoadStatus.updating)
+      } catch (e) {
+        console.warn(`Cache load failed: ${e}. Skipping cache load...`)
+      }
+      try {
+        this.serviceManager.chats.set(await this.serviceManager.chatService.get())
+        this.serviceManager.chatsStatus.set(LoadStatus.loaded)
+      } catch (e) {
+        console.error(e)
+        this.serviceManager.chatsStatus.set(LoadStatus.error)
+      }
    }
  }
 }
--- a/src/app/chat/user-settings/security/email/email.html
+++ b/src/app/chat/user-settings/security/email/email.html
@@ -0,0 +1,100 @@
+<div class="option" [class.mobile]="breakpoint() == 'mobile'">
+  <ng-template [(tuiDialog)]="changeEmailDialogOpen"
+               [tuiDialogOptions]="{label: ('chat.userSettingsDialog.security.changeEmailDialog.'+ (changeEmailRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.emailSet ? 'label' : 'labelSet'))|translate}">
+    <p>{{ "chat.userSettingsDialog.security.changeEmailDialog.warn"|translate }}</p>
+    @if (step() == 0) {
+      <form [formGroup]="changeEmailForm" style="display: flex; flex-direction: column; gap: 10px">
+        @if (!changeEmailRemoveMode()) {
+          <tui-textfield iconStart="@tui.mail">
+            <label
+              tuiLabel>{{ "chat.userSettingsDialog.security.changeEmailDialog.newMail"|translate }}</label>
+            <input formControlName="newAddress" tuiInput type="email">
+          </tui-textfield>
+        }
+
+        <tui-textfield iconStart="@tui.key">
+          <label tuiLabel>{{ "chat.userSettingsDialog.security.changeEmailDialog.currentPassword"|translate }}</label>
+          <input formControlName="currentPassword" tuiInput type="password">
+        </tui-textfield>
+
+        @if (changeEmailForm.controls['currentPassword'].dirty) {
+          @if (changeEmailForm.controls['currentPassword'].hasError("required")) {
+            <tui-error
+              [error]="'chat.userSettingsDialog.security.changeEmailDialog.errors.currentPasswordRequired'|translate"></tui-error>
+          }
+
+          @if (changeEmailForm.controls['currentPassword'].hasError("incorrect")) {
+            <tui-error
+              [error]="'chat.userSettingsDialog.security.changeEmailDialog.errors.incorrectPassword'|translate"></tui-error>
+          }
+        }
+      </form>
+
+      <footer>
+        <button tuiButton iconStart="@tui.check" [loading]="changeEmailPending()"
+                [disabled]="changeEmailPending()"
+                (click)="changeEmail(changeEmailForm.controls['currentPassword'].value, changeEmailForm.controls['newAddress'].value)">
+          {{ ('chat.userSettingsDialog.security.changeEmailDialog.' + (changeEmailRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
+        </button>
+      </footer>
+    } @else {
+      <form style="display: flex; flex-direction: column; gap: 10px" [formGroup]="verifyEmailForm">
+        @if (serviceManager.currentSession()!.userData.emailSet) {
+          <tui-textfield iconStart="@tui.mail">
+            <label tuiLabel>{{ "chat.userSettingsDialog.security.changeEmailDialog.oldCode"|translate }}</label>
+            <input tuiInput type="number" [step]="1" formControlName="oldCode">
+          </tui-textfield>
+        }
+
+        @if (!changeEmailRemoveMode()) {
+          <tui-textfield iconStart="@tui.badge-plus">
+            <label tuiLabel>{{ "chat.userSettingsDialog.security.changeEmailDialog.newCode"|translate }}</label>
+            <input tuiInput type="number" [step]="1" formControlName="newCode">
+          </tui-textfield>
+        }
+      </form>
+
+      <footer>
+        <button tuiButton iconStart="@tui.check" [loading]="verifyEmailPending()"
+                [disabled]="verifyEmailForm.invalid || verifyEmailPending()"
+                (click)="verifyEmail(verifyEmailForm.controls['newCode'].value, verifyEmailForm.controls['oldCode'].value)">
+          {{ ('chat.userSettingsDialog.security.changeEmailDialog.' + (changeEmailRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
+        </button>
+      </footer>
+    }
+  </ng-template>
+
+  <header>
+    <tui-icon icon="@tui.mail"/>
+    <span>{{ "chat.userSettingsDialog.security.email"|translate }}</span>
+
+    @if (serviceManager.currentSession()!.userData.emailSet) {
+      <div tuiBadge appearance="positive"
+           iconStart="@tui.check">{{ 'chat.userSettingsDialog.security.set'|translate }}
+      </div>
+    } @else {
+      <div tuiBadge appearance="negative"
+           iconStart="@tui.x">{{ 'chat.userSettingsDialog.security.notSet'|translate }}
+      </div>
+    }
+  </header>
+
+  <main>
+    <button tuiButton appearance="outline" (click)="openChangeEmailDialog(false)"
+            [iconStart]="serviceManager.currentSession()!.userData.emailSet ? '@tui.pencil' : '@tui.plus'">
+      @if (serviceManager.currentSession()!.userData.phoneSet) {
+        {{ "chat.userSettingsDialog.security.changeMail"|translate }}
+      } @else {
+        {{ "chat.userSettingsDialog.security.setMail"|translate }}
+      }
+    </button>
+
+    @if (serviceManager.currentSession()!.userData.emailSet) {
+      <button tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x" [disabled]="!serviceManager.currentSession()!.userData.phoneSet && !serviceManager.currentSession()!.userData.phoneSet"
+              (click)="openChangeEmailDialog(true)"
+              style="color: var(--tui-text-negative)">
+        {{ "chat.userSettingsDialog.security.removeMail"|translate }}
+      </button>
+    }
+  </main>
+</div>
--- a/src/app/chat/user-settings/security/email/email.scss
+++ b/src/app/chat/user-settings/security/email/email.scss
--- a/src/app/chat/user-settings/security/email/email.spec.ts
+++ b/src/app/chat/user-settings/security/email/email.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Email } from './email';
+
+describe('Email', () => {
+  let component: Email;
+  let fixture: ComponentFixture<Email>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Email],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Email);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/chat/user-settings/security/email/email.ts
+++ b/src/app/chat/user-settings/security/email/email.ts
@@ -0,0 +1,112 @@
+import {Component, inject, signal} from '@angular/core';
+import {TranslatePipe} from '@ngx-translate/core';
+import {TuiBadge, TuiButtonLoading, TuiInputNumber} from '@taiga-ui/kit';
+import {
+  TUI_BREAKPOINT,
+  TuiButton,
+  TuiDialog,
+  TuiErrorComponent,
+  TuiIcon,
+  TuiInputDirective,
+  TuiLabel,
+  TuiTextfieldComponent
+} from '@taiga-ui/core';
+import {ServiceManager} from '../../../../service-manager';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  ValidationErrors,
+  Validators
+} from '@angular/forms';
+
+@Component({
+  selector: 'user-settings-security-email',
+  imports: [
+    TranslatePipe,
+    TuiBadge,
+    TuiButton,
+    TuiIcon,
+    ReactiveFormsModule,
+    TuiButtonLoading,
+    TuiDialog,
+    TuiErrorComponent,
+    TuiInputDirective,
+    TuiLabel,
+    TuiTextfieldComponent,
+    TuiInputNumber,
+  ],
+  templateUrl: './email.html',
+  styleUrl: './email.scss',
+})
+export class Email {
+  serviceManager = inject(ServiceManager)
+  breakpoint = inject(TUI_BREAKPOINT)
+
+  step = signal(0)
+  changeEmailDialogOpen = signal(false)
+  changeEmailRemoveMode = signal(false)
+  changeEmailPending = signal(false)
+  verifyEmailPending = signal(false)
+  newAddress = ""
+
+  changeEmailForm = new FormGroup({
+    newAddress: new FormControl(""),
+    currentPassword: new FormControl(""),
+  })
+
+  verifyEmailForm = new FormGroup({
+    oldCode: new FormControl(0),
+    newCode: new FormControl(0, {validators: [Validators.required]})
+  })
+
+  openChangeEmailDialog(modeRemove: boolean) {
+    this.changeEmailDialogOpen.set(true)
+    this.changeEmailRemoveMode.set(modeRemove)
+    this.changeEmailForm.controls["currentPassword"].clearValidators()
+    this.changeEmailForm.controls["newAddress"].clearValidators()
+    if (!modeRemove) {
+      this.changeEmailForm.controls["newAddress"].setValidators([Validators.required])
+      this.changeEmailForm.controls["newAddress"].updateValueAndValidity()
+    }
+
+    this.changeEmailForm.controls["currentPassword"].setValidators([Validators.required])
+    this.changeEmailForm.controls["currentPassword"].updateValueAndValidity()
+  }
+
+  async changeEmail(currentPassword: string | null, newMail: string | null) {
+    if (this.changeEmailRemoveMode()) {
+      newMail = "remove"
+    }
+    this.changeEmailPending.set(true)
+    const service = this.serviceManager.currentSessionHandler
+    if (service) {
+      try {
+        await service.changeEmail(newMail ?? "", currentPassword ?? "")
+        this.step.set(1)
+        this.newAddress = newMail ?? ""
+        if (!this.changeEmailRemoveMode()) {
+          this.verifyEmailForm.controls["oldCode"].setValidators([Validators.required])
+        }
+      } catch (e) {
+        this.changeEmailForm.controls["currentPassword"].setErrors({incorrect: true})
+        this.changeEmailPending.set(false)
+      }
+    }
+  }
+
+  async verifyEmail(newCode: number | null, oldCode: number | null) {
+    this.verifyEmailPending.set(true)
+    const service = this.serviceManager.currentSessionHandler
+    if (service) {
+      try {
+        await service.verifyEmailChange(oldCode ?? 0, newCode ?? 0, this.newAddress)
+        this.changeEmailDialogOpen.set(false)
+      } catch (e) {
+        this.verifyEmailForm.controls["newCode"].setErrors({incorrect: true})
+        this.verifyEmailPending.set(false)
+      }
+    }
+  }
+}
--- a/src/app/chat/user-settings/security/password/password.html
+++ b/src/app/chat/user-settings/security/password/password.html
@@ -0,0 +1,81 @@
+<div class="option" [class.mobile]="breakpoint() == 'mobile'">
+  <ng-template [(tuiDialog)]="changePasswordDialogOpen"
+               [tuiDialogOptions]="{label: ('chat.userSettingsDialog.security.changePasswordDialog.'+ (changePasswordRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate}">
+    <p>{{"chat.userSettingsDialog.security.changePasswordDialog.warn"|translate}}</p>
+    <form [formGroup]="changeEmailForm" style="display: flex; flex-direction: column; gap: 10px">
+      @if (serviceManager.currentSession()!.userData.passwordSet) {
+        <tui-textfield iconStart="@tui.key">
+          <label
+            tuiLabel>{{ "chat.userSettingsDialog.security.changePasswordDialog.currentPassword"|translate }}</label>
+          <input formControlName="currentPassword" tuiInput type="password">
+        </tui-textfield>
+
+        @if (changeEmailForm.controls['currentPassword'].dirty) {
+          @if (changeEmailForm.controls['currentPassword'].hasError("required")) {
+            <tui-error
+              [error]="'chat.userSettingsDialog.security.changePasswordDialog.errors.currentPasswordRequired'|translate"></tui-error>
+          }
+
+          @if (changeEmailForm.controls['currentPassword'].hasError("incorrect")) {
+            <tui-error
+              [error]="'chat.userSettingsDialog.security.changePasswordDialog.errors.incorrectPassword'|translate"></tui-error>
+          }
+        }
+      }
+
+      @if (!changePasswordRemoveMode()) {
+        <tui-textfield iconStart="@tui.badge-plus">
+          <label tuiLabel>{{ "chat.userSettingsDialog.security.changePasswordDialog.newPassword"|translate }}</label>
+          <input formControlName="newPassword" tuiInput type="password">
+        </tui-textfield>
+
+        <tui-textfield iconStart="@tui.badge-plus">
+          <label
+            tuiLabel>{{ "chat.userSettingsDialog.security.changePasswordDialog.newPasswordRepeat"|translate }}</label>
+          <input formControlName="newPasswordRepeat" tuiInput type="password">
+        </tui-textfield>
+      }
+    </form>
+
+    <footer>
+      <button tuiButton iconStart="@tui.check" [loading]="changePasswordPending()"
+              [disabled]="changeEmailForm.invalid || changePasswordPending()"
+              (click)="changePassword(changeEmailForm.controls['currentPassword'].value, changeEmailForm.controls['newPassword'].value)">
+        {{ ('chat.userSettingsDialog.security.changePasswordDialog.' + (changePasswordRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
+      </button>
+    </footer>
+  </ng-template>
+
+  <header>
+    <tui-icon icon="@tui.key"/>
+    <span>{{ "chat.userSettingsDialog.security.password"|translate }}</span>
+
+    @if (serviceManager.currentSession()!.userData.passwordSet) {
+      <div tuiBadge appearance="positive"
+           iconStart="@tui.check">{{ 'chat.userSettingsDialog.security.set'|translate }}
+      </div>
+    } @else {
+      <div tuiBadge appearance="negative"
+           iconStart="@tui.x">{{ 'chat.userSettingsDialog.security.notSet'|translate }}
+      </div>
+    }
+  </header>
+
+  <main>
+    <button tuiButton appearance="outline" (click)="openChangePasswordDialog(false)"
+            [iconStart]="serviceManager.currentSession()!.userData.passwordSet ? '@tui.pencil' : '@tui.plus'">
+      @if (serviceManager.currentSession()!.userData.passwordSet) {
+        {{ "chat.userSettingsDialog.security.changePassword"|translate }}
+      } @else {
+        {{ "chat.userSettingsDialog.security.setPassword"|translate }}
+      }
+    </button>
+
+    @if (serviceManager.currentSession()!.userData.passwordSet) {
+      <button tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x" [disabled]="!serviceManager.currentSession()!.userData.phoneSet && !serviceManager.currentSession()!.userData.emailSet"
+              style="color: var(--tui-text-negative)" (click)="openChangePasswordDialog(true)">
+        {{ "chat.userSettingsDialog.security.removePassword"|translate }}
+      </button>
+    }
+  </main>
+</div>
--- a/src/app/chat/user-settings/security/password/password.scss
+++ b/src/app/chat/user-settings/security/password/password.scss
@@ -0,0 +1,3 @@
+:host {
+  width: 100%;
+}
--- a/src/app/chat/user-settings/security/password/password.spec.ts
+++ b/src/app/chat/user-settings/security/password/password.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Password } from './password';
+
+describe('Password', () => {
+  let component: Password;
+  let fixture: ComponentFixture<Password>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Password],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Password);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/chat/user-settings/security/password/password.ts
+++ b/src/app/chat/user-settings/security/password/password.ts
@@ -0,0 +1,93 @@
+import {Component, inject, signal} from '@angular/core';
+import {ServiceManager} from '../../../../service-manager';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  ValidationErrors,
+  Validators
+} from '@angular/forms';
+import {TranslatePipe} from '@ngx-translate/core';
+import {TuiBadge, TuiButtonLoading} from '@taiga-ui/kit';
+import {
+  TUI_BREAKPOINT,
+  TuiButton,
+  TuiDialog,
+  TuiErrorComponent,
+  TuiIcon,
+  TuiInputDirective,
+  TuiLabel,
+  TuiTextfieldComponent
+} from '@taiga-ui/core';
+
+@Component({
+  selector: 'user-settings-security-password',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    TranslatePipe,
+    TuiBadge,
+    TuiButton,
+    TuiButtonLoading,
+    TuiDialog,
+    TuiErrorComponent,
+    TuiIcon,
+    TuiInputDirective,
+    TuiLabel,
+    TuiTextfieldComponent
+  ],
+  templateUrl: './password.html',
+  styleUrl: './password.scss',
+})
+export class Password {
+  serviceManager = inject(ServiceManager)
+  breakpoint = inject(TUI_BREAKPOINT)
+
+  changePasswordDialogOpen = signal(false)
+  changePasswordRemoveMode = signal(false)
+  changePasswordPending = signal(false)
+
+  changeEmailForm = new FormGroup({
+    currentPassword: new FormControl(""),
+    newPassword: new FormControl(""),
+    newPasswordRepeat: new FormControl("")
+  }, {
+    validators: [(group) => this.chkPassMatch(group)]
+  })
+
+  openChangePasswordDialog(modeRemove: boolean) {
+    this.changePasswordDialogOpen.set(true)
+    this.changePasswordRemoveMode.set(modeRemove)
+    this.changeEmailForm.controls["currentPassword"].clearValidators()
+    this.changeEmailForm.controls["newPassword"].clearValidators()
+    this.changeEmailForm.controls["newPasswordRepeat"].clearValidators()
+    if (!modeRemove) {
+      this.changeEmailForm.controls["newPassword"].setValidators([Validators.required])
+      this.changeEmailForm.controls["newPasswordRepeat"].setValidators([Validators.required])
+      this.changeEmailForm.controls["newPassword"].updateValueAndValidity()
+      this.changeEmailForm.controls["newPasswordRepeat"].updateValueAndValidity()
+    }
+
+    this.changeEmailForm.controls["currentPassword"].setValidators([Validators.required])
+    this.changeEmailForm.controls["currentPassword"].updateValueAndValidity()
+  }
+
+  async changePassword(currentPassword: string | null, newPassword: string | null) {
+    this.changePasswordPending.set(true)
+    const service = this.serviceManager.currentSessionHandler
+    if (service) {
+      try {
+        await service.changePassword(newPassword ?? "", currentPassword ?? "")
+      } catch (e) {
+        this.changeEmailForm.controls["currentPassword"].setErrors({incorrect: true})
+      }
+    }
+  }
+
+  chkPassMatch(group: AbstractControl): ValidationErrors | null {
+    return this.changePasswordRemoveMode() ? null : group.value.newPassword == group.value.newPasswordRepeat
+      ? null : {passMatchError: true};
+  }
+}
--- a/src/app/chat/user-settings/security/phone/phone.html
+++ b/src/app/chat/user-settings/security/phone/phone.html
@@ -0,0 +1,99 @@
+<div class="option" [class.mobile]="breakpoint() == 'mobile'">
+  <ng-template [(tuiDialog)]="changePhoneDialogOpen"
+               [tuiDialogOptions]="{label: ('chat.userSettingsDialog.security.changePhoneDialog.'+ (changePhoneRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.phoneSet ? 'label' : 'labelSet'))|translate}">
+    <p>{{ "chat.userSettingsDialog.security.changePhoneDialog.warn"|translate }}</p>
+    @if (step() == 0) {
+      <form [formGroup]="changePhoneForm" style="display: flex; flex-direction: column; gap: 10px">
+        @if (!changePhoneRemoveMode()) {
+          <tui-textfield>
+            <label
+              tuiLabel>{{ "chat.userSettingsDialog.security.changePhoneDialog.newPhone"|translate }}</label>
+            <input formControlName="newNumber" tuiInputPhoneInternational [countrySearch]="true" [countries]="countries | tuiSortCountries" [(countryIsoCode)]="countryIsoCode">
+          </tui-textfield>
+        }
+
+        <tui-textfield iconStart="@tui.key">
+          <label tuiLabel>{{ "chat.userSettingsDialog.security.changePhoneDialog.currentPassword"|translate }}</label>
+          <input formControlName="currentPassword" tuiInput type="password">
+        </tui-textfield>
+
+        @if (changePhoneForm.controls['currentPassword'].dirty) {
+          @if (changePhoneForm.controls['currentPassword'].hasError("required")) {
+            <tui-error
+              [error]="'chat.userSettingsDialog.security.changePhoneDialog.errors.currentPasswordRequired'|translate"></tui-error>
+          }
+
+          @if (changePhoneForm.controls['currentPassword'].hasError("incorrect")) {
+            <tui-error
+              [error]="'chat.userSettingsDialog.security.changePhoneDialog.errors.incorrectPassword'|translate"></tui-error>
+          }
+        }
+      </form>
+
+      <footer>
+        <button tuiButton iconStart="@tui.check" [loading]="changePhonePending()"
+                [disabled]="changePhonePending()"
+                (click)="changePhone(changePhoneForm.controls['currentPassword'].value, changePhoneForm.controls['newNumber'].value)">
+          {{ ('chat.userSettingsDialog.security.changePhoneDialog.' + (changePhoneRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
+        </button>
+      </footer>
+    } @else {
+      <form style="display: flex; flex-direction: column; gap: 10px" [formGroup]="verifyPhoneForm">
+        @if (serviceManager.currentSession()!.userData.phoneSet) {
+          <tui-textfield iconStart="@tui.phone">
+            <label tuiLabel>{{ "chat.userSettingsDialog.security.changePhoneDialog.oldCode"|translate }}</label>
+            <input tuiInput type="number" [step]="1" formControlName="oldCode">
+          </tui-textfield>
+        }
+
+        @if (!changePhoneRemoveMode()) {
+          <tui-textfield iconStart="@tui.badge-plus">
+            <label tuiLabel>{{ "chat.userSettingsDialog.security.changePhoneDialog.newCode"|translate }}</label>
+            <input tuiInput type="number" [step]="1" formControlName="newCode">
+          </tui-textfield>
+        }
+      </form>
+
+      <footer>
+        <button tuiButton iconStart="@tui.check" [loading]="verifyPhonePending()"
+                [disabled]="verifyPhoneForm.invalid || verifyPhonePending()"
+                (click)="verifyPhone(verifyPhoneForm.controls['newCode'].value, verifyPhoneForm.controls['oldCode'].value)">
+          {{ ('chat.userSettingsDialog.security.changePhoneDialog.' + (changePhoneRemoveMode() ? 'labelRemove' : serviceManager.currentSession()!.userData.passwordSet ? 'label' : 'labelSet'))|translate }}
+        </button>
+      </footer>
+    }
+  </ng-template>
+
+  <header>
+    <tui-icon icon="@tui.phone"/>
+    <span>{{ "chat.userSettingsDialog.security.phoneNumber"|translate }}</span>
+
+    @if (serviceManager.currentSession()!.userData.phoneSet) {
+      <div tuiBadge appearance="positive"
+           iconStart="@tui.check">{{ 'chat.userSettingsDialog.security.set'|translate }}
+      </div>
+    } @else {
+      <div tuiBadge appearance="negative"
+           iconStart="@tui.x">{{ 'chat.userSettingsDialog.security.notSet'|translate }}
+      </div>
+    }
+  </header>
+
+  <main>
+    <button tuiButton appearance="outline" (click)="openChangePhoneDialog(false)"
+            [iconStart]="serviceManager.currentSession()!.userData.phoneSet ? '@tui.pencil' : '@tui.plus'">
+      @if (serviceManager.currentSession()!.userData.phoneSet) {
+        {{ "chat.userSettingsDialog.security.changePhone"|translate }}
+      } @else {
+        {{ "chat.userSettingsDialog.security.setPhone"|translate }}
+      }
+    </button>
+
+    @if (serviceManager.currentSession()!.userData.phoneSet) {
+      <button [disabled]="!serviceManager.currentSession()!.userData.passwordSet && !serviceManager.currentSession()!.userData.emailSet" tuiButton appearance="outline" tuiAppearanceMode="invalid" iconStart="@tui.x" (click)="openChangePhoneDialog(true)"
+              style="color: var(--tui-text-negative)">
+        {{ "chat.userSettingsDialog.security.removePhone"|translate }}
+      </button>
+    }
+  </main>
+</div>
--- a/src/app/chat/user-settings/security/phone/phone.scss
+++ b/src/app/chat/user-settings/security/phone/phone.scss
--- a/src/app/chat/user-settings/security/phone/phone.spec.ts
+++ b/src/app/chat/user-settings/security/phone/phone.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Phone } from './phone';
+
+describe('Phone', () => {
+  let component: Phone;
+  let fixture: ComponentFixture<Phone>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Phone],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Phone);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/chat/user-settings/security/phone/phone.ts
+++ b/src/app/chat/user-settings/security/phone/phone.ts
@@ -0,0 +1,111 @@
+import {Component, inject, signal} from '@angular/core';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {TranslatePipe} from '@ngx-translate/core';
+import {TuiBadge, TuiButtonLoading, TuiInputPhoneInternationalComponent, TuiSortCountriesPipe} from '@taiga-ui/kit';
+import {
+  TUI_BREAKPOINT,
+  TuiButton,
+  TuiDialog,
+  TuiErrorComponent,
+  TuiIcon,
+  TuiInputDirective,
+  TuiLabel,
+  TuiTextfieldComponent
+} from '@taiga-ui/core';
+import {ServiceManager} from '../../../../service-manager';
+import {getCountries} from 'libphonenumber-js';
+import {TuiCountryIsoCode} from '@taiga-ui/i18n';
+
+@Component({
+  selector: 'user-settings-security-phone',
+  imports: [
+    ReactiveFormsModule,
+    TranslatePipe,
+    TuiBadge,
+    TuiButton,
+    TuiButtonLoading,
+    TuiDialog,
+    TuiErrorComponent,
+    TuiIcon,
+    TuiInputDirective,
+    TuiLabel,
+    TuiTextfieldComponent,
+    TuiInputPhoneInternationalComponent,
+    TuiSortCountriesPipe
+  ],
+  templateUrl: './phone.html',
+  styleUrl: './phone.scss',
+})
+export class Phone {
+  protected readonly countries = getCountries();
+  protected countryIsoCode: TuiCountryIsoCode = 'HU';
+  breakpoint = inject(TUI_BREAKPOINT)
+
+  serviceManager = inject(ServiceManager)
+
+  step = signal(0)
+  changePhoneDialogOpen = signal(false)
+  changePhoneRemoveMode = signal(false)
+  changePhonePending = signal(false)
+  verifyPhonePending = signal(false)
+  newNumber = ""
+
+  changePhoneForm = new FormGroup({
+    newNumber: new FormControl(""),
+    currentPassword: new FormControl(""),
+  })
+
+  verifyPhoneForm = new FormGroup({
+    oldCode: new FormControl(0),
+    newCode: new FormControl(0, {validators: [Validators.required]})
+  })
+
+  openChangePhoneDialog(modeRemove: boolean) {
+    this.changePhoneDialogOpen.set(true)
+    this.changePhoneRemoveMode.set(modeRemove)
+    this.changePhoneForm.controls["currentPassword"].clearValidators()
+    this.changePhoneForm.controls["newNumber"].clearValidators()
+    if (!modeRemove) {
+      this.changePhoneForm.controls["newNumber"].setValidators([Validators.required])
+      this.changePhoneForm.controls["newNumber"].updateValueAndValidity()
+    }
+
+    this.changePhoneForm.controls["currentPassword"].setValidators([Validators.required])
+    this.changePhoneForm.controls["currentPassword"].updateValueAndValidity()
+  }
+
+  async changePhone(currentPassword: string | null, newNumber: string | null) {
+    if (this.changePhoneRemoveMode()) {
+      newNumber = "remove"
+    }
+    this.changePhonePending.set(true)
+    const service = this.serviceManager.currentSessionHandler
+    if (service) {
+      try {
+        await service.changePhoneNumber(currentPassword ?? "", newNumber ?? "")
+        this.step.set(1)
+        this.newNumber = newNumber ?? ""
+        if (!this.changePhoneRemoveMode()) {
+          this.verifyPhoneForm.controls["oldCode"].setValidators([Validators.required])
+        }
+      } catch (e) {
+        this.changePhoneForm.controls["currentPassword"].setErrors({incorrect: true})
+        this.changePhonePending.set(false)
+      }
+    }
+  }
+
+  async verifyPhone(newCode: number | null, oldCode: number | null) {
+    this.verifyPhonePending.set(true)
+    const service = this.serviceManager.currentSessionHandler
+    if (service) {
+      try {
+        await service.verifyPhoneNumberChange(this.newNumber, oldCode ?? 0, newCode ?? 0)
+        this.changePhoneDialogOpen.set(false)
+      } catch (e) {
+        this.verifyPhoneForm.controls["newCode"].setErrors({incorrect: true})
+        this.verifyPhonePending.set(false)
+      }
+    }
+  }
+}
--- a/src/app/chat/user-settings/security/security.html
+++ b/src/app/chat/user-settings/security/security.html
@@ -0,0 +1,9 @@
+<p>
+  <tui-icon icon="@tui.info"/>
+  {{ "chat.userSettingsDialog.security.label"|translate }}
+</p>
+<div id="options" tuiGroup orientation="vertical">
+  <user-settings-security-password/>
+  <user-settings-security-email/>
+  <user-settings-security-phone/>
+</div>
--- a/src/app/chat/user-settings/security/security.scss
+++ b/src/app/chat/user-settings/security/security.scss
@@ -0,0 +1,45 @@
+#options {
+  display: flex;
+  flex-direction: column;
+
+  ::ng-deep .option {
+    width: 100%;
+    height: 60px;
+    background: var(--tui-background-base-alt);
+    padding: 15px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    gap: 10px;
+
+    &.mobile {
+      grid-template-rows: 50px 50px;
+      grid-template-columns: 1fr;
+      height: 150px;
+
+      main {
+        display: flex;
+        justify-content: start;
+        flex-direction: column;
+      }
+    }
+
+    ::ng-deep header {
+      display: flex;
+      gap: 5px;
+      align-items: center;
+    }
+
+    ::ng-deep main {
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      display: flex;
+      gap: 5px;
+
+      button {
+        height: 35px;
+      }
+    }
+  }
+}
--- a/src/app/chat/user-settings/security/security.spec.ts
+++ b/src/app/chat/user-settings/security/security.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Security } from './security';
+
+describe('Security', () => {
+  let component: Security;
+  let fixture: ComponentFixture<Security>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Security],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Security);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/chat/user-settings/security/security.ts
+++ b/src/app/chat/user-settings/security/security.ts
@@ -0,0 +1,43 @@
+import {Component, inject, signal} from '@angular/core';
+import {TuiButton, TuiDialog, TuiErrorComponent, TuiGroup, TuiIcon, TuiInputDirective} from '@taiga-ui/core';
+import {TranslatePipe} from '@ngx-translate/core';
+import {ServiceManager} from '../../../service-manager';
+import {JsonPipe} from '@angular/common';
+import {TuiBadge, TuiButtonLoading, TuiInputColor} from '@taiga-ui/kit';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  ValidationErrors,
+  Validators
+} from '@angular/forms';
+import {Password} from './password/password';
+import {Email} from './email/email';
+import {Phone} from './phone/phone';
+
+@Component({
+  selector: 'user-settings-security',
+  imports: [
+    TuiGroup,
+    TranslatePipe,
+    TuiIcon,
+    JsonPipe,
+    TuiBadge,
+    TuiButton,
+    TuiDialog,
+    ReactiveFormsModule,
+    TuiInputColor,
+    TuiInputDirective,
+    TuiButtonLoading,
+    TuiErrorComponent,
+    Password,
+    Email,
+    Phone
+  ],
+  templateUrl: './security.html',
+  styleUrl: './security.scss',
+})
+export class Security {
+  serviceManager = inject(ServiceManager)
+}
--- a/src/app/chat/user-settings/user-settings.html
+++ b/src/app/chat/user-settings/user-settings.html
@@ -0,0 +1,38 @@
+<div id="layout" [class.mobile]="breakpoint() != 'desktopLarge'">
+  @if (breakpoint() == "desktopLarge" || selectedOption == "") {
+    <aside>
+      <header>
+        <tui-icon icon="@tui.cog"/>
+        <h2>{{ "chat.userSettingsDialog.label"|translate }}</h2>
+
+        @if (breakpoint() != "mobile") {
+          <button tuiButtonX (click)="close.emit()"></button>
+        }
+      </header>
+
+      <div id="options">
+        @for (option of options; track option) {
+          <button [disabled]="!option.implemented" tuiButton [iconStart]="'@tui.'+option.icon" [appearance]="selectedOption == option.name ? 'primary' : 'flat'" (click)="selectedOption = option.name">
+            {{"chat.userSettingsDialog.options."+option.name|translate}}
+          </button>
+        }
+      </div>
+    </aside>
+  }
+
+  @if (breakpoint() == "desktopLarge" || selectedOption != "") {
+    <main>
+      @if (breakpoint() != "desktopLarge") {
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <button tuiButton appearance="flat" iconStart="@tui.arrow-left" (click)="selectedOption = ''"></button>
+          <h3>{{"chat.userSettingsDialog.options."+selectedOption|translate}}</h3>
+        </div>
+      }
+      @switch (selectedOption) {
+        @case ("security") {
+          <user-settings-security/>
+        }
+      }
+    </main>
+  }
+</div>
--- a/src/app/chat/user-settings/user-settings.scss
+++ b/src/app/chat/user-settings/user-settings.scss
@@ -0,0 +1,59 @@
+#layout {
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 300px 1fr;
+
+  &.mobile {
+    grid-template-columns: 1fr;
+
+    aside, main {
+      border-radius: 1.5rem;
+      background: transparent;
+    }
+  }
+
+  aside {
+    background-color: var(--tui-background-base-alt);
+    height: 100%;
+    width: 100%;
+    border-radius: 1.5rem 0 0 1.5rem;
+
+    header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 5px;
+      position: relative;
+
+      tui-icon {
+        font-size: 35px;
+      }
+
+      button {
+        position: absolute;
+        right: 25px;
+      }
+    }
+
+    #options {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      padding: 15px;
+
+      button {
+        width: 100%;
+        display: flex;
+        justify-content: start;
+      }
+    }
+  }
+
+  main {
+    background: var(--tui-background-neutral-2);
+    width: 100%;
+    border-radius: 0 1.5rem 1.5rem 0;
+    padding: 15px;
+  }
+}
--- a/src/app/chat/user-settings/user-settings.spec.ts
+++ b/src/app/chat/user-settings/user-settings.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserSettings } from './user-settings';
+
+describe('UserSettings', () => {
+  let component: UserSettings;
+  let fixture: ComponentFixture<UserSettings>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserSettings],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserSettings);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/chat/user-settings/user-settings.ts
+++ b/src/app/chat/user-settings/user-settings.ts
@@ -0,0 +1,57 @@
+import {Component, EventEmitter, inject, OnInit, Output} from '@angular/core';
+import {TranslatePipe} from '@ngx-translate/core';
+import {TUI_BREAKPOINT, TuiButton, TuiButtonX, TuiIcon} from '@taiga-ui/core';
+import {Security} from './security/security';
+
+@Component({
+  selector: 'user-settings',
+  imports: [
+    TranslatePipe,
+    TuiIcon,
+    TuiButtonX,
+    TuiButton,
+    Security
+  ],
+  templateUrl: './user-settings.html',
+  styleUrl: './user-settings.scss',
+})
+export class UserSettings implements OnInit {
+  breakpoint = inject(TUI_BREAKPOINT)
+
+  @Output() close = new EventEmitter<void>()
+
+  selectedOption = "security"
+  options = [
+    {
+      icon: "shield",
+      name: "security",
+      implemented: true,
+    },
+    {
+      icon: "users",
+      name: "profile",
+      implemented: false,
+    },
+    {
+      icon: "paint-roller",
+      name: "themes",
+      implemented: false,
+    },
+    {
+      icon: "computer",
+      name: "sessions",
+      implemented: false,
+    },
+    {
+      icon: "hard-drive",
+      name: "storage",
+      implemented: false,
+    }
+  ]
+
+  ngOnInit() {
+    if (this.breakpoint() != "desktopLarge") {
+      this.selectedOption = ""
+    }
+  }
+}
--- a/src/app/homepage/homepage.html
+++ b/src/app/homepage/homepage.html
@@ -70,6 +70,11 @@
          {{'home.enterChtnOnWeb'|translate}}
        </button>

+        <button style="width: 350px" tuiButton appearance="secondary" (click)="openGit()">
+          <fa-icon [icon]="faGitAlt" style="font-size: 25px; display: flex; justify-content: center; width: 10px"></fa-icon>
+          Git
+        </button>
+
        <button style="width: 350px" appearance="secondary" (click)="openRoadmap()" tuiButton iconStart="@tui.chart-no-axes-gantt">
          Roadmap
        </button>
@@ -82,71 +87,6 @@
    </div>
  </section>

-  <section class="detailedFeature">
-    <div class="style">
-      <h1>{{ 'home.chtn'|translate }} <span style="color: var(--tui-status-negative)"><tui-icon icon="@tui.circle-gauge"></tui-icon>
-        {{ 'home.adaptsToYou'|translate }}</span></h1>
-      <p>{{ 'home.adaptsToYouDesc'|translate }}</p>
-
-      <div class="cardList">
-        <div tuiCardLarge>
-          <tui-icon icon="@tui.globe" style="font-size: 80px"></tui-icon>
-
-          <h2>{{ 'home.chtnOnWeb'|translate }}</h2>
-          <p>{{ 'home.chtnOnWebDesc'|translate }}</p>
-        </div>
-
-        <div tuiCardLarge>
-          <fa-icon [icon]="faAndroid"></fa-icon>
-
-          <h2>{{ 'home.chtnOnAndroid'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{ 'home.chtnOnAndroidDesc'|translate }}</p>
-        </div>
-
-        <div tuiCardLarge>
-          <fa-icon [icon]="faApple"></fa-icon>
-
-          <h2>{{ 'home.chtnOnApple'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{ 'home.chtnOnAppleDesc'|translate }}</p>
-        </div>
-
-        <div tuiCardLarge>
-          <fa-icon [icon]="faWindows"></fa-icon>
-
-          <h2>{{ 'home.chtnOnWindows'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{ 'home.chtnOnWindowsDesc'|translate }}</p>
-        </div>
-
-        <div tuiCardLarge>
-          <fa-icon [icon]="faLinux"></fa-icon>
-
-          <h2>{{ 'home.chtnOnLinux'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{ 'home.chtnOnLinuxDesc'|translate }}</p>
-        </div>
-
-        <div tuiCardLarge>
-          <fa-icon [icon]="faRecordVinyl"></fa-icon>
-
-          <h2>{{ 'home.chtnEcho'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{ 'home.chtnEchoDesc'|translate }}</p>
-        </div>
-
-        <div tuiCardLarge>
-          <fa-icon [icon]="faDesktop"></fa-icon>
-
-          <h2>{{ 'home.chtnReson'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{ 'home.chtnResonDesc'|translate }}</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
  <section class="detailedFeature">
    <div class="style">
      <h1>{{ 'home.chtnIs'|translate }} <span style="color: var(--tui-status-positive)"><tui-icon icon="@tui.lock"></tui-icon>
@@ -192,48 +132,35 @@
    </div>
  </section>

-  <section class="detailedFeature" style="margin-bottom: 5%;">
+  <section class="detailedFeature" id="platformList" style="margin-bottom: 5%;">
    <div class="style">
-      <h1>{{ 'home.weAreExcitedFor'|translate }} <span style="color: var(--tui-status-negative)"><tui-icon icon="@tui.heart"></tui-icon>
+      <h1>{{ 'home.adaptsTo'|translate }} <span style="color: var(--tui-status-negative)"><tui-icon icon="@tui.heart"></tui-icon>
        {{ 'home.you'|translate }}</span></h1>
-      <p>{{ 'home.weAreExcitedForYouDesc'|translate }}</p>
+      <p>{{ 'home.adaptsToYouDesc'|translate }}</p>

      <div class="cardList">
-        <div tuiCardLarge>
-          <tui-icon icon="@tui.globe" style="font-size: 80px"></tui-icon>
-
-          <h2><a routerLink="/chat">{{ 'home.enterChtnOnWeb'|translate }}</a></h2>
-          <p>{{ 'home.enterChtnOnWebDesc'|translate }}</p>
+        <div class="disabled card">
+          <fa-icon [icon]="faLinux"></fa-icon>
+          <h2>Linux</h2>
+          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
        </div>

-        <div tuiCardLarge>
-          <fa-icon [icon]="faGooglePlay"></fa-icon>
-
-          <h2>{{ 'home.downloadChtnOnAndroid'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{'home.openBetaDesc'|translate}}</p>
-
-          <button (click)="androidBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
+        <div class="disabled card">
+          <fa-icon [icon]="faGoogle"></fa-icon>
+          <h2>Google</h2>
+          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
        </div>

-        <div tuiCardLarge>
-          <fa-icon [icon]="faAppStoreIos"></fa-icon>
-
-          <h2>{{ 'home.downloadChtnOnApple'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{'home.openBetaDesc'|translate}}</p>
-
-          <button (click)="appleBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
+        <div class="disabled card">
+          <fa-icon [icon]="faApple"></fa-icon>
+          <h2>Apple</h2>
+          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
        </div>

-        <div tuiCardLarge>
+        <div class="disabled card">
          <fa-icon [icon]="faMicrosoft"></fa-icon>
-
-          <h2>{{ 'home.downloadOnWindows'|translate }}</h2>
-          <div tuiBadge>{{'home.openBeta'|translate}}</div>
-          <p>{{'home.openBetaDesc'|translate}}</p>
-
-          <button (click)="msBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
+          <h2>Microsoft</h2>
+          <div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
        </div>
      </div>
    </div>
--- a/src/app/homepage/homepage.scss
+++ b/src/app/homepage/homepage.scss
@@ -117,6 +117,35 @@ main {
      font-size: 20px;
    }
  }
+
+  #platformList {
+    .cardList {
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+
+      .card {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        gap: 10px;
+        aspect-ratio: 1/1;
+        background: var(--tui-background-base);
+        border-radius: 1.5rem;
+        cursor: pointer;
+
+        &.disabled {
+          pointer-events: none;
+          opacity: 0.5;
+        }
+
+        fa-icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+  }
 }

 .logo {
--- a/src/app/homepage/homepage.ts
+++ b/src/app/homepage/homepage.ts
@@ -8,7 +8,7 @@ import {FaIconComponent} from '@fortawesome/angular-fontawesome';
 import {
  faAndroid,
  faApple,
-  faAppStoreIos,
+  faAppStoreIos, faGitAlt, faGitee, faGoogle,
  faGooglePlay,
  faLinux,
  faMicrosoft,
@@ -97,6 +97,10 @@ export class Homepage {
    window.open('https://help.chatenium.hu/s/169154db-df3e-44cb-980d-2db1915ecdf8', '_blank')
  }

+  openGit() {
+    window.open('https://git.chatenium.hu', '_blank')
+  }
+
  openMsStore() {
    window.open('https://apps.microsoft.com/detail/9p1xq5vb62b0?ocid=webpdpshare', '_blank')
  }
@@ -150,4 +154,7 @@ export class Homepage {
  protected readonly faGooglePlay = faGooglePlay;
  protected readonly faAppStoreIos = faAppStoreIos;
  protected readonly faMicrosoft = faMicrosoft;
+  protected readonly faGoogle = faGoogle;
+  protected readonly faGitee = faGitee;
+  protected readonly faGitAlt = faGitAlt;
 }
--- a/src/app/service-manager.ts
+++ b/src/app/service-manager.ts
@@ -16,6 +16,9 @@ import {Message as NetworkMessage} from '@chatenium/chatenium-sdk/domain/textCha
 import {PictureService} from '@chatenium/chatenium-sdk/services/pictureService';
 import {Album} from '@chatenium/chatenium-sdk/domain/pictureService.schema';
 import {PublicUserData} from '@chatenium/chatenium-sdk/domain/common.schema';
+import {MessagesViewModel} from './chat/elements/messages/messages-viewmodel';
+import {AuthService} from '@chatenium/chatenium-sdk/services/authService';
+import {UserService} from '@chatenium/chatenium-sdk/services/userService';

@Injectable({
  providedIn: 'root',
@@ -27,6 +30,7 @@ export class ServiceManager {

  sessionManager = new SessionManager(this.database.getApi(), this.keyring.getApi(), this.keyValue.getApi())
  currentSession = signal<Session | null>(null)
+  currentSessionHandler: UserService | null = null

  chatService: ChatService | null = null // Initialized in picture-list.ts
  chatsStatus = signal<LoadStatus>(LoadStatus.loading)
@@ -52,6 +56,8 @@ export enum LoadStatus {
 export interface DmStorage {
  service: DMService
  messages: WritableSignal<Message[]>
+  messagesStatus: WritableSignal<LoadStatus>
+  messagesVm: MessagesViewModel
  chatData: WritableSignal<Chat>
  messageBox: MessageBoxViewModel
  wsListener: (action: string, message: string) => void
@@ -73,6 +79,8 @@ export interface NetworkStorage {
 export interface TextChannelStorage {
  service: TextChannelServiceService
  messages: WritableSignal<NetworkMessage[]>
+  messagesVm: MessagesViewModel
+  messagesStatus: WritableSignal<LoadStatus>
  channelData: WritableSignal<NetworkChannel>
  categoryData: WritableSignal<NetworkCategory>
  messageBox: MessageBoxViewModel
--- a/src/app/storage/indexed-db.ts
+++ b/src/app/storage/indexed-db.ts
@@ -147,7 +147,7 @@ export class IndexedDB {
  delete(storeName: string, key: string): Promise<void> {
    return new Promise((resolve, reject) => {
      if (this.db) {
-        const transaction = this.db.transaction([storeName], "readonly");
+        const transaction = this.db.transaction([storeName], "readwrite");
        const store = transaction.objectStore(storeName);
        const request = store.delete(key);

--- a/src/environments/environment.development.ts
+++ b/src/environments/environment.development.ts
@@ -1,5 +1,5 @@
 export const environment = {
-  version: "3.0-beta5",
+  version: "3.0-beta9",
  api_url: "http://localhost:3000",
  cdn_url: "http://localhost:4000",
  ws_url: "ws://localhost:3000",
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -1,5 +1,5 @@
 export const environment = {
-  version: "3.0-beta5",
+  version: "3.0-beta9",
  api_url: "https://api.chatenium.hu",
  cdn_url: "https://cdn.chatenium.hu",
  ws_url: "wss://api.chatenium.hu",
Author	SHA1	Message	Date
chatenium	5f032c5098	Finished implementing user settings -> security	2026-04-19 12:37:52 +02:00
chatenium	20e67ecd85	Started implementing user settings -> security -> e-mail management	2026-04-18 19:28:51 +02:00
chatenium	4eaaacac2c	Started implementing user settings -> security -> password management	2026-04-18 15:24:37 +02:00
chatenium	8afd4a81b0	3.0 Beta 8	2026-04-17 17:55:42 +02:00
chatenium	a0a6fdaf55	3.0 Beta 7	2026-04-15 17:35:55 +02:00
chatenium	0dc1e15e59	3.0 Beta 6	2026-04-14 17:51:02 +02:00