diff --git a/frontend/package.json b/frontend/package.json
index 77ef82c..fcfaa74 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,20 +10,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/pro-duotone-svg-icons": "^6.4.2",
-    "@fortawesome/pro-light-svg-icons": "^6.4.2",
-    "@fortawesome/pro-regular-svg-icons": "^6.4.2",
-    "@fortawesome/pro-solid-svg-icons": "^6.4.2",
-    "@fortawesome/pro-thin-svg-icons": "^6.4.2",
-    "@fortawesome/sharp-light-svg-icons": "^6.4.2",
-    "@fortawesome/sharp-regular-svg-icons": "^6.4.2",
-    "@fortawesome/sharp-solid-svg-icons": "^6.4.2",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
     "@popperjs/core": "^2.11.8",
+    "@vueup/vue-quill": "^1.2.0",
     "axios": "^1.4.0",
     "bootstrap": "^5.3.1",
     "buffer": "^6.0.3",
@@ -44,6 +32,8 @@
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
     "vite": "^4.4.6",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "fast-glob": "^3.3.2",
     "webpack": "^5.88.2"
   }
 }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1e268bf..09d187e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -34,24 +34,21 @@ export default {
   margin-top: 0px;
 }
 
-.body-header {
-  width: 100%;
-  height: 5vmax;
-  background: $primary;
-}
+.body-header {width: 100%; height: $header-height;}
 
 .body-main {
   margin-top: 0px;
-  min-height: calc(100vh - 5vmax);
+  min-height: $body-height;
 }
 
 .body-footer {
   width: 100%;
-  height: 200px;
+  height: $footer-height;
 }
 
 .app-body {
   margin-top: 0px;
   width: 100%;
+  height: 100vh;
 }
 </style>
diff --git a/frontend/src/assets/freeleaps.png b/frontend/src/assets/freeleaps.png
new file mode 100644
index 0000000..ec876b3
Binary files /dev/null and b/frontend/src/assets/freeleaps.png differ
diff --git a/frontend/src/assets/message.png b/frontend/src/assets/message.png
new file mode 100644
index 0000000..0517baa
Binary files /dev/null and b/frontend/src/assets/message.png differ
diff --git a/frontend/src/assets/profile.png b/frontend/src/assets/profile.png
new file mode 100644
index 0000000..da4fff5
Binary files /dev/null and b/frontend/src/assets/profile.png differ
diff --git a/frontend/src/assets/styles/_variables.scss b/frontend/src/assets/styles/_variables.scss
index 7f07910..f6bccf7 100644
--- a/frontend/src/assets/styles/_variables.scss
+++ b/frontend/src/assets/styles/_variables.scss
@@ -2,7 +2,7 @@
 
 $shoutout: #f0783b; //for the shoutout texts
 // First override some or all individual color variables
-$primary: #0032fd; // #25408f;
+$primary: #1748F8; // #0032fd; // #25408f;
 // $secondary: #8f5325;
 // $success: #3e8d63;
 // $info: #13101c;
@@ -39,6 +39,11 @@ $spacers: map-merge(
   ),
   $spacers
 );
+
+$header-height: 88px;
+$footer-height: 110px;
+$body-height: calc(100vh - $header-height - $footer-height);
+$body-width: 1288px;
 // $default-font: "Lato", Verdana, Arial, sans-serif;
 
 // $link-color: #ef899e;
diff --git a/frontend/src/assets/styles/containers.scss b/frontend/src/assets/styles/containers.scss
index 0235596..be9f16e 100644
--- a/frontend/src/assets/styles/containers.scss
+++ b/frontend/src/assets/styles/containers.scss
@@ -26,3 +26,6 @@
   @extend .container-fluid;
   @extend .flex-row-box;
 }
+.flex-1 {flex: 1;}
+.flex-all-center {align-items: center; justify-content: center;}
+.full-height {height: $body-height;}
\ No newline at end of file
diff --git a/frontend/src/assets/styles/inputs.scss b/frontend/src/assets/styles/inputs.scss
index ed55f79..bbbb434 100644
--- a/frontend/src/assets/styles/inputs.scss
+++ b/frontend/src/assets/styles/inputs.scss
@@ -5,3 +5,18 @@
 .input-control-item {
   @extend .form-control;
 }
