diff --git a/.gitignore b/.gitignore
index 0b1157f..908441e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,9 +3,12 @@ node_modules/
 
 # Build output
 dist/
-src/assets/
+src/web/assets/
 
 # Editor / OS
 .vscode/
 .idea/
-.DS_Store
\ No newline at end of file
+.DS_Store
+
+*.log
+*.egg-info/
diff --git a/makefile b/makefile
new file mode 100644
index 0000000..96d70fa
--- /dev/null
+++ b/makefile
@@ -0,0 +1,95 @@
+.PHONY: all build clean
+
+all: build
+
+TEMP_DIR = build
+
+PYPROJECT = pyproject.toml
+
+
+BUILD_DIR = modular_server_manager_web_client/
+WEB_BUILD_DIR = $(BUILD_DIR)client
+
+PYTHON_PATH = $(shell if [ -d env/bin ]; then echo "env/bin/"; elif [ -d env/Scripts ]; then echo "env/Scripts/"; else echo ""; fi)
+PYTHON_LIB = $(shell find env/lib -type d -name "site-packages" | head -n 1; if [ -d env/Lib/site-packages ]; then echo "env/Lib/site-packages/"; fi)
+PYTHON = $(PYTHON_PATH)python
+
+EXECUTABLE_EXTENSION = $(shell if [ -d env/bin ]; then echo ""; elif [ -d env/Scripts ]; then echo ".exe"; else echo ""; fi)
+APP_EXECUTABLE = $(PYTHON_PATH)modular-server-manager$(EXECUTABLE_EXTENSION)
+
+INSTAL_PATH = $(PYTHON_LIB)/modular_server_manager_web_client
+
+# if not defined, get the version from git
+VERSION ?= $(shell $(PYTHON) get_version.py)
+
+# if version is in the form of x.y.z-dev-aaaa or x.y.z-dev+aaaa, set it to x.y.z-dev
+VERSION_STR = $(shell echo $(VERSION) | sed "s/-dev-[a-z0-9]*//; s/-dev+.*//")
+
+WHEEL = modular_server_manager_web_client-$(VERSION_STR)-py3-none-any.whl
+ARCHIVE = modular_server_manager_web_client-$(VERSION_STR).tar.gz
+
+# SRV_SRC_DIR = src/server/
+# SRV_SRC = $(shell find $(SRV_SRC_DIR) -type f -name "*.py") $(SRV_SRC_DIR)compatibility.json
+# SRV_DIST = $(patsubst $(SRV_SRC_DIR)%,$(BUILD_DIR)%,$(SRV_SRC))
+
+WEB_SRC_DIR = src/
+WEB_SRC = $(shell find $(WEB_SRC_DIR) -type f -name "*.html" -o -name "*.scss" -o -name "*.ts")
+WEB_DIST = $(WEB_BUILD_DIR)/index.html $(WEB_BUILD_DIR)/assets/css/main.css $(WEB_BUILD_DIR)/assets/app.js
+
+
+print-%:
+	@echo $* = $($*)
+
+dist:
+	mkdir -p dist
+
+# dist/$(WHEEL): $(WEB_DIST) # $(SRV_DIST) $(PYPROJECT) $(PYTHON_LIB)/build dist
+# 	mkdir -p $(TEMP_DIR)
+# 	$(PYTHON) -m build --outdir $(TEMP_DIR) --wheel
+# 	mkdir -p dist
+# 	mv $(TEMP_DIR)/*.whl dist/$(WHEEL)
+# 	rm -rf $(TEMP_DIR)
+# 	@echo "Building wheel package complete."
+
+# dist/$(ARCHIVE): $(WEB_DIST) # $(SRV_DIST) $(PYPROJECT) $(PYTHON_LIB)/build dist
+# 	mkdir -p $(TEMP_DIR)
+# 	$(PYTHON) build_package.py --outdir $(TEMP_DIR) --sdist --version $(VERSION_STR)
+# 	mkdir -p dist
+# 	mv $(TEMP_DIR)/*.tar.gz dist/$(ARCHIVE)
+# 	rm -rf $(TEMP_DIR)
+# 	@echo "Building archive package complete."
+
+$(WEB_DIST): $(WEB_SRC)
+	npm run build
+
+$(BUILD_DIR)%: $(SRV_SRC_DIR)%
+	@mkdir -p $(@D)
+	@echo "Copying $< to $@"
+	@cp $< $@
+
+
+$(INSTAL_PATH) : dist/$(WHEEL)
+	@echo "Installing package..."
+	@$(PYTHON) -m pip install --upgrade --force-reinstall dist/$(WHEEL)
+	@echo "Package installed."
+
+
+web: $(WEB_DIST)
+
+
+build: dist/$(WHEEL) dist/$(ARCHIVE)
+
+install: $(INSTAL_PATH)
+
+start: install
+	@$(APP_EXECUTABLE) \
+		-c /var/minecraft/config.json \
+		--log-file server.trace.log:TRACE \
+		--log-file server.debug.log:DEBUG
+
+
+clean:
+	rm -rf $(BUILD_DIR)
+	rm -rf dist
+	rm -rf $(PYTHON_LIB)/modular_server_manager_web_client
+	rm -rf $(PYTHON_LIB)/modular_server_manager_web_client-*.dist-info
diff --git a/modular_server_manager_web_client/client/assets/app.js b/modular_server_manager_web_client/client/assets/app.js
new file mode 100644
index 0000000..5aecf48
--- /dev/null
+++ b/modular_server_manager_web_client/client/assets/app.js
@@ -0,0 +1,35 @@
+"use strict";(()=>{var s=class{static set(e,t,r){let o=new Date;o.setTime(o.getTime()+r*60*60*1e3);let a="expires="+o.toUTCString();document.cookie=e+"="+t+";"+a+";path=/"}static get(e){let t=e+"=",r=document.cookie.split(";");for(let o=0;o<r.length;o++){let a=r[o];for(;a.charAt(0)===" ";)a=a.substring(1,a.length);if(a.indexOf(t)===0)return a.substring(t.length,a.length)}return null}static erase(e){document.cookie=e+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"}static has(e){return this.get(e)!==null}};function g(n){switch(n.toLowerCase()){case"user":return 0;case"admin":return 1;case"operator":return 2;default:throw new Error(`Unknown access level: ${n}`)}}var c=class n{static async get(e,t){let r=s.get("token");if(!r)throw new Error("No token found in cookies");let o=await fetch(e+"?"+new URLSearchParams(t),{method:"GET",headers:{"Content-Type":"application/json",Authorization:"Bearer "+r}});return{data:await o.json(),status:o.status}}static async post(e,t){let r=s.get("token");if(!r)throw new Error("No token found in cookies");let o=await fetch(e,{method:"POST",headers:{"Content-Type":"application/json",Authorization:"Bearer "+r},body:JSON.stringify(t)});return{data:await o.json(),status:o.status}}static async get_noauth(e,t){let r=await fetch(e+"?"+new URLSearchParams(t),{method:"GET",headers:{"Content-Type":"application/json"}});return{data:await r.json(),status:r.status}}static async post_noauth(e,t){let r=await fetch(e,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)});return{data:await r.json(),status:r.status}}static async register(e,t,r){let{data:o,status:a}=await n.post_noauth("/api/register",{username:e,password:t,remember:r});if(a===201){let{token:i}=o;return s.set("token",i,1),!0}else{if(a===500)throw console.error("Error registering user:",o.message),new Error("Error registering user");return!1}}static async login(e,t,r){let{data:o,status:a}=await n.post_noauth("/api/login",{username:e,password:t,remember:r});if(a===200){let{token:i}=o;return s.set("token",i,1),!0}else{if(a===500)throw console.error("Error logging in user:",o.message),new Error("Error logging in user");return!1}}static async logout(){if(!s.has("token"))return console.error("No token found in cookies"),!1;let{data:e,status:t}=await n.post("/api/logout",{});if(s.erase("token"),t===200)return!0;if(t===500)throw console.error("Error logging out user:",e.message),new Error("Error logging out user");return!1}static async change_password(e){if(!s.has("token"))return console.error("No token found in cookies"),!1;let{data:t,status:r}=await n.post("/api/user/update_password",{password:e});if(r===200)return!0;if(r===500)throw console.error("Error changing password:",t.message),new Error("Error changing password");return!1}static async delete_account(){if(!s.has("token"))return console.error("No token found in cookies"),!1;let{data:e,status:t}=await n.post("/api/delete-user",{});if(t===200)return s.erase("token"),!0;if(t===500)throw console.error("Error deleting user:",e.message),new Error("Error deleting user");return!1}static async get_user_info(){if(!s.has("token"))return console.error("No token found in cookies"),null;let{data:e,status:t}=await n.get("/api/user",{});if(t===200)return e.access_level=g(e.access_level),e;if(t===500)throw console.error("Error getting user info:",e.message),new Error("Error getting user info");return null}static async get_server_list(){if(!s.has("token"))return console.error("No token found in cookies"),{};let{data:e,status:t}=await n.get("/api/servers",{});if(t===200)return e;if(t===500)throw console.error("Error getting server list:",e.message),new Error("Error getting server list");return{}}static async get_mc_server_dirs(){if(!s.has("token"))return console.error("No token found in cookies"),[];let{data:e,status:t}=await n.get("/api/list_mc_server_dirs",{});if(t===200)return e.dirs;if(t===500)throw console.error("Error getting Minecraft server directories:",e.message),new Error("Error getting Minecraft server directories");return[]}static async create_server(e){if(!s.has("token"))return console.error("No token found in cookies"),!1;let{data:t,status:r}=await n.post("/api/create_server",e);if(r===201)return!0;if(r===500)throw console.error("Error creating server:",t.message),new Error("Error creating server");return!1}static async get_mc_versions(){if(!s.has("token"))return console.error("No token found in cookies"),[];let{data:e,status:t}=await n.get("/api/mc_versions",{});if(t===200)return e.versions;if(t===500)throw console.error("Error getting Minecraft versions:",e.message),new Error("Error getting Minecraft versions");return[]}static async get_forge_versions(e){if(!s.has("token"))return console.error("No token found in cookies"),[];let{data:t,status:r}=await n.get(`/api/forge_versions/${e}`,{});if(r===200)return t.versions;if(r===500)throw console.error("Error getting Forge versions:",t.message),new Error("Error getting Forge versions");return[]}static async get_server_info(e){if(!s.has("token"))return console.error("No token found in cookies"),null;let{data:t,status:r}=await n.get(`/api/server/${e}`,{});if(r===200)return t;if(r===500)throw console.error("Error getting server info:",t.message),new Error("Error getting server info");return null}static async start_server(e){if(!s.has("token"))return console.error("No token found in cookies"),!1;let{data:t,status:r}=await n.post(`/api/start_server/${e}`,{});if(r===200)return!0;if(r===500)throw console.error("Error starting server:",t.message),new Error("Error starting server");return!1}static async stop_server(e){if(!s.has("token"))return console.error("No token found in cookies"),!1;let{data:t,status:r}=await n.post(`/api/stop_server/${e}`,{});if(r===200)return!0;if(r===500)throw console.error("Error stopping server:",t.message),new Error("Error stopping server");return!1}static async restart_server(e){if(!s.has("token"))return console.error("No token found in cookies"),!1;let{data:t,status:r}=await n.post(`/api/restart_server/${e}`,{});if(r===200)return!0;if(r===500)throw console.error("Error restarting server:",t.message),new Error("Error restarting server");return!1}};var u=class{constructor(){console.log("App initialized");let e=document.querySelector("#app");if(!e)throw new Error("App container not found");this.container=e;let t=document.querySelector("#header");if(!t)throw new Error("Header container not found");this.header=t,this.set_header_content()}start(){this.has_login_token()?(console.log("Found login token, showing dashboard"),this.show_dashboard_window()):(console.log("No login token, showing login window"),this.show_login_window())}has_login_token(){return s.get("token")!==null}clean_window(){this.container.innerHTML=""}show_login_window(){this.hide_header(),this.clean_window();let e=document.createElement("div");e.innerHTML=`
+            <h2>Login</h2>
+            <input type="text" id="username" placeholder="Username" />
+            <input type="password" id="password" placeholder="Password" />
+            <input type="checkbox" id="rememberMe" /> Remember Me
+            <button id="loginBtn">Login</button>
+            <button id="registerBtn">Don't have an account? Register</button>
+        `,this.container.appendChild(e);let t=document.getElementById("loginBtn");t==null||t.addEventListener("click",async()=>{let o=document.getElementById("username").value,a=document.getElementById("password").value,i=document.getElementById("rememberMe").checked;try{await c.login(o,a,i)&&this.show_dashboard_window()}catch(l){alert("Login failed: "+l)}});let r=document.getElementById("registerBtn");r==null||r.addEventListener("click",()=>{this.show_register_window()})}show_register_window(){this.hide_header(),this.clean_window();let e=document.createElement("div");e.innerHTML=`
+            <h2>Register</h2>
+            <input type="text" id="reg_username" placeholder="Username" />
+            <input type="password" id="reg_password" placeholder="Password" />
+            <input type="password" id="reg_confirm_password" placeholder="Confirm Password" />
+            <input type="checkbox" id="reg_rememberMe" /> Remember Me
+            <button id="registerSubmitBtn">Register</button>
+            <button id="backToLoginBtn">Back to Login</button>
+        `,this.container.appendChild(e);let t=document.getElementById("registerSubmitBtn");t==null||t.addEventListener("click",async()=>{let o=document.getElementById("reg_username").value,a=document.getElementById("reg_password").value,i=document.getElementById("reg_confirm_password").value,l=document.getElementById("reg_rememberMe").checked;if(a!==i){alert("Passwords do not match");return}try{await c.register(o,a,l)?this.show_dashboard_window():alert("Registration failed")}catch(d){alert("Registration failed: "+d)}});let r=document.getElementById("backToLoginBtn");r==null||r.addEventListener("click",()=>{this.show_login_window()})}show_dashboard_window(){this.show_header(),c.get_server_list().then(e=>{console.log("Fetched servers:",e),this.clean_window();let t=document.createElement("div");t.innerHTML=`
+                <h2>Dashboard</h2>
+                <div id="server-list">
+                    ${e.map(r=>`
+                        <div class="server-item">
+                            <h3>${r.name}</h3>
+                            <p>Type: ${r.type}</p>
+                            <p>Path: ${r.path}</p>
+                            <p>Autostart: ${r.autostart}</p>
+                            <p>MC Version: ${r.mc_version}</p>
+                            <p>Modloader Version: ${r.modloader_version}</p>
+                            <p>RAM: ${r.ram} MB</p>
+                            <p>Started At: ${r.started_at?r.started_at:"Not started"}</p>
+                        </div>
+                    `).join("")}
+                </div>
+            `,this.container.appendChild(t)})}set_header_content(){this.header.innerHTML=`
+            <h1>Server Management Dashboard</h1>
+            <button id="logoutBtn">Logout</button>
+        `;let e=document.getElementById("logoutBtn");e==null||e.addEventListener("click",()=>{s.erase("token"),this.show_login_window()})}show_header(){this.header.style.display="block"}hide_header(){this.header.style.display="none"}};document.addEventListener("DOMContentLoaded",()=>{new u().start()});})();
diff --git a/modular_server_manager_web_client/client/assets/css/main.css b/modular_server_manager_web_client/client/assets/css/main.css
new file mode 100644
index 0000000..4927d69
--- /dev/null
+++ b/modular_server_manager_web_client/client/assets/css/main.css
@@ -0,0 +1,29 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+  background: linear-gradient(180deg, #0f172a 0%, rgb(6.9473684211, 10.6526315789, 19.4526315789) 100%);
+  color: #e6eef8;
+}
+
+#app {
+  max-width: 900px;
+  margin: 6rem auto;
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 10px;
+  box-shadow: 0 6px 24px rgba(2, 6, 23, 0.6);
+}
+
+h1 {
+  margin: 0 0 0.5rem 0;
+  color: #60a5fa;
+}
+
+p {
+  color: #93c5fd;
+}
diff --git a/modular_server_manager_web_client/client/index.html b/modular_server_manager_web_client/client/index.html
new file mode 100644
index 0000000..9f443f4
--- /dev/null
+++ b/modular_server_manager_web_client/client/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Web Client — TypeScript + SCSS</title>
+    <link rel="stylesheet" href="assets/css/main.css" />
+  </head>
+  <body>
+    <div id="header">
+    </div>
+    <div id="app">
+    </div>
+
+    <!-- esbuild will produce assets/app.js during dev or build -->
+    <script type="module" src="assets/app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index 1ae6991..1b341aa 100644
--- a/package.json
+++ b/package.json
@@ -2,12 +2,12 @@
     "name": "web-client",
     "version": "0.1.0",
     "private": true,
-    "description": "Web client (TypeScript + SCSS + SCSS + HTML) — lightweight build using esbuild and sass",
+    "description": "Web modular_server_manager_web_client/client (TypeScript + SCSS + SCSS + HTML) — lightweight build using esbuild and sass",
     "scripts": {
-        "dev": "concurrently \"esbuild src/main.ts --bundle --outfile=src/assets/app.js --sourcemap --watch\" \"sass src/styles/main.scss src/assets/css/main.css --watch\" \"live-server src --port=3000 --open=./index.html\"",
-        "build": "rimraf dist && mkdir -p dist && sass src/styles/main.scss dist/assets/css/main.css --no-source-map && esbuild src/main.ts --bundle --minify --target=es2017 --outfile=dist/assets/app.js && cpy \"src/*.html\" dist/",
-        "clean": "rimraf dist src/assets",
-        "format": "prettier --write \"src/**/*.{ts,scss,html}\""
+        "dev": "concurrently \"esbuild src/main.ts --bundle --outfile=src/assets/app.js --sourcemap --watch\" \"sass src/styles/main.scss src/assets/css/main.css --watch\" \"live-server src/web --port=3000 --open=./index.html\"",
+        "build": "rimraf modular_server_manager_web_client/client && mkdir -p modular_server_manager_web_client/client && sass src/styles/main.scss modular_server_manager_web_client/client/assets/css/main.css --no-source-map && esbuild src/main.ts --bundle --minify --target=es2017 --outfile=modular_server_manager_web_client/client/assets/app.js && cpy \"src/*.html\" modular_server_manager_web_client/client/",
+        "clean": "rimraf modular_server_manager_web_client/client src/assets",
+        "format": "prettier --write \"src/web**/*.{ts,scss,html}\""
     },
     "devDependencies": {
         "esbuild": "^0.19.0",
diff --git a/tsconfig.json b/tsconfig.json
index 3e6485c..22dc358 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,6 @@
     "resolveJsonModule": true,
     "lib": ["ES2019", "DOM"]
   },
-  "include": ["src/**/*"],
+  "include": ["src/web/**/*"],
   "exclude": ["node_modules", "dist"]
 }
\ No newline at end of file