diff --git a/.github/workflows/agdb_studio.yaml b/.github/workflows/agdb_studio.yaml
index e0fdb2259..0e1652361 100644
--- a/.github/workflows/agdb_studio.yaml
+++ b/.github/workflows/agdb_studio.yaml
@@ -40,7 +40,11 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - run: npm ci
-      - run: npm run test:unit
+        working-directory: agdb_api/typescript
+      - run: npm run build
+        working-directory: agdb_api/typescript
+      - run: npm ci
+      - run: npm run test
       - uses: actions/upload-artifact@v4
         if: always()
         with:
@@ -57,6 +61,10 @@ jobs:
         working-directory: agdb_studio
     steps:
       - uses: actions/checkout@v4
+      - run: npm ci
+        working-directory: agdb_api/typescript
+      - run: npm run build
+        working-directory: agdb_api/typescript
       - run: npm ci
       - run: npx playwright install --with-deps
       - run: npm run build
diff --git a/.vscode/terminals.json b/.vscode/terminals.json
index bd0da09a8..dfec5988f 100644
--- a/.vscode/terminals.json
+++ b/.vscode/terminals.json
@@ -22,6 +22,27 @@
             "open": true,
             "focus": false,
             "commands": ["cd agdb_web"]
+        },
+        {
+            "name": "studio SERVER",
+            "description": "For running web studio server",
+            "open": true,
+            "focus": false,
+            "commands": ["cd agdb_studio", "npm run dev"]
+        },
+        {
+            "name": "studio SCRIPTS",
+            "description": "For running studio scripts",
+            "open": true,
+            "focus": false,
+            "commands": ["cd agdb_studio"]
+        },
+        {
+            "name": "api SCRIPTS",
+            "description": "For running api/typescript scripts",
+            "open": true,
+            "focus": false,
+            "commands": ["cd agdb_api/typescript"]
         }
     ]
 }
