diff --git a/src/components/Fee.tsx b/src/components/Fee.tsx
new file mode 100644
index 0000000..9ca041e
--- /dev/null
+++ b/src/components/Fee.tsx
@@ -0,0 +1,29 @@
+import { useI18n } from "~/i18n/context";
+import { AmountFiat, AmountSats } from "~/components/Amount";
+import { FeesModal } from "~/components/MoreInfoModal";
+
+export function Fee(props: { amountSats?: bigint | number }) {
+    const i18n = useI18n();
+
+    return (
+        <div class="flex gap-3">
+            <p class="text-m-grey-400 text-sm">{i18n.t("common.fee")}</p>
+            <div class="flex gap-1">
+                <div class="flex flex-col gap-1">
+                    <div class="text-right text-sm">
+                        <AmountSats
+                            amountSats={props.amountSats}
+                            denominationSize="sm"
+                        />
+                    </div>
+                    <div class="text-xs text-white/70">
+                        <AmountFiat amountSats={props.amountSats} />
+                    </div>
+                </div>
+                <div>
+                    <FeesModal icon />
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/routes/Receive.tsx b/src/routes/Receive.tsx
index 6b30aed..0d2cba0 100644
--- a/src/routes/Receive.tsx
+++ b/src/routes/Receive.tsx
@@ -47,6 +47,7 @@ import side2side from "~/assets/icons/side-to-side.svg";
 import { useI18n } from "~/i18n/context";
 import eify from "~/utils/eify";
 import { matchError } from "~/logic/errorDispatch";
+import { Fee } from "~/components/Fee";
 
 type OnChainTx = {
     transaction: {
@@ -486,30 +487,7 @@ export default function Receive() {
                                         paidState() === "lightning_paid"
                                     }
                                 >
-                                    <div class="flex flex-row items-start gap-3">
-                                        <p class="text-m-grey-400 text-sm leading-[17px] items-center">
-                                            {i18n.t("common.fee")}
-                                        </p>
-                                        <div class="flex items-start gap-1">
-                                            <div class="flex flex-col gap-1 items-end">
-                                                <div class="text-right text-sm">
-                                                    <AmountSats
-                                                        amountSats={lspFee()}
-                                                        denominationSize="sm"
-                                                    />
-                                                </div>
-                                                <div class="text-xs text-white/70">
-                                                    <AmountFiat
-                                                        amountSats={lspFee()}
-                                                    />
-                                                </div>
-                                            </div>
-                                            <div class="flex items-start py-[1px]">
-                                                {/*TODO: Add different fee hints insode of <FeesModal />*/}
-                                                <FeesModal icon />
-                                            </div>
-                                        </div>
-                                    </div>
+                                    <Fee amountSats={lspFee()} />
                                 </Show>
                                 {/*TODO: Confirmation time estimate still not possible needs to be implemented in mutiny-node first
                                 {/*TODO: add internal payment detail page* for lightning*/}
diff --git a/src/routes/Send.tsx b/src/routes/Send.tsx
index f38068d..6cbcf3d 100644
--- a/src/routes/Send.tsx
+++ b/src/routes/Send.tsx
@@ -44,10 +44,10 @@ import { ExternalLink } from "~/components/layout/ExternalLink";
 import { InfoBox } from "~/components/InfoBox";
 import { useI18n } from "~/i18n/context";
 import { ParsedParams, toParsedParams } from "~/logic/waila";
-import { FeesModal } from "~/components/MoreInfoModal";
 import { Clipboard } from "@capacitor/clipboard";
 import { Capacitor } from "@capacitor/core";
 import { FeedbackLink } from "./Feedback";
+import { Fee } from "~/components/Fee";
 
 export type SendSource = "lightning" | "onchain";
 
@@ -623,35 +623,7 @@ export default function Send() {
                                     </div>
                                 </div>
                                 <hr class="w-16 bg-m-grey-400" />
-                                <div class="flex flex-row items-start gap-3">
-                                    <p class="text-m-grey-400 text-sm leading-[17px] text-center">
-                                        {i18n.t("common.fee")}
-                                    </p>
-                                    <div class="flex items-start gap-1">
-                                        <div class="flex flex-col gap-1 items-end">
-                                            <div class="text-right text-sm">
-                                                <AmountSats
-                                                    amountSats={
-                                                        sentDetails()
-                                                            ?.fee_estimate
-                                                    }
-                                                    denominationSize="sm"
-                                                />
-                                            </div>
-                                            <div class="text-xs text-white/70">
-                                                <AmountFiat
-                                                    amountSats={
-                                                        sentDetails()
-                                                            ?.fee_estimate
-                                                    }
-                                                />
-                                            </div>
-                                        </div>
-                                        <div class="flex items-start py-[1px]">
-                                            <FeesModal icon />
-                                        </div>
-                                    </div>
-                                </div>
+                                <Fee amountSats={sentDetails()?.fee_estimate} />
                                 <Show when={sentDetails()?.txid}>
                                     <ExternalLink
                                         href={mempoolTxUrl(
diff --git a/src/routes/Storybook.tsx b/src/routes/Storybook.tsx
index f612b22..f9cc016 100644
--- a/src/routes/Storybook.tsx
+++ b/src/routes/Storybook.tsx
@@ -1,4 +1,5 @@
 import { AmountCard } from "~/components/AmountCard";
+import { Fee } from "~/components/Fee";
 import NavBar from "~/components/NavBar";
 import { OnboardWarning } from "~/components/OnboardWarning";
 import { ShareCard } from "~/components/ShareCard";
@@ -24,6 +25,7 @@ export default function Admin() {
                     <Button loading intent="blue">
                         Button
                     </Button>
+                    <Fee amountSats={15000n} />
                 </VStack>
             </DefaultMain>
             <NavBar activeTab="none" />