diff --git a/frontend/src/assets/logo_white.png b/frontend/src/assets/logo_white.png
new file mode 100644
index 0000000..319d3ab
Binary files /dev/null and b/frontend/src/assets/logo_white.png differ
diff --git a/frontend/src/assets/logo_white.png:Zone.Identifier b/frontend/src/assets/logo_white.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/CreateFlist.vue b/frontend/src/components/CreateFlist.vue
index 7d06e76..4cfb143 100644
--- a/frontend/src/components/CreateFlist.vue
+++ b/frontend/src/components/CreateFlist.vue
@@ -1,10 +1,127 @@
 <template>
-   <Navbar/>
-    <v-main>
+  <v-app>
+    <Navbar />
+    <v-main class="d-flex flex-column justify-center" height="90%">
+      <v-container fluid>
+        <v-row justify="center">
+          <v-col :cols="8">
+            <h2 class="mb-2">Create a Flist:</h2>
+          </v-col>
+        </v-row>
+        <v-row justify="center">
+          <v-col :cols="4">
+            <label
+              for="image-name"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Image Name
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="image-name"
+              v-model="flist.image_name"
+              variant="solo-filled"
+              required
+            >
+            </v-text-field>
+            <label
+              for="email"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Email
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="email"
+              v-model="flist.email"
+              variant="solo-filled"
+            >
+            </v-text-field>
+            <label
+              for="auth"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Auth
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="auth"
+              v-model="flist.auth"
+              variant="solo-filled"
+            >
+            </v-text-field>
+            <label
+              for="registery-token"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Registery Token
+            </label>
+            <v-text-field
+              class="pr-5 rounded mb-5"
+              id="registery-token"
+              v-model="flist.registry_token"
+              variant="solo-filled"
+            >
+            </v-text-field>
 
-    </v-main>
-      
+            <v-btn
+              class="pr-5 rounded-pill bg-purple-darken-1 mb-8"
+              size="large"
+              width="50%"
+              @click="create"
+              >Create</v-btn
+            >
+          </v-col>
+          <v-col :cols="4">
+            <label
+              for="username"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Username
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="username"
+              v-model="flist.username"
+              variant="solo-filled"
+            >
+            </v-text-field>
 
+            <label
+              for="password"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Password
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="password"
+              v-model="flist.password"
+              variant="solo-filled"
+              :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
+              :type="visible ? 'text' : 'password'"
+              @click:append-inner="visible = !visible"
+            >
+            </v-text-field>
+            <label
+              for="server-address"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Server Address
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="server-address"
+              v-model="flist.server_address"
+              variant="solo-filled"
+            >
+            </v-text-field>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+    <Footer></Footer>
+  </v-app>
 </template>
 
 <script setup lang="ts">
@@ -13,15 +130,16 @@ import { ref } from "vue";
 import { useRouter } from "vue-router";
 import { Flist } from "../types/Flist";
 import axios from "axios";
+import Footer from "./Footer.vue";
 
