diff --git a/.github/workflows/build_test.yml b/.github/workflows/build_test.yml
index 3dfc2f53..d1eb9b62 100644
--- a/.github/workflows/build_test.yml
+++ b/.github/workflows/build_test.yml
@@ -1000,7 +1000,7 @@ jobs:
       -
         name: Install hanami
         run: |
-          helm install --set docker.tag="${{ env.BRANCH_NAME }}" --set user.id=asdf --set user.name="test user" --set user.passphrase="asdfasdf" --set token.data="this is a test-token" --set api.domain=local-hanami  ainari /tmp/ainari_helm_build_result/ainari-$HELM_VERSION.tgz
+          helm install --set docker.tag="${{ env.BRANCH_NAME }}" --set miko.user.id=asdf --set miko.user.name="test user" --set miko.user.passphrase="asdfasdf" --set miko.token.data="this is a test-token"  ainari /tmp/ainari_helm_build_result/ainari-$HELM_VERSION.tgz
       -
         name: Sleep for 120 seconds
         uses: jakejarvis/wait-action@919fc193e07906705e5b7a50f90ea9e74d20b2b0
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 788cfd63..1e61dc82 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,11 +8,23 @@
 - image pull-policy can now be changed by the helm-values
 - support other namespaces thand "default"
 - support for multiple sakura instances
+- dashboard:
+    - added error-popups
+    - validation of input-fields and error-message for invalid inputs
+    - added cluster-list without actions to overview-page
+    - automatic logout in case the token is expired
 
 ### Changed
 
 - changed the image-build process for the new vagrant-test-setup
 - sakura and onsen are now statefulsets within the kubernetes setup
+- dashboard
+    - updated imports
+    - messages when api-requests failed
+    - new progress-bar for task-progress with live update of the current task progress
+    - hide admin-section in case that the user is not an admin
+    - user-logo in the right upper corner now is always white with the starting letter of the user-id
+    - gauge-charts of the overview-page now has animation
 
 ### Fixed
 
diff --git a/src/dashboard/app/src/App.vue b/src/dashboard/app/src/App.vue
index b659f9a6..96dce971 100644
--- a/src/dashboard/app/src/App.vue
+++ b/src/dashboard/app/src/App.vue
@@ -37,6 +37,7 @@
             <Topbar :username="username" @logout="handleLogout" />
             <div class="main">
                 <Sidebar
