diff --git a/src/components/Weakness.astro b/src/components/Weakness.astro
index 1983ece..5b79420 100644
--- a/src/components/Weakness.astro
+++ b/src/components/Weakness.astro
@@ -1,4 +1,6 @@
 ---
+import { getBaseUrl } from '@utils/baseUrl';
+
 interface Props {
   weakness: string[];
 }
@@ -34,7 +36,7 @@ const WEAK_IMGS: { [key: number]: string } = {
       weakness.map((weak, index) => (
         <div class="weak-container">
           <div class="weak">
-            <img src={import.meta.env.BASE_URL + WEAK_IMGS[index]} alt="" />
+            <img src={getBaseUrl() + WEAK_IMGS[index]} alt="" />
             <span class="weak__title">{WEAK_TEXTS[weak]}</span>
           </div>
         </div>
@@ -87,6 +89,7 @@ const WEAK_IMGS: { [key: number]: string } = {
   .weak img {
     min-width: 40px;
     max-width: 40px;
+    aspect-ratio: 4 / 3;
   }
 
   .weak-container:nth-child(even) {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9e6be9a..da3ee1f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -13,12 +13,20 @@ const { title, description } = Astro.props;
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <meta name="description" content={description} />
   </head>
   <body>
+    <div class="webprogress">
+      <div class="webprogress__background">
+        <div class="webprogress__background2"></div>
+      </div>
+
+      <div class="webprogress__content">Web in Prgress!</div>
+    </div>
+
     <div class="content">
       <slot />
     </div>
@@ -68,4 +76,47 @@ const { title, description } = Astro.props;
       Courier New,
       monospace;
   }
+
+  .webprogress {
+    position: fixed;
+    margin: 20px;
+    bottom: 0;
+    right: 0;
+    box-sizing: border-box;
+    text-decoration: none;
+    height: 70px;
+    padding: 5px 20px;
+
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .webprogress__content {
+    position: relative;
+    color: white;
+    font-weight: bold;
+  }
+
+  .webprogress__background {
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    padding: 5px;
+    transform: skew(-3deg, -0.3deg);
+    z-index: 0;
+  }
+
+  .webprogress__background2 {
+    background-color: black;
+    transform: skew(2deg, 0.2deg);
+    width: 100%;
+    height: 100%;
+  }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 77d8f96..55786bc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,7 +7,10 @@ import { PersonaList } from '../components/PersonaList/PersonaList';
 const data: Personas = PERSONAS_ROYAL_DATA;
 ---
 
-<Layout title="Persona Dex" description="Persona 5 royal dex">
+<Layout
+  title="PersonaDex"
+  description="Unlock the secrets of the Persona world with our PersonaDex for Persona 5 Royal! Explore stats, weaknesses, strengths, and hidden powers of your favorite Personas. Dive into the mysterious universe of the game and uncover the hidden depths awaiting at every turn. Get ready to meet your allies and foes like never before!"
+>
   <main>
     <PersonaList data={data} client:visible />
   </main>
diff --git a/src/pages/persona/[key].astro b/src/pages/persona/[key].astro
index ba7b222..6950bd8 100644
--- a/src/pages/persona/[key].astro
+++ b/src/pages/persona/[key].astro
@@ -4,6 +4,7 @@ import { PERSONAS_ROYAL_DATA } from '@data/personas.data';
 import Layout from '@layouts/Layout.astro';
 import Description from '@components/Description.astro';
 import Weakness from '@components/Weakness.astro';
+import { getBaseUrl } from '@utils/baseUrl';
 
 const { key } = Astro.params;
 
@@ -55,7 +56,7 @@ export function getStaticPaths() {
     </div>
 
     <div class="persona-detail__img">
-      <img src={import.meta.env.BASE_URL + data.img} alt="" />
+      <img src={getBaseUrl() + data.img} alt="" />
     </div>
 
     <div class="persona-detail__box">
@@ -169,6 +170,7 @@ export function getStaticPaths() {
     .persona-detail__img {
       grid-column: 2 / span 1;
       grid-row: 3;
+      aspect-ratio: 1;
     }
 
     .persona-detail__img img {
@@ -176,7 +178,9 @@ export function getStaticPaths() {
       object-fit: contain;
       display: block;
       margin: auto;
-      max-height: 500px;
+      max-height: 100%;
+
+      filter: drop-shadow(7px 4px 0px white);
     }
 
     .stat__name {
