diff --git a/apps/player/src/assets/images/h5bg2.webp b/apps/player/src/assets/images/h5bg2.webp
new file mode 100644
index 0000000..cd8ca50
Binary files /dev/null and b/apps/player/src/assets/images/h5bg2.webp differ
diff --git a/apps/player/src/layouts/MainLayout.vue b/apps/player/src/layouts/MainLayout.vue
index bd3cba2..172ca3b 100644
--- a/apps/player/src/layouts/MainLayout.vue
+++ b/apps/player/src/layouts/MainLayout.vue
@@ -221,7 +221,7 @@ watch(
   height: 100%;
   min-height: 100dvh;
   overflow: hidden;
-  background: var(--bg-body);
+  background: transparent;
 }
 .header {
   flex-shrink: 0;
diff --git a/apps/player/src/styles.css b/apps/player/src/styles.css
index 32f4090..f23beed 100644
--- a/apps/player/src/styles.css
+++ b/apps/player/src/styles.css
@@ -66,9 +66,19 @@
 }
 
 /* ── Global resets ── */
-html, body, #app { height: 100%; }
+html, body, #app { height: 100%; min-height: 100%; }
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  height: -webkit-fill-available;
+}
 
 body {
+  position: relative;
+  isolation: isolate;
+  min-height: 100%;
+  min-height: -webkit-fill-available;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   background-color: var(--bg-body);
   color: var(--text);
@@ -77,6 +87,36 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: -2;
+  pointer-events: none;
+  background-image: url('./assets/images/h5bg2.webp');
+  background-repeat: no-repeat;
+  background-position: center 240px;
+  background-size: 84% auto;
+  opacity: 0.55;
+  filter: saturate(0.9);
+}
+
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(244, 162, 97, 0.08), transparent 55%),
+    linear-gradient(rgba(15, 32, 39, 0.72), rgba(15, 32, 39, 0.82));
+}
+
+#app {
+  min-height: 100%;
+  min-height: -webkit-fill-available;
+}
+
 a { color: inherit; text-decoration: none; }
 button { cursor: pointer; border: none; font-family: inherit; }
 