-const flist = ref<Flist>({ 
-    auth: "",
-    email: "",
-    image_name: "",
-    password: "",
-    registry_token: "",
-    server_address: "",
-    username: "", 
+const flist = ref<Flist>({
+  auth: "",
+  email: "",
+  image_name: "",
+  password: "",
+  registry_token: "",
+  server_address: "",
+  username: "",
 });
 const router = useRouter();
 const api = axios.create({
@@ -30,16 +148,15 @@ const api = axios.create({
     "Content-Type": "application/json",
   },
 });
-
+const visible = ref<boolean>(false);
 const create = async () => {
   try {
-    await api.post("/v1/api/fl", flist);
+    await api.post("/v1/api/fl", flist.value);
+    router.push("Follow");
   } catch (error) {
     console.error("Failed to create flist", error);
   }
 };
 </script>
 
-<style>
-
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/frontend/src/components/FollowUp.vue b/frontend/src/components/FollowUp.vue
new file mode 100644
index 0000000..afbeff5
--- /dev/null
+++ b/frontend/src/components/FollowUp.vue
@@ -0,0 +1,26 @@
+<template>
+  <v-app>
+    <Navbar></Navbar>
+    <v-main class="d-flex align-center justify-center mb-12 mt-12" height="80%">
+      <div v-if="pending" class="text-center">
+        <v-progress-circular
+          :size="70"
+          :width="7"
+          color="purple-darken-1"
+          indeterminate
+          class="mb-5"
+        ></v-progress-circular>
+        <h2 class="mt-12 mb-5">Creating image . . .</h2>
+        <p>Please wait your image will be ready in few minutes.</p>
+      </div>
+    </v-main>
+    <Footer></Footer>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import Navbar from "./Navbar.vue";
+import Footer from "./Footer.vue";
+const pending = ref<boolean>(true);
+</script>
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
new file mode 100644
index 0000000..ba571ae
--- /dev/null
+++ b/frontend/src/components/Footer.vue
@@ -0,0 +1,5 @@
+<template>
+  <v-footer class="bg-grey-darken-3 d-flex justify-center">
+    All rights reserved © 2024 - <span> Codescalers Egypt</span>
+  </v-footer>
+</template>
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 2739399..683b01c 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -19,34 +19,36 @@
               <v-img :src="logo" class="mb-10" height="10%" width="15%"></v-img>
               <h2 class="mb-5">Sign in</h2>
 
-              <div
+              <label
+                for="username"
                 class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
               >
                 Username
-              </div>
+              </label>
               <v-text-field
                 class="pr-5 rounded"
-                :label="username"
                 v-model="user.username"
                 variant="outlined"
                 density="compact"
+                id="username"
                 required
               >
               </v-text-field>
-              <div
+              <label
+                for="password"
                 class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
               >
                 Password
-              </div>
+              </label>
               <v-text-field
                 class="mb-5 pr-5 rounded"
-                :label="password"
                 v-model="user.password"
                 :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
                 :type="visible ? 'text' : 'password'"
                 variant="outlined"
                 @click:append-inner="visible = !visible"
                 density="compact"
+                id="password"
                 required
               >
               </v-text-field>
@@ -85,10 +87,10 @@ const visible = ref<boolean>(false);
 
 const login = async () => {
   try {
-    const response = await api.post("/v1/api/signin", user);
+    const response = await api.post("/v1/api/signin", user.value);
     const token = response.data.access_token;
     sessionStorage.setItem("token", token);
-    router.push("/flists")
+    router.push("/flists");
   } catch (error) {
     console.error("Failed to login", error);
   }
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index ca82d0b..1e2ec9c 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -1,14 +1,14 @@
 <template>
-    <v-app-bar>
-      <v-app-bar-nav-icon>
-        <v-img src=""></v-img>
-      </v-app-bar-nav-icon>
-      <v-spacer>
-        
-      </v-spacer>
-    </v-app-bar>
+  <v-app-bar class="bg-purple-darken-1">
+    <v-app-bar-nav-icon class="ml-8">
+      <v-img :src="whiteLogo" contain height="50px" width="50px"></v-img>
+    </v-app-bar-nav-icon>
+    <v-spacer> </v-spacer>
+    <v-btn to="Create">Create flist</v-btn>
+    <v-btn to="Flists">View List</v-btn>
+  </v-app-bar>
 </template>
 
-
 <script setup lang="ts">
+import whiteLogo from "../assets/logo_white.png";
 </script>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index b8aabe8..b15ca2e 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 import Login from "../components/Login.vue";
 import CreateFlist from "../components/CreateFlist.vue";
 import ViewFlists from "../components/ViewFlists.vue";
+import FollowUp from "../components/FollowUp.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -14,6 +15,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "Flists",
     component: ViewFlists,
   },
+  {
+    path: "/follow",
+    name: "Follow",
+    component: FollowUp,
+  },
   {
     path: "/create",
     name: "Create",
@@ -27,13 +33,13 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to, _, next) => {
-  const token: string | null = sessionStorage.getItem("token");
-  if (to.meta.requiresAuth && token === null) {
-    next({ name: "Login" });
-  } else {
-    next();
-  }
-});
+// router.beforeEach((to, _, next) => {
+//   const token: string | null = sessionStorage.getItem("token");
+//   if (to.meta.requiresAuth && token === null) {
+//     next({ name: "Login" });
+//   } else {
+//     next();
+//   }
+// });
 
 export default router;