diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 45457b0..81bad62 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -47,7 +47,7 @@ header {
   display: flex;
   justify-content: space-between;
   padding: 10px;
-  background-color: #f8a22b;
+  background-color: #FF8C5A;
 }
 .logo, .title, .advertisement {
   text-align: center;
diff --git a/frontend/src/views/falukant/FamilyView.vue b/frontend/src/views/falukant/FamilyView.vue
index 8f9c391..f5bbc5b 100644
--- a/frontend/src/views/falukant/FamilyView.vue
+++ b/frontend/src/views/falukant/FamilyView.vue
@@ -16,58 +16,59 @@
             <div class="spouse-section">
                 <h3>{{ $t('falukant.family.spouse.title') }}</h3>
                 <div v-if="relationships.length > 0" class="relationship-container">
-                    <!-- 3D-Modell für Partner rechts neben Beziehung -->
-                    <div class="partner-character-3d">
-                        <Character3D 
-                            :gender="relationships[0].character2.gender" 
-                            :age="relationships[0].character2.age" 
-                        />
+                    <div class="relationship-row">
+                        <div class="relationship">
+                            <table>
+                                <tr>
+                                    <td>{{ $t('falukant.family.relationships.name') }}</td>
+                                    <td>
+                                        {{ $t('falukant.titles.' + relationships[0].character2.gender + '.' +
+                                            relationships[0].character2.nobleTitle) }}
+                                        {{ relationships[0].character2.firstName }}
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>{{ $t('falukant.family.spouse.age') }}</td>
+                                    <td>{{ relationships[0].character2.age }}</td>
+                                </tr>
+                                <tr>
+                                    <td>{{ $t('falukant.family.spouse.mood') }}</td>
+                                    <td>{{ $t(`falukant.mood.${relationships[0].character2.mood.tr}`) }}</td>
+                                </tr>
+                                <tr>
+                                    <td>{{ $t('falukant.family.spouse.status') }}</td>
+                                    <td>{{ $t('falukant.family.statuses.' + relationships[0].relationshipType) }}</td>
+                                </tr>
+                                <tr v-if="relationships[0].relationshipType === 'wooing'">
+                                    <td>{{ $t('falukant.family.spouse.progress') }}</td>
+                                    <td>
+                                        <div class="progress">
+                                            <div class="progress-inner" :style="{
+                                                width: relationships[0].progress + '%',
+                                                backgroundColor: progressColor(relationships[0].progress)
+                                            }"></div>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <tr v-if="relationships[0].relationshipType === 'engaged'" colspan="2">
+                                    <button @click="jumpToPartyForm">{{ $t('falukant.family.spouse.jumpToPartyForm')
+                                        }}</button>
+                                </tr>
+                            </table>
+                            <ul>
+                                <li v-for="trait in relationships[0].character2.traits" :key="trait.id">
+                                    {{ $t(`falukant.character.${trait.tr}`) }}
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="partner-character-3d">
+                            <Character3D 
+                                :gender="relationships[0].character2.gender" 
+                                :age="relationships[0].character2.age" 
+                            />
+                        </div>
                     </div>
-                    <div class="relationship">
-                        <table>
-                            <tr>
-                                <td>{{ $t('falukant.family.relationships.name') }}</td>
-                                <td>
-                                    {{ $t('falukant.titles.' + relationships[0].character2.gender + '.' +
-                                        relationships[0].character2.nobleTitle) }}
-                                    {{ relationships[0].character2.firstName }}
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>{{ $t('falukant.family.spouse.age') }}</td>
-                                <td>{{ relationships[0].character2.age }}</td>
-                            </tr>
-                            <tr>
-                                <td>{{ $t('falukant.family.spouse.mood') }}</td>
-                                <td>{{ $t(`falukant.mood.${relationships[0].character2.mood.tr}`) }}</td>
-                            </tr>
-                            <tr>
-                                <td>{{ $t('falukant.family.spouse.status') }}</td>
-                                <td>{{ $t('falukant.family.statuses.' + relationships[0].relationshipType) }}</td>
-                            </tr>
-                            <tr v-if="relationships[0].relationshipType === 'wooing'">
-                                <td>{{ $t('falukant.family.spouse.progress') }}</td>
-                                <td>
-                                    <div class="progress">
-                                        <div class="progress-inner" :style="{
-                                            width: relationships[0].progress + '%',
-                                            backgroundColor: progressColor(relationships[0].progress)
-                                        }"></div>
-                                    </div>
-                                </td>
-                            </tr>
-                            <tr v-if="relationships[0].relationshipType === 'engaged'" colspan="2">
-                                <button @click="jumpToPartyForm">{{ $t('falukant.family.spouse.jumpToPartyForm')
-                                    }}</button>
-                            </tr>
-                        </table>
-                        <ul>
-                            <li v-for="trait in relationships[0].character2.traits" :key="trait.id">
-                                {{ $t(`falukant.character.${trait.tr}`) }}
-                            </li>
-                        </ul>
-                    </div>
-                    <div v-if="relationships[0].relationshipType === 'wooing'">
+                    <div v-if="relationships[0].relationshipType === 'wooing'" class="gifts-section">
                         <h3>{{ $t('falukant.family.spouse.wooing.gifts') }}</h3>
                         <table class="spouse-table">
                             <thead>
@@ -472,11 +473,21 @@ export default {
 }
 
 .relationship-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.relationship-row {
     display: flex;
     gap: 20px;
     align-items: flex-start;
 }
 
+.relationship {
+    flex: 1;
+}
+
 .partner-character-3d {
     width: 200px;
     height: 280px;
@@ -486,6 +497,11 @@ export default {
     flex-shrink: 0;
 }
 
+.gifts-section {
+    width: 100%;
+    margin-top: 10px;
+}
+
 .children-container {
     display: flex;
     gap: 20px;