diff --git a/.rr.yaml b/.rr.yaml
index e3c322e..3fe5f2e 100644
--- a/.rr.yaml
+++ b/.rr.yaml
@@ -21,7 +21,7 @@ http:
   middleware: [ "static" ]
   static:
     dir: "public/"
-    allow: [ ".css", ".js", ".ico" ]
+    allow: [ ".css", ".js", ".ico", ".webmanifest", ".png" ]
 
   pool:
     allocate_timeout: 5s
diff --git a/front-end/assets/favicon-16x16.png b/front-end/assets/favicon-16x16.png
new file mode 100644
index 0000000..8091e2f
Binary files /dev/null and b/front-end/assets/favicon-16x16.png differ
diff --git a/front-end/assets/favicon-180x180.png b/front-end/assets/favicon-180x180.png
new file mode 100644
index 0000000..5b22318
Binary files /dev/null and b/front-end/assets/favicon-180x180.png differ
diff --git a/front-end/assets/favicon-192x192.png b/front-end/assets/favicon-192x192.png
new file mode 100644
index 0000000..f6a7b20
Binary files /dev/null and b/front-end/assets/favicon-192x192.png differ
diff --git a/front-end/assets/favicon-32x32.png b/front-end/assets/favicon-32x32.png
new file mode 100644
index 0000000..e5aeb34
Binary files /dev/null and b/front-end/assets/favicon-32x32.png differ
diff --git a/front-end/assets/favicon-48x48.png b/front-end/assets/favicon-48x48.png
new file mode 100644
index 0000000..8103849
Binary files /dev/null and b/front-end/assets/favicon-48x48.png differ
diff --git a/front-end/assets/favicon-512x512.png b/front-end/assets/favicon-512x512.png
new file mode 100644
index 0000000..23229a5
Binary files /dev/null and b/front-end/assets/favicon-512x512.png differ
diff --git a/front-end/assets/favicon-64x64.png b/front-end/assets/favicon-64x64.png
new file mode 100644
index 0000000..fcad4ec
Binary files /dev/null and b/front-end/assets/favicon-64x64.png differ
diff --git a/front-end/assets/favicon.ico b/front-end/assets/favicon.ico
old mode 100755
new mode 100644
index 0b180b7..0f6630f
Binary files a/front-end/assets/favicon.ico and b/front-end/assets/favicon.ico differ
diff --git a/front-end/assets/head-tags.html b/front-end/assets/head-tags.html
new file mode 100644
index 0000000..0efbae8
--- /dev/null
+++ b/front-end/assets/head-tags.html
@@ -0,0 +1,11 @@
+<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
+<link rel="icon" type="image/png" sizes="64x64" href="favicon-64x64.png">
+<link rel="icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
+<link rel="icon" type="image/png" sizes="512x512" href="favicon-512x512.png">
+<link rel="apple-touch-icon" sizes="180x180" href="favicon-180x180.png">
+<link rel="apple-touch-icon" sizes="192x192" href="favicon-192x192.png">
+<link rel="apple-touch-icon" sizes="512x512" href="favicon-512x512.png">
+<link rel="manifest" href="site.webmanifest">
\ No newline at end of file
diff --git a/front-end/assets/site.webmanifest b/front-end/assets/site.webmanifest
new file mode 100644
index 0000000..e15c12d
--- /dev/null
+++ b/front-end/assets/site.webmanifest
@@ -0,0 +1,44 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon-64x64.png",
+      "sizes": "64x64",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon-180x180.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
\ No newline at end of file
diff --git a/front-end/index.html b/front-end/index.html
index 9e8f8fb..483ddd5 100644
--- a/front-end/index.html
+++ b/front-end/index.html
@@ -2,7 +2,18 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8"/>
-    <link rel="icon" href="./assets/favicon.ico"/>
+
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="48x48" href="/assets/favicon-48x48.png">
+    <link rel="icon" type="image/png" sizes="64x64" href="/assets/favicon-64x64.png">
+    <link rel="icon" type="image/png" sizes="180x180" href="/assets/favicon-180x180.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicon-512x512.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon-180x180.png">
+    <link rel="apple-touch-icon" sizes="192x192" href="/assets/favicon-192x192.png">
+    <link rel="apple-touch-icon" sizes="512x512" href="/assets/favicon-512x512.png">
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Auth Service - Login</title>
     <script src="https://kit.fontawesome.com/a0fd516b66.js" crossorigin="anonymous"></script>
diff --git a/front-end/src/pages/login.vue b/front-end/src/pages/login.vue
index cd2e570..8c01164 100644
--- a/front-end/src/pages/login.vue
+++ b/front-end/src/pages/login.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="flex flex-row justify-center md:p-10">
-    <Card class="p-10 w-full md:w-2/3 lg:w-1/2 xl:w-5/12">
+    <Card class="p-10 w-full md:w-2/3 lg:w-1/2 xl:w-5/12"
+          :style="{ backgroundColor: capabilities.branding.backgroundColor, color: capabilities.branding.foregroundColor }">
       <template #header>
         <div class="flex flex-col items-center justify-center">
           <div>
             <Image