diff --git a/agdb_api/typescript/src/client.ts b/agdb_api/typescript/src/client.ts
index 10095aad4..f61571287 100644
--- a/agdb_api/typescript/src/client.ts
+++ b/agdb_api/typescript/src/client.ts
@@ -1,12 +1,13 @@
-import { OpenAPIClientAxios } from "openapi-client-axios";
+import { AxiosRequestConfig, OpenAPIClientAxios } from "openapi-client-axios";
 import type { Client } from "./openapi";
 
 type AgdbApi = {
-    token: string;
+    token: string | undefined;
     login: (username: string, password: string) => Promise<string>; // eslint-disable-line no-unused-vars
     logout: () => Promise<void>;
-    get_token: () => string;
+    get_token: () => string | undefined;
     set_token: (token: string) => void; // eslint-disable-line no-unused-vars
+    reset_token: () => void;
 };
 
 async function login(username: string, password: string): Promise<string> {
@@ -19,26 +20,30 @@ async function login(username: string, password: string): Promise<string> {
     return token.data;
 }
 
-function get_token(): string {
+function get_token(): string | undefined {
     return this.token;
 }
 
 async function logout(): Promise<void> {
     await this.user_logout();
-    this.token = "";
-    this.interceptors.request.use((config) => {
-        return config;
-    });
+    this.reset_token();
 }
 
-function set_token(token: string) {
+function set_token(token: string): void {
     this.token = token;
-    this.interceptors.request.use((config) => {
+    this.interceptors.request.use((config: AxiosRequestConfig) => {
         config.headers.Authorization = `Bearer ${token}`;
         return config;
     });
 }
 
+function reset_token(): void {
+    this.token = undefined;
+    this.interceptors.request.use((config: AxiosRequestConfig) => {
+        return config;
+    });
+}
+
 export type AgdbApiClient = Client & AgdbApi;
 
 export async function client(address: String): Promise<AgdbApiClient> {
@@ -51,5 +56,6 @@ export async function client(address: String): Promise<AgdbApiClient> {
     client.logout = logout;
     client.set_token = set_token;
     client.get_token = get_token;
+    client.reset_token = reset_token;
     return client;
 }
diff --git a/agdb_api/typescript/tests/api.test.ts b/agdb_api/typescript/tests/api.test.ts
index 18c2b965b..08ddedf64 100644
--- a/agdb_api/typescript/tests/api.test.ts
+++ b/agdb_api/typescript/tests/api.test.ts
@@ -19,7 +19,7 @@ describe("openapi test", () => {
         let client = await AgdbApi.client("http://localhost:3000");
         await client.login("admin", "admin");
         await client.logout();
-        expect(client.get_token()).toEqual("");
+        expect(client.get_token()).toEqual(undefined);
 
         await expect(client.db_list()).rejects.toThrowError(
             "Request failed with status code 401",
diff --git a/agdb_studio/README.md b/agdb_studio/README.md
index a323eb896..6e6817cd4 100644
--- a/agdb_studio/README.md
+++ b/agdb_studio/README.md
@@ -42,7 +42,7 @@ npm run build
 ### Run Unit Tests with [Vitest](https://vitest.dev/)
 
 ```sh
-npm run test:unit
+npm run test
 ```
 
 ### Run End-to-End Tests with [Playwright](https://playwright.dev)
diff --git a/agdb_studio/e2e/vue.spec.ts b/agdb_studio/e2e/vue.spec.ts
index 0a5c3c62c..9a54f1f8d 100644
--- a/agdb_studio/e2e/vue.spec.ts
+++ b/agdb_studio/e2e/vue.spec.ts
@@ -3,6 +3,6 @@ import { test, expect } from "@playwright/test";
 // See here how to get started:
 // https://playwright.dev/docs/intro
 test("visits the app root url", async ({ page }) => {
-    await page.goto("/");
-    await expect(page.locator("div.main-wrapper")).toBeVisible();
+    await page.goto("/login");
+    await expect(page.locator("div.login-form")).toBeVisible();
 });
diff --git a/agdb_studio/package-lock.json b/agdb_studio/package-lock.json
index 76e345d26..61c815f90 100644
--- a/agdb_studio/package-lock.json
+++ b/agdb_studio/package-lock.json
@@ -8,6 +8,8 @@
             "name": "agdb_studio",
             "version": "0.0.0",
             "dependencies": {
+                "@kalimahapps/vue-icons": "^1.7.1",
+                "agdb_api": "file:../agdb_api/typescript",
                 "openapi-client-axios": "^7.5.1",
                 "pinia": "^2.1.7",
                 "vue": "^3.3.4",
@@ -38,6 +40,30 @@
                 "vue-tsc": "^2.0.28"
             }
         },
+        "../../agdb_api/typescript": {
+            "extraneous": true
+        },
+        "../agdb_api/typescript": {
+            "name": "@agnesoft/agdb_api",
+            "version": "0.9.0",
+            "license": "Apache-2.0",
+            "dependencies": {
+                "openapi-client-axios": "^7.5.5"
+            },
+            "devDependencies": {
+                "@rushstack/eslint-patch": "^1.10.3",
+                "@types/node": "^20.14.10",
+                "@typescript-eslint/parser": "^7.16.0",
+                "@vitest/coverage-v8": "^2.0.2",
+                "copyfiles": "^2.4.1",
+                "eslint": "^8.56.0",
+                "openapicmd": "^2.4.0",
+                "prettier": "^3.3.3",
+                "typescript": "^5.5.3",
+                "vite": "^5.3.3",
+                "vitest": "^2.0.2"
+            }
+        },
         "node_modules/@ampproject/remapping": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -752,6 +778,20 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@kalimahapps/vue-icons": {
+            "version": "1.7.1",
+            "resolved": "https://registry.npmjs.org/@kalimahapps/vue-icons/-/vue-icons-1.7.1.tgz",
+            "integrity": "sha512-PXMiVTPOZ0LTU8DuIIcuOc1FyC9I9e2SMz9XUzByZZEPN8ruDCdNw2fyVCH8rcNpVSrlMlfqDT7di7tPZgH8XA==",
+            "dependencies": {
+                "svg-parser": "^2.0.4"
+            },
+            "engines": {
+                "node": ">=14.16"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.0"
+            }
+        },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1713,6 +1753,10 @@
                 "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
             }
         },
+        "node_modules/agdb_api": {
+            "resolved": "../agdb_api/typescript",
+            "link": true
+        },
         "node_modules/agent-base": {
             "version": "7.1.1",
             "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
@@ -4714,6 +4758,11 @@
                 "node": ">=8"
             }
         },
+        "node_modules/svg-parser": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+            "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
+        },
         "node_modules/symbol-tree": {
             "version": "3.2.4",
             "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/agdb_studio/package.json b/agdb_studio/package.json
index 748bbf4bb..3737b09b2 100644
--- a/agdb_studio/package.json
+++ b/agdb_studio/package.json
@@ -6,16 +6,18 @@
         "dev": "vite",
         "build": "run-p type-check \"build-only {@}\" --",
         "preview": "vite preview",
-        "test:unit": "vitest run --coverage",
+        "test": "vitest run --coverage",
         "test:e2e": "playwright test",
         "build-only": "vite build",
         "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
         "lint": "eslint --max-warnings=0 . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
         "format": "prettier --write src/ e2e/ tests/",
         "format:check": "prettier --check src/ e2e/ tests/",
-        "before-commit": "npm run format && npm run lint && npm run test:unit && npm run test:e2e"
+        "before-commit": "npm run format && npm run lint && npm run test && npm run test:e2e"
     },
     "dependencies": {
+        "@kalimahapps/vue-icons": "^1.7.1",
+        "agdb_api": "file:../agdb_api/typescript",
         "openapi-client-axios": "^7.5.1",
         "pinia": "^2.1.7",
         "vue": "^3.3.4",
diff --git a/agdb_studio/playwright.config.ts b/agdb_studio/playwright.config.ts
index 86c497660..bf1ffcb37 100644
--- a/agdb_studio/playwright.config.ts
+++ b/agdb_studio/playwright.config.ts
@@ -53,32 +53,32 @@ const config: PlaywrightTestConfig = {
                 ...devices["Desktop Chrome"],
             },
         },
-        {
-            name: "firefox",
-            use: {
-                ...devices["Desktop Firefox"],
-            },
-        },
-        {
-            name: "webkit",
-            use: {
-                ...devices["Desktop Safari"],
-            },
-        },
+        // {
+        //     name: "firefox",
+        //     use: {
+        //         ...devices["Desktop Firefox"],
+        //     },
+        // },
+        // {
+        //     name: "webkit",
+        //     use: {
+        //         ...devices["Desktop Safari"],
+        //     },
+        // },
 
-        /* Test against mobile viewports. */
-        {
-            name: "Mobile Chrome",
-            use: {
-                ...devices["Pixel 5"],
-            },
-        },
-        {
-            name: "Mobile Safari",
-            use: {
-                ...devices["iPhone 12"],
-            },
-        },
+        // /* Test against mobile viewports. */
+        // {
+        //     name: "Mobile Chrome",
+        //     use: {
+        //         ...devices["Pixel 5"],
+        //     },
+        // },
+        // {
+        //     name: "Mobile Safari",
+        //     use: {
+        //         ...devices["iPhone 12"],
+        //     },
+        // },
 
         /* Test against branded browsers. */
         // {
diff --git a/agdb_studio/src/assets/button.less b/agdb_studio/src/assets/button.less
index 9d5ac0ea8..9d4ad70a6 100644
--- a/agdb_studio/src/assets/button.less
+++ b/agdb_studio/src/assets/button.less
@@ -20,8 +20,8 @@
 }
 
 .button-warning {
-    background-color: #ffc107;
-    color: #212529;
+    background-color: #ff9f2c;
+    color: #181818;
 }
 
 .button-danger {
diff --git a/agdb_studio/src/components/auth/LoginForm.vue b/agdb_studio/src/components/auth/LoginForm.vue
index 18ac6bf93..01159ffe3 100644
--- a/agdb_studio/src/components/auth/LoginForm.vue
+++ b/agdb_studio/src/components/auth/LoginForm.vue
@@ -1,17 +1,37 @@
 <script lang="ts" setup>
 import { ref } from "vue";
+import { login } from "@/services/auth.service";
+import { CgSpinnerTwo } from "@kalimahapps/vue-icons";
+import router from "@/router";
 
 const username = ref("");
 const password = ref("");
 
-const login = async () => {
-    // todo - handle login
+const loading = ref(false);
+const error = ref("");
+
+const clearError = () => {
+    error.value = "";
+};
+
+const onLogin = async () => {
+    loading.value = true;
+    clearError();
+    login(username.value, password.value)
+        .then(() => {
+            loading.value = false;
+            router.push({ name: "home" });
+        })
+        .catch((e) => {
+            loading.value = false;
+            error.value = e.message;
+        });
 };
 </script>
 
 <template>
     <div class="base-form login-form">
-        <form @submit.prevent="login">
+        <form @submit.prevent="onLogin">
             <div>
                 <label for="username">Username:</label>
                 <input type="text" id="username" v-model="username" required />
@@ -25,7 +45,10 @@ const login = async () => {
                     required
                 />
             </div>
-            <button type="submit" class="button button-success">Login</button>
+            <button type="submit" class="button button-success">
+                <CgSpinnerTwo v-if="loading" />
+                Login
+            </button>
         </form>
     </div>
 </template>
@@ -38,5 +61,8 @@ const login = async () => {
         font-size: 1.2rem;
         margin-top: 0.6rem;
     }
+    input {
+        border-radius: 0.2rem;
+    }
 }
 </style>
diff --git a/agdb_studio/src/layouts/MainLayout.vue b/agdb_studio/src/layouts/MainLayout.vue
index 23ca2843a..a2289ee5b 100644
--- a/agdb_studio/src/layouts/MainLayout.vue
+++ b/agdb_studio/src/layouts/MainLayout.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { RouterLink, RouterView } from "vue-router";
+import { logout } from "@/services/auth.service";
 </script>
 
 <template>
@@ -9,8 +10,8 @@ import { RouterLink, RouterView } from "vue-router";
                 alt="agdb logo"
                 class="logo"
                 src="@/assets/logo.svg"
-                width="125"
-                height="125"
+                width="100"
+                height="100"
             />
 
             <div class="wrapper">
@@ -18,6 +19,9 @@ import { RouterLink, RouterView } from "vue-router";
                     <RouterLink to="/">Home</RouterLink>
                     <RouterLink to="/about">About</RouterLink>
                 </nav>
+                <button class="button button-warning" @click="logout">
+                    Logout
+                </button>
             </div>
         </header>
         <main>
@@ -54,12 +58,14 @@ footer {
 }
 
 .logo {
+    --logo-size: 100px;
     display: block;
     margin: 0 auto 2rem;
+    width: var(--logo-size);
+    height: var(--logo-size);
 }
 
 nav {
-    width: 100%;
     font-size: 12px;
     text-align: center;
     margin-top: 2rem;
@@ -91,13 +97,18 @@ nav a:first-of-type {
     }
 
     .logo {
-        margin: 0 2rem 0 0;
+        --logo-size: 75px;
+        margin: 0 2rem 0 1rem;
     }
 
     header .wrapper {
         display: flex;
         place-items: flex-start;
         flex-wrap: wrap;
+
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
     }
 
     nav {
@@ -106,7 +117,7 @@ nav a:first-of-type {
         font-size: 1rem;
 
         padding: 1rem 0;
-        margin-top: 1rem;
+        margin-top: 0;
     }
 }
 </style>
diff --git a/agdb_studio/src/router/index.ts b/agdb_studio/src/router/index.ts
index 4e0c9c0eb..2c0e1d268 100644
--- a/agdb_studio/src/router/index.ts
+++ b/agdb_studio/src/router/index.ts
@@ -1,35 +1,25 @@
 import { createRouter, createWebHistory } from "vue-router";
-import MainLayout from "@/layouts/MainLayout.vue";
-
-const routes = [
-    {
-        path: "/login",
-        name: "login",
-        component: () => import("@/views/LoginView.vue"),
-    },
-    {
-        path: "",
-        component: MainLayout,
-        children: [
-            {
-                path: "",
-                name: "home",
-                component: () => import("@/views/HomeView.vue"),
-            },
-            {
-                path: "/about",
-                name: "about",
-                component: () => import("@/views/AboutView.vue"),
-            },
-        ],
-    },
-];
+import { createRoutes } from "./routes";
+import { isLoggedIn, logout } from "@/services/auth.service";
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
-    routes,
+    routes: createRoutes(),
 });
 
-export { routes };
+router.beforeEach((to, from, next) => {
+    if (isLoggedIn()) {
+        if (to.name === "login") {
+            logout();
+        }
+        next();
+    } else {
+        if (to.name !== "login") {
+            next({ name: "login" });
+        } else {
+            next();
+        }
+    }
+});
 
 export default router;
diff --git a/agdb_studio/src/router/routes.ts b/agdb_studio/src/router/routes.ts
new file mode 100644
index 000000000..79be8ef15
--- /dev/null
+++ b/agdb_studio/src/router/routes.ts
@@ -0,0 +1,27 @@
+import MainLayout from "@/layouts/MainLayout.vue";
+
+export const createRoutes = () => {
+    return [
+        {
+            path: "/login",
+            name: "login",
+            component: () => import("@/views/LoginView.vue"),
+        },
+        {
+            path: "",
+            component: MainLayout,
+            children: [
+                {
+                    path: "",
+                    name: "home",
+                    component: () => import("@/views/HomeView.vue"),
+                },
+                {
+                    path: "/about",
+                    name: "about",
+                    component: () => import("@/views/AboutView.vue"),
+                },
+            ],
+        },
+    ];
+};
diff --git a/agdb_studio/src/services/api.service.ts b/agdb_studio/src/services/api.service.ts
deleted file mode 100644
index 310a7bcbe..000000000
--- a/agdb_studio/src/services/api.service.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { Client } from "../../../agdb_api/typescript/src/openapi";
-import OpenAPIClientAxios from "openapi-client-axios";
-import type { AxiosResponse, InternalAxiosRequestConfig } from "axios";
-
-export class Api {
-    private static api: OpenAPIClientAxios | undefined = undefined;
-    private static c: Client | undefined = undefined;
-    private static token: string = "";
-
-    static async client(): Promise<Client> {
-        if (Api.c === undefined) {
-            Api.api = new OpenAPIClientAxios({
-                definition: `${import.meta.env.VITE_API_URL}/api/v1/openapi.json`,
-            });
-
-            Api.c = await Api.api.init<Client>();
-            Api.c.interceptors.request.use(
-                (config: InternalAxiosRequestConfig) => {
-                    if (Api.token !== "") {
-                        config.headers.Authorization = `Bearer ${Api.token}`;
-                    }
-                    return config;
-                },
-            );
-            Api.c.interceptors.response.use(
-                (response: AxiosResponse) => {
-                    return response.data;
-                },
-                (error: any) => {
-                    if (!error.response) {
-                        return Promise.reject(error);
-                    }
-                    if (error.response.status === 401) {
-                        // TODO: logout
-                        return Promise.reject(error);
-                    }
-                    if (error.response.status === 302) {
-                        // TODO: handle redirect
-                        return Promise.reject(error);
-                    }
-                    if (error.response.status === 404) {
-                        // TODO: redirect to 404 page
-                        return Promise.reject(error);
-                    }
-                    if (error.response.status === 500) {
-                        return Promise.reject(error);
-                    }
-                    const data = error.response.data;
-                    const errorData: string =
-                        (data && data.message) || "Unknown error";
-                    return Promise.reject(errorData);
-                },
-            );
-        }
-
-        return Api.c as Client;
-    }
-
-    static setToken(token: string) {
-        Api.token = token;
-    }
-}
diff --git a/agdb_studio/src/services/auth.service.ts b/agdb_studio/src/services/auth.service.ts
new file mode 100644
index 000000000..97689f508
--- /dev/null
+++ b/agdb_studio/src/services/auth.service.ts
@@ -0,0 +1,79 @@
+import { AgdbApi } from "agdb_api";
+import type { AxiosError } from "axios";
+
+const ACCESS_TOKEN = "studio_token";
+
+let client: AgdbApi.AgdbApiClient | undefined;
+
+export const getClient = (): AgdbApi.AgdbApiClient | undefined => {
+    return client;
+};
+
+const getLocalStorageToken = (): string | undefined => {
+    const token = localStorage.getItem(ACCESS_TOKEN) ?? undefined;
+    if (token) {
+        client?.set_token(token);
+    }
+    return token;
+};
+
+const setLocalStorageToken = (token: string): void => {
+    localStorage.setItem(ACCESS_TOKEN, token);
+};
+
+const getToken = (): string | undefined => {
+    let token = client?.get_token();
+    if (!token) {
+        token = getLocalStorageToken();
+    }
+    return token;
+};
+
+const removeToken = (): void => {
+    client?.reset_token();
+    localStorage.removeItem(ACCESS_TOKEN);
+    location.reload();
+};
+
+export const isLoggedIn = (): boolean => {
+    return getToken() !== undefined;
+};
+
+export const login = async (
+    username: string,
+    password: string,
+): Promise<string | undefined> => {
+    return client?.login(username, password).then((token) => {
+        setLocalStorageToken(token);
+        return token;
+    });
+};
+
+export const logout = async (): Promise<void> => {
+    if (!isLoggedIn()) {
+        return;
+    }
+    await client?.logout();
+    removeToken();
+};
+
+const initClient = async () => {
+    client = await AgdbApi.client("http://localhost:3000").catch(
+        (error: AxiosError) => {
+            console.error(error.message);
+            return undefined;
+        },
+    );
+
+    client?.interceptors.response.use(
+        (response) => response,
+        (error: AxiosError) => {
+            console.error(error.message);
+            if (error.response?.status === 401) {
+                removeToken();
+            }
+            return Promise.reject(error);
+        },
+    );
+};
+await initClient();
diff --git a/agdb_studio/tests/router/router.test.ts b/agdb_studio/tests/router/router.test.ts
index 90c2350da..94934641e 100644
--- a/agdb_studio/tests/router/router.test.ts
+++ b/agdb_studio/tests/router/router.test.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach } from "vitest";
 import { createRouter, createWebHistory } from "vue-router";
 import { mount } from "@vue/test-utils";
-import { routes } from "@/router/index";
+import { createRoutes } from "@/router/routes";
 import type { Router } from "vue-router";
 import HomeView from "@/views/HomeView.vue";
 import AboutView from "@/views/HomeView.vue";
@@ -13,7 +13,7 @@ describe("router", () => {
     beforeEach(async () => {
         router = createRouter({
             history: createWebHistory(),
-            routes,
+            routes: createRoutes(),
         });
 
         router.push("/");
diff --git a/agdb_studio/vite.config.ts b/agdb_studio/vite.config.ts
index 4695fa8f5..12a8222a8 100644
--- a/agdb_studio/vite.config.ts
+++ b/agdb_studio/vite.config.ts
@@ -11,7 +11,9 @@ export default defineConfig({
             "@": fileURLToPath(new URL("./src", import.meta.url)),
         },
     },
-    build: {
-        target: ["es2015", "edge88", "firefox78", "chrome87", "safari12"],
+    esbuild: {
+        supported: {
+            "top-level-await": true,
+        },
     },
 });