Merge pull request #138 from LukeGus/dev-1.4.0

Dev 1.4.0
2025-09-01 00:11:26 -05:00
parent a3db62b0f8 8dddbaa86d
commit 26c1cacc9d
36 changed files with 4036 additions and 299 deletions
--- a/.env
+++ b/.env
@@ -1 +1 @@
-VERSION=1.3.1
+VERSION=1.4.0
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -0,0 +1,56 @@
+# Contributing
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/en/download/) (built with v24)
+- [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+- [Git](https://git-scm.com/downloads)
+
+## Installation
+
+1. Clone the repository:
+    ```sh
+    git clone https://github.com/LukeGus/Termix
+    ```
+2. Install the dependencies:
+    ```sh
+    npm install
+    ```
+
+## Running the development server
+
+Run the following commands:
+
+```sh
+npm run dev
+npx tsc -p tsconfig.node.json
+node ./dist/backend/starter.js
+```
+
+This will start the backend and the frontend Vite server. You can access Termix by going to `http://localhost:5174/`.
+
+## Contributing
+
+1. **Fork the repository**: Click the "Fork" button at the top right of
+   the [repository page](https://github.com/LukeGus/Termix).
+2. **Create a new branch**:
+    ```sh
+    git checkout -b feature/my-new-feature
+    ```
+3. **Make your changes**: Implement your feature, fix, or improvement.
+4. **Commit your changes**:
+    ```sh
+    git commit -m "Add feature: my new feature"
+    ```
+5. **Push to your fork**:
+    ```sh
+    git push origin feature/my-new-feature
+    ```
+6. **Open a pull request**: Go to the original repository and create a PR with a clear description.
+
+## 📝 Guidelines
+
+- Follow the existing code style. Use Tailwind CSS with shadcn components.
+- Place all API routes in the `main-axios.ts` file. Updating the `openapi.json` is unneeded.
+- Include meaningful commit messages.
+- Link related issues when applicable.
--- a/README.md
+++ b/README.md
@@ -37,18 +37,17 @@ Termix is an open-source, forever-free, self-hosted all-in-one server management
 - **Remote File Editor** - Edit files directly on remote servers with syntax highlighting, file management features (uploading, removing, renaming, deleting files)
 - **SSH Host Manager** - Save, organize, and manage your SSH connections with tags and folders
 - **Server Stats** - View CPU, memory, and HDD usage on any SSH server
- **User Authentication** - Secure user management with admin controls and OIDC support with more auth types planned
+- **User Authentication** - Secure user management with admin controls and OIDC and 2FA (TOTP) support
 - **Modern UI** - Clean interface built with React, Tailwind CSS, and Shadcn

 # Planned Features
 - **Improved Admin Control** - Give more fine-grained control over user and admin permissions, share hosts, etc
- **More auth types** - Add 2FA, TOTP, etc
- **Theming** - Modify themeing for all tools
+- **Theming** - Modify theming for all tools
 - **Improved Terminal Support** - Add more terminal protocols such as VNC and RDP (anyone who has experience in integrating RDP into a web-application similar to Apache Guacamole, please contact me by creating an issue)
 - **Mobile Support** - Support a mobile app or version of the Termix website to manage servers from your phone

 # Installation
-Visit the Termix [Docs](https://docs.termix.site/docs) for more information on how to install Termix. Otherwise, view a sample docker-compose file here:
+Visit the Termix [Docs](https://docs.termix.site/install) for more information on how to install Termix. Otherwise, view a sample docker-compose file here:
 ```yaml
 services:
  termix:
--- a/openapi.json
+++ b/openapi.json
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,8 @@
        "@tailwindcss/vite": "^4.1.11",
        "@types/bcryptjs": "^2.4.6",
        "@types/multer": "^2.0.0",
+        "@types/qrcode": "^1.5.5",
+        "@types/speakeasy": "^2.0.10",
        "@uiw/codemirror-extensions-hyper-link": "^4.24.1",
        "@uiw/codemirror-extensions-langs": "^4.24.1",
        "@uiw/codemirror-themes": "^4.24.1",
@@ -58,12 +60,14 @@
        "nanoid": "^5.1.5",
        "next-themes": "^0.4.6",
        "node-fetch": "^3.3.2",
+        "qrcode": "^1.5.4",
        "react": "^19.1.0",
        "react-dom": "^19.1.0",
        "react-hook-form": "^7.60.0",
        "react-resizable-panels": "^3.0.3",
        "react-xtermjs": "^1.0.10",
        "sonner": "^2.0.7",
+        "speakeasy": "^2.0.0",
        "ssh2": "^1.16.0",
        "tailwind-merge": "^3.3.1",
        "tailwindcss": "^4.1.11",
@@ -3782,6 +3786,15 @@
        "undici-types": "~7.10.0"
      }
    },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.5.tgz",
+      "integrity": "sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/qs": {
      "version": "6.14.0",
      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
@@ -3835,6 +3848,15 @@
        "@types/send": "*"
      }
    },
+    "node_modules/@types/speakeasy": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/@types/speakeasy/-/speakeasy-2.0.10.tgz",
+      "integrity": "sha512-QVRlDW5r4yl7p7xkNIbAIC/JtyOcClDIIdKfuG7PWdDT1MmyhtXSANsildohy0K+Lmvf/9RUtLbNLMacvrVwxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/ssh2": {
      "version": "1.15.5",
      "resolved": "https://registry.npmjs.org/@types/ssh2/-/ssh2-1.15.5.tgz",
@@ -4400,6 +4422,15 @@
        "url": "https://github.com/sponsors/epoberezkin"
      }
    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/ansi-styles": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -4518,6 +4549,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/base32.js": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/base32.js/-/base32.js-0.0.1.tgz",
+      "integrity": "sha512-EGHIRiegFa62/SsA1J+Xs2tIzludPdzM064N9wjbiEgHnGnJ1V0WEpA4pEwCYT5nDvZk3ubf0shqaCS7k6xeUQ==",
+      "license": "MIT"
+    },
    "node_modules/base64-js": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -4771,6 +4808,15 @@
        "node": ">=6"
      }
    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001727",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
@@ -4829,6 +4875,17 @@
        "url": "https://polar.sh/cva"
      }
    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
    "node_modules/clsx": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -5062,6 +5119,15 @@
        }
      }
    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/decompress-response": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -5136,6 +5202,12 @@
        "node": ">=0.3.1"
      }
    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
    "node_modules/dotenv": {
      "version": "17.2.0",
      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.0.tgz",
@@ -5309,6 +5381,12 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
    "node_modules/encodeurl": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
@@ -5994,6 +6072,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
    "node_modules/get-intrinsic": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -6270,6 +6357,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-glob": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -7195,6 +7291,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -7221,7 +7326,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8"
@@ -7265,6 +7369,15 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.5.6",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -7393,6 +7506,23 @@
        "node": ">=6"
      }
    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/qs": {
      "version": "6.14.0",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
@@ -7616,6 +7746,21 @@
        "node": ">= 6"
      }
    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
    "node_modules/resolve-from": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -7797,6 +7942,12 @@
        "node": ">= 18"
      }
    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
    "node_modules/setprototypeof": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -7962,6 +8113,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/speakeasy": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/speakeasy/-/speakeasy-2.0.0.tgz",
+      "integrity": "sha512-lW2A2s5LKi8rwu77ewisuUOtlCydF/hmQSOJjpTqTj1gZLkNgTaYnyvfxy2WBr4T/h+9c4g8HIITfj83OkFQFw==",
+      "license": "MIT",
+      "dependencies": {
+        "base32.js": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
    "node_modules/ssh2": {
      "version": "1.16.0",
      "resolved": "https://registry.npmjs.org/ssh2/-/ssh2-1.16.0.tgz",
@@ -8005,6 +8168,32 @@
        "safe-buffer": "~5.2.0"
      }
    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/strip-json-comments": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -8611,6 +8800,12 @@
        "node": ">= 8"
      }
    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
    "node_modules/word-wrap": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -8621,6 +8816,20 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -8657,6 +8866,12 @@
        "node": ">=0.4"
      }
    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
    "node_modules/yallist": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
@@ -8666,6 +8881,93 @@
        "node": ">=18"
      }
    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/yn": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -33,6 +33,8 @@
    "@tailwindcss/vite": "^4.1.11",
    "@types/bcryptjs": "^2.4.6",
    "@types/multer": "^2.0.0",
+    "@types/qrcode": "^1.5.5",
+    "@types/speakeasy": "^2.0.10",
    "@uiw/codemirror-extensions-hyper-link": "^4.24.1",
    "@uiw/codemirror-extensions-langs": "^4.24.1",
    "@uiw/codemirror-themes": "^4.24.1",
@@ -62,12 +64,14 @@
    "nanoid": "^5.1.5",
    "next-themes": "^0.4.6",
    "node-fetch": "^3.3.2",
+    "qrcode": "^1.5.4",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^3.0.3",
    "react-xtermjs": "^1.0.10",
    "sonner": "^2.0.7",
+    "speakeasy": "^2.0.0",
    "ssh2": "^1.16.0",
    "tailwind-merge": "^3.3.1",
    "tailwindcss": "^4.1.11",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,10 +2,11 @@ import React, {useState, useEffect} from "react"
 import {LeftSidebar} from "@/ui/Navigation/LeftSidebar.tsx"
 import {Homepage} from "@/ui/Homepage/Homepage.tsx"
 import {AppView} from "@/ui/Navigation/AppView.tsx"
-import {HostManager} from "@/ui/apps/Host Manager/HostManager.tsx"
+import {HostManager} from "@/ui/Apps/Host Manager/HostManager.tsx"
 import {TabProvider, useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx"
 import {TopNavbar} from "@/ui/Navigation/TopNavbar.tsx";
 import { AdminSettings } from "@/ui/Admin/AdminSettings";
+import { UserProfile } from "@/ui/User/UserProfile.tsx";
 import { Toaster } from "@/components/ui/sonner";
 import { getUserInfo } from "@/ui/main-axios.ts";

@@ -86,6 +87,7 @@ function AppContent() {
    const showHome = currentTabData?.type === 'home';
    const showSshManager = currentTabData?.type === 'ssh_manager';
    const showAdmin = currentTabData?.type === 'admin';
+    const showProfile = currentTabData?.type === 'profile';

    return (
        <div>
@@ -187,6 +189,20 @@ function AppContent() {
                        <AdminSettings isTopbarOpen={isTopbarOpen} />
                    </div>

+                    <div
+                        className="h-screen w-full"
+                        style={{
+                            visibility: showProfile ? "visible" : "hidden",
+                            pointerEvents: showProfile ? "auto" : "none",
+                            height: showProfile ? "100vh" : 0,
+                            width: showProfile ? "100%" : 0,
+                            position: showProfile ? "static" : "absolute",
+                            overflow: "auto",
+                        }}
+                    >
+                        <UserProfile isTopbarOpen={isTopbarOpen} />
+                    </div>
+
                    <TopNavbar isTopbarOpen={isTopbarOpen} setIsTopbarOpen={setIsTopbarOpen}/>
                </LeftSidebar>
            )}
--- a/src/backend/database/db/index.ts
+++ b/src/backend/database/db/index.ts
@@ -411,6 +411,11 @@ const migrateSchema = () => {
    addColumnIfNotExists('users', 'identifier_path', 'TEXT');
    addColumnIfNotExists('users', 'name_path', 'TEXT');
    addColumnIfNotExists('users', 'scopes', 'TEXT');
+    
+    // Add TOTP columns
+    addColumnIfNotExists('users', 'totp_secret', 'TEXT');
+    addColumnIfNotExists('users', 'totp_enabled', 'INTEGER NOT NULL DEFAULT 0');
+    addColumnIfNotExists('users', 'totp_backup_codes', 'TEXT');

    addColumnIfNotExists('ssh_data', 'name', 'TEXT');
    addColumnIfNotExists('ssh_data', 'folder', 'TEXT');
--- a/src/backend/database/db/schema.ts
+++ b/src/backend/database/db/schema.ts
@@ -17,6 +17,10 @@ export const users = sqliteTable('users', {
    identifier_path: text('identifier_path'),
    name_path: text('name_path'),
    scopes: text().default("openid email profile"),
+    
+    totp_secret: text('totp_secret'),
+    totp_enabled: integer('totp_enabled', {mode: 'boolean'}).notNull().default(false),
+    totp_backup_codes: text('totp_backup_codes'),
 });

 export const settings = sqliteTable('settings', {
--- a/src/backend/database/routes/users.ts
+++ b/src/backend/database/routes/users.ts
@@ -6,6 +6,8 @@ import chalk from 'chalk';
 import bcrypt from 'bcryptjs';
 import {nanoid} from 'nanoid';
 import jwt from 'jsonwebtoken';
+import speakeasy from 'speakeasy';
+import QRCode from 'qrcode';
 import type {Request, Response, NextFunction} from 'express';

 async function verifyOIDCToken(idToken: string, issuerUrl: string, clientId: string): Promise<any> {
@@ -206,6 +208,9 @@ router.post('/create', async (req, res) => {
            identifier_path: '',
            name_path: '',
            scopes: 'openid email profile',
+            totp_secret: null,
+            totp_enabled: false,
+            totp_backup_codes: null,
        });

        logger.success(`Traditional user created: ${username} (is_admin: ${isFirstUser})`);
@@ -546,6 +551,17 @@ router.post('/login', async (req, res) => {
            expiresIn: '50d',
        });

+        if (userRecord.totp_enabled) {
+            return res.json({
+                requires_totp: true,
+                temp_token: jwt.sign(
+                    {userId: userRecord.id, pending_totp: true},
+                    jwtSecret,
+                    {expiresIn: '10m'}
+                )
+            });
+        }
+
        return res.json({
            token,
            is_admin: !!userRecord.is_admin,
@@ -579,7 +595,8 @@ router.get('/me', authenticateJWT, async (req: Request, res: Response) => {
            userId: user[0].id,
            username: user[0].username,
            is_admin: !!user[0].is_admin,
-            is_oidc: !!user[0].is_oidc
+            is_oidc: !!user[0].is_oidc,
+            totp_enabled: !!user[0].totp_enabled
        });
    } catch (err) {
        logger.error('Failed to get username', err);
@@ -929,6 +946,285 @@ router.post('/remove-admin', authenticateJWT, async (req, res) => {
    }
 });

+// Route: Verify TOTP during login
+// POST /users/totp/verify-login
+router.post('/totp/verify-login', async (req, res) => {
+    const {temp_token, totp_code} = req.body;
+
+    if (!temp_token || !totp_code) {
+        return res.status(400).json({error: 'Token and TOTP code are required'});
+    }
+
+    const jwtSecret = process.env.JWT_SECRET || 'secret';
+    
+    try {
+        const decoded = jwt.verify(temp_token, jwtSecret) as any;
+        if (!decoded.pending_totp) {
+            return res.status(401).json({error: 'Invalid temporary token'});
+        }
+
+        const user = await db.select().from(users).where(eq(users.id, decoded.userId));
+        if (!user || user.length === 0) {
+            return res.status(404).json({error: 'User not found'});
+        }
+
+        const userRecord = user[0];
+        
+        if (!userRecord.totp_enabled || !userRecord.totp_secret) {
+            return res.status(400).json({error: 'TOTP not enabled for this user'});
+        }
+
+        const verified = speakeasy.totp.verify({
+            secret: userRecord.totp_secret,
+            encoding: 'base32',
+            token: totp_code,
+            window: 2
+        });
+
+        if (!verified) {
+            const backupCodes = userRecord.totp_backup_codes ? JSON.parse(userRecord.totp_backup_codes) : [];
+            const backupIndex = backupCodes.indexOf(totp_code);
+            
+            if (backupIndex === -1) {
+                return res.status(401).json({error: 'Invalid TOTP code'});
+            }
+            
+            backupCodes.splice(backupIndex, 1);
+            await db.update(users)
+                .set({totp_backup_codes: JSON.stringify(backupCodes)})
+                .where(eq(users.id, userRecord.id));
+        }
+
+        const token = jwt.sign({userId: userRecord.id}, jwtSecret, {
+            expiresIn: '50d',
+        });
+
+        return res.json({
+            token,
+            is_admin: !!userRecord.is_admin,
+            username: userRecord.username
+        });
+
+    } catch (err) {
+        logger.error('TOTP verification failed', err);
+        return res.status(500).json({error: 'TOTP verification failed'});
+    }
+});
+
+// Route: Setup TOTP
+// POST /users/totp/setup
+router.post('/totp/setup', authenticateJWT, async (req, res) => {
+    const userId = (req as any).userId;
+    
+    try {
+        const user = await db.select().from(users).where(eq(users.id, userId));
+        if (!user || user.length === 0) {
+            return res.status(404).json({error: 'User not found'});
+        }
+
+        const userRecord = user[0];
+        
+        if (userRecord.totp_enabled) {
+            return res.status(400).json({error: 'TOTP is already enabled'});
+        }
+
+        const secret = speakeasy.generateSecret({
+            name: `Termix (${userRecord.username})`,
+            length: 32
+        });
+
+        await db.update(users)
+            .set({totp_secret: secret.base32})
+            .where(eq(users.id, userId));
+
+        const qrCodeUrl = await QRCode.toDataURL(secret.otpauth_url || '');
+
+        res.json({
+            secret: secret.base32,
+            qr_code: qrCodeUrl
+        });
+
+    } catch (err) {
+        logger.error('Failed to setup TOTP', err);
+        res.status(500).json({error: 'Failed to setup TOTP'});
+    }
+});
+
+// Route: Enable TOTP
+// POST /users/totp/enable
+router.post('/totp/enable', authenticateJWT, async (req, res) => {
+    const userId = (req as any).userId;
+    const {totp_code} = req.body;
+
+    if (!totp_code) {
+        return res.status(400).json({error: 'TOTP code is required'});
+    }
+
+    try {
+        const user = await db.select().from(users).where(eq(users.id, userId));
+        if (!user || user.length === 0) {
+            return res.status(404).json({error: 'User not found'});
+        }
+
+        const userRecord = user[0];
+        
+        if (userRecord.totp_enabled) {
+            return res.status(400).json({error: 'TOTP is already enabled'});
+        }
+
+        if (!userRecord.totp_secret) {
+            return res.status(400).json({error: 'TOTP setup not initiated'});
+        }
+
+        const verified = speakeasy.totp.verify({
+            secret: userRecord.totp_secret,
+            encoding: 'base32',
+            token: totp_code,
+            window: 2
+        });
+
+        if (!verified) {
+            return res.status(401).json({error: 'Invalid TOTP code'});
+        }
+
+        const backupCodes = Array.from({length: 8}, () => 
+            Math.random().toString(36).substring(2, 10).toUpperCase()
+        );
+
+        await db.update(users)
+            .set({
+                totp_enabled: true,
+                totp_backup_codes: JSON.stringify(backupCodes)
+            })
+            .where(eq(users.id, userId));
+
+        res.json({
+            message: 'TOTP enabled successfully',
+            backup_codes: backupCodes
+        });
+
+    } catch (err) {
+        logger.error('Failed to enable TOTP', err);
+        res.status(500).json({error: 'Failed to enable TOTP'});
+    }
+});
+
+// Route: Disable TOTP
+// POST /users/totp/disable
+router.post('/totp/disable', authenticateJWT, async (req, res) => {
+    const userId = (req as any).userId;
+    const {password, totp_code} = req.body;
+
+    if (!password && !totp_code) {
+        return res.status(400).json({error: 'Password or TOTP code is required'});
+    }
+
+    try {
+        const user = await db.select().from(users).where(eq(users.id, userId));
+        if (!user || user.length === 0) {
+            return res.status(404).json({error: 'User not found'});
+        }
+
+        const userRecord = user[0];
+        
+        if (!userRecord.totp_enabled) {
+            return res.status(400).json({error: 'TOTP is not enabled'});
+        }
+
+        if (password && !userRecord.is_oidc) {
+            const isMatch = await bcrypt.compare(password, userRecord.password_hash);
+            if (!isMatch) {
+                return res.status(401).json({error: 'Incorrect password'});
+            }
+        } else if (totp_code) {
+            const verified = speakeasy.totp.verify({
+                secret: userRecord.totp_secret!,
+                encoding: 'base32',
+                token: totp_code,
+                window: 2
+            });
+
+            if (!verified) {
+                return res.status(401).json({error: 'Invalid TOTP code'});
+            }
+        } else {
+            return res.status(400).json({error: 'Authentication required'});
+        }
+
+        await db.update(users)
+            .set({
+                totp_enabled: false,
+                totp_secret: null,
+                totp_backup_codes: null
+            })
+            .where(eq(users.id, userId));
+
+        res.json({message: 'TOTP disabled successfully'});
+
+    } catch (err) {
+        logger.error('Failed to disable TOTP', err);
+        res.status(500).json({error: 'Failed to disable TOTP'});
+    }
+});
+
+// Route: Generate new backup codes
+// POST /users/totp/backup-codes
+router.post('/totp/backup-codes', authenticateJWT, async (req, res) => {
+    const userId = (req as any).userId;
+    const {password, totp_code} = req.body;
+
+    if (!password && !totp_code) {
+        return res.status(400).json({error: 'Password or TOTP code is required'});
+    }
+
+    try {
+        const user = await db.select().from(users).where(eq(users.id, userId));
+        if (!user || user.length === 0) {
+            return res.status(404).json({error: 'User not found'});
+        }
+
+        const userRecord = user[0];
+        
+        if (!userRecord.totp_enabled) {
+            return res.status(400).json({error: 'TOTP is not enabled'});
+        }
+
+        if (password && !userRecord.is_oidc) {
+            const isMatch = await bcrypt.compare(password, userRecord.password_hash);
+            if (!isMatch) {
+                return res.status(401).json({error: 'Incorrect password'});
+            }
+        } else if (totp_code) {
+            const verified = speakeasy.totp.verify({
+                secret: userRecord.totp_secret!,
+                encoding: 'base32',
+                token: totp_code,
+                window: 2
+            });
+
+            if (!verified) {
+                return res.status(401).json({error: 'Invalid TOTP code'});
+            }
+        } else {
+            return res.status(400).json({error: 'Authentication required'});
+        }
+
+        const backupCodes = Array.from({length: 8}, () => 
+            Math.random().toString(36).substring(2, 10).toUpperCase()
+        );
+
+        await db.update(users)
+            .set({totp_backup_codes: JSON.stringify(backupCodes)})
+            .where(eq(users.id, userId));
+
+        res.json({backup_codes: backupCodes});
+
+    } catch (err) {
+        logger.error('Failed to generate backup codes', err);
+        res.status(500).json({error: 'Failed to generate backup codes'});
+    }
+});
+
 // Route: Delete user (admin only)
 // DELETE /users/delete-user
 router.delete('/delete-user', authenticateJWT, async (req, res) => {
--- a/src/backend/ssh/server-stats.ts
+++ b/src/backend/ssh/server-stats.ts
@@ -370,7 +370,9 @@ async function pollStatusesOnce(): Promise<void> {

    const checks = hosts.map(async (h) => {
        const isOnline = await tcpPing(h.ip, h.port, 5000);
-        hostStatuses.set(h.id, {status: isOnline ? 'online' : 'offline', lastChecked: now});
+        const now = new Date().toISOString();
+        const statusEntry: StatusEntry = {status: isOnline ? 'online' : 'offline', lastChecked: now};
+        hostStatuses.set(h.id, statusEntry);
        return isOnline;
    });

@@ -396,15 +398,22 @@ app.get('/status/:id', async (req, res) => {
        return res.status(400).json({error: 'Invalid id'});
    }

-    if (!hostStatuses.has(id)) {
-        await pollStatusesOnce();
+    try {
+        const host = await fetchHostById(id);
+        if (!host) {
+            return res.status(404).json({error: 'Host not found'});
+        }
+        
+        const isOnline = await tcpPing(host.ip, host.port, 5000);
+        const now = new Date().toISOString();
+        const statusEntry: StatusEntry = {status: isOnline ? 'online' : 'offline', lastChecked: now};
+        
+        hostStatuses.set(id, statusEntry);
+        res.json(statusEntry);
+    } catch (err) {
+        logger.error('Failed to check host status', err);
+        res.status(500).json({error: 'Failed to check host status'});
    }
-
-    const entry = hostStatuses.get(id);
-    if (!entry) {
-        return res.status(404).json({error: 'Host not found'});
-    }
-    res.json(entry);
 });

 app.post('/refresh', async (req, res) => {
--- a/src/backend/ssh/terminal.ts
+++ b/src/backend/ssh/terminal.ts
@@ -137,7 +137,7 @@ wss.on('connection', (ws: WebSocket) => {
                ws.send(JSON.stringify({type: 'error', message: 'SSH connection timeout'}));
                cleanupSSH(connectionTimeout);
            }
-        }, 15000);
+        }, 60000);

        sshConn.on('ready', () => {
            clearTimeout(connectionTimeout);
@@ -217,7 +217,7 @@ wss.on('connection', (ws: WebSocket) => {
            username,
            keepaliveInterval: 30000,
            keepaliveCountMax: 3,
-            readyTimeout: 10000,
+            readyTimeout: 60000,
            tcpKeepAlive: true,
            tcpKeepAliveInitialDelay: 30000,

--- a/Manager/FIleManagerTopNavbar.tsx
+++ b/Manager/FIleManagerTopNavbar.tsx
--- a/Manager/FileManager.tsx
+++ b/Manager/FileManager.tsx
@@ -1,11 +1,11 @@
 import React, {useState, useEffect, useRef} from "react";
-import {FileManagerLeftSidebar} from "@/ui/apps/File Manager/FileManagerLeftSidebar.tsx";
-import {FileManagerTabList} from "@/ui/apps/File Manager/FileManagerTabList.tsx";
-import {FileManagerHomeView} from "@/ui/apps/File Manager/FileManagerHomeView.tsx";
-import {FileManagerFileEditor} from "@/ui/apps/File Manager/FileManagerFileEditor.tsx";
-import {FileManagerOperations} from "@/ui/apps/File Manager/FileManagerOperations.tsx";
+import {FileManagerLeftSidebar} from "@/ui/Apps/File Manager/FileManagerLeftSidebar.tsx";
+import {FileManagerTabList} from "@/ui/Apps/File Manager/FileManagerTabList.tsx";
+import {FileManagerHomeView} from "@/ui/Apps/File Manager/FileManagerHomeView.tsx";
+import {FileManagerFileEditor} from "@/ui/Apps/File Manager/FileManagerFileEditor.tsx";
+import {FileManagerOperations} from "@/ui/Apps/File Manager/FileManagerOperations.tsx";
 import {Button} from '@/components/ui/button.tsx';
-import {FIleManagerTopNavbar} from "@/ui/apps/File Manager/FIleManagerTopNavbar.tsx";
+import {FIleManagerTopNavbar} from "@/ui/Apps/File Manager/FIleManagerTopNavbar.tsx";
 import {cn} from '@/lib/utils.ts';
 import {Save, RefreshCw, Settings, Trash2} from 'lucide-react';
 import {Separator} from '@/components/ui/separator.tsx';
--- a/Manager/FileManagerFileEditor.tsx
+++ b/Manager/FileManagerFileEditor.tsx
--- a/Manager/FileManagerHomeView.tsx
+++ b/Manager/FileManagerHomeView.tsx
--- a/Manager/FileManagerLeftSidebar.tsx
+++ b/Manager/FileManagerLeftSidebar.tsx
--- a/Manager/FileManagerLeftSidebarFileViewer.tsx
+++ b/Manager/FileManagerLeftSidebarFileViewer.tsx
--- a/Manager/FileManagerOperations.tsx
+++ b/Manager/FileManagerOperations.tsx
--- a/Manager/FileManagerTabList.tsx
+++ b/Manager/FileManagerTabList.tsx
--- a/Manager/HostManager.tsx
+++ b/Manager/HostManager.tsx
@@ -1,8 +1,8 @@
 import React, {useState} from "react";
-import {HostManagerHostViewer} from "@/ui/apps/Host Manager/HostManagerHostViewer.tsx"
+import {HostManagerHostViewer} from "@/ui/Apps/Host Manager/HostManagerHostViewer.tsx"
 import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx";
 import {Separator} from "@/components/ui/separator.tsx";
-import {HostManagerHostEditor} from "@/ui/apps/Host Manager/HostManagerHostEditor.tsx";
+import {HostManagerHostEditor} from "@/ui/Apps/Host Manager/HostManagerHostEditor.tsx";
 import {useSidebar} from "@/components/ui/sidebar.tsx";

 interface HostManagerProps {
--- a/Manager/HostManagerHostEditor.tsx
+++ b/Manager/HostManagerHostEditor.tsx
--- a/Manager/HostManagerHostViewer.tsx
+++ b/Manager/HostManagerHostViewer.tsx
@@ -325,257 +325,7 @@ export function HostManagerHostViewer({onEditHost}: SSHManagerHostViewerProps) {
                        variant="outline"
                        size="sm"
                        onClick={() => {
-                            const infoContent = `
-JSON Import Format Guide
-
-REQUIRED FIELDS:
-• ip: Host IP address (string)
-• port: SSH port (number, 1-65535)
-• username: SSH username (string)
-• authType: "password" or "key"
-
-AUTHENTICATION FIELDS:
-• password: Required if authType is "password"
-• key: SSH private key content (string) if authType is "key"
-• keyPassword: Optional key passphrase
-• keyType: Key type (auto, ssh-rsa, ssh-ed25519, etc.)
-
-OPTIONAL FIELDS:
-• name: Display name (string)
-• folder: Organization folder (string)
-• tags: Array of tag strings
-• pin: Pin to top (boolean)
-• enableTerminal: Show in Terminal tab (boolean, default: true)
-• enableTunnel: Show in Tunnel tab (boolean, default: true)
-• enableFileManager: Show in File Manager tab (boolean, default: true)
-• defaultPath: Default directory path (string)
-
-TUNNEL CONFIGURATION:
-• tunnelConnections: Array of tunnel objects
-  - sourcePort: Local port (number)
-  - endpointPort: Remote port (number)
-  - endpointHost: Target host name (string)
-  - maxRetries: Retry attempts (number, default: 3)
-  - retryInterval: Retry delay in seconds (number, default: 10)
-  - autoStart: Auto-start on launch (boolean, default: false)
-
-EXAMPLE STRUCTURE:
-{
-  "hosts": [
-    {
-      "name": "Web Server",
-      "ip": "192.168.1.100",
-      "port": 22,
-      "username": "admin",
-      "authType": "password",
-      "password": "your_password",
-      "folder": "Production",
-      "tags": ["web", "production"],
-      "pin": true,
-      "enableTerminal": true,
-      "enableTunnel": false,
-      "enableFileManager": true,
-      "defaultPath": "/var/www"
-    }
-  ]
-}
-
-• Maximum 100 hosts per import
-• File should contain a "hosts" array or be an array of host objects
-• All fields are copyable for easy reference
-                            `;
-
-                            const newWindow = window.open('', '_blank', 'width=600,height=800,scrollbars=yes,resizable=yes');
-                            if (newWindow) {
-                                newWindow.document.write(`
-                                    <!DOCTYPE html>
-                                    <html>
-                                    <head>
-                                        <title>SSH JSON Import Guide</title>
-                                        <style>
-                                            body { 
-                                                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
-                                                margin: 20px; 
-                                                background: #1a1a1a; 
-                                                color: #ffffff; 
-                                                line-height: 1.6;
-                                            }
-                                            pre { 
-                                                background: #2a2a2a; 
-                                                padding: 15px; 
-                                                border-radius: 5px; 
-                                                overflow-x: auto; 
-                                                border: 1px solid #404040;
-                                            }
-                                            code { 
-                                                background: #404040; 
-                                                padding: 2px 4px; 
-                                                border-radius: 3px; 
-                                                font-family: 'Consolas', 'Monaco', monospace;
-                                            }
-                                            h1 { color: #60a5fa; border-bottom: 2px solid #60a5fa; padding-bottom: 10px; }
-                                            h2 { color: #34d399; margin-top: 25px; }
-                                            .field-group { margin: 15px 0; }
-                                            .field-item { margin: 8px 0; }
-                                            .copy-btn { 
-                                                background: #3b82f6; 
-                                                color: white; 
-                                                border: none; 
-                                                padding: 5px 10px; 
-                                                border-radius: 3px; 
-                                                cursor: pointer; 
-                                                margin-left: 10px;
-                                            }
-                                            .copy-btn:hover { background: #2563eb; }
-                                        </style>
-                                    </head>
-                                    <body>
-                                        <h1>SSH JSON Import Format Guide</h1>
-                                        <p>Use this guide to create JSON files for bulk importing SSH hosts. All examples are copyable.</p>
-                                        
-                                        <h2>Required Fields</h2>
-                                        <div class="field-group">
-                                            <div class="field-item">
-                                                <code>ip</code> - Host IP address (string)
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('ip')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>port</code> - SSH port (number, 1-65535)
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('port')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>username</code> - SSH username (string)
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('username')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>authType</code> - "password" or "key"
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('authType')">Copy</button>
-                                            </div>
-                                        </div>
-                                        
-                                        <h2>Authentication Fields</h2>
-                                        <div class="field-group">
-                                            <div class="field-item">
-                                                <code>password</code> - Required if authType is "password"
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('password')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>key</code> - SSH private key content (string) if authType is "key"
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('key')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>keyPassword</code> - Optional key passphrase
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('keyPassword')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>keyType</code> - Key type (auto, ssh-rsa, ssh-ed25519, etc.)
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('keyType')">Copy</button>
-                                            </div>
-                                        </div>
-                                        
-                                        <h2>Optional Fields</h2>
-                                        <div class="field-group">
-                                            <div class="field-item">
-                                                <code>name</code> - Display name (string)
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('name')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>folder</code> - Organization folder (string)
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('folder')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>tags</code> - Array of tag strings
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('tags')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>pin</code> - Pin to top (boolean)
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('pin')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>enableTerminal</code> - Show in Terminal tab (boolean, default: true)
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('enableTerminal')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>enableTunnel</code> - Show in Tunnel tab (boolean, default: true)
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('enableTunnel')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>enableFileManager</code> - Show in File Manager tab (boolean, default: true)
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('enableFileManager')">Copy</button>
-                                            </div>
-                                            <div class="field-item">
-                                                <code>defaultPath</code> - Default directory path (string)
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('defaultPath')">Copy</button>
-                                            </div>
-                                        </div>
-                                        
-                                        <h2>Tunnel Configuration</h2>
-                                        <div class="field-group">
-                                            <div class="field-item">
-                                                <code>tunnelConnections</code> - Array of tunnel objects
-                                                <button class="copy-btn" onclick="navigator.clipboard.writeText('tunnelConnections')">Copy</button>
-                                            </div>
-                                            <div style="margin-left: 20px;">
-                                                <div class="field-item">
-                                                    <code>sourcePort</code> - Local port (number)
-                                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('sourcePort')">Copy</button>
-                                                </div>
-                                                <div class="field-item">
-                                                    <code>endpointPort</code> - Remote port (number)
-                                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('endpointPort')">Copy</button>
-                                                </div>
-                                                <div class="field-item">
-                                                    <code>endpointHost</code> - Target host name (string)
-                                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('endpointHost')">Copy</button>
-                                                </div>
-                                                <div class="field-item">
-                                                    <code>maxRetries</code> - Retry attempts (number, default: 3)
-                                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('maxRetries')">Copy</button>
-                                                </div>
-                                                <div class="field-item">
-                                                    <code>retryInterval</code> - Retry delay in seconds (number, default: 10)
-                                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('retryInterval')">Copy</button>
-                                                </div>
-                                                <div class="field-item">
-                                                    <code>autoStart</code> - Auto-start on launch (boolean, default: false)
-                                                    <button class="copy-btn" onclick="navigator.clipboard.writeText('autoStart')">Copy</button>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        
-                                        <h2>Example JSON Structure</h2>
-                                        <pre><code>{
-  "hosts": [
-    {
-      "name": "Web Server",
-      "ip": "192.168.1.100",
-      "port": 22,
-      "username": "admin",
-      "authType": "password",
-      "password": "your_password",
-      "folder": "Production",
-      "tags": ["web", "production"],
-      "pin": true,
-      "enableTerminal": true,
-      "enableTunnel": false,
-      "enableFileManager": true,
-      "defaultPath": "/var/www"
-    }
-  ]
-}</code></pre>
-                                        
-                                        <h2>Important Notes</h2>
-                                        <ul>
-                                            <li>Maximum 100 hosts per import</li>
-                                            <li>File should contain a "hosts" array or be an array of host objects</li>
-                                            <li>All fields are copyable for easy reference</li>
-                                            <li>Use the Download Sample button to get a complete example file</li>
-                                        </ul>
-                                    </body>
-                                    </html>
-                                `);
-                                newWindow.document.close();
-                            }
+                            window.open('https://docs.termix.site/json-import', '_blank');
                        }}
                    >
                        Format Guide
--- a/src/ui/Apps/Server/Server.tsx
+++ b/src/ui/Apps/Server/Server.tsx
@@ -5,8 +5,8 @@ import {Separator} from "@/components/ui/separator.tsx";
 import {Button} from "@/components/ui/button.tsx";
 import {Progress} from "@/components/ui/progress"
 import {Cpu, HardDrive, MemoryStick} from "lucide-react";
-import {Tunnel} from "@/ui/apps/Tunnel/Tunnel.tsx";
-import {getServerStatusById, getServerMetricsById, ServerMetrics} from "@/ui/main-axios.ts";
+import {Tunnel} from "@/ui/Apps/Tunnel/Tunnel.tsx";
+import {getServerStatusById, getServerMetricsById, type ServerMetrics} from "@/ui/main-axios.ts";
 import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx";

 interface ServerProps {
@@ -97,13 +97,12 @@ export function Server({
        if (currentHostConfig?.id && isVisible) {
            fetchStatus();
            fetchMetrics();
-            // Only poll when component is visible to reduce unnecessary connections
            intervalId = window.setInterval(() => {
                if (isVisible) {
                    fetchStatus();
                    fetchMetrics();
                }
-            }, 300_000); // 5 minutes instead of 10 seconds
+            }, 30000);
        }

        return () => {
@@ -116,7 +115,6 @@ export function Server({
    const leftMarginPx = sidebarState === 'collapsed' ? 16 : 8;
    const bottomMarginPx = 8;

-    // Check if a file manager tab for this host is already open
    const isFileManagerAlreadyOpen = React.useMemo(() => {
        if (!currentHostConfig) return false;
        return tabs.some((tab: any) => 
@@ -172,7 +170,7 @@ export function Server({
                            }}
                            title="Refresh status and metrics"
                        >
-                            Refresh
+                            Refresh Status
                        </Button>
                        {currentHostConfig?.enableFileManager && (
                            <Button
--- a/src/ui/Apps/Terminal/Terminal.tsx
+++ b/src/ui/Apps/Terminal/Terminal.tsx
--- a/src/ui/Apps/Tunnel/Tunnel.tsx
+++ b/src/ui/Apps/Tunnel/Tunnel.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useEffect, useCallback} from "react";
-import {TunnelViewer} from "@/ui/apps/Tunnel/TunnelViewer.tsx";
+import {TunnelViewer} from "@/ui/Apps/Tunnel/TunnelViewer.tsx";
 import {getSSHHosts, getTunnelStatuses, connectTunnel, disconnectTunnel, cancelTunnel} from "@/ui/main-axios.ts";

 interface TunnelConnection {
--- a/src/ui/Apps/Tunnel/TunnelObject.tsx
+++ b/src/ui/Apps/Tunnel/TunnelObject.tsx
--- a/src/ui/Apps/Tunnel/TunnelViewer.tsx
+++ b/src/ui/Apps/Tunnel/TunnelViewer.tsx
--- a/src/ui/Homepage/HomepageAuth.tsx
+++ b/src/ui/Homepage/HomepageAuth.tsx
@@ -14,7 +14,8 @@ import {
    initiatePasswordReset,
    verifyPasswordResetCode,
    completePasswordReset,
-    getOIDCAuthorizeUrl
+    getOIDCAuthorizeUrl,
+    verifyTOTPLogin
 } from "../main-axios.ts";

 function setCookie(name: string, value: string, days = 7) {
@@ -29,8 +30,6 @@ function getCookie(name: string) {
    }, "");
 }

-
-
 interface HomepageAuthProps extends React.ComponentProps<"div"> {
    setLoggedIn: (loggedIn: boolean) => void;
    setIsAdmin: (isAdmin: boolean) => void;
@@ -75,6 +74,11 @@ export function HomepageAuth({
    const [tempToken, setTempToken] = useState("");
    const [resetLoading, setResetLoading] = useState(false);
    const [resetSuccess, setResetSuccess] = useState(false);
+    
+    const [totpRequired, setTotpRequired] = useState(false);
+    const [totpCode, setTotpCode] = useState("");
+    const [totpTempToken, setTotpTempToken] = useState("");
+    const [totpLoading, setTotpLoading] = useState(false);

    useEffect(() => {
        setInternalLoggedIn(loggedIn);
@@ -147,6 +151,13 @@ export function HomepageAuth({
                res = await loginUser(localUsername, password);
            }
            
+            if (res.requires_totp) {
+                setTotpRequired(true);
+                setTotpTempToken(res.temp_token);
+                setLoading(false);
+                return;
+            }
+            
            if (!res || !res.token) {
                throw new Error('No token received from login');
            }
@@ -171,6 +182,9 @@ export function HomepageAuth({
            if (tab === "signup") {
                setSignupConfirmPassword("");
            }
+            setTotpRequired(false);
+            setTotpCode("");
+            setTotpTempToken("");
        } catch (err: any) {
            setError(err?.response?.data?.error || err?.message || "Unknown error");
            setInternalLoggedIn(false);
@@ -269,6 +283,47 @@ export function HomepageAuth({
        setError(null);
    }

+    async function handleTOTPVerification() {
+        if (totpCode.length !== 6) {
+            setError("Please enter a 6-digit code");
+            return;
+        }
+
+        setError(null);
+        setTotpLoading(true);
+        
+        try {
+            const res = await verifyTOTPLogin(totpTempToken, totpCode);
+            
+            if (!res || !res.token) {
+                throw new Error('No token received from TOTP verification');
+            }
+            
+            setCookie("jwt", res.token);
+            const meRes = await getUserInfo();
+            
+            setInternalLoggedIn(true);
+            setLoggedIn(true);
+            setIsAdmin(!!meRes.is_admin);
+            setUsername(meRes.username || null);
+            setUserId(meRes.userId || null);
+            setDbError(null);
+            onAuthSuccess({
+                isAdmin: !!meRes.is_admin,
+                username: meRes.username || null,
+                userId: meRes.userId || null
+            });
+            setInternalLoggedIn(true);
+            setTotpRequired(false);
+            setTotpCode("");
+            setTotpTempToken("");
+        } catch (err: any) {
+            setError(err?.response?.data?.error || err?.message || "Invalid TOTP code");
+        } finally {
+            setTotpLoading(false);
+        }
+    }
+
    async function handleOIDCLogin() {
        setError(null);
        setOidcLoading(true);
@@ -381,7 +436,58 @@ export function HomepageAuth({
                    </AlertDescription>
                </Alert>
            )}
-            {(!internalLoggedIn && (!authLoading || !getCookie("jwt"))) && (
+            {totpRequired && (
+                <div className="flex flex-col gap-5">
+                    <div className="mb-6 text-center">
+                        <h2 className="text-xl font-bold mb-1">Two-Factor Authentication</h2>
+                        <p className="text-muted-foreground">Enter the 6-digit code from your authenticator app</p>
+                    </div>
+                    
+                    <div className="flex flex-col gap-2">
+                        <Label htmlFor="totp-code">Authentication Code</Label>
+                        <Input
+                            id="totp-code"
+                            type="text"
+                            placeholder="000000"
+                            maxLength={6}
+                            value={totpCode}
+                            onChange={e => setTotpCode(e.target.value.replace(/\D/g, ''))}
+                            disabled={totpLoading}
+                            className="text-center text-2xl tracking-widest font-mono"
+                            autoComplete="one-time-code"
+                        />
+                        <p className="text-xs text-muted-foreground text-center">
+                            Or enter a backup code if you don't have access to your authenticator
+                        </p>
+                    </div>
+                    
+                    <Button
+                        type="button"
+                        className="w-full h-11 text-base font-semibold"
+                        disabled={totpLoading || totpCode.length < 6}
+                        onClick={handleTOTPVerification}
+                    >
+                        {totpLoading ? Spinner : "Verify"}
+                    </Button>
+                    
+                    <Button
+                        type="button"
+                        variant="outline"
+                        className="w-full h-11 text-base font-semibold"
+                        disabled={totpLoading}
+                        onClick={() => {
+                            setTotpRequired(false);
+                            setTotpCode("");
+                            setTotpTempToken("");
+                            setError(null);
+                        }}
+                    >
+                        Cancel
+                    </Button>
+                </div>
+            )}
+            
+            {(!internalLoggedIn && (!authLoading || !getCookie("jwt")) && !totpRequired) && (
                <>
                    <div className="flex gap-2 mb-6">
                        <button
@@ -501,7 +607,7 @@ export function HomepageAuth({
                                    )}

                                    {resetStep === "verify" && (
-                                        <>
+                                        <>o
                                            <div className="text-center text-muted-foreground mb-4">
                                                <p>Enter the 6-digit code from the docker container logs for
                                                    user: <strong>{localUsername}</strong></p>
--- a/src/ui/Navigation/AppView.tsx
+++ b/src/ui/Navigation/AppView.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useRef, useState} from "react";
-import {Terminal} from "@/ui/apps/Terminal/Terminal.tsx";
-import {Server as ServerView} from "@/ui/apps/Server/Server.tsx";
-import {FileManager} from "@/ui/apps/File Manager/FileManager.tsx";
+import {Terminal} from "@/ui/Apps/Terminal/Terminal.tsx";
+import {Server as ServerView} from "@/ui/Apps/Server/Server.tsx";
+import {FileManager} from "@/ui/Apps/File Manager/FileManager.tsx";
 import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx";
 import {ResizablePanelGroup, ResizablePanel, ResizableHandle} from '@/components/ui/resizable.tsx';
 import * as ResizablePrimitive from "react-resizable-panels";
--- a/src/ui/Navigation/Hosts/Host.tsx
+++ b/src/ui/Navigation/Hosts/Host.tsx
@@ -35,15 +35,15 @@ interface HostProps {

 export function Host({host}: HostProps): React.ReactElement {
    const {addTab} = useTabs();
-    const [serverStatus, setServerStatus] = useState<'online' | 'offline'>('offline');
+    const [serverStatus, setServerStatus] = useState<'online' | 'offline' | 'degraded'>('degraded');
    const tags = Array.isArray(host.tags) ? host.tags : [];
    const hasTags = tags.length > 0;

    const title = host.name?.trim() ? host.name : `${host.username}@${host.ip}:${host.port}`;

    useEffect(() => {
-        let cancelled = false;
        let intervalId: number | undefined;
+        let cancelled = false;

        const fetchStatus = async () => {
            try {
@@ -57,7 +57,8 @@ export function Host({host}: HostProps): React.ReactElement {
        };

        fetchStatus();
-        intervalId = window.setInterval(fetchStatus, 60_000);
+
+        intervalId = window.setInterval(fetchStatus, 10000);

        return () => {
            cancelled = true;
--- a/src/ui/Navigation/LeftSidebar.tsx
+++ b/src/ui/Navigation/LeftSidebar.tsx
@@ -429,7 +429,7 @@ export function LeftSidebar({
                    <Separator className="p-0.25"/>
                    <SidebarContent>
                        <SidebarGroup className="!m-0 !p-0 !-mb-2">
-                            <Button className="m-2 flex flex-row font-semibold" variant="outline"
+                            <Button className="m-2 flex flex-row font-semibold border-2 !border-[#303032]" variant="outline"
                                    onClick={openSshManagerTab} disabled={!!sshManagerTab || isSplitScreenActive}
                                    title={sshManagerTab ? 'SSH Manager already open' : isSplitScreenActive ? 'Disabled during split screen' : undefined}>
                                <HardDrive strokeWidth="2.5"/>
@@ -438,12 +438,12 @@ export function LeftSidebar({
                        </SidebarGroup>
                        <Separator className="p-0.25"/>
                        <SidebarGroup className="flex flex-col gap-y-2 !-mt-2">
-                            <div className="bg-[#131316] rounded-lg">
+                            <div className="!bg-[#222225] rounded-lg">
                                <Input
                                    value={search}
                                    onChange={e => setSearch(e.target.value)}
                                    placeholder="Search hosts by any info..."
-                                    className="w-full h-8 text-sm border-2 border-[#272728] rounded-lg"
+                                    className="w-full h-8 text-sm border-2 !bg-[#222225] border-[#303032] rounded-md"
                                    autoComplete="off"
                                />
                            </div>
@@ -497,6 +497,20 @@ export function LeftSidebar({
                                        sideOffset={6}
                                        className="min-w-[var(--radix-popper-anchor-width)] bg-sidebar-accent text-sidebar-accent-foreground border border-border rounded-md shadow-2xl p-1"
                                    >
+                                        <DropdownMenuItem
+                                            className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
+                                            onClick={() => {
+                                                if (isSplitScreenActive) return;
+                                                const profileTab = tabList.find((t: any) => t.type === 'profile');
+                                                if (profileTab) {
+                                                    setCurrentTab(profileTab.id);
+                                                    return;
+                                                }
+                                                const id = addTab({type: 'profile', title: 'Profile'} as any);
+                                                setCurrentTab(id);
+                                            }}>
+                                            <span>Profile & Security</span>
+                                        </DropdownMenuItem>
                                        {isAdmin && (
                                            <DropdownMenuItem
                                                className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
--- a/src/ui/User/PasswordReset.tsx
+++ b/src/ui/User/PasswordReset.tsx
@@ -0,0 +1,262 @@
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card.tsx";
+import {Key} from "lucide-react";
+import React, {useState} from "react";
+import {completePasswordReset, initiatePasswordReset, verifyPasswordResetCode} from "@/ui/main-axios.ts";
+import {Label} from "@/components/ui/label.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx";
+
+interface PasswordResetProps {
+    userInfo: {
+        username: string;
+        is_admin: boolean;
+        is_oidc: boolean;
+        totp_enabled: boolean;
+    }
+}
+
+export function PasswordReset({userInfo}: PasswordResetProps) {
+    const [error, setError] = useState<string | null>(null);
+
+    const [resetStep, setResetStep] = useState<"initiate" | "verify" | "newPassword">("initiate");
+    const [resetCode, setResetCode] = useState("");
+    const [newPassword, setNewPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [tempToken, setTempToken] = useState("");
+    const [resetLoading, setResetLoading] = useState(false);
+    const [resetSuccess, setResetSuccess] = useState(false);
+
+    async function handleInitiatePasswordReset() {
+        setError(null);
+        setResetLoading(true);
+        try {
+            const result = await initiatePasswordReset(userInfo.username);
+            setResetStep("verify");
+            setError(null);
+        } catch (err: any) {
+            setError(err?.response?.data?.error || err?.message || "Failed to initiate password reset");
+        } finally {
+            setResetLoading(false);
+        }
+    }
+
+    function resetPasswordState() {
+        setResetStep("initiate");
+        setResetCode("");
+        setNewPassword("");
+        setConfirmPassword("");
+        setTempToken("");
+        setError(null);
+        setResetSuccess(false);
+    }
+
+    async function handleVerifyResetCode() {
+        setError(null);
+        setResetLoading(true);
+        try {
+            const response = await verifyPasswordResetCode(userInfo.username, resetCode);
+            setTempToken(response.tempToken);
+            setResetStep("newPassword");
+            setError(null);
+        } catch (err: any) {
+            setError(err?.response?.data?.error || "Failed to verify reset code");
+        } finally {
+            setResetLoading(false);
+        }
+    }
+
+    async function handleCompletePasswordReset() {
+        setError(null);
+        setResetLoading(true);
+
+        if (newPassword !== confirmPassword) {
+            setError("Passwords do not match");
+            setResetLoading(false);
+            return;
+        }
+
+        if (newPassword.length < 6) {
+            setError("Password must be at least 6 characters long");
+            setResetLoading(false);
+            return;
+        }
+
+        try {
+            await completePasswordReset(userInfo.username, tempToken, newPassword);
+
+            setResetStep("initiate");
+            setResetCode("");
+            setNewPassword("");
+            setConfirmPassword("");
+            setTempToken("");
+            setError(null);
+
+            setResetSuccess(true);
+        } catch (err: any) {
+            setError(err?.response?.data?.error || "Failed to complete password reset");
+        } finally {
+            setResetLoading(false);
+        }
+    }
+
+    const Spinner = (
+        <svg className="animate-spin mr-2 h-4 w-4 text-white inline-block" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
+        </svg>
+    );
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                    <Key className="w-5 h-5"/>
+                    Password
+                </CardTitle>
+                <CardDescription>
+                    Change your account password
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <>
+                    {resetStep === "initiate" && !resetSuccess && (
+                        <>
+                            <div className="flex flex-col gap-4">
+                                <Button
+                                    type="button"
+                                    className="w-full h-11 text-base font-semibold"
+                                    disabled={resetLoading || !userInfo.username.trim()}
+                                    onClick={handleInitiatePasswordReset}
+                                >
+                                    {resetLoading ? Spinner : "Send Reset Code"}
+                                </Button>
+                            </div>
+                        </>
+                    )}
+
+                    {resetStep === "verify" && (
+                        <>
+                            <div className="text-center text-muted-foreground mb-4">
+                                <p>Enter the 6-digit code from the docker container logs for
+                                    user: <strong>{userInfo.username}</strong></p>
+                            </div>
+                            <div className="flex flex-col gap-4">
+                                <div className="flex flex-col gap-2">
+                                    <Label htmlFor="reset-code">Reset Code</Label>
+                                    <Input
+                                        id="reset-code"
+                                        type="text"
+                                        required
+                                        maxLength={6}
+                                        className="h-11 text-base text-center text-lg tracking-widest"
+                                        value={resetCode}
+                                        onChange={e => setResetCode(e.target.value.replace(/\D/g, ''))}
+                                        disabled={resetLoading}
+                                        placeholder="000000"
+                                    />
+                                </div>
+                                <Button
+                                    type="button"
+                                    className="w-full h-11 text-base font-semibold"
+                                    disabled={resetLoading || resetCode.length !== 6}
+                                    onClick={handleVerifyResetCode}
+                                >
+                                    {resetLoading ? Spinner : "Verify Code"}
+                                </Button>
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    className="w-full h-11 text-base font-semibold"
+                                    disabled={resetLoading}
+                                    onClick={() => {
+                                        setResetStep("initiate");
+                                        setResetCode("");
+                                    }}
+                                >
+                                    Back
+                                </Button>
+                            </div>
+                        </>
+                    )}
+
+                    {resetSuccess && (
+                        <>
+                            <Alert className="">
+                                <AlertTitle>Success!</AlertTitle>
+                                <AlertDescription>
+                                    Your password has been successfully reset! You can now log in
+                                    with your new password.
+                                </AlertDescription>
+                            </Alert>
+                        </>
+                    )}
+
+                    {resetStep === "newPassword" && !resetSuccess && (
+                        <>
+                            <div className="text-center text-muted-foreground mb-4">
+                                <p>Enter your new password for
+                                    user: <strong>{userInfo.username}</strong></p>
+                            </div>
+                            <div className="flex flex-col gap-5">
+                                <div className="flex flex-col gap-2">
+                                    <Label htmlFor="new-password">New Password</Label>
+                                    <Input
+                                        id="new-password"
+                                        type="password"
+                                        required
+                                        className="h-11 text-base focus:ring-2 focus:ring-primary/50 transition-all duration-200"
+                                        value={newPassword}
+                                        onChange={e => setNewPassword(e.target.value)}
+                                        disabled={resetLoading}
+                                        autoComplete="new-password"
+                                    />
+                                </div>
+                                <div className="flex flex-col gap-2">
+                                    <Label htmlFor="confirm-password">Confirm Password</Label>
+                                    <Input
+                                        id="confirm-password"
+                                        type="password"
+                                        required
+                                        className="h-11 text-base focus:ring-2 focus:ring-primary/50 transition-all duration-200"
+                                        value={confirmPassword}
+                                        onChange={e => setConfirmPassword(e.target.value)}
+                                        disabled={resetLoading}
+                                        autoComplete="new-password"
+                                    />
+                                </div>
+                                <Button
+                                    type="button"
+                                    className="w-full h-11 text-base font-semibold"
+                                    disabled={resetLoading || !newPassword || !confirmPassword}
+                                    onClick={handleCompletePasswordReset}
+                                >
+                                    {resetLoading ? Spinner : "Reset Password"}
+                                </Button>
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    className="w-full h-11 text-base font-semibold"
+                                    disabled={resetLoading}
+                                    onClick={() => {
+                                        setResetStep("verify");
+                                        setNewPassword("");
+                                        setConfirmPassword("");
+                                    }}
+                                >
+                                    Back
+                                </Button>
+                            </div>
+                        </>
+                    )}
+                    {error && (
+                        <Alert variant="destructive" className="mt-4">
+                            <AlertTitle>Error</AlertTitle>
+                            <AlertDescription>{error}</AlertDescription>
+                        </Alert>
+                    )}
+                </>
+            </CardContent>
+        </Card>
+    )
+}
--- a/src/ui/User/TOTPSetup.tsx
+++ b/src/ui/User/TOTPSetup.tsx
@@ -0,0 +1,437 @@
+import React, { useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { Label } from "@/components/ui/label.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs.tsx";
+import { Shield, Copy, Download, AlertCircle, CheckCircle2 } from "lucide-react";
+import { setupTOTP, enableTOTP, disableTOTP, generateBackupCodes } from "@/ui/main-axios.ts";
+import { toast } from "sonner";
+
+interface TOTPSetupProps {
+    isEnabled: boolean;
+    onStatusChange?: (enabled: boolean) => void;
+}
+
+export function TOTPSetup({ isEnabled: initialEnabled, onStatusChange }: TOTPSetupProps) {
+    const [isEnabled, setIsEnabled] = useState(initialEnabled);
+    const [isSettingUp, setIsSettingUp] = useState(false);
+    const [setupStep, setSetupStep] = useState<"init" | "qr" | "verify" | "backup">("init");
+    const [qrCode, setQrCode] = useState("");
+    const [secret, setSecret] = useState("");
+    const [verificationCode, setVerificationCode] = useState("");
+    const [backupCodes, setBackupCodes] = useState<string[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [password, setPassword] = useState("");
+    const [disableCode, setDisableCode] = useState("");
+
+    const handleSetupStart = async () => {
+        setError(null);
+        setLoading(true);
+        try {
+            const response = await setupTOTP();
+            setQrCode(response.qr_code);
+            setSecret(response.secret);
+            setSetupStep("qr");
+            setIsSettingUp(true);
+        } catch (err: any) {
+            setError(err?.response?.data?.error || "Failed to start TOTP setup");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleVerifyCode = async () => {
+        if (verificationCode.length !== 6) {
+            setError("Please enter a 6-digit code");
+            return;
+        }
+
+        setError(null);
+        setLoading(true);
+        try {
+            const response = await enableTOTP(verificationCode);
+            setBackupCodes(response.backup_codes);
+            setSetupStep("backup");
+            toast.success("Two-factor authentication enabled successfully!");
+        } catch (err: any) {
+            setError(err?.response?.data?.error || "Invalid verification code");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleDisable = async () => {
+        setError(null);
+        setLoading(true);
+        try {
+            await disableTOTP(password || undefined, disableCode || undefined);
+            setIsEnabled(false);
+            setIsSettingUp(false);
+            setSetupStep("init");
+            setPassword("");
+            setDisableCode("");
+            onStatusChange?.(false);
+            toast.success("Two-factor authentication disabled");
+        } catch (err: any) {
+            setError(err?.response?.data?.error || "Failed to disable TOTP");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleGenerateNewBackupCodes = async () => {
+        setError(null);
+        setLoading(true);
+        try {
+            const response = await generateBackupCodes(password || undefined, disableCode || undefined);
+            setBackupCodes(response.backup_codes);
+            toast.success("New backup codes generated");
+        } catch (err: any) {
+            setError(err?.response?.data?.error || "Failed to generate backup codes");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const copyToClipboard = (text: string, label: string) => {
+        navigator.clipboard.writeText(text);
+        toast.success(`${label} copied to clipboard`);
+    };
+
+    const downloadBackupCodes = () => {
+        const content = `Termix Two-Factor Authentication Backup Codes\n` +
+            `Generated: ${new Date().toISOString()}\n\n` +
+            `Keep these codes in a safe place. Each code can only be used once.\n\n` +
+            backupCodes.map((code, i) => `${i + 1}. ${code}`).join('\n');
+        
+        const blob = new Blob([content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'termix-backup-codes.txt';
+        a.click();
+        URL.revokeObjectURL(url);
+        toast.success("Backup codes downloaded");
+    };
+
+    const handleComplete = () => {
+        setIsEnabled(true);
+        setIsSettingUp(false);
+        setSetupStep("init");
+        setVerificationCode("");
+        onStatusChange?.(true);
+    };
+
+    if (isEnabled && !isSettingUp) {
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <Shield className="w-5 h-5" />
+                        Two-Factor Authentication
+                    </CardTitle>
+                    <CardDescription>
+                        Your account is protected with two-factor authentication
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <Alert>
+                        <CheckCircle2 className="h-4 w-4" />
+                        <AlertTitle>Enabled</AlertTitle>
+                        <AlertDescription>
+                            Two-factor authentication is currently active on your account
+                        </AlertDescription>
+                    </Alert>
+
+                    <Tabs defaultValue="disable" className="w-full">
+                        <TabsList className="grid w-full grid-cols-2">
+                            <TabsTrigger value="disable">Disable 2FA</TabsTrigger>
+                            <TabsTrigger value="backup">Backup Codes</TabsTrigger>
+                        </TabsList>
+                        
+                        <TabsContent value="disable" className="space-y-4">
+                            <Alert variant="destructive">
+                                <AlertCircle className="h-4 w-4" />
+                                <AlertTitle>Warning</AlertTitle>
+                                <AlertDescription>
+                                    Disabling two-factor authentication will make your account less secure
+                                </AlertDescription>
+                            </Alert>
+                            
+                            <div className="space-y-2">
+                                <Label htmlFor="disable-password">Password or TOTP Code</Label>
+                                <Input
+                                    id="disable-password"
+                                    type="password"
+                                    placeholder="Enter your password"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                />
+                                <p className="text-sm text-muted-foreground">Or</p>
+                                <Input
+                                    id="disable-code"
+                                    type="text"
+                                    placeholder="6-digit TOTP code"
+                                    maxLength={6}
+                                    value={disableCode}
+                                    onChange={(e) => setDisableCode(e.target.value.replace(/\D/g, ''))}
+                                />
+                            </div>
+                            
+                            <Button
+                                variant="destructive"
+                                onClick={handleDisable}
+                                disabled={loading || (!password && !disableCode)}
+                            >
+                                Disable Two-Factor Authentication
+                            </Button>
+                        </TabsContent>
+                        
+                        <TabsContent value="backup" className="space-y-4">
+                            <p className="text-sm text-muted-foreground">
+                                Generate new backup codes if you've lost your existing ones
+                            </p>
+                            
+                            <div className="space-y-2">
+                                <Label htmlFor="backup-password">Password or TOTP Code</Label>
+                                <Input
+                                    id="backup-password"
+                                    type="password"
+                                    placeholder="Enter your password"
+                                    value={password}
+                                    onChange={(e) => setPassword(e.target.value)}
+                                />
+                                <p className="text-sm text-muted-foreground">Or</p>
+                                <Input
+                                    id="backup-code"
+                                    type="text"
+                                    placeholder="6-digit TOTP code"
+                                    maxLength={6}
+                                    value={disableCode}
+                                    onChange={(e) => setDisableCode(e.target.value.replace(/\D/g, ''))}
+                                />
+                            </div>
+                            
+                            <Button
+                                onClick={handleGenerateNewBackupCodes}
+                                disabled={loading || (!password && !disableCode)}
+                            >
+                                Generate New Backup Codes
+                            </Button>
+                            
+                            {backupCodes.length > 0 && (
+                                <div className="space-y-2 mt-4">
+                                    <div className="flex justify-between items-center">
+                                        <Label>Your Backup Codes</Label>
+                                        <Button
+                                            size="sm"
+                                            variant="outline"
+                                            onClick={downloadBackupCodes}
+                                        >
+                                            <Download className="w-4 h-4 mr-2" />
+                                            Download
+                                        </Button>
+                                    </div>
+                                    <div className="grid grid-cols-2 gap-2 p-4 bg-muted rounded-lg font-mono text-sm">
+                                        {backupCodes.map((code, i) => (
+                                            <div key={i}>{code}</div>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+                        </TabsContent>
+                    </Tabs>
+
+                    {error && (
+                        <Alert variant="destructive">
+                            <AlertCircle className="h-4 w-4" />
+                            <AlertTitle>Error</AlertTitle>
+                            <AlertDescription>{error}</AlertDescription>
+                        </Alert>
+                    )}
+                </CardContent>
+            </Card>
+        );
+    }
+
+    if (setupStep === "qr") {
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle>Set Up Two-Factor Authentication</CardTitle>
+                    <CardDescription>
+                        Step 1: Scan the QR code with your authenticator app
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <div className="flex justify-center">
+                        <img src={qrCode} alt="TOTP QR Code" className="w-64 h-64" />
+                    </div>
+                    
+                    <div className="space-y-2">
+                        <Label>Manual Entry Code</Label>
+                        <div className="flex gap-2">
+                            <Input
+                                value={secret}
+                                readOnly
+                                className="font-mono text-sm"
+                            />
+                            <Button
+                                size="default"
+                                variant="outline"
+                                onClick={() => copyToClipboard(secret, "Secret key")}
+                            >
+                                <Copy className="w-4 h-4" />
+                            </Button>
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                            If you can't scan the QR code, enter this code manually in your authenticator app
+                        </p>
+                    </div>
+                    
+                    <Button onClick={() => setSetupStep("verify")} className="w-full">
+                        Next: Verify Code
+                    </Button>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    if (setupStep === "verify") {
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle>Verify Your Authenticator</CardTitle>
+                    <CardDescription>
+                        Step 2: Enter the 6-digit code from your authenticator app
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <div className="space-y-2">
+                        <Label htmlFor="verify-code">Verification Code</Label>
+                        <Input
+                            id="verify-code"
+                            type="text"
+                            placeholder="000000"
+                            maxLength={6}
+                            value={verificationCode}
+                            onChange={(e) => setVerificationCode(e.target.value.replace(/\D/g, ''))}
+                            className="text-center text-2xl tracking-widest font-mono"
+                        />
+                    </div>
+                    
+                    {error && (
+                        <Alert variant="destructive">
+                            <AlertCircle className="h-4 w-4" />
+                            <AlertTitle>Error</AlertTitle>
+                            <AlertDescription>{error}</AlertDescription>
+                        </Alert>
+                    )}
+                    
+                    <div className="flex gap-2">
+                        <Button
+                            variant="outline"
+                            onClick={() => setSetupStep("qr")}
+                            disabled={loading}
+                        >
+                            Back
+                        </Button>
+                        <Button
+                            onClick={handleVerifyCode}
+                            disabled={loading || verificationCode.length !== 6}
+                            className="flex-1"
+                        >
+                            {loading ? "Verifying..." : "Verify and Enable"}
+                        </Button>
+                    </div>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    if (setupStep === "backup") {
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle>Save Your Backup Codes</CardTitle>
+                    <CardDescription>
+                        Step 3: Store these codes in a safe place
+                    </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                    <Alert>
+                        <AlertCircle className="h-4 w-4" />
+                        <AlertTitle>Important</AlertTitle>
+                        <AlertDescription>
+                            Save these backup codes in a secure location. You can use them to access your account if you lose your authenticator device.
+                        </AlertDescription>
+                    </Alert>
+                    
+                    <div className="space-y-2">
+                        <div className="flex justify-between items-center">
+                            <Label>Your Backup Codes</Label>
+                            <Button
+                                size="sm"
+                                variant="outline"
+                                onClick={downloadBackupCodes}
+                            >
+                                <Download className="w-4 h-4 mr-2" />
+                                Download
+                            </Button>
+                        </div>
+                        <div className="grid grid-cols-2 gap-2 p-4 bg-muted rounded-lg font-mono text-sm">
+                            {backupCodes.map((code, i) => (
+                                <div key={i} className="flex items-center gap-2">
+                                    <span className="text-muted-foreground">{i + 1}.</span>
+                                    <span>{code}</span>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    
+                    <Button onClick={handleComplete} className="w-full">
+                        Complete Setup
+                    </Button>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                    <Shield className="w-5 h-5" />
+                    Two-Factor Authentication
+                </CardTitle>
+                <CardDescription>
+                    Add an extra layer of security to your account
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <Alert>
+                    <AlertCircle className="h-4 w-4" />
+                    <AlertTitle>Not Enabled</AlertTitle>
+                    <AlertDescription>
+                        Two-factor authentication adds an extra layer of security by requiring a code from your authenticator app when signing in.
+                    </AlertDescription>
+                </Alert>
+                
+                <Button onClick={handleSetupStart} disabled={loading} className="w-full">
+                    {loading ? "Setting up..." : "Enable Two-Factor Authentication"}
+                </Button>
+                
+                {error && (
+                    <Alert variant="destructive">
+                        <AlertCircle className="h-4 w-4" />
+                        <AlertTitle>Error</AlertTitle>
+                        <AlertDescription>{error}</AlertDescription>
+                    </Alert>
+                )}
+            </CardContent>
+        </Card>
+    );
+}
--- a/src/ui/User/UserProfile.tsx
+++ b/src/ui/User/UserProfile.tsx
@@ -0,0 +1,166 @@
+import React, {useState, useEffect} from "react";
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {Label} from "@/components/ui/label.tsx";
+import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx";
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx";
+import {User, Shield, Key, AlertCircle} from "lucide-react";
+import {TOTPSetup} from "@/ui/User/TOTPSetup.tsx";
+import {getUserInfo} from "@/ui/main-axios.ts";
+import {toast} from "sonner";
+import {PasswordReset} from "@/ui/User/PasswordReset.tsx";
+
+interface UserProfileProps {
+    isTopbarOpen?: boolean;
+}
+
+export function UserProfile({isTopbarOpen = true}: UserProfileProps) {
+    const [userInfo, setUserInfo] = useState<{
+        username: string;
+        is_admin: boolean;
+        is_oidc: boolean;
+        totp_enabled: boolean;
+    } | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        fetchUserInfo();
+    }, []);
+
+    const fetchUserInfo = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const info = await getUserInfo();
+            setUserInfo({
+                username: info.username,
+                is_admin: info.is_admin,
+                is_oidc: info.is_oidc,
+                totp_enabled: info.totp_enabled || false
+            });
+        } catch (err: any) {
+            setError(err?.response?.data?.error || "Failed to load user information");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleTOTPStatusChange = (enabled: boolean) => {
+        if (userInfo) {
+            setUserInfo({...userInfo, totp_enabled: enabled});
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="container max-w-4xl mx-auto p-6">
+                <Card>
+                    <CardContent className="p-12 text-center">
+                        <div className="animate-pulse">Loading user profile...</div>
+                    </CardContent>
+                </Card>
+            </div>
+        );
+    }
+
+    if (error || !userInfo) {
+        return (
+            <div className="container max-w-4xl mx-auto p-6">
+                <Alert variant="destructive">
+                    <AlertCircle className="h-4 w-4"/>
+                    <AlertTitle>Error</AlertTitle>
+                    <AlertDescription>{error || "Failed to load user profile"}</AlertDescription>
+                </Alert>
+            </div>
+        );
+    }
+
+    return (
+        <div className="container max-w-4xl mx-auto p-6 overflow-y-auto" style={{
+            marginTop: isTopbarOpen ? '60px' : '0',
+            transition: 'margin-top 0.3s ease',
+            maxHeight: 'calc(100vh - 60px)'
+        }}>
+            <div className="mb-6">
+                <h1 className="text-3xl font-bold">User Profile</h1>
+                <p className="text-muted-foreground mt-2">Manage your account settings and security</p>
+            </div>
+
+            <Tabs defaultValue="profile" className="space-y-4">
+                <TabsList>
+                    <TabsTrigger value="profile" className="flex items-center gap-2">
+                        <User className="w-4 h-4"/>
+                        Profile
+                    </TabsTrigger>
+                    {!userInfo.is_oidc && (
+                        <TabsTrigger value="security" className="flex items-center gap-2">
+                            <Shield className="w-4 h-4"/>
+                            Security
+                        </TabsTrigger>
+                    )}
+                </TabsList>
+
+                <TabsContent value="profile" className="space-y-4">
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>Account Information</CardTitle>
+                            <CardDescription>Your account details and settings</CardDescription>
+                        </CardHeader>
+                        <CardContent className="space-y-4">
+                            <div className="grid grid-cols-2 gap-4">
+                                <div>
+                                    <Label>Username</Label>
+                                    <p className="text-lg font-medium mt-1">{userInfo.username}</p>
+                                </div>
+                                <div>
+                                    <Label>Account Type</Label>
+                                    <p className="text-lg font-medium mt-1">
+                                        {userInfo.is_admin ? "Administrator" : "User"}
+                                    </p>
+                                </div>
+                                <div>
+                                    <Label>Authentication Method</Label>
+                                    <p className="text-lg font-medium mt-1">
+                                        {userInfo.is_oidc ? "External (OIDC)" : "Local"}
+                                    </p>
+                                </div>
+                                <div>
+                                    <Label>Two-Factor Authentication</Label>
+                                    <p className="text-lg font-medium mt-1">
+                                        {userInfo.is_oidc ? (
+                                            <span className="text-muted-foreground">Locked (OIDC Auth)</span>
+                                        ) : (
+                                            userInfo.totp_enabled ? (
+                                                <span className="text-green-600 flex items-center gap-1">
+                                                    <Shield className="w-4 h-4"/>
+                                                    Enabled
+                                                </span>
+                                            ) : (
+                                                <span className="text-muted-foreground">Disabled</span>
+                                            )
+                                        )}
+                                    </p>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+
+                <TabsContent value="security" className="space-y-4">
+                    <TOTPSetup
+                        isEnabled={userInfo.totp_enabled}
+                        onStatusChange={handleTOTPStatusChange}
+                    />
+
+                    {!userInfo.is_oidc && (
+                        <PasswordReset
+                            userInfo={userInfo}
+                        />
+                    )}
+                </TabsContent>
+            </Tabs>
+        </div>
+    );
+}
--- a/src/ui/main-axios.ts
+++ b/src/ui/main-axios.ts
@@ -892,6 +892,56 @@ export async function updateOIDCConfig(config: any): Promise<any> {
 // ALERTS
 // ============================================================================

+export async function setupTOTP(): Promise<{ secret: string; qr_code: string }> {
+    try {
+        const response = await authApi.post('/users/totp/setup');
+        return response.data;
+    } catch (error) {
+        handleApiError(error as AxiosError);
+        throw error;
+    }
+}
+
+export async function enableTOTP(totp_code: string): Promise<{ message: string; backup_codes: string[] }> {
+    try {
+        const response = await authApi.post('/users/totp/enable', { totp_code });
+        return response.data;
+    } catch (error) {
+        handleApiError(error as AxiosError);
+        throw error;
+    }
+}
+
+export async function disableTOTP(password?: string, totp_code?: string): Promise<{ message: string }> {
+    try {
+        const response = await authApi.post('/users/totp/disable', { password, totp_code });
+        return response.data;
+    } catch (error) {
+        handleApiError(error as AxiosError);
+        throw error;
+    }
+}
+
+export async function verifyTOTPLogin(temp_token: string, totp_code: string): Promise<AuthResponse> {
+    try {
+        const response = await authApi.post('/users/totp/verify-login', { temp_token, totp_code });
+        return response.data;
+    } catch (error) {
+        handleApiError(error as AxiosError);
+        throw error;
+    }
+}
+
+export async function generateBackupCodes(password?: string, totp_code?: string): Promise<{ backup_codes: string[] }> {
+    try {
+        const response = await authApi.post('/users/totp/backup-codes', { password, totp_code });
+        return response.data;
+    } catch (error) {
+        handleApiError(error as AxiosError);
+        throw error;
+    }
+}
+
 export async function getUserAlerts(userId: string): Promise<{ alerts: any[] }> {
    try {
        const apiInstance = createApiInstance(isDev ? 'http://localhost:8081' : '');