-              :src="getImgUrl"
+                :src="getImgUrl()"
+            />
           </div>
           <div class="text-2xl mt-5">
             <span v-if="capabilities.client_name !== ''">{{ capabilities.client_name }}</span>
@@ -41,7 +43,7 @@
           </div>
           <div v-if="capabilities.magicLogin" class="mt-5">
             <div class="flex items-center">
-              <Checkbox id="magic-link" v-model="magicLink" binary class="mr-3" />
+              <Checkbox id="magic-link" v-model="magicLink" binary class="mr-3"/>
               <label for="magic-link">
                 Use Magic Login (Password-less)
               </label>
@@ -83,11 +85,11 @@
 
         <div v-if="capabilities.socials && Object.keys(capabilities.socials).length > 0" class="mt-5">
           <div class="text-center mt-5 mb-5">
-            <div class="mb-5 w-1/4 ml-auto mr-auto" style="border-bottom: 1px solid rgba(156,134,134,0.27)" />
+            <div class="mb-5 w-1/4 ml-auto mr-auto" style="border-bottom: 1px solid rgba(156,134,134,0.27)"/>
             Social Logins
           </div>
           <div class="flex justify-around mt-5">
-            <Button style="display: none" />
+            <Button style="display: none"/>
             <a v-if="capabilities.socials.google" :href="capabilities.socials.google.redirectUrl" class="p-button"
                style="background-color: #de5246">
               <i class="fa-brands fa-google mr-2"></i> Google
@@ -101,7 +103,7 @@
       </template>
       <template #footer>
         <p class="text-xs text-center text-gray-500 mt-10">
-          Career Uprising, Inc :: Authentication Portal ::
+          {{ capabilities.client_name }} :: Authentication Portal ::
           <i class="text-xs fa-sharp fa-thin fa-copyright"></i> {{ date() }} :: {{ version() }}
         </p>
         <p class="text-center text-gray-500 mt-10">
@@ -112,14 +114,14 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import {defineComponent} from 'vue'
 import axios from 'axios'
-import { ToastMessageOptions } from 'primevue/toast'
+import {ToastMessageOptions} from 'primevue/toast'
 import Image from 'primevue/image'
 import Card from 'primevue/card'
 import Checkbox from 'primevue/checkbox'
 import useVuelidate from '@vuelidate/core'
-import { email, required } from '@vuelidate/validators'
+import {email, required} from '@vuelidate/validators'
 
 interface Data {
   form: {
@@ -130,7 +132,7 @@ interface Data {
   loading: boolean
   capabilities: {
     branding: {
-      imageUrl: string,
+      logoUrl: string,
       foregroundColor: string,
       backgroundColor: string,
     },
@@ -156,8 +158,8 @@ export default defineComponent({
     Card,
     Checkbox,
   },
-  setup () {
-    return { v$: useVuelidate() }
+  setup() {
+    return {v$: useVuelidate()}
   },
   data: (): Data => ({
     form: {
@@ -168,7 +170,7 @@ export default defineComponent({
     loading: false,
     capabilities: {
       branding: {
-        imageUrl: '',
+        logoUrl: '',
         foregroundColor: '',
         backgroundColor: '',
       },
@@ -196,7 +198,7 @@ export default defineComponent({
       },
     },
   },
-  mounted () {
+  mounted() {
     this.getCapabilities()
 
     const urlParams = new URLSearchParams(window.location.search)
@@ -224,26 +226,26 @@ export default defineComponent({
   },
   methods: {
     getImgUrl() {
-      if (this.capabilities.branding.imageUrl !== '') {
-        return this.capabilities.branding.imageUrl
+      if (this.capabilities.branding.logoUrl && this.capabilities.branding.logoUrl !== '') {
+        return this.capabilities.branding.logoUrl
       }
 
-      return '/assets/logo.png'
+      return 'https://i.siteworxpro.com/NxsEu-0-v33knF-Ncdj2MPYJhKfincDN0lqfczAnYiU/w:600/sm:1/enc/U8uE6IaB8-3qrm6YHoicagNyCd3y9TxIvgXdX8KToub50MwB3SJ_zZCqhnHfy2JR'
     },
     date() {
       return new Date().getFullYear()
     },
-    version (): string {
+    version(): string {
       return import.meta.env.VITE_VERSION || 'dev-master'
     },
-    getCapabilities () {
+    getCapabilities() {
       const urlParams = new URLSearchParams(window.location.search)
 
       axios.get(`/client/capabilities?client_id=${urlParams.get('client_id')}`).then((response) => {
         this.capabilities = response.data
       })
     },
-    sendMagicLink () {
+    sendMagicLink() {
       this.v$.$touch()
 
       if (this.v$.$error) {
@@ -272,7 +274,7 @@ export default defineComponent({
         })
       })
     },
-    login () {
+    login() {
 
       if (this.magicLink) {
         return this.sendMagicLink()