diff --git a/ssr/src/page/post_view/bet.rs b/ssr/src/page/post_view/bet.rs
index 7ee66f14..f56087f9 100644
--- a/ssr/src/page/post_view/bet.rs
+++ b/ssr/src/page/post_view/bet.rs
@@ -1,9 +1,3 @@
-use candid::Principal;
-use leptos::*;
-use leptos_icons::*;
-use leptos_use::use_interval_fn;
-use web_time::Duration;
-
 use crate::{
     canister::individual_user_template::{BettingStatus, PlaceBetArg, Result2},
     component::{
@@ -20,6 +14,11 @@ use crate::{
         MockPartialEq,
     },
 };
+use candid::Principal;
+use leptos::*;
+use leptos_icons::*;
+use leptos_use::use_interval_fn;
+use web_time::Duration;
 
 #[derive(Clone, Copy, Debug, PartialEq)]
 enum CoinState {
@@ -122,13 +121,13 @@ fn HNButton(
 
     view! {
         <button
-            class="h-14 w-14 md:h-16 md:w-16 lg:h-18 md:w-18"
+            class="w-14 h-14 md:w-16 md:h-16 md:w-18 lg:h-18"
             class=("grayscale", grayscale)
             disabled=disabled
             on:click=move |_| bet_direction.set(Some(kind))
         >
             <Show when=move || !show_spinner() fallback=SpinnerFit>
-                <Icon class="h-full w-full drop-shadow-lg" icon=icon />
+                <Icon class="w-full h-full drop-shadow-lg" icon=icon />
             </Show>
         </button>
     }
@@ -176,54 +175,81 @@ fn HNButtonOverlay(
             can_place_bet.set(false)
         }
     });
+    let log_coin = { move || logging::log!("coin get: {:?}", coin.get()) };
+    log_coin(); // This ensures you're tracking `coin.get()` inside a reactive closure.
 
+    let tracked_coin1 =
+        { move || logging::log!("coin tracked: {:?}", coin.with_untracked(|v| *v)) };
+    tracked_coin1();
+    let tracked_coin = move || coin.with_untracked(|v| u64::from(*v));
     view! {
-        <AuthCansProvider let:canisters>
-            {
-                create_effect(move |_| {
-                    let Some(bet_direction) = bet_direction() else {
-                        return;
-                    };
-                    let bet_amount = coin.get_untracked().into();
-                    place_bet_action.dispatch((canisters.clone(), bet_direction, bet_amount));
-                });
-            }
-        </AuthCansProvider>
-        <div class="flex w-full justify-center touch-manipulation">
-            <button disabled=running on:click=move |_| coin.update(|c| *c = c.wrapping_next())>
-                <Icon class="text-2xl justify-self-end text-white" icon=icondata::AiUpOutlined />
-            </button>
-        </div>
-        <div class="flex flex-row w-full items-center justify-center gap-6 touch-manipulation">
-            <HNButton disabled=running bet_direction kind=BetKind::Hot />
-            <button disabled=running on:click=move |_| coin.update(|c| *c = c.wrapping_next())>
-                <CoinStateView
-                    disabled=running
-                    class="w-12 h-12 md:h-14 md:w-14 lg:w-16 lg:h-16 drop-shadow-lg"
-                    coin
-                />
-            </button>
-            <HNButton disabled=running bet_direction kind=BetKind::Not />
-        </div>
-        // Bottom row: Hot <down arrow> Not
-        // most of the CSS is for alignment with above icons
-        <div class="flex w-full justify-center items-center gap-6 text-base md:text-lg lg:text-xl text-center font-medium pt-2 touch-manipulation">
-            <p class="w-14 md:w-16 lg:w-18">Hot</p>
-            <div class="flex justify-center w-12 md:w-14 lg:w-16">
-                <button disabled=running on:click=move |_| coin.update(|c| *c = c.wrapping_prev())>
-                    <Icon class="text-2xl text-white" icon=icondata::AiDownOutlined />
-                </button>
+                    <AuthCansProvider let:canisters>
+                        {
+                            create_effect(move |_| {
+                                let Some(bet_direction) = bet_direction() else {
+                                    return;
+                                };
+                                let bet_amount = coin.get_untracked().into();
+                                place_bet_action.dispatch((canisters.clone(), bet_direction, bet_amount));
+                            });
+                        }
+                    </AuthCansProvider>
+                    <div class="flex justify-center w-full touch-manipulation">
+                        <button disabled=running on:click=move |_| coin.update(|c| *c = c.wrapping_next())>
+                            <Icon class="justify-self-end text-2xl text-white" icon=icondata::AiUpOutlined />
+                        </button>
+                    </div>
+                    <div class="flex flex-row gap-6 justify-center items-center w-full touch-manipulation">
+                        <HNButton disabled=running bet_direction kind=BetKind::Hot />
+                        <button disabled=running on:click=move |_| coin.update(|c| *c = c.wrapping_next())>
+                            <CoinStateView
+                                disabled=running
+                                class="w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 drop-shadow-lg"
+                                coin
+                            />
+                        </button>
+                        <HNButton disabled=running bet_direction kind=BetKind::Not />
+                    </div>
+                    // Bottom row: Hot <down arrow> Not
+                    // most of the CSS is for alignment with above icons
+                    <div class="flex gap-6 justify-center items-center pt-2 w-full text-base font-medium text-center md:text-lg lg:text-xl touch-manipulation">
+                        <p class="w-14 md:w-16 lg:w-18">Hot</p>
+                        <div class="flex justify-center w-12 md:w-14 lg:w-16">
+                            <button disabled=running on:click=move |_| coin.update(|c| *c = c.wrapping_prev())>
+                                <Icon class="text-2xl text-white" icon=icondata::AiDownOutlined />
+                            </button>
+                        </div>
+                        <p class="w-14 md:w-16 lg:w-18">Not</p>
+                    </div>
+                    <ShadowBg />
+                       <Show when=move || running.get() >
+        <div class="flex fixed bottom-8 left-1/2 justify-center items-center mb-8 w-full transform -translate-x-1/2">
+            <div class="flex flex-col gap-1 justify-center items-center p-4 w-1/4 h-1/4 text-white rounded-md bg-black/50">
+                <div class="flex flex-col gap-1 justify-center items-center p-1 w-full shadow-sm">
+                    <p class="text-center text-white rounded-full bg-black/15 ps-2">
+                        You staked {tracked_coin()} tokens on
+                        {if let Some(bet_kind) = bet_direction() {
+                            if bet_kind == BetKind::Hot {
+                                "Hot"
+                            } else {
+                                "Not"
+                            }
+                        } else {
+                            "?"
+                        }}. Result is still pending
+                    </p>
+                </div>
             </div>
-            <p class="w-14 md:w-16 lg:w-18">Not</p>
         </div>
-        <ShadowBg />
-    }
+    </Show>
+
+        }
 }
 
 #[component]
 fn WinBadge() -> impl IntoView {
     view! {
-        <button class="w-full rounded-sm bg-primary-600 px-4 py-2 text-sm font-bold text-white">
+        <button class="py-2 px-4 w-full text-sm font-bold text-white rounded-sm bg-primary-600">
             <div class="flex justify-center items-center">
                 <span class="">
                     <Icon class="fill-white" style="" icon=icondata::RiTrophyFinanceFill />
@@ -237,7 +263,7 @@ fn WinBadge() -> impl IntoView {
 #[component]
 fn LostBadge() -> impl IntoView {
     view! {
-        <button class="w-full rounded-sm bg-white px-4 py-2 text-sm font-bold text-black">
+        <button class="py-2 px-4 w-full text-sm font-bold text-black bg-white rounded-sm">
             <Icon class="fill-white" style="" icon=icondata::RiTrophyFinanceFill />
             "You Lost"
         </button>
@@ -261,16 +287,16 @@ fn HNWonLost(participation: BetDetails) -> impl IntoView {
     let hn_icon = if is_hot { HotIcon } else { NotIcon };
 
     view! {
-        <div class="flex w-full justify-center items-center gap-6 rounded-xl bg-transparent p-4 shadow-sm">
+        <div class="flex gap-6 justify-center items-center p-4 w-full bg-transparent rounded-xl shadow-sm">
             <div class="relative flex-shrink-0 drop-shadow-lg">
                 <CoinStateView class="w-14 h-14 md:w-16 md:h-16" coin />
-                <Icon class="absolute -bottom-0.5 -right-3 h-7 w-7 md:w-9 md:h-9" icon=hn_icon />
+                <Icon class="absolute -bottom-0.5 -right-3 w-7 h-7 md:w-9 md:h-9" icon=hn_icon />
             </div>
 
             // <!-- Text and Badge Column -->
-            <div class="gap-2 w-full md:w-1/2 lg:w-1/3 flex flex-col">
+            <div class="flex flex-col gap-2 w-full md:w-1/2 lg:w-1/3">
                 // <!-- Result Text -->
-                <div class="text-sm leading-snug text-white rounded-full p-1">
+                <div class="p-1 text-sm leading-snug text-white rounded-full">
                     <p>You staked {bet_amount}tokens on {if is_hot { "Hot" } else { "Not" }}.</p>
                     <p>
                         {if let Some(reward) = participation.reward() {
@@ -317,7 +343,7 @@ fn BetTimer(post: PostDetails, participation: BetDetails, refetch_bet: Trigger)
 
     view! {
         <div
-            class="flex flex-row justify-end items-center gap-1 w-full rounded-full py-px pe-4 text-white text-base md:text-lg"
+            class="flex flex-row gap-1 justify-end items-center py-px w-full text-base text-white rounded-full md:text-lg pe-4"
             style=gradient
         >
             <Icon icon=icondata::AiClockCircleFilled />
@@ -348,33 +374,59 @@ fn HNAwaitingResults(
     };
 
     view! {
-        <div class="flex flex-col w-full items-center gap-1 p-4 shadow-sm">
-            <div class="flex flex-row w-full justify-center items-end gap-4">
+        <div class="flex flex-col gap-1 items-center p-4 w-full shadow-sm">
+            <div class="flex flex-row gap-4 justify-center items-end w-full">
                 <div class="relative flex-shrink-0 drop-shadow-lg">
                     <Icon class="w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16" icon=hn_icon />
                     <CoinStateView
-                        class="absolute bottom-0 -right-3 h-7 w-7 md:w-9 md:h-9 lg:w-11 lg:h-11"
+                        class="absolute bottom-0 -right-3 w-7 h-7 md:w-9 md:h-9 lg:w-11 lg:h-11"
                         coin
                     />
                 </div>
+
                 <div class="w-1/2 md:w-1/3 lg:w-1/4">
                     <BetTimer post refetch_bet participation />
                 </div>
             </div>
-            <p class="text-center text-white bg-black/15 rounded-full p-1 ps-2">
-                You staked {bet_amount}tokens on {bet_direction_text}Result is still pending
+            <p class="p-1 text-center text-white rounded-full bg-black/15 ps-2">
+                You staked {bet_amount} tokens on {bet_direction_text} Result is still pending
             </p>
         </div>
     }
 }
-
 #[component]
 pub fn HNUserParticipation(
     post: PostDetails,
     participation: BetDetails,
     refetch_bet: Trigger,
 ) -> impl IntoView {
+    let place_bet_action = create_action(
+        move |(canisters, bet_direction, bet_amount): &(Canisters<true>, BetKind, u64)| {
+            let post_can_id = post.canister_id;
+            let post_id = post.post_id;
+            let cans = canisters.clone();
+            let bet_amount = *bet_amount;
+            let bet_direction = *bet_direction;
+            async move {
+                match bet_on_post(cans, bet_amount, bet_direction, post_id, post_can_id).await {
+                    Ok(_) => Some(()),
+                    Err(e) => {
+                        log::error!("{e}");
+                        None
+                    }
+                }
+            }
+        },
+    );
+    let place_bet_res = place_bet_action.value();
+    create_effect(move |_| {
+        if place_bet_res().flatten().is_some() {
+            refetch_bet.notify();
+        }
+    });
+    let running = place_bet_action.pending();
     view! {
+
         {match participation.outcome {
             BetOutcome::AwaitingResult => {
                 view! { <HNAwaitingResults post refetch_bet participation /> }
@@ -386,6 +438,8 @@ pub fn HNUserParticipation(
             BetOutcome::Lost => {
                 view! { <HNWonLost participation /> }
             }
+
+
         }
             .into_view()}
         <ShadowBg />
@@ -454,7 +508,7 @@ fn LoaderWithShadowBg() -> impl IntoView {
 fn ShadowBg() -> impl IntoView {
     view! {
         <div
-            class="absolute bottom-0 left-0 w-dvw h-2/5 -z-[1]"
+            class="absolute bottom-0 left-0 h-2/5 w-dvw -z-[1]"
             style="background: linear-gradient(to bottom, #00000000 0%, #00000099 45%, #000000a8 100%, #000000cc 100%, #000000a8 100%);"
         />
     }