@@ -197,7 +237,6 @@ input:-webkit-autofill:active {
 .qa-item,
 .qe-item,
 .league-block,
-.tx-list.glass-card,
 .drawer,
 .slip-item,
 .hero,
@@ -211,12 +250,6 @@ input:-webkit-autofill:active {
   -webkit-backdrop-filter: blur(14px);
 }
 
-.tx-list.glass-card {
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-}
-
 .ps-gold-input {
   background: var(--bg-input) !important;
   border: 1px solid var(--border) !important;
diff --git a/apps/player/src/views/HomeView.vue b/apps/player/src/views/HomeView.vue
index 624bd2f..2a37e15 100644
--- a/apps/player/src/views/HomeView.vue
+++ b/apps/player/src/views/HomeView.vue
@@ -66,36 +66,37 @@ function formatKickoff(startTime: string) {
 
     <BannerCarousel :banners="banners" :fallback-to="bannerFallbackTo" />
 
-    <div class="hot-tabs" role="tablist" :aria-label="t('home.hot_matches')">
-      <button
-        type="button"
-        role="tab"
-        class="hot-tab"
-        :class="{ active: activeTab === 'hot' }"
-        :aria-selected="activeTab === 'hot'"
-        @click="activeTab = 'hot'"
-      >
-        {{ t('home.hot_tab') }}
-      </button>
-      <button
-        type="button"
-        role="tab"
-        class="hot-tab"
-        :class="{ active: activeTab === 'upcoming' }"
-        :aria-selected="activeTab === 'upcoming'"
-        @click="activeTab = 'upcoming'"
-      >
-        {{ t('home.upcoming_tab') }}
-      </button>
-    </div>
+    <section class="hot-panel">
+      <div class="hot-tabs" role="tablist" :aria-label="t('home.hot_matches')">
+        <button
+          type="button"
+          role="tab"
+          class="hot-tab"
+          :class="{ active: activeTab === 'hot' }"
+          :aria-selected="activeTab === 'hot'"
+          @click="activeTab = 'hot'"
+        >
+          {{ t('home.hot_tab') }}
+        </button>
+        <button
+          type="button"
+          role="tab"
+          class="hot-tab"
+          :class="{ active: activeTab === 'upcoming' }"
+          :aria-selected="activeTab === 'upcoming'"
+          @click="activeTab = 'upcoming'"
+        >
+          {{ t('home.upcoming_tab') }}
+        </button>
+      </div>
 
-    <div
-      v-for="(match, index) in displayedMatches"
-      :key="match.id"
-      class="match-card"
-      :class="{ 'match-card--live-anim': activeTab === 'hot' && index < 3 }"
-      @click="goMatch(match.id)"
-    >
+      <div
+        v-for="(match, index) in displayedMatches"
+        :key="match.id"
+        class="match-card"
+        :class="{ 'match-card--live-anim': activeTab === 'hot' && index < 3 }"
+        @click="goMatch(match.id)"
+      >
       <div class="match-info">
         <div class="match-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
         <div class="match-time">{{ formatKickoff(match.startTime) }}</div>
@@ -141,10 +142,11 @@ function formatKickoff(startTime: string) {
       </div>
     </div>
 
-    <div v-if="!loading && !displayedMatches.length" class="empty">
-      <img :src="emptyMatchesImg" alt="" class="empty-icon" />
-      <p>{{ emptyMessage }}</p>
-    </div>
+      <div v-if="!loading && !displayedMatches.length" class="empty">
+        <img :src="emptyMatchesImg" alt="" class="empty-icon" />
+        <p>{{ emptyMessage }}</p>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -157,10 +159,20 @@ function formatKickoff(startTime: string) {
   transition: height 0.15s ease;
 }
 
+.hot-panel {
+  background: var(--glass-bg);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
 .hot-tabs {
   display: flex;
   gap: 0;
-  margin-bottom: 12px;
+  margin-bottom: 0;
+  background: rgba(15, 32, 39, 0.55);
   border-bottom: 1px solid var(--border);
 }
 
@@ -287,6 +299,15 @@ function formatKickoff(startTime: string) {
   line-height: 1.3;
 }
 
+.hot-panel .match-card {
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
 .match-card {
   position: relative;
   isolation: isolate;
@@ -294,15 +315,19 @@ function formatKickoff(startTime: string) {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  margin-bottom: 8px;
+  margin-bottom: 0;
   padding: 10px 12px;
   min-height: 60px;
-  border-radius: var(--radius-lg);
+  border-radius: 0;
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
   overflow: hidden;
 }
 
+.hot-panel .match-card:last-of-type {
+  border-bottom: none;
+}
+
 .match-card::before {
   content: '';
   position: absolute;
@@ -538,6 +563,7 @@ function formatKickoff(startTime: string) {
   color: var(--text-muted);
   padding: 28px 16px;
   font-weight: 600;
+  border-top: 1px solid var(--border);
 }
 
 .empty-icon {
diff --git a/apps/player/src/views/WalletDetailView.vue b/apps/player/src/views/WalletDetailView.vue
index 9f72f80..1895d9f 100644
--- a/apps/player/src/views/WalletDetailView.vue
+++ b/apps/player/src/views/WalletDetailView.vue
@@ -187,7 +187,7 @@ const pullIndicatorStyle = () => ({
         </button>
       </div>
 
-      <div v-if="items.length" class="tx-list glass-card">
+      <div v-if="items.length" class="tx-list">
         <button
           v-for="tx in items"
           :key="tx.transactionId"
diff --git a/apps/player/src/views/WalletView.vue b/apps/player/src/views/WalletView.vue
index ce23f89..0a12d8d 100644
--- a/apps/player/src/views/WalletView.vue
+++ b/apps/player/src/views/WalletView.vue
@@ -110,7 +110,7 @@ const pullIndicatorStyle = () => ({
         >{{ t('wallet.view_all') }} &#x203A;</button>
       </div>
 
-      <div v-if="items.length" class="tx-list glass-card">
+      <div v-if="items.length" class="tx-list">
         <button
           v-for="tx in items"
           :key="tx.transactionId"