diff --git a/front/src/Components/Menu/ProfileSubMenu.svelte b/front/src/Components/Menu/ProfileSubMenu.svelte
index f69ed9bc..c2fcc24d 100644
--- a/front/src/Components/Menu/ProfileSubMenu.svelte
+++ b/front/src/Components/Menu/ProfileSubMenu.svelte
@@ -15,7 +15,7 @@
     import btnProfileSubMenuCamera from "../images/btn-menu-profile-camera.svg";
     import btnProfileSubMenuIdentity from "../images/btn-menu-profile-identity.svg";
     import btnProfileSubMenuCompanion from "../images/btn-menu-profile-companion.svg";
-    import btnProfileSubMenuWoka from "../images/btn-menu-profile-woka.svg";
+    import Woka from "../Woka/Woka.svelte";
 
     function disableMenuStores() {
         menuVisiblilityStore.set(false);
@@ -65,7 +65,10 @@
                 <span class="btn-hover">Edit your name</span>
             </button>
             <button type="button" class="nes-btn" on:click|preventDefault={openEditSkinScene}>
-                <img src={btnProfileSubMenuWoka} alt="Edit your WOKA" />
+                <!-- <div class="woka-icon">
+                </div> -->
+                <Woka userId={-1} placeholderSrc="" width="26px" height="26px" />
+                <!-- <img src={btnProfileSubMenuWoka} alt="Edit your WOKA" /> -->
                 <span class="btn-hover">Edit your WOKA</span>
             </button>
             <button type="button" class="nes-btn" on:click|preventDefault={openEditCompanionScene}>
diff --git a/front/src/Components/Woka/Woka.svelte b/front/src/Components/Woka/Woka.svelte
index 6e2cdabe..b1cc02ba 100644
--- a/front/src/Components/Woka/Woka.svelte
+++ b/front/src/Components/Woka/Woka.svelte
@@ -5,6 +5,8 @@
 
     export let userId: number;
     export let placeholderSrc: string;
+    export let width: string = "62px";
+    export let height: string = "62px";
 
     const gameScene = gameManager.getCurrentGameScene();
     const playerWokaPictureStore = gameScene.getUserWokaPictureStore(userId);
@@ -17,16 +19,14 @@
     onDestroy(unsubscribe);
 </script>
 
-<img {src} alt="" class="nes-pointer" />
+<img {src} alt="" class="nes-pointer" style="--theme-width: {width}; --theme-height: {height}" />
 
 <style>
     img {
-        display: block;
+        display: inline-block;
         pointer-events: auto;
-        width: 60px;
-        height: 60px;
-        left: calc(50% - 30px);
-        top: calc(50% - 30px);
+        width: var(--theme-width);
+        height: var(--theme-height);
         margin: 0;
         padding: 0;
         image-rendering: pixelated;