diff --git a/index.html b/index.html
index db3a527..39598a9 100644
--- a/index.html
+++ b/index.html
@@ -3,21 +3,15 @@
 
 <head>
       <meta charset="UTF-8">
-      <link rel="icon"
-            href="/favicon.ico">
-      <meta name="viewport"
-            content="width=device-width, initial-scale=1.0">
+      <link rel="icon" href="/favicon.ico">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Vite App</title>
-      <link id="theme-css"
-            rel="stylesheet"
-            type="text/css"
-            href="/themes/lara-light-indigo/theme.css">
+      <link id="theme-css" rel="stylesheet" type="text/css" href="/themes/lara-light-indigo/theme.css">
 </head>
 
 <body>
       <div id="app"></div>
-      <script type="module"
-              src="/src/main.js"></script>
+      <script type="module" src="/src/main.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/package.json b/package.json
index 5d7fbd1..a850920 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
     "scripts": {
         "dev": "vite",
         "build": "vite build",
+        "predeploy": "vite build --base=/sakai-vue/",
         "preview": "vite preview",
         "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
     },
diff --git a/src/layout/AppFooter.vue b/src/layout/AppFooter.vue
index 3075b03..b061bce 100644
--- a/src/layout/AppFooter.vue
+++ b/src/layout/AppFooter.vue
@@ -1,16 +1,18 @@
 <script setup>
 import { useLayout } from '@/layout/composables/layout';
+import { computed } from 'vue';
 
 const { layoutConfig } = useLayout();
 
-const logoUrl = () => {
-    return new URL(`/public/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
-};
+const logoUrl = computed(() => {
+    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+});
+
 </script>
 
 <template>
     <div class="layout-footer">
-        <img :src="logoUrl()" alt="Logo" height="20" class="mr-2" />
+        <img :src="logoUrl" alt="Logo" height="20" class="mr-2" />
         by
         <span class="font-medium ml-2">PrimeVue</span>
     </div>
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index dca9ce9..fa1945a 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -16,9 +16,10 @@ onMounted(() => {
 onBeforeUnmount(() => {
     unbindOutsideClickListener();
 });
-const logoUrl = () => {
-    return new URL(`/public/layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
-};
+
+const logoUrl = computed(() => {
+    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+});
 
 const onTopBarMenuButton = () => {
     topbarMenuActive.value = !topbarMenuActive.value;
@@ -62,7 +63,7 @@ const isOutsideClicked = (event) => {
 <template>
     <div class="layout-topbar">
         <router-link to="/" class="layout-topbar-logo">
-            <img :src="logoUrl()" alt="logo" />
+            <img :src="logoUrl" alt="logo" />
             <span>SAKAI</span>
         </router-link>
 
diff --git a/src/views/pages/Landing.vue b/src/views/pages/Landing.vue
index df2d2a4..e5aeafe 100644
--- a/src/views/pages/Landing.vue
+++ b/src/views/pages/Landing.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { useLayout } from '@/layout/composables/layout';
+import { computed } from 'vue';
 import AppConfig from '@/layout/AppConfig.vue';
-const { isDarkTheme } = useLayout();
+
+const { layoutConfig } = useLayout();
 
 const smoothScroll = (id) => {
     document.querySelector(id).scrollIntoView({
@@ -9,16 +11,16 @@ const smoothScroll = (id) => {
     });
 };
 
-const logoUrl = () => {
-    return new URL(`/public/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
-};
+const logoUrl = computed(() => {
+    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+});
 </script>
 
 <template>
     <div class="surface-0 flex justify-content-center">
         <div id="home" class="landing-wrapper overflow-hidden">
             <div class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static mb-3">
-                <a class="flex align-items-center" href="#"> <img :src="logoUrl()" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2" /><span class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span> </a>
+                <a class="flex align-items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50" class="mr-0 lg:mr-2" /><span class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span> </a>
                 <a class="cursor-pointer block lg:hidden text-700 p-ripple" v-ripple v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
                     <i class="pi pi-bars text-4xl"></i>
                 </a>
@@ -361,7 +363,7 @@ const logoUrl = () => {
                 <div class="grid justify-content-between">
                     <div class="col-12 md:col-2" style="margin-top: -1.5rem">
                         <a @click="smoothScroll('#home')" class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3 cursor-pointer">
-                            <img :src="logoUrl()" alt="footer sections" width="50" height="50" class="mr-2" />
+                            <img :src="logoUrl" alt="footer sections" width="50" height="50" class="mr-2" />
                             <h4 class="font-medium text-3xl text-900">SAKAI</h4>
                         </a>
                     </div>
diff --git a/src/views/pages/auth/Login.vue b/src/views/pages/auth/Login.vue
index 814fc26..3cea9a5 100644
--- a/src/views/pages/auth/Login.vue
+++ b/src/views/pages/auth/Login.vue
@@ -1,23 +1,22 @@
 <script setup>
 import { useLayout } from '@/layout/composables/layout';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import AppConfig from '@/layout/AppConfig.vue';
 
-const { isDarkTheme } = useLayout();
-
+const { layoutConfig } = useLayout();
 const email = ref('');
 const password = ref('');
 const checked = ref(false);
 
-const logoUrl = () => {
-    return new URL(`/public/layout/images/${isDarkTheme.value ? 'logo-white' : 'logo-dark'}.svg`, import.meta.url).href;
-};
+const logoUrl = computed(() => {
+    return `layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+});
 </script>
 
 <template>
     <div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
         <div class="flex flex-column align-items-center justify-content-center">
-            <img :src="logoUrl()" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
+            <img :src="logoUrl" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" />
             <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
                 <div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius: 53px">
                     <div class="text-center mb-5">
diff --git a/src/views/uikit/Overlay.vue b/src/views/uikit/Overlay.vue
index 005c4df..0205957 100644
--- a/src/views/uikit/Overlay.vue
+++ b/src/views/uikit/Overlay.vue
@@ -95,7 +95,7 @@ const confirm = (event) => {
                     <div>
                         <Button type="button" label="Image" @click="toggle" class="p-button-success" />
                         <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
-                            <img src="/images/nature/nature9.jpg" alt="Nature 9" />
+                            <img src="/demo/images/nature/nature9.jpg" alt="Nature 9" />
                         </OverlayPanel>
                     </div>
                     <div>
