wip

2024-11-27 13:14:03 +00:00 · 2023-10-23 19:30:58 +08:00 · 2023-10-23 19:30:58 +08:00 · 5f70fa6baf
commit 5f70fa6baf
parent 205bff2359
64 changed files with 10431 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,24 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.yaml]
+indent_size = 2
+
+[*.yml]
+indent_size = 2
+
+[*.vue]
+trim_trailing_whitespace = false
+
+[*.go]
+indent_style = tab
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,96 @@
+module.exports = {
+    root: true,
+    env: {
+        browser: true,
+        node: true,
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:vue/vue3-recommended",
+    ],
+    parser: "vue-eslint-parser",
+    parserOptions: {
+        "parser": "@typescript-eslint/parser",
+    },
+    plugins: [
+        "@typescript-eslint",
+        "jsdoc"
+    ],
+    rules: {
+        "yoda": "error",
+        "linebreak-style": [ "error", "unix" ],
+        "camelcase": [ "warn", {
+            "properties": "never",
+            "ignoreImports": true
+        }],
+        "no-unused-vars": [ "warn", {
+            "args": "none"
+        }],
+        indent: [
+            "error",
+            4,
+            {
+                ignoredNodes: [ "TemplateLiteral" ],
+                SwitchCase: 1,
+            },
+        ],
+        quotes: [ "error", "double" ],
+        semi: "error",
+        "vue/html-indent": [ "error", 4 ], // default: 2
+        "vue/max-attributes-per-line": "off",
+        "vue/singleline-html-element-content-newline": "off",
+        "vue/html-self-closing": "off",
+        "vue/require-component-is": "off",      // not allow is="style" https://github.com/vuejs/eslint-plugin-vue/issues/462#issuecomment-430234675
+        "vue/attribute-hyphenation": "off",     // This change noNL to "no-n-l" unexpectedly
+        "vue/multi-word-component-names": "off",
+        "no-multi-spaces": [ "error", {
+            ignoreEOLComments: true,
+        }],
+        "array-bracket-spacing": [ "warn", "always", {
+            "singleValue": true,
+            "objectsInArrays": false,
+            "arraysInArrays": false
+        }],
+        "space-before-function-paren": [ "error", {
+            "anonymous": "always",
+            "named": "never",
+            "asyncArrow": "always"
+        }],
+        "curly": "error",
+        "object-curly-spacing": [ "error", "always" ],
+        "object-curly-newline": "off",
+        "object-property-newline": "error",
+        "comma-spacing": "error",
+        "brace-style": "error",
+        "no-var": "error",
+        "key-spacing": "warn",
+        "keyword-spacing": "warn",
+        "space-infix-ops": "error",
+        "arrow-spacing": "warn",
+        "no-trailing-spaces": "error",
+        "no-constant-condition": [ "error", {
+            "checkLoops": false,
+        }],
+        "space-before-blocks": "warn",
+        "no-extra-boolean-cast": "off",
+        "no-multiple-empty-lines": [ "warn", {
+            "max": 1,
+            "maxBOF": 0,
+        }],
+        "lines-between-class-members": [ "warn", "always", {
+            exceptAfterSingleLine: true,
+        }],
+        "no-unneeded-ternary": "error",
+        "array-bracket-newline": [ "error", "consistent" ],
+        "eol-last": [ "error", "always" ],
+        "comma-dangle": [ "warn", "only-multiline" ],
+        "no-empty": [ "error", {
+            "allowEmptyCatch": true
+        }],
+        "no-control-regex": "off",
+        "one-var": [ "error", "never" ],
+        "max-statements-per-line": [ "error", { "max": 1 }],
+        "@typescript-eslint/ban-ts-comment": "off",
+    },
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,8 @@
+# dotenv environment variable files
+.env
+node_modules
+dist
+.idea
+data
+tmp
+
--- a/README.md
+++ b/README.md
@ -1 +1,21 @@
 # Dockge
+
+## Features
+
+- Easy-to-use
+- Fancy UI
+- Focus on `docker-compose` stack management
+- Interactive editor for `docker-compose.yml` files
+- Easy to expose your service to the internet with https
+
+
+## Motivations
+
+- Want to build my dream web-based container manager
+- Want to try next gen runtime like Deno or Bun, but I chose Deno because at this moment, Deno is more stable and Jetbrains IDE support is better.
+- Full TypeScript and ES module
+- Try DaisyUI + TailwindCSS
+
+## Dockge?
+
+Naming idea is coming from Twitch emotes. There are many emotes sound like this such as `bedge` and `sadge`.
--- a/backend/check-version.ts
+++ b/backend/check-version.ts
@ -0,0 +1,71 @@
+import { log } from "./log";
+import compareVersions from "compare-versions";
+import packageJSON from "../package.json";
+import { Settings } from "./settings";
+
+export const obj = {
+    version: packageJSON.version,
+    latestVersion: null,
+};
+export default obj;
+
+// How much time in ms to wait between update checks
+const UPDATE_CHECKER_INTERVAL_MS = 1000 * 60 * 60 * 48;
+const CHECK_URL = "https://uptime.kuma.pet/version";
+
+let interval : NodeJS.Timeout;
+
+export function startInterval() {
+    const check = async () => {
+        if (await Settings.get("checkUpdate") === false) {
+            return;
+        }
+
+        log.debug("update-checker", "Retrieving latest versions");
+
+        try {
+            const res = await fetch(CHECK_URL);
+            const data = await res.json();
+
+            // For debug
+            if (process.env.TEST_CHECK_VERSION === "1") {
+                data.slow = "1000.0.0";
+            }
+
+            const checkBeta = await Settings.get("checkBeta");
+
+            if (checkBeta && data.beta) {
+                if (compareVersions.compare(data.beta, data.slow, ">")) {
+                    obj.latestVersion = data.beta;
+                    return;
+                }
+            }
+
+            if (data.slow) {
+                obj.latestVersion = data.slow;
+            }
+
+        } catch (_) {
+            log.info("update-checker", "Failed to check for new versions");
+        }
+
+    };
+
+    check();
+    interval = setInterval(check, UPDATE_CHECKER_INTERVAL_MS);
+}
+
+/**
+ * Enable the check update feature
+ * @param value Should the check update feature be enabled?
+ * @returns
+ */
+export async function enableCheckUpdate(value : boolean) {
+    await Settings.set("checkUpdate", value);
+
+    clearInterval(interval);
+
+    if (value) {
+        startInterval();
+    }
+}
--- a/backend/database.ts
+++ b/backend/database.ts
@ -0,0 +1,247 @@
+import { log } from "./log";
+import { R } from "redbean-node";
+import { DockgeServer } from "./dockge-server";
+import fs from "fs";
+import path from "path";
+import knex from "knex";
+
+import Dialect from "knex/lib/dialects/sqlite3/index.js";
+
+import sqlite from "@louislam/sqlite3";
+import { sleep } from "./util-common";
+
+interface DBConfig {
+    type?: "sqlite" | "mysql";
+}
+
+export class Database {
+    /**
+     * SQLite file path (Default: ./data/kuma.db)
+     * @type {string}
+     */
+    static sqlitePath;
+
+    static noReject = true;
+
+    static dbConfig: DBConfig = {};
+
+    static knexMigrationsPath = "./backend/migrations";
+
+    private static server : DockgeServer;
+
+    /**
+     * Use for decode the auth object
+     */
+    jwtSecret? : string;
+
+    static async init(server : DockgeServer) {
+        this.server = server;
+
+        log.debug("server", "Connecting to the database");
+        await Database.connect();
+        log.info("server", "Connected to the database");
+
+        // Patch the database
+        await Database.patch();
+    }
+
+    /**
+     * Read the database config
+     * @throws {Error} If the config is invalid
+     * @typedef {string|undefined} envString
+     * @returns {{type: "sqlite"} | {type:envString, hostname:envString, port:envString, database:envString, username:envString, password:envString}} Database config
+     */
+    static readDBConfig() {
+        const dbConfigString = fs.readFileSync(path.join(this.server.config.dataDir, "db-config.json")).toString("utf-8");
+        const dbConfig = JSON.parse(dbConfigString);
+
+        if (typeof dbConfig !== "object") {
+            throw new Error("Invalid db-config.json, it must be an object");
+        }
+
+        if (typeof dbConfig.type !== "string") {
+            throw new Error("Invalid db-config.json, type must be a string");
+        }
+        return dbConfig;
+    }
+
+    /**
+     * @typedef {string|undefined} envString
+     * @param {{type: "sqlite"} | {type:envString, hostname:envString, port:envString, database:envString, username:envString, password:envString}} dbConfig the database configuration that should be written
+     * @returns {void}
+     */
+    static writeDBConfig(dbConfig) {
+        fs.writeFileSync(path.join(this.server.config.dataDir, "db-config.json"), JSON.stringify(dbConfig, null, 4));
+    }
+
+    /**
+     * Connect to the database
+     * @param {boolean} autoloadModels Should models be automatically loaded?
+     * @param {boolean} noLog Should logs not be output?
+     * @returns {Promise<void>}
+     */
+    static async connect(autoloadModels = true, noLog = false) {
+        const acquireConnectionTimeout = 120 * 1000;
+        let dbConfig;
+        try {
+            dbConfig = this.readDBConfig();
+            Database.dbConfig = dbConfig;
+        } catch (err) {
+            log.warn("db", err.message);
+            dbConfig = {
+                type: "sqlite",
+            };
+            this.writeDBConfig(dbConfig);
+        }
+
+        let config = {};
+
+        log.info("db", `Database Type: ${dbConfig.type}`);
+
+        if (dbConfig.type === "sqlite") {
+            this.sqlitePath = path.join(this.server.config.dataDir, "dockge.db");
+            Dialect.prototype._driver = () => sqlite;
+
+            config = {
+                client: Dialect,
+                connection: {
+                    filename: Database.sqlitePath,
+                    acquireConnectionTimeout: acquireConnectionTimeout,
+                },
+                useNullAsDefault: true,
+                pool: {
+                    min: 1,
+                    max: 1,
+                    idleTimeoutMillis: 120 * 1000,
+                    propagateCreateError: false,
+                    acquireTimeoutMillis: acquireConnectionTimeout,
+                }
+            };
+        } else {
+            throw new Error("Unknown Database type: " + dbConfig.type);
+        }
+
+        const knexInstance = knex(config);
+
+        // @ts-ignore
+        R.setup(knexInstance);
+
+        if (process.env.SQL_LOG === "1") {
+            R.debug(true);
+        }
+
+        // Auto map the model to a bean object
+        R.freeze(true);
+
+        if (autoloadModels) {
+            await R.autoloadModels("./server/model");
+        }
+
+        if (dbConfig.type === "sqlite") {
+            await this.initSQLite();
+        }
+    }
+
+    /**
+     @returns {Promise<void>}
+     */
+    static async initSQLite() {
+        await R.exec("PRAGMA foreign_keys = ON");
+        // Change to WAL
+        await R.exec("PRAGMA journal_mode = WAL");
+        await R.exec("PRAGMA cache_size = -12000");
+        await R.exec("PRAGMA auto_vacuum = INCREMENTAL");
+
+        // This ensures that an operating system crash or power failure will not corrupt the database.
+        // FULL synchronous is very safe, but it is also slower.
+        // Read more: https://sqlite.org/pragma.html#pragma_synchronous
+        await R.exec("PRAGMA synchronous = NORMAL");
+
+        log.debug("db", "SQLite config:");
+        log.debug("db", await R.getAll("PRAGMA journal_mode"));
+        log.debug("db", await R.getAll("PRAGMA cache_size"));
+        log.debug("db", "SQLite Version: " + await R.getCell("SELECT sqlite_version()"));
+    }
+
+    /**
+     * Patch the database
+     * @returns {void}
+     */
+    static async patch() {
+        // Using knex migrations
+        // https://knexjs.org/guide/migrations.html
+        // https://gist.github.com/NigelEarle/70db130cc040cc2868555b29a0278261
+        try {
+            await R.knex.migrate.latest({
+                directory: Database.knexMigrationsPath,
+            });
+        } catch (e) {
+            // Allow missing patch files for downgrade or testing pr.
+            if (e.message.includes("the following files are missing:")) {
+                log.warn("db", e.message);
+                log.warn("db", "Database migration failed, you may be downgrading Dockge.");
+            } else {
+                log.error("db", "Database migration failed");
+                throw e;
+            }
+        }
+    }
+
+    /**
+     * Special handle, because tarn.js throw a promise reject that cannot be caught
+     * @returns {Promise<void>}
+     */
+    static async close() {
+        const listener = () => {
+            Database.noReject = false;
+        };
+        process.addListener("unhandledRejection", listener);
+
+        log.info("db", "Closing the database");
+
+        // Flush WAL to main database
+        if (Database.dbConfig.type === "sqlite") {
+            await R.exec("PRAGMA wal_checkpoint(TRUNCATE)");
+        }
+
+        while (true) {
+            Database.noReject = true;
+            await R.close();
+            await sleep(2000);
+
+            if (Database.noReject) {
+                break;
+            } else {
+                log.info("db", "Waiting to close the database");
+            }
+        }
+        log.info("db", "Database closed");
+
+        process.removeListener("unhandledRejection", listener);
+    }
+
+    /**
+     * Get the size of the database (SQLite only)
+     * @returns {number} Size of database
+     */
+    static getSize() {
+        if (Database.dbConfig.type === "sqlite") {
+            log.debug("db", "Database.getSize()");
+            const stats = fs.statSync(Database.sqlitePath);
+            log.debug("db", stats);
+            return stats.size;
+        }
+        return 0;
+    }
+
+    /**
+     * Shrink the database
+     * @returns {Promise<void>}
+     */
+    static async shrink() {
+        if (Database.dbConfig.type === "sqlite") {
+            await R.exec("VACUUM");
+        }
+    }
+
+}
--- a/backend/docker.ts
+++ b/backend/docker.ts
@ -0,0 +1,3 @@
+export class Docker {
+
+}
--- a/backend/dockge-server.ts
+++ b/backend/dockge-server.ts
@ -0,0 +1,381 @@
+import { MainRouter } from "./routers/main-router";
+import * as fs from "node:fs";
+import { PackageJson } from "type-fest";
+import { Database } from "./database";
+import packageJSON from "../package.json";
+import { log } from "./log";
+import * as socketIO from "socket.io";
+import express, { Express } from "express";
+import { parse } from "ts-command-line-args";
+import https from "https";
+import http from "http";
+import { Router } from "./router";
+import { Socket } from "socket.io";
+import { MainSocketHandler } from "./socket-handlers/main-socket-handler";
+import { SocketHandler } from "./socket-handler";
+import { Settings } from "./settings";
+import checkVersion from "./check-version";
+import dayjs from "dayjs";
+import { R } from "redbean-node";
+import { genSecret, isDev } from "./util-common";
+import { generatePasswordHash } from "./password-hash";
+import { Bean } from "redbean-node/dist/bean";
+import { DockgeSocket } from "./util-server";
+import { DockerSocketHandler } from "./socket-handlers/docker-socket-handler";
+import { Terminal } from "./terminal";
+
+export interface Arguments {
+    sslKey? : string;
+    sslCert? : string;
+    sslKeyPassphrase? : string;
+    port? : number;
+    hostname? : string;
+    dataDir? : string;
+}
+
+export class DockgeServer {
+    app : Express;
+    httpServer : http.Server;
+    packageJSON : PackageJson;
+    io : socketIO.Server;
+    config : Arguments;
+    indexHTML : string;
+    terminal : Terminal;
+
+    /**
+     * List of express routers
+     */
+    routerList : Router[] = [
+        new MainRouter(),
+    ];
+
+    /**
+     * List of socket handlers
+     */
+    socketHandlerList : SocketHandler[] = [
+        new MainSocketHandler(),
+        new DockerSocketHandler(),
+    ];
+
+    /**
+     * Show Setup Page
+     */
+    needSetup = false;
+
+    jwtSecret? : string;
+
+    /**
+     *
+     */
+    constructor() {
+        if (!process.env.NODE_ENV) {
+            process.env.NODE_ENV = "production";
+        }
+
+        // Log NODE ENV
+        log.info("server", "NODE_ENV: " + process.env.NODE_ENV);
+
+        // Load arguments
+        const args = this.config = parse<Arguments>({
+            sslKey: {
+                type: String,
+                optional: true,
+            },
+            sslCert: {
+                type: String,
+                optional: true,
+            },
+            sslKeyPassphrase: {
+                type: String,
+                optional: true,
+            },
+            port: {
+                type: Number,
+                optional: true,
+            },
+            hostname: {
+                type: String,
+                optional: true,
+            },
+            dataDir: {
+                type: String,
+                optional: true,
+            }
+        });
+
+        // Load from environment variables or default values if args are not set
+        args.sslKey = args.sslKey || process.env.DOCKGE_SSL_KEY || undefined;
+        args.sslCert = args.sslCert || process.env.DOCKGE_SSL_CERT || undefined;
+        args.sslKeyPassphrase = args.sslKeyPassphrase || process.env.DOCKGE_SSL_KEY_PASSPHRASE || undefined;
+        args.port = args.port || parseInt(process.env.DOCKGE_PORT) || 5001;
+        args.hostname = args.hostname || process.env.DOCKGE_HOSTNAME || undefined;
+        args.dataDir = args.dataDir || process.env.DOCKGE_DATA_DIR || "./data/";
+
+        log.debug("server", args);
+
+        this.packageJSON = packageJSON as PackageJson;
+
+        this.initDataDir();
+
+        this.terminal = new Terminal(this);
+    }
+
+    /**
+     *
+     */
+    async serve() {
+        // Connect to database
+        try {
+            await Database.init(this);
+        } catch (e) {
+            log.error("server", "Failed to prepare your database: " + e.message);
+            process.exit(1);
+        }
+
+        // First time setup if needed
+        let jwtSecretBean = await R.findOne("setting", " `key` = ? ", [
+            "jwtSecret",
+        ]);
+
+        if (! jwtSecretBean) {
+            log.info("server", "JWT secret is not found, generate one.");
+            jwtSecretBean = await this.initJWTSecret();
+            log.info("server", "Stored JWT secret into database");
+        } else {
+            log.debug("server", "Load JWT secret from database.");
+        }
+
+        this.jwtSecret = jwtSecretBean.value;
+
+        const userCount = (await R.knex("user").count("id as count").first()).count;
+
+        log.debug("server", "User count: " + userCount);
+
+        // If there is no record in user table, it is a new Dockge instance, need to setup
+        if (userCount == 0) {
+            log.info("server", "No user, need setup");
+            this.needSetup = true;
+        }
+
+        // Create express
+        this.app = express();
+
+        if (this.config.sslKey && this.config.sslCert) {
+            log.info("server", "Server Type: HTTPS");
+            this.httpServer = https.createServer({
+                key: fs.readFileSync(this.config.sslKey),
+                cert: fs.readFileSync(this.config.sslCert),
+                passphrase: this.config.sslKeyPassphrase,
+            }, this.app);
+        } else {
+            log.info("server", "Server Type: HTTP");
+            this.httpServer = http.createServer(this.app);
+        }
+
+        try {
+            this.indexHTML = fs.readFileSync("./dist/index.html").toString();
+        } catch (e) {
+            // "dist/index.html" is not necessary for development
+            if (process.env.NODE_ENV !== "development") {
+                log.error("server", "Error: Cannot find 'dist/index.html', did you install correctly?");
+                process.exit(1);
+            }
+        }
+
+        for (const router of this.routerList) {
+            this.app.use(router.create(this.app, this));
+        }
+
+        let cors = undefined;
+
+        if (isDev) {
+            cors = {
+                origin: "*",
+            };
+        }
+
+        // Create Socket.io
+        this.io = new socketIO.Server(this.httpServer, {
+            cors,
+        });
+
+        this.io.on("connection", (socket: Socket) => {
+            log.info("server", "Socket connected!");
+
+            this.sendInfo(socket, true);
+
+            if (this.needSetup) {
+                log.info("server", "Redirect to setup page");
+                socket.emit("setup");
+            }
+
+            // Create socket handlers
+            for (const socketHandler of this.socketHandlerList) {
+                socketHandler.create(socket as DockgeSocket, this);
+            }
+        });
+
+        // Listen
+        this.httpServer.listen(5001, this.config.hostname, () => {
+            if (this.config.hostname) {
+                log.info( "server", `Listening on ${this.config.hostname}:${this.config.port}`);
+            } else {
+                log.info("server", `Listening on ${this.config.port}`);
+            }
+        });
+    }
+
+    /**
+     * Emits the version information to the client.
+     * @param socket Socket.io socket instance
+     * @param hideVersion Should we hide the version information in the response?
+     * @returns
+     */
+    async sendInfo(socket : Socket, hideVersion = false) {
+        let versionProperty;
+        let latestVersionProperty;
+        let isContainer;
+
+        if (!hideVersion) {
+            versionProperty = packageJSON.version;
+            latestVersionProperty = checkVersion.latestVersion;
+            isContainer = (process.env.DOCKGE_IS_CONTAINER === "1");
+        }
+
+        socket.emit("info", {
+            versionProperty,
+            latestVersionProperty,
+            isContainer,
+            primaryBaseURL: await Settings.get("primaryBaseURL"),
+            serverTimezone: await this.getTimezone(),
+            serverTimezoneOffset: this.getTimezoneOffset(),
+        });
+    }
+
+    /**
+     * Get the IP of the client connected to the socket
+     * @param {Socket} socket Socket to query
+     * @returns IP of client
+     */
+    async getClientIP(socket : Socket) : Promise<string> {
+        let clientIP = socket.client.conn.remoteAddress;
+
+        if (clientIP === undefined) {
+            clientIP = "";
+        }
+
+        if (await Settings.get("trustProxy")) {
+            const forwardedFor = socket.client.conn.request.headers["x-forwarded-for"];
+
+            if (typeof forwardedFor === "string") {
+                return forwardedFor.split(",")[0].trim();
+            } else if (typeof socket.client.conn.request.headers["x-real-ip"] === "string") {
+                return socket.client.conn.request.headers["x-real-ip"];
+            }
+        }
+        return clientIP.replace(/^::ffff:/, "");
+    }
+
+    /**
+     * Attempt to get the current server timezone
+     * If this fails, fall back to environment variables and then make a
+     * guess.
+     * @returns {Promise<string>} Current timezone
+     */
+    async getTimezone() {
+        // From process.env.TZ
+        try {
+            if (process.env.TZ) {
+                this.checkTimezone(process.env.TZ);
+                return process.env.TZ;
+            }
+        } catch (e) {
+            log.warn("timezone", e.message + " in process.env.TZ");
+        }
+
+        const timezone = await Settings.get("serverTimezone");
+
+        // From Settings
+        try {
+            log.debug("timezone", "Using timezone from settings: " + timezone);
+            if (timezone) {
+                this.checkTimezone(timezone);
+                return timezone;
+            }
+        } catch (e) {
+            log.warn("timezone", e.message + " in settings");
+        }
+
+        // Guess
+        try {
+            const guess = dayjs.tz.guess();
+            log.debug("timezone", "Guessing timezone: " + guess);
+            if (guess) {
+                this.checkTimezone(guess);
+                return guess;
+            } else {
+                return "UTC";
+            }
+        } catch (e) {
+            // Guess failed, fall back to UTC
+            log.debug("timezone", "Guessed an invalid timezone. Use UTC as fallback");
+            return "UTC";
+        }
+    }
+
+    /**
+     * Get the current offset
+     * @returns {string} Time offset
+     */
+    getTimezoneOffset() {
+        return dayjs().format("Z");
+    }
+
+    /**
+     * Throw an error if the timezone is invalid
+     * @param {string} timezone Timezone to test
+     * @returns {void}
+     * @throws The timezone is invalid
+     */
+    checkTimezone(timezone : string) {
+        try {
+            dayjs.utc("2013-11-18 11:55").tz(timezone).format();
+        } catch (e) {
+            throw new Error("Invalid timezone:" + timezone);
+        }
+    }
+
+    /**
+     * Initialize the data directory
+     */
+    initDataDir() {
+        // Check if a directory
+        if (!fs.lstatSync(this.config.dataDir).isDirectory()) {
+            throw new Error(`Fatal error: ${this.config.dataDir} is not a directory`);
+        }
+
+        if (! fs.existsSync(this.config.dataDir)) {
+            fs.mkdirSync(this.config.dataDir, { recursive: true });
+        }
+        log.info("server", `Data Dir: ${this.config.dataDir}`);
+    }
+
+    /**
+     * Init or reset JWT secret
+     * @returns  JWT secret
+     */
+    async initJWTSecret() : Promise<Bean> {
+        let jwtSecretBean = await R.findOne("setting", " `key` = ? ", [
+            "jwtSecret",
+        ]);
+
+        if (!jwtSecretBean) {
+            jwtSecretBean = R.dispense("setting");
+            jwtSecretBean.key = "jwtSecret";
+        }
+
+        jwtSecretBean.value = generatePasswordHash(genSecret());
+        await R.store(jwtSecretBean);
+        return jwtSecretBean;
+    }
+}
--- a/backend/index.ts
+++ b/backend/index.ts
@ -0,0 +1,6 @@
+import { DockgeServer } from "./dockge-server";
+import { log } from "./log";
+
+log.info("server", "Welcome to dockge!");
+const server = new DockgeServer();
+await server.serve();
--- a/backend/log.ts
+++ b/backend/log.ts
@ -0,0 +1,208 @@
+// Console colors
+// https://stackoverflow.com/questions/9781218/how-to-change-node-jss-console-font-color
+import { intHash, isDev } from "./util-common";
+import dayjs from "dayjs";
+
+export const CONSOLE_STYLE_Reset = "\x1b[0m";
+export const CONSOLE_STYLE_Bright = "\x1b[1m";
+export const CONSOLE_STYLE_Dim = "\x1b[2m";
+export const CONSOLE_STYLE_Underscore = "\x1b[4m";
+export const CONSOLE_STYLE_Blink = "\x1b[5m";
+export const CONSOLE_STYLE_Reverse = "\x1b[7m";
+export const CONSOLE_STYLE_Hidden = "\x1b[8m";
+
+export const CONSOLE_STYLE_FgBlack = "\x1b[30m";
+export const CONSOLE_STYLE_FgRed = "\x1b[31m";
+export const CONSOLE_STYLE_FgGreen = "\x1b[32m";
+export const CONSOLE_STYLE_FgYellow = "\x1b[33m";
+export const CONSOLE_STYLE_FgBlue = "\x1b[34m";
+export const CONSOLE_STYLE_FgMagenta = "\x1b[35m";
+export const CONSOLE_STYLE_FgCyan = "\x1b[36m";
+export const CONSOLE_STYLE_FgWhite = "\x1b[37m";
+export const CONSOLE_STYLE_FgGray = "\x1b[90m";
+export const CONSOLE_STYLE_FgOrange = "\x1b[38;5;208m";
+export const CONSOLE_STYLE_FgLightGreen = "\x1b[38;5;119m";
+export const CONSOLE_STYLE_FgLightBlue = "\x1b[38;5;117m";
+export const CONSOLE_STYLE_FgViolet = "\x1b[38;5;141m";
+export const CONSOLE_STYLE_FgBrown = "\x1b[38;5;130m";
+export const CONSOLE_STYLE_FgPink = "\x1b[38;5;219m";
+
+export const CONSOLE_STYLE_BgBlack = "\x1b[40m";
+export const CONSOLE_STYLE_BgRed = "\x1b[41m";
+export const CONSOLE_STYLE_BgGreen = "\x1b[42m";
+export const CONSOLE_STYLE_BgYellow = "\x1b[43m";
+export const CONSOLE_STYLE_BgBlue = "\x1b[44m";
+export const CONSOLE_STYLE_BgMagenta = "\x1b[45m";
+export const CONSOLE_STYLE_BgCyan = "\x1b[46m";
+export const CONSOLE_STYLE_BgWhite = "\x1b[47m";
+export const CONSOLE_STYLE_BgGray = "\x1b[100m";
+
+const consoleModuleColors = [
+    CONSOLE_STYLE_FgCyan,
+    CONSOLE_STYLE_FgGreen,
+    CONSOLE_STYLE_FgLightGreen,
+    CONSOLE_STYLE_FgBlue,
+    CONSOLE_STYLE_FgLightBlue,
+    CONSOLE_STYLE_FgMagenta,
+    CONSOLE_STYLE_FgOrange,
+    CONSOLE_STYLE_FgViolet,
+    CONSOLE_STYLE_FgBrown,
+    CONSOLE_STYLE_FgPink,
+];
+
+const consoleLevelColors : Record<string, string> = {
+    "INFO": CONSOLE_STYLE_FgCyan,
+    "WARN": CONSOLE_STYLE_FgYellow,
+    "ERROR": CONSOLE_STYLE_FgRed,
+    "DEBUG": CONSOLE_STYLE_FgGray,
+};
+
+class Logger {
+
+    /**
+     * DOCKGE_HIDE_LOG=debug_monitor,info_monitor
+     *
+     * Example:
+     *  [
+     *     "debug_monitor",          // Hide all logs that level is debug and the module is monitor
+     *     "info_monitor",
+     *  ]
+     */
+    hideLog : Record<string, string[]> = {
+        info: [],
+        warn: [],
+        error: [],
+        debug: [],
+    };
+
+    /**
+     *
+     */
+    constructor() {
+        if (typeof process !== "undefined" && process.env.DOCKGE_HIDE_LOG) {
+            const list = process.env.DOCKGE_HIDE_LOG.split(",").map(v => v.toLowerCase());
+
+            for (const pair of list) {
+                // split first "_" only
+                const values = pair.split(/_(.*)/s);
+
+                if (values.length >= 2) {
+                    this.hideLog[values[0]].push(values[1]);
+                }
+            }
+
+            this.debug("server", "DOCKGE_HIDE_LOG is set");
+            this.debug("server", this.hideLog);
+        }
+    }
+
+    /**
+     * Write a message to the log
+     * @param module The module the log comes from
+     * @param msg Message to write
+     * @param level Log level. One of INFO, WARN, ERROR, DEBUG or can be customized.
+     */
+    log(module: string, msg: unknown, level: string) {
+        if (this.hideLog[level] && this.hideLog[level].includes(module.toLowerCase())) {
+            return;
+        }
+
+        module = module.toUpperCase();
+        level = level.toUpperCase();
+
+        let now;
+        if (dayjs.tz) {
+            now = dayjs.tz(new Date()).format();
+        } else {
+            now = dayjs().format();
+        }
+
+        const levelColor = consoleLevelColors[level];
+        const moduleColor = consoleModuleColors[intHash(module, consoleModuleColors.length)];
+
+        let timePart = CONSOLE_STYLE_FgCyan + now + CONSOLE_STYLE_Reset;
+        const modulePart = "[" + moduleColor + module + CONSOLE_STYLE_Reset + "]";
+        const levelPart = levelColor + `${level}:` + CONSOLE_STYLE_Reset;
+
+        if (level === "INFO") {
+            console.info(timePart, modulePart, levelPart, msg);
+        } else if (level === "WARN") {
+            console.warn(timePart, modulePart, levelPart, msg);
+        } else if (level === "ERROR") {
+            let msgPart : unknown;
+            if (typeof msg === "string") {
+                msgPart = CONSOLE_STYLE_FgRed + msg + CONSOLE_STYLE_Reset;
+            } else {
+                msgPart = msg;
+            }
+            console.error(timePart, modulePart, levelPart, msgPart);
+        } else if (level === "DEBUG") {
+            if (isDev) {
+                timePart = CONSOLE_STYLE_FgGray + now + CONSOLE_STYLE_Reset;
+                let msgPart : unknown;
+                if (typeof msg === "string") {
+                    msgPart = CONSOLE_STYLE_FgGray + msg + CONSOLE_STYLE_Reset;
+                } else {
+                    msgPart = msg;
+                }
+                console.debug(timePart, modulePart, levelPart, msgPart);
+            }
+        } else {
+            console.log(timePart, modulePart, msg);
+        }
+    }
+
+    /**
+     * Log an INFO message
+     * @param module Module log comes from
+     * @param msg Message to write
+     */
+    info(module: string, msg: unknown) {
+        this.log(module, msg, "info");
+    }
+
+    /**
+     * Log a WARN message
+     * @param module Module log comes from
+     * @param msg Message to write
+     */
+    warn(module: string, msg: unknown) {
+        this.log(module, msg, "warn");
+    }
+
+    /**
+     * Log an ERROR message
+     * @param module Module log comes from
+     * @param msg Message to write
+     */
+    error(module: string, msg: unknown) {
+        this.log(module, msg, "error");
+    }
+
+    /**
+     * Log a DEBUG message
+     * @param module Module log comes from
+     * @param msg Message to write
+     */
+    debug(module: string, msg: unknown) {
+        this.log(module, msg, "debug");
+    }
+
+    /**
+     * Log an exception as an ERROR
+     * @param module Module log comes from
+     * @param exception The exception to include
+     * @param msg The message to write
+     */
+    exception(module: string, exception: unknown, msg: unknown) {
+        let finalMessage = exception;
+
+        if (msg) {
+            finalMessage = `${msg}: ${exception}`;
+        }
+
+        this.log(module, finalMessage, "error");
+    }
+}
+
+export const log = new Logger();
--- a/backend/migrations/2023-10-20-0829-setting-table.ts
+++ b/backend/migrations/2023-10-20-0829-setting-table.ts
@ -0,0 +1,14 @@
+import { Knex } from "knex";
+
+export async function up(knex: Knex): Promise<void> {
+    return knex.schema.createTable("setting", (table) => {
+        table.increments("id");
+        table.string("key", 200).notNullable().unique().collate("utf8_general_ci");
+        table.text("value");
+        table.string("type", 20);
+    });
+}
+
+export async function down(knex: Knex): Promise<void> {
+    return knex.schema.dropTable("setting");
+}
--- a/backend/migrations/2023-10-20-0829-user-table.ts
+++ b/backend/migrations/2023-10-20-0829-user-table.ts
@ -0,0 +1,19 @@
+import { Knex } from "knex";
+
+export async function up(knex: Knex): Promise<void> {
+    // Create the user table
+    return knex.schema.createTable("user", (table) => {
+        table.increments("id");
+        table.string("username", 255).notNullable().unique().collate("utf8_general_ci");
+        table.string("password", 255);
+        table.boolean("active").notNullable().defaultTo(true);
+        table.string("timezone", 150);
+        table.string("twofa_secret", 64);
+        table.boolean("twofa_status").notNullable().defaultTo(false);
+        table.string("twofa_last_token", 6);
+    });
+}
+
+export async function down(knex: Knex): Promise<void> {
+    return knex.schema.dropTable("user");
+}
--- a/backend/models/user.ts
+++ b/backend/models/user.ts
@ -0,0 +1,44 @@
+import jwt from "jsonwebtoken";
+import { R } from "redbean-node";
+import { BeanModel } from "redbean-node/dist/bean-model";
+import { generatePasswordHash, shake256, SHAKE256_LENGTH } from "../password-hash";
+
+export class User extends BeanModel {
+    /**
+     * Reset user password
+     * Fix #1510, as in the context reset-password.js, there is no auto model mapping. Call this static function instead.
+     * @param {number} userID ID of user to update
+     * @param {string} newPassword Users new password
+     * @returns {Promise<void>}
+     */
+    static async resetPassword(userID : number, newPassword : string) {
+        await R.exec("UPDATE `user` SET password = ? WHERE id = ? ", [
+            generatePasswordHash(newPassword),
+            userID
+        ]);
+    }
+
+    /**
+     * Reset this users password
+     * @param {string} newPassword Users new password
+     * @returns {Promise<void>}
+     */
+    async resetPassword(newPassword : string) {
+        await User.resetPassword(this.id, newPassword);
+        this.password = newPassword;
+    }
+
+    /**
+     * Create a new JWT for a user
+     * @param {User} user The User to create a JsonWebToken for
+     * @param {string} jwtSecret The key used to sign the JsonWebToken
+     * @returns {string} the JsonWebToken as a string
+     */
+    static createJWT(user : User, jwtSecret : string) {
+        return jwt.sign({
+            username: user.username,
+            h: shake256(user.password, SHAKE256_LENGTH),
+        }, jwtSecret);
+    }
+
+}
--- a/backend/password-hash.ts
+++ b/backend/password-hash.ts
@ -0,0 +1,47 @@
+import bcrypt from "bcryptjs";
+import crypto from "crypto";
+const saltRounds = 10;
+
+/**
+ * Hash a password
+ * @param {string} password Password to hash
+ * @returns {string} Hash
+ */
+export function generatePasswordHash(password : string) {
+    return bcrypt.hashSync(password, saltRounds);
+}
+
+/**
+ * Verify a password against a hash
+ * @param {string} password Password to verify
+ * @param {string} hash Hash to verify against
+ * @returns {boolean} Does the password match the hash?
+ */
+export function verifyPassword(password, hash) {
+    return bcrypt.compareSync(password, hash);
+}
+
+/**
+ * Does the hash need to be rehashed?
+ * @param {string} hash Hash to check
+ * @returns {boolean} Needs to be rehashed?
+ */
+export function needRehashPassword(hash : string) : boolean {
+    return false;
+}
+
+export const SHAKE256_LENGTH = 16;
+
+/**
+ * @param {string} data The data to be hashed
+ * @param {number} len Output length of the hash
+ * @returns {string} The hashed data in hex format
+ */
+export function shake256(data, len) {
+    if (!data) {
+        return "";
+    }
+    return crypto.createHash("shake256", { outputLength: len })
+        .update(data)
+        .digest("hex");
+}
--- a/backend/rate-limiter.ts
+++ b/backend/rate-limiter.ts
@ -0,0 +1,75 @@
+// "limit" is bugged in Typescript, use "limiter-es6-compat" instead
+// See https://github.com/jhurliman/node-rate-limiter/issues/80
+import { RateLimiter } from "limiter-es6-compat";
+import { log } from "./log";
+
+class KumaRateLimiter {
+
+    errorMessage : string;
+    rateLimiter : RateLimiter;
+
+    /**
+     * @param {object} config Rate limiter configuration object
+     */
+    constructor(config) {
+        this.errorMessage = config.errorMessage;
+        this.rateLimiter = new RateLimiter(config);
+    }
+
+    /**
+     * Callback for pass
+     * @callback passCB
+     * @param {object} err Too many requests
+     */
+
+    /**
+     * Should the request be passed through
+     * @param {passCB} callback Callback function to call with decision
+     * @param {number} num Number of tokens to remove
+     * @returns {Promise<boolean>} Should the request be allowed?
+     */
+    async pass(callback, num = 1) {
+        const remainingRequests = await this.removeTokens(num);
+        log.info("rate-limit", "remaining requests: " + remainingRequests);
+        if (remainingRequests < 0) {
+            if (callback) {
+                callback({
+                    ok: false,
+                    msg: this.errorMessage,
+                });
+            }
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * Remove a given number of tokens
+     * @param {number} num Number of tokens to remove
+     * @returns {Promise<number>} Number of remaining tokens
+     */
+    async removeTokens(num = 1) {
+        return await this.rateLimiter.removeTokens(num);
+    }
+}
+
+export const loginRateLimiter = new KumaRateLimiter({
+    tokensPerInterval: 20,
+    interval: "minute",
+    fireImmediately: true,
+    errorMessage: "Too frequently, try again later."
+});
+
+export const apiRateLimiter = new KumaRateLimiter({
+    tokensPerInterval: 60,
+    interval: "minute",
+    fireImmediately: true,
+    errorMessage: "Too frequently, try again later."
+});
+
+export const twoFaRateLimiter = new KumaRateLimiter({
+    tokensPerInterval: 30,
+    interval: "minute",
+    fireImmediately: true,
+    errorMessage: "Too frequently, try again later."
+});
--- a/backend/router.ts
+++ b/backend/router.ts
@ -0,0 +1,6 @@
+import { DockgeServer } from "./dockge-server";
+import { Express, Router as ExpressRouter } from "express";
+
+export abstract class Router {
+    abstract create(app : Express, server : DockgeServer): ExpressRouter;
+}
--- a/backend/routers/main-router.ts
+++ b/backend/routers/main-router.ts
@ -0,0 +1,16 @@
+import { DockgeServer } from "../dockgeServer";
+import { Router } from "../router";
+import express, { Express, Router as ExpressRouter } from "express";
+
+export class MainRouter extends Router {
+    create(app: Express, server: DockgeServer): ExpressRouter {
+        const router = express.Router();
+
+        router.get("/", (req, res) => {
+
+        });
+
+        return router;
+    }
+
+}
--- a/backend/settings.ts
+++ b/backend/settings.ts
@ -0,0 +1,174 @@
+import { R } from "redbean-node";
+import { log } from "./log";
+
+export class Settings {
+
+    /**
+     *  Example:
+     *      {
+     *         key1: {
+     *             value: "value2",
+     *             timestamp: 12345678
+     *         },
+     *         key2: {
+     *             value: 2,
+     *             timestamp: 12345678
+     *         },
+     *     }
+     * @type {{}}
+     */
+    static cacheList = {
+
+    };
+
+    static cacheCleaner = null;
+
+    /**
+     * Retrieve value of setting based on key
+     * @param {string} key Key of setting to retrieve
+     * @returns {Promise<any>} Value
+     */
+    static async get(key) {
+
+        // Start cache clear if not started yet
+        if (!Settings.cacheCleaner) {
+            Settings.cacheCleaner = setInterval(() => {
+                log.debug("settings", "Cache Cleaner is just started.");
+                for (key in Settings.cacheList) {
+                    if (Date.now() - Settings.cacheList[key].timestamp > 60 * 1000) {
+                        log.debug("settings", "Cache Cleaner deleted: " + key);
+                        delete Settings.cacheList[key];
+                    }
+                }
+
+            }, 60 * 1000);
+        }
+
+        // Query from cache
+        if (key in Settings.cacheList) {
+            const v = Settings.cacheList[key].value;
+            log.debug("settings", `Get Setting (cache): ${key}: ${v}`);
+            return v;
+        }
+
+        const value = await R.getCell("SELECT `value` FROM setting WHERE `key` = ? ", [
+            key,
+        ]);
+
+        try {
+            const v = JSON.parse(value);
+            log.debug("settings", `Get Setting: ${key}: ${v}`);
+
+            Settings.cacheList[key] = {
+                value: v,
+                timestamp: Date.now()
+            };
+
+            return v;
+        } catch (e) {
+            return value;
+        }
+    }
+
+    /**
+     * Sets the specified setting to specified value
+     * @param {string} key Key of setting to set
+     * @param {any} value Value to set to
+     * @param {?string} type Type of setting
+     * @returns {Promise<void>}
+     */
+    static async set(key, value, type = null) {
+
+        let bean = await R.findOne("setting", " `key` = ? ", [
+            key,
+        ]);
+        if (!bean) {
+            bean = R.dispense("setting");
+            bean.key = key;
+        }
+        bean.type = type;
+        bean.value = JSON.stringify(value);
+        await R.store(bean);
+
+        Settings.deleteCache([ key ]);
+    }
+
+    /**
+     * Get settings based on type
+     * @param {string} type The type of setting
+     * @returns {Promise<Bean>} Settings
+     */
+    static async getSettings(type) {
+        const list = await R.getAll("SELECT `key`, `value` FROM setting WHERE `type` = ? ", [
+            type,
+        ]);
+
+        const result = {};
+
+        for (const row of list) {
+            try {
+                result[row.key] = JSON.parse(row.value);
+            } catch (e) {
+                result[row.key] = row.value;
+            }
+        }
+
+        return result;
+    }
+
+    /**
+     * Set settings based on type
+     * @param {string} type Type of settings to set
+     * @param {object} data Values of settings
+     * @returns {Promise<void>}
+     */
+    static async setSettings(type, data) {
+        const keyList = Object.keys(data);
+
+        const promiseList = [];
+
+        for (const key of keyList) {
+            let bean = await R.findOne("setting", " `key` = ? ", [
+                key
+            ]);
+
+            if (bean == null) {
+                bean = R.dispense("setting");
+                bean.type = type;
+                bean.key = key;
+            }
+
+            if (bean.type === type) {
+                bean.value = JSON.stringify(data[key]);
+                promiseList.push(R.store(bean));
+            }
+        }
+
+        await Promise.all(promiseList);
+
+        Settings.deleteCache(keyList);
+    }
+
+    /**
+     * Delete selected keys from settings cache
+     * @param {string[]} keyList Keys to remove
+     * @returns {void}
+     */
+    static deleteCache(keyList) {
+        for (const key of keyList) {
+            delete Settings.cacheList[key];
+        }
+    }
+
+    /**
+     * Stop the cache cleaner if running
+     * @returns {void}
+     */
+    static stopCacheCleaner() {
+        if (Settings.cacheCleaner) {
+            clearInterval(Settings.cacheCleaner);
+            Settings.cacheCleaner = null;
+        }
+    }
+}
+
--- a/backend/socket-handler.ts
+++ b/backend/socket-handler.ts
@ -0,0 +1,6 @@
+import { DockgeServer } from "./dockge-server";
+import { DockgeSocket } from "./util-server";
+
+export abstract class SocketHandler {
+    abstract create(socket : DockgeSocket, server : DockgeServer): void;
+}
--- a/backend/socket-handlers/docker-socket-handler.ts
+++ b/backend/socket-handlers/docker-socket-handler.ts
@ -0,0 +1,61 @@
+import { SocketHandler } from "../socket-handler.js";
+import { DockgeServer } from "../dockge-server";
+import { checkLogin, DockgeSocket } from "../util-server";
+import { log } from "../log";
+
+const allowedCommandList : string[] = [
+    "docker",
+];
+
+export class DockerSocketHandler extends SocketHandler {
+    create(socket : DockgeSocket, server : DockgeServer) {
+
+        socket.on("composeUp", async (compose, callback) => {
+
+        });
+
+        socket.on("terminalInput", async (cmd : unknown, errorCallback) => {
+            try {
+                checkLogin(socket);
+
+                if (typeof(cmd) !== "string") {
+                    throw new Error("Command must be a string.");
+                }
+
+                // Check if the command is allowed
+                const cmdParts = cmd.split(" ");
+                const executable = cmdParts[0].trim();
+                log.debug("console", "Executable: " + executable);
+                log.debug("console", "Executable length: " + executable.length);
+
+                if (!allowedCommandList.includes(executable)) {
+                    throw new Error("Command not allowed.");
+                }
+
+                server.terminal.write(cmd);
+            } catch (e) {
+                errorCallback({
+                    ok: false,
+                    msg: e.message,
+                });
+            }
+        });
+
+        // Setup
+        socket.on("getTerminalBuffer", async (callback) => {
+            try {
+                checkLogin(socket);
+                callback({
+                    ok: true,
+                    buffer: server.terminal.getBuffer(),
+                });
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message,
+                });
+            }
+
+        });
+    }
+}
--- a/backend/socket-handlers/main-socket-handler.ts
+++ b/backend/socket-handlers/main-socket-handler.ts
@ -0,0 +1,220 @@
+import { SocketHandler } from "../socket-handler.js";
+import { Socket } from "socket.io";
+import { DockgeServer } from "../dockge-server";
+import { log } from "../log";
+import { R } from "redbean-node";
+import { loginRateLimiter, twoFaRateLimiter } from "../rate-limiter";
+import { generatePasswordHash, needRehashPassword, shake256, SHAKE256_LENGTH, verifyPassword } from "../password-hash";
+import { User } from "../models/user";
+import { DockgeSocket } from "../util-server";
+import { passwordStrength } from "check-password-strength";
+import jwt from "jsonwebtoken";
+
+export class MainSocketHandler extends SocketHandler {
+    create(socket : DockgeSocket, server : DockgeServer) {
+
+        // ***************************
+        // Public Socket API
+        // ***************************
+
+        // Setup
+        socket.on("setup", async (username, password, callback) => {
+            try {
+                if (passwordStrength(password).value === "Too weak") {
+                    throw new Error("Password is too weak. It should contain alphabetic and numeric characters. It must be at least 6 characters in length.");
+                }
+
+                if ((await R.knex("user").count("id as count").first()).count !== 0) {
+                    throw new Error("Dockge has been initialized. If you want to run setup again, please delete the database.");
+                }
+
+                const user = R.dispense("user");
+                user.username = username;
+                user.password = generatePasswordHash(password);
+                await R.store(user);
+
+                server.needSetup = false;
+
+                callback({
+                    ok: true,
+                    msg: "successAdded",
+                    msgi18n: true,
+                });
+
+            } catch (e) {
+                callback({
+                    ok: false,
+                    msg: e.message,
+                });
+            }
+        });
+
+        // Login by token
+        socket.on("loginByToken", async (token, callback) => {
+            const clientIP = await server.getClientIP(socket);
+
+            log.info("auth", `Login by token. IP=${clientIP}`);
+
+            try {
+                const decoded = jwt.verify(token, server.jwtSecret);
+
+                log.info("auth", "Username from JWT: " + decoded.username);
+
+                const user = await R.findOne("user", " username = ? AND active = 1 ", [
+                    decoded.username,
+                ]) as User;
+
+                if (user) {
+                    // Check if the password changed
+                    if (decoded.h !== shake256(user.password, SHAKE256_LENGTH)) {
+                        throw new Error("The token is invalid due to password change or old token");
+                    }
+
+                    log.debug("auth", "afterLogin");
+                    await this.afterLogin(socket, user);
+                    log.debug("auth", "afterLogin ok");
+
+                    log.info("auth", `Successfully logged in user ${decoded.username}. IP=${clientIP}`);
+
+                    callback({
+                        ok: true,
+                    });
+                } else {
+
+                    log.info("auth", `Inactive or deleted user ${decoded.username}. IP=${clientIP}`);
+
+                    callback({
+                        ok: false,
+                        msg: "authUserInactiveOrDeleted",
+                        msgi18n: true,
+                    });
+                }
+            } catch (error) {
+                log.error("auth", `Invalid token. IP=${clientIP}`);
+                if (error.message) {
+                    log.error("auth", error.message, `IP=${clientIP}`);
+                }
+                callback({
+                    ok: false,
+                    msg: "authInvalidToken",
+                    msgi18n: true,
+                });
+            }
+
+        });
+
+        // Login
+        socket.on("login", async (data, callback) => {
+            const clientIP = await server.getClientIP(socket);
+
+            log.info("auth", `Login by username + password. IP=${clientIP}`);
+
+            // Checking
+            if (typeof callback !== "function") {
+                return;
+            }
+
+            if (!data) {
+                return;
+            }
+
+            // Login Rate Limit
+            if (!await loginRateLimiter.pass(callback)) {
+                log.info("auth", `Too many failed requests for user ${data.username}. IP=${clientIP}`);
+                return;
+            }
+
+            const user = await this.login(data.username, data.password);
+
+            if (user) {
+                if (user.twofa_status === 0) {
+                    this.afterLogin(socket, user);
+
+                    log.info("auth", `Successfully logged in user ${data.username}. IP=${clientIP}`);
+
+                    callback({
+                        ok: true,
+                        token: User.createJWT(user, server.jwtSecret),
+                    });
+                }
+
+                if (user.twofa_status === 1 && !data.token) {
+
+                    log.info("auth", `2FA token required for user ${data.username}. IP=${clientIP}`);
+
+                    callback({
+                        tokenRequired: true,
+                    });
+                }
+
+                if (data.token) {
+                    const verify = notp.totp.verify(data.token, user.twofa_secret, twoFAVerifyOptions);
+
+                    if (user.twofa_last_token !== data.token && verify) {
+                        this.afterLogin(socket, user);
+
+                        await R.exec("UPDATE `user` SET twofa_last_token = ? WHERE id = ? ", [
+                            data.token,
+                            socket.userID,
+                        ]);
+
+                        log.info("auth", `Successfully logged in user ${data.username}. IP=${clientIP}`);
+
+                        callback({
+                            ok: true,
+                            token: User.createJWT(user, server.jwtSecret),
+                        });
+                    } else {
+
+                        log.warn("auth", `Invalid token provided for user ${data.username}. IP=${clientIP}`);
+
+                        callback({
+                            ok: false,
+                            msg: "authInvalidToken",
+                            msgi18n: true,
+                        });
+                    }
+                }
+            } else {
+
+                log.warn("auth", `Incorrect username or password for user ${data.username}. IP=${clientIP}`);
+
+                callback({
+                    ok: false,
+                    msg: "authIncorrectCreds",
+                    msgi18n: true,
+                });
+            }
+
+        });
+    }
+
+    async afterLogin(socket : DockgeSocket, user : User) {
+        socket.userID = user.id;
+        socket.join(user.id + "");
+        socket.join("terminal");
+    }
+
+    async login(username : string, password : string) {
+        if (typeof username !== "string" || typeof password !== "string") {
+            return null;
+        }
+
+        const user = await R.findOne("user", " username = ? AND active = 1 ", [
+            username,
+        ]);
+
+        if (user && verifyPassword(password, user.password)) {
+            // Upgrade the hash to bcrypt
+            if (needRehashPassword(user.password)) {
+                await R.exec("UPDATE `user` SET password = ? WHERE id = ? ", [
+                    generatePasswordHash(password),
+                    user.id,
+                ]);
+            }
+            return user;
+        }
+
+        return null;
+    }
+}
--- a/backend/terminal.ts
+++ b/backend/terminal.ts
@ -0,0 +1,43 @@
+import { DockgeServer } from "./dockge-server";
+import * as os from "node:os";
+import * as pty from "node-pty";
+import { LimitQueue } from "./utils/limit-queue";
+
+const shell = os.platform() === "win32" ? "pwsh.exe" : "bash";
+
+export class Terminal {
+
+    ptyProcess;
+    private server : DockgeServer;
+    private buffer : LimitQueue<string> = new LimitQueue(100);
+
+    constructor(server : DockgeServer) {
+        this.server = server;
+
+        this.ptyProcess = pty.spawn(shell, [], {
+            name: "dockge-terminal",
+            cwd: "./tmp",
+        });
+
+        // this.ptyProcess.write("npm remove lodash\r");
+        //this.ptyProcess.write("npm install lodash\r");
+
+        this.ptyProcess.onData((data) => {
+            this.buffer.push(data);
+            this.server.io.to("terminal").emit("commandOutput", data);
+        });
+
+    }
+
+    write(input : string) {
+        this.ptyProcess.write(input);
+    }
+
+    /**
+     * Get the terminal output string for re-connecting
+     */
+    getBuffer() : string {
+        return this.buffer.join("");
+    }
+
+}
--- a/backend/util-common.ts
+++ b/backend/util-common.ts
@ -0,0 +1,118 @@
+import dayjs from "dayjs";
+
+// For loading dayjs plugins, don't remove event though it is not used in this file
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+
+import { randomBytes } from "crypto";
+
+export const isDev = process.env.NODE_ENV === "development";
+
+/**
+ * Generate a decimal integer number from a string
+ * @param str Input
+ * @param length Default is 10 which means 0 - 9
+ */
+export function intHash(str : string, length = 10) : number {
+    // A simple hashing function (you can use more complex hash functions if needed)
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash += str.charCodeAt(i);
+    }
+    // Normalize the hash to the range [0, 10]
+    return (hash % length + length) % length; // Ensure the result is non-negative
+}
+
+/**
+ * Delays for specified number of seconds
+ * @param ms Number of milliseconds to sleep for
+ */
+export function sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+/**
+ * Generate a random alphanumeric string of fixed length
+ * @param length Length of string to generate
+ * @returns string
+ */
+export function genSecret(length = 64) {
+    let secret = "";
+    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    const charsLength = chars.length;
+    for ( let i = 0; i < length; i++ ) {
+        secret += chars.charAt(getCryptoRandomInt(0, charsLength - 1));
+    }
+    return secret;
+}
+
+/**
+ * Get a random integer suitable for use in cryptography between upper
+ * and lower bounds.
+ * @param min Minimum value of integer
+ * @param max Maximum value of integer
+ * @returns Cryptographically suitable random integer
+ */
+export function getCryptoRandomInt(min: number, max: number):number {
+
+    // synchronous version of: https://github.com/joepie91/node-random-number-csprng
+
+    const range = max - min;
+    if (range >= Math.pow(2, 32)) {
+        console.log("Warning! Range is too large.");
+    }
+
+    let tmpRange = range;
+    let bitsNeeded = 0;
+    let bytesNeeded = 0;
+    let mask = 1;
+
+    while (tmpRange > 0) {
+        if (bitsNeeded % 8 === 0) {
+            bytesNeeded += 1;
+        }
+        bitsNeeded += 1;
+        mask = mask << 1 | 1;
+        tmpRange = tmpRange >>> 1;
+    }
+
+    const randomBytes = getRandomBytes(bytesNeeded);
+    let randomValue = 0;
+
+    for (let i = 0; i < bytesNeeded; i++) {
+        randomValue |= randomBytes[i] << 8 * i;
+    }
+
+    randomValue = randomValue & mask;
+
+    if (randomValue <= range) {
+        return min + randomValue;
+    } else {
+        return getCryptoRandomInt(min, max);
+    }
+}
+
+/**
+ * Returns either the NodeJS crypto.randomBytes() function or its
+ * browser equivalent implemented via window.crypto.getRandomValues()
+ */
+const getRandomBytes = (
+    (typeof window !== "undefined" && window.crypto)
+
+        // Browsers
+        ? function () {
+            return (numBytes: number) => {
+                const randomBytes = new Uint8Array(numBytes);
+                for (let i = 0; i < numBytes; i += 65536) {
+                    window.crypto.getRandomValues(randomBytes.subarray(i, i + Math.min(numBytes - i, 65536)));
+                }
+                return randomBytes;
+            };
+        }
+
+        // Node
+        : function () {
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            return randomBytes;
+        }
+)();
--- a/backend/util-server.ts
+++ b/backend/util-server.ts
@ -0,0 +1,11 @@
+import { Socket } from "socket.io";
+
+export interface DockgeSocket extends Socket {
+    userID: number;
+}
+
+export function checkLogin(socket : DockgeSocket) {
+    if (!socket.userID) {
+        throw new Error("You are not logged in.");
+    }
+}
--- a/backend/utils/limit-queue.ts
+++ b/backend/utils/limit-queue.ts
@ -0,0 +1,24 @@
+/**
+ * Limit Queue
+ * The first element will be removed when the length exceeds the limit
+ */
+export class LimitQueue<T> extends Array<T> {
+    __limit;
+    __onExceed = null;
+
+    constructor(limit: number) {
+        super();
+        this.__limit = limit;
+    }
+
+    push(value : T) {
+        super.push(value);
+        if (this.length > this.__limit) {
+            const item = this.shift();
+            if (this.__onExceed) {
+                this.__onExceed(item);
+            }
+        }
+    }
+
+}
--- a/docker/Base.Dockerfile
+++ b/docker/Base.Dockerfile
@ -0,0 +1,20 @@
+FROM debian:bookworm-slim
+
+COPY --from=docker:dind /usr/local/bin/docker /usr/local/bin/
+
+RUN apt update && apt install --yes --no-install-recommends \
+    curl \
+    ca-certificates \
+    unzip \
+    && rm -rf /var/lib/apt/lists/*
+RUN curl https://bun.sh/install | bash -s "bun-v1.0.3"
+
+
+# Full Base Image
+# MariaDB, Chromium and fonts
+FROM base-slim AS base
+ENV DOCKGE_ENABLE_EMBEDDED_MARIADB=1
+RUN apt update && \
+    apt --yes --no-install-recommends install mariadb-server && \
+    rm -rf /var/lib/apt/lists/* && \
+    apt --yes autoremove
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@ -0,0 +1,15 @@
+FROM debian:bookworm-slim
+
+COPY --from=docker:dind /usr/local/bin/docker /usr/local/bin/
+
+RUN apt update && apt install --yes --no-install-recommends \
+    curl \
+    ca-certificates \
+    unzip \
+    && rm -rf /var/lib/apt/lists/*
+RUN curl https://bun.sh/install | bash -s "bun-v1.0.3"
+
+WORKDIR /app
+
+COPY . .
+RUN bun install --production --frozen-lockfile
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@ -0,0 +1,20 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    BDropdown: typeof import('bootstrap-vue-next')['BDropdown']
+    BDropdownItem: typeof import('bootstrap-vue-next')['BDropdownItem']
+    Confirm: typeof import('./src/components/Confirm.vue')['default']
+    Login: typeof import('./src/components/Login.vue')['default']
+    MonitorListItem: typeof import('./src/components/MonitorListItem.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    StackList: typeof import('./src/components/StackList.vue')['default']
+    StackListItem: typeof import('./src/components/StackListItem.vue')['default']
+  }
+}
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" id="theme-color" content="" />
+    <meta name="description" content="" />
+    <title>Dockge</title>
+    <style>
+        .noscript-message {
+            font-size: 20px;
+            text-align: center;
+            padding: 10px;
+            max-width: 500px;
+            margin: 0 auto;
+        }
+    </style>
+</head>
+<body>
+<noscript>
+    <div class="noscript-message">
+        Sorry, you don't seem to have JavaScript enabled or your browser
+        doesn't support it.<br />This website requires JavaScript to function.
+        Please enable JavaScript in your browser settings to continue.
+    </div>
+</noscript>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+</body>
+</html>
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/icon-192x192.png
+++ b/frontend/public/icon-192x192.png
--- a/frontend/public/icon-512x512.png
+++ b/frontend/public/icon-512x512.png
--- a/frontend/public/icon.svg
+++ b/frontend/public/icon.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="640" height="640" viewBox="0 0 640 640" xml:space="preserve">
+<desc>Created with Fabric.js 5.3.0</desc>
+<defs>
+</defs>
+<g transform="matrix(0.9544918218 0 0 0.9544918218 320 325.5657767239)" id="0UAuLmXgnot4bJxVEVJCQ"  >
+<linearGradient id="SVGID_136_0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 1 -236.6470440833 -213.9441386034)"  x1="259.78" y1="261.15" x2="463.85" y2="456.49">
+<stop offset="0%" style="stop-color:#74C2FF;stop-opacity: 1"/>
+<stop offset="100%" style="stop-color:rgb(134,230,169);stop-opacity: 1"/>
+</linearGradient>
+<path style="stroke: rgb(242,242,242); stroke-opacity: 0.51; stroke-width: 190; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: url(#SVGID_136_0); fill-rule: nonzero; opacity: 1;"  transform=" translate(0, 0)" d="M 131.8665 -139.04883 C 159.01022 -111.20969000000001 170.12421 -99.45396000000001 203.11849999999998 -51.72057000000001 C 236.1128 -3.9871800000000093 264.44147999999996 83.98416999999998 187.33995 144.05073 C 177.72728999999998 151.53955 166.73827 158.81189999999998 154.65932999999998 165.65812999999997 C 69.85514999999998 213.72433999999998 -68.67309000000003 240.78578 -161.79279 174.28328999999997 C -268.17583 98.30862999999997 -260.10282 -68.66557000000003 -144.35093 -170.50579000000005 C -28.599040000000002 -272.34602000000007 104.72278 -166.88797000000005 131.86649999999997 -139.04883000000004 z" stroke-linecap="round" />
+</g>
+</svg>
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@ -0,0 +1,19 @@
+{
+    "name": "Dockge",
+    "short_name": "Dockge",
+    "start_url": "/",
+    "background_color": "#fff",
+    "display": "standalone",
+    "icons": [
+        {
+            "src": "icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -0,0 +1,9 @@
+<template>
+    <router-view />
+</template>
+
+<script>
+export default {
+
+};
+</script>
--- a/frontend/src/components/Confirm.vue
+++ b/frontend/src/components/Confirm.vue
@ -0,0 +1,84 @@
+<template>
+    <div ref="modal" class="modal fade" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 id="exampleModalLabel" class="modal-title">
+                        {{ title || $t("Confirm") }}
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                </div>
+                <div class="modal-body">
+                    <slot />
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn" :class="btnStyle" data-bs-dismiss="modal" @click="yes">
+                        {{ yesText }}
+                    </button>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="no">
+                        {{ noText }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Modal } from "bootstrap";
+
+export default {
+    props: {
+        /** Style of button */
+        btnStyle: {
+            type: String,
+            default: "btn-primary",
+        },
+        /** Text to use as yes */
+        yesText: {
+            type: String,
+            default: "Yes",     // TODO: No idea what to translate this
+        },
+        /** Text to use as no */
+        noText: {
+            type: String,
+            default: "No",
+        },
+        /** Title to show on modal. Defaults to translated version of "Config" */
+        title: {
+            type: String,
+            default: null,
+        }
+    },
+    emits: [ "yes", "no" ],
+    data: () => ({
+        modal: null,
+    }),
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+    methods: {
+        /**
+         * Show the confirm dialog
+         * @returns {void}
+         */
+        show() {
+            this.modal.show();
+        },
+        /**
+         * @fires string "yes" Notify the parent when Yes is pressed
+         * @returns {void}
+         */
+        yes() {
+            this.$emit("yes");
+        },
+        /**
+         * @fires string "no" Notify the parent when No is pressed
+         * @returns {void}
+         */
+        no() {
+            this.$emit("no");
+        }
+    },
+};
+</script>
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@ -0,0 +1,146 @@
+<template>
+    <div class="form-container">
+        <div class="form">
+            <form @submit.prevent="submit">
+                <h1 class="h3 mb-3 fw-normal" />
+
+                <div v-if="!tokenRequired" class="form-floating">
+                    <input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username" autocomplete="username" required>
+                    <label for="floatingInput">{{ $t("Username") }}</label>
+                </div>
+
+                <div v-if="!tokenRequired" class="form-floating mt-3">
+                    <input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password" autocomplete="current-password" required>
+                    <label for="floatingPassword">{{ $t("Password") }}</label>
+                </div>
+
+                <div v-if="tokenRequired">
+                    <div class="form-floating mt-3">
+                        <input id="otp" v-model="token" type="text" maxlength="6" class="form-control" placeholder="123456" autocomplete="one-time-code" required>
+                        <label for="otp">{{ $t("Token") }}</label>
+                    </div>
+                </div>
+
+                <div class="form-check mb-3 mt-3 d-flex justify-content-center pe-4">
+                    <div class="form-check">
+                        <input id="remember" v-model="$root.remember" type="checkbox" value="remember-me" class="form-check-input">
+
+                        <label class="form-check-label" for="remember">
+                            {{ $t("Remember me") }}
+                        </label>
+                    </div>
+                </div>
+                <button class="w-100 btn btn-primary" type="submit" :disabled="processing">
+                    {{ $t("Login") }}
+                </button>
+
+                <div v-if="res && !res.ok" class="alert alert-danger mt-3" role="alert">
+                    {{ $t(res.msg) }}
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            processing: false,
+            username: "",
+            password: "",
+            token: "",
+            res: null,
+            tokenRequired: false,
+        };
+    },
+
+    mounted() {
+        document.title += " - Login";
+    },
+
+    unmounted() {
+        document.title = document.title.replace(" - Login", "");
+    },
+
+    methods: {
+        /**
+         * Submit the user details and attempt to log in
+         * @returns {void}
+         */
+        submit() {
+            this.processing = true;
+
+            this.login(this.username, this.password, this.token, (res) => {
+                this.processing = false;
+
+                if (res.tokenRequired) {
+                    this.tokenRequired = true;
+                } else {
+                    this.res = res;
+                }
+            });
+        },
+
+        /**
+         * Send request to log user in
+         * @param {string} username Username to log in with
+         * @param {string} password Password to log in with
+         * @param {string} token User token
+         * @param {loginCB} callback Callback to call with result
+         * @returns {void}
+         */
+        login(username, password, token, callback) {
+
+            this.$root.getSocket().emit("login", {
+                username,
+                password,
+                token,
+            }, (res) => {
+                if (res.tokenRequired) {
+                    callback(res);
+                }
+
+                if (res.ok) {
+                    this.$root.storage().token = res.token;
+                    this.$root.socketIO.token = res.token;
+                    this.$root.loggedIn = true;
+                    this.$root.username = this.$root.getJWTPayload()?.username;
+
+                    // Trigger Chrome Save Password
+                    history.pushState({}, "");
+                }
+
+                callback(res);
+            });
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-container {
+    display: flex;
+    align-items: center;
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+
+.form-floating {
+    > label {
+        padding-left: 1.3rem;
+    }
+
+    > .form-control {
+        padding-left: 1.3rem;
+    }
+}
+
+.form {
+    width: 100%;
+    max-width: 330px;
+    padding: 15px;
+    margin: auto;
+    text-align: center;
+}
+</style>
--- a/frontend/src/components/StackList.vue
+++ b/frontend/src/components/StackList.vue
@ -0,0 +1,455 @@
+<template>
+    <div class="shadow-box mb-3" :style="boxStyle">
+        <div class="list-header">
+            <div class="header-top">
+                <!-- TODO -->
+                <button v-if="false" class="btn btn-outline-normal ms-2" :class="{ 'active': selectMode }" type="button" @click="selectMode = !selectMode">
+                    {{ $t("Select") }}
+                </button>
+
+                <div class="placeholder"></div>
+                <div class="search-wrapper">
+                    <a v-if="searchText == ''" class="search-icon">
+                        <font-awesome-icon icon="search" />
+                    </a>
+                    <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
+                        <font-awesome-icon icon="times" />
+                    </a>
+                    <form>
+                        <input
+                            v-model="searchText" class="form-control search-input" :placeholder="$t('Search...')"
+                            autocomplete="off"
+                        />
+                    </form>
+                </div>
+            </div>
+
+            <!-- TODO -->
+            <div v-if="false" class="header-filter">
+                <!--<MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />-->
+            </div>
+
+            <!-- TODO: Selection Controls -->
+            <div v-if="selectMode && false" class="selection-controls px-2 pt-2">
+                <input
+                    v-model="selectAll"
+                    class="form-check-input select-input"
+                    type="checkbox"
+                />
+
+                <button class="btn-outline-normal" @click="pauseDialog"><font-awesome-icon icon="pause" size="sm" /> {{ $t("Pause") }}</button>
+                <button class="btn-outline-normal" @click="resumeSelected"><font-awesome-icon icon="play" size="sm" /> {{ $t("Resume") }}</button>
+
+                <span v-if="selectedMonitorCount > 0">
+                    {{ $t("selectedMonitorCount", [ selectedMonitorCount ]) }}
+                </span>
+            </div>
+        </div>
+        <div ref="monitorList" class="monitor-list" :class="{ scrollbar: scrollbar }" :style="monitorListStyle">
+            <div v-if="Object.keys($root.stackList).length === 0" class="text-center mt-3">
+                <router-link to="/compose">{{ $t("addFirstStackMsg") }}</router-link>
+            </div>
+
+            <StackListItem
+                v-for="(item, index) in sortedStackList"
+                :key="index"
+                :monitor="item"
+                :showPathName="filtersActive"
+                :isSelectMode="selectMode"
+                :isSelected="isSelected"
+                :select="select"
+                :deselect="deselect"
+            />
+        </div>
+    </div>
+
+    <Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="pauseSelected">
+        {{ $t("pauseMonitorMsg") }}
+    </Confirm>
+</template>
+
+<script>
+import Confirm from "../components/Confirm.vue";
+import StackListItem from "../components/StackListItem.vue";
+
+export default {
+    components: {
+        Confirm,
+        StackListItem,
+    },
+    props: {
+        /** Should the scrollbar be shown */
+        scrollbar: {
+            type: Boolean,
+        },
+    },
+    data() {
+        return {
+            searchText: "",
+            selectMode: false,
+            selectAll: false,
+            disableSelectAllWatcher: false,
+            selectedMonitors: {},
+            windowTop: 0,
+            filterState: {
+                status: null,
+                active: null,
+                tags: null,
+            }
+        };
+    },
+    computed: {
+        /**
+         * Improve the sticky appearance of the list by increasing its
+         * height as user scrolls down.
+         * Not used on mobile.
+         * @returns {object} Style for monitor list
+         */
+        boxStyle() {
+            if (window.innerWidth > 550) {
+                return {
+                    height: `calc(100vh - 160px + ${this.windowTop}px)`,
+                };
+            } else {
+                return {
+                    height: "calc(100vh - 160px)",
+                };
+            }
+
+        },
+
+        /**
+         * Returns a sorted list of monitors based on the applied filters and search text.
+         * @returns {Array} The sorted list of monitors.
+         */
+        sortedStackList() {
+            let result = Object.values(this.$root.stackList);
+
+            result = result.filter(monitor => {
+                // filter by search text
+                // finds monitor name, tag name or tag value
+                let searchTextMatch = true;
+                if (this.searchText !== "") {
+                    const loweredSearchText = this.searchText.toLowerCase();
+                    searchTextMatch =
+                        monitor.name.toLowerCase().includes(loweredSearchText)
+                        || monitor.tags.find(tag => tag.name.toLowerCase().includes(loweredSearchText)
+                            || tag.value?.toLowerCase().includes(loweredSearchText));
+                }
+
+                // filter by status
+                let statusMatch = true;
+                if (this.filterState.status != null && this.filterState.status.length > 0) {
+                    if (monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[monitor.id]) {
+                        monitor.status = this.$root.lastHeartbeatList[monitor.id].status;
+                    }
+                    statusMatch = this.filterState.status.includes(monitor.status);
+                }
+
+                // filter by active
+                let activeMatch = true;
+                if (this.filterState.active != null && this.filterState.active.length > 0) {
+                    activeMatch = this.filterState.active.includes(monitor.active);
+                }
+
+                // filter by tags
+                let tagsMatch = true;
+                if (this.filterState.tags != null && this.filterState.tags.length > 0) {
+                    tagsMatch = monitor.tags.map(tag => tag.tag_id) // convert to array of tag IDs
+                        .filter(monitorTagId => this.filterState.tags.includes(monitorTagId)) // perform Array Intersaction between filter and monitor's tags
+                        .length > 0;
+                }
+
+                // Hide children if not filtering
+                let showChild = true;
+                if (this.filterState.status == null && this.filterState.active == null && this.filterState.tags == null && this.searchText === "") {
+                    if (monitor.parent !== null) {
+                        showChild = false;
+                    }
+                }
+
+                return searchTextMatch && statusMatch && activeMatch && tagsMatch && showChild;
+            });
+
+            // Filter result by active state, weight and alphabetical
+            result.sort((m1, m2) => {
+                if (m1.active !== m2.active) {
+                    if (m1.active === false) {
+                        return 1;
+                    }
+
+                    if (m2.active === false) {
+                        return -1;
+                    }
+                }
+
+                if (m1.weight !== m2.weight) {
+                    if (m1.weight > m2.weight) {
+                        return -1;
+                    }
+
+                    if (m1.weight < m2.weight) {
+                        return 1;
+                    }
+                }
+
+                return m1.name.localeCompare(m2.name);
+            });
+
+            return result;
+        },
+
+        isDarkTheme() {
+            return document.body.classList.contains("dark");
+        },
+
+        monitorListStyle() {
+            let listHeaderHeight = 107;
+
+            if (this.selectMode) {
+                listHeaderHeight += 42;
+            }
+
+            return {
+                "height": `calc(100% - ${listHeaderHeight}px)`
+            };
+        },
+
+        selectedMonitorCount() {
+            return Object.keys(this.selectedMonitors).length;
+        },
+
+        /**
+         * Determines if any filters are active.
+         * @returns {boolean} True if any filter is active, false otherwise.
+         */
+        filtersActive() {
+            return this.filterState.status != null || this.filterState.active != null || this.filterState.tags != null || this.searchText !== "";
+        }
+    },
+    watch: {
+        searchText() {
+            for (let monitor of this.sortedMonitorList) {
+                if (!this.selectedMonitors[monitor.id]) {
+                    if (this.selectAll) {
+                        this.disableSelectAllWatcher = true;
+                        this.selectAll = false;
+                    }
+                    break;
+                }
+            }
+        },
+        selectAll() {
+            if (!this.disableSelectAllWatcher) {
+                this.selectedMonitors = {};
+
+                if (this.selectAll) {
+                    this.sortedMonitorList.forEach((item) => {
+                        this.selectedMonitors[item.id] = true;
+                    });
+                }
+            } else {
+                this.disableSelectAllWatcher = false;
+            }
+        },
+        selectMode() {
+            if (!this.selectMode) {
+                this.selectAll = false;
+                this.selectedMonitors = {};
+            }
+        },
+    },
+    mounted() {
+        window.addEventListener("scroll", this.onScroll);
+    },
+    beforeUnmount() {
+        window.removeEventListener("scroll", this.onScroll);
+    },
+    methods: {
+        /**
+         * Handle user scroll
+         * @returns {void}
+         */
+        onScroll() {
+            if (window.top.scrollY <= 133) {
+                this.windowTop = window.top.scrollY;
+            } else {
+                this.windowTop = 133;
+            }
+        },
+
+        /**
+         * Clear the search bar
+         * @returns {void}
+         */
+        clearSearchText() {
+            this.searchText = "";
+        },
+        /**
+         * Update the MonitorList Filter
+         * @param {object} newFilter Object with new filter
+         * @returns {void}
+         */
+        updateFilter(newFilter) {
+            this.filterState = newFilter;
+        },
+        /**
+         * Deselect a monitor
+         * @param {number} id ID of monitor
+         * @returns {void}
+         */
+        deselect(id) {
+            delete this.selectedMonitors[id];
+        },
+        /**
+         * Select a monitor
+         * @param {number} id ID of monitor
+         * @returns {void}
+         */
+        select(id) {
+            this.selectedMonitors[id] = true;
+        },
+        /**
+         * Determine if monitor is selected
+         * @param {number} id ID of monitor
+         * @returns {bool} Is the monitor selected?
+         */
+        isSelected(id) {
+            return id in this.selectedMonitors;
+        },
+        /**
+         * Disable select mode and reset selection
+         * @returns {void}
+         */
+        cancelSelectMode() {
+            this.selectMode = false;
+            this.selectedMonitors = {};
+        },
+        /**
+         * Show dialog to confirm pause
+         * @returns {void}
+         */
+        pauseDialog() {
+            this.$refs.confirmPause.show();
+        },
+        /**
+         * Pause each selected monitor
+         * @returns {void}
+         */
+        pauseSelected() {
+            Object.keys(this.selectedMonitors)
+                .filter(id => this.$root.monitorList[id].active)
+                .forEach(id => this.$root.getSocket().emit("pauseMonitor", id, () => {}));
+
+            this.cancelSelectMode();
+        },
+        /**
+         * Resume each selected monitor
+         * @returns {void}
+         */
+        resumeSelected() {
+            Object.keys(this.selectedMonitors)
+                .filter(id => !this.$root.monitorList[id].active)
+                .forEach(id => this.$root.getSocket().emit("resumeMonitor", id, () => {}));
+
+            this.cancelSelectMode();
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/vars.scss";
+
+.shadow-box {
+    height: calc(100vh - 150px);
+    position: sticky;
+    top: 10px;
+}
+
+.small-padding {
+    padding-left: 5px !important;
+    padding-right: 5px !important;
+}
+
+.list-header {
+    border-bottom: 1px solid #dee2e6;
+    border-radius: 10px 10px 0 0;
+    margin: -10px;
+    margin-bottom: 10px;
+    padding: 10px;
+
+    .dark & {
+        background-color: $dark-header-bg;
+        border-bottom: 0;
+    }
+}
+
+.header-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.header-filter {
+    display: flex;
+    align-items: center;
+}
+
+@media (max-width: 770px) {
+    .list-header {
+        margin: -20px;
+        margin-bottom: 10px;
+        padding: 5px;
+    }
+}
+
+.search-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.search-icon {
+    padding: 10px;
+    color: #c0c0c0;
+
+    // Clear filter button (X)
+    svg[data-icon="times"] {
+        cursor: pointer;
+        transition: all ease-in-out 0.1s;
+
+        &:hover {
+            opacity: 0.5;
+        }
+    }
+}
+
+.search-input {
+    max-width: 15em;
+}
+
+.monitor-item {
+    width: 100%;
+}
+
+.tags {
+    margin-top: 4px;
+    padding-left: 67px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+}
+
+.bottom-style {
+    padding-left: 67px;
+    margin-top: 5px;
+}
+
+.selection-controls {
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+</style>
--- a/frontend/src/components/StackListItem.vue
+++ b/frontend/src/components/StackListItem.vue
@ -0,0 +1,261 @@
+<template>
+    <div>
+        <div :style="depthMargin">
+            <!-- Checkbox -->
+            <div v-if="isSelectMode" class="select-input-wrapper">
+                <input
+                    class="form-check-input select-input"
+                    type="checkbox"
+                    :aria-label="$t('Check/Uncheck')"
+                    :checked="isSelected(monitor.id)"
+                    @click.stop="toggleSelection"
+                />
+            </div>
+
+            <router-link :to="monitorURL(monitor.id)" class="item" :class="{ 'disabled': ! monitor.active }">
+                <div class="row">
+                    <div class="col-9 col-md-8 small-padding" :class="{ 'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
+                        <div class="info">
+                            <Uptime :monitor="monitor" type="24" :pill="true" />
+                            <span v-if="hasChildren" class="collapse-padding" @click.prevent="changeCollapsed">
+                                <font-awesome-icon icon="chevron-down" class="animated" :class="{ collapsed: isCollapsed}" />
+                            </span>
+                            {{ monitorName }}
+                        </div>
+                        <div v-if="monitor.tags.length > 0" class="tags">
+                            <Tag v-for="tag in monitor.tags" :key="tag" :item="tag" :size="'sm'" />
+                        </div>
+                    </div>
+                    <div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-3 col-md-4">
+                        <HeartbeatBar ref="heartbeatBar" size="small" :monitor-id="monitor.id" />
+                    </div>
+                </div>
+
+                <div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
+                    <div class="col-12 bottom-style">
+                        <HeartbeatBar ref="heartbeatBar" size="small" :monitor-id="monitor.id" />
+                    </div>
+                </div>
+            </router-link>
+        </div>
+
+        <transition name="slide-fade-up">
+            <div v-if="!isCollapsed" class="childs">
+                <MonitorListItem
+                    v-for="(item, index) in sortedChildMonitorList"
+                    :key="index" :monitor="item"
+                    :showPathName="showPathName"
+                    :isSelectMode="isSelectMode"
+                    :isSelected="isSelected"
+                    :select="select"
+                    :deselect="deselect"
+                    :depth="depth + 1"
+                />
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+
+export default {
+    components: {
+
+    },
+    props: {
+        /** Monitor this represents */
+        monitor: {
+            type: Object,
+            default: null,
+        },
+        /** Should the monitor name show it's parent */
+        showPathName: {
+            type: Boolean,
+            default: false,
+        },
+        /** If the user is in select mode */
+        isSelectMode: {
+            type: Boolean,
+            default: false,
+        },
+        /** How many ancestors are above this monitor */
+        depth: {
+            type: Number,
+            default: 0,
+        },
+        /** Callback to determine if monitor is selected */
+        isSelected: {
+            type: Function,
+            default: () => {}
+        },
+        /** Callback fired when monitor is selected */
+        select: {
+            type: Function,
+            default: () => {}
+        },
+        /** Callback fired when monitor is deselected */
+        deselect: {
+            type: Function,
+            default: () => {}
+        },
+    },
+    data() {
+        return {
+            isCollapsed: true,
+        };
+    },
+    computed: {
+        sortedChildMonitorList() {
+            let result = Object.values(this.$root.monitorList);
+
+            result = result.filter(childMonitor => childMonitor.parent === this.monitor.id);
+
+            result.sort((m1, m2) => {
+
+                if (m1.active !== m2.active) {
+                    if (m1.active === 0) {
+                        return 1;
+                    }
+
+                    if (m2.active === 0) {
+                        return -1;
+                    }
+                }
+
+                if (m1.weight !== m2.weight) {
+                    if (m1.weight > m2.weight) {
+                        return -1;
+                    }
+
+                    if (m1.weight < m2.weight) {
+                        return 1;
+                    }
+                }
+
+                return m1.name.localeCompare(m2.name);
+            });
+
+            return result;
+        },
+        hasChildren() {
+            return this.sortedChildMonitorList.length > 0;
+        },
+        depthMargin() {
+            return {
+                marginLeft: `${31 * this.depth}px`,
+            };
+        },
+        monitorName() {
+            if (this.showPathName) {
+                return this.monitor.pathName;
+            } else {
+                return this.monitor.name;
+            }
+        }
+    },
+    watch: {
+        isSelectMode() {
+            // TODO: Resize the heartbeat bar, but too slow
+            // this.$refs.heartbeatBar.resize();
+        }
+    },
+    beforeMount() {
+
+        // Always unfold if monitor is accessed directly
+        if (this.monitor.childrenIDs.includes(parseInt(this.$route.params.id))) {
+            this.isCollapsed = false;
+            return;
+        }
+
+        // Set collapsed value based on local storage
+        let storage = window.localStorage.getItem("monitorCollapsed");
+        if (storage === null) {
+            return;
+        }
+
+        let storageObject = JSON.parse(storage);
+        if (storageObject[`monitor_${this.monitor.id}`] == null) {
+            return;
+        }
+
+        this.isCollapsed = storageObject[`monitor_${this.monitor.id}`];
+    },
+    methods: {
+        /**
+         * Changes the collapsed value of the current monitor and saves
+         * it to local storage
+         * @returns {void}
+         */
+        changeCollapsed() {
+            this.isCollapsed = !this.isCollapsed;
+
+            // Save collapsed value into local storage
+            let storage = window.localStorage.getItem("monitorCollapsed");
+            let storageObject = {};
+            if (storage !== null) {
+                storageObject = JSON.parse(storage);
+            }
+            storageObject[`monitor_${this.monitor.id}`] = this.isCollapsed;
+
+            window.localStorage.setItem("monitorCollapsed", JSON.stringify(storageObject));
+        },
+
+        /**
+         * Toggle selection of monitor
+         * @returns {void}
+         */
+        toggleSelection() {
+            if (this.isSelected(this.monitor.id)) {
+                this.deselect(this.monitor.id);
+            } else {
+                this.select(this.monitor.id);
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/vars.scss";
+
+.small-padding {
+    padding-left: 5px !important;
+    padding-right: 5px !important;
+}
+
+.collapse-padding {
+    padding-left: 8px !important;
+    padding-right: 2px !important;
+}
+
+// .monitor-item {
+//     width: 100%;
+// }
+
+.tags {
+    margin-top: 4px;
+    padding-left: 67px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+}
+
+.collapsed {
+    transform: rotate(-90deg);
+}
+
+.animated {
+    transition: all 0.2s $easing-in;
+}
+
+.select-input-wrapper {
+    float: left;
+    margin-top: 15px;
+    margin-left: 3px;
+    margin-right: 10px;
+    padding-left: 4px;
+    position: relative;
+    z-index: 15;
+}
+
+</style>
--- a/frontend/src/i18n.ts
+++ b/frontend/src/i18n.ts
@ -0,0 +1,35 @@
+import { createI18n } from "vue-i18n";
+import en from "./lang/en.json";
+
+const languageList = {
+
+};
+
+let messages = {
+    en,
+};
+
+for (let lang in languageList) {
+    messages[lang] = {
+        languageName: languageList[lang]
+    };
+}
+
+const rtlLangs = [ "fa", "ar-SY", "ur" ];
+
+export const currentLocale = () => localStorage.locale
+    || languageList[navigator.language] && navigator.language
+    || languageList[navigator.language.substring(0, 2)] && navigator.language.substring(0, 2)
+    || "en";
+
+export const localeDirection = () => {
+    return rtlLangs.includes(currentLocale()) ? "rtl" : "ltr";
+};
+
+export const i18n = createI18n({
+    locale: currentLocale(),
+    fallbackLocale: "en",
+    silentFallbackWarn: true,
+    silentTranslationWarn: true,
+    messages: messages,
+});
--- a/frontend/src/icon.ts
+++ b/frontend/src/icon.ts
@ -0,0 +1,107 @@
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+// Add Free Font Awesome Icons
+// https://fontawesome.com/v6/icons?d=gallery&p=2&s=solid&m=free
+// In order to add an icon, you have to:
+// 1) add the icon name in the import statement below;
+// 2) add the icon name to the library.add() statement below.
+import {
+    faArrowAltCircleUp,
+    faCog,
+    faEdit,
+    faEye,
+    faEyeSlash,
+    faList,
+    faPause,
+    faPlay,
+    faPlus,
+    faSearch,
+    faTachometerAlt,
+    faTimes,
+    faTimesCircle,
+    faTrash,
+    faCheckCircle,
+    faStream,
+    faSave,
+    faExclamationCircle,
+    faBullhorn,
+    faArrowsAltV,
+    faUnlink,
+    faQuestionCircle,
+    faImages,
+    faUpload,
+    faCopy,
+    faCheck,
+    faFile,
+    faAward,
+    faLink,
+    faChevronDown,
+    faSignOutAlt,
+    faPen,
+    faExternalLinkSquareAlt,
+    faSpinner,
+    faUndo,
+    faPlusCircle,
+    faAngleDown,
+    faWrench,
+    faHeartbeat,
+    faFilter,
+    faInfoCircle,
+    faClone,
+    faCertificate,
+    faTerminal, faWarehouse, faHome,
+} from "@fortawesome/free-solid-svg-icons";
+
+library.add(
+    faArrowAltCircleUp,
+    faCog,
+    faEdit,
+    faEye,
+    faEyeSlash,
+    faList,
+    faPause,
+    faPlay,
+    faPlus,
+    faSearch,
+    faTachometerAlt,
+    faTimes,
+    faTimesCircle,
+    faTrash,
+    faCheckCircle,
+    faStream,
+    faSave,
+    faExclamationCircle,
+    faBullhorn,
+    faArrowsAltV,
+    faUnlink,
+    faQuestionCircle,
+    faImages,
+    faUpload,
+    faCopy,
+    faCheck,
+    faFile,
+    faAward,
+    faLink,
+    faChevronDown,
+    faSignOutAlt,
+    faPen,
+    faExternalLinkSquareAlt,
+    faSpinner,
+    faUndo,
+    faPlusCircle,
+    faAngleDown,
+    faLink,
+    faWrench,
+    faHeartbeat,
+    faFilter,
+    faInfoCircle,
+    faClone,
+    faCertificate,
+    faTerminal,
+    faWarehouse,
+    faHome,
+);
+
+export { FontAwesomeIcon };
+
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@ -0,0 +1,12 @@
+{
+    "languageName": "English",
+    "authIncorrectCreds": "Incorrect username or password.",
+    "PasswordsDoNotMatch": "Passwords do not match.",
+    "signedInDisp": "Signed in as {0}",
+    "signedInDispDisabled": "Auth Disabled.",
+    "home": "Home",
+    "console": "Console",
+    "registry": "Registry",
+    "compose": "Compose",
+    "addFirstStackMsg": "Compose your first stack!"
+}
--- a/frontend/src/layouts/EmptyLayout.vue
+++ b/frontend/src/layouts/EmptyLayout.vue
@ -0,0 +1,8 @@
+<template>
+    <router-view />
+</template>
+
+<script>
+export default {};
+</script>
+
--- a/frontend/src/layouts/Layout.vue
+++ b/frontend/src/layouts/Layout.vue
@ -0,0 +1,326 @@
+<template>
+    <div :class="classes">
+        <div v-if="! $root.socketIO.connected && ! $root.socketIO.firstConnect" class="lost-connection">
+            <div class="container-fluid">
+                {{ $root.socketIO.connectionErrorMsg }}
+            </div>
+        </div>
+
+        <!-- Desktop header -->
+        <header v-if="! $root.isMobile" class="d-flex flex-wrap justify-content-center py-3 mb-3 border-bottom">
+            <router-link to="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+                <object class="bi me-2 ms-4" width="40" height="40" data="/icon.svg" />
+                <span class="fs-4 title">Dockge</span>
+            </router-link>
+
+            <a v-if="hasNewVersion" target="_blank" href="https://github.com/louislam/uptime-kuma/releases" class="btn btn-info me-3">
+                <font-awesome-icon icon="arrow-alt-circle-up" /> {{ $t("New Update") }}
+            </a>
+
+            <ul class="nav nav-pills">
+                <li v-if="$root.loggedIn" class="nav-item me-2">
+                    <router-link to="/" class="nav-link">
+                        <font-awesome-icon icon="home" /> {{ $t("home") }}
+                    </router-link>
+                </li>
+
+                <li v-if="$root.loggedIn" class="nav-item me-2">
+                    <router-link to="/console" class="nav-link">
+                        <font-awesome-icon icon="terminal" /> {{ $t("console") }}
+                    </router-link>
+                </li>
+
+                <li v-if="$root.loggedIn" class="nav-item">
+                    <div class="dropdown dropdown-profile-pic">
+                        <div class="nav-link" data-bs-toggle="dropdown">
+                            <div class="profile-pic">{{ $root.usernameFirstChar }}</div>
+                            <font-awesome-icon icon="angle-down" />
+                        </div>
+
+                        <!-- Header's Dropdown Menu -->
+                        <ul class="dropdown-menu">
+                            <!-- Username -->
+                            <li>
+                                <i18n-t v-if="$root.username != null" tag="span" keypath="signedInDisp" class="dropdown-item-text">
+                                    <strong>{{ $root.username }}</strong>
+                                </i18n-t>
+                                <span v-if="$root.username == null" class="dropdown-item-text">{{ $t("signedInDispDisabled") }}</span>
+                            </li>
+
+                            <li><hr class="dropdown-divider"></li>
+
+                            <!-- Functions -->
+
+                            <!--<li>
+                                <router-link to="/registry" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">
+                                    <font-awesome-icon icon="warehouse" /> {{ $t("registry") }}
+                                </router-link>
+                            </li>-->
+
+                            <li>
+                                <router-link to="/settings/general" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">
+                                    <font-awesome-icon icon="cog" /> {{ $t("Settings") }}
+                                </router-link>
+                            </li>
+
+                            <li>
+                                <button class="dropdown-item" @click="$root.logout">
+                                    <font-awesome-icon icon="sign-out-alt" />
+                                    {{ $t("Logout") }}
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </header>
+
+        <!-- Mobile header -->
+        <header v-else class="d-flex flex-wrap justify-content-center pt-2 pb-2 mb-3">
+            <router-link to="/dashboard" class="d-flex align-items-center text-dark text-decoration-none">
+                <object class="bi" width="40" height="40" data="/icon.svg" />
+                <span class="fs-4 title ms-2">Dockge</span>
+            </router-link>
+        </header>
+
+        <main>
+            <router-view v-if="$root.loggedIn" />
+            <Login v-if="! $root.loggedIn && $root.allowLoginDialog" />
+        </main>
+
+        <!-- Mobile Only -->
+        <div v-if="$root.isMobile" style="width: 100%; height: calc(60px + env(safe-area-inset-bottom));" />
+        <nav v-if="$root.isMobile && $root.loggedIn" class="bottom-nav">
+            <router-link to="/dashboard" class="nav-link">
+                <div><font-awesome-icon icon="tachometer-alt" /></div>
+                {{ $t("Home") }}
+            </router-link>
+
+            <router-link to="/list" class="nav-link">
+                <div><font-awesome-icon icon="list" /></div>
+                {{ $t("List") }}
+            </router-link>
+
+            <router-link to="/add" class="nav-link">
+                <div><font-awesome-icon icon="plus" /></div>
+                {{ $t("Add") }}
+            </router-link>
+
+            <router-link to="/settings" class="nav-link">
+                <div><font-awesome-icon icon="cog" /></div>
+                {{ $t("Settings") }}
+            </router-link>
+        </nav>
+    </div>
+</template>
+
+<script>
+import Login from "../components/Login.vue";
+import { compareVersions } from "compare-versions";
+
+export default {
+
+    components: {
+        Login,
+    },
+
+    data() {
+        return {
+
+        };
+    },
+
+    computed: {
+
+        // Theme or Mobile
+        classes() {
+            const classes = {};
+            classes[this.$root.theme] = true;
+            classes["mobile"] = this.$root.isMobile;
+            return classes;
+        },
+
+        hasNewVersion() {
+            if (this.$root.info.latestVersion && this.$root.info.version) {
+                return compareVersions(this.$root.info.latestVersion, this.$root.info.version) >= 1;
+            } else {
+                return false;
+            }
+        },
+
+    },
+
+    watch: {
+
+    },
+
+    mounted() {
+
+    },
+
+    beforeUnmount() {
+
+    },
+
+    methods: {
+
+    },
+
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/vars.scss";
+
+.nav-link {
+    &.status-page {
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+}
+
+.bottom-nav {
+    z-index: 1000;
+    position: fixed;
+    bottom: 0;
+    height: calc(60px + env(safe-area-inset-bottom));
+    width: 100%;
+    left: 0;
+    background-color: #fff;
+    box-shadow: 0 15px 47px 0 rgba(0, 0, 0, 0.05), 0 5px 14px 0 rgba(0, 0, 0, 0.05);
+    text-align: center;
+    white-space: nowrap;
+    padding: 0 10px env(safe-area-inset-bottom);
+
+    a {
+        text-align: center;
+        width: 25%;
+        display: inline-block;
+        height: 100%;
+        padding: 8px 10px 0;
+        font-size: 13px;
+        color: #c1c1c1;
+        overflow: hidden;
+        text-decoration: none;
+
+        &.router-link-exact-active, &.active {
+            color: $primary;
+            font-weight: bold;
+        }
+
+        div {
+            font-size: 20px;
+        }
+    }
+}
+
+main {
+    min-height: calc(100vh - 160px);
+}
+
+.title {
+    font-weight: bold;
+}
+
+.nav {
+    margin-right: 25px;
+}
+
+.lost-connection {
+    padding: 5px;
+    background-color: crimson;
+    color: white;
+    position: fixed;
+    width: 100%;
+    z-index: 99999;
+}
+
+// Profile Pic Button with Dropdown
+.dropdown-profile-pic {
+    user-select: none;
+
+    .nav-link {
+        cursor: pointer;
+        display: flex;
+        gap: 6px;
+        align-items: center;
+        background-color: rgba(200, 200, 200, 0.2);
+        padding: 0.5rem 0.8rem;
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+    }
+
+    .dropdown-menu {
+        transition: all 0.2s;
+        padding-left: 0;
+        padding-bottom: 0;
+        margin-top: 8px !important;
+        border-radius: 16px;
+        overflow: hidden;
+
+        .dropdown-divider {
+            margin: 0;
+            border-top: 1px solid rgba(0, 0, 0, 0.4);
+            background-color: transparent;
+        }
+
+        .dropdown-item-text {
+            font-size: 14px;
+            padding-bottom: 0.7rem;
+        }
+
+        .dropdown-item {
+            padding: 0.7rem 1rem;
+        }
+
+        .dark & {
+            background-color: $dark-bg;
+            color: $dark-font-color;
+            border-color: $dark-border-color;
+
+            .dropdown-item {
+                color: $dark-font-color;
+
+                &.active {
+                    color: $dark-font-color2;
+                    background-color: $highlight !important;
+                }
+
+                &:hover {
+                    background-color: $dark-bg2;
+                }
+            }
+        }
+    }
+
+    .profile-pic {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        background-color: $primary;
+        width: 24px;
+        height: 24px;
+        margin-right: 5px;
+        border-radius: 50rem;
+        font-weight: bold;
+        font-size: 10px;
+    }
+}
+
+.dark {
+    header {
+        background-color: $dark-header-bg;
+        border-bottom-color: $dark-header-bg !important;
+
+        span {
+            color: #f0f6fc;
+        }
+    }
+
+    .bottom-nav {
+        background-color: $dark-bg;
+    }
+}
+</style>
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@ -0,0 +1,118 @@
+import { createApp, defineComponent, h } from "vue";
+import App from "./App.vue";
+import { router } from "./router";
+import { FontAwesomeIcon } from "./icon.js";
+import { i18n } from "./i18n";
+
+// Dependencies
+import "bootstrap";
+import Toast, { POSITION, useToast } from "vue-toastification";
+import "xterm/lib/xterm.js";
+
+// CSS
+import "vue-toastification/dist/index.css";
+import "xterm/css/xterm.css";
+import "./styles/main.scss";
+
+// Dayjs
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+// Minxins
+import socket from "./mixins/socket";
+import lang from "./mixins/lang";
+import theme from "./mixins/theme";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(relativeTime);
+
+const app = createApp(rootApp());
+
+app.use(Toast, {
+    position: POSITION.BOTTOM_RIGHT,
+    containerClassName: "toast-container mb-5",
+    showCloseButtonOnHover: true,
+
+    filterBeforeCreate: (toast, toasts) => {
+        if (toast.timeout === 0) {
+            return false;
+        } else {
+            return toast;
+        }
+    },
+});
+
+app.use(router);
+app.use(i18n);
+app.component("FontAwesomeIcon", FontAwesomeIcon);
+app.mount("#app");
+
+/**
+ * Root Vue component
+ */
+function rootApp() {
+    const toast = useToast();
+
+    return defineComponent({
+        mixins: [
+            socket,
+            lang,
+            theme,
+        ],
+        data() {
+            return {
+                loggedIn: false,
+                allowLoginDialog: false,
+                username: null,
+            };
+        },
+        computed: {
+
+        },
+        methods: {
+
+            /**
+             * Show success or error toast dependant on response status code
+             * @param {object} res Response object
+             * @returns {void}
+             */
+            toastRes(res) {
+                let msg = res.msg;
+                if (res.msgi18n) {
+                    if (msg != null && typeof msg === "object") {
+                        msg = this.$t(msg.key, msg.values);
+                    } else {
+                        msg = this.$t(msg);
+                    }
+                }
+
+                if (res.ok) {
+                    toast.success(msg);
+                } else {
+                    toast.error(msg);
+                }
+            },
+            /**
+             * Show a success toast
+             * @param {string} msg Message to show
+             * @returns {void}
+             */
+            toastSuccess(msg : string) {
+                toast.success(this.$t(msg));
+            },
+
+            /**
+             * Show an error toast
+             * @param {string} msg Message to show
+             * @returns {void}
+             */
+            toastError(msg : string) {
+                toast.error(this.$t(msg));
+            },
+        },
+        render: () => h(App),
+    });
+}
--- a/frontend/src/mixins/lang.ts
+++ b/frontend/src/mixins/lang.ts
@ -0,0 +1,39 @@
+import { currentLocale } from "../i18n";
+import { setPageLocale } from "../util-frontend";
+import { defineComponent } from "vue";
+const langModules = import.meta.glob("../lang/*.json");
+
+export default defineComponent({
+    data() {
+        return {
+            language: currentLocale(),
+        };
+    },
+
+    watch: {
+        async language(lang) {
+            await this.changeLang(lang);
+        },
+    },
+
+    async created() {
+        if (this.language !== "en") {
+            await this.changeLang(this.language);
+        }
+    },
+
+    methods: {
+        /**
+         * Change the application language
+         * @param {string} lang Language code to switch to
+         * @returns {Promise<void>}
+         */
+        async changeLang(lang : string) {
+            const message = (await langModules["../lang/" + lang + ".json"]()).default;
+            this.$i18n.setLocaleMessage(lang, message);
+            this.$i18n.locale = lang;
+            localStorage.locale = lang;
+            setPageLocale();
+        }
+    }
+});
--- a/frontend/src/mixins/socket.ts
+++ b/frontend/src/mixins/socket.ts
@ -0,0 +1,281 @@
+import { io } from "socket.io-client";
+import { Socket } from "socket.io-client";
+import { defineComponent } from "vue";
+import jwtDecode from "jwt-decode";
+import { Terminal } from "xterm";
+import { FitAddon } from "xterm-addon-fit";
+import { WebLinksAddon } from "xterm-addon-web-links";
+
+const terminal = new Terminal({
+    fontSize: 16,
+    fontFamily: "monospace",
+    cursorBlink: true,
+});
+terminal.loadAddon(new FitAddon());
+terminal.loadAddon(new WebLinksAddon());
+let terminalInputBuffer = "";
+let cursorPosition = 0;
+let socket : Socket;
+
+function removeInput() {
+    const backspaceCount = terminalInputBuffer.length;
+    const backspaces = "\b \b".repeat(backspaceCount);
+    cursorPosition = 0;
+    terminal.write(backspaces);
+    terminalInputBuffer = "";
+}
+
+export default defineComponent({
+    data() {
+        return {
+            socketIO: {
+                token: null,
+                firstConnect: true,
+                connected: false,
+                connectCount: 0,
+                initedSocketIO: false,
+                connectionErrorMsg: `${this.$t("Cannot connect to the socket server.")} ${this.$t("Reconnecting...")}`,
+                showReverseProxyGuide: true,
+            },
+            info: {
+
+            },
+            remember: (localStorage.remember !== "0"),
+            loggedIn: false,
+            allowLoginDialog: false,
+            username: null,
+
+            stackList: {},
+        };
+    },
+    computed: {
+        usernameFirstChar() {
+            if (typeof this.username == "string" && this.username.length >= 1) {
+                return this.username.charAt(0).toUpperCase();
+            } else {
+                return "🐻";
+            }
+        },
+    },
+    watch: {
+        remember() {
+            localStorage.remember = (this.remember) ? "1" : "0";
+        },
+    },
+    created() {
+        this.initSocketIO();
+    },
+    mounted() {
+        terminal.onKey(e => {
+            const code = e.key.charCodeAt(0);
+            console.debug("Encode: " + JSON.stringify(e.key));
+
+            if (e.key === "\r") {
+                // Return if no input
+                if (terminalInputBuffer.length === 0) {
+                    return;
+                }
+
+                const buffer = terminalInputBuffer;
+
+                // Remove the input from the terminal
+                removeInput();
+
+                socket.emit("terminalInput", buffer + e.key, (err) => {
+                    this.toastError(err.msg);
+                });
+
+            } else if (code === 127) { // Backspace
+                if (cursorPosition > 0) {
+                    terminal.write("\b \b");
+                    cursorPosition--;
+                    terminalInputBuffer = terminalInputBuffer.slice(0, -1);
+                }
+            } else if (e.key === "\u001B\u005B\u0041" || e.key === "\u001B\u005B\u0042") {      // UP OR DOWN
+                // Do nothing
+
+            } else if (e.key === "\u001B\u005B\u0043") {      // RIGHT
+                // TODO
+            } else if (e.key === "\u001B\u005B\u0044") {      // LEFT
+                // TODO
+            } else if (e.key === "\u0003") {      // Ctrl + C
+                console.debug("Ctrl + C");
+                removeInput();
+            } else {
+                cursorPosition++;
+                terminalInputBuffer += e.key;
+                console.log(terminalInputBuffer);
+                terminal.write(e.key);
+            }
+        });
+    },
+    methods: {
+        /**
+         * Initialize connection to socket server
+         * @param bypass Should the check for if we
+         * are on a status page be bypassed?
+         */
+        initSocketIO(bypass = false) {
+            // No need to re-init
+            if (this.socketIO.initedSocketIO) {
+                return;
+            }
+
+            this.socketIO.initedSocketIO = true;
+            let url : string;
+            const env = process.env.NODE_ENV || "production";
+            if (env === "development" || localStorage.dev === "dev") {
+                url = location.protocol + "//" + location.hostname + ":5001";
+            } else {
+                url = location.protocol + "//" + location.host;
+            }
+
+            socket = io(url, {
+
+            });
+
+            socket.on("connect", () => {
+                console.log("Connected to the socket server");
+
+                this.socketIO.connectCount++;
+                this.socketIO.connected = true;
+                this.socketIO.showReverseProxyGuide = false;
+                const token = this.storage().token;
+
+                if (token) {
+                    if (token !== "autoLogin") {
+                        console.log("Logging in by token");
+                        this.loginByToken(token);
+                    } else {
+                        // Timeout if it is not actually auto login
+                        setTimeout(() => {
+                            if (! this.loggedIn) {
+                                this.allowLoginDialog = true;
+                                this.storage().removeItem("token");
+                            }
+                        }, 5000);
+                    }
+                } else {
+                    this.allowLoginDialog = true;
+                }
+
+                this.socketIO.firstConnect = false;
+            });
+
+            socket.on("disconnect", () => {
+                console.log("disconnect");
+                this.socketIO.connectionErrorMsg = "Lost connection to the socket server. Reconnecting...";
+                this.socketIO.connected = false;
+            });
+
+            socket.on("connect_error", (err) => {
+                console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
+                this.socketIO.connectionErrorMsg = `${this.$t("Cannot connect to the socket server.")} [${err}] ${this.$t("Reconnecting...")}`;
+                this.socketIO.showReverseProxyGuide = true;
+                this.socketIO.connected = false;
+                this.socketIO.firstConnect = false;
+            });
+
+            // Custom Events
+
+            socket.on("info", (info) => {
+                this.info = info;
+            });
+
+            socket.on("autoLogin", () => {
+                this.loggedIn = true;
+                this.storage().token = "autoLogin";
+                this.socketIO.token = "autoLogin";
+                this.allowLoginDialog = false;
+                this.afterLogin();
+            });
+
+            socket.on("setup", () => {
+                console.log("setup");
+                this.$router.push("/setup");
+            });
+
+            socket.on("commandOutput", (data) => {
+                terminal.write(data);
+            });
+        },
+
+        /**
+         * The storage currently in use
+         * @returns Current storage
+         */
+        storage() : Storage {
+            return (this.remember) ? localStorage : sessionStorage;
+        },
+
+        getSocket() : Socket {
+            return socket;
+        },
+
+        getTerminal() : Terminal {
+            return terminal;
+        },
+
+        /**
+         * Get payload of JWT cookie
+         * @returns {(object | undefined)} JWT payload
+         */
+        getJWTPayload() {
+            const jwtToken = this.storage().token;
+
+            if (jwtToken && jwtToken !== "autoLogin") {
+                return jwtDecode(jwtToken);
+            }
+            return undefined;
+        },
+
+        /**
+         * Log in using a token
+         * @param {string} token Token to log in with
+         * @returns {void}
+         */
+        loginByToken(token : string) {
+            socket.emit("loginByToken", token, (res) => {
+                this.allowLoginDialog = true;
+
+                if (! res.ok) {
+                    this.logout();
+                } else {
+                    this.loggedIn = true;
+                    this.username = this.getJWTPayload()?.username;
+                    this.afterLogin();
+                }
+            });
+        },
+
+        /**
+         * Log out of the web application
+         * @returns {void}
+         */
+        logout() {
+            socket.emit("logout", () => { });
+            this.storage().removeItem("token");
+            this.socketIO.token = null;
+            this.loggedIn = false;
+            this.username = null;
+            this.clearData();
+        },
+
+        /**
+         * @returns {void}
+         */
+        clearData() {
+
+        },
+
+        afterLogin() {
+            terminal.clear();
+            // Load terminal, get terminal screen
+            socket.emit("getTerminalBuffer", (res) => {
+                console.log("getTerminalBuffer");
+                terminal.write(res.buffer);
+            });
+        },
+
+    }
+});
--- a/frontend/src/mixins/theme.ts
+++ b/frontend/src/mixins/theme.ts
@ -0,0 +1,80 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    data() {
+        return {
+            system: (window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light",
+            userTheme: localStorage.theme,
+            statusPageTheme: "light",
+            forceStatusPageTheme: false,
+            path: "",
+        };
+    },
+
+    computed: {
+        theme() {
+            if (this.userTheme === "auto") {
+                return this.system;
+            }
+            return this.userTheme;
+        },
+
+        isDark() {
+            return this.theme === "dark";
+        }
+    },
+
+    watch: {
+        "$route.fullPath"(path) {
+            this.path = path;
+        },
+
+        userTheme(to, from) {
+            localStorage.theme = to;
+        },
+
+        styleElapsedTime(to, from) {
+            localStorage.styleElapsedTime = to;
+        },
+
+        theme(to, from) {
+            document.body.classList.remove(from);
+            document.body.classList.add(this.theme);
+            this.updateThemeColorMeta();
+        },
+
+        userHeartbeatBar(to, from) {
+            localStorage.heartbeatBarTheme = to;
+        },
+
+        heartbeatBarTheme(to, from) {
+            document.body.classList.remove(from);
+            document.body.classList.add(this.heartbeatBarTheme);
+        }
+    },
+
+    mounted() {
+        // Default Dark
+        if (! this.userTheme) {
+            this.userTheme = "dark";
+        }
+
+        document.body.classList.add(this.theme);
+        this.updateThemeColorMeta();
+    },
+
+    methods: {
+        /**
+         * Update the theme color meta tag
+         * @returns {void}
+         */
+        updateThemeColorMeta() {
+            if (this.theme === "dark") {
+                document.querySelector("#theme-color").setAttribute("content", "#161B22");
+            } else {
+                document.querySelector("#theme-color").setAttribute("content", "#5cdd8b");
+            }
+        }
+    }
+});
+
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@ -0,0 +1,16 @@
+<template>
+    <transition name="slide-fade" appear>
+        <div>
+        </div>
+    </transition>
+</template>
+
+<script lang="ts">
+export default {
+
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/frontend/src/pages/Console.vue
+++ b/frontend/src/pages/Console.vue
@ -0,0 +1,35 @@
+<template>
+    <transition name="slide-fade" appear>
+        <div>
+            <h1 class="mb-3">Console</h1>
+
+            <div class="shadow-box">
+                <div v-pre id="terminal"></div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+
+export default {
+    components: {
+
+    },
+    mounted() {
+        this.$root.getTerminal().open(document.querySelector("#terminal"));
+    },
+    methods: {
+
+    }
+};
+</script>
+
+<style scoped lang="scss">
+.terminal {
+    font-family: monospace;
+    font-size: 18px;
+    padding: 10px 15px;
+    height: calc(100vh - 200px);
+}
+</style>
--- a/frontend/src/pages/Dashboard.vue
+++ b/frontend/src/pages/Dashboard.vue
@ -0,0 +1,42 @@
+<template>
+    <div class="container-fluid">
+        <div class="row">
+            <div v-if="!$root.isMobile" class="col-12 col-md-5 col-xl-4">
+                <div>
+                    <router-link to="/compose" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("compose") }}</router-link>
+                </div>
+                <StackList :scrollbar="true" />
+            </div>
+
+            <div ref="container" class="col-12 col-md-7 col-xl-8 mb-3">
+                <!-- Add :key to disable vue router re-use the same component -->
+                <router-view :key="$route.fullPath" :calculatedHeight="height" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import StackList from "../components/StackList.vue";
+
+export default {
+    components: {
+        StackList,
+    },
+    data() {
+        return {
+            height: 0
+        };
+    },
+    mounted() {
+        this.height = this.$refs.container.offsetHeight;
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.container-fluid {
+    width: 98%;
+}
+</style>
--- a/frontend/src/pages/DashboardHome.vue
+++ b/frontend/src/pages/DashboardHome.vue
@ -0,0 +1,158 @@
+<template>
+    <transition ref="tableContainer" name="slide-fade" appear>
+        <div v-if="$route.name === 'DashboardHome'">
+            <h1 class="mb-3">
+                {{ $t("home") }}
+            </h1>
+
+            <div class="shadow-box big-padding text-center mb-4">
+                <div class="row">
+                    <div class="col">
+                        <h3>{{ $t("Up") }}</h3>
+                        <span class="num">123</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </transition>
+    <router-view ref="child" />
+</template>
+
+<script>
+
+export default {
+    components: {
+
+    },
+    props: {
+        calculatedHeight: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            page: 1,
+            perPage: 25,
+            initialPerPage: 25,
+            paginationConfig: {
+                hideCount: true,
+                chunksNavigation: "scroll",
+            },
+            importantHeartBeatListLength: 0,
+            displayedRecords: [],
+        };
+    },
+    watch: {
+        perPage() {
+            this.$nextTick(() => {
+                this.getImportantHeartbeatListPaged();
+            });
+        },
+
+        page() {
+            this.getImportantHeartbeatListPaged();
+        },
+    },
+
+    mounted() {
+        this.initialPerPage = this.perPage;
+
+        window.addEventListener("resize", this.updatePerPage);
+        this.updatePerPage();
+    },
+
+    beforeUnmount() {
+        window.removeEventListener("resize", this.updatePerPage);
+    },
+
+    methods: {
+        /**
+         * Updates the displayed records when a new important heartbeat arrives.
+         * @param {object} heartbeat - The heartbeat object received.
+         * @returns {void}
+         */
+        onNewImportantHeartbeat(heartbeat) {
+            if (this.page === 1) {
+                this.displayedRecords.unshift(heartbeat);
+                if (this.displayedRecords.length > this.perPage) {
+                    this.displayedRecords.pop();
+                }
+                this.importantHeartBeatListLength += 1;
+            }
+        },
+
+        /**
+         * Retrieves the length of the important heartbeat list for all monitors.
+         * @returns {void}
+         */
+        getImportantHeartbeatListLength() {
+            this.$root.getSocket().emit("monitorImportantHeartbeatListCount", null, (res) => {
+                if (res.ok) {
+                    this.importantHeartBeatListLength = res.count;
+                    this.getImportantHeartbeatListPaged();
+                }
+            });
+        },
+
+        /**
+         * Retrieves the important heartbeat list for the current page.
+         * @returns {void}
+         */
+        getImportantHeartbeatListPaged() {
+            const offset = (this.page - 1) * this.perPage;
+            this.$root.getSocket().emit("monitorImportantHeartbeatListPaged", null, offset, this.perPage, (res) => {
+                if (res.ok) {
+                    this.displayedRecords = res.data;
+                }
+            });
+        },
+
+        /**
+         * Updates the number of items shown per page based on the available height.
+         * @returns {void}
+         */
+        updatePerPage() {
+            const tableContainer = this.$refs.tableContainer;
+            const tableContainerHeight = tableContainer.offsetHeight;
+            const availableHeight = window.innerHeight - tableContainerHeight;
+            const additionalPerPage = Math.floor(availableHeight / 58);
+
+            if (additionalPerPage > 0) {
+                this.perPage = Math.max(this.initialPerPage, this.perPage + additionalPerPage);
+            } else {
+                this.perPage = this.initialPerPage;
+            }
+
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/vars";
+
+.num {
+    font-size: 30px;
+    color: $primary;
+    font-weight: bold;
+    display: block;
+}
+
+.shadow-box {
+    padding: 20px;
+}
+
+table {
+    font-size: 14px;
+
+    tr {
+        transition: all ease-in-out 0.2ms;
+    }
+
+    @media (max-width: 550px) {
+        table-layout: fixed;
+        overflow-wrap: break-word;
+    }
+}
+</style>
--- a/frontend/src/pages/EditStack.vue
+++ b/frontend/src/pages/EditStack.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <transition name="slide-fade" appear>
+        <div>
+        </div>
+    </transition>
+</template>
+
+<style scoped lang="scss">
+
+</style>
--- a/frontend/src/pages/Setup.vue
+++ b/frontend/src/pages/Setup.vue
@ -0,0 +1,138 @@
+<template>
+    <div class="form-container" data-cy="setup-form">
+        <div class="form">
+            <form @submit.prevent="submit">
+                <div>
+                    <object width="64" height="64" data="/icon.svg" />
+                    <div style="font-size: 28px; font-weight: bold; margin-top: 5px;">
+                        Dockge
+                    </div>
+                </div>
+
+                <p class="mt-3">
+                    {{ $t("Create your admin account") }}
+                </p>
+
+                <div class="form-floating">
+                    <select id="language" v-model="$root.language" class="form-select">
+                        <option v-for="(lang, i) in $i18n.availableLocales" :key="`Lang${i}`" :value="lang">
+                            {{ $i18n.messages[lang].languageName }}
+                        </option>
+                    </select>
+                    <label for="language" class="form-label">{{ $t("Language") }}</label>
+                </div>
+
+                <div class="form-floating mt-3">
+                    <input id="floatingInput" v-model="username" type="text" class="form-control" :placeholder="$t('Username')" required data-cy="username-input">
+                    <label for="floatingInput">{{ $t("Username") }}</label>
+                </div>
+
+                <div class="form-floating mt-3">
+                    <input id="floatingPassword" v-model="password" type="password" class="form-control" :placeholder="$t('Password')" required data-cy="password-input">
+                    <label for="floatingPassword">{{ $t("Password") }}</label>
+                </div>
+
+                <div class="form-floating mt-3">
+                    <input id="repeat" v-model="repeatPassword" type="password" class="form-control" :placeholder="$t('Repeat Password')" required data-cy="password-repeat-input">
+                    <label for="repeat">{{ $t("Repeat Password") }}</label>
+                </div>
+
+                <button class="w-100 btn btn-primary mt-3" type="submit" :disabled="processing" data-cy="submit-setup-form">
+                    {{ $t("Create") }}
+                </button>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            processing: false,
+            username: "",
+            password: "",
+            repeatPassword: "",
+        };
+    },
+    watch: {
+
+    },
+    mounted() {
+        // TODO: Check if it is a database setup
+
+        this.$root.getSocket().emit("needSetup", (needSetup) => {
+            if (! needSetup) {
+                this.$router.push("/");
+            }
+        });
+    },
+    methods: {
+        /**
+         * Submit form data for processing
+         * @returns {void}
+         */
+        submit() {
+            this.processing = true;
+
+            if (this.password !== this.repeatPassword) {
+                this.$root.toastError("PasswordsDoNotMatch");
+                this.processing = false;
+                return;
+            }
+
+            this.$root.getSocket().emit("setup", this.username, this.password, (res) => {
+                this.processing = false;
+                this.$root.toastRes(res);
+
+                if (res.ok) {
+                    this.processing = true;
+
+                    this.$root.login(this.username, this.password, "", () => {
+                        this.processing = false;
+                        this.$router.push("/");
+                    });
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-container {
+    display: flex;
+    align-items: center;
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+
+.form-floating {
+    > .form-select {
+        padding-left: 1.3rem;
+        padding-top: 1.525rem;
+        line-height: 1.35;
+
+        ~ label {
+            padding-left: 1.3rem;
+        }
+    }
+
+    > label {
+        padding-left: 1.3rem;
+    }
+
+    > .form-control {
+        padding-left: 1.3rem;
+    }
+}
+
+.form {
+
+    width: 100%;
+    max-width: 330px;
+    padding: 15px;
+    margin: auto;
+    text-align: center;
+}
+</style>
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@ -0,0 +1,49 @@
+import { createRouter, createWebHistory } from "vue-router";
+
+import Layout from "./layouts/Layout.vue";
+import Setup from "./pages/Setup.vue";
+import Dashboard from "./pages/Dashboard.vue";
+import DashboardHome from "./pages/DashboardHome.vue";
+import EditStack from "./pages/EditStack.vue";
+import Console from "./pages/Console.vue";
+
+const routes = [
+    {
+        path: "/empty",
+        component: Layout,
+        children: [
+            {
+                path: "",
+                component: Dashboard,
+                children: [
+                    {
+                        name: "DashboardHome",
+                        path: "/",
+                        component: DashboardHome,
+                        children: [
+                            {
+                                path: "/compose",
+                                component: EditStack,
+                            },
+
+                        ]
+                    },
+                    {
+                        path: "/console",
+                        component: Console,
+                    },
+                ]
+            },
+        ]
+    },
+    {
+        path: "/setup",
+        component: Setup,
+    },
+];
+
+export const router = createRouter({
+    linkActiveClass: "active",
+    history: createWebHistory(),
+    routes,
+});
--- a/frontend/src/styles/localization.scss
+++ b/frontend/src/styles/localization.scss
@ -0,0 +1,9 @@
+html[lang='fa'] {
+    #app {
+        font-family: 'IRANSans', 'Iranian Sans','B Nazanin', 'Tahoma', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
+    }
+}
+
+ul.multiselect__content {
+    padding-left: 0 !important;
+}
--- a/frontend/src/styles/main.scss
+++ b/frontend/src/styles/main.scss
@ -0,0 +1,664 @@
+@import "vars.scss";
+@import "bootstrap/scss/bootstrap";
+@import "bootstrap-vue-next/dist/bootstrap-vue-next.css";
+
+#app {
+    font-family: BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
+}
+
+h1 {
+    font-size: 32px;
+}
+
+h2 {
+    font-size: 26px;
+}
+
+textarea.form-control {
+    border-radius: 19px;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+.bg-maintenance {
+    color: white !important;
+    background-color: $maintenance !important;
+}
+
+.bg-dark {
+    color: white;
+}
+
+.text-maintenance {
+    color: $maintenance !important;
+}
+
+.incident a,
+.bg-maintenance a {
+    color: inherit;
+}
+
+.list-group {
+    border-radius: 0.75rem;
+
+    .dark & {
+        .list-group-item {
+            background-color: $dark-bg;
+            color: $dark-font-color;
+            border-color: $dark-border-color;
+        }
+    }
+}
+
+
+// optgroup
+optgroup {
+    color: #b1b1b1;
+    option {
+        color: #212529;
+    }
+}
+
+.dark {
+    optgroup {
+        color: #535864;
+        option {
+            color: $dark-font-color;
+        }
+    }
+}
+
+// Scrollbar
+::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 20px;
+}
+
+.modal {
+    backdrop-filter: blur(3px);
+}
+
+.modal-content {
+    border-radius: 1rem;
+    box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
+
+    .dark & {
+        box-shadow: 0 15px 70px rgb(0 0 0);
+        background-color: $dark-bg;
+    }
+}
+
+.VuePagination__count {
+    font-size: 13px;
+    text-align: center;
+}
+
+.shadow-box {
+    box-shadow: 0 15px 70px rgba(0, 0, 0, 0.1);
+    padding: 10px;
+    border-radius: 10px;
+
+    &.big-padding {
+        padding: 20px;
+    }
+}
+
+.btn {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.btn-sm {
+    border-radius: 25px;
+}
+
+.btn-primary {
+    color: white;
+    background: $primary-gradient;
+
+    &:hover, &:active, &:focus, &.active {
+        color: white;
+        background: $primary-gradient-active;
+        border-color: $highlight;
+    }
+
+    .dark & {
+        color: $dark-font-color2;
+    }
+}
+
+.btn-normal {
+    $bg-color: #F5F5F5;
+
+    background-color: $bg-color;
+    border-color: $bg-color;
+
+    &:hover {
+        $hover-color: darken($bg-color, 3%);
+        background-color: $hover-color;
+        border-color: $hover-color;
+    }
+}
+
+.btn-warning {
+    color: white;
+
+    &:hover, &:active, &:focus, &.active {
+        color: white;
+    }
+}
+
+.btn-info {
+    color: white;
+
+    &:hover, &:active, &:focus, &.active {
+        color: white;
+    }
+}
+
+.btn-dark {
+    background-color: #161B22;
+}
+
+.btn-outline-normal {
+    padding: 4px 10px;
+    border: 1px solid #ced4da;
+    border-radius: 25px;
+    background-color: transparent;
+
+    .dark & {
+        color: $dark-font-color;
+        border: 1px solid $dark-font-color2;
+    }
+
+    &.active {
+        background-color: $highlight-white;
+
+        .dark & {
+            background-color: $dark-font-color2;
+        }
+    }
+}
+
+@media (max-width: 550px) {
+    .table-shadow-box {
+        padding: 10px !important;
+
+        thead {
+            display: none;
+        }
+
+        tbody {
+            .shadow-box {
+                background-color: white;
+            }
+        }
+
+        tr {
+            margin-top: 0 !important;
+            padding: 4px 10px !important;
+            display: block;
+            margin-bottom: 6px;
+
+            td:first-child {
+                font-weight: bold;
+            }
+
+            td:nth-child(-n+3) {
+                text-align: center;
+            }
+
+            td:last-child {
+                text-align: left;
+            }
+
+            td {
+                border-bottom: 1px solid $dark-font-color;
+                display: block;
+                padding: 4px;
+
+                .badge {
+                    margin: auto;
+                    display: block;
+                    width: 30%;
+                }
+            }
+        }
+    }
+}
+
+// Dark Theme override here
+.dark {
+    background-color: #090c10;
+    color: $dark-font-color;
+
+    mark, .mark {
+        background-color: #b6ad86;
+    }
+
+    &::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {
+        background: $dark-border-color;
+    }
+
+    .shadow-box {
+        &:not(.alert) {
+            background-color: $dark-bg;
+        }
+    }
+
+    .form-check-input {
+        background-color: $dark-bg2;
+        border-color: $dark-border-color;
+    }
+
+    .input-group-text {
+        background-color: #282f39;
+        border-color: $dark-border-color;
+        color: $dark-font-color;
+    }
+
+    .form-check-input:checked {
+        border-color: $primary; // Re-apply bootstrap border
+    }
+
+    .form-switch .form-check-input {
+        background-color: #232f3b;
+    }
+
+    a:not(.btn),
+    .table,
+    .nav-link {
+        color: $dark-font-color;
+
+        &.btn-info {
+            color: white;
+        }
+    }
+
+    .incident a,
+    .bg-maintenance a {
+        color: inherit;
+    }
+
+    .form-control,
+    .form-control:focus,
+    .form-select,
+    .form-select:focus {
+        color: $dark-font-color;
+        background-color: $dark-bg2;
+    }
+
+    .form-select:disabled {
+        color: rgba($dark-font-color, 0.7);
+        background-color: $dark-bg;
+    }
+
+    .form-control, .form-select {
+        border-color: $dark-border-color;
+    }
+
+    .form-control:disabled, .form-control[readonly] {
+        background-color: #232f3b;
+        opacity: 1;
+    }
+
+    .table-hover > tbody > tr:hover > * {
+        --bs-table-accent-bg: #070a10;
+        color: $dark-font-color;
+    }
+
+    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+        color: $dark-font-color2;
+        background: $primary-gradient;
+
+        &:hover {
+            background: $primary-gradient-active;
+        }
+    }
+
+    .bg-primary {
+        color: $dark-font-color2;
+    }
+
+    .btn-secondary {
+        color: white;
+    }
+
+    .btn-normal {
+        $bg-color: $dark-header-bg;
+
+        color: $dark-font-color;
+        background-color: $bg-color;
+        border-color: $bg-color;
+
+        &:hover {
+            $hover-color: darken($bg-color, 3%);
+            background-color: $hover-color;
+            border-color: $hover-color;
+        }
+    }
+
+    .btn-warning {
+        color: $dark-font-color2;
+
+        &:hover, &:active, &:focus, &.active {
+            color: $dark-font-color2;
+        }
+    }
+
+    .btn-close {
+        box-shadow: none;
+        filter: invert(1);
+
+        &:hover {
+            opacity: 0.6;
+        }
+    }
+
+    .modal-header {
+        border-color: $dark-bg;
+    }
+
+    .modal-footer {
+        border-color: $dark-bg;
+    }
+
+    // Pagination
+    .page-item.disabled .page-link {
+        background-color: $dark-bg;
+        border-color: $dark-border-color;
+    }
+
+    .page-link {
+        background-color: $dark-bg;
+        border-color: $dark-border-color;
+        color: $dark-font-color;
+    }
+
+    .monitor-list {
+        .item {
+            &:hover {
+                background-color: $dark-bg2;
+            }
+
+            &.active {
+                background-color: $dark-bg2;
+            }
+        }
+    }
+
+    @media (max-width: 550px) {
+        .table-shadow-box {
+            tbody {
+                .shadow-box {
+                    background-color: $dark-bg2;
+
+                    td {
+                        border-bottom: 1px solid $dark-border-color;
+                    }
+                }
+            }
+        }
+    }
+
+    .alert {
+        &.bg-info,
+        &.bg-warning,
+        &.bg-danger,
+        &.bg-maintenance,
+        &.bg-light {
+            color: $dark-font-color2;
+        }
+    }
+}
+
+// Floating Label
+.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-select ~ label::after {
+    background-color: transparent;
+
+
+}
+.form-floating > label {
+    .dark & {
+        color: $dark-font-color3 !important;
+    }
+}
+
+
+/*
+ * Transitions
+ */
+
+// page-change
+.slide-fade-enter-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-leave-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+    transform: translateY(50px);
+    opacity: 0;
+}
+
+.slide-fade-right-enter-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-right-leave-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-right-enter-from,
+.slide-fade-right-leave-to {
+    transform: translateX(50px);
+    opacity: 0;
+}
+
+.slide-fade-up-enter-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-up-leave-active {
+    transition: all 0.2s $easing-in;
+}
+
+.slide-fade-up-enter-from,
+.slide-fade-up-leave-to {
+    transform: translateY(-50px);
+    opacity: 0;
+}
+
+.monitor-list {
+    &.scrollbar {
+        overflow-y: auto;
+    }
+
+    @media (max-width: 770px) {
+        &.scrollbar {
+            height: calc(100% - 97px);
+        }
+    }
+
+    .item {
+        display: block;
+        text-decoration: none;
+        padding: 13px 15px 10px 15px;
+        border-radius: 10px;
+        transition: all ease-in-out 0.15s;
+
+        &.disabled {
+            opacity: 0.3;
+        }
+
+        .info {
+            white-space: nowrap;
+            overflow: hidden;
+        }
+
+        &:hover {
+            background-color: $highlight-white;
+        }
+
+        &.active {
+            background-color: #cdf8f4;
+        }
+        .tags {
+            // Removes margin to line up tags list with uptime percentage
+            margin-left: -0.25rem;
+        }
+    }
+}
+
+.alert-success {
+    color: #122f21;
+    background-color: $primary;
+    border-color: $primary;
+}
+
+.alert-info {
+    color: #055160;
+    background-color: #cff4fc;
+    border-color: #cff4fc;
+}
+
+.alert-danger {
+    color: #842029;
+    background-color: #f8d7da;
+    border-color: #f8d7da;
+}
+
+.btn-success {
+    color: #fff;
+    background-color: #4caf50;
+    border-color: #4caf50;
+}
+
+
+[contenteditable=true] {
+    transition: all $easing-in 0.2s;
+    background-color: rgba(239, 239, 239, 0.7);
+    border-radius: 8px;
+
+    &.no-bg {
+        background-color: transparent !important;
+    }
+
+    &:focus {
+        outline: 0 solid #eee;
+        background-color: rgba(245, 245, 245, 0.9);
+    }
+
+    &:hover {
+        background-color: rgba(239, 239, 239, 0.8);
+    }
+
+    .dark & {
+        background-color: rgba(239, 239, 239, 0.2);
+    }
+
+    /*
+    &::after {
+        margin-left: 5px;
+        content: "🖊️";
+        font-size: 13px;
+        color: #eee;
+    }
+    */
+
+}
+
+.action {
+    transition: all $easing-in 0.2s;
+
+    &:hover {
+        cursor: pointer;
+        transform: scale(1.2);
+    }
+}
+
+.vue-image-crop-upload .vicp-wrap {
+    border-radius: 10px !important;
+}
+
+.spinner {
+    color: $primary;
+}
+
+.prism-editor__textarea {
+    outline: none !important;
+}
+
+h5.settings-subheading::after {
+    content: "";
+    display: block;
+    width: 50%;
+    padding-top: 8px;
+    border-bottom: 1px solid $dark-border-color;
+}
+
+/* required class */
+.code-editor, .css-editor {
+    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
+
+    border-radius: 1rem;
+    padding: 10px 5px;
+    border: 1px solid #ced4da;
+
+    .dark & {
+        background: $dark-bg2;
+        border: 1px solid $dark-border-color;
+    }
+}
+
+
+$shadow-box-padding: 20px;
+
+.shadow-box-with-fixed-bottom-bar {
+    padding-top: $shadow-box-padding;
+    padding-bottom: 0;
+    padding-right: $shadow-box-padding;
+    padding-left: $shadow-box-padding;
+}
+
+.fixed-bottom-bar {
+    position: sticky;
+    bottom: 0;
+    margin-left: -$shadow-box-padding;
+    margin-right: -$shadow-box-padding;
+    z-index: 100;
+    background-color: rgba(white, 0.2);
+    backdrop-filter: blur(2px);
+    border-radius: 0 0 10px 10px;
+
+    .dark & {
+        background-color: rgba($dark-header-bg, 0.9);
+    }
+}
+
+@media (max-width: 770px) {
+    .toast-container {
+        margin-bottom: 100px !important;
+    }
+}
+
+@media (max-width: 550px) {
+    .toast-container {
+        margin-bottom: 126px !important;
+    }
+}
+
+#terminal {
+    .xterm-viewport {
+        border-radius: 10px;
+        background-color: $dark-bg !important;
+    }
+}
+
+// Localization
+@import "localization.scss";
--- a/frontend/src/styles/vars.scss
+++ b/frontend/src/styles/vars.scss
@ -0,0 +1,26 @@
+$primary: #74c2ff;
+$danger: #dc3545;
+$warning: #f8a306;
+$maintenance: #1747f5;
+$link-color: #111;
+$border-radius: 50rem;
+
+$highlight: #9dd1ff;
+$highlight-white: #e7faec;
+
+$dark-font-color: #b1b8c0;
+$dark-font-color2: #020b05;
+$dark-font-color3: #575c62;
+$dark-bg: #0d1117;
+$dark-bg2: #070a10;
+$dark-border-color: #1d2634;
+$dark-header-bg: #161b22;
+
+$easing-in: cubic-bezier(0.54, 0.78, 0.55, 0.97);
+$easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$easing-in-out: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+
+$dropdown-border-radius: 0.5rem;
+
+$primary-gradient: linear-gradient(135deg, #74c2ff 0%, #74c2ff 75%, #86e6a9);
+$primary-gradient-active: linear-gradient(135deg, #74c2ff 0%, #74c2ff 50%, #86e6a9);
--- a/frontend/src/util-frontend.ts
+++ b/frontend/src/util-frontend.ts
@ -0,0 +1,214 @@
+import dayjs from "dayjs";
+import timezones from "timezones-list";
+import { localeDirection, currentLocale } from "./i18n";
+import { POSITION } from "vue-toastification";
+
+/**
+ * Returns the offset from UTC in hours for the current locale.
+ * @param {string} timeZone Timezone to get offset for
+ * @returns {number} The offset from UTC in hours.
+ *
+ * Generated by Trelent
+ */
+function getTimezoneOffset(timeZone) {
+    const now = new Date();
+    const tzString = now.toLocaleString("en-US", {
+        timeZone,
+    });
+    const localString = now.toLocaleString("en-US");
+    const diff = (Date.parse(localString) - Date.parse(tzString)) / 3600000;
+    const offset = diff + now.getTimezoneOffset() / 60;
+    return -offset;
+}
+
+/**
+ * Returns a list of timezones sorted by their offset from UTC.
+ * @returns {object[]} A list of the given timezones sorted by their offset from UTC.
+ *
+ * Generated by Trelent
+ */
+export function timezoneList() {
+    let result = [];
+
+    for (let timezone of timezones) {
+        try {
+            let display = dayjs().tz(timezone.tzCode).format("Z");
+
+            result.push({
+                name: `(UTC${display}) ${timezone.tzCode}`,
+                value: timezone.tzCode,
+                time: getTimezoneOffset(timezone.tzCode),
+            });
+        } catch (e) {
+            // Skipping not supported timezone.tzCode by dayjs
+        }
+    }
+
+    result.sort((a, b) => {
+        if (a.time > b.time) {
+            return 1;
+        }
+
+        if (b.time > a.time) {
+            return -1;
+        }
+
+        return 0;
+    });
+
+    return result;
+}
+
+/**
+ * Set the locale of the HTML page
+ * @returns {void}
+ */
+export function setPageLocale() {
+    const html = document.documentElement;
+    html.setAttribute("lang", currentLocale() );
+    html.setAttribute("dir", localeDirection() );
+}
+
+/**
+ * Get the base URL
+ * Mainly used for dev, because the backend and the frontend are in different ports.
+ * @returns {string} Base URL
+ */
+export function getResBaseURL() {
+    const env = process.env.NODE_ENV;
+    if (env === "development" && isDevContainer()) {
+        return location.protocol + "//" + getDevContainerServerHostname();
+    } else if (env === "development" || localStorage.dev === "dev") {
+        return location.protocol + "//" + location.hostname + ":3001";
+    } else {
+        return "";
+    }
+}
+
+/**
+ * Are we currently running in a dev container?
+ * @returns {boolean} Running in dev container?
+ */
+export function isDevContainer() {
+    // eslint-disable-next-line no-undef
+    return (typeof DEVCONTAINER === "string" && DEVCONTAINER === "1");
+}
+
+/**
+ * Supports GitHub Codespaces only currently
+ * @returns {string} Dev container server hostname
+ */
+export function getDevContainerServerHostname() {
+    if (!isDevContainer()) {
+        return "";
+    }
+
+    // eslint-disable-next-line no-undef
+    return CODESPACE_NAME + "-3001." + GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN;
+}
+
+/**
+ * Regex pattern fr identifying hostnames and IP addresses
+ * @param {boolean} mqtt whether or not the regex should take into
+ * account the fact that it is an mqtt uri
+ * @returns {RegExp} The requested regex
+ */
+export function hostNameRegexPattern(mqtt = false) {
+    // mqtt, mqtts, ws and wss schemes accepted by mqtt.js (https://github.com/mqttjs/MQTT.js/#connect)
+    const mqttSchemeRegexPattern = "((mqtt|ws)s?:\\/\\/)?";
+    // Source: https://digitalfortress.tech/tips/top-15-commonly-used-regex/
+    const ipRegexPattern = `((^${mqtt ? mqttSchemeRegexPattern : ""}((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))$)|(^((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:)))(%.+)?$))`;
+    // Source: https://stackoverflow.com/questions/106179/regular-expression-to-match-dns-hostname-or-ip-address
+    const hostNameRegexPattern = `^${mqtt ? mqttSchemeRegexPattern : ""}([a-zA-Z0-9])?(([a-zA-Z0-9_]|[a-zA-Z0-9_][a-zA-Z0-9\\-_]*[a-zA-Z0-9_])\\.)*([A-Za-z0-9_]|[A-Za-z0-9_][A-Za-z0-9\\-_]*[A-Za-z0-9_])(\\.)?$`;
+
+    return `${ipRegexPattern}|${hostNameRegexPattern}`;
+}
+
+/**
+ * Get the tag color options
+ * Shared between components
+ * @param {any} self Component
+ * @returns {object[]} Colour options
+ */
+export function colorOptions(self) {
+    return [
+        { name: self.$t("Gray"),
+            color: "#4B5563" },
+        { name: self.$t("Red"),
+            color: "#DC2626" },
+        { name: self.$t("Orange"),
+            color: "#D97706" },
+        { name: self.$t("Green"),
+            color: "#059669" },
+        { name: self.$t("Blue"),
+            color: "#2563EB" },
+        { name: self.$t("Indigo"),
+            color: "#4F46E5" },
+        { name: self.$t("Purple"),
+            color: "#7C3AED" },
+        { name: self.$t("Pink"),
+            color: "#DB2777" },
+    ];
+}
+
+/**
+ * Loads the toast timeout settings from storage.
+ * @returns {object} The toast plugin options object.
+ */
+export function loadToastSettings() {
+    return {
+        position: POSITION.BOTTOM_RIGHT,
+        containerClassName: "toast-container mb-5",
+        showCloseButtonOnHover: true,
+
+        filterBeforeCreate: (toast, toasts) => {
+            if (toast.timeout === 0) {
+                return false;
+            } else {
+                return toast;
+            }
+        },
+    };
+}
+
+/**
+ * Get timeout for success toasts
+ * @returns {(number|boolean)} Timeout in ms. If false timeout disabled.
+ */
+export function getToastSuccessTimeout() {
+    let successTimeout = 20000;
+
+    if (localStorage.toastSuccessTimeout !== undefined) {
+        const parsedTimeout = parseInt(localStorage.toastSuccessTimeout);
+        if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
+            successTimeout = parsedTimeout;
+        }
+    }
+
+    if (successTimeout === -1) {
+        successTimeout = false;
+    }
+
+    return successTimeout;
+}
+
+/**
+ * Get timeout for error toasts
+ * @returns {(number|boolean)} Timeout in ms. If false timeout disabled.
+ */
+export function getToastErrorTimeout() {
+    let errorTimeout = -1;
+
+    if (localStorage.toastErrorTimeout !== undefined) {
+        const parsedTimeout = parseInt(localStorage.toastErrorTimeout);
+        if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
+            errorTimeout = parsedTimeout;
+        }
+    }
+
+    if (errorTimeout === -1) {
+        errorTimeout = false;
+    }
+
+    return errorTimeout;
+}
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+    import type { DefineComponent } from "vue";
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -0,0 +1,33 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import Components from "unplugin-vue-components/vite";
+import { BootstrapVueNextResolver } from "unplugin-vue-components/resolvers";
+import viteCompression from "vite-plugin-compression";
+import "vue";
+
+const viteCompressionFilter = /\.(js|mjs|json|css|html|svg)$/i;
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    server: {
+        port: 5000,
+    },
+    root: "./frontend",
+    build: {
+        outDir: "../dist",
+    },
+    plugins: [
+        vue(),
+        Components({
+            resolvers: [ BootstrapVueNextResolver() ],
+        }),
+        viteCompression({
+            algorithm: "gzip",
+            filter: viteCompressionFilter,
+        }),
+        viteCompression({
+            algorithm: "brotliCompress",
+            filter: viteCompressionFilter,
+        }),
+    ],
+});
--- a/package.json
+++ b/package.json
@ -0,0 +1,66 @@
+{
+    "name": "dockge",
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "fmt": "eslint \"**/*.{ts,vue}\" --fix",
+        "lint": "eslint \"**/*.{ts,vue}\"",
+        "dev:backend": "cross-env NODE_ENV=development tsx watch ./backend/index.ts",
+        "dev:frontend": "cross-env NODE_ENV=development vite --host --config ./frontend/vite.config.ts",
+        "build:frontend": "vite build --config ./frontend/vite.config.ts"
+    },
+    "dependencies": {
+        "@louislam/sqlite3": "~15.1.6",
+        "bcryptjs": "^2.4.3",
+        "check-password-strength": "^2.0.7",
+        "compare-versions": "~6.1.0",
+        "dayjs": "^1.11.10",
+        "express": "~4.18.2",
+        "jsonwebtoken": "^9.0.2",
+        "jwt-decode": "^3.1.2",
+        "knex": "~2.5.1",
+        "limiter-es6-compat": "~2.1.2",
+        "mysql2": "^3.6.2",
+        "node-pty": "^1.0.0",
+        "redbean-node": "0.3.1",
+        "socket.io": "~4.7.2",
+        "socket.io-client": "~4.7.2",
+        "timezones-list": "^3.0.2",
+        "ts-command-line-args": "~2.5.1",
+        "tsx": "~3.14.0",
+        "type-fest": "~4.3.3",
+        "yaml": "~2.3.3"
+    },
+    "optionalDependencies": {
+        "pm2": "~5.3.0"
+    },
+    "devDependencies": {
+        "@fortawesome/fontawesome-svg-core": "6.4.2",
+        "@fortawesome/free-regular-svg-icons": "6.4.2",
+        "@fortawesome/free-solid-svg-icons": "6.4.2",
+        "@fortawesome/vue-fontawesome": "3.0.3",
+        "@types/express": "~4.17.20",
+        "@typescript-eslint/eslint-plugin": "~6.8.0",
+        "@typescript-eslint/parser": "~6.8.0",
+        "@vitejs/plugin-vue": "~4.3.4",
+        "bootstrap": "5.3.2",
+        "bootstrap-vue-next": "~0.14.10",
+        "cross-env": "~7.0.3",
+        "eslint": "~8.50.0",
+        "eslint-plugin-jsdoc": "~46.8.2",
+        "eslint-plugin-vue": "~9.17.0",
+        "sass": "~1.68.0",
+        "typescript": "~5.2.2",
+        "unplugin-vue-components": "^0.25.2",
+        "vite": "~4.5.0",
+        "vite-plugin-compression": "^0.5.1",
+        "vue": "~3.3.6",
+        "vue-eslint-parser": "^9.3.2",
+        "vue-i18n": "~9.5.0",
+        "vue-router": "~4.2.5",
+        "vue-toastification": "~2.0.0-rc.5",
+        "xterm": "^5.3.0",
+        "xterm-addon-fit": "^0.8.0",
+        "xterm-addon-web-links": "^0.9.0"
+    }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "target": "ESNext",
+        "strict": true,
+        "moduleResolution": "bundler"
+    }
+}