diff --git a/src/App.vue b/src/App.vue
index 137a1c9..0479389 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,7 @@ import InfoCard from '@/components/InfoCard.vue'
     <div class="fixed inset-0 bg-black/70 pointer-events-none" />
 
     <!-- Page content -->
-    <main class="relative z-10 w-full max-w-lg px-6 py-16 max-md:px-4 max-md:py-10 space-y-10 max-md:space-y-6">
+    <main class="relative z-10 w-full max-w-lg px-6 py-16 max-md:px-4 max-md:py-10 space-y-8 max-md:space-y-5">
       <HeroSection />
       <InfoCard />
     </main>
diff --git a/src/components/HeroSection.vue b/src/components/HeroSection.vue
index 2a360ea..4a64720 100644
--- a/src/components/HeroSection.vue
+++ b/src/components/HeroSection.vue
@@ -1,9 +1,12 @@
 <template>
-  <header class="text-center animate-fade-in">
+  <header class="text-center animate-fade-in space-y-3">
     <img
       src="/logo.png"
       alt="Atitlan.io"
-      class="w-32 max-md:w-20 mx-auto drop-shadow-[0_4px_20px_var(--color-primary)] animate-float"
+      class="w-44 max-md:w-28 mx-auto drop-shadow-[0_4px_30px_var(--color-primary)] animate-float"
     />
+    <p class="text-sm font-light tracking-[0.25em] uppercase text-muted-foreground">
+      Atitlan.io
+    </p>
   </header>
 </template>
diff --git a/src/components/InfoCard.vue b/src/components/InfoCard.vue
index 75014ac..34cad74 100644
--- a/src/components/InfoCard.vue
+++ b/src/components/InfoCard.vue
@@ -14,7 +14,7 @@ import AtmStatusList from './AtmStatusList.vue'
 </script>
 
 <template>
-  <Card class="backdrop-blur-xl bg-black/50 border-primary/20 shadow-2xl shadow-primary/5">
+  <Card class="backdrop-blur-xl bg-black/50 border-primary/20 shadow-2xl shadow-primary/5 transition-transform duration-300 hover:-translate-y-1">
     <!-- Bitcoinmat rates -->
     <CardHeader class="text-center">
       <CardTitle class="text-2xl max-md:text-xl font-medium text-bitcoin">