diff --git a/frontend/src/components/Character3D.vue b/frontend/src/components/Character3D.vue
index deda777..5b8dc82 100644
--- a/frontend/src/components/Character3D.vue
+++ b/frontend/src/components/Character3D.vue
@@ -24,6 +24,10 @@ export default {
       type: Number,
       default: null,
       validator: (value) => value === null || (value >= 0 && value <= 120)
+    },
+    noBackground: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -114,11 +118,10 @@ export default {
 
       // Scene erstellen - markRaw verwenden, um Vue's Reactivity zu vermeiden
       this.scene = markRaw(new THREE.Scene());
-      // Hintergrund wird später geladen
-      this.scene.background = new THREE.Color(0xf0f0f0);
-      
-      // Hintergrundbild laden
-      this.loadBackground();
+      if (!this.noBackground) {
+        this.scene.background = new THREE.Color(0xf0f0f0);
+        this.loadBackground();
+      }
 
       // Camera erstellen
       const aspect = container.clientWidth / container.clientHeight;
diff --git a/frontend/src/views/falukant/OverviewView.vue b/frontend/src/views/falukant/OverviewView.vue
index d5c987a..010e9d9 100644
--- a/frontend/src/views/falukant/OverviewView.vue
+++ b/frontend/src/views/falukant/OverviewView.vue
@@ -117,58 +117,31 @@
             </div>
         </div>
         <div v-if="falukantUser?.character" class="imagecontainer">
-            <div :style="getAvatarStyle" class="avatar"></div>
-            <div :style="getHouseStyle" class="house"></div>
+            <div class="house-with-character">
+                <div :style="getHouseStyle" class="house"></div>
+                <div class="character-foreground">
+                    <Character3D
+                        :gender="falukantUser.character.gender"
+                        :age="falukantUser.character.age"
+                        :no-background="true"
+                    />
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
 import StatusBar from '@/components/falukant/StatusBar.vue';
+import Character3D from '@/components/Character3D.vue';
 import apiClient from '@/utils/axios.js';
 import { mapState } from 'vuex';
 
-const AVATAR_POSITIONS = {
-    male: {
-        width: 195,
-        height: 300,
-        positions: {
-            "0-1": { x: 161, y: 28 },
-            "2-3": { x: 802, y: 28 },
-            "4-6": { x: 1014, y: 28 },
-            "7-10": { x: 800, y: 368 },
-            "11-13": { x: 373, y: 368 },
-            "14-16": { x: 1441, y: 28 },
-            "17-20": { x: 1441, y: 368 },
-            "21-30": { x: 1014, y: 368 },
-            "31-45": { x: 1227, y: 368 },
-            "45-55": { x: 803, y: 687 },
-            "55+": { x: 1441, y: 687 },
-        },
-    },
-    female: {
-        width: 223,
-        height: 298,
-        positions: {
-            "0-1": { x: 302, y: 66 },
-            "2-3": { x: 792, y: 66 },
-            "4-6": { x: 62, y: 66 },
-            "7-10": { x: 1034, y: 66 },
-            "11-13": { x: 1278, y: 66 },
-            "14-16": { x: 303, y: 392 },
-            "17-20": { x: 1525, y: 392 },
-            "21-30": { x: 1278, y: 392 },
-            "31-45": { x: 547, y: 718 },
-            "45-55": { x: 1034, y: 718 },
-            "55+": { x: 1525, y: 718 },
-        },
-    },
-};
-
 export default {
     name: 'FalukantOverviewView',
     components: {
         StatusBar,
+        Character3D,
     },
     data() {
         return {
@@ -181,25 +154,7 @@ export default {
     },
     computed: {
         ...mapState(['socket']),
-        getAvatarStyle() {
-            if (!this.falukantUser || !this.falukantUser.character) return {};
-            const { gender, age } = this.falukantUser.character;
-            const imageUrl = `/images/falukant/avatar/${gender}.png`;
-            const ageGroup = this.getAgeGroup(age);
-            const genderData = AVATAR_POSITIONS[gender] || {};
-            const position = genderData.positions?.[ageGroup] || { x: 0, y: 0 };
-            const width = genderData.width || 100;
-            const height = genderData.height || 100;
-            return {
-                backgroundImage: `url(${imageUrl})`,
-                backgroundPosition: `-${position.x}px -${position.y}px`,
-                backgroundSize: '1792px 1024px',
-                width: `${width}px`,
-                height: `${height}px`,
-            };
-        },
         getHouseStyle() {
-            console.log(this.falukantUser);
             if (!this.falukantUser || !this.falukantUser.userHouse?.houseType) return {};
             const imageUrl = '/images/falukant/houses.png';
             const pos = this.falukantUser.userHouse.houseType.position;
@@ -307,19 +262,6 @@ export default {
             this.fetchAllStock();
             this.fetchProductions();
         },
-        getAgeGroup(age) {
-            if (age <= 1) return '0-1';
-            if (age <= 3) return '2-3';
-            if (age <= 6) return '4-6';
-            if (age <= 10) return '7-10';
-            if (age <= 13) return '11-13';
-            if (age <= 16) return '14-16';
-            if (age <= 20) return '17-20';
-            if (age <= 30) return '21-30';
-            if (age <= 45) return '31-45';
-            if (age <= 55) return '45-55';
-            return '55+';
-        },
         openBranch(branchId) {
             this.$router.push({ name: 'BranchView', params: { branchId } });
         },
@@ -393,21 +335,32 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 20px;
 }
 
-.avatar {
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    background-repeat: no-repeat;
-    image-rendering: crisp-edges;
+.house-with-character {
+    position: relative;
+    width: 300px;
+    height: 300px;
 }
 
 .house {
+    position: absolute;
+    inset: 0;
     border: 1px solid #ccc;
     border-radius: 4px;
     background-repeat: no-repeat;
     image-rendering: crisp-edges;
+    z-index: 1;
+}
+
+.character-foreground {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 200px;
+    height: 300px;
+    z-index: 2;
 }
 
 h2 {