+                    :isAdmin="isAdmin"
                     @change-view="
                         ({ view, id }) => {
                             currentView = view;
@@ -61,38 +62,43 @@
             </div>
         </template>
     </div>
+
+    <div v-if="tokenExpireError" class="error-popup">
+        <button class="error-close-btn" @click="tokenExpireError = ''">
+            ✕
+        </button>
+        {{ tokenExpireError }}
+    </div>
 </template>
 
 <script setup lang="ts">
 // Import necessary Vue composition API functions
-import { ref, provide } from "vue";
+import { ref, provide, onMounted, onUnmounted } from "vue";
 
 // Import all the Vue components used in the application
-import Sidebar from "./components/sidebar.vue";
-import Topbar from "./components/topbar.vue";
-import Login from "./components/login.vue";
-import Overview from "./components/overview.vue";
-import AdminUser from "./components/admin/user/user_overview.vue";
-import AdminProject from "./components/admin/project/project_overview.vue";
-import StorageCheckpoint from "./components/storage/checkpoint/checkpoint_overview.vue";
-import StorageDataset from "./components/storage/dataset/dataset_overview.vue";
-import WorkloadCluster from "./components/workload/cluster/cluster_overview.vue";
-import WorkloadTask from "./components/workload/task/task_overview.vue";
-
-// Import the authentication context module
-// import context from "./auth_context";
+import Sidebar from "@/components/sidebar.vue";
+import Topbar from "@/components/topbar.vue";
+import Login from "@/components/login.vue";
+import Overview from "@/components/overview.vue";
+import AdminUser from "@/components/admin/user/user_overview.vue";
+import AdminProject from "@/components/admin/project/project_overview.vue";
+import StorageCheckpoint from "@/components/storage/checkpoint/checkpoint_overview.vue";
+import StorageDataset from "@/components/storage/dataset/dataset_overview.vue";
+import WorkloadCluster from "@/components/workload/cluster/cluster_overview.vue";
+import WorkloadTask from "@/components/workload/task/task_overview.vue";
+import { getAuthContext } from "@/auth_context";
 
 // Import all CSS styles for the application
-import "./styles/base.css";
-import "./styles/other.css";
-import "./styles/card.css";
-import "./styles/modal.css";
-import "./styles/dropdown.css";
-import "./styles/button.css";
-import "./styles/table.css";
-import "./styles/tab.css";
-import "./styles/devider.css";
-import "./styles/primevue_overrides.css";
+import "@/styles/base.css";
+import "@/styles/other.css";
+import "@/styles/card.css";
+import "@/styles/modal.css";
+import "@/styles/dropdown.css";
+import "@/styles/button.css";
+import "@/styles/table.css";
+import "@/styles/tab.css";
+import "@/styles/devider.css";
+import "@/styles/primevue_overrides.css";
 
 // Reactive reference to track the current active view/component
 // Defaults to "Overview" when the application loads
@@ -100,6 +106,9 @@ const currentView = ref("Overview");
 const currentId = ref<string | null>(null);
 const isLoggedIn = ref<boolean>(!!localStorage.getItem("ainari_authContext"));
 const username = ref<string | null>(localStorage.getItem("username"));
+const isAdmin = ref<boolean>(getAuthContext().is_admin === "true");
+const tokenExpireError = ref<string>("");
+var expiryInterval: number | undefined;
 
 // Object containing all the available view components
 // These will be dynamically rendered based on the currentView value
@@ -126,16 +135,26 @@ provide("icons", { acceptIcon, cancelIcon });
  * Handles successful login by updating the application state
  * @param newToken - The new authentication token received from the login process
  * @param user - The username of the logged-in user
+ * @param is_admin - True, if the user is an admin
  */
-function handleLoginSuccess(newToken: string, user: string) {
+function handleLoginSuccess(
+    newToken: string,
+    user: string,
+    is_admin: string,
+    expire_timestamp: number,
+) {
     // Store the username in localStorage for persistence across page reloads
     localStorage.setItem("username", user);
-
-    // Update the login state to true to disable the login-modal
     isLoggedIn.value = true;
+    username.value = user;
+    isAdmin.value = is_admin === "true";
+    tokenExpireError.value = "";
 
-    // Log the current auth context (for debugging purposes)
-    // console.log("test: ", context.getAuthContext().value.token);
+    // Start watcher to check if the token is expired. To avoid conflicts
+    // the logout will be done 30 seonds before the token really expire.
+    startTokenExpiryWatcher(expire_timestamp - 30, handleLogout);
+
+    // Update the login state to true to disable the login-modal
 }
 
 /**
@@ -151,6 +170,49 @@ function handleLogout() {
     isLoggedIn.value = false;
     username.value = null;
 }
+
+function startTokenExpiryWatcher(
+    expireTimeUnix: number,
+    handleLogout: () => void,
+) {
+    // Clear any previous watcher (important!)
+    if (expiryInterval) {
+        clearInterval(expiryInterval);
+    }
+
+    expiryInterval = window.setInterval(() => {
+        const nowUnix = Math.floor(Date.now() / 1000);
+
+        // Handle expired token
+        if (nowUnix >= expireTimeUnix) {
+            tokenExpireError.value = "Token expired. Please login again.";
+            clearInterval(expiryInterval);
+            expiryInterval = undefined;
+            handleLogout();
+        }
+    }, 2000); // check token every 2 seconds
+}
+
+onMounted(() => {
+    if (isLoggedIn) {
+        const expire_timestamp = getAuthContext().expire_timestamp;
+
+        // In case there is no timestamp, something is wrong and you definitelly
+        // has to login again.
+        if (expire_timestamp === null) {
+            handleLogout();
+            return;
+        }
+
+        startTokenExpiryWatcher(expire_timestamp, handleLogout);
+    }
+});
+
+onUnmounted(() => {
+    if (expiryInterval) {
+        clearInterval(expiryInterval);
+    }
+});
 </script>
 
 <style scoped>
diff --git a/src/dashboard/app/src/auth_context.ts b/src/dashboard/app/src/auth_context.ts
index 613f5e54..f0416242 100644
--- a/src/dashboard/app/src/auth_context.ts
+++ b/src/dashboard/app/src/auth_context.ts
@@ -13,36 +13,115 @@
 // limitations under the License.
 
 import axios from "axios";
-
-import api from "./api";
 import { getConfig } from "./config";
 
 /**
  * Interface representing the authentication context
  * containing various service addresses and the auth token
+ *
+ * @property {string | null} token - Current authentication token
+ * @property {number | null} expire_timestamp - Unix timestamp when the token expires
+ * @property {string | null} is_admin - "true" if the user is admin, otherwise "false". This is a string instead of a boolean to not depend on one single bit for the check.
+ * @property {string | null} miko_address - Address for the Miko service
+ * @property {string | null} hanami_address - Address for the Hanami service
+ * @property {string | null} ryokan_address - Address for the Ryokan service
+ * @property {string | null} torii_address - Full address for the Torii service (including port)
+ * @property {string | null} torii_base_address - Base address for the Torii service (without port)
+ * @property {string | null} omamori_address - Address for the Omamori service
+ */
+export interface AuthContext {
+    token: string | null;
+    expire_timestamp: number | null;
+    is_admin: string | null;
+    miko_address: string | null;
+    hanami_address: string | null;
+    ryokan_address: string | null;
+    torii_address: string | null;
+    torii_base_address: string | null;
+    omamori_address: string | null;
+}
+
+/**
+ * Extracts the admin status from a JWT token
+ *
+ * @param {string} token - The JWT token to parse
+ *
+ * @returns {string | null} "true" if the user is admin, "false" otherwise, or null if parsing fails
+ *
+ * @description
+ * This function parses the JWT token to extract the is_admin field from the payload.
+ * The JWT is split into its components, and the payload is base64 decoded and parsed.
+ * If any step fails, it returns "false" as a fallback.
+ */
+export function getIsAdminFromJwt(token: string): string | null {
+    try {
+        // JWT format: header.payload.signature
+        const payloadBase64 = token.split(".")[1];
+        if (!payloadBase64) return "false";
+
+        // Convert Base64URL to standard Base64 by replacing URL-safe characters
+        const payloadJson = atob(
+            payloadBase64.replace(/-/g, "+").replace(/_/g, "/"),
+        );
+
+        const payload = JSON.parse(payloadJson);
+        return payload.is_admin ?? "false";
+    } catch {
+        return "false";
+    }
+}
+
+/**
+ * Extracts the expiration timestamp from a JWT token
+ *
+ * @param {string} token - The JWT token to parse
+ *
+ * @returns {number | null} The expiration timestamp in seconds, or null if parsing fails
+ *
+ * @description
+ * This function parses the JWT token to extract the exp field (expiration time)
+ * from the payload. The expiration time is typically in seconds since Unix epoch.
+ * If any step fails, it returns 0 as a fallback.
  */
-interface AuthContext {
-    token: string | null; // Current authentication token
-    miko_address: string | null; // Address for the Miko service
-    hanami_address: string | null; // Address for the Hanami service
-    ryokan_address: string | null; // Address for the Ryokan service
-    torii_address: string | null; // Full address for the Torii service
-    torii_base_address: string | null; // Base address for the Torii service (without port)
-    omamori_address: string | null; // Address for the Omamori service
+export function getExpireTimesamp(token: string): number | null {
+    try {
+        // JWT format: header.payload.signature
+        const payloadBase64 = token.split(".")[1];
+        if (!payloadBase64) return 0;
+
+        // Convert Base64URL to standard Base64 by replacing URL-safe characters
+        const payloadJson = atob(
+            payloadBase64.replace(/-/g, "+").replace(/_/g, "/"),
+        );
+
+        const payload = JSON.parse(payloadJson);
+        return payload.exp ?? 0;
+    } catch {
+        return 0;
+    }
 }
 
 /**
  * Sets the authentication context in localStorage
  * This function fetches service endpoints and stores them along with the auth token
  *
- * @param token - The authentication token to be stored
+ * @param {string} token - The authentication token to be stored
+ *
+ * @description
+ * This function creates an Axios instance to fetch service endpoints from the API.
+ * It extracts admin status and expiration time from the JWT token, then stores
+ * all this information in the browser's localStorage under the key "ainari_authContext".
+ * The torii_base_address is derived from the torii_address by removing the port number.
  */
-async function createAuthContext(token: string) {
+export async function createAuthContext(token: string) {
     const { apiUrl } = getConfig();
     const miko_api = axios.create({
         baseURL: apiUrl,
     });
 
+    const is_admin = getIsAdminFromJwt(token);
+    const expire_timestamp = getExpireTimesamp(token);
+
     // Fetch the service endpoints from the API
     const endpoint_resp = await miko_api.get("/v1alpha/endpoints");
 
@@ -50,6 +129,8 @@ async function createAuthContext(token: string) {
     // and environment variables or fetched service addresses
     const authContext: AuthContext = {
         token: token,
+        expire_timestamp: expire_timestamp,
+        is_admin: is_admin,
         miko_address: apiUrl, // Get Miko address from environment
         hanami_address: endpoint_resp.data.hanami.public_address,
         ryokan_address: endpoint_resp.data.ryokan.public_address,
@@ -60,8 +141,19 @@ async function createAuthContext(token: string) {
 
     // Extract the base address from the Torii address (remove port number)
     // This is useful for constructing URLs without specifying a port
-    const [part1, part2] = authContext.torii_address.split(":");
-    authContext.torii_base_address = `${part1}:${part2}`;
+    if (authContext.torii_address) {
+        const toriiParts = authContext.torii_address.split(":");
+        if (toriiParts.length > 1) {
+            // Remove the port and any path/query parameters
+            authContext.torii_base_address = toriiParts[0];
+        } else {
+            // If there's no port, use the full address as the base
+            authContext.torii_base_address = authContext.torii_address;
+        }
+    } else {
+        // Handle the case where torii_address is null
+        authContext.torii_base_address = null;
+    }
 
     // Store the complete auth context in localStorage as a JSON string
     localStorage.setItem("ainari_authContext", JSON.stringify(authContext));
@@ -70,17 +162,22 @@ async function createAuthContext(token: string) {
 /**
  * Retrieves the authentication context from localStorage
  *
- * @returns The authentication context object with all service addresses and token
+ * @returns {AuthContext} The authentication context object with all service addresses and token
  *          Returns null values for all properties if nothing is stored
+ *
+ * @description
+ * This function retrieves the stored authentication context from localStorage.
+ * If no data is found, it returns an AuthContext object with all properties set to null.
+ * If data is found, it parses the JSON and merges it with a default AuthContext object.
  */
-function getAuthContext(): AuthContext {
-    // Get the stored auth context from localStorage
+export function getAuthContext(): AuthContext {
     const stored = localStorage.getItem("ainari_authContext");
-    console.log("get stored: ", stored);
 
     // Initialize with default null values and merge with stored values if they exist
     const authContext: AuthContext = {
         token: null,
+        expire_timestamp: null,
+        is_admin: null,
         miko_address: null,
         hanami_address: null,
         ryokan_address: null,
@@ -90,14 +187,5 @@ function getAuthContext(): AuthContext {
         ...(stored ? JSON.parse(stored) : {}), // Spread the parsed stored values
     };
 
-    console.log("get authContext: ", authContext);
     return authContext;
 }
-
-/**
- * Authentication module providing functions to set and get auth context
- */
-export default {
-    createAuthContext,
-    getAuthContext,
-};
diff --git a/src/dashboard/app/src/common.ts b/src/dashboard/app/src/common.ts
index ce5ae058..ffffca83 100644
--- a/src/dashboard/app/src/common.ts
+++ b/src/dashboard/app/src/common.ts
@@ -17,7 +17,9 @@
  * Handles various date string formats by cleaning them first to ensure JavaScript Date compatibility.
  *
  * @param input - The date string to format. Expected formats include ISO 8601 and other common date formats.
+ *
  * @returns A formatted date string in YYYY-MM-DD HH:MM:SS format.
+ *
  * @throws Error if no date string is provided or if the input string cannot be parsed as a valid date.
  */
 function formatDateTime(input?: string): string {
diff --git a/src/dashboard/app/src/components/admin/project/project_create_modal.vue b/src/dashboard/app/src/components/admin/project/project_create_modal.vue
index c84c24c6..db448f8d 100644
--- a/src/dashboard/app/src/components/admin/project/project_create_modal.vue
+++ b/src/dashboard/app/src/components/admin/project/project_create_modal.vue
@@ -21,18 +21,29 @@
                 <span>Create project</span>
             </div>
             <div class="modal-content">
-                <input
-                    v-model="form.projectId"
-                    type="text"
-                    placeholder="Project-ID"
-                    required
-                />
-                <input
-                    v-model="form.projectName"
-                    type="text"
-                    placeholder="Project-Name"
-                    required
-                />
+                <div>
+                    <input
+                        v-model="form.projectId"
+                        type="text"
+                        placeholder="Project-ID"
+                        :class="{ invalid_input: projectIdError }"
+                    />
+                    <p v-if="projectIdError" class="error-msg">
+                        Project-ID must be at least 4 characters
+                    </p>
+                </div>
+                <br />
+                <div>
+                    <input
+                        v-model="form.projectName"
+                        type="text"
+                        placeholder="Project-Name"
+                        :class="{ invalid_input: projectNameError }"
+                    />
+                    <p v-if="projectNameError" class="error-msg">
+                        Project-Name must be at least 4 characters
+                    </p>
+                </div>
             </div>
 
             <div class="modal-bottombar">
@@ -47,13 +58,18 @@
             </div>
         </div>
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script lang="ts" setup>
 import { reactive } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
+import { handleAxiosError } from "@/handleAxiosError";
 
 interface Props {
     icons: { acceptIcon: string; cancelIcon: string };
@@ -64,14 +80,25 @@ const emit = defineEmits<{
     (e: "cancel"): void;
 }>();
 
+const errorPopupMsg = ref<string>("");
+const projectIdError = ref(false);
+const projectNameError = ref(false);
+
 const form = reactive({
     projectId: "",
     projectName: "",
 });
 
 async function handleAccept() {
+    projectIdError.value = form.userId.length < 4;
+    projectNameError.value = form.userName.length < 4;
+
+    if (projectIdError.value || projectNameError.value) {
+        return;
+    }
+
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const miko_api = axios.create({
             baseURL: authContext.miko_address,
         });
@@ -86,12 +113,11 @@ async function handleAccept() {
                 headers: { Authorization: `Bearer ${authContext.token}` },
             },
         );
+
+        emit("accept");
     } catch (err) {
-        console.error("Failed to create project", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to create project");
     }
-
-    console.log("Submitting form:", form);
-    emit("accept");
 }
 
 function cancel() {
@@ -101,7 +127,11 @@ function cancel() {
 
 <style scoped>
 .project-create-modal {
-    height: 18rem;
-    width: 20rem;
+    width: 30rem;
+}
+
+/* is not found when I put this in one of the css files. Don't know why... */
+.invalid_input {
+    border-bottom: 2px solid #ff4d4f;
 }
 </style>
diff --git a/src/dashboard/app/src/components/admin/project/project_delete_modal.vue b/src/dashboard/app/src/components/admin/project/project_delete_modal.vue
index 4fa3375b..9794d48e 100644
--- a/src/dashboard/app/src/components/admin/project/project_delete_modal.vue
+++ b/src/dashboard/app/src/components/admin/project/project_delete_modal.vue
@@ -40,12 +40,18 @@
             </div>
         </div>
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
+import { handleAxiosError } from "@/handleAxiosError";
 
 interface Props {
     project: { id: number; name: string } | null;
@@ -56,11 +62,12 @@ const emit = defineEmits<{
     (e: "accept"): void;
     (e: "cancel"): void;
 }>();
+const errorPopupMsg = ref<string>("");
 
 async function handleAccept(project_id: string) {
     if (!project_id) return;
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const miko_api = axios.create({
             baseURL: authContext.miko_address,
         });
@@ -68,11 +75,11 @@ async function handleAccept(project_id: string) {
         await miko_api.delete(`/v1alpha/project/${project_id}/admin`, {
             headers: { Authorization: `Bearer ${authContext.token}` },
         });
+
+        emit("accept");
     } catch (err) {
-        console.error("Failed to delete project", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to delete project");
     }
-
-    emit("accept");
 }
 
 function cancel() {
@@ -82,7 +89,6 @@ function cancel() {
 
 <style scoped>
 .project-delete-modal {
-    height: 16rem;
-    width: 20rem;
+    width: 30rem;
 }
 </style>
diff --git a/src/dashboard/app/src/components/admin/project/project_overview.vue b/src/dashboard/app/src/components/admin/project/project_overview.vue
index 66f88462..b75983aa 100644
--- a/src/dashboard/app/src/components/admin/project/project_overview.vue
+++ b/src/dashboard/app/src/components/admin/project/project_overview.vue
@@ -70,16 +70,22 @@
             @cancel="cancelDeleteModal"
         />
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, inject } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
 import ProjectCreateModal from "./project_create_modal.vue";
 import ProjectDeleteModal from "./project_delete_modal.vue";
+import { handleAxiosError } from "@/handleAxiosError";
 
+const errorPopupMsg = ref<string>("");
 const projects = ref<{ id: string; projectName: string }[]>([]);
 const showAddModal = ref(false);
 const showDeleteModal = ref(false);
@@ -89,7 +95,7 @@ const icons = inject<{ acceptIcon: string; cancelIcon: string }>("icons")!;
 
 async function fetchProjects() {
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const miko_api = axios.create({
             baseURL: authContext.miko_address,
         });
@@ -99,7 +105,7 @@ async function fetchProjects() {
         });
         projects.value = response.data.projects;
     } catch (err) {
-        console.error("Failed to load projects", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to load projects");
     }
 }
 
diff --git a/src/dashboard/app/src/components/admin/user/user_create_modal.vue b/src/dashboard/app/src/components/admin/user/user_create_modal.vue
index d916c098..c5d49f5c 100644
--- a/src/dashboard/app/src/components/admin/user/user_create_modal.vue
+++ b/src/dashboard/app/src/components/admin/user/user_create_modal.vue
@@ -17,44 +17,72 @@
 <template>
     <div class="modal-overlay" @click.self="cancel">
         <div class="modal user-create-modal">
+            <!-- Modal topbar -->
             <div class="modal-topbar">
                 <span>Create user</span>
             </div>
+
+            <!-- Modal content -->
             <div class="modal-content">
-                <input
-                    v-model="form.userId"
-                    type="text"
-                    placeholder="User-ID"
-                    required
-                />
-                <input
-                    v-model="form.userName"
-                    type="text"
-                    placeholder="User-Name"
-                    required
-                />
-                <input
-                    v-model="form.password"
-                    type="password"
-                    placeholder="Password"
-                    required
-                />
-                <input
-                    v-model="form.confirmPassword"
-                    type="password"
-                    placeholder="Confirm password"
-                    required
-                />
-                <label class="checkbox-label">
-                    <input type="checkbox" v-model="form.isAdmin" />
-                    Is Admin
-                </label>
-
-                <p v-if="passwordError" class="error-msg">
-                    {{ passwordError }}
-                </p>
+                <div>
+                    <div>
+                        <input
+                            v-model="form.userId"
+                            type="text"
+                            placeholder="User-ID"
+                            :class="{ invalid_input: userIdError }"
+                        />
+                        <p v-if="userIdError" class="error-msg">
+                            User-ID must be at least 4 characters
+                        </p>
+                    </div>
+                    <br />
+                    <div>
+                        <input
+                            v-model="form.userName"
+                            type="text"
+                            placeholder="User-Name"
+                            :class="{ invalid_input: userNameError }"
+                        />
+                        <p v-if="userNameError" class="error-msg">
+                            User-Name must be at least 4 characters
+                        </p>
+                    </div>
+                    <br />
+                    <div>
+                        <input
+                            v-model="form.password"
+                            type="password"
+                            placeholder="Password"
+                            :class="{ invalid_input: passwordError }"
+                        />
+                        <p v-if="passwordError" class="error-msg">
+                            Password must be at least 8 characters
+                        </p>
+                    </div>
+                    <br />
+                    <div>
+                        <input
+                            v-model="form.confirmPassword"
+                            type="password"
+                            placeholder="Confirm password"
+                            :class="{ invalid_input: passwordConfirmError }"
+                        />
+                        <p v-if="passwordConfirmError" class="error-msg">
+                            Password did not match
+                        </p>
+                    </div>
+                    <br />
+                    <div>
+                        <label class="checkbox-label">
+                            <input type="checkbox" v-model="form.isAdmin" />
+                            Is Admin
+                        </label>
+                    </div>
+                </div>
             </div>
 
+            <!-- Modal bottombar -->
             <div class="modal-bottombar">
                 <div class="modal-actions">
                     <button class="icon-button" @click="handleAccept">
@@ -67,13 +95,18 @@
             </div>
         </div>
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, computed } from "vue";
+import { ref, reactive, computed } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
+import { handleAxiosError } from "@/handleAxiosError";
 
 interface Props {
     icons: { acceptIcon: string; cancelIcon: string };
@@ -92,17 +125,28 @@ const form = reactive({
     isAdmin: false,
 });
 
-const passwordError = computed(() =>
-    form.password !== form.confirmPassword ? "Passwords do not match" : "",
+const errorPopupMsg = ref<string>("");
+const userIdError = ref(false);
+const userNameError = ref(false);
+const passwordError = ref(false);
+const passwordConfirmError = computed(() =>
+    form.password !== form.confirmPassword ? true : false,
 );
 
 async function handleAccept() {
+    userIdError.value = form.userId.length < 4;
+    userNameError.value = form.userName.length < 4;
+    passwordError.value = form.password.length < 8;
+
+    if (userIdError.value || passwordError.value || passwordError.value) {
+        return;
+    }
     if (form.password !== form.confirmPassword) {
-        passwordError.value = "Passwords do not match!";
+        passwordConfirmError.value = true;
         return;
     }
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const miko_api = axios.create({
             baseURL: authContext.miko_address,
         });
@@ -119,12 +163,11 @@ async function handleAccept() {
                 headers: { Authorization: `Bearer ${authContext.token}` },
             },
         );
+
+        emit("accept");
     } catch (err) {
-        console.error("Failed to create user", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to create user");
     }
-
-    console.log("Submitting form:", form);
-    emit("accept");
 }
 
 function cancel() {
@@ -134,7 +177,12 @@ function cancel() {
 
 <style scoped>
 .user-create-modal {
-    height: 28rem;
-    width: 20rem;
+    width: 30em;
+    margin-bottom: 5rem;
+}
+
+/* is not found when I put this in one of the css files. Don't know why... */
+.invalid_input {
+    border-bottom: 2px solid #ff4d4f;
 }
 </style>
diff --git a/src/dashboard/app/src/components/admin/user/user_delete_modal.vue b/src/dashboard/app/src/components/admin/user/user_delete_modal.vue
index 9ef0af22..0d914e06 100644
--- a/src/dashboard/app/src/components/admin/user/user_delete_modal.vue
+++ b/src/dashboard/app/src/components/admin/user/user_delete_modal.vue
@@ -37,12 +37,18 @@
             </div>
         </div>
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
+import { handleAxiosError } from "@/handleAxiosError";
 
 interface Props {
     user: { id: number; name: string } | null;
@@ -53,11 +59,12 @@ const emit = defineEmits<{
     (e: "accept"): void;
     (e: "cancel"): void;
 }>();
+const errorPopupMsg = ref<string>("");
 
 async function handleAccept(user_id: string) {
     if (!user_id) return;
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const miko_api = axios.create({
             baseURL: authContext.miko_address,
         });
@@ -65,11 +72,11 @@ async function handleAccept(user_id: string) {
         await miko_api.delete(`/v1alpha/user/${user_id}/admin`, {
             headers: { Authorization: `Bearer ${authContext.token}` },
         });
+
+        emit("accept");
     } catch (err) {
-        console.error("Failed to delete user", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to delete user");
     }
-
-    emit("accept");
 }
 
 function cancel() {
@@ -79,7 +86,6 @@ function cancel() {
 
 <style scoped>
 .user-delete-modal {
-    height: 16rem;
-    width: 20rem;
+    width: 30rem;
 }
 </style>
diff --git a/src/dashboard/app/src/components/admin/user/user_info_modal.vue b/src/dashboard/app/src/components/admin/user/user_info_modal.vue
index 0568c55d..009583f5 100644
--- a/src/dashboard/app/src/components/admin/user/user_info_modal.vue
+++ b/src/dashboard/app/src/components/admin/user/user_info_modal.vue
@@ -77,16 +77,22 @@
             </div>
         </div>
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
-import common from "../../../common";
+import { getAuthContext } from "@/auth_context";
+import common from "@/common";
+import { handleAxiosError } from "@/handleAxiosError";
 
 const user_info = ref<{}[]>([]);
+const errorPopupMsg = ref<string>("");
 
 interface Props {
     user: { id: number; name: string } | null;
@@ -100,7 +106,7 @@ const emit = defineEmits<{
 
 async function fetchUserInfo(userId: string) {
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const miko_api = axios.create({
             baseURL: authContext.miko_address,
         });
@@ -116,7 +122,7 @@ async function fetchUserInfo(userId: string) {
             user_info.value.updated_at,
         );
     } catch (err) {
-        console.error("Failed to load user-info", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to load user-info");
     }
 }
 
diff --git a/src/dashboard/app/src/components/admin/user/user_overview.vue b/src/dashboard/app/src/components/admin/user/user_overview.vue
index abe7697c..1ba88992 100644
--- a/src/dashboard/app/src/components/admin/user/user_overview.vue
+++ b/src/dashboard/app/src/components/admin/user/user_overview.vue
@@ -84,18 +84,24 @@
             @cancel="cancelInfoModal"
         />
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, inject } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
 
 import UserCreateModal from "./user_create_modal.vue";
 import UserDeleteModal from "./user_delete_modal.vue";
 import UserInfoModal from "./user_info_modal.vue";
+import { handleAxiosError } from "@/handleAxiosError";
 
+const errorPopupMsg = ref<string>("");
 const users = ref<{ id: string; userName: string }[]>([]);
 const showAddModal = ref(false);
 const showDeleteModal = ref(false);
@@ -107,7 +113,7 @@ const icons = inject<{ acceptIcon: string; cancelIcon: string }>("icons")!;
 
 async function fetchUsers() {
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const miko_api = axios.create({
             baseURL: authContext.miko_address,
         });
@@ -117,7 +123,7 @@ async function fetchUsers() {
         });
         users.value = response.data.users;
     } catch (err) {
-        console.error("Failed to load users", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to load users");
     }
 }
 
diff --git a/src/dashboard/app/src/components/gauge_chart.vue b/src/dashboard/app/src/components/gauge_chart.vue
index ece25217..b17b78fb 100644
--- a/src/dashboard/app/src/components/gauge_chart.vue
+++ b/src/dashboard/app/src/components/gauge_chart.vue
@@ -114,6 +114,7 @@ const progressOffset = computed(() => {
 
 .gauge-progress {
     stroke: var(--color-highlight);
+    transition: stroke-dashoffset 1s ease-in-out; /* fill-animation of 1 second lenght*/
 }
 
 .gauge-label {
diff --git a/src/dashboard/app/src/components/login.vue b/src/dashboard/app/src/components/login.vue
index 8f2a05b4..1dcbab79 100644
--- a/src/dashboard/app/src/components/login.vue
+++ b/src/dashboard/app/src/components/login.vue
@@ -29,55 +29,72 @@
                         v-model="user_id"
                         type="text"
                         id="login_id_field"
-                        name="id"
                         placeholder="User-ID"
-                        required
+                        :class="{ invalid_input: userIdError }"
                     />
+                    <p v-if="userIdError" class="error-msg">
+                        User-ID must be at least 4 characters
+                    </p>
                 </div>
+
                 <br /><br />
+
                 <div>
                     <input
                         v-model="password"
                         type="password"
                         id="login_pw_field"
-                        name="password"
                         placeholder="Password"
-                        required
+                        :class="{ invalid_input: passwordError }"
                     />
+                    <p v-if="passwordError" class="error-msg">
+                        Password must be at least 8 characters
+                    </p>
                 </div>
             </div>
 
             <!-- Modal bottombar -->
             <div class="modal-bottombar">
                 <button @click="login">Login</button>
-                <p v-if="error" class="error-msg">{{ error }}</p>
             </div>
         </div>
     </div>
-
-    <!--<div v-if="error" class="error-popup">
-        <button class="error-close-btn" @click="error = ''">✕</button>
-        {{ error }}
-    </div> -->
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
 import axios from "axios";
 
-import context from "../auth_context";
-import { getConfig } from "../config";
+import { createAuthContext, getIsAdminFromJwt, getExpireTimesamp } from "@/auth_context";
+import { getConfig } from "@/config";
 
-// Reactive references to store user input and error messages
+// Define custom events that this component can emit
+const emit = defineEmits<{
+    (
+        e: "login-success",
+        token: string,
+        userId: string,
+        isAdmin: boolean,
+        expireTimestamp: number,
+    ): void;
+}>();
+
+// Reactive references to store user input and validation states
 const user_id = ref("");
 const password = ref("");
 const error = ref("");
+const userIdError = ref(false);
+const passwordError = ref(false);
 
-// Define custom events that this component can emit
-// This emits a "login-success" event when login is successful, passing the token and user ID
-const emit = defineEmits<{
-    (e: "login-success", token: string, userId: string): void;
-}>();
+/**
+ * Validates the user input before attempting login
+ * @returns boolean - true if validation passes, false otherwise
+ */
+function validateInput(): boolean {
+    userIdError.value = user_id.value.length < 4;
+    passwordError.value = password.value.length < 8;
+    return !(userIdError.value || passwordError.value);
+}
 
 /**
  * Attempts to authenticate the user with the provided credentials
@@ -85,18 +102,22 @@ const emit = defineEmits<{
  */
 async function login() {
     try {
+        // Reset error state
         error.value = "";
 
-        // Prepare URL-encoded form data for the authentication request
-        // This is the standard format expected by OAuth 2.0 token endpoints
+        // Validate input before proceeding
+        if (!validateInput()) {
+            return;
+        }
+
+        // Prepare authentication request parameters
         const params = new URLSearchParams();
-        params.append("grant_type", "client_credentials"); // Specifies the OAuth 2.0 flow
-        params.append("token_format", "jwt"); // Requests a JSON Web Token
-        params.append("client_id", user_id.value); // Client identifier from user input
-        params.append("client_secret", password.value); // Client secret from user input
+        params.append("grant_type", "client_credentials");
+        params.append("token_format", "jwt");
+        params.append("client_id", user_id.value);
+        params.append("client_secret", password.value);
 
-        // Loac miko-address from the config-file for the initial connection
-        // The addresses of all the other components will be requested from Miko
+        // Configure axios instance with base URL of Miko from the config
         const { apiUrl } = getConfig();
         const miko_api = axios.create({
             baseURL: apiUrl,
@@ -106,26 +127,24 @@ async function login() {
         // The endpoint expects form-encoded data with specific headers
         const login_resp = await miko_api.post("/v1alpha/token", params, {
             headers: {
-                "Content-Type": "application/x-www-form-urlencoded", // Required header for form data
+                "Content-Type": "application/x-www-form-urlencoded",
             },
         });
 
-        // Log the response for debugging purposes
-        // This helps with troubleshooting authentication issues
-        // console.log("Login response:", login_resp);
-
+        // Extract token from response
         const token = login_resp.data.access_token;
 
         // Store the authentication token in the global context
         // This makes the token available to other components in the application
-        await context.createAuthContext(token);
+        await createAuthContext(token);
+        const is_admin = getIsAdminFromJwt(token);
+        const expire_timestamp = getExpireTimesamp(token);
 
-        // Emit a success event to notify parent components
-        // This allows the parent to handle post-login actions
-        emit("login-success", token, user_id.value);
+        // Notify parent components of successful login
+        emit("login-success", token, user_id.value, is_admin, expire_timestamp);
     } catch (err: any) {
+        // Handle authentication errors
         error.value = "Login failed. Please try again.";
-        console.error("Login error:", err);
     }
 }
 </script>
@@ -137,10 +156,16 @@ async function login() {
     background: rgba(0, 0, 0, 1);
     display: flex;
     justify-content: center;
+    align-items: center;
 }
 
 .login-modal {
-    height: 18rem;
-    width: 20rem;
+    width: 22rem;
+    margin-bottom: 5rem;
+}
+
+/* is not found when I put this in one of the css files. Don't know why... */
+.invalid_input {
+    border-bottom: 2px solid #ff4d4f;
 }
 </style>
diff --git a/src/dashboard/app/src/components/overview.vue b/src/dashboard/app/src/components/overview.vue
index 35b3ce08..4dfee99c 100644
--- a/src/dashboard/app/src/components/overview.vue
+++ b/src/dashboard/app/src/components/overview.vue
@@ -15,135 +15,218 @@
 -->
 
 <template>
+    <div class="divider">
+        <span>RESOURCE-OVERVIEW</span>
+    </div>
+    <div class="card">
+        <div class="card-label">Cluster</div>
+        <div class="card-content">
+            <table class="overview-table" v-if="clusters.length > 0">
+                <thead>
+                    <tr>
+                        <th>UUID</th>
+                        <th>Name</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="cluster in clusters" :key="cluster.uuid">
+                        <td>{{ cluster.uuid }}</td>
+                        <td>{{ cluster.name }}</td>
+                        <td></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
     <div class="divider">
         <span>RESOURCE-USAGE</span>
     </div>
     <div class="usage_overview">
         <div class="card gauge-chart-card">
             <div class="card-label">Cluster</div>
-            <GaugeChart :value="usedCluster" :max="maxCluster" />
+            <GaugeChart
+                :value="quotaMetrics.clusters.used"
+                :max="quotaMetrics.clusters.max"
+            />
         </div>
         <div class="card gauge-chart-card">
             <div class="card-label">Datasets</div>
-            <GaugeChart :value="usedDataset" :max="maxDataset" />
+            <GaugeChart
+                :value="quotaMetrics.datasets.used"
+                :max="quotaMetrics.datasets.max"
+            />
         </div>
         <div class="card gauge-chart-card">
             <div class="card-label">Checkpoints</div>
-            <GaugeChart :value="usedCheckpoint" :max="maxCheckpoint" />
+            <GaugeChart
+                :value="quotaMetrics.checkpoints.used"
+                :max="quotaMetrics.checkpoints.max"
+            />
         </div>
         <div class="card gauge-chart-card">
             <div class="card-label">Secrets</div>
-            <GaugeChart :value="usedSecret" :max="maxSecret" />
+            <GaugeChart
+                :value="quotaMetrics.secrets.used"
+                :max="quotaMetrics.secrets.max"
+            />
         </div>
     </div>
+
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import axios from "axios";
 
-import context from "../auth_context";
-
-import GaugeChart from "./gauge_chart.vue";
+import { getAuthContext } from "@/auth_context";
+import GaugeChart from "@/components/gauge_chart.vue";
+import { handleAxiosError } from "@/handleAxiosError";
+
+// Cluster management
+const clusters = ref<{ uuid: string; clusterName: string }[]>([]);
+
+// Error handling
+const errorPopupMsg = ref<string>("");
+
+// Quota tracking
+const quotaMetrics = reactive({
+    clusters: {
+        used: ref(0),
+        max: ref(1),
+    },
+    datasets: {
+        used: ref(0),
+        max: ref(1),
+    },
+    checkpoints: {
+        used: ref(0),
+        max: ref(1),
+    },
+    secrets: {
+        used: ref(0),
+        max: ref(1),
+    },
+});
+
+// API client creation helper
+function createApiClient(baseURL: string | null) {
+    const authContext = getAuthContext();
+    return axios.create({
+        baseURL,
+        headers: { Authorization: `Bearer ${authContext.token}` },
+    });
+}
 
-const usedCluster = ref(0);
-const maxCluster = ref(1);
-const usedDataset = ref(0);
-const maxDataset = ref(1);
-const usedCheckpoint = ref(0);
-const maxCheckpoint = ref(1);
-const usedSecret = ref(0);
-const maxSecret = ref(1);
+/**
+ * Fetches the list of clusters of the user from Hanami API
+ */
+async function fetchClusters() {
+    try {
+        const hanamiApi = createApiClient(
+            getAuthContext().hanami_address,
+        );
+        const response = await hanamiApi.get("/v1alpha/cluster");
+        clusters.value = response.data.clusters;
+    } catch (err) {
+        errorPopupMsg.value = handleAxiosError(err, "Failed to load clusters");
+    }
+}
 
+/**
+ * Fetches quota limits from Miko API
+ */
 async function fetchQuotas() {
     try {
-        const authContext = context.getAuthContext();
-        const miko_api = axios.create({
-            baseURL: authContext.miko_address,
-        });
-
-        const response = await miko_api.get("/v1alpha/quota", {
-            headers: { Authorization: `Bearer ${authContext.token}` },
-        });
-
-        maxCluster.value = response.data.max_cluster;
-        maxDataset.value = response.data.max_dataset;
-        maxCheckpoint.value = response.data.max_checkpoint;
-        maxSecret.value = response.data.max_secret;
+        const mikoApi = createApiClient(getAuthContext().miko_address);
+        const response = await mikoApi.get("/v1alpha/quota");
+
+        quotaMetrics.clusters.max = response.data.max_cluster;
+        quotaMetrics.datasets.max = response.data.max_dataset;
+        quotaMetrics.checkpoints.max = response.data.max_checkpoint;
+        quotaMetrics.secrets.max = response.data.max_secret;
     } catch (err) {
-        console.error("Failed to load quotas", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to load quotas");
     }
 }
 
+/**
+ * Fetches the number of used clusters from Hanami API
+ */
 async function fetchUsedCluster() {
     try {
-        const authContext = context.getAuthContext();
-        const hanami_api = axios.create({
-            baseURL: authContext.hanami_address,
-        });
-
-        const response = await hanami_api.get("/v1alpha/cluster/count", {
-            headers: { Authorization: `Bearer ${authContext.token}` },
-        });
-        console.log("response: ", response);
-        usedCluster.value = response.data.number_of_items;
+        const hanamiApi = createApiClient(
+            getAuthContext().hanami_address,
+        );
+        const response = await hanamiApi.get("/v1alpha/cluster/count");
+        quotaMetrics.clusters.used = response.data.number_of_items;
     } catch (err) {
-        console.error("Failed to load number of clusters", err);
+        errorPopupMsg.value = handleAxiosError(
+            err,
+            "Failed to load number of clusters",
+        );
     }
 }
 
+/**
+ * Fetches the number of used datasets and checkpoints from Ryokan API
+ */
 async function fetchUsedDatasetsAndCheckpoints() {
     try {
-        const authContext = context.getAuthContext();
-        const ryokan_api = axios.create({
-            baseURL: authContext.ryokan_address,
-        });
-
-        const respDataset = await ryokan_api.get("/v1alpha/dataset/count", {
-            headers: { Authorization: `Bearer ${authContext.token}` },
-        });
-        console.log("response: ", respDataset);
-        usedDataset.value = respDataset.data.number_of_items;
-
-        const respCheckpoint = await ryokan_api.get(
-            "/v1alpha/checkpoint/count",
-            {
-                headers: { Authorization: `Bearer ${authContext.token}` },
-            },
+        const ryokanApi = createApiClient(
+            getAuthContext().ryokan_address,
         );
-        console.log("response: ", respCheckpoint);
-        usedCheckpoint.value = respCheckpoint.data.number_of_items;
+
+        // Fetch dataset number
+        const respDataset = await ryokanApi.get("/v1alpha/dataset/count");
+        quotaMetrics.datasets.used = respDataset.data.number_of_items;
+
+        // Fetch checkpoint number
+        const respCheckpoint = await ryokanApi.get("/v1alpha/checkpoint/count");
+        quotaMetrics.checkpoints.used = respCheckpoint.data.number_of_items;
     } catch (err) {
-        console.error("Failed to load number of datasets and checkpoints", err);
+        errorPopupMsg.value = handleAxiosError(
+            err,
+            "Failed to load number of datasets and checkpoints",
+        );
     }
 }
 
+/**
+ * Fetches the number of used secrets from Omamori API
+ */
 async function fetchUsedSecrets() {
     try {
-        const authContext = context.getAuthContext();
-        const omamori_api = axios.create({
-            baseURL: authContext.omamori_address,
-        });
-
-        const response = await omamori_api.get("/v1alpha/secret/count", {
-            headers: { Authorization: `Bearer ${authContext.token}` },
-        });
-        console.log("response: ", response);
-        usedSecret.value = response.data.number_of_items;
+        const omamoriApi = createApiClient(
+            getAuthContext().omamori_address,
+        );
+        const response = await omamoriApi.get("/v1alpha/secret/count");
+        quotaMetrics.secrets.used = response.data.number_of_items;
     } catch (err) {
-        console.error("Failed to load number of secrets", err);
+        errorPopupMsg.value = handleAxiosError(
+            err,
+            "Failed to load number of secrets",
+        );
     }
 }
 
-onMounted(fetchQuotas);
-onMounted(fetchUsedCluster);
-onMounted(fetchUsedDatasetsAndCheckpoints);
-onMounted(fetchUsedSecrets);
+// Initialize all data fetching on component mount
+onMounted(() => {
+    fetchClusters();
+    fetchQuotas();
+    fetchUsedCluster();
+    fetchUsedDatasetsAndCheckpoints();
+    fetchUsedSecrets();
+});
 </script>
 
 <style scoped>
 .usage_overview {
     display: flex;
-    flex-wrap: wrap; /* 👈 allows wrapping */
+    flex-wrap: wrap;
 }
 </style>
diff --git a/src/dashboard/app/src/components/sidebar.vue b/src/dashboard/app/src/components/sidebar.vue
index c41a10b9..3f02186a 100644
--- a/src/dashboard/app/src/components/sidebar.vue
+++ b/src/dashboard/app/src/components/sidebar.vue
@@ -17,7 +17,7 @@
 <template>
     <aside>
         <nav class="sidebar" role="navigation" aria-label="Main sidebar">
-            <div v-for="menu in menus" :key="menu.name">
+            <div v-for="menu in visibleMenus" :key="menu.name">
                 <template v-if="menu.items && menu.items.length">
                     <div class="sidebar_drop">
                         <button
@@ -69,17 +69,32 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, nextTick, onMounted } from "vue";
+import { ref, reactive, watch, nextTick, onMounted, computed } from "vue";
 
 type MenuItem = { view: string; label: string };
 type Menu = { name: string; label: string; items?: MenuItem[] };
 
-const props = defineProps<{ activeView?: string }>();
+interface Props {
+    activeView?: string;
+    isAdmin?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    activeView: "Overview",
+    isAdmin: false,
+});
+
 const emit = defineEmits<{
     (e: "change-view", view: string, id: string): void;
 }>();
 
-// <-- Edit this to add/remove items or dropdowns -->
+const visibleMenus = computed(() =>
+    menus.value.filter(
+        (menu) => menu.name !== "Admin" || props.isAdmin === true,
+    ),
+);
+
+// Definitions of all items and subitems of the sidebar
 const menus = ref<Menu[]>([
     { name: "Overview", label: "Overview" },
     {
@@ -107,20 +122,39 @@ const menus = ref<Menu[]>([
 
 // pick first entry if no activeView is provided
 const firstEntry = menus.value[0]?.name ?? "";
+// Initialize active view with either the prop value or the first menu entry
 const activeLocal = ref(props.activeView ?? firstEntry);
+// Track which dropdowns are currently open
 const openDropdowns = reactive<Record<string, boolean>>({});
+// Store references to dropdown DOM elements
 const dropdownRefs = ref<Record<string, HTMLElement | null>>({});
+// Store calculated heights for dropdowns
 const dropdownHeights = reactive<Record<string, string>>({});
 
+/**
+ * Check if a specific dropdown is currently open
+ * @param name - The name of the dropdown to check
+ * @returns boolean indicating whether the dropdown is open
+ */
 function isOpen(name: string) {
     return !!openDropdowns[name];
 }
 
+/**
+ * Toggle the open state of a specific dropdown
+ * @param name - The name of the dropdown to toggle
+ */
 function toggleDropdown(name: string) {
     openDropdowns[name] = !openDropdowns[name];
     updateHeights();
 }
 
+/**
+ * Handle view selection and update dropdown states accordingly
+ * @param view - The view to select
+ * @param options - Optional configuration object
+ * @param options.closeDropdowns - Whether to close all dropdowns after selection
+ */
 function select(view: string, options: { closeDropdowns?: boolean } = {}) {
     activeLocal.value = view;
     const id: string = "";
@@ -145,12 +179,21 @@ function select(view: string, options: { closeDropdowns?: boolean } = {}) {
     updateHeights();
 }
 
+/**
+ * Register a dropdown reference for later height calculations
+ * @param name - The name of the dropdown
+ * @param el - The DOM element reference of the dropdown
+ */
 function registerDropdownRef(name: string, el: HTMLElement | null) {
     dropdownRefs.value[name] = el;
     if (!(name in openDropdowns)) openDropdowns[name] = false;
     nextTick(updateHeights);
 }
 
+/**
+ * Update the heights of all dropdowns based on their open state
+ * This is called after any state change that might affect dropdown visibility
+ */
 function updateHeights() {
     nextTick(() => {
         for (const name of Object.keys(dropdownRefs.value)) {
@@ -166,8 +209,9 @@ function updateHeights() {
     });
 }
 
+// Initialize component state when mounted
 onMounted(() => {
-    // initialize dropdown open state based on activeLocal
+    // Set initial dropdown open states based on the active view
     for (const menu of menus.value) {
         openDropdowns[menu.name] = !!(
             menu.items && menu.items.some((i) => i.view === activeLocal.value)
@@ -175,18 +219,13 @@ onMounted(() => {
     }
     updateHeights();
 
-    // emit the first entry if nothing was passed in
-    if (!props.activeView && firstEntry) {
-        emit("change-view", firstEntry);
-    }
-});
-
-onMounted(() => {
+    // load the overview-page after a login, even when the logout appeared on another page
     const view: string = "Overview";
     const id: string = "";
     emit("change-view", { view, id });
 });
 
+// Watch for changes to the active view and update dropdown states accordingly
 watch(activeLocal, () => {
     for (const menu of menus.value) {
         if (
@@ -199,13 +238,28 @@ watch(activeLocal, () => {
     updateHeights();
 });
 
-// keep in sync with prop updates
+// Keep the local active view in sync with the prop value
 watch(
     () => props.activeView,
     (v) => {
         if (v) activeLocal.value = v;
     },
 );
+
+// Watch for changes to admin status and update the Admin dropdown visibility
+watch(
+    () => {
+        props.isAdmin;
+    },
+    (isAdmin) => {
+        // Remove Admin dropdown if isAdmin is false
+        if (!isAdmin) {
+            openDropdowns["Admin"] = false;
+            dropdownHeights["Admin"] = "0px";
+        }
+        updateHeights();
+    },
+);
 </script>
 
 <style scoped>
diff --git a/src/dashboard/app/src/components/storage/checkpoint/checkpoint_delete_modal.vue b/src/dashboard/app/src/components/storage/checkpoint/checkpoint_delete_modal.vue
index 926353f7..7e0c5190 100644
--- a/src/dashboard/app/src/components/storage/checkpoint/checkpoint_delete_modal.vue
+++ b/src/dashboard/app/src/components/storage/checkpoint/checkpoint_delete_modal.vue
@@ -40,12 +40,18 @@
             </div>
         </div>
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
+import { handleAxiosError } from "@/handleAxiosError";
 
 interface Props {
     checkpoint: { uuid: string; name: string } | null;
@@ -56,11 +62,12 @@ const emit = defineEmits<{
     (e: "accept"): void;
     (e: "cancel"): void;
 }>();
+const errorPopupMsg = ref<string>("");
 
 async function handleAccept(checkpoint_uuid: string) {
     if (!checkpoint_uuid) return;
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const ryokan_api = axios.create({
             baseURL: authContext.ryokan_address,
         });
@@ -68,11 +75,13 @@ async function handleAccept(checkpoint_uuid: string) {
         await ryokan_api.delete(`/v1alpha/checkpoint/${checkpoint_uuid}`, {
             headers: { Authorization: `Bearer ${authContext.token}` },
         });
+        emit("accept");
     } catch (err) {
-        console.error("Failed to delete checkpoint", err);
+        errorPopupMsg.value = handleAxiosError(
+            err,
+            "Failed to delete checkpoint",
+        );
     }
-
-    emit("accept");
 }
 
 function cancel() {
@@ -82,7 +91,6 @@ function cancel() {
 
 <style scoped>
 .checkpoint-delete-modal {
-    height: 16rem;
-    width: 20rem;
+    width: 30rem;
 }
 </style>
diff --git a/src/dashboard/app/src/components/storage/checkpoint/checkpoint_overview.vue b/src/dashboard/app/src/components/storage/checkpoint/checkpoint_overview.vue
index 306de027..1d7e268b 100644
--- a/src/dashboard/app/src/components/storage/checkpoint/checkpoint_overview.vue
+++ b/src/dashboard/app/src/components/storage/checkpoint/checkpoint_overview.vue
@@ -67,16 +67,22 @@
             @cancel="cancelDeleteModal"
         />
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, inject } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
 
 import CheckpointDeleteModal from "./checkpoint_delete_modal.vue";
+import { handleAxiosError } from "@/handleAxiosError";
 
+const errorPopupMsg = ref<string>("");
 const checkpoints = ref<{ uuid: string; checkpointName: string }[]>([]);
 const showDeleteModal = ref(false);
 const openDropdown = ref<string | null>(null);
@@ -87,7 +93,7 @@ const icons = inject<{ acceptIcon: string; cancelIcon: string }>("icons")!;
 
 async function fetchCheckpoints() {
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const ryokan_api = axios.create({
             baseURL: authContext.ryokan_address,
         });
@@ -97,7 +103,10 @@ async function fetchCheckpoints() {
         });
         checkpoints.value = response.data.checkpoints;
     } catch (err) {
-        console.error("Failed to load checkpoints", err);
+        errorPopupMsg.value = handleAxiosError(
+            err,
+            "Failed to load checkpoints",
+        );
     }
 }
 
diff --git a/src/dashboard/app/src/components/storage/dataset/dataset_create_modal.vue b/src/dashboard/app/src/components/storage/dataset/dataset_create_modal.vue
index 504b41f9..923afab9 100644
--- a/src/dashboard/app/src/components/storage/dataset/dataset_create_modal.vue
+++ b/src/dashboard/app/src/components/storage/dataset/dataset_create_modal.vue
@@ -17,47 +17,60 @@
 <template>
     <div class="modal-overlay" @click.self="cancel">
         <div class="modal dataset-create-modal">
+            <!-- Modal topbar -->
             <div class="modal-topbar">
                 <span>Create dataset</span>
             </div>
+
+            <!-- Modal content -->
             <div class="modal-content">
-                <input
-                    v-model="form.datasetName"
-                    type="text"
-                    placeholder="Dataset-Name"
-                    required
-                />
-                <div class="tab">
-                    <button
-                        class="tablinks"
-                        :class="{ active: isSelected('csv') }"
-                        @click="selectTab('csv')"
-                    >
-                        CSV
-                    </button>
-                    <button
-                        class="tablinks"
-                        :class="{ active: isSelected('mnist') }"
-                        @click="selectTab('mnist')"
-                    >
-                        MNIST
-                    </button>
+                <div>
+                    <input
+                        v-model="form.datasetName"
+                        type="text"
+                        placeholder="Dataset-Name"
+                        :class="{ invalid_input: datasetNameError }"
+                    />
+                    <p v-if="datasetNameError" class="error-msg">
+                        Dataset-Name must be at least 4 characters
+                    </p>
                 </div>
-                <div class="dataset-tabcontent">
-                    <div v-show="selectedTab === 'csv'">
-                        <label>
-                            <input type="file" @change="onFile2Change" />
-                        </label>
+                <div>
+                    <div class="tab">
+                        <button
+                            class="tablinks"
+                            :class="{ active: isSelected('csv') }"
+                            @click="selectTab('csv')"
+                        >
+                            CSV
+                        </button>
+                        <button
+                            class="tablinks"
+                            :class="{ active: isSelected('mnist') }"
+                            @click="selectTab('mnist')"
+                        >
+                            MNIST
+                        </button>
                     </div>
-                    <div v-show="selectedTab === 'mnist'">
-                        <label>
-                            <input type="file" @change="onFile1Change" />
-                            <input type="file" @change="onFile2Change" />
-                        </label>
+                    <div class="dataset-tabcontent">
+                        <div v-show="selectedTab === 'csv'">
+                            <br />
+                            <label>
+                                <input type="file" @change="onFile2Change" />
+                            </label>
+                        </div>
+                        <div v-show="selectedTab === 'mnist'">
+                            <br />
+                            <label>
+                                <input type="file" @change="onFile1Change" />
+                                <input type="file" @change="onFile2Change" />
+                            </label>
+                        </div>
                     </div>
                 </div>
             </div>
 
+            <!-- Modal bottombar -->
             <div class="modal-bottombar">
                 <div class="modal-actions">
                     <button class="icon-button" @click="handleAccept">
@@ -70,13 +83,18 @@
             </div>
         </div>
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
+import { handleAxiosError } from "@/handleAxiosError";
 
 interface Props {
     icons: { acceptIcon: string; cancelIcon: string };
@@ -86,6 +104,8 @@ const emit = defineEmits<{
     (e: "accept"): void;
     (e: "cancel"): void;
 }>();
+const errorPopupMsg = ref<string>("");
+const datasetNameError = ref(false);
 
 const form = reactive({
     datasetName: "",
@@ -108,6 +128,11 @@ const onFile2Change = (event: Event) => {
 };
 
 async function handleAccept() {
+    datasetNameError.value = form.datasetName.length < 8;
+
+    if (datasetNameError.value) {
+        return;
+    }
     if (selectedTab.value === "mnist") {
         if (!file1.value || !file2.value) return;
 
@@ -116,7 +141,7 @@ async function handleAccept() {
         formData.append("file2", file2.value);
 
         try {
-            const authContext = context.getAuthContext();
+            const authContext = getAuthContext();
             const ryokan_api = axios.create({
                 baseURL: authContext.ryokan_address,
             });
@@ -131,9 +156,11 @@ async function handleAccept() {
                     },
                 },
             );
-            // console.log("Upload success!", response.data);
         } catch (err) {
-            console.error("Upload MNIST-file failed!", err);
+            errorPopupMsg.value = handleAxiosError(
+                err,
+                "Failed to upload MNIST-file",
+            );
         }
     }
 
@@ -144,7 +171,7 @@ async function handleAccept() {
         formData.append("file1", file1.value);
 
         try {
-            const authContext = context.getAuthContext();
+            const authContext = getAuthContext();
             const ryokan_api = axios.create({
                 baseURL: authContext.ryokan_address,
             });
@@ -159,14 +186,15 @@ async function handleAccept() {
                     },
                 },
             );
-            // console.log("Upload success!", response.data);
+
+            emit("accept");
         } catch (err) {
-            console.error("Upload CSV-file failed!", err);
+            errorPopupMsg.value = handleAxiosError(
+                err,
+                "Failed to upload CSV-file",
+            );
         }
     }
-
-    console.log("Submitting form:", form);
-    emit("accept");
 }
 
 function cancel() {
@@ -189,7 +217,6 @@ function isSelected(tab: "csv" | "mnist") {
 
 <style scoped>
 .dataset-create-modal {
-    height: 26rem;
     width: 30rem;
 }
 
@@ -197,4 +224,8 @@ function isSelected(tab: "csv" | "mnist") {
     margin-top: 0.5rem;
     height: 7rem;
 }
+/* is not found when I put this in one of the css files. Don't know why... */
+.invalid_input {
+    border-bottom: 2px solid #ff4d4f;
+}
 </style>
diff --git a/src/dashboard/app/src/components/storage/dataset/dataset_delete_modal.vue b/src/dashboard/app/src/components/storage/dataset/dataset_delete_modal.vue
index 855fb60a..8b44363b 100644
--- a/src/dashboard/app/src/components/storage/dataset/dataset_delete_modal.vue
+++ b/src/dashboard/app/src/components/storage/dataset/dataset_delete_modal.vue
@@ -40,12 +40,18 @@
             </div>
         </div>
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
+import { handleAxiosError } from "@/handleAxiosError";
 
 interface Props {
     dataset: { id: number; name: string } | null;
@@ -56,11 +62,12 @@ const emit = defineEmits<{
     (e: "accept"): void;
     (e: "cancel"): void;
 }>();
+const errorPopupMsg = ref<string>("");
 
 async function handleAccept(dataset_uuid: string) {
     if (!dataset_uuid) return;
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const ryokan_api = axios.create({
             baseURL: authContext.ryokan_address,
         });
@@ -68,11 +75,11 @@ async function handleAccept(dataset_uuid: string) {
         await ryokan_api.delete(`/v1alpha/dataset/${dataset_uuid}`, {
             headers: { Authorization: `Bearer ${authContext.token}` },
         });
+
+        emit("accept");
     } catch (err) {
-        console.error("Failed to delete dataset", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to delete dataset");
     }
-
-    emit("accept");
 }
 
 function cancel() {
@@ -82,7 +89,6 @@ function cancel() {
 
 <style scoped>
 .dataset-delete-modal {
-    height: 16rem;
-    width: 20rem;
+    width: 30rem;
 }
 </style>
diff --git a/src/dashboard/app/src/components/storage/dataset/dataset_overview.vue b/src/dashboard/app/src/components/storage/dataset/dataset_overview.vue
index d87bc03b..09a6f15c 100644
--- a/src/dashboard/app/src/components/storage/dataset/dataset_overview.vue
+++ b/src/dashboard/app/src/components/storage/dataset/dataset_overview.vue
@@ -72,30 +72,34 @@
             @cancel="cancelDeleteModal"
         />
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, inject } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
 import DatasetCreateModal from "./dataset_create_modal.vue";
 import DatasetDeleteModal from "./dataset_delete_modal.vue";
+import { handleAxiosError } from "@/handleAxiosError";
 
+const errorPopupMsg = ref<string>("");
 const datasets = ref<{ uuid: string; datasetName: string; email: string }[]>(
     [],
 );
 const showAddModal = ref(false);
 const showDeleteModal = ref(false);
 const openDropdown = ref<string | null>(null);
-
-const passwordError = ref("");
 const datasetToDelete = ref<{ uuid: string; datasetName: string } | null>(null);
 const icons = inject<{ acceptIcon: string; cancelIcon: string }>("icons")!;
 
 async function fetchDatasets() {
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const ryokan_api = axios.create({
             baseURL: authContext.ryokan_address,
         });
@@ -105,7 +109,7 @@ async function fetchDatasets() {
         });
         datasets.value = response.data.datasets;
     } catch (err) {
-        console.error("Failed to load datasets", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to load datasets");
     }
 }
 
diff --git a/src/dashboard/app/src/components/topbar.vue b/src/dashboard/app/src/components/topbar.vue
index b201086b..b1cd3710 100644
--- a/src/dashboard/app/src/components/topbar.vue
+++ b/src/dashboard/app/src/components/topbar.vue
@@ -20,7 +20,9 @@
         <h1></h1>
 
         <div class="profile-menu" @click.stop="toggleDropdown">
-            <div class="avatar" :style="{ backgroundColor: avatarColor }"></div>
+            <div class="avatar">
+                {{ avatarLetter }}
+            </div>
             <div class="topbar-dropdown" v-if="open">
                 <button @click="logout">Logout</button>
             </div>
@@ -35,11 +37,9 @@ const emit = defineEmits<{ (e: "logout"): void }>();
 const open = ref(false);
 const props = defineProps<{ username: string | null }>();
 
-const avatarColor = computed(() => {
-    if (!props.username) return "#777"; // fallback color
-    return stringToHslColor(props.username);
+const avatarLetter = computed(() => {
+    return props.username ? props.username.charAt(0).toUpperCase() : "";
 });
-
 // toggle dropdown on avatar click
 function toggleDropdown() {
     open.value = !open.value;
@@ -60,12 +60,7 @@ function handleClickOutside(event: MouseEvent) {
     }
 }
 
-// generate random avatar color
 onMounted(() => {
-    const hue = Math.floor(Math.random() * 360);
-    const lightness = 70 + Math.floor(Math.random() * 10);
-    avatarColor.value = `hsl(${hue}, 60%, ${lightness}%)`;
-
     document.addEventListener("click", handleClickOutside);
 });
 
@@ -99,7 +94,6 @@ function stringToHslColor(str: string): string {
     min-height: 150;
 
     font-size: 1.2rem;
-    font-weight: bold;
 
     display: flex;
     align-items: center;
@@ -119,7 +113,16 @@ function stringToHslColor(str: string): string {
     width: 36px;
     height: 36px;
     /* border-radius: 50%; */
-    border: 2px solid white;
+    /* border: 2px solid white; */
+    background-color: var(--color-text);
+    color: var(--color-tile);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 24px;
+    user-select: none;
 }
 
 .topbar-dropdown {
diff --git a/src/dashboard/app/src/components/workload/cluster/cluster_create_modal.vue b/src/dashboard/app/src/components/workload/cluster/cluster_create_modal.vue
index 7491ab64..6c111b90 100644
--- a/src/dashboard/app/src/components/workload/cluster/cluster_create_modal.vue
+++ b/src/dashboard/app/src/components/workload/cluster/cluster_create_modal.vue
@@ -21,20 +21,29 @@
                 <span>Create cluster</span>
             </div>
             <div class="modal-content">
-                <input
-                    v-model="form.clusterName"
-                    type="text"
-                    placeholder="Cluster-Name"
-                    required
-                />
+                <div>
+                    <input
+                        v-model="form.clusterName"
+                        type="text"
+                        placeholder="Cluster-Name"
+                        :class="{ invalid_input: clusterNameError }"
+                    />
+                    <p v-if="clusterNameError" class="error-msg">
+                        Cluster-Name must be at least 4 characters
+                    </p>
+                </div>
+                <br />
                 <div>
                     <label>Cluster template:</label>
                     <textarea
                         id="template_input"
                         v-model="form.clusterTemplate"
                         type="text"
-                        required
+                        :class="{ invalid_input: clusterTemplateError }"
                     ></textarea>
+                    <p v-if="clusterTemplateError" class="error-msg">
+                        Cluster-Template is not allowed to left empty
+                    </p>
                 </div>
             </div>
 
@@ -50,13 +59,18 @@
             </div>
         </div>
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
+import { handleAxiosError } from "@/handleAxiosError";
 
 interface Props {
     icons: { acceptIcon: string; cancelIcon: string };
@@ -67,14 +81,25 @@ const emit = defineEmits<{
     (e: "cancel"): void;
 }>();
 
+const errorPopupMsg = ref<string>("");
+const clusterNameError = ref(false);
+const clusterTemplateError = ref(false);
+
 const form = reactive({
     clusterTemplate: "",
     clusterName: "",
 });
 
 async function handleAccept() {
+    clusterNameError.value = form.clusterName.length < 4;
+    clusterTemplateError.value = form.clusterTemplate.length === 0;
+
+    if (clusterNameError.value || clusterTemplateError.value) {
+        return;
+    }
+
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const hanami_api = axios.create({
             baseURL: authContext.hanami_address,
         });
@@ -89,13 +114,11 @@ async function handleAccept() {
                 headers: { Authorization: `Bearer ${authContext.token}` },
             },
         );
-        // console.log("Upload success!", response.data);
+
+        emit("accept");
     } catch (err) {
-        console.error("Upload MNIST-file failed!", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to create cluster");
     }
-
-    console.log("Submitting form:", form);
-    emit("accept");
 }
 
 function cancel() {
@@ -105,11 +128,15 @@ function cancel() {
 
 <style scoped>
 .cluster-create-modal {
-    height: 35rem;
-    width: 30rem;
+    min-width: 30rem;
 }
 
 #template_input {
     height: 18rem;
 }
+
+/* is not found when I put this in one of the css files. Don't know why... */
+.invalid_input {
+    border-bottom: 2px solid #ff4d4f;
+}
 </style>
diff --git a/src/dashboard/app/src/components/workload/cluster/cluster_delete_modal.vue b/src/dashboard/app/src/components/workload/cluster/cluster_delete_modal.vue
index 58b7162c..38a377be 100644
--- a/src/dashboard/app/src/components/workload/cluster/cluster_delete_modal.vue
+++ b/src/dashboard/app/src/components/workload/cluster/cluster_delete_modal.vue
@@ -40,12 +40,18 @@
             </div>
         </div>
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
+import { handleAxiosError } from "@/handleAxiosError";
 
 interface Props {
     cluster: { uuid: number; name: string } | null;
@@ -56,11 +62,12 @@ const emit = defineEmits<{
     (e: "accept"): void;
     (e: "cancel"): void;
 }>();
+const errorPopupMsg = ref<string>("");
 
 async function handleAccept(cluster_uuid: string) {
     if (!cluster_uuid) return;
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const hanami_api = axios.create({
             baseURL: authContext.hanami_address,
         });
@@ -68,11 +75,11 @@ async function handleAccept(cluster_uuid: string) {
         await hanami_api.delete(`/v1alpha/cluster/${cluster_uuid}`, {
             headers: { Authorization: `Bearer ${authContext.token}` },
         });
+
+        emit("accept");
     } catch (err) {
-        console.error("Failed to delete cluster", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to delete cluster");
     }
-
-    emit("accept");
 }
 
 function cancel() {
@@ -82,7 +89,6 @@ function cancel() {
 
 <style scoped>
 .cluster-delete-modal {
-    height: 16rem;
-    width: 20rem;
+    width: 30rem;
 }
 </style>
diff --git a/src/dashboard/app/src/components/workload/cluster/cluster_overview.vue b/src/dashboard/app/src/components/workload/cluster/cluster_overview.vue
index 9d27a9aa..271a8a37 100644
--- a/src/dashboard/app/src/components/workload/cluster/cluster_overview.vue
+++ b/src/dashboard/app/src/components/workload/cluster/cluster_overview.vue
@@ -77,16 +77,22 @@
             @cancel="cancelDeleteModal"
         />
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, inject } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
 import ClusterCreateModal from "./cluster_create_modal.vue";
 import ClusterDeleteModal from "./cluster_delete_modal.vue";
+import { handleAxiosError } from "@/handleAxiosError";
 
+const errorPopupMsg = ref<string>("");
 const clusters = ref<{ uuid: string; clusterName: string }[]>([]);
 const showAddModal = ref(false);
 const showDeleteModal = ref(false);
@@ -106,7 +112,7 @@ function switchToTasks(cluster_uuid: string) {
 
 async function fetchClusters() {
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const hanami_api = axios.create({
             baseURL: authContext.hanami_address,
         });
@@ -116,7 +122,7 @@ async function fetchClusters() {
         });
         clusters.value = response.data.clusters;
     } catch (err) {
-        console.error("Failed to load clusters", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to load clusters");
     }
 }
 
diff --git a/src/dashboard/app/src/components/workload/task/progress_bar.vue b/src/dashboard/app/src/components/workload/task/progress_bar.vue
new file mode 100644
index 00000000..e50cfe09
--- /dev/null
+++ b/src/dashboard/app/src/components/workload/task/progress_bar.vue
@@ -0,0 +1,140 @@
+<!-- 
+// Copyright 2022-2026 Tobias Anker <tobias.anker@kitsunemimi.moe>
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+//         http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License. 
+-->
+
+<template>
+    <div class="progress-bar-container">
+        <div class="progress-bar" :style="{ width: progress + '%' }"></div>
+        <span class="progress-text">{{ progress }}%</span>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, onUnmounted } from "vue";
+import axios, { AxiosInstance } from "axios";
+import { getAuthContext } from "@/auth_context";
+
+export default defineComponent({
+    name: "ProgressBar",
+    props: {
+        task_uuid: {
+            type: String,
+            required: true,
+        },
+        cluster_uuid: {
+            type: String,
+            required: true,
+        },
+    },
+    setup(props) {
+        const progress = ref(0);
+        let intervalId: number | undefined;
+
+        // initialized once
+        let hanami_api: AxiosInstance;
+        let sakura_api: AxiosInstance;
+        let authContext: any;
+
+        const initApis = async () => {
+            authContext = getAuthContext();
+
+            hanami_api = axios.create({
+                baseURL: authContext.hanami_address,
+                headers: { Authorization: `Bearer ${authContext.token}` },
+            });
+
+            // get torii port only once
+            const cluster_response = await hanami_api.get(
+                `/v1alpha/cluster/${props.cluster_uuid}`,
+            );
+
+            const torii_port = cluster_response.data.torii_port;
+
+            sakura_api = axios.create({
+                baseURL: `${authContext.torii_base_address}:${torii_port}`,
+                headers: { Authorization: `Bearer ${authContext.token}` },
+            });
+        };
+
+        const fetchProgress = async () => {
+            try {
+                const task_response = await sakura_api.get(
+                    `/v1alpha/cluster/${props.cluster_uuid}/task/${props.task_uuid}`,
+                );
+
+                // calculate current progress
+                let state =
+                    (100 / task_response.data.total_number_of_cycles) *
+                    task_response.data.total_number_of_epochs;
+                state *=
+                    task_response.data.current_epoch *
+                        task_response.data.total_number_of_cycles +
+                    task_response.data.current_cycle;
+
+                // workaround for the finish-state, when the epoch becomes 1 too big for the calculation
+                if (state > 100) state = 100;
+
+                // round value to full integer
+                progress.value = Math.ceil(state);
+
+                if (progress.value >= 100 && intervalId) {
+                    // if progress is finished, than stop the update
+                    // to avoid unnecessary requests to the backend
+                    clearInterval(intervalId);
+                }
+            } catch (err) {
+                console.error("Failed to load tasks", err);
+            }
+        };
+
+        onMounted(async () => {
+            await initApis();
+            await fetchProgress();
+            intervalId = window.setInterval(fetchProgress, 1000);
+        });
+
+        onUnmounted(() => {
+            if (intervalId) clearInterval(intervalId);
+        });
+
+        return { progress };
+    },
+});
+</script>
+
+<style scoped>
+.progress-bar-container {
+    width: 100%;
+    background-color: var(--color-text);
+    position: relative;
+    height: 20px;
+}
+
+.progress-bar {
+    height: 100%;
+    background-color: var(--color-highlight);
+    transition: width 0.3s ease;
+}
+
+.progress-text {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 12px;
+    font-weight: bold;
+    color: black; /*  invert(var(--color-text)) doesn't for unknown reason*/
+}
+</style>
diff --git a/src/dashboard/app/src/components/workload/task/task_create_modal.vue b/src/dashboard/app/src/components/workload/task/task_create_modal.vue
index 6843f0ca..bbf73817 100644
--- a/src/dashboard/app/src/components/workload/task/task_create_modal.vue
+++ b/src/dashboard/app/src/components/workload/task/task_create_modal.vue
@@ -21,12 +21,18 @@
                 <span>Create task</span>
             </div>
             <div class="modal-content">
-                <input
-                    v-model="form.taskName"
-                    type="text"
-                    placeholder="Task-Name"
-                    required
-                />
+                <div>
+                    <input
+                        v-model="form.taskName"
+                        type="text"
+                        placeholder="Task-Name"
+                        :class="{ invalid_input: taskNameError }"
+                    />
+                    <p v-if="taskNameError" class="error-msg">
+                        Task-Name must be at least 4 characters
+                    </p>
+                </div>
+                <br />
                 <div class="tab">
                     <button
                         class="tablinks"
@@ -151,6 +157,10 @@
             </div>
         </div>
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -159,8 +169,14 @@ import axios from "axios";
 
 import TaskIoItem from "./task_io_item.vue";
 import TaskResultItem from "./task_result_item.vue";
-import context from "../../../auth_context";
-
+import { getAuthContext } from "@/auth_context";
+import { handleAxiosError } from "@/handleAxiosError";
+
+/**
+ * @property cluster_uuid - Unique identifier for the cluster
+ * @property torii_port - Port number for the Torii service
+ * @property icons - Object containing icon paths for UI elements
+ */
 interface Props {
     cluster_uuid: string;
     torii_port: number;
@@ -168,15 +184,20 @@ interface Props {
 }
 const props = defineProps<Props>();
 
+// Refs for storing dynamic component data
 const inputItems = ref<any[]>([]);
 const outputItems = ref<any[]>([]);
 const resultItems = ref<any[]>([]);
+const errorPopupMsg = ref<string>("");
+const taskNameError = ref(false);
 
+// Emits events to parent component
 const emit = defineEmits<{
     (e: "accept"): void;
     (e: "cancel"): void;
 }>();
 
+// Reactive form data
 const form = reactive({
     inputMapping: "",
     outputMapping: "",
@@ -186,22 +207,31 @@ const form = reactive({
     datasets: [],
 });
 
-async function handleAccept(cluster_uuid: string, torii_port: number) {
-    if (selectedTab.value === "Train") {
-        console.log("selected checkpoint-uuid: ", selectedCheckpointUuid.value);
+/**
+ * Handles the accept action for creating a new task
 
-        const authContext = context.getAuthContext();
-        const inputs = inputItems.value.map((item) => item.getData());
-        const outputs = outputItems.value.map((item) => item.getData());
+ * @param cluster_uuid - Cluster UUID
+ * @param torii_port - Torii service port
+ */
+async function handleAccept(cluster_uuid: string, torii_port: number) {
+    // Validate task name length
+    taskNameError.value = form.taskName.length < 4;
 
-        // console.log("+inputs", inputs);
-        // console.log("outputs: ", outputs);
+    if (taskNameError.value) {
+        return;
+    }
 
-        const sakura_api = axios.create({
-            baseURL: `${authContext.torii_base_address}:${torii_port}`,
-        });
+    try {
+        // Handle different task types based on selected tab
+        if (selectedTab.value === "Train") {
+            // Train task creation
+            const authContext = getAuthContext();
+            const inputs = inputItems.value.map((item) => item.getData());
+            const outputs = outputItems.value.map((item) => item.getData());
+            const sakura_api = axios.create({
+                baseURL: `${authContext.torii_base_address}:${torii_port}`,
+            });
 
-        try {
             const response = await sakura_api.post(
                 `/v1alpha/cluster/${cluster_uuid}/task/train`,
                 {
@@ -212,119 +242,139 @@ async function handleAccept(cluster_uuid: string, torii_port: number) {
                     time_length: 1,
                 },
                 {
-                    headers: { Authorization: `Bearer ${authContext.token}` },
+                    headers: {
+                        Authorization: `Bearer ${authContext.token}`,
+                    },
                 },
             );
-            console.log("Upload success!", response.data);
-        } catch (err) {
-            console.error("Failed to load dataset-columns", err);
         }
-    }
-
-    if (selectedTab.value === "Request") {
-        console.log("selected checkpoint-uuid: ", selectedCheckpointUuid.value);
-        const authContext = context.getAuthContext();
-
-        const inputs = inputItems.value.map((item) => item.getData());
-        const results = resultItems.value.map((item) => item.getData());
-
-        // console.log("+inputs", inputs);
-        // console.log("results: ", results);
-
-        const sakura_api = axios.create({
-            baseURL: `${authContext.torii_base_address}:${torii_port}`,
-        });
-
-        await sakura_api.post(
-            `/v1alpha/cluster/${cluster_uuid}/task/request`,
-            {
-                name: form.taskName,
-                inputs: inputs,
-                outputs: results,
-                time_length: 1,
-            },
-            {
-                headers: { Authorization: `Bearer ${authContext.token}` },
-            },
-        );
-        // console.log("Upload success!", response.data);
-    }
-
-    if (selectedTab.value === "Checkpoint save") {
-        console.log("selected checkpoint-uuid: ", selectedCheckpointUuid.value);
 
-        const authContext = context.getAuthContext();
+        if (selectedTab.value === "Request") {
+            // Request task creation
+            const authContext = getAuthContext();
+            const inputs = inputItems.value.map((item) => item.getData());
+            const results = resultItems.value.map((item) => item.getData());
+            const sakura_api = axios.create({
+                baseURL: `${authContext.torii_base_address}:${torii_port}`,
+            });
+
+            await sakura_api.post(
+                `/v1alpha/cluster/${cluster_uuid}/task/request`,
+                {
+                    name: form.taskName,
+                    inputs: inputs,
+                    outputs: results,
+                    time_length: 1,
+                },
+                {
+                    headers: { Authorization: `Bearer ${authContext.token}` },
+                },
+            );
+        }
 
-        const sakura_api = axios.create({
-            baseURL: `${authContext.torii_base_address}:${torii_port}`,
-        });
+        if (selectedTab.value === "Checkpoint save") {
+            // Checkpoint save task creation
+            const authContext = getAuthContext();
+            const sakura_api = axios.create({
+                baseURL: `${authContext.torii_base_address}:${torii_port}`,
+            });
 
-        await sakura_api.post(
-            `/v1alpha/cluster/${cluster_uuid}/task/checkpoint_save`,
-            {
-                name: form.taskName,
-            },
-            {
-                headers: { Authorization: `Bearer ${authContext.token}` },
-            },
-        );
-        // console.log("Upload success!", response.data);
-    }
+            await sakura_api.post(
+                `/v1alpha/cluster/${cluster_uuid}/task/checkpoint_save`,
+                {
+                    name: form.taskName,
+                },
+                {
+                    headers: { Authorization: `Bearer ${authContext.token}` },
+                },
+            );
+        }
 
-    if (selectedTab.value === "Checkpoint restore") {
-        console.log("selected checkpoint-uuid: ", selectedCheckpointUuid.value);
-        const authContext = context.getAuthContext();
+        if (selectedTab.value === "Checkpoint restore") {
+            // Checkpoint restore task creation
+            const authContext = getAuthContext();
+            const sakura_api = axios.create({
+                baseURL: `${authContext.torii_base_address}:${torii_port}`,
+            });
 
-        const sakura_api = axios.create({
-            baseURL: `${authContext.torii_base_address}:${torii_port}`,
-        });
+            await sakura_api.post(
+                `/v1alpha/cluster/${cluster_uuid}/task/checkpoint_restore`,
+                {
+                    name: form.taskName,
+                    checkpoint_uuid: selectedCheckpointUuid.value,
+                },
+                {
+                    headers: { Authorization: `Bearer ${authContext.token}` },
+                },
+            );
+        }
 
-        await sakura_api.post(
-            `/v1alpha/cluster/${cluster_uuid}/task/checkpoint_restore`,
-            {
-                name: form.taskName,
-                checkpoint_uuid: selectedCheckpointUuid.value,
-            },
-            {
-                headers: { Authorization: `Bearer ${authContext.token}` },
-            },
-        );
-        // console.log("Upload success!", response.data);
+        // Notify parent component of successful task creation
+        emit("accept");
+    } catch (err) {
+        // Handle and display any errors that occur during task creation
+        errorPopupMsg.value = handleAxiosError(err, "Failed to create task");
     }
-
-    console.log("Submitting form:", form);
-    emit("accept");
 }
 
+/**
+ * Handles the cancel action
+ * Notifies parent component that task creation was cancelled
+ */
 function cancel() {
     emit("cancel");
 }
 
-//=============================================================================
-// Tabs
-//=============================================================================
+/**
+ * Current selected tab in the UI
+ * Determines which type of task is being created
+ */
 const selectedTab = ref<
     "Train" | "Request" | "Checkpoint save" | "Checkpoint restore"
 >("Train");
 
+/**
+ * Selects a tab in the UI
+
+ * @param tab - The tab to select
+ */
 function selectTab(
     tab: "Train" | "Request" | "Checkpoint save" | "Checkpoint restore",
 ) {
     selectedTab.value = tab;
 }
 
+/**
+ * Checks if a tab is currently selected
+
+ * @param tab - The tab to check
+
+ * @returns true if the tab is selected, false otherwise
+ */
 function isSelected(
     tab: "Train" | "Request" | "Checkpoint save" | "Checkpoint restore",
 ) {
     return selectedTab.value === tab;
 }
 
+/**
+ * List of available checkpoints
+ * Used for checkpoint restore operations
+ */
 const checkpoints = ref<{ uuid: string; checkpointName: string }[]>([]);
+
+/**
+ * Currently selected checkpoint UUID
+ * Used when creating a checkpoint restore task
+ */
 const selectedCheckpointUuid = ref<string>("");
 
+/**
+ * Fetches available checkpoints from the Ryokan service
+ */
 async function fetchCheckpoints() {
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
 
         const ryokan_api = axios.create({
             baseURL: authContext.ryokan_address,
@@ -333,20 +383,24 @@ async function fetchCheckpoints() {
         const response = await ryokan_api.get("/v1alpha/checkpoint", {
             headers: { Authorization: `Bearer ${authContext.token}` },
         });
-        console.log(response);
         checkpoints.value = response.data.checkpoints;
-        console.log(checkpoints.value);
         if (response.data.checkpoints.length > 0) {
             selectedCheckpointUuid.value = checkpoints.value[0].uuid; // default to first item
         }
     } catch (err) {
-        console.error("Failed to load checkpoints", err);
+        errorPopupMsg.value = handleAxiosError(
+            err,
+            "Failed to load checkpoints",
+        );
     }
 }
 
+/**
+ * Fetches cluster input and output information from the Hanami service
+ */
 async function fetchClusterIo() {
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
 
         const hanami_api = axios.create({
             baseURL: authContext.hanami_address,
@@ -361,16 +415,20 @@ async function fetchClusterIo() {
 
         form.cluster_inputs = resp.data.inputs;
         form.cluster_outputs = resp.data.outputs;
-        console.log("Loaded inputs: ", form.cluster_inputs);
-        console.log("Loaded outputs: ", form.cluster_outputs);
     } catch (err) {
-        console.error("Failed to load cluster input- and output-names", err);
+        errorPopupMsg.value = handleAxiosError(
+            err,
+            "Failed to load cluster input- and output-names",
+        );
     }
 }
 
+/**
+ * Fetches available datasets from the Ryokan service
+ */
 async function fetchDatasets() {
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
 
         const ryokan_api = axios.create({
             baseURL: authContext.ryokan_address,
@@ -381,12 +439,12 @@ async function fetchDatasets() {
         });
 
         form.datasets = resp.data.datasets;
-        console.log("Loaded datasets: ", form.datasets);
     } catch (err) {
-        console.error("Failed to load datasets", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to load datasets");
     }
 }
 
+// Initialize component by fetching required data when mounted
 onMounted(fetchClusterIo);
 onMounted(fetchDatasets);
 onMounted(fetchCheckpoints);
@@ -412,4 +470,9 @@ onMounted(fetchCheckpoints);
     margin-top: 0.5rem;
     height: 24rem;
 }
+
+/* is not found when I put this in one of the css files. Don't know why... */
+.invalid_input {
+    border-bottom: 2px solid #ff4d4f;
+}
 </style>
diff --git a/src/dashboard/app/src/components/workload/task/task_io_item.vue b/src/dashboard/app/src/components/workload/task/task_io_item.vue
index 9d793b38..9afb376f 100644
--- a/src/dashboard/app/src/components/workload/task/task_io_item.vue
+++ b/src/dashboard/app/src/components/workload/task/task_io_item.vue
@@ -36,13 +36,18 @@
             </option>
         </select>
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
+import { handleAxiosError } from "@/handleAxiosError";
 
 interface Props {
     itemName: string;
@@ -55,6 +60,7 @@ const datasets = ref<{ uuid: string; datasetName: string }[]>([]);
 
 const selectedColumn = ref<string>("");
 const datasetColumns = ref<{ columnName: string }[]>([]);
+const errorPopupMsg = ref<string>("");
 
 function getData() {
     return {
@@ -69,7 +75,7 @@ defineExpose({
 
 async function fetchDatasetColumns() {
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
 
         const ryokan_api = axios.create({
             baseURL: authContext.ryokan_address,
@@ -87,12 +93,14 @@ async function fetchDatasetColumns() {
             selectedColumn.value = datasetColumns.value[0]; // default to first item
         }
     } catch (err) {
-        console.error("Failed to load dataset-columns", err);
+        errorPopupMsg.value = handleAxiosError(
+            err,
+            "Failed to load dataset-columns",
+        );
     }
 }
 
 async function onDatasetSelected() {
-    // console.log("Selected:", selectedDatasetUuid.value);
     await fetchDatasetColumns();
 }
 
diff --git a/src/dashboard/app/src/components/workload/task/task_overview.vue b/src/dashboard/app/src/components/workload/task/task_overview.vue
index 56540416..d800a019 100644
--- a/src/dashboard/app/src/components/workload/task/task_overview.vue
+++ b/src/dashboard/app/src/components/workload/task/task_overview.vue
@@ -29,7 +29,6 @@
                         <th>UUID</th>
                         <th>Name</th>
                         <th>Type</th>
-                        <th>State</th>
                         <th>Progress</th>
                         <th>Actions</th>
                     </tr>
@@ -39,19 +38,11 @@
                         <td>{{ task.uuid }}</td>
                         <td>{{ task.name }}</td>
                         <td>{{ task.task_type }}</td>
-                        <td>{{ task.state }}</td>
                         <td>
                             <ProgressBar
-                                :value="
-                                    parseFloat(
-                                        (
-                                            (task.current_epoch /
-                                                task.total_number_of_epochs) *
-                                            100
-                                        ).toFixed(1),
-                                    )
-                                "
-                            ></ProgressBar>
+                                :task_uuid="task.uuid"
+                                :cluster_uuid="props.id"
+                            />
                         </td>
                         <td>
                             <!-- Dropdown menu -->
@@ -86,35 +77,36 @@
             @cancel="cancelAddModal"
         />
     </div>
+    <div v-if="errorPopupMsg" class="error-popup">
+        <button class="error-close-btn" @click="errorPopupMsg = ''">✕</button>
+        {{ errorPopupMsg }}
+    </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, inject } from "vue";
 import "primevue/resources/themes/saga-blue/theme.css";
-import ProgressBar from "primevue/progressbar";
 import axios from "axios";
 
-import context from "../../../auth_context";
+import { getAuthContext } from "@/auth_context";
 import TaskCreateModal from "./task_create_modal.vue";
+import ProgressBar from "./progress_bar.vue";
+import { handleAxiosError } from "@/handleAxiosError";
 
 const props = defineProps<{
     id: string | null;
 }>();
 
+const errorPopupMsg = ref<string>("");
 const tasks = ref<{ uuid: string; taskName: string }[]>([]);
 const showAddModal = ref(false);
 const openDropdown = ref<string | null>(null);
 const icons = inject<{ acceptIcon: string; cancelIcon: string }>("icons")!;
 var torii_port = 0;
 
-// const logArrayElements = (element, index /*, array */) => {
-//   console.log(`a[${index}] = ${element.total_number_of_epochs}`);
-// };
-
 async function fetchTasks() {
-    console.log("cluster-uuid: ", props.id);
     try {
-        const authContext = context.getAuthContext();
+        const authContext = getAuthContext();
         const hanami_api = axios.create({
             baseURL: authContext.hanami_address,
         });
@@ -139,9 +131,8 @@ async function fetchTasks() {
             },
         );
         tasks.value = task_response.data.tasks;
-        // tasks.value.forEach(logArrayElements);
     } catch (err) {
-        console.error("Failed to load tasks", err);
+        errorPopupMsg.value = handleAxiosError(err, "Failed to load tasks");
     }
 }
 
@@ -195,15 +186,10 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-.overview-table td:nth-child(3) {
-    width: 10rem;
-}
-
-.overview-table td:nth-child(4) {
-    width: 10rem;
-}
-
 .overview-table td:nth-child(2) {
     width: 15rem;
 }
+.overview-table td:nth-child(3) {
+    width: 10rem;
+}
 </style>
diff --git a/src/dashboard/app/src/config.ts b/src/dashboard/app/src/config.ts
index de9ff039..ab46e08f 100644
--- a/src/dashboard/app/src/config.ts
+++ b/src/dashboard/app/src/config.ts
@@ -16,24 +16,41 @@ export type AppConfig = {
     apiUrl: string;
 };
 
+// Private configuration storage
 let config: AppConfig | null = null;
 
-export async function loadConfig() {
-    console.log("Loading config.json...");
-    const res = await fetch("/config.json", { cache: "no-store" });
-    console.log("Fetch result:", res);
-
-    if (!res.ok) {
-        throw new Error("Failed to load config.json");
+/**
+ * Loads the application configuration from config.json
+ *
+ * @throws {Error} If the configuration file cannot be loaded
+ */
+export async function loadConfig(): Promise<void> {
+    try {
+        const response = await fetch("/config.json", { cache: "no-store" });
+        if (!response.ok) {
+            throw new Error(
+                `Failed to load configuration: ${response.statusText}`,
+            );
+        }
+        config = await response.json();
+    } catch (error) {
+        console.error("Error loading configuration:", error);
+        throw error; // Re-throw to allow caller to handle
     }
-
-    config = await res.json();
-    console.log("Config loaded:", config);
 }
 
+/**
+ * Retrieves the current application configuration
+ *
+ * @returns {AppConfig} The loaded configuration
+ *
+ * @throws {Error} If the configuration hasn't been loaded yet
+ */
 export function getConfig(): AppConfig {
     if (config === null) {
-        throw new Error("Config not loaded yet");
+        throw new Error(
+            "Configuration not loaded. Please call loadConfig() first.",
+        );
     }
     return config;
 }
diff --git a/src/dashboard/app/src/handleAxiosError.ts b/src/dashboard/app/src/handleAxiosError.ts
new file mode 100644
index 00000000..cf428552
--- /dev/null
+++ b/src/dashboard/app/src/handleAxiosError.ts
@@ -0,0 +1,49 @@
+// Copyright 2022-2026 Tobias Anker <tobias.anker@kitsunemimi.moe>
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+//     http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import axios, { AxiosError } from "axios";
+
+/**
+ * Handles and formats Axios errors into user-friendly messages
+ *
+ * @param err - The AxiosError to handle
+ * @param baseMessage - Base error message to use as attachment for the messages or as replacement when no specific message is available
+ *
+ * @returns Formatted error message string
+ */
+export function handleAxiosError(
+    err: AxiosError,
+    baseMessage = "An unexpected error occurred",
+): string {
+    // Check if the error is an AxiosError
+    if (!axios.isAxiosError(err)) {
+        return baseMessage;
+    }
+
+    // Handle response errors (when the request was made and the server responded)
+    if (err.response) {
+        const status = err.response.status;
+        const message = err.response.data?.message ?? baseMessage;
+
+        return `${baseMessage}: API error ${status}: ${message}`;
+    }
+
+    // Handle request errors (when the request was made but no response was received)
+    if (err.request) {
+        return `${baseMessage}: API did not respond`;
+    }
+
+    // Handle other errors (when the request was not made)
+    return `${baseMessage}: ${err.message}`;
+}
diff --git a/src/dashboard/app/src/main.ts b/src/dashboard/app/src/main.ts
index ab1739d2..771992d4 100644
--- a/src/dashboard/app/src/main.ts
+++ b/src/dashboard/app/src/main.ts
@@ -13,8 +13,8 @@
 // limitations under the License.
 
 import { createApp } from "vue";
-import App from "./App.vue";
-import { loadConfig } from "./config";
+import App from "@/App.vue";
+import { loadConfig } from "@/config";
 
 async function bootstrap() {
     await loadConfig();
diff --git a/src/dashboard/app/src/styles/card.css b/src/dashboard/app/src/styles/card.css
index f4a70313..5bf72a38 100644
--- a/src/dashboard/app/src/styles/card.css
+++ b/src/dashboard/app/src/styles/card.css
@@ -27,6 +27,8 @@ limitations under the License.
     margin: 0.5rem; /* space around the whole overview */
     margin-top: 1.5rem;
     margin-bottom: 2.5rem;
+    margin-right: 1rem;
+    margin-left: 1rem;
 }
 
 .card-label {
diff --git a/src/dashboard/app/src/styles/modal.css b/src/dashboard/app/src/styles/modal.css
index 44596707..6a078eba 100644
--- a/src/dashboard/app/src/styles/modal.css
+++ b/src/dashboard/app/src/styles/modal.css
@@ -24,9 +24,10 @@ limitations under the License.
     text-align: center;
     font-size: 1.5rem;
 
-    height: 5rem;
-    padding: 1rem 1rem;
+    height: 4rem;
+    padding: 1rem;
 }
+
 .modal-content {
     display: flex;
     flex-direction: column;
@@ -34,6 +35,10 @@ limitations under the License.
 
     gap: 1rem;
     padding: 1.5rem;
+
+    height: auto;
+    min-height: auto;
+    overflow: visible;
 }
 
 .modal-bottombar {
@@ -74,12 +79,13 @@ limitations under the License.
     display: flex;
     justify-content: center;
     z-index: 1000;
+    align-items: center;
 }
 
 .modal {
     background-color: var(--color-background);
     box-shadow: var(--box-shadow-header);
-    margin: 5% auto;
+    margin: 0;
     display: flex;
     flex-direction: column;
     gap: 1rem;
diff --git a/src/dashboard/app/src/styles/other.css b/src/dashboard/app/src/styles/other.css
index a38b4054..469228c5 100644
--- a/src/dashboard/app/src/styles/other.css
+++ b/src/dashboard/app/src/styles/other.css
@@ -21,14 +21,14 @@ limitations under the License.
 }
 
 .error-msg {
-    background-color: #ffc8c8; /* soft red box */
-    color: #000; /* black text */
-    border: 1px solid #ff4d4d; /* stronger border to match */
-    padding: 0.5rem 0.75rem; /* comfy spacing */
-    border-radius: 4px; /* cute rounded corners~ */
-    margin-top: 0.5rem; /* some space above */
-    width: 100%; /* full width inside the bottom bar */
-    text-align: center; /* centered text, optional */
+    background-color: #ffc8c8;
+    color: #000;
+    border: 1px solid #ff4d4d;
+    padding: 0.5rem 0.75rem;
+    border-radius: 4px;
+    margin-top: 0.5rem;
+    width: 100%;
+    text-align: center;
     box-sizing: border-box;
 }
 
@@ -52,6 +52,10 @@ limitations under the License.
     max-width: 300px;
 }
 
+.invalid_input {
+    border-bottom: 2px solid #ff4d4f;
+}
+
 /* little ✕ button in the corner */
 .error-close-btn {
     position: absolute;
diff --git a/src/dashboard/app/tsconfig.json b/src/dashboard/app/tsconfig.json
index f3c5bc10..4ecb5c05 100644
--- a/src/dashboard/app/tsconfig.json
+++ b/src/dashboard/app/tsconfig.json
@@ -8,7 +8,11 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "useDefineForClassFields": true
+    "useDefineForClassFields": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
diff --git a/src/dashboard/app/vite.config.ts b/src/dashboard/app/vite.config.ts
index 91d95e55..4e8e2c27 100644
--- a/src/dashboard/app/vite.config.ts
+++ b/src/dashboard/app/vite.config.ts
@@ -14,10 +14,16 @@
 
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import { fileURLToPath, URL } from "node:url";
 
 export default defineConfig({
   plugins: [vue()],
   root: ".",
+  resolve: {
+      alias: {
+          "@": fileURLToPath(new URL("./src", import.meta.url)),
+      },
+  },
   server: {
     host: "0.0.0.0",
     port: 5173