+
+.input-container {width: 460px; height: 62px; border: 2px solid $primary; border-radius: 8px; display: flex; align-items: center; position: relative;
+  .form-group {width: 100% !important; border: none !important;}
+  .input-email {
+    @extend .input-control-item;
+    @extend .me-1;
+    border: none !important; box-shadow: none !important; outline: none !important
+  }
+  .btn-start {
+    @extend .proceed-button;
+    @extend .ms-1;
+    margin: 8px !important; border-radius: 12px !important; font-weight: 500; font-size: 16px; color: #F8F8F9;
+  }
+  .error-msg {position: absolute; bottom: -36px; color: #9EA2AF; font-size: 18px; margin: 0;}
+}
\ No newline at end of file
diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index c762a40..20818bb 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -99,7 +99,7 @@ p {
   clear: both;
 }
 @mixin container-content {
-  max-width: 1288px;
+  max-width: $body-width;
   width: 100%;
   height: 100%;
   margin: 0 auto;
diff --git a/frontend/src/components/PDFReader.vue b/frontend/src/components/PDFReader.vue
new file mode 100644
index 0000000..ce12226
--- /dev/null
+++ b/frontend/src/components/PDFReader.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="pdf-reader">
+    <canvas ref="canvas"></canvas>
+  </div>
+</template>
+
+<script>
+// import { getDocument } from 'pdfjs-dist'
+import * as PDFJS from "pdfjs-dist";
+// import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
+import { DocumentApi } from '@/utils/index'
+// PDFJS.GlobalWorkerOptions.workerSrc = import('pdfjs-dist/build/pdf.worker')
+
+export default {
+  name: 'PDFReader',
+  props: {
+    document: {type: String, default: ''}
+  },
+  mounted () {
+    this.renderPDF()
+  },
+  methods: {
+    async renderPDF () {
+      const response = await DocumentApi.download(this.document)
+    //   const response = await ContentApi.retrieve_blog_content(this.document)
+      console.log('response', response)
+
+    //   var fr = new FileReader();
+    //   fr.onload = async function(){
+    //     const doc = await getDocument({url: this.result}).promise
+    //   const page = await doc.getPage(1)
+    //   const canvas = this.$refs.canvas
+    //   const context = canvas.getContext('2d')
+    //   const viewport = page.getViewport({ scale: 1 })
+
+    //   canvas.width = viewport.width
+    //   canvas.height = viewport.height
+
+    //   await page.render({
+    //     canvasContext: context,
+    //     viewport
+    //   })
+    //   }
+    //   fr.readAsDataURL(response.data);
+      
+      const doc = await PDFJS.getDocument({data: response.data}).promise
+      const page = await doc.getPage(1)
+      const canvas = this.$refs.canvas
+      const context = canvas.getContext('2d')
+      const viewport = page.getViewport({ scale: 1 })
+
+      canvas.width = viewport.width
+      canvas.height = viewport.height
+
+      await page.render({
+        canvasContext: context,
+        viewport
+      })
+    },
+    base64StringToUint8Array(base64String) {
+        var padding = '='.repeat((4 - base64String.length % 4) % 4);
+        var base64 = (base64String + padding)
+            .replace(/\-/g, '+')
+            .replace(/_/g, '/');
+    
+        var rawData = atob(base64);
+        var outputArray = new Uint8Array(rawData.length);
+    
+        for (var i = 0; i < rawData.length; ++i) {
+            outputArray[i] = rawData.charCodeAt(i);
+        }
+        return outputArray;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pdf-reader {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/frontend/src/components/SvgIcon.vue b/frontend/src/components/SvgIcon.vue
new file mode 100644
index 0000000..5b5ce70
--- /dev/null
+++ b/frontend/src/components/SvgIcon.vue
@@ -0,0 +1,37 @@
+<template>
+    <svg :class="svgClass" aria-hidden="true">
+        <use :xlink:href="iconName" />
+    </svg>
+</template>
+  
+<script>
+export default {
+    name: "SvgIcon",
+    props: {
+        icon: {
+            type: String,
+            required: true,
+        },
+        className: {
+            type: String,
+            default: "",
+        },
+    },
+    computed: {
+        iconName() {
+            return `#icon-${this.icon}`;
+        },
+        svgClass() {
+            if (this.className) {
+                return "svg-icon " + this.className;
+            } else {
+                return "svg-icon";
+            }
+        },
+    },
+};
+</script>
+  
+<style scoped>
+.svg-icon {width: 1rem; height: 1rem; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/VueQuill.vue b/frontend/src/components/VueQuill.vue
new file mode 100644
index 0000000..e0b9c62
--- /dev/null
+++ b/frontend/src/components/VueQuill.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="vue-quill-container">
+        <QuillEditor ref="quillRef" v-model:content="quillData" :options="quillOptions" content-type="html" @text-change="quillChange()" />
+    </div>
+</template>
+<script>
+const toolbarOptions = [
+    ['bold', 'italic', 'underline', 'strike'],
+    ["blockquote", "code-block"],
+    [{ list: 'ordered' }, { list: 'bullet' }],
+    [{ script: "sub" }, { script: "super" }],
+    [{ indent: '-1' }, { indent: '+1' }],
+    [{ direction: 'rtl' }],
+    [{ size: ['small', false, 'large', 'huge'] }],
+    [{ header: [1, 2, 3, 4, 5, 6, false] }],
+    [{ color: [] }, { background: [] }],
+    [{ font: [] }],
+    [{ align: [] }],
+    ['clean'],
+]
+import { QuillEditor } from '@vueup/vue-quill'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+
+export default {
+    name: "VueQuill",
+    props: {
+        content: {
+            type: String,
+            default: ''
+        }
+    },
+    emits: ['update:content'],
+    components: { QuillEditor },
+    data() {
+        return {
+            quillData: this.content,
+            quillOptions: {
+                        theme: 'snow',
+                        placeholder: '请输入',
+                        modules: {
+                            toolbar: {
+                                container: toolbarOptions
+                            }
+                        }}
+        }
+    },
+    methods: {
+        quillChange() {
+            this.$emit('update:content', this.quillData)
+        }
+    }
+};
+
+</script>
+
+<style>
+.vue-quill-container {width: 100%; height: 100%; min-height: 100px;}
+</style>
\ No newline at end of file
diff --git a/frontend/src/footers/FooterGuest.vue b/frontend/src/footers/FooterGuest.vue
index 3625dae..1c61248 100644
--- a/frontend/src/footers/FooterGuest.vue
+++ b/frontend/src/footers/FooterGuest.vue
@@ -1,13 +1,7 @@
 <template>
-  <div class="flex-colum-container">
-    <div class="top-layer">
-      <p class="clickable-text" @click="gotoAboutMagicleaps()">About Magicleaps</p>
-      <p class="clickable-text" @click="gotoAboutFreeleaps()">About Freeleaps</p>
-      <p class="clickable-text" @click="gotoContactUs()">Contact</p>
-    </div>
-    <div class="bottom-layer">
-      <p class="bottom-text">2022 Freeleaps, LLC, All rights reserved</p>
-    </div>
+  <div class="flex-colum-container bottom-container">
+    <img class="company-logo" alt="freeleaps logo" src="@/assets/freeleaps.png" />
+    <p class="bottom-text">2022 Freeleaps, LLC, All rights reserved</p>
   </div>
 </template>
 <script>
@@ -30,19 +24,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.top-layer {
-  @extend .flex-row-container;
-  @extend .justify-content-around;
+.bottom-container {height: 110px; align-items: center; justify-content: center;
+  img  {height: 20px; margin-bottom: 10px;}
 }
 
-.bottom-layer {
-  @extend .flex-row-container;
-  @extend .justify-content-around;
-}
-
-.bottom-text {
-  color: $callout;
-  @extend .fs-6;
-  @extend .text-center;
-}
+.bottom-text {color: rgba(0,0,0,.5); @extend .fs-6}
 </style>
diff --git a/frontend/src/headers/HeaderGuest.vue b/frontend/src/headers/HeaderGuest.vue
index 9c77b06..e2e0186 100644
--- a/frontend/src/headers/HeaderGuest.vue
+++ b/frontend/src/headers/HeaderGuest.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="header-container">
-    <div class="logo-area">
-      <img class="company-logo" alt="freeleaps logo" src="@/assets/logo.png" />
-    </div>
-    <div class="content-area">
-      <span class="company-slogan"
-        >Freeleaps: A trustworthy platform to find a software development partner</span
-      >
-    </div>
-    <div class="public-sites">
-      <button class="public-site-button" @click="gotoAbout()">About</button>
-      <button class="public-site-button" @click="gotoBlogs()">Blogs</button>
-      <button class="public-site-button" @click="gotoCareer()">Career</button>
-      <button class="public-site-button" @click="gotoContact()">Contact</button>
+    <div class="header-content">
+      <img class="company-logo" alt="freeleaps logo" src="@/assets/freeleaps.png" />
+      <!-- <div class="content-area">
+        <span class="company-slogan"
+          >Freeleaps: A trustworthy platform to find a software development partner</span
+        >
+      </div> -->
+      <div class="public-sites">
+        <button class="public-site-button" @click="gotoAbout()">About</button>
+        <button class="public-site-button" @click="gotoBlogs()">Blogs</button>
+        <button class="public-site-button" @click="gotoCareer()">Career</button>
+        <button class="public-site-button" @click="gotoContact()">Contact</button>
+      </div>
     </div>
   </div>
 </template>
@@ -39,22 +39,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.header-container {
-  @extend .flex-row-container;
-  @extend .justify-content-between;
-  height: 100%;
+
+.header-container {width: 100%; height: 100%; background: white; max-width: 100%;
+  .header-content {display: flex;align-items: center; justify-content: space-between; height: 100%; max-width: $body-width; width: 100%;
+    @extend .flex-row-container;
+  }
 }
 
-.logo-area {
-  width: 10%;
-  height: 70%;
-}
-
-.company-logo {
-  max-width: 100%;
-  max-height: 100%;
-  float: left;
-}
+.company-logo {height: 40px}
 
 .company-slogan {
   @extend .text-center;
@@ -67,14 +59,12 @@ export default {
   width: 60%;
   @extend .align-items-center;
 }
-.public-sites {
-  width: 30%;
-  @extend .flex-row-container;
-  @extend .justify-content-between;
-}
 
-.public-site-button {
-  @extend .btn;
-  @extend .btn-link;
+.public-sites {display: flex; align-items: center;
+  .public-site-button {
+    @extend .btn;
+    @extend .btn-link;
+    color: black; font-size: 16px; text-decoration: none;
+  }
 }
 </style>
diff --git a/frontend/src/headers/HeaderUser.vue b/frontend/src/headers/HeaderUser.vue
index 046f4ba..88f09e3 100644
--- a/frontend/src/headers/HeaderUser.vue
+++ b/frontend/src/headers/HeaderUser.vue
@@ -1,33 +1,29 @@
 <template>
   <div class="header-container">
-    <div class="information-bar">
-      <img class="company-logo" alt="freeleaps logo" src="@/assets/logo.png" />
-      <span class="company-slogan"
-        >Freeleaps: A trustworthy platform to find a software development partner</span
-      >
-    </div>
-    <div class="menu-conainer">
-      <div class="message-area">
-        <button class="message-button" type="button" @click="gotoMessages">
-          <font-awesome-icon icon="fa-duotone fa-messages  fa-xl" />
+    <div class="header-content">
+      <div class="information-bar" @click="gotoMessages">
+        <img alt="freeleaps logo" src="@/assets/message.png" />
+      </div>
+      <div class="navigation-container" role="navigation">
+        <button class="navigation-item active" @click="gotoWorkspace">
+          <svg-icon icon="workspace" class-name="icon" />
+          Workspace
+        </button>
+        <button class="navigation-item" @click="gotoRequests">
+          <svg-icon icon="requests" class-name="icon" />
+          Requests
+        </button>
+        <button class="navigation-item" @click="gotoProviders">
+          <svg-icon icon="providers" class-name="icon" />
+          Providers
+        </button>
+        <button class="navigation-item" @click="gotoIssueRequest">
+          <svg-icon icon="post" class-name="icon" />
+          Post
         </button>
       </div>
-      <div class="nav-bar-container" role="navigation">
-        <button class="nav-bar-button" @click="gotoWorkspace">Workspace</button>
-        <button class="nav-bar-button" @click="gotoRequests">Requests</button>
-        <button class="nav-bar-button" @click="gotoProviders">Providers</button>
-        <button class="nav-bar-button" @click="gotoIssueRequest">Post</button>
-      </div>
-      <div class="account-container">
-        <button
-          class="account-button"
-          type="button"
-          id="accountButton"
-          data-bs-toggle="dropdown"
-          aria-expanded="false"
-        >
-          <font-awesome-icon icon="fa-duotone fa-user fa-xl" />
-        </button>
+      <div class="profile-container">
+        <img alt="freeleaps logo" data-bs-toggle="dropdown" aria-expanded="false" id="accountButton" src="@/assets/profile.png" />
         <ul class="dropdown-menu" aria-labelledby="accountButton">
           <li>
             <button class="account-menu-button" @click="gotoProfile">Profile</button>
@@ -114,14 +110,26 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.header-container {
-  @extend .flex-colum-container;
-  height: 100%;
+.header-container {width: 100%; height: 100%; background: #F8FAFC; max-width: 100%;
+  .header-content {display: flex;align-items: center; justify-content: space-between; height: 100%; max-width: $body-width; width: 100%;
+    @extend .flex-row-container;
+  }
 }
 
-.information-bar {
-  @extend .flex-row-container;
-  height: 20%;
+.information-bar {width: 52px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center; position: relative; background-color: white;
+  img {width: 24px; height: 24px;}
+  &::after {content: ''; display: block; width: 8px; height: 8px; border-radius: 4px; position: absolute; right: 0; top: 0; background-color: #F44837;}
+}
+
+.profile-container {position: relative;
+  img {width: 56px;}
+}
+
+.navigation-container {display: flex; align-items: center; justify-content: center;
+  .navigation-item {@extend .btn; @extend .btn-link; color: #6E7387; text-decoration: none; margin: 0 30px;
+    &:hover {color: $primary;}
+    &.active {color: $primary; font-weight: 500;}
+  }
 }
 
 .company-logo {
diff --git a/frontend/src/icons/post.svg b/frontend/src/icons/post.svg
new file mode 100644
index 0000000..6d65123
--- /dev/null
+++ b/frontend/src/icons/post.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1066 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1829" width="64" height="64"><path d="M169.173333 147.84C255.616 61.44 380.330667 18.346667 533.333333 18.346667c153.045333 0 277.76 43.136 364.16 129.536C983.893333 234.282667 1027.072 358.997333 1027.072 512c0 153.002667-43.178667 277.76-129.578667 364.16-86.442667 86.4-211.114667 129.578667-364.16 129.578667-153.002667 0-277.76-43.178667-364.16-129.578667C82.773333 789.717333 39.68 665.002667 39.68 512c0-153.002667 43.136-277.76 129.536-364.16zM800.426667 331.946667a94.890667 94.890667 0 0 0-88.106667-88.106667c-109.824-8.021333-300.032 14.378667-486.485333 172.544-45.696 38.741333-49.194667 110.976 2.005333 149.973333 30.933333 23.552 72.704 49.877333 119.338667 66.133334l154.965333-155.008a45.696 45.696 0 1 1 64.64 64.64L411.733333 697.173333c16.213333 46.592 42.581333 88.362667 66.133334 119.296 38.954667 51.2 111.189333 47.701333 149.930666 2.005334 158.165333-186.453333 180.565333-376.661333 172.544-486.485334z" p-id="1830"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/providers.svg b/frontend/src/icons/providers.svg
new file mode 100644
index 0000000..c6ba8e0
--- /dev/null
+++ b/frontend/src/icons/providers.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1066 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1993" width="64" height="64"><path d="M533.333333 1024c327.68 0 512-184.32 512-512s-184.32-512-512-512S21.333333 184.32 21.333333 512s184.32 512 512 512z m265.984-180.736a301.696 301.696 0 0 0-265.984-159.146667 301.866667 301.866667 0 0 0-265.984 159.146667c60.885333 43.733333 147.456 71.04 265.984 71.04s205.098667-27.306667 265.984-71.04zM705.578667 385.365333c0 110.293333-61.994667 172.330667-172.288 172.330667S360.96 495.658667 360.96 385.365333c0-110.250667 62.037333-172.288 172.330667-172.288s172.288 62.037333 172.288 172.288z" p-id="1994"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/requests.svg b/frontend/src/icons/requests.svg
new file mode 100644
index 0000000..78a3c2f
--- /dev/null
+++ b/frontend/src/icons/requests.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1066 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1667" width="64" height="64"><path d="M260.864 206.976c53.333333-44.586667 133.717333-69.461333 218.325333-69.461333 84.650667 0 165.12 24.874667 218.453334 69.461333 58.112 48.597333 93.013333 132.693333 97.877333 225.493333 4.864 92.842667-20.906667 183.552-70.485333 241.749334-52.650667 61.824-145.834667 97.066667-245.76 97.066666-99.968 0-193.152-35.242667-245.845334-97.066666-49.578667-58.197333-75.306667-148.906667-70.485333-241.706667 4.821333-92.928 39.765333-177.066667 97.92-225.536z m507.008-84.181333C690.090667 57.728 582.528 27.776 479.189333 27.776c-103.253333 0-210.858667 29.994667-288.682666 95.018667-88.32 73.728-131.2 190.634667-137.130667 303.914666-5.973333 113.365333 24.405333 233.984 96.554667 318.592 79.402667 93.354667 207.701333 135.68 329.258666 135.68 83.84 0 170.794667-20.053333 242.773334-63.146666l154.752 154.752a80.426667 80.426667 0 1 0 113.749333-113.834667l-152.874667-152.832c51.2-80.469333 72.533333-182.442667 67.498667-279.210667-5.973333-113.28-48.853333-230.186667-137.216-303.914666z m-287.872 209.066666h-1.749333c-12.714667 0-25.770667 0-38.826667 0.128v-1.28a39.722667 39.722667 0 0 1 79.402667 0v1.28a3199.018667 3199.018667 0 0 0-38.741334-0.128h-0.085333z m112 3.797334v-4.906667a112.853333 112.853333 0 0 0-225.706667 0v4.906667a414.250667 414.250667 0 0 0-28.16 3.925333A62.890667 62.890667 0 0 0 288 387.968c-7.296 32.853333-7.296 63.146667-7.296 106.453333v2.304c0 43.221333 0 73.557333 7.296 106.410667a62.890667 62.890667 0 0 0 50.090667 48.341333c42.752 7.850667 93.44 7.850667 140.16 7.850667h1.749333c46.805333 0 97.450667 0 140.16-7.850667a62.890667 62.890667 0 0 0 50.090667-48.256c7.296-32.938667 7.296-63.274667 7.296-106.496v-2.261333c0-43.306667 0-73.685333-7.296-106.496a62.933333 62.933333 0 0 0-50.090667-48.298667 381.653333 381.653333 0 0 0-28.16-4.010666z" p-id="1668"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/icons/workspace.svg b/frontend/src/icons/workspace.svg
new file mode 100644
index 0000000..dc858c9
--- /dev/null
+++ b/frontend/src/icons/workspace.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1066 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1736" width="64" height="64"><path d="M412.672 228.565333c0-50.474667 40.917333-91.434667 91.434667-91.434666h58.453333c50.517333 0 91.477333 40.96 91.477333 91.434666v11.093334c-39.893333-0.853333-79.872-0.853333-118.613333-0.853334h-4.138667c-38.826667 0-78.762667 0-118.613333 0.853334v-11.093334zM302.933333 244.906667v-16.298667A201.130667 201.130667 0 0 1 504.106667 27.434667h58.453333A201.130667 201.130667 0 0 1 763.733333 228.565333v16.298667c31.530667 2.56 62.165333 6.229333 91.264 11.434667a149.76 149.76 0 0 1 120.064 115.968c6.485333 29.994667 10.368 59.136 12.672 89.642666l-422.272 140.970667a100.608 100.608 0 0 1-63.701333 0l-422.826667-141.141333c2.346667-30.464 6.229333-59.562667 12.672-89.472a149.76 149.76 0 0 1 120.064-115.968 967.68 967.68 0 0 1 91.306667-11.434667zM75.52 614.954667c0-20.48 0-39.68 0.128-57.941334l397.226667 132.608a192 192 0 0 0 121.557333 0l396.672-132.437333c0.128 18.218667 0.128 37.376 0.128 57.770667v5.461333c0 98.346667 0 167.978667-16.128 242.730667a149.76 149.76 0 0 1-120.064 115.968c-97.749333 17.493333-213.162667 17.493333-319.573333 17.493333h-4.138667c-106.453333 0-221.866667 0-319.573333-17.493333a149.76 149.76 0 0 1-120.106667-115.968c-16.128-74.752-16.128-144.384-16.128-242.730667v-5.461333z" p-id="1737"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/main.js b/frontend/src/main.js
index e295453..95b29db 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,27 +6,27 @@ import { navigatorMixin, userIdentityMixin, errorHanlderMixin, userAuthMixin } f
 import { tooltip } from './utils/index'
 
 /* import the fontawesome core */
-import { library } from '@fortawesome/fontawesome-svg-core'
+// import { library } from '@fortawesome/fontawesome-svg-core'
 /* import font awesome icon component */
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+// import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 /* import free icons */
-import { faUser as fasUser } from '@fortawesome/free-solid-svg-icons'
+// import { faUser as fasUser } from '@fortawesome/free-solid-svg-icons'
 
 /* add some pro styles */
 //import { faBicycle } from '@fortawesome/pro-regular-svg-icons'
 // import { faEnvelope } from '@fortawesome/pro-light-svg-icons'
 // import { faFeather } from '@fortawesome/pro-thin-svg-icons'
-import {
-  faUser as fadUser,
-  faMessages as fadMessage,
-  faCircleInfo as fadCircleInfo
-} from '@fortawesome/pro-duotone-svg-icons'
+// import {
+//   faUser as fadUser,
+//   faMessages as fadMessage,
+//   faCircleInfo as fadCircleInfo
+// } from '@fortawesome/pro-duotone-svg-icons'
 // import { faAlien } from '@fortawesome/sharp-solid-svg-icons'
 // import { faPlateUtensils } from '@fortawesome/sharp-regular-svg-icons'
 
 /* add icons to the library */
-library.add(fasUser, fadUser, fadMessage, fadCircleInfo)
+// library.add(fasUser)
 
 const app = createApp(App)
 app.use(store)
@@ -36,7 +36,10 @@ app.mixin(navigatorMixin)
 app.mixin(errorHanlderMixin)
 app.mixin(userAuthMixin)
 app.directive('tooltip', tooltip)
-app.component('font-awesome-icon', FontAwesomeIcon)
+
+import 'virtual:svg-icons-register'
+import SvgIcon from "@/components/SvgIcon.vue";
+app.component("svg-icon", SvgIcon);
 
 app.mount('#app')
 app.config.warnHandler = (msg, instance, trace) => {
diff --git a/frontend/src/pages/guest/FrontDoor.vue b/frontend/src/pages/guest/FrontDoor.vue
index a06cd0a..a38095c 100644
--- a/frontend/src/pages/guest/FrontDoor.vue
+++ b/frontend/src/pages/guest/FrontDoor.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="story-board-container">
-    <div class="focus-input-container">
-      <div class="focus-area">
-        <div class="form-group">
+  <div class="flex-colum-container front-container">
+    <div class="slogen">A platform where our users can find a trustworthy partner, <br/>simplify software development, and secure return.</div>
+    <div class="poster"><span class="blue">One stop platform</span> for hiring the best <br/>freelance software development talent</div>
+    <div class="input-container">
+      <div class="form-group">
           <div class="input-group-container">
             <div class="form-floating">
               <input
@@ -14,14 +15,11 @@
               />
               <label for="inputEmail">Email address</label>
             </div>
-            <button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">
-              Start
-            </button>
+            <button class="btn-start" ref="submitButton" @click="trySigninWithEmail()">GET STARTED</button>
           </div>
         </div>
-      </div>
+      <p class="error-msg">{{ message }}</p>
     </div>
-    <p>{{ message }}</p>
   </div>
 </template>
 
@@ -41,7 +39,6 @@ export default {
       message: null
     }
   },
-
   methods: {
     trySigninWithEmail() {
       this.message = null
@@ -83,13 +80,11 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.input-email {
-  @extend .input-control-item;
-  @extend .me-1;
+.front-container {padding: 20px 0;
+  .slogen {font-size: 20px; font-weight: 400; color: rgba(0,0,0,.5); text-align: center; margin-bottom: 24px; line-height: 22px}
+  .poster {font-size: 48px; font-weight: 500; color: black; text-align: center; margin-bottom: 40px; line-height: 52px;
+    .blue {color: $primary}
+  }
 }
 
-.btn-start {
-  @extend .proceed-button;
-  @extend .ms-1;
-}
 </style>
diff --git a/frontend/src/pages/guest/NewUserSetFlid.vue b/frontend/src/pages/guest/NewUserSetFlid.vue
index 5bce47e..46088fa 100644
--- a/frontend/src/pages/guest/NewUserSetFlid.vue
+++ b/frontend/src/pages/guest/NewUserSetFlid.vue
@@ -1,27 +1,23 @@
 <template>
-  <div>
+  <div class="flex-row-container flex-all-center full-height">
     <form @submit.prevent="updateFlid">
-      <div class="story-board-container">
-        <div class="focus-input-container">
-          <div class="focus-area">
-            <div class="form-group">
-              <div class="input-group-container">
-                <div class="form-floating">
-                  <input
-                    class="input-code"
-                    id="inputCode"
-                    type="text"
-                    :placeholder="'set your Freeleaps user id'"
-                    v-model="flid"
-                  />
-                  <label for="inputCode">Your Freeleaps User ID</label>
-                </div>
-              </div>
+      <div class="input-container">
+        <div class="form-group">
+          <div class="input-group-container">
+            <div class="form-floating">
+              <input
+                class="input-email"
+                id="inputCode"
+                type="text"
+                :placeholder="'set your Freeleaps user id'"
+                v-model="flid"
+              />
+              <label for="inputCode">Your Freeleaps User ID</label>
             </div>
-            <button type="submit" class="btn-start">Submit</button>
+            <button type="submit" class="btn-start">SUBMIT</button>
           </div>
-          <p class="errorInput" v-if="message != null">{{ message }}</p>
         </div>
+        <p class="errorInput" v-if="message != null">{{ message }}</p>
       </div>
     </form>
   </div>
@@ -86,13 +82,4 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.input-code {
-  @extend .input-control-item;
-  @extend .me-1;
-}
-
-.btn-start {
-  @extend .proceed-button;
-  @extend .ms-1;
-}
 </style>
diff --git a/frontend/src/pages/guest/NewUserSetPassword.vue b/frontend/src/pages/guest/NewUserSetPassword.vue
index 0f4b304..59d62a1 100644
--- a/frontend/src/pages/guest/NewUserSetPassword.vue
+++ b/frontend/src/pages/guest/NewUserSetPassword.vue
@@ -1,40 +1,38 @@
 <template>
-  <div>
+  <div class="flex-row-container flex-all-center full-height">
     <form @submit.prevent="updatePassword">
-      <div class="story-board-container">
-        <div class="focus-input-container">
-          <div class="focus-area">
-            <div class="form-group">
-              <div class="input-group-container">
-                <div class="form-floating">
-                  <input
-                    class="input-code"
-                    id="inputCode"
-                    type="password"
-                    :placeholder="'Type your password'"
-                    v-model="password"
-                  />
-                  <label for="inputCode">Your password</label>
-                </div>
-              </div>
-              <div class="input-group-container">
-                <div class="form-floating">
-                  <input
-                    class="input-code"
-                    id="inputCode"
-                    type="password"
-                    :placeholder="'Repeat your password'"
-                    v-model="password2"
-                  />
-                  <label for="inputCode">Repeat password</label>
-                </div>
-              </div>
+      <div class="input-container mb-12">
+        <div class="form-group">
+          <div class="input-group-container">
+            <div class="form-floating">
+              <input
+                class="input-email"
+                id="inputCode"
+                type="password"
+                :placeholder="'Type your password'"
+                v-model="password"
+              />
+              <label for="inputCode">Your password</label>
             </div>
-            <button type="submit" class="btn-start">Update</button>
           </div>
-          <p class="errorInput" v-if="message != null">{{ message }}</p>
         </div>
       </div>
+      <div class="input-container">
+        <div class="input-group-container">
+            <div class="form-floating">
+              <input
+                class="input-email"
+                id="inputCode"
+                type="password"
+                :placeholder="'Repeat your password'"
+                v-model="password2"
+              />
+              <label for="inputCode">Repeat password</label>
+            </div>
+            <button type="submit" class="btn-start">SIGN UP</button>
+          </div>
+        <p class="errorInput" v-if="message != null">{{ message }}</p>
+      </div>
     </form>
   </div>
 </template>
@@ -86,13 +84,14 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.input-code {
-  @extend .input-control-item;
-  @extend .me-1;
-}
+// .input-code {
+//   @extend .input-control-item;
+//   @extend .me-1;
+// }
 
-.btn-start {
-  @extend .proceed-button;
-  @extend .ms-1;
-}
+// .btn-start {
+//   @extend .proceed-button;
+//   @extend .ms-1;
+// }
+.mb-12 {margin-bottom: 12px;}
 </style>
diff --git a/frontend/src/pages/guest/SigninWithEmailAndCode.vue b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
index 5dbc8e0..48350eb 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndCode.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndCode.vue
@@ -1,27 +1,23 @@
 <template>
-  <div>
+  <div class="flex-row-container flex-all-center full-height">
     <form @submit.prevent="signinWithCode">
-      <div class="story-board-container">
-        <div class="focus-input-container">
-          <div class="focus-area">
-            <div class="form-group">
-              <div class="input-group-container">
-                <div class="form-floating">
-                  <input
-                    class="input-code"
-                    id="inputCode"
-                    type="text"
-                    :placeholder="'Code sent to your email'"
-                    v-model="code"
-                  />
-                  <label for="inputCode">Authenticaion Code Sent To Your Email</label>
-                </div>
-                <button type="submit" class="btn-start">Sign in</button>
-              </div>
+      <div class="input-container">
+        <div class="form-group">
+          <div class="input-group-container">
+            <div class="form-floating">
+              <input
+                class="input-email"
+                id="inputCode"
+                type="text"
+                :placeholder="'Code sent to your email'"
+                v-model="code"
+              />
+              <label for="inputCode">Authenticaion Code Sent To Your Email</label>
             </div>
+            <button type="submit" class="btn-start">SIGN IN</button>
           </div>
-          <p class="errorInput" v-if="message != null">{{ message }}</p>
         </div>
+        <p class="error-msg" v-if="message != null">{{ message }}</p>
       </div>
     </form>
   </div>
@@ -99,13 +95,13 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.input-code {
-  @extend .input-control-item;
-  @extend .me-1;
-}
+// .input-code {
+//   @extend .input-control-item;
+//   @extend .me-1;
+// }
 
-.btn-start {
-  @extend .proceed-button;
-  @extend .ms-1;
-}
+// .btn-start {
+//   @extend .proceed-button;
+//   @extend .ms-1;
+// }
 </style>
diff --git a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
index 65b0c2b..9c29964 100644
--- a/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
+++ b/frontend/src/pages/guest/SigninWithEmailAndPassword.vue
@@ -1,32 +1,29 @@
 <template>
-  <div>
+  <div class="flex-row-container flex-all-center full-height">
     <form @submit.prevent="signinWithPassword">
-      <div class="story-board-container">
-        <div class="focus-input-container">
-          <div class="focus-area">
-            <div class="form-group">
-              <div class="input-group-container">
-                <div class="form-floating">
-                  <input
-                    class="input-code"
-                    id="inputCode"
-                    type="password"
-                    :placeholder="'Type in your password'"
-                    v-model="password"
-                  />
-                  <label for="inputCode">Password</label>
-                </div>
-                <button type="submit" class="btn-start">Sign in</button>
-              </div>
+      <div class="input-container">
+        <div class="form-group">
+          <div class="input-group-container">
+            <div class="form-floating">
+              <input
+                class="input-email"
+                id="inputCode"
+                type="password"
+                :placeholder="'Type in your password'"
+                v-model="password"
+              />
+              <label for="inputCode">Password</label>
             </div>
+            <button type="submit" class="btn-start">SIGN IN</button>
           </div>
-          <p class="errorInput" v-if="message != null">{{ message }}</p>
+        </div>
+        <div class="error-msg flex-row-container">
+          <p class="error-p" v-if="message != null">{{ message }}</p>
+          <div class="flex-1" />
+          <button type="button" class="btn-forget-password" @click="forgetPassword()">Forget password</button>
         </div>
       </div>
     </form>
-    <button type="button" class="btn-forget-password" @click="forgetPassword()">
-      Forget password
-    </button>
   </div>
 </template>
 
@@ -114,18 +111,11 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.input-code {
-  @extend .input-control-item;
-  @extend .me-1;
-}
-
-.btn-start {
-  @extend .proceed-button;
-  @extend .ms-1;
-}
-
+.error-p {color: #916AD4; margin: 0}
 .btn-forget-password {
-  @extend .proceed-button;
-  @extend .ms-1;
+  @extend .btn;
+  // @extend .ms-1;
+  @extend .btn-link;
+  padding: 0; font-size: 16px; margin-left: 15px;
 }
 </style>
diff --git a/frontend/src/pages/public/PdfContentViewer.vue b/frontend/src/pages/public/PdfContentViewer.vue
index e95a3c4..c8a0dcb 100644
--- a/frontend/src/pages/public/PdfContentViewer.vue
+++ b/frontend/src/pages/public/PdfContentViewer.vue
@@ -1,10 +1,13 @@
 <template>
-  <div class="">ContentViewer</div>
+  <div style="width: 100vw; height: 100vh">
+    <PDFReader document="6662431ee312d5389c612020" />
+  </div>
 </template>
 <script>
-import { pdfjsLib } from '../../plugins/index'
-import { ContentApi } from '../../utils/index'
-import { Buffer } from 'buffer'
+// import { pdfjsLib } from '../../plugins/index'
+// import { ContentApi } from '../../utils/index'
+// import { Buffer } from 'buffer'
+import PDFReader from '@/components/PDFReader.vue'
 export default {
   name: 'PdfContentViewer',
   props: {
@@ -13,32 +16,32 @@ export default {
       type: String
     }
   },
-  components: {},
+  components: {PDFReader},
   computed: {},
   mounted() {
-    this.retrieve_blog_content()
+    // this.retrieve_blog_content()
   },
   methods: {
-    retrieve_blog_content() {
-      ContentApi.retrieve_blog_content(this.content_id)
-        .then((response) => {
-          this.content_media_data = response.data
-          var loadingTask = pdfjsLib.getDocument({
-            data: Buffer.from(this.content_media_data, 'base64')
-          })
-          loadingTask.promise.then(function (pdf) {
-            //
-            // Fetch the first page
-            //
-            pdf.getPage(1).then(function (page) {
-              //rendering
-            })
-          })
-        })
-        .catch((error) => {
-          this.mnx_backendErrorHandler(error)
-        })
-    }
+    // retrieve_blog_content() {
+    //   ContentApi.retrieve_blog_content(this.content_id)
+    //     .then((response) => {
+    //       this.content_media_data = response.data
+    //       var loadingTask = pdfjsLib.getDocument({
+    //         data: Buffer.from(this.content_media_data, 'base64')
+    //       })
+    //       loadingTask.promise.then(function (pdf) {
+    //         //
+    //         // Fetch the first page
+    //         //
+    //         pdf.getPage(1).then(function (page) {
+    //           //rendering
+    //         })
+    //       })
+    //     })
+    //     .catch((error) => {
+    //       this.mnx_backendErrorHandler(error)
+    //     })
+    // }
   },
   data() {
     return {
diff --git a/frontend/src/pages/user/workspace/requestIssue/Issue.vue b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
index b2bb22b..56cdad9 100644
--- a/frontend/src/pages/user/workspace/requestIssue/Issue.vue
+++ b/frontend/src/pages/user/workspace/requestIssue/Issue.vue
@@ -141,7 +141,7 @@
       </button>
     </div>
     <div class="description-container">
-      <div
+      <!-- <div
         class="input-description"
         id="inputDescription"
         placeholder="Fill the request's description here"
@@ -149,7 +149,8 @@
         @keyup="textAreaAdjust($event)"
         @blur="descriptionDone($event)"
         contenteditable="true"
-      />
+      /> -->
+      <VueQuill v-model:content="content" />
     </div>
     <div class="file-upload-container">
       <label for="file-upload" class="file-upload-label">Upload File:</label>
@@ -170,6 +171,7 @@ import {
   DocumentApi
 } from '../../../../utils/index'
 import { requestIssuingModelEnum } from '../../../../types/index'
+import VueQuill from '@/components/VueQuill.vue'
 
 export default {
   name: 'IssueRequest',
@@ -183,6 +185,7 @@ export default {
       type: String
     }
   },
+  components: {VueQuill},
   mounted() {
     this.initProducts()
     this.initiateFromInput()
diff --git a/frontend/src/plugins/router/router.js b/frontend/src/plugins/router/router.js
index 347e1cb..6a35d53 100644
--- a/frontend/src/plugins/router/router.js
+++ b/frontend/src/plugins/router/router.js
@@ -58,7 +58,6 @@ import UserHistory from '../../pages/user/account/UserHistory.vue'
 import Workspace from '../../pages/user/workspace/Home.vue'
 
 import FooterGuest from '../../footers/FooterGuest.vue'
-import FooterUser from '../../footers/FooterUser.vue'
 
 import HeaderGuest from '../../headers/HeaderGuest.vue'
 import HeaderUser from '../../headers/HeaderUser.vue'
@@ -177,7 +176,7 @@ const router = createRouter({
       name: 'my-workspace-projects',
       path: '/my-workspace-projects',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MyWorkspaceProjects, footer: FooterUser, header: HeaderUser },
+      components: { default: MyWorkspaceProjects, footer: FooterGuest, header: HeaderUser },
       props: false
     },
 
@@ -185,7 +184,7 @@ const router = createRouter({
       name: 'project-manage',
       path: '/project-manage/:projectId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ProjectManage, footer: FooterUser, header: HeaderUser },
+      components: { default: ProjectManage, footer: FooterGuest, header: HeaderUser },
       props: true,
       children: [
         {
@@ -230,14 +229,14 @@ const router = createRouter({
       name: 'my-workspace-requests',
       path: '/my-workspace-requests',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MyWorkspaceRequests, footer: FooterUser, header: HeaderUser },
+      components: { default: MyWorkspaceRequests, footer: FooterGuest, header: HeaderUser },
       props: false
     },
     {
       name: 'request-issue',
       path: '/request-issue/:loadFrom',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: IssueRequest, footer: FooterUser, header: HeaderUser },
+      components: { default: IssueRequest, footer: FooterGuest, header: HeaderUser },
       props: (route) => {
         /**
          * This would preserve the other route.params object properties overriding only
@@ -254,7 +253,7 @@ const router = createRouter({
       name: 'request-issue2',
       path: '/request-issue/:loadFrom/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: IssueRequest, footer: FooterUser, header: HeaderUser },
+      components: { default: IssueRequest, footer: FooterGuest, header: HeaderUser },
       props: (route) => {
         /**
          * This would preserve the other route.params object properties overriding only
@@ -271,28 +270,28 @@ const router = createRouter({
       name: 'request-submitted',
       path: '/request-submitted/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: RequestSubmitted, footer: FooterUser, header: HeaderUser },
+      components: { default: RequestSubmitted, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'request-deposit',
       path: '/request-deposit/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: RequestDeposit, footer: FooterUser, header: HeaderUser },
+      components: { default: RequestDeposit, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'request-deposited',
       path: '/request-deposited/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: RequestDeposited, footer: FooterUser, header: HeaderUser },
+      components: { default: RequestDeposited, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'my-workspace-proposals',
       path: '/my-workspace-proposals',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MyWorkspaceProposals, footer: FooterUser, header: HeaderUser },
+      components: { default: MyWorkspaceProposals, footer: FooterGuest, header: HeaderUser },
       props: false
     },
     //message hub
@@ -300,34 +299,34 @@ const router = createRouter({
       name: 'message-hub',
       path: '/message-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MessageHub, footer: FooterUser, header: HeaderUser }
+      components: { default: MessageHub, footer: FooterGuest, header: HeaderUser }
     },
     // provider hub
     {
       name: 'provider-hub',
       path: '/provider-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ProviderHub, footer: FooterUser, header: HeaderUser }
+      components: { default: ProviderHub, footer: FooterGuest, header: HeaderUser }
     },
     //request hub
     {
       name: 'request-hub',
       path: '/request-hub',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: RequestHub, footer: FooterUser, header: HeaderUser }
+      components: { default: RequestHub, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'make-proposal',
       path: '/make-proposal/:requestId/:loadingMode',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: MakeProposal, footer: FooterUser, header: HeaderUser },
+      components: { default: MakeProposal, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
       name: 'proposal-submitted',
       path: '/proposal-submitted/:proposalId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: ProposalSubmitted, footer: FooterUser, header: HeaderUser },
+      components: { default: ProposalSubmitted, footer: FooterGuest, header: HeaderUser },
       props: true
     },
 
@@ -335,7 +334,7 @@ const router = createRouter({
       name: 'request-manage',
       path: '/request-manage/:requestId',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: RequestManage, footer: FooterUser, header: HeaderUser },
+      components: { default: RequestManage, footer: FooterGuest, header: HeaderUser },
       props: true
     },
     {
@@ -344,7 +343,7 @@ const router = createRouter({
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
       components: {
         default: ReviewProposalBeforeAccetance,
-        footer: FooterUser,
+        footer: FooterGuest,
         header: HeaderUser
       },
       props: true
@@ -354,25 +353,25 @@ const router = createRouter({
       name: 'user-profile',
       path: '/user-profile',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: UserProfile, footer: FooterUser, header: HeaderUser }
+      components: { default: UserProfile, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'user-finance',
       path: '/user-finance',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: UserFinance, footer: FooterUser, header: HeaderUser }
+      components: { default: UserFinance, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'user-history',
       path: '/user-history',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: UserHistory, footer: FooterUser, header: HeaderUser }
+      components: { default: UserHistory, footer: FooterGuest, header: HeaderUser }
     },
     {
       name: 'work-space',
       path: '/work-space',
-      meta: { requiredRoles: [userRoleEnum.PERSONAL] },
-      components: { default: Workspace, footer: FooterUser, header: HeaderUser }
+      meta: { requiredRoles: [userRoleEnum.PERSONAL], active: 'workspace' },
+      components: { default: Workspace, footer: FooterGuest, header: HeaderUser }
     }
   ],
 
@@ -387,6 +386,7 @@ const router = createRouter({
 })
 
 router.beforeEach(function (to, from, next) {
+  console.log('beforeEach', to)
   if (to.name == 'front-door') {
     next()
   } else if (to.meta.requiredRoles.includes(userRoleEnum.NONE)) {
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index d5fbb2d..dd7c5a5 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,20 +1,28 @@
 import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import vue from '@vitejs/plugin-vue'
+
 const path = require('path')
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    createSvgIconsPlugin({
+      iconDirs: [resolve('src/icons')],
+      symbolId: 'icon-[name]'
+    }),
   ],
   resolve: {
-    root: path.resolve(__dirname, 'src'),
+    root: resolve('src'),
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
-      '~quill': path.resolve(__dirname, 'node_modules/quill'),
+      '~bootstrap': resolve('node_modules/bootstrap'),
+      '~quill': resolve('node_modules/quill'),
     }
   },
   css: {
@@ -30,7 +38,7 @@ export default defineConfig({
   server: {
     proxy: {
       '^/api/': {
-        target: 'http://127.0.0.1:8001/',
+        target: 'https://freeleaps-alpha.com',
         ws: true,
         changeOrigin: true
       }