diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 00475a9..e8f412d 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -108,7 +108,7 @@ defineShortcuts({
 </script>
 
 <template>
-  <header class="flex items-center justify-between my-8 gap-2">
+  <header class="flex md:items-center justify-between my-8 gap-2">
     <NuxtLinkLocale
       class="handwriting text-xl sm:text-3xl text-nowrap gap-2 font-bold duration-300 text-gray-600 hover:text-black dark:text-gray-400 dark:hover:text-white"
       to="/"
diff --git a/app/components/AppVisitors.vue b/app/components/AppVisitors.vue
index 1728148..41e3c35 100644
--- a/app/components/AppVisitors.vue
+++ b/app/components/AppVisitors.vue
@@ -3,10 +3,12 @@ const { isLoading, visitors } = useVisitors()
 </script>
 
 <template>
-  <div class="fixed bottom-4 right-8">
+  <div class="fixed bottom-4 right-4">
     <UTooltip text="Visitors currently on my portfolio" placement="left">
-      <nav v-if="!isLoading" class="text-xs flex space-x-1 items-center border border-green-400 dark:border-green-600 px-2 rounded-xl">
-        <div>{{ visitors }}</div>
+      <nav v-if="!isLoading" class="text-xs flex space-x-1 items-center border border-green-400 dark:border-green-600 px-2 rounded-xl  bg-white dark:bg-black">
+        <p class="text-neutral-700 dark:text-neutral-300">
+          {{ visitors }}
+        </p>
         <div class="h-3 w-3 bg-green-200 dark:bg-green-600 rounded-full border-2 border-green-400 dark:border-green-800" />
       </nav>
     </UTooltip>