diff --git a/packages/app/src/pages/home/index.vue b/packages/app/src/pages/home/index.vue
index c82b146..3fc7194 100644
--- a/packages/app/src/pages/home/index.vue
+++ b/packages/app/src/pages/home/index.vue
@@ -1,6 +1,11 @@
 <template>
   <view class="home-page">
-    <!-- Pull-to-refresh wrapper -->
+    <!-- ① Brand Banner — fixed background layer -->
+    <view class="banner-fixed">
+      <BrandBanner :studio-info="studioStore.studioInfo" />
+    </view>
+
+    <!-- Pull-to-refresh wrapper — scrollable foreground -->
     <scroll-view
       class="page-scroll"
       scroll-y
@@ -11,34 +16,39 @@
       @refresherrefresh="handleRefresh"
       @refresherrestore="refreshing = false"
     >
-      <!-- ① Brand Banner (hero with bg image + centered logo) -->
-      <BrandBanner :studio-info="studioStore.studioInfo" />
+      <!-- Transparent spacer to reveal Banner behind -->
+      <view class="banner-spacer" />
 
-      <!-- ② Studio Info (photo strip + address/phone) -->
-      <StudioInfo :studio-info="studioStore.studioInfo" />
+      <!-- Floating card with rounded top corners -->
+      <view class="floating-card">
+        <!-- Drag indicator -->
+        <view class="card-handle">
+          <view class="card-handle-bar" />
+        </view>
 
-      <!-- Divider -->
-      <view class="section-divider" />
+        <!-- ② Studio Info (photo strip + address/phone) -->
+        <StudioInfo :studio-info="studioStore.studioInfo" />
 
-      <!-- ③ Quick Entry (login / trial / book / renew) -->
-      <QuickEntry @scroll-to-card-shop="scrollToCardShop" />
+        <!-- ③ Quick Entry (login / trial / book / renew) -->
+        <QuickEntry @scroll-to-card-shop="scrollToCardShop" />
 
-      <!-- ④ Upcoming Bookings -->
-      <UpcomingBooking />
+        <!-- ④ Upcoming Bookings -->
+        <UpcomingBooking />
 
-      <!-- ⑤ Card Shop (vertical list) -->
-      <view :id="cardShopAnchorId">
-        <CardShop ref="cardShopRef" />
+        <!-- ⑤ Card Shop (vertical list) -->
+        <view :id="cardShopAnchorId">
+          <CardShop ref="cardShopRef" />
+        </view>
+
+        <!-- Bottom padding for tab bar -->
+        <view class="bottom-padding" />
       </view>
-
-      <!-- Bottom padding for tab bar -->
-      <view class="bottom-padding" />
     </scroll-view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 
 import BrandBanner from '../../components/BrandBanner.vue'
@@ -121,20 +131,55 @@ function scrollToCardShop() {
 
 <style lang="scss" scoped>
 .home-page {
-  display: flex;
-  flex-direction: column;
+  position: relative;
   height: 100vh;
   background: #FAF8F5;
 }
 
-.page-scroll {
-  flex: 1;
-  overflow-y: auto;
+/* Banner fixed behind everything */
+.banner-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
 }
 
-.section-divider {
-  height: 16rpx;
+/* Scroll layer sits above banner */
+.page-scroll {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  height: 100vh;
+}
+
+/* Transparent spacer lets banner peek through */
+.banner-spacer {
+  height: 420rpx;
+}
+
+/* Floating card that overlaps the banner */
+.floating-card {
+  position: relative;
   background: #FAF8F5;
+  border-radius: 32rpx 32rpx 0 0;
+  min-height: 100vh;
+  padding-top: 12rpx;
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
+}
+
+/* Small drag indicator at top of card */
+.card-handle {
+  display: flex;
+  justify-content: center;
+  padding: 16rpx 0 8rpx;
+}
+
+.card-handle-bar {
+  width: 64rpx;
+  height: 8rpx;
+  border-radius: 4rpx;
+  background: rgba(0, 0, 0, 0.1);
 }
 
 .bottom-padding {