diff --git a/src/App.vue b/src/App.vue
index c17a83d..0b9f749 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <v-app>
 
-    <Header class="fixed w-full z-50 p-2 h-16"></Header>
+    <Header class=" w-full z-50 p-2 h-16"></Header>
 
     <div class="flex flex-row ">
 
@@ -12,7 +12,7 @@
         </div>
       </transition>
 
-      <div class="flex flex-col w-full min-h-screen bg-amber">
+      <div class="flex flex-col w-full min-h-screen ">
         <RouterView></RouterView>
       </div>
 
diff --git a/src/views/contents/Reaction.vue b/src/views/contents/Reaction.vue
index eff7351..36dabe6 100644
--- a/src/views/contents/Reaction.vue
+++ b/src/views/contents/Reaction.vue
@@ -49,8 +49,8 @@ async function reactToContent(reaction) {
     const request = {
       ContentId: contentId.value,
       reaction: reaction,
-      userId: userProfileStore.value.id,
-      userName: `${userProfileStore.value.firstName} ${userProfileStore.value.lastName}`,
+      userId: userProfileStore.user.id,
+      userName: `${userProfileStore.user.firstName} ${userProfileStore.user.lastName}`,
     };
     adjustReactionCount(reaction);
     await client.post("/api/content/reaction/", request);
@@ -61,8 +61,8 @@ async function reactToContent(reaction) {
     const requestAdd = {
       ContentId: contentId.value,
       reaction: reaction,
-      userId: userProfileStore.value.id,
-      userName: `${userProfileStore.value.firstName} ${userProfileStore.value.lastName}`,
+      userId: userProfileStore.user.id,
+      userName: `${userProfileStore.user.firstName} ${userProfileStore.user.lastName}`,
     };
     adjustReactionCount(reaction);
     await client.post("/api/content/reaction/", requestAdd);
@@ -71,7 +71,7 @@ async function reactToContent(reaction) {
   } else {
     const requestRemove = {
       ContentId: contentId.value,
-      userId: userProfileStore.value.id,
+      userId: userProfileStore.user.id,
     };
     adjustReactionCount(reaction);
     await client.post("/api/content/reaction/remove", requestRemove);
@@ -168,7 +168,7 @@ function adjustReactionCount(newReaction) {
 }
 
 function initializeReactions() {
-  const userReaction = props.content.reactions.find((x) => x.userId === userProfileStore.value.id);
+  const userReaction = props.content.reactions.find((x) => x.userId === userProfileStore.user.id);
   if (userReaction) {
     currentReaction.value = userReaction.reaction;
     hasReacted.value = true;
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 666a796..b840cdc 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -1,24 +1,23 @@
 <template>
-  <div class="shadow-lg rounded-2xl"
-       :style="{ backgroundColor: branding.value.colors.secondary}">
-    <div class="relative z-20">
-      
-      <!--Banner-->
-      <div class="relative">
-        <div>
-          <img
-              class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
-              :src="branding.value.images.banner ? branding.value.images.banner : '/images/placeholders/banner.png'"
-              alt="Profile Banner"
-              style="max-height: 425px"
-          >
+  <div>
+    <div class="shadow-lg rounded-2xl ">
+      <div class="relative z-20">
+        <div class="min-h-8 rounded-t-2xl shadow-lg" :style="{ backgroundColor: branding.value.colors.primary}"></div>
+        <!--Banner-->
+        <div class="relative">
+          <div>
+            <img
+                class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
+                :src="branding.value.images.banner ? branding.value.images.banner : '/images/placeholders/banner.png'"
+                alt="Profile Banner"
+                style="max-height: 425px"
+            >
+          </div>
         </div>
       </div>
-
+      <!--actions - Lowerpart-->
+      <banner-actions></banner-actions>
     </div>
-    <!--actions - Lowerpart-->
-    <banner-actions></banner-actions>
-
   </div>
 </template>