diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index 9137d55..233ff0e 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -8,7 +8,7 @@
     <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
 
       <!-- Header -->
-      <div class="h-1/6 border rounded-b-3xl">
+      <div class="bg-yellow-500 h-1/6 border rounded-b-3xl">
         <div class="flex justify-around items-center h-full">
           <slot name="header" />
         </div>
diff --git a/pages/index.vue b/pages/index.vue
index 99296ea..b84dbc6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,78 +2,99 @@
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
 import { UserViewType } from "@/types/components/users.view"
 
+const { user } = useUser()
+
 useUser().fetchUser(); // loading user state just in case
 
+function setLevelbar(newValue: number) {
+  const levelbar = document.getElementById('levelbar')
+  if (levelbar) {
+    levelbar.style.width = newValue + "%"
+  }
+}
+
 </script>
 
 <template>
   <div class="bg-gradient-to-b from-indigo-500 to-purple-500">
     <HeaderFooterView>
       <template #header>
-        <div>
-          1A
-        </div>
-        <div>
-          2B
+        <div class="m-3 w-full flex items-center justify-center">
+          <Icon name="mdi:fire" class="text-red-600 text-4xl mr-2" />
+          <p class="text-xl font-bold">Streak: {{ user?.daily_streak }}</p>
         </div>
-        <div>
-          3C
+        <div class="m-3 w-full flex items-center justify-center">
+          <Icon name="mdi:star" class="text-red-600 text-5xl  mr-2" />
+          <div class="w-full bg-gray-700 rounded-full h-2.5">
+            <div id="levelbar" class="bg-red-600 h-2.5 rounded-full" style="width: 50%" />
+          </div>
         </div>
+
+
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
           <UsersView :view-type="UserViewType.USERTURN" class="h-3/6" :users="[
-            { user_id: 1,
+            {
+              user_id: 1,
               user_avatar: null,
               username: 'Test1'
             },
-            { user_id: 1,
+            {
+              user_id: 1,
               user_avatar: null,
               username: 'Test1'
             },
-            { user_id: 1,
+            {
+              user_id: 1,
               user_avatar: null,
               username: 'Test1'
             },
-            { user_id: 1,
+            {
+              user_id: 1,
               user_avatar: null,
               username: 'Test1'
             },
-            { user_id: 1,
+            {
+              user_id: 1,
               user_avatar: null,
               username: 'Test1'
-            },            
-          ]"/>
+            },
+          ]" />
           <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6" :users="[
-            { user_id: 1,
+            {
+              user_id: 1,
               user_avatar: null,
               username: 'Test1'
             },
-            { user_id: 2,
+            {
+              user_id: 2,
               user_avatar: null,
               username: 'Test2'
             },
-            { user_id: 3,
+            {
+              user_id: 3,
               user_avatar: null,
               username: 'Test3'
             },
-            { user_id: 4,
+            {
+              user_id: 4,
               user_avatar: null,
               username: 'Test4'
             },
-          ]"/>
-          <HomeControlsGameButtons class="h-1/6"/>
+          ]" />
+          <HomeControlsGameButtons class="h-1/6" />
         </div>
       </template>
       <template #footer>
         <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl">
-          <Icon name="mdi:album" class=""/>
+          <Icon name="mdi:album" class="" />
         </NuxtLink>
         <NuxtLink to="/" class="inline-flex items-center text-6xl rounded-full p-1.5">
-          <Icon name="mdi:home" class="text-white"/>
+          <Icon name="mdi:home" class="text-white" />
         </NuxtLink>
         <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl">
-          <Icon name="mdi:account-details" class=""/>
+          <Icon name="mdi:account-details" class="" />
         </NuxtLink>
       </template>
     </HeaderFooterView>