diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
index adb20277c..0082dba12 100644
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -7,6 +7,7 @@ import migration from "./migration";
 import myUtils from "./upload";
 import category from "./category";
 import meta from "./meta";
+import users from "./users"
 
 
 export default {
@@ -19,4 +20,5 @@ export default {
   utils: myUtils,
   categories: category,
   meta: meta,
+  users: users
 };
diff --git a/frontend/src/api/users.js b/frontend/src/api/users.js
new file mode 100644
index 000000000..e3f1d0aca
--- /dev/null
+++ b/frontend/src/api/users.js
@@ -0,0 +1,23 @@
+import { baseURL } from "./api-utils";
+import { apiReq } from "./api-utils";
+const authPrefix = baseURL + "auth/";
+
+const authURLs = {
+  token: `${authPrefix}token`,
+};
+
+// const usersURLs = {
+
+// }
+
+export default {
+  async login(formData) {
+    let response =  await apiReq.post(authURLs.token, formData, {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    });
+    console.log(response);
+    return response.data;
+  },
+};
diff --git a/frontend/src/components/Login/LoginForm.vue b/frontend/src/components/Login/LoginForm.vue
index 4d7f3db95..f0a981974 100644
--- a/frontend/src/components/Login/LoginForm.vue
+++ b/frontend/src/components/Login/LoginForm.vue
@@ -32,7 +32,9 @@
             light="light"
             prepend-icon="mdi-lock"
             :label="$t('login.password')"
-            type="password"
+            :type="showPassword ? 'text' : 'password'"
+            :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+            @click:append="showPassword = !showPassword"
           ></v-text-field>
           <v-checkbox
             class="mb-2 mt-0"
@@ -84,6 +86,7 @@ export default {
   data() {
     return {
       showLogin: false,
+      showPassword: false,
       user: {
         email: "",
         password: "",
@@ -98,7 +101,10 @@ export default {
   },
   methods: {
     async login() {
-      let key = await api.login(this.user.email, this.user.password);
+      let formData = new FormData();
+      formData.append("username", this.user.email);
+      formData.append("password", this.user.password);
+      let key = await api.users.login(formData);
       console.log(key);
     },
   },
diff --git a/frontend/src/components/UI/AddRecipeFab.vue b/frontend/src/components/UI/AddRecipeFab.vue
index 4833ad725..c3f9c3e0f 100644
--- a/frontend/src/components/UI/AddRecipeFab.vue
+++ b/frontend/src/components/UI/AddRecipeFab.vue
@@ -2,10 +2,19 @@
   <div class="text-center">
     <v-dialog v-model="addRecipe" width="650" @click:outside="reset">
       <v-card :loading="processing">
-        <v-app-bar  dark color="primary mb-2">
-          <v-icon large left>
+        <v-app-bar dark color="primary mb-2">
+          <v-icon large left v-if="!processing">
             mdi-link
           </v-icon>
+          <v-progress-circular
+            v-else
+            indeterminate
+            color="white"
+            large
+            class="mr-2"
+          >
+          </v-progress-circular>
+
           <v-toolbar-title class="headline">
             {{ $t("new-recipe.from-url") }}
           </v-toolbar-title>
@@ -40,7 +49,12 @@
           <v-btn color="grey" text @click="reset">
             {{ $t("general.close") }}
           </v-btn>
-          <v-btn color="success" text @click="createRecipe">
+          <v-btn
+            color="success"
+            text
+            @click="createRecipe"
+            :loading="processing"
+          >
             {{ $t("general.submit") }}
           </v-btn>
         </v-card-actions>