diff --git a/createuser.py b/createuser.py
deleted file mode 100644
index 718b364..0000000
--- a/createuser.py
+++ /dev/null
@@ -1,104 +0,0 @@
-import psycopg2
-from psycopg2 import sql
-from psycopg2.extensions import ISOLATION_LEVEL_AUTOCOMMIT
-from dotenv import load_dotenv
-from os import getenv
-from argon2 import PasswordHasher
-
-load_dotenv()
-
-DB_HOST = getenv("DB_HOST")+":"+getenv("DB_PORT")
-DB_USER = getenv("DB_USER")
-DB_PASSWORD = getenv("DB_PASSWORD")
-DB_NAME = "outpost"
-
-class newUser:
-
-    username = ""
-    name = ""
-    email = ""
-    password = ""
-
-    def checkIfAvailible(self):
-        try:
-            conn = psycopg2.connect(
-                host=DB_HOST,
-                user=DB_USER,
-                password=DB_PASSWORD,
-                database=DB_NAME
-            )
-            cur = conn.cursor()
-            cur.execute("""
-            SELECT * FROM users
-            WHERE username = %s
-            """, [self.username])
-            if len(cur.fetchall()) > 0:
-                return False
-            else:
-                return True
-        except:
-            return False
-        
-    def createUserTable(self):
-        try:
-            conn = psycopg2.connect(
-                host=DB_HOST,
-                user=DB_USER,
-                password=DB_PASSWORD,
-                database=DB_NAME
-            )
-            cur = conn.cursor()
-            
-            table_name = f""""userpermissions".{id.lower().replace(' ', '_').replace('-', '_').replace('.', '_')}"""
-
-            cur.execute("""
-                CREATE TABLE IF NOT EXISTS %s (
-                    key VARCHAR(255) PRIMARY KEY,
-                    value TEXT
-                )
-            """, (table_name))
-
-            conn.commit()
-            cur.close()
-            conn.close()
-            
-        except Exception as e:
-            print(f"Error creating user table: {e}")
-            raise
-    
-    def createUser(self):
-        try:
-            ph = PasswordHasher()
-            conn = psycopg2.connect(
-                host=DB_HOST,
-                user=DB_USER,
-                password=DB_PASSWORD,
-                database=DB_NAME
-            )
-            cur = conn.cursor()
-            cur.execute("""
-                INSERT INTO users (
-                    name,
-                    username,
-                    email,
-                    password_hash
-                ) values (
-                    %s,
-                    %s,
-                    %s,
-                    %s
-                );
-            """, (
-                self.name,
-                self.username,
-                self.email,
-                ph.hash(self.password)
-            ))
-            user = cur.fetchone()
-            conn.commit()
-            cur.close()
-            conn.close()
-            return user
-        except:
-            return False
-
diff --git a/db.py b/db.py
new file mode 100644
index 0000000..4ceb993
--- /dev/null
+++ b/db.py
@@ -0,0 +1,236 @@
+import psycopg2
+from psycopg2 import sql
+from psycopg2.extensions import ISOLATION_LEVEL_AUTOCOMMIT
+from argon2 import PasswordHasher
+import secrets
+
+def logEvent(action, details, user_id, user_ip, user_agent, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+        
+        cur.execute("""
+            INSERT INTO logs (action, details, user_id, user_ip, user_agent)
+            VALUES (%s, %s, %s, %s, %s)
+        """, (action, details, user_id, user_ip, user_agent))
+        
+        conn.commit()
+        
+        cur.close()
+        conn.close()
+        
+    except Exception as e:
+        print(f"Error logging event: {e}")
+        raise
+
+def createGroup(name, parent, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+        
+        if parent:
+            cur.execute("SELECT id FROM groups WHERE name = %s", (parent,))
+            parent_record = cur.fetchone()
+            if parent_record:
+                parent_id = parent_record[0]
+            else:
+                parent_id = None
+        else:
+            parent_id = None
+
+        cur.execute("""
+            INSERT INTO groups (name, parent)
+            VALUES (%s, %s) RETURNING id
+        """, (name, parent_id))
+        
+        group_id = cur.fetchone()[0]
+        conn.commit()
+        
+        cur.close()
+        conn.close()
+        
+        return group_id
+        
+    except Exception as e:
+        print(f"Error creating group: {e}")
+        raise
+
+def getGroupByName(name, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+        
+        cur.execute("SELECT id, name, parent, creation_date FROM groups WHERE name = %s", (name,))
+        group_record = cur.fetchone()
+        
+        cur.close()
+        conn.close()
+        
+        if group_record:
+            return {
+                "id": group_record[0],
+                "name": group_record[1],
+                "parent": group_record[2],
+                "creation_date": group_record[3]
+            }
+        else:
+            return None
+        
+    except Exception as e:
+        print(f"Error retrieving group: {e}")
+        raise
+
+def createUser(name, username, email, password, group, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+        
+        password_hash = PasswordHasher().hash(password)
+
+        cur.execute("""
+            INSERT INTO users (name, username, email, password_hash, group_id)
+            VALUES (%s, %s, %s, %s, %s) RETURNING id
+        """, (name, username, email, password_hash, group))
+        
+        user_id = cur.fetchone()[0]
+        conn.commit()
+        
+        cur.close()
+        conn.close()
+        
+        return user_id
+        
+    except Exception as e:
+        print(f"Error creating user: {e}")
+        raise
+
+def createToken(user_id, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+        # generate a secure random token id (URL-safe)
+        token_id = secrets.token_urlsafe(32)
+
+        cur.execute("""
+            INSERT INTO userTokens (id, owner_id)
+            VALUES (%s, %s) RETURNING id, creation_date, expiration_date
+        """, (token_id, user_id))
+
+        token_data = cur.fetchone()
+        conn.commit()
+
+        cur.close()
+        conn.close()
+
+        return token_data[0]
+        
+    except Exception as e:
+        print(f"Error creating token: {e}")
+        raise
+
+def loginUser(username, password, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+        
+        cur.execute("SELECT id, password_hash FROM users WHERE username = %s", (username,))
+        user_record = cur.fetchone()
+        
+        cur.close()
+        conn.close()
+        
+        if user_record:
+            user_id, password_hash = user_record
+            ph = PasswordHasher()
+            try:
+                ph.verify(password_hash, password)
+                return createToken(user_id, dbuser, dbpass, dbhost, dbname)
+            except:
+                return None
+        else:
+            return None
+        
+    except Exception as e:
+        print(f"Error logging in user: {e}")
+        raise
+
+def removeToken(token_id, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+        
+        cur.execute("DELETE FROM userTokens WHERE id = %s", (token_id,))
+        conn.commit()
+        
+        cur.close()
+        conn.close()
+        
+        return True
+        
+    except Exception as e:
+        print(f"Error removing token: {e}")
+        return False
+    
+def verifyToken(token_id, dbuser, dbpass, dbhost, dbname):
+    try:
+        conn = psycopg2.connect(
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
+        )
+        cur = conn.cursor()
+        
+        cur.execute("""
+            SELECT owner_id FROM userTokens
+            WHERE id = %s AND expiration_date > CURRENT_TIMESTAMP
+        """, (token_id,))
+        
+        token_record = cur.fetchone()
+        
+        cur.close()
+        conn.close()
+        
+        if token_record:
+            return token_record[0]
+        else:
+            return None
+        
+    except Exception as e:
+        print(f"Error verifying token: {e}")
+        return None
\ No newline at end of file
diff --git a/initdb.py b/initdb.py
index 3167643..169c643 100644
--- a/initdb.py
+++ b/initdb.py
@@ -1,39 +1,26 @@
 import psycopg2
 from psycopg2 import sql
 from psycopg2.extensions import ISOLATION_LEVEL_AUTOCOMMIT
-from dotenv import load_dotenv
-from os import getenv
 
-load_dotenv()
-
-# Database connection parameters
-DB_HOST = getenv("DB_HOST")+":"+getenv("DB_PORT")
-DB_USER = getenv("DB_USER")
-DB_PASSWORD = getenv("DB_PASSWORD")
-DB_NAME = "outpost"
-
-def create_database():
-    """Create the outpost database if it doesn't exist"""
+def createDatabase(dbuser, dbpass, dbhost, dbname):
     try:
-        # Connect to PostgreSQL server (default postgres database)
         conn = psycopg2.connect(
-            host=DB_HOST,
-            user=DB_USER,
-            password=DB_PASSWORD,
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
             database="postgres"
         )
         conn.set_isolation_level(ISOLATION_LEVEL_AUTOCOMMIT)
         cur = conn.cursor()
         
-        # Check if database exists
-        cur.execute("SELECT 1 FROM pg_database WHERE datname = %s", (DB_NAME,))
+        cur.execute("SELECT 1 FROM pg_database WHERE datname = %s", (dbname,))
         exists = cur.fetchone()
         
         if not exists:
-            cur.execute(sql.SQL("CREATE DATABASE {}").format(sql.Identifier(DB_NAME)))
-            print(f"Database '{DB_NAME}' created successfully")
+            cur.execute(sql.SQL("CREATE DATABASE {}").format(sql.Identifier(dbname)))
+            print(f"Database '{dbname}' created successfully")
         else:
-            print(f"Database '{DB_NAME}' already exists")
+            print(f"Database '{dbname}' already exists")
         
         cur.close()
         conn.close()
@@ -42,37 +29,85 @@ def create_database():
         print(f"Error creating database: {e}")
         raise
 
-def create_tables():
+def createTables(dbuser, dbpass, dbhost, dbname):
     try:
         conn = psycopg2.connect(
-            host=DB_HOST,
-            user=DB_USER,
-            password=DB_PASSWORD,
-            database=DB_NAME
+            host=dbhost,
+            user=dbuser,
+            password=dbpass,
+            database=dbname
         )
         cur = conn.cursor()
         
+        cur.execute("""
+            CREATE TABLE IF NOT EXISTS groups (
+                id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+                name VARCHAR(255) UNIQUE NOT NULL,
+                parent UUID REFERENCES groups(id),
+                creation_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            )
+        """)
+        print("Table 'groups' created or already exists")
+        
         cur.execute("""
             CREATE TABLE IF NOT EXISTS users (
-                id SERIAL PRIMARY KEY,
+                id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
                 name VARCHAR(255) NOT NULL,
                 username VARCHAR(255) UNIQUE NOT NULL,
                 email VARCHAR(255),
                 creation_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-                password_hash VARCHAR(255) NOT NULL
+                password_hash VARCHAR(255) NOT NULL,
+                group_id UUID REFERENCES groups(id)
             )
         """)
         print("Table 'users' created or already exists")
         
         cur.execute("""
-            CREATE TABLE IF NOT EXISTS logging (
+            CREATE TABLE IF NOT EXISTS userData (
                 id SERIAL PRIMARY KEY,
-                time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-                user_id INTEGER REFERENCES users(id),
-                action TEXT NOT NULL
+                user_id uuid REFERENCES users(id),
+                service_id VARCHAR(255) NOT NULL,
+                creation_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                property VARCHAR(255) NOT NULL,
+                value VARCHAR(255) NOT NULL
             )
         """)
-        print("Table 'logging' created or already exists")
+        print("Table 'userData' created or already exists")
+
+        cur.execute("""
+            CREATE TABLE IF NOT EXISTS groupData (
+                id SERIAL PRIMARY KEY,
+                group_id uuid REFERENCES groups(id),
+                service_id VARCHAR(255) NOT NULL,
+                creation_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                property VARCHAR(255) NOT NULL,
+                value VARCHAR(255) NOT NULL
+            )
+        """)
+        print("Table 'userData' created or already exists")
+
+        cur.execute("""
+            CREATE TABLE IF NOT EXISTS logs (
+            id SERIAL PRIMARY KEY,
+            user_id uuid REFERENCES users(id),
+            action VARCHAR(255),
+            details VARCHAR(255),
+            user_ip VARCHAR(255),
+            user_agent VARCHAR(255),
+            date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            )
+        """)
+        print("Table 'logs' created or already exists")
+
+        cur.execute("""
+            CREATE TABLE IF NOT EXISTS userTokens (
+            id VARCHAR(255) PRIMARY KEY,
+            owner_id uuid REFERENCES users(id),
+            creation_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+            expiration_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP + INTERVAL '30 days'
+            )
+        """)
+        print("Table 'userTokens' created or already exists")
         
         conn.commit()
         cur.close()
@@ -80,50 +115,4 @@ def create_tables():
         
     except Exception as e:
         print(f"Error creating tables: {e}")
-        raise
-
-def create_user_table(id):
-    try:
-        conn = psycopg2.connect(
-            host=DB_HOST,
-            user=DB_USER,
-            password=DB_PASSWORD,
-            database=DB_NAME
-        )
-        cur = conn.cursor()
-        
-        table_name = f"userpermissions.{id.lower().replace(' ', '_').replace('-', '_').replace('.', '_')}"
-
-        cur.execute(sql.SQL("""
-            CREATE TABLE IF NOT EXISTS {} (
-                key VARCHAR(255) PRIMARY KEY,
-                value TEXT
-            )
-        """).format(sql.Identifier(table_name)))
-        
-        print(f"Table '{table_name}' created or already exists")
-        
-        conn.commit()
-        cur.close()
-        conn.close()
-        
-    except Exception as e:
-        print(f"Error creating user table: {e}")
-        raise
-
-def main():
-    """Main function to set up the database"""
-    print("Starting database setup...")
-    
-    # Step 1: Create database
-    create_database()
-    
-    # Step 2: Create tables
-    create_tables()
-    
-    print("\nDatabase setup completed successfully!")
-    print("\nTo create a user-specific table, call:")
-    print("create_user_table('username')")
-
-if __name__ == "__main__":
-    main()
\ No newline at end of file
+        raise
\ No newline at end of file
diff --git a/main.py b/main.py
new file mode 100644
index 0000000..578a4ab
--- /dev/null
+++ b/main.py
@@ -0,0 +1,74 @@
+import flask
+from flask import render_template, jsonify, request, redirect, Response
+import initdb
+import db
+from dotenv import load_dotenv
+from os import getenv
+
+load_dotenv()
+
+DB_HOST = getenv("DB_HOST")
+DB_USER = getenv("DB_USER")
+DB_PASSWORD = getenv("DB_PASSWORD")
+DB_NAME = getenv("DB_NAME")
+
+appName = "Outpost"
+
+app = flask.Flask(__name__)
+
+@app.route('/', methods = ['GET'])
+def index():
+    token = request.cookies.get('auth_token', 'none')
+    userId = db.verifyToken(token, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+    if (userId == None):
+        return render_template('login.html', appName=appName)
+    else:
+        return render_template("home.html", pageTitle="Home | " + appName)
+
+@app.route('/api/login', methods = ['POST'])
+def handleLogin():
+    username = request.json['username'].lower()
+    password = request.json['password']
+    newToken = db.loginUser(username, password, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+    if newToken == None:
+        print("Invalid login attempt")
+        return jsonify("Invalid username or password")
+    return jsonify(newToken)
+
+@app.route('/signup', methods = ['GET'])
+def signup():
+    token = request.cookies.get('auth_token', 'none')
+    userId = db.verifyToken(token, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+    if (userId == None):
+        return render_template('signup.html', appName=appName)
+    else:
+        return render_template("home.html", pageTitle="Home | " + appName)
+
+@app.route('/logout', methods = ['GET'])
+def logout():
+    token = request.cookies.get('auth_token', 'none')
+    try:
+        token = request.headers['remove-token']
+    except:
+        pass
+    db.removeToken(token, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+    return render_template('logout.html', appName=appName)
+
+@app.route('/api/signup', methods = ['POST'])
+def handleSignup():
+    try:
+        username = request.json['username'].lower()
+        email = request.json['email'].lower()
+        password = request.json['password']
+        displayName = request.json['displayname']
+        db.createUser(displayName, username, email, password, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+    except:
+        return jsonify("An error occured")
+
+
+if __name__ == '__main__':
+    initdb.createDatabase(DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+    initdb.createTables(DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+    if not db.getGroupByName("root", DB_USER, DB_PASSWORD, DB_HOST, DB_NAME):
+        db.createGroup("root", None, DB_USER, DB_PASSWORD, DB_HOST, DB_NAME)
+    app.run(debug=True)
\ No newline at end of file
diff --git a/templates/login.html b/templates/login.html
new file mode 100644
index 0000000..0189575
--- /dev/null
+++ b/templates/login.html
@@ -0,0 +1,545 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login | {{ appName }}</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600&display=swap');
+        
+        :root {
+            --brand-primary: #6366f1;
+            --brand-hover: #4f46e5;
+            --brand-success: #10b981;
+            --brand-error: #ef4444;
+            --text-main: #0f172a;
+            --text-muted: #64748b;
+            --bg-body: #f8fafc;
+            --border-color: #e2e8f0;
+            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+            --radius-xl: 2rem;
+            --radius-lg: 0.75rem;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-body);
+            background-image: 
+                radial-gradient(at 0% 0%, hsla(253,16%,95%,1) 0, transparent 50%), 
+                radial-gradient(at 100% 0%, hsla(225,39%,90%,1) 0, transparent 50%);
+            height: 100vh;
+            width: 100vw;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+            overflow: hidden;
+        }
+
+        .login-card {
+            max-width: 448px;
+            width: 100%;
+            background: #ffffff;
+            border-radius: var(--radius-xl);
+            box-shadow: var(--shadow-xl);
+            border: 1px solid var(--border-color);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .card-content {
+            padding: 2.5rem;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .brand-header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 2rem;
+        }
+
+        .brand-icon {
+            width: 32px;
+            height: 32px;
+            background: var(--brand-primary);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+            font-size: 0.875rem;
+        }
+
+        .brand-name {
+            font-family: 'Space Grotesk', sans-serif;
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: var(--text-main);
+            letter-spacing: -0.025em;
+        }
+
+        h2 {
+            font-family: 'Space Grotesk', sans-serif;
+            font-size: 1.875rem;
+            font-weight: 700;
+            color: var(--text-main);
+            margin-bottom: 0.5rem;
+            letter-spacing: -0.025em;
+        }
+
+        .description {
+            color: var(--text-muted);
+            font-size: 0.875rem;
+            margin-bottom: 2rem;
+            line-height: 1.5;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .input-container {
+            display: flex;
+            align-items: center;
+            background: #ffffff;
+            border: 2px solid var(--border-color);
+            border-radius: var(--radius-lg);
+            padding: 0 1rem;
+            transition: all 0.3s ease;
+        }
+
+        .input-container:focus-within {
+            border-color: var(--brand-primary);
+            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+        }
+
+        .input-container i {
+            color: var(--text-muted);
+            margin-right: 0.75rem;
+            font-size: 1rem;
+        }
+
+        input {
+            width: 100%;
+            border: none;
+            outline: none;
+            padding: 0.875rem 0;
+            font-size: 1rem;
+            color: var(--text-main);
+            background: transparent;
+        }
+
+        .btn {
+            width: 100%;
+            padding: 1rem;
+            border-radius: var(--radius-lg);
+            border: none;
+            font-size: 1rem;
+            font-weight: 700;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            transition: all 0.3s ease;
+        }
+
+        .btn-primary {
+            background: var(--brand-primary);
+            color: white;
+            box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            background: var(--brand-hover);
+            transform: translateY(-1px);
+        }
+
+        .btn-primary:disabled {
+            opacity: 0.7;
+            cursor: not-allowed;
+        }
+
+        .btn-text {
+            background: transparent;
+            color: var(--text-muted);
+            border: none;
+            font-size: 0.875rem;
+            font-weight: 500;
+            margin-top: 1rem;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+
+        .btn-text:hover {
+            color: var(--brand-primary);
+        }
+
+        .back-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--text-muted);
+            font-size: 0.75rem;
+            font-weight: 700;
+            text-decoration: none;
+            margin-bottom: 1.5rem;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+
+        .back-link:hover {
+            color: var(--brand-primary);
+        }
+
+        .identity-chip {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            background: var(--bg-body);
+            border: 1px solid var(--border-color);
+            padding: 0.375rem 0.75rem;
+            border-radius: 0.5rem;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            width: fit-content;
+            margin-bottom: 1.5rem;
+        }
+
+        .hidden { display: none !important; }
+
+        .error-box {
+            background: #fef2f2;
+            border-left: 4px solid var(--brand-error);
+            color: #b91c1c;
+            padding: 0.75rem;
+            border-radius: 0 0.5rem 0.5rem 0;
+            font-size: 0.75rem;
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .success-state {
+            text-align: center;
+            padding: 1rem 0;
+        }
+
+        .success-icon {
+            width: 64px;
+            height: 64px;
+            background: #ecfdf5;
+            color: var(--brand-success);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            margin: 0 auto 1.5rem;
+        }
+
+        .step-transition {
+            animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        @keyframes fadeInScale {
+            from { opacity: 0; transform: scale(0.99) translateY(5px); }
+            to { opacity: 1; transform: scale(1) translateY(0); }
+        }
+
+        .loader {
+            width: 18px;
+            height: 18px;
+            border: 2px solid rgba(255,255,255,0.3);
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .toggle-btn {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            cursor: pointer;
+            padding: 0.5rem;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="login-card">
+        <div class="card-content">
+            <!-- Brand -->
+            <div class="brand-header">
+                <div class="brand-icon">
+                    <i class="fa-solid fa-key"></i>
+                </div>
+                <span class="brand-name">{{ appName }}</span>
+            </div>
+
+            <!-- Stage 1: Identity -->
+            <div id="stage1" class="step-transition">
+                <h2>Login</h2>
+                <p class="description">Please enter your email or username to log in</p>
+
+                <form id="emailForm" onsubmit="toStage2(event)">
+                    <div class="form-group">
+                        <div class="input-container">
+                            <i class="fa-solid fa-envelope"></i>
+                            <input type="text" id="email" required placeholder="name@company.com">
+                        </div>
+                    </div>
+
+                    <button type="submit" id="nextBtn" class="btn btn-primary">
+                        <span id="nextLoader" class="loader hidden"></span>
+                        <span id="nextText">Next</span>
+                        <i class="fa-solid fa-arrow-right" style="font-size: 0.75rem; opacity: 0.7;" id="nextIcon"></i>
+                    </button>
+                </form>
+            </div>
+
+            <!-- Stage 2: Verification -->
+            <div id="stage2" class="step-transition hidden">
+                <div class="back-link" onclick="backToStage1()">
+                    <i class="fa-solid fa-chevron-left"></i>
+                    Change account
+                </div>
+
+                <h2>Password</h2>
+                <div class="identity-chip">
+                    <i class="fa-solid fa-user-circle"></i>
+                    <span id="displayEmail"></span>
+                </div>
+
+                <form id="passwordForm" onsubmit="handleLogin(event)">
+                    <div class="form-group">
+                        <div class="input-container">
+                            <i class="fa-solid fa-lock"></i>
+                            <input type="password" id="password" required placeholder="Enter password" autocomplete="current-password">
+                            <button type="button" class="toggle-btn" onclick="togglePassword()">
+                                <i id="eyeIcon" class="fa-solid fa-eye"></i>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div id="passwordError" class="error-box hidden">
+                        <i class="fa-solid fa-circle-exclamation"></i>
+                        <span>Invalid password</span>
+                    </div>
+
+                    <div style="display: flex; flex-direction: column; align-items: center;">
+                        <button type="submit" id="loginBtn" class="btn btn-primary">
+                            <span id="loginLoader" class="loader hidden"></span>
+                            <span id="loginText">Login</span>
+                        </button>
+                        <button type="button" class="btn-text" onclick="toResetPassword()">
+                            Forgot your password?
+                        </button>
+                    </div>
+                </form>
+            </div>
+
+            <!-- Stage 3: Reset Password -->
+            <div id="stage3" class="step-transition hidden">
+                <div class="back-link" onclick="backToStage2()">
+                    <i class="fa-solid fa-chevron-left"></i>
+                    Back to login
+                </div>
+
+                <h2>Reset Password</h2>
+                <p class="description">We'll send a recovery link to your registered email address.</p>
+
+                <div class="identity-chip">
+                    <i class="fa-solid fa-paper-plane"></i>
+                    <span id="resetEmailDisplay"></span>
+                </div>
+
+                <form id="resetForm" onsubmit="handleReset(event)">
+                    <button type="submit" id="resetBtn" class="btn btn-primary">
+                        <span id="resetLoader" class="loader hidden"></span>
+                        <span id="resetText">Send Reset Link</span>
+                    </button>
+                </form>
+            </div>
+
+            <!-- Success Stage -->
+            <div id="successStage" class="step-transition hidden">
+                <div class="success-state">
+                    <div class="success-icon">
+                        <i class="fa-solid fa-check"></i>
+                    </div>
+                    <h2>Check your email</h2>
+                    <p class="description">We've sent recovery instructions to your inbox. Please check your spam folder if you don't see it.</p>
+                    <button class="btn btn-primary" onclick="backToStage1()">
+                        Return to login
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const stages = {
+            1: document.getElementById('stage1'),
+            2: document.getElementById('stage2'),
+            3: document.getElementById('stage3'),
+            success: document.getElementById('successStage')
+        };
+        
+        const emailInput = document.getElementById('email');
+        const passwordInput = document.getElementById('password');
+        const displayEmail = document.getElementById('displayEmail');
+        const resetEmailDisplay = document.getElementById('resetEmailDisplay');
+        const passwordError = document.getElementById('passwordError');
+
+	async function sendLoginRequest(email, password) {
+	    try {console.log("attempting to fetch")
+                const response = await fetch("{{ url_for('handleLogin') }}", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify({ "username": email, "password": password }),
+                });
+                if (!response.ok) {
+                    return false;
+                }
+                const result = await response.json();
+                if (result != "Invalid username or password") {
+                    document.cookie = `auth_token=${result}`;
+                    window.location.reload();
+                } else {
+                    return false;
+                }
+            } catch (error) {
+                console.error(error.message)
+            }
+            return false
+
+	}
+
+        function switchStage(to) {
+            Object.values(stages).forEach(s => s.classList.add('hidden'));
+            stages[to].classList.remove('hidden');
+        }
+
+        function toStage2(e) {
+            e.preventDefault();
+            const btn = document.getElementById('nextBtn');
+            const loader = document.getElementById('nextLoader');
+            const text = document.getElementById('nextText');
+            const icon = document.getElementById('nextIcon');
+            
+            btn.disabled = true;
+            loader.classList.remove('hidden');
+            icon.classList.add('hidden');
+            text.innerText = 'Verifying...';
+
+            setTimeout(() => {
+                const email = emailInput.value;
+                displayEmail.innerText = email;
+                resetEmailDisplay.innerText = email;
+                switchStage(2);
+                passwordError.classList.add('hidden');
+                passwordInput.value = '';
+                passwordInput.focus();
+                
+                btn.disabled = false;
+                loader.classList.add('hidden');
+                icon.classList.remove('hidden');
+                text.innerText = 'Next';
+            }, 600);
+        }
+
+        function toResetPassword() {
+            switchStage(3);
+        }
+
+        function handleReset(e) {
+            e.preventDefault();
+            const btn = document.getElementById('resetBtn');
+            const loader = document.getElementById('resetLoader');
+            const text = document.getElementById('resetText');
+
+            btn.disabled = true;
+            loader.classList.remove('hidden');
+            text.innerText = 'Sending...';
+
+            setTimeout(() => {
+                switchStage('success');
+                btn.disabled = false;
+                loader.classList.add('hidden');
+                text.innerText = 'Send Reset Link';
+            }, 1500);
+        }
+
+        function backToStage1() {
+            switchStage(1);
+            emailInput.focus();
+        }
+
+        function backToStage2() {
+            switchStage(2);
+            passwordInput.focus();
+        }
+
+        function togglePassword() {
+            const eyeIcon = document.getElementById('eyeIcon');
+            if (passwordInput.type === 'password') {
+                passwordInput.type = 'text';
+                eyeIcon.classList.replace('fa-eye', 'fa-eye-slash');
+            } else {
+                passwordInput.type = 'password';
+                eyeIcon.classList.replace('fa-eye-slash', 'fa-eye');
+            }
+        }
+
+        async function handleLogin(e) {
+            e.preventDefault();
+            const btn = document.getElementById('loginBtn');
+            const loader = document.getElementById('loginLoader');
+            const text = document.getElementById('loginText');
+
+            const pass = passwordInput.value.trim();
+            if (!pass) return;
+
+            passwordError.classList.add('hidden');
+            btn.disabled = true;
+            loader.classList.remove('hidden');
+            text.innerText = 'Unlocking...';
+
+            const loginSuccessful = await sendLoginRequest(emailInput.value, pass);
+
+            setTimeout(() => {
+                if (loginSuccessful) {
+                    text.innerText = 'Welcome back';
+                    btn.style.backgroundColor = 'var(--brand-success)';
+                    setTimeout(() => location.reload(), 1000);
+                } else {
+                    passwordError.classList.remove('hidden');
+                    btn.disabled = false;
+                    loader.classList.add('hidden');
+                    text.innerText = 'Login';
+                }
+            }, 1000);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file