diff --git a/src/api/index.ts b/src/api/index.ts
index 4d84262..0c6076a 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -7,11 +7,13 @@ import { StatusCodes } from "http-status-codes";
 import router from "@/router"
 
 axios.interceptors.request.use((config: any) => {
+  // TODO: pass csrf token
   const token = store.getters["user/getUserToken"];
   if (token) {
-    config.headers.Authorization =  "Bearer " + token;
+    config.headers["api_key"] =  token;
     config.headers["Content-Type"] = "application/json";
   }
+
   return config;
 });
 
@@ -19,6 +21,19 @@ axios.interceptors.request.use((config: any) => {
 axios.interceptors.response.use(function (response) {
   // Any status code that lie within the range of 2xx cause this function to trigger
   // Do something with response data
+
+  // TODO: explore more on a secure way to store the csrf token
+  // Cannot store it in cookies or localStorage as its not safe
+  // https://stackoverflow.com/questions/67062876/is-it-secure-to-store-a-csrf-token-value-in-the-dom
+  // https://stackoverflow.com/questions/62289684/what-is-the-correct-way-for-a-client-to-store-a-csrf-token
+  const csrfToken = response.headers["x-csrf-token"]
+  const meta = document.createElement("meta")
+  meta.name = "csrf"
+  meta.content = csrfToken
+  document.getElementsByTagName("head")[0].appendChild(meta)
+
+  document.cookie = `x-csrf-token=${csrfToken}`
+
   return response;
 }, function (error) {
   // TODO Handle it in a better way
@@ -66,7 +81,8 @@ const api = async (customConfig: any) => {
     url: customConfig.url,
     method: customConfig.method,
     data: customConfig.data,
-    params: customConfig.params
+    params: customConfig.params,
+    // withCredentials: true
   }
 
   const baseURL = store.getters["user/getInstanceUrl"];
diff --git a/src/store/modules/user/actions.ts b/src/store/modules/user/actions.ts
index c5a2f04..d39d991 100644
--- a/src/store/modules/user/actions.ts
+++ b/src/store/modules/user/actions.ts
@@ -36,7 +36,6 @@ const actions: ActionTree<UserState, RootState> = {
       console.error("error", err);
       return Promise.reject(new Error(err))
     }
-    // return resp
   },
 
   /**
diff --git a/src/views/BrokeringRuns.vue b/src/views/BrokeringRuns.vue
index 471b41c..b9f6c33 100644
--- a/src/views/BrokeringRuns.vue
+++ b/src/views/BrokeringRuns.vue
@@ -26,8 +26,8 @@
               {{ "Description" }}
             </ion-item>
             <ion-item>
-              {{ "<Frequency>" }}
-              {{ "<Runtime>" }}
+              <ion-label>{{ "<Frequency>" }}</ion-label>
+              <ion-label slot="end">{{ "<Runtime>" }}</ion-label>
             </ion-item>
             <ion-item>
               {{ "Created at <time>" }}
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 4e317b7..4e5d38f 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -2,7 +2,7 @@
   <ion-page>
     <ion-content>
       <div class="flex">
-        <form class="login-container" @keyup.enter="login(form)" @submit.prevent="login(form)">
+        <form class="login-container" @keyup.enter="login(form)" @submit.prevent>
           <Logo />
 
           <ion-item lines="full">
@@ -73,7 +73,7 @@ export default defineComponent({
           this.password = ""
           this.$router.push("/")
         }
-      })
+      }).catch(err => err)
     }
   },
   setup() {