diff --git a/src/element/alby-button.tsx b/src/element/alby-button.tsx
index 7977db4..167338a 100644
--- a/src/element/alby-button.tsx
+++ b/src/element/alby-button.tsx
@@ -1,5 +1,5 @@
 import { Button as AlbyZapsButton } from "@getalby/bitcoin-connect-react";
 
 export default function AlbyButton() {
-    return <AlbyZapsButton />
-}
\ No newline at end of file
+  return <AlbyZapsButton />;
+}
diff --git a/src/element/chat-message.tsx b/src/element/chat-message.tsx
index 0f53e2d..8eb9c1f 100644
--- a/src/element/chat-message.tsx
+++ b/src/element/chat-message.tsx
@@ -176,15 +176,15 @@ export function ChatMessage({
             style={
               isTablet
                 ? {
-                  display: showZapDialog || isHovering ? "flex" : "none",
-                }
+                    display: showZapDialog || isHovering ? "flex" : "none",
+                  }
                 : {
-                  position: "fixed",
-                  top: topOffset ? topOffset - 12 : 0,
-                  left: leftOffset ? leftOffset - 32 : 0,
-                  opacity: showZapDialog || isHovering ? 1 : 0,
-                  pointerEvents: showZapDialog || isHovering ? "auto" : "none",
-                }
+                    position: "fixed",
+                    top: topOffset ? topOffset - 12 : 0,
+                    left: leftOffset ? leftOffset - 32 : 0,
+                    opacity: showZapDialog || isHovering ? 1 : 0,
+                    pointerEvents: showZapDialog || isHovering ? "auto" : "none",
+                  }
             }>
             {zapTarget && (
               <SendZapsDialog
diff --git a/src/element/summary-chart.tsx b/src/element/summary-chart.tsx
index 53a5737..22a710d 100644
--- a/src/element/summary-chart.tsx
+++ b/src/element/summary-chart.tsx
@@ -14,214 +14,214 @@ import { Profile } from "./profile";
 import { StatePill } from "./state-pill";
 
 interface StatSlot {
-    time: number;
-    zaps: number;
-    messages: number;
-    reactions: number;
+  time: number;
+  zaps: number;
+  messages: number;
+  reactions: number;
 }
 
 export default function StreamSummary({ link, preload }: { link: NostrLink; preload?: NostrEvent }) {
-    const ev = useCurrentStreamFeed(link, true, preload);
-    const thisLink = ev ? NostrLink.fromEvent(ev) : undefined;
-    const data = useLiveChatFeed(thisLink, undefined, 5_000);
-    const reactions = useEventReactions(thisLink ?? link, data.reactions);
+  const ev = useCurrentStreamFeed(link, true, preload);
+  const thisLink = ev ? NostrLink.fromEvent(ev) : undefined;
+  const data = useLiveChatFeed(thisLink, undefined, 5_000);
+  const reactions = useEventReactions(thisLink ?? link, data.reactions);
 
-    const chatSummary = useMemo(() => {
-        return Object.entries(
-            data.messages.reduce((acc, v) => {
-                acc[v.pubkey] ??= [];
-                acc[v.pubkey].push(v);
-                return acc;
-            }, {} as Record<string, Array<NostrEvent>>)
-        )
-            .map(([k, v]) => ({
-                pubkey: k,
-                messages: v,
-            }))
-            .sort((a, b) => (a.messages.length > b.messages.length ? -1 : 1));
-    }, [data.messages]);
+  const chatSummary = useMemo(() => {
+    return Object.entries(
+      data.messages.reduce((acc, v) => {
+        acc[v.pubkey] ??= [];
+        acc[v.pubkey].push(v);
+        return acc;
+      }, {} as Record<string, Array<NostrEvent>>)
+    )
+      .map(([k, v]) => ({
+        pubkey: k,
+        messages: v,
+      }))
+      .sort((a, b) => (a.messages.length > b.messages.length ? -1 : 1));
+  }, [data.messages]);
 
-    const zapsSummary = useMemo(() => {
-        return Object.entries(
-            reactions.zaps.reduce((acc, v) => {
-                if (!v.sender) return acc;
-                acc[v.sender] ??= [];
-                acc[v.sender].push(v);
-                return acc;
-            }, {} as Record<string, Array<ParsedZap>>)
-        )
-            .map(([k, v]) => ({
-                pubkey: k,
-                zaps: v,
-                total: v.reduce((acc, vv) => acc + vv.amount, 0),
-            }))
-            .sort((a, b) => (a.total > b.total ? -1 : 1));
-    }, [reactions.zaps]);
+  const zapsSummary = useMemo(() => {
+    return Object.entries(
+      reactions.zaps.reduce((acc, v) => {
+        if (!v.sender) return acc;
+        acc[v.sender] ??= [];
+        acc[v.sender].push(v);
+        return acc;
+      }, {} as Record<string, Array<ParsedZap>>)
+    )
+      .map(([k, v]) => ({
+        pubkey: k,
+        zaps: v,
+        total: v.reduce((acc, vv) => acc + vv.amount, 0),
+      }))
+      .sort((a, b) => (a.total > b.total ? -1 : 1));
+  }, [reactions.zaps]);
 
-    const title = findTag(ev, "title");
-    const summary = findTag(ev, "summary");
-    const status = findTag(ev, "status");
-    const starts = findTag(ev, "starts");
+  const title = findTag(ev, "title");
+  const summary = findTag(ev, "summary");
+  const status = findTag(ev, "status");
+  const starts = findTag(ev, "starts");
 
-    const Day = 60 * 60 * 24;
-    const startTime = starts ? Number(starts) : ev?.created_at ?? unixNow();
-    const endTime = status === StreamState.Live ? unixNow() : ev?.created_at ?? unixNow();
+  const Day = 60 * 60 * 24;
+  const startTime = starts ? Number(starts) : ev?.created_at ?? unixNow();
+  const endTime = status === StreamState.Live ? unixNow() : ev?.created_at ?? unixNow();
 
-    const streamLength = endTime - startTime;
-    const windowSize = streamLength > Day ? Day : 60 * 10;
+  const streamLength = endTime - startTime;
+  const windowSize = streamLength > Day ? Day : 60 * 10;
 
-    const stats = useMemo(() => {
-        let min = unixNow();
-        let max = 0;
-        const ret = [...data.messages, ...data.reactions]
-            .sort((a, b) => (a.created_at > b.created_at ? -1 : 1))
-            .reduce((acc, v) => {
-                const time = Math.floor(v.created_at - (v.created_at % windowSize));
-                if (time < min) {
-                    min = time;
-                }
-                if (time > max) {
-                    max = time;
-                }
-                const key = time.toString();
-                acc[key] ??= {
-                    time,
-                    zaps: 0,
-                    messages: 0,
-                    reactions: 0,
-                };
-
-                if (v.kind === LIVE_STREAM_CHAT) {
-                    acc[key].messages++;
-                } else if (v.kind === EventKind.ZapReceipt) {
-                    acc[key].zaps++;
-                } else if (v.kind === EventKind.Reaction) {
-                    acc[key].reactions++;
-                } else {
-                    console.debug("Uncounted stat", v);
-                }
-                return acc;
-            }, {} as Record<string, StatSlot>);
-
-        // fill empty time slots
-        for (let x = min; x < max; x += windowSize) {
-            ret[x.toString()] ??= {
-                time: x,
-                zaps: 0,
-                messages: 0,
-                reactions: 0,
-            };
+  const stats = useMemo(() => {
+    let min = unixNow();
+    let max = 0;
+    const ret = [...data.messages, ...data.reactions]
+      .sort((a, b) => (a.created_at > b.created_at ? -1 : 1))
+      .reduce((acc, v) => {
+        const time = Math.floor(v.created_at - (v.created_at % windowSize));
+        if (time < min) {
+          min = time;
         }
-        return ret;
-    }, [data]);
+        if (time > max) {
+          max = time;
+        }
+        const key = time.toString();
+        acc[key] ??= {
+          time,
+          zaps: 0,
+          messages: 0,
+          reactions: 0,
+        };
 
-    return (
-        <div className="stream-summary">
-            <h1>{title}</h1>
-            <p>{summary}</p>
-            <div className="flex gap-1">
-                <StatePill state={status as StreamState} />
-                {streamLength > 0 && (
-                    <FormattedMessage
-                        defaultMessage="Stream Duration {duration} mins"
-                        id="J/+m9y"
-                        values={{
-                            duration: <FormattedNumber value={streamLength / 60} maximumFractionDigits={2} />,
-                        }}
-                    />
-                )}
-            </div>
-            <h2>
-                <FormattedMessage defaultMessage="Summary" id="RrCui3" />
-            </h2>
-            <ResponsiveContainer height={200}>
-                <BarChart data={Object.values(stats)} margin={{ left: 0, right: 0 }} style={{ userSelect: "none" }}>
-                    <XAxis tick={false} />
-                    <YAxis />
-                    <Bar dataKey="messages" fill="green" stackId="" />
-                    <Bar dataKey="zaps" fill="yellow" stackId="" />
-                    <Bar dataKey="reactions" fill="red" stackId="" />
-                    <Tooltip
-                        cursor={{ fill: "rgba(255,255,255,0.2)" }}
-                        content={({ active, payload }) => {
-                            if (active && payload && payload.length) {
-                                const data = payload[0].payload as StatSlot;
-                                return (
-                                    <div className="plain-paper flex flex-col gap-2">
-                                        <div>
-                                            <FormattedDate value={data.time * 1000} timeStyle="short" dateStyle="short" />
-                                        </div>
-                                        <div className="flex justify-between">
-                                            <div>
-                                                <FormattedMessage defaultMessage="Messages" id="hMzcSq" />
-                                            </div>
-                                            <div>{data.messages}</div>
-                                        </div>
-                                        <div className="flex justify-between">
-                                            <div>
-                                                <FormattedMessage defaultMessage="Reactions" id="XgWvGA" />
-                                            </div>
-                                            <div>{data.reactions}</div>
-                                        </div>
-                                        <div className="flex justify-between">
-                                            <div>
-                                                <FormattedMessage defaultMessage="Zaps" id="OEW7yJ" />
-                                            </div>
-                                            <div>{data.zaps}</div>
-                                        </div>
-                                    </div>
-                                );
-                            }
-                            return null;
-                        }}
-                    />
-                </BarChart>
-            </ResponsiveContainer>
+        if (v.kind === LIVE_STREAM_CHAT) {
+          acc[key].messages++;
+        } else if (v.kind === EventKind.ZapReceipt) {
+          acc[key].zaps++;
+        } else if (v.kind === EventKind.Reaction) {
+          acc[key].reactions++;
+        } else {
+          console.debug("Uncounted stat", v);
+        }
+        return acc;
+      }, {} as Record<string, StatSlot>);
 
-            <div className="flex gap-1">
-                <div className="plain-paper flex-1">
-                    <h3>
-                        <FormattedMessage defaultMessage="Top Chatters" id="GGaJMU" />
-                    </h3>
-                    <div className="flex flex-col gap-2">
-                        {chatSummary.slice(0, 5).map(a => (
-                            <div className="flex justify-between items-center" key={a.pubkey}>
-                                <Profile pubkey={a.pubkey} />
-                                <div>
-                                    <FormattedMessage
-                                        defaultMessage="{n} messages"
-                                        id="gzsn7k"
-                                        values={{
-                                            n: <FormattedNumber value={a.messages.length} />,
-                                        }}
-                                    />
-                                </div>
-                            </div>
-                        ))}
+    // fill empty time slots
+    for (let x = min; x < max; x += windowSize) {
+      ret[x.toString()] ??= {
+        time: x,
+        zaps: 0,
+        messages: 0,
+        reactions: 0,
+      };
+    }
+    return ret;
+  }, [data]);
+
+  return (
+    <div className="stream-summary">
+      <h1>{title}</h1>
+      <p>{summary}</p>
+      <div className="flex gap-1">
+        <StatePill state={status as StreamState} />
+        {streamLength > 0 && (
+          <FormattedMessage
+            defaultMessage="Stream Duration {duration} mins"
+            id="J/+m9y"
+            values={{
+              duration: <FormattedNumber value={streamLength / 60} maximumFractionDigits={2} />,
+            }}
+          />
+        )}
+      </div>
+      <h2>
+        <FormattedMessage defaultMessage="Summary" id="RrCui3" />
+      </h2>
+      <ResponsiveContainer height={200}>
+        <BarChart data={Object.values(stats)} margin={{ left: 0, right: 0 }} style={{ userSelect: "none" }}>
+          <XAxis tick={false} />
+          <YAxis />
+          <Bar dataKey="messages" fill="green" stackId="" />
+          <Bar dataKey="zaps" fill="yellow" stackId="" />
+          <Bar dataKey="reactions" fill="red" stackId="" />
+          <Tooltip
+            cursor={{ fill: "rgba(255,255,255,0.2)" }}
+            content={({ active, payload }) => {
+              if (active && payload && payload.length) {
+                const data = payload[0].payload as StatSlot;
+                return (
+                  <div className="plain-paper flex flex-col gap-2">
+                    <div>
+                      <FormattedDate value={data.time * 1000} timeStyle="short" dateStyle="short" />
                     </div>
-                </div>
-                <div className="plain-paper flex-1">
-                    <h3>
-                        <FormattedMessage defaultMessage="Top Zappers" id="dVD/AR" />
-                    </h3>
-                    <div className="flex flex-col gap-2">
-                        {zapsSummary.slice(0, 5).map(a => (
-                            <div className="flex justify-between items-center" key={a.pubkey}>
-                                <Profile pubkey={a.pubkey} />
-                                <div>
-                                    <FormattedMessage
-                                        defaultMessage="{n} sats"
-                                        id="CsCUYo"
-                                        values={{
-                                            n: formatSats(a.total),
-                                        }}
-                                    />
-                                </div>
-                            </div>
-                        ))}
+                    <div className="flex justify-between">
+                      <div>
+                        <FormattedMessage defaultMessage="Messages" id="hMzcSq" />
+                      </div>
+                      <div>{data.messages}</div>
                     </div>
+                    <div className="flex justify-between">
+                      <div>
+                        <FormattedMessage defaultMessage="Reactions" id="XgWvGA" />
+                      </div>
+                      <div>{data.reactions}</div>
+                    </div>
+                    <div className="flex justify-between">
+                      <div>
+                        <FormattedMessage defaultMessage="Zaps" id="OEW7yJ" />
+                      </div>
+                      <div>{data.zaps}</div>
+                    </div>
+                  </div>
+                );
+              }
+              return null;
+            }}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+
+      <div className="flex gap-1">
+        <div className="plain-paper flex-1">
+          <h3>
+            <FormattedMessage defaultMessage="Top Chatters" id="GGaJMU" />
+          </h3>
+          <div className="flex flex-col gap-2">
+            {chatSummary.slice(0, 5).map(a => (
+              <div className="flex justify-between items-center" key={a.pubkey}>
+                <Profile pubkey={a.pubkey} />
+                <div>
+                  <FormattedMessage
+                    defaultMessage="{n} messages"
+                    id="gzsn7k"
+                    values={{
+                      n: <FormattedNumber value={a.messages.length} />,
+                    }}
+                  />
                 </div>
-            </div>
+              </div>
+            ))}
+          </div>
         </div>
-    );
+        <div className="plain-paper flex-1">
+          <h3>
+            <FormattedMessage defaultMessage="Top Zappers" id="dVD/AR" />
+          </h3>
+          <div className="flex flex-col gap-2">
+            {zapsSummary.slice(0, 5).map(a => (
+              <div className="flex justify-between items-center" key={a.pubkey}>
+                <Profile pubkey={a.pubkey} />
+                <div>
+                  <FormattedMessage
+                    defaultMessage="{n} sats"
+                    id="CsCUYo"
+                    values={{
+                      n: formatSats(a.total),
+                    }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/src/lang.json b/src/lang.json
index 93a52f5..94eeb3e 100644
--- a/src/lang.json
+++ b/src/lang.json
@@ -140,6 +140,9 @@
   "GGaJMU": {
     "defaultMessage": "Top Chatters"
   },
+  "Gmiwnd": {
+    "defaultMessage": "Refresh the page to use the latest version"
+  },
   "Gq6x9o": {
     "defaultMessage": "Cover Image"
   },
@@ -227,6 +230,9 @@
   "Qe1MJu": {
     "defaultMessage": "{name} with {amount}"
   },
+  "RJ2VxG": {
+    "defaultMessage": "A new version has been detected"
+  },
   "RJOmzk": {
     "defaultMessage": "I have read and agree with {provider}''s {terms}."
   },
@@ -381,6 +387,9 @@
   "r2Jjms": {
     "defaultMessage": "Log In"
   },
+  "rELDbB": {
+    "defaultMessage": "Refresh"
+  },
   "rWBFZA": {
     "defaultMessage": "Sexually explicit material ahead!"
   },
diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx
index 66ea0e6..08e9b31 100644
--- a/src/pages/layout.tsx
+++ b/src/pages/layout.tsx
@@ -145,20 +145,25 @@ export function LayoutPage() {
 }
 
 function NewVersionBanner() {
-  const newVersion = useSyncExternalStore(c => NewVersion.hook(c), () => NewVersion.snapshot());
+  const newVersion = useSyncExternalStore(
+    c => NewVersion.hook(c),
+    () => NewVersion.snapshot()
+  );
   if (!newVersion) return;
 
-  return <div className="fixed top-0 left-0 w-max flex bg-slate-800 py-2 px-4 opacity-95">
-    <div className="grow">
-      <h1>
-        <FormattedMessage defaultMessage="A new version has been detected" id="RJ2VxG" />
-      </h1>
-      <p>
-        <FormattedMessage defaultMessage="Refresh the page to use the latest version" id="Gmiwnd" />
-      </p>
+  return (
+    <div className="fixed top-0 left-0 w-max flex bg-slate-800 py-2 px-4 opacity-95">
+      <div className="grow">
+        <h1>
+          <FormattedMessage defaultMessage="A new version has been detected" id="RJ2VxG" />
+        </h1>
+        <p>
+          <FormattedMessage defaultMessage="Refresh the page to use the latest version" id="Gmiwnd" />
+        </p>
+      </div>
+      <AsyncButton onClick={() => window.location.reload()} className="btn">
+        <FormattedMessage defaultMessage="Refresh" id="rELDbB" />
+      </AsyncButton>
     </div>
-    <AsyncButton onClick={() => window.location.reload()} className="btn">
-      <FormattedMessage defaultMessage="Refresh" id="rELDbB" />
-    </AsyncButton>
-  </div>
-}
\ No newline at end of file
+  );
+}
diff --git a/src/translations/en.json b/src/translations/en.json
index 4c8a0c2..4219ecd 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -46,6 +46,7 @@
   "Fodi9+": "Get paid by viewers",
   "G/yZLu": "Remove",
   "GGaJMU": "Top Chatters",
+  "Gmiwnd": "Refresh the page to use the latest version",
   "Gq6x9o": "Cover Image",
   "H/bNs9": "Save this and keep it safe! If you lose this key, you won't be able to access your account ever again. Yep, it's that serious!",
   "H5+NAX": "Balance",
@@ -75,6 +76,7 @@
   "QRRCp0": "Stream URL",
   "QceMQZ": "Goal: {amount}",
   "Qe1MJu": "{name} with {amount}",
+  "RJ2VxG": "A new version has been detected",
   "RJOmzk": "I have read and agree with {provider}''s {terms}.",
   "RXQdxR": "Please login to write messages!",
   "RrCui3": "Summary",
@@ -126,6 +128,7 @@
   "oZrFyI": "Stream type should be HLS",
   "pO/lPX": "Scheduled for {date}",
   "r2Jjms": "Log In",
+  "rELDbB": "Refresh",
   "rWBFZA": "Sexually explicit material ahead!",
   "rbrahO": "Close",
   "rfC1Zq": "Save card",