Typescript prettier

Committing seperate so it's easier to see actual changes.

34 files changed, 3963 insertions, 3643 deletions

diff --git a/jb-ui/src/JBApp.tsx b/jb-ui/src/JBApp.tsx
index ef23b3b..472b976 100644
--- a/jb-ui/src/JBApp.tsx
+++ b/jb-ui/src/JBApp.tsx
@@ -1,21 +1,26 @@
 import {
-    EventMessage,
-    EventType,
-    PingMessage,
-    PongMessage,
-    PongMessageKindEnum,
-    StatsMessage,
-    StatusApi,
-    SubscribeMessage, SubscribeMessageKindEnum,
-    TaskStatusResponse,
-    UserWalletBalance,
-    UserWalletBalanceResponse,
-    WalletApi
+  EventMessage,
+  EventType,
+  PingMessage,
+  PongMessage,
+  PongMessageKindEnum,
+  StatsMessage,
+  StatusApi,
+  SubscribeMessage,
+  SubscribeMessageKindEnum,
+  TaskStatusResponse,
+  UserWalletBalance,
+  UserWalletBalanceResponse,
+  WalletApi,
 } from "@/api_fsb";
 import Footer from "@/components/Footer";
 import { useAppDispatch } from "@/hooks";
 import { bpid, routeBasename, tagManager } from "@/lib/utils";
-import { setAssignmentID, setProductUserID, setTurkSubmitTo } from "@/models/appSlice";
+import {
+  setAssignmentID,
+  setProductUserID,
+  setTurkSubmitTo,
+} from "@/models/appSlice";
 import { addEvent } from "@/models/grlEventsSlice";
 import { addStatsData } from "@/models/grlStatsSlice";
 import Home from "@/pages/Home";
@@ -23,8 +28,15 @@ import MagicLink from "@/pages/MagicLink";
 import Preview from "@/pages/Preview";
 import Result from "@/pages/Result";
 import Work from "@/pages/Work";
-import { BrowserRouter, Outlet, Route, Routes, useSearchParams } from "react-router-dom";
-import useWebSocket from 'react-use-websocket';
+import Transfer from "@/pages/Transfer";
+import {
+  BrowserRouter,
+  Outlet,
+  Route,
+  Routes,
+  useSearchParams,
+} from "react-router-dom";
+import useWebSocket from "react-use-websocket";
 import NewsTicker from "./components/EventMarquee";
 
 import { useEffect } from "react";
@@ -34,178 +46,195 @@ import "@/index.css";
 import { setTaskStatus, setUserWalletBalance } from "@/models/appSlice";
 import { Profiling } from "./components/Profiling";
 
-type Message = PingMessage | PongMessage | SubscribeMessage | EventMessage | StatsMessage;
+type Message =
+  | PingMessage
+  | PongMessage
+  | SubscribeMessage
+  | EventMessage
+  | StatsMessage;
 
 function isStatsMessage(msg: Message): msg is StatsMessage {
-    return msg.kind === 'stats';
+  return msg.kind === "stats";
 }
 
 function isEventMessage(msg: Message): msg is EventMessage {
-    return msg.kind === 'event';
+  return msg.kind === "event";
 }
 
 function isPingMessage(msg: Message): msg is PingMessage {
-    return msg.kind === 'ping';
+  return msg.kind === "ping";
 }
 
 function QueryParamProcessor() {
-    const dispatch = useAppDispatch()
-    const [searchParams] = useSearchParams();
+  const dispatch = useAppDispatch();
+  const [searchParams] = useSearchParams();
 
-    useEffect(() => {
-        const worker_id = searchParams.get('workerId');
-        const assignment_id = searchParams.get('assignmentId');
-        const tsid = searchParams.get('tsid');
-        const turkSubmitTo = searchParams.get('turkSubmitTo');
-
-        if (turkSubmitTo) {
-            dispatch(setTurkSubmitTo(turkSubmitTo))
-        }
+  useEffect(() => {
+    const worker_id = searchParams.get("workerId");
+    const assignment_id = searchParams.get("assignmentId");
+    const tsid = searchParams.get("tsid");
+    const turkSubmitTo = searchParams.get("turkSubmitTo");
 
-        if (worker_id) {
-            dispatch(setProductUserID(worker_id))
-
-            new WalletApi().getUserWalletBalanceProductIdWalletGet(
-                bpid, // productId
-                worker_id, // bpuid
-            ).then(res => {
-                const response = res.data as UserWalletBalanceResponse;
-                const balance = response.wallet as UserWalletBalance;
-                dispatch(setUserWalletBalance(balance));
-            });
-        }
+    if (turkSubmitTo) {
+      dispatch(setTurkSubmitTo(turkSubmitTo));
+    }
 
-        if (assignment_id) {
-            dispatch(setAssignmentID(assignment_id))
-        }
+    if (worker_id) {
+      dispatch(setProductUserID(worker_id));
+
+      new WalletApi()
+        .getUserWalletBalanceProductIdWalletGet(
+          bpid, // productId
+          worker_id, // bpuid
+        )
+        .then((res) => {
+          const response = res.data as UserWalletBalanceResponse;
+          const balance = response.wallet as UserWalletBalance;
+          dispatch(setUserWalletBalance(balance));
+        });
+    }
 
-        if (tsid) {
-            new StatusApi().getTaskStatusProductIdStatusTsidGet(
-                bpid, // productId
-                tsid).then(res => {
-                    const response: TaskStatusResponse = res.data;
-                    dispatch(setTaskStatus(response))
-                }).catch((error) => {
-                    console.error("Error fetching task status:", error);
-                });
-        }
+    if (assignment_id) {
+      dispatch(setAssignmentID(assignment_id));
+    }
 
-    }, [searchParams]);
+    if (tsid) {
+      new StatusApi()
+        .getTaskStatusProductIdStatusTsidGet(
+          bpid, // productId
+          tsid,
+        )
+        .then((res) => {
+          const response: TaskStatusResponse = res.data;
+          dispatch(setTaskStatus(response));
+        })
+        .catch((error) => {
+          console.error("Error fetching task status:", error);
+        });
+    }
+  }, [searchParams]);
 
-    return <Outlet />;
+  return <Outlet />;
 }
 
 const Layout = () => {
-    return (
-        <div className="flex flex-col min-h-screen">
-            <header className="bg-amber-400 text-amber-950 py-2 text-center">
-                <a href="https://www.reddit.com/r/Marketresearch/comments/1s2tl0o/open_letter_to_cint_supplier_quality_issues/" target="_blank">
-                    <h4 className="text-[12px]">
-                        Letter to Cint: supplier quality issues, and malware-linked panels.
-                    </h4>
-                </a>
-            </header>
-
-            <main className="flex flex-1 bg-zinc-200">
-                <div className="flex flex-col items-center justify-center flex-1">
-                    <div className="
+  return (
+    <div className="flex flex-col min-h-screen">
+      <header className="bg-amber-400 text-amber-950 py-2 text-center">
+        <a
+          href="https://www.reddit.com/r/Marketresearch/comments/1s2tl0o/open_letter_to_cint_supplier_quality_issues/"
+          target="_blank"
+        >
+          <h4 className="text-[12px]">
+            Letter to Cint: supplier quality issues, and malware-linked panels.
+          </h4>
+        </a>
+      </header>
+
+      <main className="flex flex-1 bg-zinc-200">
+        <div className="flex flex-col items-center justify-center flex-1">
+          <div
+            className="
                     w-full max-w-full 
                     p-2 bg-white shadow-lg 
                     text-center space-y-4
                     md:max-w-5/8  md:rounded-lg
                     rounded-none 
-                    ">
-                        <Wallet />
-                        <Profiling />
-                        <Outlet />
-                    </div>
-                </div>
-            </main >
-
-            <footer className="bg-slate-700 text-zinc-200 p-2 text-center font-mono">
-                <NewsTicker />
-                <Footer />
-            </footer>
-
-        </div >
-    );
+                    "
+          >
+            <Wallet />
+            <Profiling />
+            <Outlet />
+          </div>
+        </div>
+      </main>
+
+      <footer className="bg-slate-700 text-zinc-200 p-2 text-center font-mono">
+        <NewsTicker />
+        <Footer />
+      </footer>
+    </div>
+  );
 };
 
 function JBApp() {
-    const dispatch = useAppDispatch()
-
-    const { sendJsonMessage, lastMessage } = useWebSocket(
-        "wss://fsb.generalresearch.com/ws/events/", {
-        onOpen: () => {
-            const subscribe: SubscribeMessage = {
-                "kind": SubscribeMessageKindEnum.Subscribe,
-                "product_id": bpid
-            }
-            sendJsonMessage(subscribe)
+  const dispatch = useAppDispatch();
+
+  const { sendJsonMessage, lastMessage } = useWebSocket(
+    "wss://fsb.generalresearch.com/ws/events/",
+    {
+      onOpen: () => {
+        const subscribe: SubscribeMessage = {
+          kind: SubscribeMessageKindEnum.Subscribe,
+          product_id: bpid,
+        };
+        sendJsonMessage(subscribe);
+      },
+    },
+  );
+
+  useEffect(() => {
+    if (lastMessage !== null) {
+      let msg: Message = JSON.parse(lastMessage.data);
+
+      if (isStatsMessage(msg)) {
+        dispatch(addStatsData(msg.data));
+      } else if (isEventMessage(msg)) {
+        // For simplicity, we just log the event messages here.
+        // You can extend this to update the UI or trigger notifications as needed.
+
+        switch (msg.data.event_type) {
+          case EventType.TaskEnter:
+          case EventType.TaskFinish:
+          case EventType.UserCreated:
+            dispatch(addEvent(msg.data));
+            break;
+
+          default:
+            // do nothing for now
+            break;
         }
+      } else if (isPingMessage(msg)) {
+        const pong: PongMessage = {
+          kind: PongMessageKindEnum.Pong,
+        };
+        sendJsonMessage(pong);
+      }
     }
-    );
-
-    useEffect(() => {
-        if (lastMessage !== null) {
-            let msg: Message = JSON.parse(lastMessage.data);
-
-            if (isStatsMessage(msg)) {
-                dispatch(addStatsData(msg.data))
-
-            } else if (isEventMessage(msg)) {
-                // For simplicity, we just log the event messages here.
-                // You can extend this to update the UI or trigger notifications as needed.
-
-                switch (msg.data.event_type) {
-                    case EventType.TaskEnter:
-                    case EventType.TaskFinish:
-                    case EventType.UserCreated:
-                        dispatch(addEvent(msg.data));
-                        break
-
-                    default:
-                        // do nothing for now
-                        break;
-                }
-
-            } else if (isPingMessage(msg)) {
-                const pong: PongMessage = {
-                    "kind": PongMessageKindEnum.Pong,
-                }
-                sendJsonMessage(pong)
-            }
-        }
-    }, [lastMessage]);
-
-    useEffect(() => {
-        if (!tagManager) return;
-
-        var _mtm = window._mtm = window._mtm || [];
-        _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
-        var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-        g.async = true;
-        g.src = tagManager;
-        if (s.parentNode) {
-            s.parentNode.insertBefore(g, s);
-        }
-    }, [tagManager])
-
-    return (
-        <BrowserRouter basename={routeBasename}>
-            <Routes>
-                <Route path="/auth/magic-link/" element={<MagicLink />} />
-                <Route element={<QueryParamProcessor />}>
-                    <Route element={<Layout />}>
-                        <Route path="/" element={<Home />} />
-                        <Route path="/preview/" element={<Preview />} />
-                        <Route path="/work/" element={<Work />} />
-                        <Route path="/result/" element={<Result />} />
-                    </Route>
-                </Route>
-            </Routes>
-        </BrowserRouter>
-    )
+  }, [lastMessage]);
+
+  useEffect(() => {
+    if (!tagManager) return;
+
+    var _mtm = (window._mtm = window._mtm || []);
+    _mtm.push({ "mtm.startTime": new Date().getTime(), event: "mtm.Start" });
+    var d = document,
+      g = d.createElement("script"),
+      s = d.getElementsByTagName("script")[0];
+    g.async = true;
+    g.src = tagManager;
+    if (s.parentNode) {
+      s.parentNode.insertBefore(g, s);
+    }
+  }, [tagManager]);
+
+  return (
+    <BrowserRouter basename={routeBasename}>
+      <Routes>
+        <Route path="/auth/magic-link/" element={<MagicLink />} />
+        <Route element={<QueryParamProcessor />}>
+          <Route element={<Layout />}>
+            <Route path="/" element={<Home />} />
+            {/* <Route path="/work/" element={<Work />} /> */}
+
+            <Route path="/preview/" element={<Preview />} />
+            <Route path="/work/" element={<Transfer />} />
+            <Route path="/result/" element={<Result />} />
+          </Route>
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
 }
 
 export default JBApp;
diff --git a/jb-ui/src/components/EventMarquee.tsx b/jb-ui/src/components/EventMarquee.tsx
index 4ce4f15..6aab3f8 100644
--- a/jb-ui/src/components/EventMarquee.tsx
+++ b/jb-ui/src/components/EventMarquee.tsx
@@ -1,230 +1,250 @@
-import { EventEnvelope, EventType, TaskEnterPayload, TaskFinishPayload } from "@/api_fsb";
-import { formatSecondsVerbose, formatSource, formatStatus, truncate } from "@/lib/utils";
+import {
+  EventEnvelope,
+  EventType,
+  TaskEnterPayload,
+  TaskFinishPayload,
+} from "@/api_fsb";
+import {
+  formatSecondsVerbose,
+  formatSource,
+  formatStatus,
+  truncate,
+} from "@/lib/utils";
 import { selectAllEvents, selectCurrentSpeed } from "@/models/grlEventsSlice";
-import getUnicodeFlagIcon from 'country-flag-icons/unicode';
+import getUnicodeFlagIcon from "country-flag-icons/unicode";
 import { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 
 // ─── Config ───────────────────────────────────────────────────────────────────
 
-const SPEED_EASING = 0.025;  // how quickly speed transitions (per frame)
+const SPEED_EASING = 0.025; // how quickly speed transitions (per frame)
 
 interface EventItemProps {
-    event: EventEnvelope;
+  event: EventEnvelope;
 }
 
 const EventTaskEnter = ({ event }: EventItemProps) => {
-    const payload = event.payload as TaskEnterPayload;
-
-    return (
-        <>
-            <span className="px-2 text-lg">{getUnicodeFlagIcon(payload.country_iso)}</span>
-            <p>
-                {truncate(event.product_user_id!, 6, "*****")} Entered{" "}
-                {formatSource(payload.source)}{" "}
-                (#{truncate(payload.survey_id!, 5, "***")})
-            </p>
-        </>
-    )
-}
+  const payload = event.payload as TaskEnterPayload;
+
+  return (
+    <>
+      <span className="px-2 text-lg">
+        {getUnicodeFlagIcon(payload.country_iso)}
+      </span>
+      <p>
+        {truncate(event.product_user_id!, 6, "*****")} Entered{" "}
+        {formatSource(payload.source)} (#
+        {truncate(payload.survey_id!, 5, "***")})
+      </p>
+    </>
+  );
+};
 
 const EventTaskFinish = ({ event }: EventItemProps) => {
-    const payload = event.payload as TaskFinishPayload;
-
-    return (
-        <>
-            <span className="px-2 text-lg">{getUnicodeFlagIcon(event.payload.country_iso)}</span>
-            <p>
-                {truncate(event.product_user_id!, 6, "*****")}{" "}
-                {formatStatus(payload.status)} {formatSource(payload.source)}{" "}
-                (#{truncate(payload.survey_id!, 5, "***")}) in{" "}
-                {formatSecondsVerbose(payload.duration_sec!)}
-            </p>
-        </>
-    )
-}
+  const payload = event.payload as TaskFinishPayload;
+
+  return (
+    <>
+      <span className="px-2 text-lg">
+        {getUnicodeFlagIcon(event.payload.country_iso)}
+      </span>
+      <p>
+        {truncate(event.product_user_id!, 6, "*****")}{" "}
+        {formatStatus(payload.status)} {formatSource(payload.source)} (#
+        {truncate(payload.survey_id!, 5, "***")}) in{" "}
+        {formatSecondsVerbose(payload.duration_sec!)}
+      </p>
+    </>
+  );
+};
 
 const EventUserCreated = ({ event }: EventItemProps) => {
-
-    return (
-        <>
-            <span className="px-2 text-lg">{getUnicodeFlagIcon(event.payload.country_iso)}</span>
-            <p>{truncate(event.product_user_id!, 6, "*****")} Created</p>
-        </>
-    )
-}
-
+  return (
+    <>
+      <span className="px-2 text-lg">
+        {getUnicodeFlagIcon(event.payload.country_iso)}
+      </span>
+      <p>{truncate(event.product_user_id!, 6, "*****")} Created</p>
+    </>
+  );
+};
 
 const EventComponent = ({ event }: EventItemProps) => {
-
-    const renderContent = () => {
-        switch (event.event_type) {
-            case EventType.TaskEnter:
-                return <EventTaskEnter event={event} />
-            case EventType.TaskFinish:
-                return <EventTaskFinish event={event} />
-            case EventType.UserCreated:
-                return <EventUserCreated event={event} />
-            default:
-                return <><p>Unknown event</p></>
-        }
+  const renderContent = () => {
+    switch (event.event_type) {
+      case EventType.TaskEnter:
+        return <EventTaskEnter event={event} />;
+      case EventType.TaskFinish:
+        return <EventTaskFinish event={event} />;
+      case EventType.UserCreated:
+        return <EventUserCreated event={event} />;
+      default:
+        return (
+          <>
+            <p>Unknown event</p>
+          </>
+        );
     }
+  };
 
-    return (
-        <div key={event.event_uuid!}
-            className="inline-flex items-center text-[10px]
-            font-mono px-2">
-            {renderContent()}
-
-            {/* <span className="text-red-500 pl-5">◆</span> */}
-        </div >
-    )
-}
+  return (
+    <div
+      key={event.event_uuid!}
+      className="inline-flex items-center text-[10px]
+            font-mono px-2"
+    >
+      {renderContent()}
 
+      {/* <span className="text-red-500 pl-5">◆</span> */}
+    </div>
+  );
+};
 
 // ─── Main Component ───────────────────────────────────────────────────────────
 export default function NewsTicker() {
-    // --- Redux ---
-    const reduxItems = useSelector(selectAllEvents);
-    const targetSpeedRedux = useSelector(selectCurrentSpeed); // px/sec
-
-    // --- Scroll state (all refs — no re-renders from animation) ---
-    const containerRef = useRef<HTMLDivElement | null>(null);  // The ticker band 
-    const stripRef = useRef<HTMLDivElement | null>(null);  // Scrolling strip
-    const translateX = useRef(0);
-    const currentSpeed = useRef(targetSpeedRedux);
-    const targetSpeed = useRef(targetSpeedRedux);
-
-    // Only state and refs persist across renders, the rest are re-initialized,
-    // that is why this isn't just a standard variable.
-    // Request Animation Frame reference (stores the animation frame ID)
-    const rafRef = useRef<number | null>(null);
-    const lastTime = useRef<number | null>(null);
-
-    // --- Item tracking ---
-    // Track which IDs are already in the scroller to only append 
-    // genuinely new ones.
-    const seenUUIDs = useRef(new Set<string>());
-    const pendingQueue = useRef<EventEnvelope[]>([]);
-    const [scrollItems, setScrollItems] = useState<EventEnvelope[]>([]);
-
-    // --- Sync Redux → pendingQueue (only new items) ---
-    useEffect(() => {
-        const newItems = reduxItems.filter((item) => !seenUUIDs.current.has(item.event_uuid!));
-        if (newItems.length === 0) return;
-
-        newItems.forEach(item => seenUUIDs.current.add(item.event_uuid!));
-        pendingQueue.current.push(...newItems);
-    }, [reduxItems]);
-
-    // --- Sync target speed from Redux ---
-    useEffect(() => {
-        targetSpeed.current = targetSpeedRedux;
-    }, [targetSpeedRedux]);
-
-    // --- RAF loop ---
-    useEffect(() => {
-        // This timestamp is a "high-resolution timestamp" provided by 
-        // the browser, which is more accurate for measuring frame intervals 
-        // than Date.now()
-        const loop = (timestamp: number) => {
-            console.log("RAF loop, timestamp:", timestamp, lastTime.current);
-
-            if (!lastTime.current) lastTime.current = timestamp;
-            const delta = (timestamp - lastTime.current) / 1000;
-            lastTime.current = timestamp;
-
-            // Slow easement towards targetSpeed
-            currentSpeed.current +=
-                (targetSpeed.current - currentSpeed.current) * SPEED_EASING;
-
-            // flush pending queue into React state
-            if (pendingQueue.current.length > 0) {
-                const incoming = pendingQueue.current.splice(0);
-                setScrollItems((prev) => [...prev, ...incoming]);
-            }
-
-            // Advance strip, slides it over left by X pixels
-            translateX.current -= currentSpeed.current * delta;
-            if (stripRef.current) {
-                stripRef.current.style.transform = `translateX(${translateX.current}px)`;
-            }
-
-            // prune items that have fully exited the left edge
-            if (stripRef.current && containerRef.current) {
-                const children = Array.from(stripRef.current.children);
-                const containerLeft = containerRef.current.getBoundingClientRect().left;
-                let pruneCount = 0;
-                let removedWidth = 0;
-
-                for (const child of children) {
-                    const rect = child.getBoundingClientRect();
-                    if (rect.right < containerLeft - 20) {
-                        pruneCount++;
-                        removedWidth += rect.width;
-                    } else {
-                        break;
-                    }
-                }
-
-                if (pruneCount > 0) {
-                    translateX.current += removedWidth;
-                    setScrollItems((prev) => prev.slice(pruneCount));
-                }
-            }
-
-            // Assign the next loop
-            rafRef.current = requestAnimationFrame(loop);
-        };
-
-        rafRef.current = requestAnimationFrame(loop);
-        return () => cancelAnimationFrame(rafRef.current!);
-    }, []);
-
-    return (
-        <div style={{
-            minHeight: "3vh", display: "flex", flexDirection: "column",
-            justifyContent: "center", alignItems: "center", gap: "0"
-        }}>
-
-            {/* Ticker wrapper */}
-            <div style={{ width: "100%", position: "relative" }}>
-
-                {/* The ticker band */}
-                <div
-                    ref={containerRef}
-                    style={{
-                        overflow: "hidden",
-                        padding: "0",
-                        position: "relative",
-                    }}
-                >
-
-                    {/* Scrolling strip */}
-                    <div
-                        ref={stripRef}
-                        style={{
-                            display: "inline-flex",
-                            alignItems: "center",
-                            whiteSpace: "nowrap",
-                            padding: "10px 0",
-                            willChange: "transform",
-                            position: "relative",
-                            zIndex: 2,
-                        }}
-                    >
-                        {scrollItems.map(item => (
-                            <EventComponent event={item} />
-                        ))}
-
-                        {/* Trailing spacer so new content doesn't immediately snap in */}
-                        <span style={{ paddingRight: "100vw", display: "inline-block" }} />
-
-                    </div>
-                </div>
-
-            </div>
+  // --- Redux ---
+  const reduxItems = useSelector(selectAllEvents);
+  const targetSpeedRedux = useSelector(selectCurrentSpeed); // px/sec
+
+  // --- Scroll state (all refs — no re-renders from animation) ---
+  const containerRef = useRef<HTMLDivElement | null>(null); // The ticker band
+  const stripRef = useRef<HTMLDivElement | null>(null); // Scrolling strip
+  const translateX = useRef(0);
+  const currentSpeed = useRef(targetSpeedRedux);
+  const targetSpeed = useRef(targetSpeedRedux);
+
+  // Only state and refs persist across renders, the rest are re-initialized,
+  // that is why this isn't just a standard variable.
+  // Request Animation Frame reference (stores the animation frame ID)
+  const rafRef = useRef<number | null>(null);
+  const lastTime = useRef<number | null>(null);
+
+  // --- Item tracking ---
+  // Track which IDs are already in the scroller to only append
+  // genuinely new ones.
+  const seenUUIDs = useRef(new Set<string>());
+  const pendingQueue = useRef<EventEnvelope[]>([]);
+  const [scrollItems, setScrollItems] = useState<EventEnvelope[]>([]);
+
+  // --- Sync Redux → pendingQueue (only new items) ---
+  useEffect(() => {
+    const newItems = reduxItems.filter(
+      (item) => !seenUUIDs.current.has(item.event_uuid!),
+    );
+    if (newItems.length === 0) return;
+
+    newItems.forEach((item) => seenUUIDs.current.add(item.event_uuid!));
+    pendingQueue.current.push(...newItems);
+  }, [reduxItems]);
+
+  // --- Sync target speed from Redux ---
+  useEffect(() => {
+    targetSpeed.current = targetSpeedRedux;
+  }, [targetSpeedRedux]);
+
+  // --- RAF loop ---
+  useEffect(() => {
+    // This timestamp is a "high-resolution timestamp" provided by
+    // the browser, which is more accurate for measuring frame intervals
+    // than Date.now()
+    const loop = (timestamp: number) => {
+      console.log("RAF loop, timestamp:", timestamp, lastTime.current);
+
+      if (!lastTime.current) lastTime.current = timestamp;
+      const delta = (timestamp - lastTime.current) / 1000;
+      lastTime.current = timestamp;
+
+      // Slow easement towards targetSpeed
+      currentSpeed.current +=
+        (targetSpeed.current - currentSpeed.current) * SPEED_EASING;
+
+      // flush pending queue into React state
+      if (pendingQueue.current.length > 0) {
+        const incoming = pendingQueue.current.splice(0);
+        setScrollItems((prev) => [...prev, ...incoming]);
+      }
+
+      // Advance strip, slides it over left by X pixels
+      translateX.current -= currentSpeed.current * delta;
+      if (stripRef.current) {
+        stripRef.current.style.transform = `translateX(${translateX.current}px)`;
+      }
+
+      // prune items that have fully exited the left edge
+      if (stripRef.current && containerRef.current) {
+        const children = Array.from(stripRef.current.children);
+        const containerLeft = containerRef.current.getBoundingClientRect().left;
+        let pruneCount = 0;
+        let removedWidth = 0;
+
+        for (const child of children) {
+          const rect = child.getBoundingClientRect();
+          if (rect.right < containerLeft - 20) {
+            pruneCount++;
+            removedWidth += rect.width;
+          } else {
+            break;
+          }
+        }
 
+        if (pruneCount > 0) {
+          translateX.current += removedWidth;
+          setScrollItems((prev) => prev.slice(pruneCount));
+        }
+      }
+
+      // Assign the next loop
+      rafRef.current = requestAnimationFrame(loop);
+    };
+
+    rafRef.current = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(rafRef.current!);
+  }, []);
+
+  return (
+    <div
+      style={{
+        minHeight: "3vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "0",
+      }}
+    >
+      {/* Ticker wrapper */}
+      <div style={{ width: "100%", position: "relative" }}>
+        {/* The ticker band */}
+        <div
+          ref={containerRef}
+          style={{
+            overflow: "hidden",
+            padding: "0",
+            position: "relative",
+          }}
+        >
+          {/* Scrolling strip */}
+          <div
+            ref={stripRef}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              whiteSpace: "nowrap",
+              padding: "10px 0",
+              willChange: "transform",
+              position: "relative",
+              zIndex: 2,
+            }}
+          >
+            {scrollItems.map((item) => (
+              <EventComponent event={item} />
+            ))}
+
+            {/* Trailing spacer so new content doesn't immediately snap in */}
+            <span style={{ paddingRight: "100vw", display: "inline-block" }} />
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 }
diff --git a/jb-ui/src/components/Footer.tsx b/jb-ui/src/components/Footer.tsx
index 00c0101..eede06c 100644
--- a/jb-ui/src/components/Footer.tsx
+++ b/jb-ui/src/components/Footer.tsx
@@ -1,41 +1,51 @@
 import { useAppSelector } from "@/hooks";
 
 const Footer = () => {
-    const bpuid = useAppSelector(state => state.app.bpuid)
-    const assignment_id = useAppSelector(state => state.app.assignment_id)
+  const bpuid = useAppSelector((state) => state.app.bpuid);
+  const assignment_id = useAppSelector((state) => state.app.assignment_id);
 
-    return (
-        <div className="grid gap-1 grid-cols-1
+  return (
+    <div
+      className="grid gap-1 grid-cols-1
         md:grid-cols-3
-        text-xs">
-            <div>
-                <p>help: <a
-                    href={`mailto:support@jamesbillings67.com?subject=AMT Support Request: (${(bpuid ?? '-')}) ${(assignment_id ?? '–')}`}>
-                    support@jamesbillings67.com
-                </a>
-                </p>
-            </div>
+        text-xs"
+    >
+      <div>
+        <p>
+          help:{" "}
+          <a
+            href={`mailto:support@jamesbillings67.com?subject=AMT Support Request: (${bpuid ?? "-"}) ${assignment_id ?? "–"}`}
+          >
+            support@jamesbillings67.com
+          </a>
+        </p>
+      </div>
 
-            <div>
-                <p>made with <span className="text-rose-500">♥</span> by <a
-                    className="hover:cursor-pointer hover:text-pink"
-                    href="https://instagram.com/x0xMaximus"
-                    target="_blank">Max Nanis</a>
-                </p>
-            </div>
+      <div>
+        <p>
+          made with <span className="text-rose-500">♥</span> by{" "}
+          <a
+            className="hover:cursor-pointer hover:text-pink"
+            href="https://instagram.com/x0xMaximus"
+            target="_blank"
+          >
+            Max Nanis
+          </a>
+        </p>
+      </div>
 
-            <div>
-                <p>
-                    <a href="https://git.generalresearch.com/panels/amt-jb/"
-                        target="_blank">
-                        open source
-                    </a>
-                </p>
-            </div>
+      <div>
+        <p>
+          <a
+            href="https://git.generalresearch.com/panels/amt-jb/"
+            target="_blank"
+          >
+            open source
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+};
 
-        </div>
-    )
-
-}
-
-export default Footer
\ No newline at end of file
+export default Footer;
diff --git a/jb-ui/src/components/Profiling.tsx b/jb-ui/src/components/Profiling.tsx
index 9cefdda..96b06b2 100644
--- a/jb-ui/src/components/Profiling.tsx
+++ b/jb-ui/src/components/Profiling.tsx
@@ -1,536 +1,562 @@
-import {
-    UpkQuestionChoice
-} from "@/api_fsb";
-import {
-    ChevronRightIcon
-} from "lucide-react";
+import { UpkQuestionChoice } from "@/api_fsb";
+import { ChevronRightIcon } from "lucide-react";
 import { KeyboardEvent, MouseEvent, useEffect, useRef, useState } from "react";
 
 import { useAppDispatch, useAppSelector } from "@/hooks";
 import { bpid } from "@/lib/utils";
 import {
-    createColumnHelper,
-    flexRender,
-    getCoreRowModel,
-    getFilteredRowModel,
-    getSortedRowModel,
-    RowModel,
-    RowSelectionState,
-    useReactTable,
-} from '@tanstack/react-table';
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  RowModel,
+  RowSelectionState,
+  useReactTable,
+} from "@tanstack/react-table";
 import { clsx } from "clsx";
 
 import {
-    Pagination,
-    PaginationContent,
-    PaginationItem,
-    PaginationLink
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
 } from "@/components/ui/pagination";
 
 import {
-    addAnswers,
-    fetchNewQuestions,
-    goToNextQuestion,
-    ProfileQuestion,
-    questionsSelectors,
-    saveAnswer,
-    selectActiveQuestion,
-    selectActiveQuestionValidation,
-    selectAllQuestions,
-    setActiveQuestion
+  addAnswers,
+  fetchNewQuestions,
+  goToNextQuestion,
+  ProfileQuestion,
+  questionsSelectors,
+  saveAnswer,
+  selectActiveQuestion,
+  selectActiveQuestionValidation,
+  selectAllQuestions,
+  setActiveQuestion,
 } from "@/models/profilingQuestionsSlice";
 import { useSelector } from "react-redux";
 // import {motion} from "framer-motion"
 
 const TextEntry = () => {
-    const dispatch = useAppDispatch()
-
-    const activeQuestion = useSelector(selectActiveQuestion);
-    // const selectAnswer = useMemo(() => selectAnswerForQuestion(question), [question]);
-    // const selectAnswer = useSelector(selectAnswerForQuestion(question));
-    const metadata = activeQuestion?._metadata
-    const validation = activeQuestion?._validation
-    const bpuid = useAppSelector(state => state.app.bpuid)
-
-    if (!metadata) return null
-    if (!validation) return null
-
-    const error = validation?.errors.length > 0
-
-    const handleInputChange = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (!activeQuestion.question_id) return;
-
-        const target = event.target as HTMLInputElement;
-        dispatch(addAnswers({ questionId: activeQuestion.question_id!, answers: [target.value] as string[] }))
-    };
-
-    const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
-        if (!activeQuestion.question_id) return;
-        if (!bpuid) return;
-
-        if (event.key === 'Enter') {
-            dispatch(saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid }))
-        }
-    };
-
-    return (
-        <div className="px-6 my-6">
-            <input type="text"
-                id="text-entry-input"
-                aria-describedby=""
-                // defaultValue={answer?.values.length ? answer?.values[0] : ""}
-                onKeyUp={handleInputChange}
-                onKeyDown={handleKeyPress} // Use onKeyDown to listen for the key press
-                // title={error ? answer?.error_msg : ""}
-                className={clsx(
-                    'w-full border-1 rounded px-2 py-1',
-                    error ?
-                        'border-red-500 focus-visible:ring-red-500' :
-                        'border-blue-50'
-                )}
-            />
-
-            {
-                validation.errors.map(e => {
-                    return (
-                        <p className="text-sm text-red-100 my-2">{e.message}</p>
-                    )
-                })
-            }
-        </div>
-    )
-}
-
-
-export default function useKeyboardMode(
-    rowModel: RowModel<UpkQuestionChoice>,
-) {
-    //   const [keyboardEnabled, setKeyboardEnabled] = useState(
-    //     localStorage.getItem(keyboardMode) === "enabled",
-    //   );
-    const rowRefs = useRef<(HTMLTableRowElement | null)[]>([]);
-
-    const dispatch = useAppDispatch()
-    const activeQuestion = useSelector(selectActiveQuestion);
-    const bpuid = useAppSelector(state => state.app.bpuid)
-
-    const keyboardSelectionIdxRef = useRef(0);
-
-    useEffect(() => {
-        const handleKeyDown = (event: KeyboardEvent) => {
-
-            if (!activeQuestion) return;
-            if (!bpuid) return;
-
-            //   if (!keyboardEnabled) {
-            //     return;
-            //   }
+  const dispatch = useAppDispatch();
+
+  const activeQuestion = useSelector(selectActiveQuestion);
+  // const selectAnswer = useMemo(() => selectAnswerForQuestion(question), [question]);
+  // const selectAnswer = useSelector(selectAnswerForQuestion(question));
+  const metadata = activeQuestion?._metadata;
+  const validation = activeQuestion?._validation;
+  const bpuid = useAppSelector((state) => state.app.bpuid);
+
+  if (!metadata) return null;
+  if (!validation) return null;
+
+  const error = validation?.errors.length > 0;
+
+  const handleInputChange = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!activeQuestion.question_id) return;
+
+    const target = event.target as HTMLInputElement;
+    dispatch(
+      addAnswers({
+        questionId: activeQuestion.question_id!,
+        answers: [target.value] as string[],
+      }),
+    );
+  };
+
+  const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (!activeQuestion.question_id) return;
+    if (!bpuid) return;
+
+    if (event.key === "Enter") {
+      dispatch(
+        saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid }),
+      );
+    }
+  };
+
+  return (
+    <div className="px-6 my-6">
+      <input
+        type="text"
+        id="text-entry-input"
+        aria-describedby=""
+        // defaultValue={answer?.values.length ? answer?.values[0] : ""}
+        onKeyUp={handleInputChange}
+        onKeyDown={handleKeyPress} // Use onKeyDown to listen for the key press
+        // title={error ? answer?.error_msg : ""}
+        className={clsx(
+          "w-full border-1 rounded px-2 py-1",
+          error
+            ? "border-red-500 focus-visible:ring-red-500"
+            : "border-blue-50",
+        )}
+      />
 
-            const { key } = event;
-            const totalRows = rowRefs.current.length;
-            const prevIdx = keyboardSelectionIdxRef.current;
-            let nextIdx = prevIdx;
+      {validation.errors.map((e) => {
+        return <p className="text-sm text-red-100 my-2">{e.message}</p>;
+      })}
+    </div>
+  );
+};
 
-            if (key === "ArrowDown") nextIdx = Math.min(prevIdx + 1, totalRows - 1);
-            if (key === "ArrowUp") nextIdx = Math.max(prevIdx - 1, 0);
-            if (key === " ") {
-                const active = document.activeElement as HTMLElement | null;
+export default function useKeyboardMode(rowModel: RowModel<UpkQuestionChoice>) {
+  //   const [keyboardEnabled, setKeyboardEnabled] = useState(
+  //     localStorage.getItem(keyboardMode) === "enabled",
+  //   );
+  const rowRefs = useRef<(HTMLTableRowElement | null)[]>([]);
 
-                if (active?.tabIndex === 0) {
-                    return;
-                } else {
-                    rowModel.rows[keyboardSelectionIdxRef.current].toggleSelected();
-                }
-            }
+  const dispatch = useAppDispatch();
+  const activeQuestion = useSelector(selectActiveQuestion);
+  const bpuid = useAppSelector((state) => state.app.bpuid);
 
-            if (event.key === 'Enter') {
-                dispatch(saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid }))
-            }
+  const keyboardSelectionIdxRef = useRef(0);
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!activeQuestion) return;
+      if (!bpuid) return;
 
-            if (nextIdx !== prevIdx) {
+      //   if (!keyboardEnabled) {
+      //     return;
+      //   }
 
-                rowRefs.current[prevIdx]?.classList.remove("bg-blue-400");
-                rowRefs.current[nextIdx]?.classList.add("bg-blue-400");
+      const { key } = event;
+      const totalRows = rowRefs.current.length;
+      const prevIdx = keyboardSelectionIdxRef.current;
+      let nextIdx = prevIdx;
 
-                rowRefs.current[nextIdx]?.scrollIntoView({
-                    behavior: "smooth",
-                    block: "center",
-                });
-                keyboardSelectionIdxRef.current = nextIdx;
-            }
-        };
+      if (key === "ArrowDown") nextIdx = Math.min(prevIdx + 1, totalRows - 1);
+      if (key === "ArrowUp") nextIdx = Math.max(prevIdx - 1, 0);
+      if (key === " ") {
+        const active = document.activeElement as HTMLElement | null;
 
-        // I really don't know, and I don't really care enough to make this
-        //  technically type'd correctly.  - Max
+        if (active?.tabIndex === 0) {
+          return;
+        } else {
+          rowModel.rows[keyboardSelectionIdxRef.current].toggleSelected();
+        }
+      }
 
-        // @ts-ignore
-        window.addEventListener("keydown", handleKeyDown);
-        // @ts-ignore
-        return () => window.removeEventListener("keydown", handleKeyDown);
+      if (event.key === "Enter") {
+        dispatch(
+          saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid }),
+        );
+      }
 
-    }, [rowModel.rows]);
+      if (nextIdx !== prevIdx) {
+        rowRefs.current[prevIdx]?.classList.remove("bg-blue-400");
+        rowRefs.current[nextIdx]?.classList.add("bg-blue-400");
 
-    return {
-        // keyboardEnabled,
-        // setKeyboardEnabled,
-        rowRefs,
-        keyboardSelectionIdxRef,
+        rowRefs.current[nextIdx]?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+        keyboardSelectionIdxRef.current = nextIdx;
+      }
     };
+
+    // I really don't know, and I don't really care enough to make this
+    //  technically type'd correctly.  - Max
+
+    // @ts-ignore
+    window.addEventListener("keydown", handleKeyDown);
+    // @ts-ignore
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [rowModel.rows]);
+
+  return {
+    // keyboardEnabled,
+    // setKeyboardEnabled,
+    rowRefs,
+    keyboardSelectionIdxRef,
+  };
 }
 
 const MultipleChoice = () => {
-    const dispatch = useAppDispatch()
-    const activeQuestion = useSelector(selectActiveQuestion);
-
-    // const error: Boolean = answer?.error_msg.length > 0
-    // console.log("Rendering MultipleChoice with answer:", answer, error)
-
-    // TODO! Retrieve store values to use as the initial state for the table
-    //  This is useful for if they tab around before submitting the answer
-    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-    const [globalFilter, setGlobalFilter] = useState('');
-
-    const handleRowSelectionChange = (updaterOrValue: RowSelectionState | ((old: RowSelectionState) => RowSelectionState)) => {
-        setRowSelection((oldSelection) => {
-            // Get the new selection state
-            const newSelection = typeof updaterOrValue === 'function'
-                ? updaterOrValue(oldSelection)
-                : updaterOrValue;
-
-            // Find which row was just selected/deselected
-            const changedRowId = Object.keys(newSelection).find(
-                key => newSelection[key] !== oldSelection[key]
-            );
-
-            if (!changedRowId) return newSelection;
-
-            // Get the actual row data
-            const row = table.getRow(changedRowId);
-            const rowData = row.original; // Your row data object
-
-            // Check if "None of the Above" was selected
-            const normalized = rowData.choice_text.trim().toLowerCase();
-            const isNoneOfTheAbove = (normalized === "none of the above") || (rowData.exclusive ?? false);
-            if (isNoneOfTheAbove && newSelection[changedRowId]) {
-                // Clear all other selections, keep only this one
-                return { [changedRowId]: true };
-            }
-
-            // Check if a regular option was selected while "None of the Above" exists
-            const noneOfTheAboveId = Object.keys(newSelection).find(id => {
-                const r = table.getRow(id);
-                const rowData = r.original as UpkQuestionChoice;
-
-                const normalized = rowData.choice_text.trim().toLowerCase();
-                const isNoneOfTheAbove = (normalized === "none of the above") || (rowData.exclusive ?? false);
-
-                return isNoneOfTheAbove && newSelection[id];
-            });
-
-            if (noneOfTheAboveId && changedRowId !== noneOfTheAboveId) {
-                // Remove "None of the Above" selection
-                const { [noneOfTheAboveId]: _, ...rest } = newSelection;
-                return rest;
-            }
-
-            return newSelection;
-        });
-    };
+  const dispatch = useAppDispatch();
+  const activeQuestion = useSelector(selectActiveQuestion);
+
+  // const error: Boolean = answer?.error_msg.length > 0
+  // console.log("Rendering MultipleChoice with answer:", answer, error)
+
+  // TODO! Retrieve store values to use as the initial state for the table
+  //  This is useful for if they tab around before submitting the answer
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [globalFilter, setGlobalFilter] = useState("");
+
+  const handleRowSelectionChange = (
+    updaterOrValue:
+      | RowSelectionState
+      | ((old: RowSelectionState) => RowSelectionState),
+  ) => {
+    setRowSelection((oldSelection) => {
+      // Get the new selection state
+      const newSelection =
+        typeof updaterOrValue === "function"
+          ? updaterOrValue(oldSelection)
+          : updaterOrValue;
+
+      // Find which row was just selected/deselected
+      const changedRowId = Object.keys(newSelection).find(
+        (key) => newSelection[key] !== oldSelection[key],
+      );
+
+      if (!changedRowId) return newSelection;
+
+      // Get the actual row data
+      const row = table.getRow(changedRowId);
+      const rowData = row.original; // Your row data object
+
+      // Check if "None of the Above" was selected
+      const normalized = rowData.choice_text.trim().toLowerCase();
+      const isNoneOfTheAbove =
+        normalized === "none of the above" || (rowData.exclusive ?? false);
+      if (isNoneOfTheAbove && newSelection[changedRowId]) {
+        // Clear all other selections, keep only this one
+        return { [changedRowId]: true };
+      }
+
+      // Check if a regular option was selected while "None of the Above" exists
+      const noneOfTheAboveId = Object.keys(newSelection).find((id) => {
+        const r = table.getRow(id);
+        const rowData = r.original as UpkQuestionChoice;
+
+        const normalized = rowData.choice_text.trim().toLowerCase();
+        const isNoneOfTheAbove =
+          normalized === "none of the above" || (rowData.exclusive ?? false);
+
+        return isNoneOfTheAbove && newSelection[id];
+      });
+
+      if (noneOfTheAboveId && changedRowId !== noneOfTheAboveId) {
+        // Remove "None of the Above" selection
+        const { [noneOfTheAboveId]: _, ...rest } = newSelection;
+        return rest;
+      }
+
+      return newSelection;
+    });
+  };
+
+  useEffect(() => {
+    if (!activeQuestion?.question_id) return;
+    // Run this anytime a rowSelection changes, to update
+    //  the answer in the store
+    const selectedChoices = Object.keys(rowSelection);
+    dispatch(
+      addAnswers({
+        questionId: activeQuestion.question_id,
+        answers: selectedChoices,
+      }),
+    );
+  }, [rowSelection]);
+
+  // Define columns
+  const columnHelper = createColumnHelper<UpkQuestionChoice>();
+  const columns = [
+    columnHelper.display({
+      id: "select",
+      cell: ({ row }) => {
+        const canSelected = row.getCanSelect();
 
-    useEffect(() => {
-        if (!activeQuestion?.question_id) return;
-        // Run this anytime a rowSelection changes, to update 
-        //  the answer in the store
-        const selectedChoices = Object.keys(rowSelection)
-        dispatch(addAnswers({ questionId: activeQuestion.question_id, answers: selectedChoices }))
-    }, [rowSelection])
-
-    // Define columns
-    const columnHelper = createColumnHelper<UpkQuestionChoice>()
-    const columns = [
-        columnHelper.display({
-            id: 'select',
-            cell: ({ row }) => {
-                const canSelected = row.getCanSelect()
-
-                return (
-                    <input
-                        type="checkbox"
-                        checked={row.getIsSelected()}
-                        disabled={!row.getCanSelect()}
-                        onChange={row.getToggleSelectedHandler()}
-                        className={`w-4 h-4 rounded-0 border-slate-300 cursor-pointer
+        return (
+          <input
+            type="checkbox"
+            checked={row.getIsSelected()}
+            disabled={!row.getCanSelect()}
+            onChange={row.getToggleSelectedHandler()}
+            className={`w-4 h-4 rounded-0 border-slate-300 cursor-pointer
                     focus:outline-none focus:border-blue-500 focus:ring-blue-500
-                    ${canSelected ? ' ' : 'hidden'}
+                    ${canSelected ? " " : "hidden"}
                     `}
-                    />
-                )
-            },
-            size: 20,
-            meta: {
-                align: 'center'
-            }
-        }),
-
-        columnHelper.accessor("choice_text", {
-            header: () => 'Choice Text',
-            cell: (info) => {
-                const text = info.getValue();
-                const selected = info.row.getIsSelected()
-                const canSelected = info.row.getCanSelect()
-
-                return (
-                    <p className={`
+          />
+        );
+      },
+      size: 20,
+      meta: {
+        align: "center",
+      },
+    }),
+
+    columnHelper.accessor("choice_text", {
+      header: () => "Choice Text",
+      cell: (info) => {
+        const text = info.getValue();
+        const selected = info.row.getIsSelected();
+        const canSelected = info.row.getCanSelect();
+
+        return (
+          <p
+            className={`
                         w-max truncate
                         text-sm text-left pl-1
-                        ${selected ? 'font-bold' : 'font-medium'}
-                        ${canSelected ? 'text-blue-950' : 'text-blue-600'}
-                        `}>
-                        {text}
-                    </p>
-                )
-            },
-            size: 380,
-            meta: {
-                align: 'left'
-            }
-        }),
-    ]
-
-    const table = useReactTable({
-        'data': activeQuestion!.choices ?? [],
-        columns,
-        getRowId: (row) => row.choice_id,
-        state: {
-            rowSelection,
-            globalFilter,
-        },
-        // enableRowSelection: true,
-        enableRowSelection: (row) => {
-            // Allow deselection always, but limit new selections
-            const currentSelectionCount = Object.keys(rowSelection).length;
-            const isRowSelected = rowSelection[row.id];
-
-            const max_selection = activeQuestion?.selector === "SA" ? 1 : activeQuestion?.choices?.length ?? 10
-
-            // Allow if: row is already selected OR we haven't hit the limit
-            return isRowSelected || currentSelectionCount < max_selection;
-        },
-        onRowSelectionChange: handleRowSelectionChange,
-        onGlobalFilterChange: setGlobalFilter,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-    });
-
-    const selectedCount = table.getSelectedRowModel().rows.length;
-
-    //const { rowRefs, setKeyboardEnabled, keyboardSelectionIdxRef } = useKeyboardMode(table.getRowModel());
-    const { rowRefs } = useKeyboardMode(table.getRowModel());
-
-    return (
-        <>
-
-            {/* Controls */}
-            <div className="py-1">
-                <div className="flex flex-wrap gap-2">
-
-                    {/* Search */}
-                    <div className="flex-1">
-                        <input
-                            type="text"
-                            placeholder="Search choices..."
-                            value={globalFilter ?? ''}
-                            onChange={e => setGlobalFilter(e.target.value)}
-                            className="w-full px-4 py-1
+                        ${selected ? "font-bold" : "font-medium"}
+                        ${canSelected ? "text-blue-950" : "text-blue-600"}
+                        `}
+          >
+            {text}
+          </p>
+        );
+      },
+      size: 380,
+      meta: {
+        align: "left",
+      },
+    }),
+  ];
+
+  const table = useReactTable({
+    data: activeQuestion!.choices ?? [],
+    columns,
+    getRowId: (row) => row.choice_id,
+    state: {
+      rowSelection,
+      globalFilter,
+    },
+    // enableRowSelection: true,
+    enableRowSelection: (row) => {
+      // Allow deselection always, but limit new selections
+      const currentSelectionCount = Object.keys(rowSelection).length;
+      const isRowSelected = rowSelection[row.id];
+
+      const max_selection =
+        activeQuestion?.selector === "SA"
+          ? 1
+          : (activeQuestion?.choices?.length ?? 10);
+
+      // Allow if: row is already selected OR we haven't hit the limit
+      return isRowSelected || currentSelectionCount < max_selection;
+    },
+    onRowSelectionChange: handleRowSelectionChange,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+  });
+
+  const selectedCount = table.getSelectedRowModel().rows.length;
+
+  //const { rowRefs, setKeyboardEnabled, keyboardSelectionIdxRef } = useKeyboardMode(table.getRowModel());
+  const { rowRefs } = useKeyboardMode(table.getRowModel());
+
+  return (
+    <>
+      {/* Controls */}
+      <div className="py-1">
+        <div className="flex flex-wrap gap-2">
+          {/* Search */}
+          <div className="flex-1">
+            <input
+              type="text"
+              placeholder="Search choices..."
+              value={globalFilter ?? ""}
+              onChange={(e) => setGlobalFilter(e.target.value)}
+              className="w-full px-4 py-1
                                     border border-blue-900 bg-blue-400 rounded 
                                     text-white text-sm
                                     focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                        />
-                    </div>
+            />
+          </div>
 
-                    {/* Selected Count */}
-                    {selectedCount > 0 && (
-                        <div className="flex items-center gap-2 px-2 py-1
+          {/* Selected Count */}
+          {selectedCount > 0 && (
+            <div
+              className="flex items-center gap-2 px-2 py-1
                                 border border-blue-900 text-blue-700 rounded font-medium
                                 text-[10px]
                                 hover:cursor-pointer hover:bg-blue-800 hover:text-white
                                 "
-                            onClick={() => setRowSelection({})}>
-                            <span>{selectedCount} selected</span>
-                            <button className="m-0 p-0 font-bold">✕</button>
-                        </div>
-                    )}
-
-                </div>
+              onClick={() => setRowSelection({})}
+            >
+              <span>{selectedCount} selected</span>
+              <button className="m-0 p-0 font-bold">✕</button>
             </div>
+          )}
+        </div>
+      </div>
 
-            {/* Table */}
-            <div className="border border-blue-200 rounded max-h-[400px] overflow-y-auto
+      {/* Table */}
+      <div
+        className="border border-blue-200 rounded max-h-[400px] overflow-y-auto
                 [&::-webkit-scrollbar]:h-[4px]
                 [&::-webkit-scrollbar]:w-1
 
                 [&::-webkit-scrollbar-track]:bg-blue-100
                 [&::-webkit-scrollbar-thumb]:bg-blue-300
-            ">
-                <table className="text-xs table-fixed border-collapse w-full">
-                    <tbody className="w-full">
-                        {table.getRowModel().rows.map((row, idx) => (
-                            <tr key={row.id}
-                                ref={(el) => {
-                                    rowRefs.current[idx] = el;
-                                }}
-                                onClick={() => row.toggleSelected()}
-                                className={`cursor-pointer transition-colors w-full
-                                    ${row.getIsSelected() ? 'bg-blue-600 ' : ' '
+            "
+      >
+        <table className="text-xs table-fixed border-collapse w-full">
+          <tbody className="w-full">
+            {table.getRowModel().rows.map((row, idx) => (
+              <tr
+                key={row.id}
+                ref={(el) => {
+                  rowRefs.current[idx] = el;
+                }}
+                onClick={() => row.toggleSelected()}
+                className={`cursor-pointer transition-colors w-full
+                                    ${
+                                      row.getIsSelected() ? "bg-blue-600 " : " "
                                     }`}
-                            >
-
-                                {row.getVisibleCells().map((cell) => {
-                                    const align = cell.column.columnDef.meta?.align || 'left';
-                                    const alignClass = align === 'center' ? 'text-center' :
-                                        align === 'right' ? 'text-right' : 'text-left';
-
-                                    return (
-                                        <td key={cell.id}
-                                            className={`py-2 ${alignClass}`}
-                                            style={{
-                                                width: `${cell.column.getSize()}px`,
-                                            }}
-                                        >
-                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                        </td>
-                                    )
-                                })}
-
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
-
-            {/* Empty State */}
-            {table.getRowModel().rows.length === 0 && (
-                <div className="p-12 text-center text-blue-50 font-bold">
-                    No items found matching your search
-                </div>
-            )}
+              >
+                {row.getVisibleCells().map((cell) => {
+                  const align = cell.column.columnDef.meta?.align || "left";
+                  const alignClass =
+                    align === "center"
+                      ? "text-center"
+                      : align === "right"
+                        ? "text-right"
+                        : "text-left";
+
+                  return (
+                    <td
+                      key={cell.id}
+                      className={`py-2 ${alignClass}`}
+                      style={{
+                        width: `${cell.column.getSize()}px`,
+                      }}
+                    >
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Empty State */}
+      {table.getRowModel().rows.length === 0 && (
+        <div className="p-12 text-center text-blue-50 font-bold">
+          No items found matching your search
+        </div>
+      )}
 
-            {/* Footer */}
-            <div className="px-2 py-2 flex justify-between items-center
+      {/* Footer */}
+      <div
+        className="px-2 py-2 flex justify-between items-center
                     text-xs font-mono font-semibold text-blue-950 
-                    ">
-                <span>
-                    Showing {table.getRowModel().rows.length} of {activeQuestion?.choices?.length} choices
-                </span>
-                {selectedCount > 0 && (
-                    <span>
-                        {selectedCount} choice{selectedCount !== 1 ? 's' : ''} selected
-                    </span>
-                )}
-            </div>
-
-        </>
-    )
-
-}
+                    "
+      >
+        <span>
+          Showing {table.getRowModel().rows.length} of{" "}
+          {activeQuestion?.choices?.length} choices
+        </span>
+        {selectedCount > 0 && (
+          <span>
+            {selectedCount} choice{selectedCount !== 1 ? "s" : ""} selected
+          </span>
+        )}
+      </div>
+    </>
+  );
+};
 
 const ProfilingQuestionTitle = () => {
-    const activeQuestion = useSelector(selectActiveQuestion);
-    const question_active_tasks = activeQuestion?.importance?.task_count ?? 0
+  const activeQuestion = useSelector(selectActiveQuestion);
+  const question_active_tasks = activeQuestion?.importance?.task_count ?? 0;
 
-    if (!activeQuestion) return null;
-
-    let text = activeQuestion?.question_text
+  if (!activeQuestion) return null;
 
-    if (activeQuestion.explanation_template && activeQuestion._validation?.isComplete && activeQuestion._metadata.answers.length == 1) {
-        const template = activeQuestion.explanation_template;
-        const pre_code = activeQuestion._metadata.answers[0];
+  let text = activeQuestion?.question_text;
 
-        const choice = activeQuestion.choices?.find(c => c.choice_id === pre_code)
-        const choice_text = choice ? choice.choice_text : "your answer"
+  if (
+    activeQuestion.explanation_template &&
+    activeQuestion._validation?.isComplete &&
+    activeQuestion._metadata.answers.length == 1
+  ) {
+    const template = activeQuestion.explanation_template;
+    const pre_code = activeQuestion._metadata.answers[0];
 
-        text = template.replace("{answer}", choice_text)
-    }
+    const choice = activeQuestion.choices?.find(
+      (c) => c.choice_id === pre_code,
+    );
+    const choice_text = choice ? choice.choice_text : "your answer";
 
+    text = template.replace("{answer}", choice_text);
+  }
 
-    return (
-        <div className="flex justify-between items-center px-2">
-
-            <h3 className="text-left text-sm font-bold m-0 p-0
+  return (
+    <div className="flex justify-between items-center px-2">
+      <h3
+        className="text-left text-sm font-bold m-0 p-0
             inline-block
-            ">
-                {text}
-            </h3>
-
-            <div className="max-w-[70px] text-center m-0 p-0">
-                <h4 className="text-xs font-bold">
-                    {question_active_tasks.toLocaleString()}
-                </h4>
-                <h5 className="text-[10px]">
-                    Surveys use
-                    this question
-                </h5>
-            </div>
-        </div>
-    )
-}
+            "
+      >
+        {text}
+      </h3>
+
+      <div className="max-w-[70px] text-center m-0 p-0">
+        <h4 className="text-xs font-bold">
+          {question_active_tasks.toLocaleString()}
+        </h4>
+        <h5 className="text-[10px]">Surveys use this question</h5>
+      </div>
+    </div>
+  );
+};
 
 const ProfilingQuestionSubmitButton = () => {
-    const dispatch = useAppDispatch()
-
-    const activeQuestion = useSelector(selectActiveQuestion);
-    const activeQuestionValidation = useSelector(selectActiveQuestionValidation)
-    const bpuid = useAppSelector(state => state.app.bpuid)
-
-    const handleOnClick = () => {
-        if (!activeQuestion) return
-        if (!activeQuestionValidation?.isComplete) return
-        if (!bpuid) return;
-
-        dispatch(saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid }))
-    }
-
-    return (
-        <button
-            type="submit"
-            className="cursor-pointer text-sm font-semibold
+  const dispatch = useAppDispatch();
+
+  const activeQuestion = useSelector(selectActiveQuestion);
+  const activeQuestionValidation = useSelector(selectActiveQuestionValidation);
+  const bpuid = useAppSelector((state) => state.app.bpuid);
+
+  const handleOnClick = () => {
+    if (!activeQuestion) return;
+    if (!activeQuestionValidation?.isComplete) return;
+    if (!bpuid) return;
+
+    dispatch(
+      saveAnswer({ questionId: activeQuestion.question_id!, bpuid: bpuid }),
+    );
+  };
+
+  return (
+    <button
+      type="submit"
+      className="cursor-pointer text-sm font-semibold
                     bg-blue-700 text-white py-1 px-4 rounded
                     hover:bg-blue-900 min-w-[148px]
 
                     disabled:bg-blue-700 disabled:text-rose-300 
                     disabled:cursor-not-allowed
                     "
-            disabled={!activeQuestionValidation?.isComplete}
-            onClick={handleOnClick}
-        >
-            Answer Question
-        </button>
-    )
-}
-
+      disabled={!activeQuestionValidation?.isComplete}
+      onClick={handleOnClick}
+    >
+      Answer Question
+    </button>
+  );
+};
 
 export const ProfileQuestionFull = () => {
-    const activeQuestion = useSelector(selectActiveQuestion);
-
-    const renderContent = () => {
-        if (!activeQuestion) return null;
-        switch (activeQuestion.question_type) {
-            case 'TE':
-                return <TextEntry />
-            case 'MC':
-                return <MultipleChoice />
-            default:
-                return <MultipleChoice />
-        }
-    };
+  const activeQuestion = useSelector(selectActiveQuestion);
+
+  const renderContent = () => {
+    if (!activeQuestion) return null;
+    switch (activeQuestion.question_type) {
+      case "TE":
+        return <TextEntry />;
+      case "MC":
+        return <MultipleChoice />;
+      default:
+        return <MultipleChoice />;
+    }
+  };
 
-    if (!activeQuestion) return null
+  if (!activeQuestion) return null;
 
-    return (
-        <>
-            {/* {answer && answer.processing && (
+  return (
+    <>
+      {/* {answer && answer.processing && (
                 <motion.div
                     className="bg-gray-300"
                     initial={{ width: "0%" }}
@@ -540,104 +566,111 @@ export const ProfileQuestionFull = () => {
                 />
             )} */}
 
-            {renderContent()}
-        </>
-    )
-}
+      {renderContent()}
+    </>
+  );
+};
 
 const PaginationIcon: React.FC<{
-    question: ProfileQuestion, idx: number,
+  question: ProfileQuestion;
+  idx: number;
 }> = ({ question, idx }) => {
-    const dispatch = useAppDispatch()
+  const dispatch = useAppDispatch();
 
-    // const answers = useAppSelector(state => state.answers)
-    const isActive = question._metadata?.isActive ?? false
-    const completed = question._validation?.isComplete ?? false
+  // const answers = useAppSelector(state => state.answers)
+  const isActive = question._metadata?.isActive ?? false;
+  const completed = question._validation?.isComplete ?? false;
 
-    const handleSetQuestion = (evt: MouseEvent<HTMLAnchorElement>) => {
-        if (completed) {
-            evt.preventDefault()
-        } else {
-            dispatch(setActiveQuestion(question.question_id!))
-        }
+  const handleSetQuestion = (evt: MouseEvent<HTMLAnchorElement>) => {
+    if (completed) {
+      evt.preventDefault();
+    } else {
+      dispatch(setActiveQuestion(question.question_id!));
     }
-
-    return (
-        <PaginationItem>
-            <PaginationLink
-                href="#"
-                title={question.question_text}
-                isActive={isActive}
-                aria-disabled={!!completed}
-
-                onClick={handleSetQuestion}
-                className={clsx("cursor-pointer rounded border border-blue-300 text-blue-300 text-[10px] w-7 h-4",
-                    {
-                        "pointer-events-none cursor-not-allowed": completed,
-                        "bg-blue-800 border-blue-800": isActive,
-                    })}
-            >
-                {idx + 1}
-            </PaginationLink>
-        </PaginationItem>
-    )
-}
+  };
+
+  return (
+    <PaginationItem>
+      <PaginationLink
+        href="#"
+        title={question.question_text}
+        isActive={isActive}
+        aria-disabled={!!completed}
+        onClick={handleSetQuestion}
+        className={clsx(
+          "cursor-pointer rounded border border-blue-300 text-blue-300 text-[10px] w-7 h-4",
+          {
+            "pointer-events-none cursor-not-allowed": completed,
+            "bg-blue-800 border-blue-800": isActive,
+          },
+        )}
+      >
+        {idx + 1}
+      </PaginationLink>
+    </PaginationItem>
+  );
+};
 
 const ProfilingQuestionPagination = () => {
-    const dispatch = useAppDispatch()
-
-    const questions = useSelector(selectAllQuestions)
-    const activeQuestion = useSelector(selectActiveQuestion)
-
-    // All the variables needed for a sliding window
-    const q_idx = questions.findIndex(q => q.question_id === activeQuestion!.question_id)
-
-    const handleNextClick = () => {
-        dispatch(goToNextQuestion());
-    };
-
-    const questionsWindow = (
-        items: ProfileQuestion[], currentIndex: number, windowSize: number = 5
-    ): ProfileQuestion[] => {
-        const half: number = Math.floor(windowSize / 2)
-        const total: number = items.length
-        let start: number = currentIndex - half
-        let end: number = currentIndex + half + 1
-
-        if (start < 0) {
-            end += Math.abs(start)
-            start = 0
-        }
-
-        // Adjust if window goes past the end
-        if (end > total) {
-            const overflow: number = end - total
-            start = Math.max(0, start - overflow)
-            end = total
-        }
+  const dispatch = useAppDispatch();
+
+  const questions = useSelector(selectAllQuestions);
+  const activeQuestion = useSelector(selectActiveQuestion);
+
+  // All the variables needed for a sliding window
+  const q_idx = questions.findIndex(
+    (q) => q.question_id === activeQuestion!.question_id,
+  );
+
+  const handleNextClick = () => {
+    dispatch(goToNextQuestion());
+  };
+
+  const questionsWindow = (
+    items: ProfileQuestion[],
+    currentIndex: number,
+    windowSize: number = 5,
+  ): ProfileQuestion[] => {
+    const half: number = Math.floor(windowSize / 2);
+    const total: number = items.length;
+    let start: number = currentIndex - half;
+    let end: number = currentIndex + half + 1;
+
+    if (start < 0) {
+      end += Math.abs(start);
+      start = 0;
+    }
 
-        return items.slice(start, end)
+    // Adjust if window goes past the end
+    if (end > total) {
+      const overflow: number = end - total;
+      start = Math.max(0, start - overflow);
+      end = total;
     }
 
-    return (
-        <Pagination>
-            <PaginationContent>
-                {
-                    questionsWindow(questions, q_idx).map(q => {
-                        return <PaginationIcon
-                            key={q.question_id}
-                            question={q}
-                            idx={questions.findIndex(qq => qq.question_id === q.question_id)}
-                        />
-                    })
-                }
-
-                <PaginationItem>
-                    <PaginationLink
-                        aria-label="Go to next page"
-                        size="default"
-
-                        className="rounded text-[10px] p-0 m-0
+    return items.slice(start, end);
+  };
+
+  return (
+    <Pagination>
+      <PaginationContent>
+        {questionsWindow(questions, q_idx).map((q) => {
+          return (
+            <PaginationIcon
+              key={q.question_id}
+              question={q}
+              idx={questions.findIndex(
+                (qq) => qq.question_id === q.question_id,
+              )}
+            />
+          );
+        })}
+
+        <PaginationItem>
+          <PaginationLink
+            aria-label="Go to next page"
+            size="default"
+            className="rounded text-[10px] p-0 m-0
                         text-blue-300 
                         border border-blue-100 text-blue-100
                         hover:bg-blue-800 hover:border-blue-800 hover:text-white
@@ -645,115 +678,111 @@ const ProfilingQuestionPagination = () => {
                         h-4
                         w-13 sm:w-14
                         "
-                        onClick={handleNextClick}
-                        href="#"
-                    >
-                        <span className="block">Next</span>
-                        <ChevronRightIcon />
-                    </PaginationLink>
-
-                </PaginationItem>
-            </PaginationContent>
-        </Pagination>
-    )
-}
+            onClick={handleNextClick}
+            href="#"
+          >
+            <span className="block">Next</span>
+            <ChevronRightIcon />
+          </PaginationLink>
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+};
 
 const ProfilingHeader = () => {
-    const questions = useSelector(questionsSelectors.selectAll);
+  const questions = useSelector(questionsSelectors.selectAll);
 
-    return (
-        <h2 className="text-xs font-mono font-bold p-0 m-0">
-            {questions.length} Profiling Questions
-        </h2>
-    )
-}
+  return (
+    <h2 className="text-xs font-mono font-bold p-0 m-0">
+      {questions.length} Profiling Questions
+    </h2>
+  );
+};
 
 const ProfilingModalBody = () => {
-    const activeQuestion = useSelector(selectActiveQuestion);
-
-    if (!activeQuestion) {
-        return (
-            <div className="p-5">
-                <h3 className="text-lg font-bold">No Profiling Questions Available</h3>
-                <p className="my-0 text-sm text-gray-600">Please check back later.</p>
-            </div>
-        )
-    }
+  const activeQuestion = useSelector(selectActiveQuestion);
 
+  if (!activeQuestion) {
     return (
-        <div className="relative flex flex-col">
-            {/* <ProfilingQuestionPagination /> */}
-
-            <div className="flex-shrink-0">
-                <ProfilingQuestionTitle />
-            </div>
-
-            {/* Scrollable Content */}
-            <div className="flex-1 p-1">
-                <ProfileQuestionFull key={activeQuestion.question_id} />
-            </div>
-
-            {/* Sticky Footer */}
-            <div className="flex-shrink-0 bg-blue-600 p-1 flex justify-between
-            ">
-                <div className="justify-start">
-                    <ProfilingQuestionPagination />
-                </div>
-                <div className="justify-end">
-                    <ProfilingQuestionSubmitButton />
-                </div>
-            </div>
-
+      <div className="p-5">
+        <h3 className="text-lg font-bold">No Profiling Questions Available</h3>
+        <p className="my-0 text-sm text-gray-600">Please check back later.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative flex flex-col">
+      {/* <ProfilingQuestionPagination /> */}
+
+      <div className="flex-shrink-0">
+        <ProfilingQuestionTitle />
+      </div>
+
+      {/* Scrollable Content */}
+      <div className="flex-1 p-1">
+        <ProfileQuestionFull key={activeQuestion.question_id} />
+      </div>
+
+      {/* Sticky Footer */}
+      <div
+        className="flex-shrink-0 bg-blue-600 p-1 flex justify-between
+            "
+      >
+        <div className="justify-start">
+          <ProfilingQuestionPagination />
         </div>
-    )
-}
+        <div className="justify-end">
+          <ProfilingQuestionSubmitButton />
+        </div>
+      </div>
+    </div>
+  );
+};
 
 const Profiling = () => {
-    /* This is the main UI for any User Profiling (before entering a task). It's
+  /* This is the main UI for any User Profiling (before entering a task). It's
         primary window and position should be dedictated by it's parent so this
         can be positioned as a window or a sidebar as needed.
     */
-    const [showProfiling, setShowProfiling] = useState(false);
+  const [showProfiling, setShowProfiling] = useState(false);
 
-    const dispatch = useAppDispatch()
-    const bpuid = useAppSelector(state => state.app.bpuid)
+  const dispatch = useAppDispatch();
+  const bpuid = useAppSelector((state) => state.app.bpuid);
 
-    useEffect(() => {
-        if (!bpuid) return;
-        dispatch(fetchNewQuestions(bpuid));
-    }, [bpid, bpuid])
+  useEffect(() => {
+    if (!bpuid) return;
+    dispatch(fetchNewQuestions(bpuid));
+  }, [bpid, bpuid]);
 
-    if (!bpuid) return null;
+  if (!bpuid) return null;
 
-    return (
-        <div className={clsx(
-            "fixed rounded bg-blue-500 text-white shadow-lg z-60 \
+  return (
+    <div
+      className={clsx(
+        "fixed rounded bg-blue-500 text-white shadow-lg z-60 \
             bottom-1 sm:bottom-6  \
             left-1 sm:left-2",
-            showProfiling ? "w-[98vw] sm:w-[400px]" : "w-[220px]"
-        )}
-        >
-
-            <div className="bg-blue-600 rounded border-white-300 
+        showProfiling ? "w-[98vw] sm:w-[400px]" : "w-[220px]",
+      )}
+    >
+      <div
+        className="bg-blue-600 rounded border-white-300 
             cursor-pointer py-1 px-4
             hover:bg-blue-700 transition-colors duration-200"
-                onClick={() => setShowProfiling(!showProfiling)}
-            >
-                <ProfilingHeader />
-
-                <h4 className="text-[10px] text-center italic text-white-300 py-0">
-                    (Click to {showProfiling ? 'hide' : 'show'})
-                </h4>
-            </div>
-
-            {showProfiling && (
-                <ProfilingModalBody />
-            )}
-
-        </div>
-    )
-}
-
-export {
-    Profiling
+        onClick={() => setShowProfiling(!showProfiling)}
+      >
+        <ProfilingHeader />
+
+        <h4 className="text-[10px] text-center italic text-white-300 py-0">
+          (Click to {showProfiling ? "hide" : "show"})
+        </h4>
+      </div>
+
+      {showProfiling && <ProfilingModalBody />}
+    </div>
+  );
 };
+
+export { Profiling };
diff --git a/jb-ui/src/components/Wallet.tsx b/jb-ui/src/components/Wallet.tsx
index e4fc694..933dc9a 100644
--- a/jb-ui/src/components/Wallet.tsx
+++ b/jb-ui/src/components/Wallet.tsx
@@ -1,464 +1,491 @@
 import {
-    UserLedgerTransactionsResponse,
-    UserLedgerTransactionsResponseTransactionsInner,
-    WalletApi
+  UserLedgerTransactionsResponse,
+  UserLedgerTransactionsResponseTransactionsInner,
+  WalletApi,
 } from "@/api_fsb";
 import { useAppDispatch, useAppSelector } from "@/hooks";
-import { bpid, formatCentsToUSD, } from "@/lib/utils";
+import { bpid, formatCentsToUSD } from "@/lib/utils";
 import {
-    setTxPagination, setTxTotalItems, setTxTotalPages,
-    setUserLedgerSummary,
-    setUserLedgerTxs
+  setTxPagination,
+  setTxTotalItems,
+  setTxTotalPages,
+  setUserLedgerSummary,
+  setUserLedgerTxs,
 } from "@/models/appSlice";
 import {
-    RowData, createColumnHelper, flexRender, getCoreRowModel,
-    useReactTable
+  RowData,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
 } from "@tanstack/react-table";
 import moment from "moment";
 import { useEffect, useState } from "react";
 
-declare module '@tanstack/react-table' {
-    interface ColumnMeta<TData extends RowData, TValue> {
-        align?: 'left' | 'center' | 'right';
-    }
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    align?: "left" | "center" | "right";
+  }
 }
 
 // Function to calculate background color based on balance
 const getBackgroundColor = (balance: number | undefined): string => {
-    if (balance === undefined || balance === null) return 'bg-blue-600';
-
-    if (balance > 0) {
-        return 'bg-blue-600';
-    } else if (balance <= -100) {
-        return 'bg-red-600';
-    } else {
-        // Interpolate between blue and red for values between 0 and -100
-        // progress goes from 0 (at balance = 0) to 1 (at balance = -100)
-        const progress = Math.abs(balance) / 100;
-
-        // Blue RGB: (37, 99, 235) - Tailwind blue-600
-        // Red RGB: (220, 38, 38) - Tailwind red-600
-        const r = Math.round(37 + (220 - 37) * progress);
-        const g = Math.round(99 + (38 - 99) * progress);
-        const b = Math.round(235 + (38 - 235) * progress);
-
-        return `rgb(${r}, ${g}, ${b})`;
-    }
+  if (balance === undefined || balance === null) return "bg-blue-600";
+
+  if (balance > 0) {
+    return "bg-blue-600";
+  } else if (balance <= -100) {
+    return "bg-red-600";
+  } else {
+    // Interpolate between blue and red for values between 0 and -100
+    // progress goes from 0 (at balance = 0) to 1 (at balance = -100)
+    const progress = Math.abs(balance) / 100;
+
+    // Blue RGB: (37, 99, 235) - Tailwind blue-600
+    // Red RGB: (220, 38, 38) - Tailwind red-600
+    const r = Math.round(37 + (220 - 37) * progress);
+    const g = Math.round(99 + (38 - 99) * progress);
+    const b = Math.round(235 + (38 - 235) * progress);
+
+    return `rgb(${r}, ${g}, ${b})`;
+  }
 };
 
-
 const WalletHeader = () => {
-    const amount = useAppSelector(state => state.app.userWalletBalance)?.amount ?? 0
-
-    const bgStyle = typeof getBackgroundColor(amount) === 'string' &&
-        getBackgroundColor(amount).startsWith('bg-')
-        ? {}
-        : { backgroundColor: getBackgroundColor(amount) };
-
-    const bgClass = typeof getBackgroundColor(amount) === 'string' &&
-        getBackgroundColor(amount).startsWith('bg-')
-        ? getBackgroundColor(amount)
-        : '';
-
-    return (
-        <div className={`w-full py-1 px-1 text-white rounded ${bgClass}`}
-            style={bgStyle}
-        >
-            <h2 className="text-xs font-semibold flex justify-between items-center">
-                <span className="text-left">User Wallet:</span>
-
-                {amount >= 0 ? (
-                    <span className='text-emerald-50'>
-                        {`${formatCentsToUSD(Math.abs(amount))}`}
-                    </span>
-                ) : (
-                    <span className='text-rose-50'>
-                        {`(${formatCentsToUSD(Math.abs(amount))})`}
-                    </span>
-                )}
-
-            </h2>
-        </div>
-    )
+  const amount =
+    useAppSelector((state) => state.app.userWalletBalance)?.amount ?? 0;
+
+  const bgStyle =
+    typeof getBackgroundColor(amount) === "string" &&
+    getBackgroundColor(amount).startsWith("bg-")
+      ? {}
+      : { backgroundColor: getBackgroundColor(amount) };
+
+  const bgClass =
+    typeof getBackgroundColor(amount) === "string" &&
+    getBackgroundColor(amount).startsWith("bg-")
+      ? getBackgroundColor(amount)
+      : "";
+
+  return (
+    <div
+      className={`w-full py-1 px-1 text-white rounded ${bgClass}`}
+      style={bgStyle}
+    >
+      <h2 className="text-xs font-semibold flex justify-between items-center">
+        <span className="text-left">User Wallet:</span>
+
+        {amount >= 0 ? (
+          <span className="text-emerald-50">
+            {`${formatCentsToUSD(Math.abs(amount))}`}
+          </span>
+        ) : (
+          <span className="text-rose-50">
+            {`(${formatCentsToUSD(Math.abs(amount))})`}
+          </span>
+        )}
+      </h2>
+    </div>
+  );
 };
 
 const WalletSummary = () => {
-    const summary = useAppSelector(state => state.app.userLedgerSummary)
-
-    const survey_completes = summary?.bp_payment?.entry_count ?? 0
-    const survey_completes_f = (survey_completes ?? 0).toLocaleString('en-US')
-
-    const survey_adjustments = summary?.bp_adjustment?.entry_count ?? 0
-    const survey_adjustments_f = (survey_adjustments ?? 0).toLocaleString('en-US')
-
-    const min_payout: number = summary?.bp_payment?.min_amount ?? 0
-    const max_payout: number = summary?.bp_payment?.max_amount ?? 0
-    const adj_total: number = summary?.bp_adjustment?.total_amount ?? 0
-    const user_payments_total: number = (summary?.user_payout_request?.total_amount ?? 0) * -1
-
-    return (
-        <div className="grid grid-cols-[auto_1fr] text-xs">
-            <div className="label text-left">Completes:</div>
-            <div className="value text-right">{survey_completes_f} surveys</div>
-
-            <div className="label text-left">Avg Payouts:</div>
-            <div className="value text-right">{formatCentsToUSD(min_payout)} – {formatCentsToUSD(max_payout)}</div>
-
-            <div className="label text-left">Survey Adjustments:</div>
-            <div className="value text-right">{survey_adjustments_f}</div>
-
-            <div className="label text-left">Adjustment Amount:</div>
-            <div className="value text-right">
-                {adj_total >= 0 ? (
-                    <span className='text-emerald-300'>
-                        {`${formatCentsToUSD(adj_total)}`}
-                    </span>
-                ) : (
-                    <span className='text-rose-300'>
-                        {`(${formatCentsToUSD(Math.abs(adj_total))})`}
-                    </span>
-                )}
-            </div>
-
-            <div className="label text-left">User Payments:</div>
-            <div className="value text-right">
-                {user_payments_total >= 0 ? (
-                    <span className='text-emerald-300'>
-                        {`${formatCentsToUSD(user_payments_total)}`}
-                    </span>
-                ) : (
-                    <span className='text-rose-300'>
-                        {`(${formatCentsToUSD(Math.abs(user_payments_total))})`}
-                    </span>
-                )}
-
-            </div>
-        </div >
-    )
+  const summary = useAppSelector((state) => state.app.userLedgerSummary);
+
+  const survey_completes = summary?.bp_payment?.entry_count ?? 0;
+  const survey_completes_f = (survey_completes ?? 0).toLocaleString("en-US");
+
+  const survey_adjustments = summary?.bp_adjustment?.entry_count ?? 0;
+  const survey_adjustments_f = (survey_adjustments ?? 0).toLocaleString(
+    "en-US",
+  );
+
+  const min_payout: number = summary?.bp_payment?.min_amount ?? 0;
+  const max_payout: number = summary?.bp_payment?.max_amount ?? 0;
+  const adj_total: number = summary?.bp_adjustment?.total_amount ?? 0;
+  const user_payments_total: number =
+    (summary?.user_payout_request?.total_amount ?? 0) * -1;
+
+  return (
+    <div className="grid grid-cols-[auto_1fr] text-xs">
+      <div className="label text-left">Completes:</div>
+      <div className="value text-right">{survey_completes_f} surveys</div>
+
+      <div className="label text-left">Avg Payouts:</div>
+      <div className="value text-right">
+        {formatCentsToUSD(min_payout)} – {formatCentsToUSD(max_payout)}
+      </div>
+
+      <div className="label text-left">Survey Adjustments:</div>
+      <div className="value text-right">{survey_adjustments_f}</div>
+
+      <div className="label text-left">Adjustment Amount:</div>
+      <div className="value text-right">
+        {adj_total >= 0 ? (
+          <span className="text-emerald-300">
+            {`${formatCentsToUSD(adj_total)}`}
+          </span>
+        ) : (
+          <span className="text-rose-300">
+            {`(${formatCentsToUSD(Math.abs(adj_total))})`}
+          </span>
+        )}
+      </div>
+
+      <div className="label text-left">User Payments:</div>
+      <div className="value text-right">
+        {user_payments_total >= 0 ? (
+          <span className="text-emerald-300">
+            {`${formatCentsToUSD(user_payments_total)}`}
+          </span>
+        ) : (
+          <span className="text-rose-300">
+            {`(${formatCentsToUSD(Math.abs(user_payments_total))})`}
+          </span>
+        )}
+      </div>
+    </div>
+  );
 };
 
 const WalletTransactionsHeader = () => {
-    const tx_cnt = useAppSelector(state => state.app.txTotalItems)
-    const txt_cnt_f = (tx_cnt ?? 0).toLocaleString('en-US')
-
-    const [showTx, setShowTx] = useState(false);
-
-    return (
-        <div className="w-full bg-blue-600 text-white rounded text-left">
-            <div className="hover:cursor-pointer hover:bg-blue-700 transition-colors duration-200"
-                onClick={() => setShowTx(!showTx)}>
-                    
-                <h2 className="text-xs font-semibold rounded flex justify-between
+  const tx_cnt = useAppSelector((state) => state.app.txTotalItems);
+  const txt_cnt_f = (tx_cnt ?? 0).toLocaleString("en-US");
+
+  const [showTx, setShowTx] = useState(false);
+
+  return (
+    <div className="w-full bg-blue-600 text-white rounded text-left">
+      <div
+        className="hover:cursor-pointer hover:bg-blue-700 transition-colors duration-200"
+        onClick={() => setShowTx(!showTx)}
+      >
+        <h2
+          className="text-xs font-semibold rounded flex justify-between
             py-1 px-1"
-                    onClick={() => setShowTx(!showTx)}
-                >
-                    <span>Total Transactions:</span> <span>{txt_cnt_f}</span>
-                </h2>
-
-                <h4 className="text-[10px] text-center italic text-blue-300 py-1"
-                    onClick={() => setShowTx(!showTx)}
-                >
-                    (Click to {showTx ? 'hide' : 'show'})
-                </h4>
-
-            </div>
-
-            {showTx && (
-                <>
-                    <WalletTransactions />
-                </>
-            )}
+          onClick={() => setShowTx(!showTx)}
+        >
+          <span>Total Transactions:</span> <span>{txt_cnt_f}</span>
+        </h2>
 
-        </div>
-    )
+        <h4
+          className="text-[10px] text-center italic text-blue-300 py-1"
+          onClick={() => setShowTx(!showTx)}
+        >
+          (Click to {showTx ? "hide" : "show"})
+        </h4>
+      </div>
+
+      {showTx && (
+        <>
+          <WalletTransactions />
+        </>
+      )}
+    </div>
+  );
 };
 
-
 const WalletTransactions = () => {
-    const dispatch = useAppDispatch()
-    const bpuid = useAppSelector(state => state.app.bpuid)
-    const userLedgerTxs = useAppSelector(state => state.app.userLedgerTxs);
-
-    const txPagination = useAppSelector(state => state.app.txPagination);
-    const txTotalPages = useAppSelector(state => state.app.txTotalPages);
-
-    useEffect(() => {
-        if (!bpuid) return;
-
-        new WalletApi().getUserTransactionHistoryProductIdTransactionHistoryGet(
-            bpid, // productId
-            bpuid, // bpuid
-            undefined, // createdAfter
-            undefined, // createdBefore
-            "-created", // orderBy
-            txPagination.pageIndex + 1, // page
-            txPagination.pageSize // pageSize
-        ).then(res => {
-            const response = res.data as UserLedgerTransactionsResponse;
-            console.log("Wallet: fetched user ledger", response);
-            dispatch(setUserLedgerSummary(response.summary));
-
-            dispatch(setUserLedgerTxs(response.transactions ?? []))
-            dispatch(setTxTotalItems(response.total!))
-            dispatch(setTxTotalPages(response.pages!))
-        });
-
-    }, [bpuid, txPagination.pageIndex, txPagination.pageSize]);
-
-    const columnHelper = createColumnHelper<UserLedgerTransactionsResponseTransactionsInner>()
-    const columns = [
-        columnHelper.accessor('created', {
-            header: () => 'Date',
-            cell: (info) => moment(info.getValue()).format('M/D/YY H:mm'),
-            size: 110,
-            meta: {
-                align: 'left'
-            }
-        }),
-        columnHelper.accessor('description', {
-            header: () => 'Type',
-            cell: props => {
-                const desc = props.getValue();
-                switch (desc) {
-                    case 'Task Complete':
-                        return 'Survey 🎉';
-                    case 'Task Adjustment':
-                        return 'Reject ⚠️';
-                    case 'Compensation Bonus':
-                        return 'Bonus 🎁';
-                    case 'HIT Bonus':
-                        return 'Bonus';
-                    case 'HIT Reward':
-                        return 'Assignment';
-                    default:
-                        return desc;
-                }
-            },
-            size: 80,
-            meta: {
-                align: 'left'
-            }
-        }),
-        columnHelper.accessor('amount', {
-            header: () => 'Amount',
-            cell: (props) => {
-                const val = props.renderValue() as number;
-                const isPositive = val >= 0;
-                const emoji = isPositive ? "⬆\uFE0E" : "⬇\uFE0E";
-                const colorClass = isPositive ? 'font-variant-emoji-text text-emerald-300' : 'font-variant-emoji-text text-rose-300';
+  const dispatch = useAppDispatch();
+  const bpuid = useAppSelector((state) => state.app.bpuid);
+  const userLedgerTxs = useAppSelector((state) => state.app.userLedgerTxs);
+
+  const txPagination = useAppSelector((state) => state.app.txPagination);
+  const txTotalPages = useAppSelector((state) => state.app.txTotalPages);
+
+  useEffect(() => {
+    if (!bpuid) return;
+
+    new WalletApi()
+      .getUserTransactionHistoryProductIdTransactionHistoryGet(
+        bpid, // productId
+        bpuid, // bpuid
+        undefined, // createdAfter
+        undefined, // createdBefore
+        "-created", // orderBy
+        txPagination.pageIndex + 1, // page
+        txPagination.pageSize, // pageSize
+      )
+      .then((res) => {
+        const response = res.data as UserLedgerTransactionsResponse;
+        console.log("Wallet: fetched user ledger", response);
+        dispatch(setUserLedgerSummary(response.summary));
+
+        dispatch(setUserLedgerTxs(response.transactions ?? []));
+        dispatch(setTxTotalItems(response.total!));
+        dispatch(setTxTotalPages(response.pages!));
+      });
+  }, [bpuid, txPagination.pageIndex, txPagination.pageSize]);
+
+  const columnHelper =
+    createColumnHelper<UserLedgerTransactionsResponseTransactionsInner>();
+  const columns = [
+    columnHelper.accessor("created", {
+      header: () => "Date",
+      cell: (info) => moment(info.getValue()).format("M/D/YY H:mm"),
+      size: 110,
+      meta: {
+        align: "left",
+      },
+    }),
+    columnHelper.accessor("description", {
+      header: () => "Type",
+      cell: (props) => {
+        const desc = props.getValue();
+        switch (desc) {
+          case "Task Complete":
+            return "Survey 🎉";
+          case "Task Adjustment":
+            return "Reject ⚠️";
+          case "Compensation Bonus":
+            return "Bonus 🎁";
+          case "HIT Bonus":
+            return "Bonus";
+          case "HIT Reward":
+            return "Assignment";
+          default:
+            return desc;
+        }
+      },
+      size: 80,
+      meta: {
+        align: "left",
+      },
+    }),
+    columnHelper.accessor("amount", {
+      header: () => "Amount",
+      cell: (props) => {
+        const val = props.renderValue() as number;
+        const isPositive = val >= 0;
+        const emoji = isPositive ? "⬆\uFE0E" : "⬇\uFE0E";
+        const colorClass = isPositive
+          ? "font-variant-emoji-text text-emerald-300"
+          : "font-variant-emoji-text text-rose-300";
+
+        return (
+          <span className={colorClass}>
+            {`${emoji} ${formatCentsToUSD(Math.abs(val))}`}
+          </span>
+        );
+      },
+      size: 70,
+      meta: {
+        align: "center",
+      },
+    }),
+    columnHelper.accessor("balance_after", {
+      header: () => "Balance",
+      cell: (props) => {
+        const val = props.renderValue() as number;
+        const isPositive = val >= 0;
+        const colorClass = isPositive ? "text-emerald-300" : "text-rose-300";
+
+        return (
+          <>
+            {isPositive ? (
+              <span className={colorClass}>
+                {`${formatCentsToUSD(Math.abs(val))}`}
+              </span>
+            ) : (
+              <span className={colorClass}>
+                {`(${formatCentsToUSD(Math.abs(val))})`}
+              </span>
+            )}
+          </>
+        );
+      },
+      size: 70,
+      meta: {
+        align: "center",
+      },
+    }),
+  ];
+
+  const table = useReactTable({
+    data: userLedgerTxs,
+    columns: columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: txTotalPages,
+    onPaginationChange: (updater) => {
+      dispatch(
+        setTxPagination(
+          typeof updater === "function" ? updater(txPagination) : updater,
+        ),
+      );
+    },
+    state: {
+      pagination: txPagination,
+    },
+  });
+
+  return (
+    <div className="w-full border-t-1 border-blue-800 p-2">
+      <table className="text-xs table-fixed border-collapse">
+        <thead className="font-bold">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                const align = header.column.columnDef.meta?.align || "left";
+                const alignClass =
+                  align === "center"
+                    ? "text-center"
+                    : align === "right"
+                      ? "text-right"
+                      : "text-left";
 
                 return (
-                    <span className={colorClass}>
-                        {`${emoji} ${formatCentsToUSD(Math.abs(val))}`}
-                    </span>
-                )
-            },
-            size: 70,
-            meta: {
-                align: 'center'
-            }
-        }),
-        columnHelper.accessor('balance_after', {
-            header: () => 'Balance',
-            cell: (props) => {
-                const val = props.renderValue() as number;
-                const isPositive = val >= 0;
-                const colorClass = isPositive ? 'text-emerald-300' : 'text-rose-300';
+                  <th
+                    key={header.id}
+                    className={`p-0 m-0 ${alignClass}`}
+                    style={{
+                      width: `${header.column.getSize()}px`,
+                    }}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+                  </th>
+                );
+              })}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row) => (
+            <tr key={row.id}>
+              {row.getVisibleCells().map((cell) => {
+                const align = cell.column.columnDef.meta?.align || "left";
+                const alignClass =
+                  align === "center"
+                    ? "text-center"
+                    : align === "right"
+                      ? "text-right"
+                      : "text-left";
 
                 return (
-                    <>
-                        {isPositive ? (
-                            <span className={colorClass}>
-                                {`${formatCentsToUSD(Math.abs(val))}`}
-                            </span>
-                        ) : (
-                            <span className={colorClass}>
-                                {`(${formatCentsToUSD(Math.abs(val))})`}
-                            </span>
-                        )}
-                    </>
-                )
-            },
-            size: 70,
-            meta: {
-                align: 'center'
-            }
-        }),
-    ]
-
-    const table = useReactTable({
-        'data': userLedgerTxs,
-        'columns': columns,
-        getCoreRowModel: getCoreRowModel(),
-        manualPagination: true,
-        pageCount: txTotalPages,
-        onPaginationChange: (updater) => {
-            dispatch(setTxPagination(
-                typeof updater === 'function' ? updater(txPagination) : updater
-            ));
-        },
-        state: {
-            pagination: txPagination,
-        },
-    });
-
-    return (
-        <div className="w-full border-t-1 border-blue-800 p-2">
-            <table className="text-xs table-fixed border-collapse">
-                <thead className="font-bold">
-                    {table.getHeaderGroups().map((headerGroup) => (
-
-                        <tr key={headerGroup.id}>
-                            {headerGroup.headers.map((header) => {
-                                const align = header.column.columnDef.meta?.align || 'left';
-                                const alignClass = align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left';
-
-                                return (
-                                    <th
-                                        key={header.id}
-                                        className={`p-0 m-0 ${alignClass}`}
-                                        style={{
-                                            width: `${header.column.getSize()}px`,
-                                        }}
-                                    >
-                                        {flexRender(
-                                            header.column.columnDef.header,
-                                            header.getContext(),
-                                        )}
-                                    </th>
-                                )
-                            })}
-                        </tr>
-                    ))}
-                </thead>
-                <tbody>
-                    {table.getRowModel().rows.map((row) => (
-                        <tr key={row.id}>
-                            {row.getVisibleCells().map((cell) => {
-                                const align = cell.column.columnDef.meta?.align || 'left';
-                                const alignClass = align === 'center' ? 'text-center' :
-                                    align === 'right' ? 'text-right' : 'text-left';
-
-                                return (
-                                    <td key={cell.id}
-                                        className={`p-0 ${alignClass}`}
-                                        style={{
-                                            width: `${cell.column.getSize()}px`,
-                                        }}
-                                    >
-                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                    </td>
-                                )
-                            })}
-                        </tr>
-                    ))}
-                </tbody>
-
-                <tfoot>
-                    <tr>
-                        <td colSpan={columns.length} className="p-2">
-                            <div className="flex items-center justify-between text-xs">
-
-                                {/* Page info */}
-                                <div className="text-blue-50">
-                                    Page {table.getState().pagination.pageIndex + 1} of{' '}
-                                    {table.getPageCount()}
-                                </div>
-
-                                {/* Navigation buttons */}
-                                <div className="flex gap-8 text-xs">
-                                    <button
-                                        onClick={() => table.previousPage()}
-                                        disabled={!table.getCanPreviousPage()}
-                                        className="px-3 py-1 border border-blue-200 rounded
+                  <td
+                    key={cell.id}
+                    className={`p-0 ${alignClass}`}
+                    style={{
+                      width: `${cell.column.getSize()}px`,
+                    }}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+
+        <tfoot>
+          <tr>
+            <td colSpan={columns.length} className="p-2">
+              <div className="flex items-center justify-between text-xs">
+                {/* Page info */}
+                <div className="text-blue-50">
+                  Page {table.getState().pagination.pageIndex + 1} of{" "}
+                  {table.getPageCount()}
+                </div>
+
+                {/* Navigation buttons */}
+                <div className="flex gap-8 text-xs">
+                  <button
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                    className="px-3 py-1 border border-blue-200 rounded
                                         font-variant-emoji-text
                                         hover:cursor-pointer hover:bg-blue-700
                                         disabled:opacity-50 disabled:cursor-not-allowed"
-                                    >
-                                        {'⬅\uFE0E'}
-                                    </button>
-                                    <button
-                                        onClick={() => table.nextPage()}
-                                        disabled={!table.getCanNextPage()}
-                                        className="px-3 py-1 border border-blue-200 rounded
+                  >
+                    {"⬅\uFE0E"}
+                  </button>
+                  <button
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                    className="px-3 py-1 border border-blue-200 rounded
                                         font-variant-emoji-text
                                         hover:cursor-pointer hover:bg-blue-700
                                         disabled:opacity-50 disabled:cursor-not-allowed"
-                                    >
-                                        {'⮕\uFE0E'}
-                                    </button>
-                                </div>
-
-                                {/* Page size selector */}
-                                <select
-                                    value={table.getState().pagination.pageSize}
-                                    onChange={e => table.setPageSize(Number(e.target.value))}
-                                    className="px-2 py-1 border border-blue-200 rounded
+                  >
+                    {"⮕\uFE0E"}
+                  </button>
+                </div>
+
+                {/* Page size selector */}
+                <select
+                  value={table.getState().pagination.pageSize}
+                  onChange={(e) => table.setPageSize(Number(e.target.value))}
+                  className="px-2 py-1 border border-blue-200 rounded
                                     hover:cursor-pointer hover:bg-blue-700"
-                                >
-                                    {[10, 20, 30, 40].map(pageSize => (
-                                        <option key={pageSize} value={pageSize}>
-                                            Show {pageSize}
-                                        </option>
-                                    ))}
-                                </select>
-                            </div>
-                        </td>
-                    </tr>
-                </tfoot>
-
-            </table>
-        </div>
-    )
+                >
+                  {[10, 20, 30, 40].map((pageSize) => (
+                    <option key={pageSize} value={pageSize}>
+                      Show {pageSize}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
 };
 
-
 const Wallet = () => {
-    const dispatch = useAppDispatch()
-    const bpuid = useAppSelector(state => state.app.bpuid)
-    const pagination = useAppSelector(state => state.app.txPagination);
-
-    useEffect(() => {
-        if (!bpuid) return;
-
-        new WalletApi().getUserTransactionHistoryProductIdTransactionHistoryGet(
-            bpid, // productId
-            bpuid, // bpuid
-            undefined, // createdAfter
-            undefined, // createdBefore
-            "-created", // orderBy
-            pagination.pageIndex + 1, // page
-            pagination.pageSize // pageSize
-        ).then(res => {
-            const response = res.data as UserLedgerTransactionsResponse;
-            dispatch(setUserLedgerSummary(response.summary));
-            dispatch(setUserLedgerTxs(response.transactions ?? []))
-
-            dispatch(setTxPagination({
-                pageIndex: (response.page ?? 1) - 1,
-                pageSize: response.size ?? 10,
-            }))
-            dispatch(setTxTotalItems(response.total ?? 0))
-            dispatch(setTxTotalPages(response.pages ?? 9))
-        });
-
-    }, [bpuid])
-
-    if (!bpuid) return null;
-
-    return (
-        <div className="fixed top-2 left-2 p-2 rounded
+  const dispatch = useAppDispatch();
+  const bpuid = useAppSelector((state) => state.app.bpuid);
+  const pagination = useAppSelector((state) => state.app.txPagination);
+
+  useEffect(() => {
+    if (!bpuid) return;
+
+    new WalletApi()
+      .getUserTransactionHistoryProductIdTransactionHistoryGet(
+        bpid, // productId
+        bpuid, // bpuid
+        undefined, // createdAfter
+        undefined, // createdBefore
+        "-created", // orderBy
+        pagination.pageIndex + 1, // page
+        pagination.pageSize, // pageSize
+      )
+      .then((res) => {
+        const response = res.data as UserLedgerTransactionsResponse;
+        dispatch(setUserLedgerSummary(response.summary));
+        dispatch(setUserLedgerTxs(response.transactions ?? []));
+
+        dispatch(
+          setTxPagination({
+            pageIndex: (response.page ?? 1) - 1,
+            pageSize: response.size ?? 10,
+          }),
+        );
+        dispatch(setTxTotalItems(response.total ?? 0));
+        dispatch(setTxTotalPages(response.pages ?? 9));
+      });
+  }, [bpuid]);
+
+  if (!bpuid) return null;
+
+  return (
+    <div
+      className="fixed top-2 left-2 p-2 rounded
             bg-blue-500 text-white shadow-lg z-50
             font-mono
             max-h-[calc(100vh-2.5rem)] overflow-y-auto
             max-w-[96vw]
-            ">
-            <WalletHeader />
-            <WalletSummary />
-            <WalletTransactionsHeader />
-        </div>
-    )
+            "
+    >
+      <WalletHeader />
+      <WalletSummary />
+      <WalletTransactionsHeader />
+    </div>
+  );
 };
 
-
-export default Wallet;
\ No newline at end of file
+export default Wallet;
diff --git a/jb-ui/src/components/ui/button.tsx b/jb-ui/src/components/ui/button.tsx
index b5ea4ab..d2176b4 100644
--- a/jb-ui/src/components/ui/button.tsx
+++ b/jb-ui/src/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -35,8 +35,8 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 function Button({
   className,
@@ -46,9 +46,9 @@ function Button({
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot.Root : "button"
+  const Comp = asChild ? Slot.Root : "button";
 
   return (
     <Comp
@@ -58,7 +58,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/jb-ui/src/components/ui/checkbox.tsx b/jb-ui/src/components/ui/checkbox.tsx
index 0e2a6cd..f24ad45 100644
--- a/jb-ui/src/components/ui/checkbox.tsx
+++ b/jb-ui/src/components/ui/checkbox.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Checkbox({
   className,
@@ -13,7 +13,7 @@ function Checkbox({
       data-slot="checkbox"
       className={cn(
         "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -24,7 +24,7 @@ function Checkbox({
         <CheckIcon className="size-3.5" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  )
+  );
 }
 
-export { Checkbox }
+export { Checkbox };
diff --git a/jb-ui/src/components/ui/confetti.tsx b/jb-ui/src/components/ui/confetti.tsx
index e0d353a..57d3273 100644
--- a/jb-ui/src/components/ui/confetti.tsx
+++ b/jb-ui/src/components/ui/confetti.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from "react"
+import type { ReactNode } from "react";
 import React, {
   createContext,
   forwardRef,
@@ -7,30 +7,30 @@ import React, {
   useImperativeHandle,
   useMemo,
   useRef,
-} from "react"
+} from "react";
 import type {
   GlobalOptions as ConfettiGlobalOptions,
   CreateTypes as ConfettiInstance,
   Options as ConfettiOptions,
-} from "canvas-confetti"
-import confetti from "canvas-confetti"
+} from "canvas-confetti";
+import confetti from "canvas-confetti";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 
 type Api = {
-  fire: (options?: ConfettiOptions) => void
-}
+  fire: (options?: ConfettiOptions) => void;
+};
 
 type Props = React.ComponentPropsWithRef<"canvas"> & {
-  options?: ConfettiOptions
-  globalOptions?: ConfettiGlobalOptions
-  manualstart?: boolean
-  children?: ReactNode
-}
+  options?: ConfettiOptions;
+  globalOptions?: ConfettiGlobalOptions;
+  manualstart?: boolean;
+  children?: ReactNode;
+};
 
-export type ConfettiRef = Api | null
+export type ConfettiRef = Api | null;
 
-const ConfettiContext = createContext<Api>({} as Api)
+const ConfettiContext = createContext<Api>({} as Api);
 
 // Define component first
 const ConfettiComponent = forwardRef<ConfettiRef, Props>((props, ref) => {
@@ -40,76 +40,76 @@ const ConfettiComponent = forwardRef<ConfettiRef, Props>((props, ref) => {
     manualstart = false,
     children,
     ...rest
-  } = props
-  const instanceRef = useRef<ConfettiInstance | null>(null)
+  } = props;
+  const instanceRef = useRef<ConfettiInstance | null>(null);
 
   const canvasRef = useCallback(
     (node: HTMLCanvasElement) => {
       if (node !== null) {
-        if (instanceRef.current) return
+        if (instanceRef.current) return;
         instanceRef.current = confetti.create(node, {
           ...globalOptions,
           resize: true,
-        })
+        });
       } else {
         if (instanceRef.current) {
-          instanceRef.current.reset()
-          instanceRef.current = null
+          instanceRef.current.reset();
+          instanceRef.current = null;
         }
       }
     },
-    [globalOptions]
-  )
+    [globalOptions],
+  );
 
   const fire = useCallback(
     async (opts = {}) => {
       try {
-        await instanceRef.current?.({ ...options, ...opts })
+        await instanceRef.current?.({ ...options, ...opts });
       } catch (error) {
-        console.error("Confetti error:", error)
+        console.error("Confetti error:", error);
       }
     },
-    [options]
-  )
+    [options],
+  );
 
   const api = useMemo(
     () => ({
       fire,
     }),
-    [fire]
-  )
+    [fire],
+  );
 
-  useImperativeHandle(ref, () => api, [api])
+  useImperativeHandle(ref, () => api, [api]);
 
   useEffect(() => {
     if (!manualstart) {
-      ;(async () => {
+      (async () => {
         try {
-          await fire()
+          await fire();
         } catch (error) {
-          console.error("Confetti effect error:", error)
+          console.error("Confetti effect error:", error);
         }
-      })()
+      })();
     }
-  }, [manualstart, fire])
+  }, [manualstart, fire]);
 
   return (
     <ConfettiContext.Provider value={api}>
       <canvas ref={canvasRef} {...rest} />
       {children}
     </ConfettiContext.Provider>
-  )
-})
+  );
+});
 
 // Set display name immediately
-ConfettiComponent.displayName = "Confetti"
+ConfettiComponent.displayName = "Confetti";
 
 // Export as Confetti
-export const Confetti = ConfettiComponent
+export const Confetti = ConfettiComponent;
 
 interface ConfettiButtonProps extends React.ComponentProps<"button"> {
   options?: ConfettiOptions &
-    ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }
+    ConfettiGlobalOptions & { canvas?: HTMLCanvasElement };
 }
 
 const ConfettiButtonComponent = ({
@@ -119,28 +119,28 @@ const ConfettiButtonComponent = ({
 }: ConfettiButtonProps) => {
   const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
     try {
-      const rect = event.currentTarget.getBoundingClientRect()
-      const x = rect.left + rect.width / 2
-      const y = rect.top + rect.height / 2
+      const rect = event.currentTarget.getBoundingClientRect();
+      const x = rect.left + rect.width / 2;
+      const y = rect.top + rect.height / 2;
       await confetti({
         ...options,
         origin: {
           x: x / window.innerWidth,
           y: y / window.innerHeight,
         },
-      })
+      });
     } catch (error) {
-      console.error("Confetti button error:", error)
+      console.error("Confetti button error:", error);
     }
-  }
+  };
 
   return (
     <Button onClick={handleClick} {...props}>
       {children}
     </Button>
-  )
-}
+  );
+};
 
-ConfettiButtonComponent.displayName = "ConfettiButton"
+ConfettiButtonComponent.displayName = "ConfettiButton";
 
-export const ConfettiButton = ConfettiButtonComponent
+export const ConfettiButton = ConfettiButtonComponent;
diff --git a/jb-ui/src/components/ui/dot-pattern.tsx b/jb-ui/src/components/ui/dot-pattern.tsx
index 9522b7f..a217a9b 100644
--- a/jb-ui/src/components/ui/dot-pattern.tsx
+++ b/jb-ui/src/components/ui/dot-pattern.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useId, useRef, useState } from "react"
-import { motion } from "motion/react"
+import React, { useEffect, useId, useRef, useState } from "react";
+import { motion } from "motion/react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 /**
  *  DotPattern Component Props
@@ -17,16 +17,16 @@ import { cn } from "@/lib/utils"
  * @param {boolean} [glow=false] - Whether dots should have a glowing animation effect
  */
 interface DotPatternProps extends React.SVGProps<SVGSVGElement> {
-  width?: number
-  height?: number
-  x?: number
-  y?: number
-  cx?: number
-  cy?: number
-  cr?: number
-  className?: string
-  glow?: boolean
-  [key: string]: unknown
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+  cx?: number;
+  cy?: number;
+  cr?: number;
+  className?: string;
+  glow?: boolean;
+  [key: string]: unknown;
 }
 
 /**
@@ -71,22 +71,22 @@ export function DotPattern({
   glow = false,
   ...props
 }: DotPatternProps) {
-  const id = useId()
-  const containerRef = useRef<SVGSVGElement>(null)
-  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+  const id = useId();
+  const containerRef = useRef<SVGSVGElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
 
   useEffect(() => {
     const updateDimensions = () => {
       if (containerRef.current) {
-        const { width, height } = containerRef.current.getBoundingClientRect()
-        setDimensions({ width, height })
+        const { width, height } = containerRef.current.getBoundingClientRect();
+        setDimensions({ width, height });
       }
-    }
+    };
 
-    updateDimensions()
-    window.addEventListener("resize", updateDimensions)
-    return () => window.removeEventListener("resize", updateDimensions)
-  }, [])
+    updateDimensions();
+    window.addEventListener("resize", updateDimensions);
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, []);
 
   const dots = Array.from(
     {
@@ -95,16 +95,16 @@ export function DotPattern({
         Math.ceil(dimensions.height / height),
     },
     (_, i) => {
-      const col = i % Math.ceil(dimensions.width / width)
-      const row = Math.floor(i / Math.ceil(dimensions.width / width))
+      const col = i % Math.ceil(dimensions.width / width);
+      const row = Math.floor(i / Math.ceil(dimensions.width / width));
       return {
         x: col * width + cx,
         y: row * height + cy,
         delay: Math.random() * 5,
         duration: Math.random() * 3 + 2,
-      }
-    }
-  )
+      };
+    },
+  );
 
   return (
     <svg
@@ -112,7 +112,7 @@ export function DotPattern({
       aria-hidden="true"
       className={cn(
         "pointer-events-none absolute inset-0 h-full w-full text-neutral-400/80",
-        className
+        className,
       )}
       {...props}
     >
@@ -152,5 +152,5 @@ export function DotPattern({
         />
       ))}
     </svg>
-  )
+  );
 }
diff --git a/jb-ui/src/components/ui/field.tsx b/jb-ui/src/components/ui/field.tsx
index db0dc12..77546e5 100644
--- a/jb-ui/src/components/ui/field.tsx
+++ b/jb-ui/src/components/ui/field.tsx
@@ -1,9 +1,9 @@
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 
 function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
   return (
@@ -12,11 +12,11 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
       className={cn(
         "flex flex-col gap-6",
         "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldLegend({
@@ -32,11 +32,11 @@ function FieldLegend({
         "mb-3 font-medium",
         "data-[variant=legend]:text-base",
         "data-[variant=label]:text-sm",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
@@ -45,11 +45,11 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="field-group"
       className={cn(
         "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 const fieldVariants = cva(
@@ -73,8 +73,8 @@ const fieldVariants = cva(
     defaultVariants: {
       orientation: "vertical",
     },
-  }
-)
+  },
+);
 
 function Field({
   className,
@@ -89,7 +89,7 @@ function Field({
       className={cn(fieldVariants({ orientation }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -98,11 +98,11 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="field-content"
       className={cn(
         "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldLabel({
@@ -116,11 +116,11 @@ function FieldLabel({
         "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
         "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -129,11 +129,11 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="field-label"
       className={cn(
         "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
@@ -144,11 +144,11 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
         "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldSeparator({
@@ -156,7 +156,7 @@ function FieldSeparator({
   className,
   ...props
 }: React.ComponentProps<"div"> & {
-  children?: React.ReactNode
+  children?: React.ReactNode;
 }) {
   return (
     <div
@@ -164,7 +164,7 @@ function FieldSeparator({
       data-content={!!children}
       className={cn(
         "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
+        className,
       )}
       {...props}
     >
@@ -178,7 +178,7 @@ function FieldSeparator({
         </span>
       )}
     </div>
-  )
+  );
 }
 
 function FieldError({
@@ -187,37 +187,37 @@ function FieldError({
   errors,
   ...props
 }: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
+  errors?: Array<{ message?: string } | undefined>;
 }) {
   const content = useMemo(() => {
     if (children) {
-      return children
+      return children;
     }
 
     if (!errors?.length) {
-      return null
+      return null;
     }
 
     const uniqueErrors = [
       ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
+    ];
 
     if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
+      return uniqueErrors[0]?.message;
     }
 
     return (
       <ul className="ml-4 flex list-disc flex-col gap-1">
         {uniqueErrors.map(
           (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
+            error?.message && <li key={index}>{error.message}</li>,
         )}
       </ul>
-    )
-  }, [children, errors])
+    );
+  }, [children, errors]);
 
   if (!content) {
-    return null
+    return null;
   }
 
   return (
@@ -229,7 +229,7 @@ function FieldError({
     >
       {content}
     </div>
-  )
+  );
 }
 
 export {
@@ -243,4 +243,4 @@ export {
   FieldSet,
   FieldContent,
   FieldTitle,
-}
+};
diff --git a/jb-ui/src/components/ui/label.tsx b/jb-ui/src/components/ui/label.tsx
index ef7133a..4ef28a9 100644
--- a/jb-ui/src/components/ui/label.tsx
+++ b/jb-ui/src/components/ui/label.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Label({
   className,
@@ -12,11 +12,11 @@ function Label({
       data-slot="label"
       className={cn(
         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export { Label };
diff --git a/jb-ui/src/components/ui/magic-card.tsx b/jb-ui/src/components/ui/magic-card.tsx
index e6503d8..2b92e38 100644
--- a/jb-ui/src/components/ui/magic-card.tsx
+++ b/jb-ui/src/components/ui/magic-card.tsx
@@ -1,16 +1,16 @@
-import React, { useCallback, useEffect } from "react"
-import { motion, useMotionTemplate, useMotionValue } from "motion/react"
+import React, { useCallback, useEffect } from "react";
+import { motion, useMotionTemplate, useMotionValue } from "motion/react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 interface MagicCardProps {
-  children?: React.ReactNode
-  className?: string
-  gradientSize?: number
-  gradientColor?: string
-  gradientOpacity?: number
-  gradientFrom?: string
-  gradientTo?: string
+  children?: React.ReactNode;
+  className?: string;
+  gradientSize?: number;
+  gradientColor?: string;
+  gradientOpacity?: number;
+  gradientFrom?: string;
+  gradientTo?: string;
 }
 
 export function MagicCard({
@@ -22,49 +22,49 @@ export function MagicCard({
   gradientFrom = "#9E7AFF",
   gradientTo = "#FE8BBB",
 }: MagicCardProps) {
-  const mouseX = useMotionValue(-gradientSize)
-  const mouseY = useMotionValue(-gradientSize)
+  const mouseX = useMotionValue(-gradientSize);
+  const mouseY = useMotionValue(-gradientSize);
   const reset = useCallback(() => {
-    mouseX.set(-gradientSize)
-    mouseY.set(-gradientSize)
-  }, [gradientSize, mouseX, mouseY])
+    mouseX.set(-gradientSize);
+    mouseY.set(-gradientSize);
+  }, [gradientSize, mouseX, mouseY]);
 
   const handlePointerMove = useCallback(
     (e: React.PointerEvent<HTMLDivElement>) => {
-      const rect = e.currentTarget.getBoundingClientRect()
-      mouseX.set(e.clientX - rect.left)
-      mouseY.set(e.clientY - rect.top)
+      const rect = e.currentTarget.getBoundingClientRect();
+      mouseX.set(e.clientX - rect.left);
+      mouseY.set(e.clientY - rect.top);
     },
-    [mouseX, mouseY]
-  )
+    [mouseX, mouseY],
+  );
 
   useEffect(() => {
-    reset()
-  }, [reset])
+    reset();
+  }, [reset]);
 
   useEffect(() => {
     const handleGlobalPointerOut = (e: PointerEvent) => {
       if (!e.relatedTarget) {
-        reset()
+        reset();
       }
-    }
+    };
 
     const handleVisibility = () => {
       if (document.visibilityState !== "visible") {
-        reset()
+        reset();
       }
-    }
+    };
 
-    window.addEventListener("pointerout", handleGlobalPointerOut)
-    window.addEventListener("blur", reset)
-    document.addEventListener("visibilitychange", handleVisibility)
+    window.addEventListener("pointerout", handleGlobalPointerOut);
+    window.addEventListener("blur", reset);
+    document.addEventListener("visibilitychange", handleVisibility);
 
     return () => {
-      window.removeEventListener("pointerout", handleGlobalPointerOut)
-      window.removeEventListener("blur", reset)
-      document.removeEventListener("visibilitychange", handleVisibility)
-    }
-  }, [reset])
+      window.removeEventListener("pointerout", handleGlobalPointerOut);
+      window.removeEventListener("blur", reset);
+      document.removeEventListener("visibilitychange", handleVisibility);
+    };
+  }, [reset]);
 
   return (
     <div
@@ -97,5 +97,5 @@ export function MagicCard({
       />
       <div className="relative">{children}</div>
     </div>
-  )
+  );
 }
diff --git a/jb-ui/src/components/ui/pagination.tsx b/jb-ui/src/components/ui/pagination.tsx
index 1dcfb0c..990f907 100644
--- a/jb-ui/src/components/ui/pagination.tsx
+++ b/jb-ui/src/components/ui/pagination.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
+import * as React from "react";
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   MoreHorizontalIcon,
-} from "lucide-react"
+} from "lucide-react";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants, type Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants, type Button } from "@/components/ui/button";
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
@@ -17,7 +17,7 @@ function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
       className={cn("mx-auto flex w-full justify-center", className)}
       {...props}
     />
-  )
+  );
 }
 
 function PaginationContent({
@@ -30,17 +30,17 @@ function PaginationContent({
       className={cn("flex flex-row items-center gap-1", className)}
       {...props}
     />
-  )
+  );
 }
 
 function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-  return <li data-slot="pagination-item" {...props} />
+  return <li data-slot="pagination-item" {...props} />;
 }
 
 type PaginationLinkProps = {
-  isActive?: boolean
+  isActive?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">
+  React.ComponentProps<"a">;
 
 function PaginationLink({
   className,
@@ -58,11 +58,11 @@ function PaginationLink({
           variant: isActive ? "outline" : "ghost",
           size,
         }),
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function PaginationPrevious({
@@ -79,7 +79,7 @@ function PaginationPrevious({
       <ChevronLeftIcon />
       <span className="hidden sm:block">Previous</span>
     </PaginationLink>
-  )
+  );
 }
 
 function PaginationNext({
@@ -96,7 +96,7 @@ function PaginationNext({
       <span className="hidden sm:block">Next</span>
       <ChevronRightIcon />
     </PaginationLink>
-  )
+  );
 }
 
 function PaginationEllipsis({
@@ -113,7 +113,7 @@ function PaginationEllipsis({
       <MoreHorizontalIcon className="size-4" />
       <span className="sr-only">More pages</span>
     </span>
-  )
+  );
 }
 
 export {
@@ -124,4 +124,4 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
-}
+};
diff --git a/jb-ui/src/components/ui/separator.tsx b/jb-ui/src/components/ui/separator.tsx
index 275381c..72c18e3 100644
--- a/jb-ui/src/components/ui/separator.tsx
+++ b/jb-ui/src/components/ui/separator.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Separator({
   className,
@@ -18,11 +18,11 @@ function Separator({
       orientation={orientation}
       className={cn(
         "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Separator }
+export { Separator };
diff --git a/jb-ui/src/components/ui/skeleton.tsx b/jb-ui/src/components/ui/skeleton.tsx
index 32ea0ef..0168998 100644
--- a/jb-ui/src/components/ui/skeleton.tsx
+++ b/jb-ui/src/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -7,7 +7,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("bg-accent animate-pulse rounded-md", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/jb-ui/src/hooks.ts b/jb-ui/src/hooks.ts
index 02ff1b6..7f8db4b 100644
--- a/jb-ui/src/hooks.ts
+++ b/jb-ui/src/hooks.ts
@@ -1,11 +1,11 @@
 // This file serves as a central hub for re-exporting pre-typed Redux hooks.
-import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux'
-import type { AppDispatch, RootState } from '@/store'
-
+import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
+import type { AppDispatch, RootState } from "@/store";
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 // export const useAppDispatch: () => AppDispatch = useDispatch.withTypes<AppDispatch>()
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector.withTypes<RootState>()
+export const useAppSelector: TypedUseSelectorHook<RootState> =
+  useSelector.withTypes<RootState>();
 
-export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppDispatch: () => AppDispatch = useDispatch;
 // export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
diff --git a/jb-ui/src/index.css b/jb-ui/src/index.css
index 1677b7b..579102b 100644
--- a/jb-ui/src/index.css
+++ b/jb-ui/src/index.css
@@ -138,4 +138,3 @@
     @apply bg-background text-foreground;
   }
 }
-
diff --git a/jb-ui/src/lib/utils.ts b/jb-ui/src/lib/utils.ts
index 0c84192..1aa59c6 100644
--- a/jb-ui/src/lib/utils.ts
+++ b/jb-ui/src/lib/utils.ts
@@ -1,113 +1,119 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-import { Source } from "../api_fsb"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Source } from "../api_fsb";
 
 export const routeBasename = import.meta.env.VITE_BASENAME;
-export const tagManager = import.meta.env.VITE_TAG_MANAGER
+export const tagManager = import.meta.env.VITE_TAG_MANAGER;
 export const bpid = import.meta.env.VITE_BPID;
 
 export function cn(...inputs: ClassValue[]) {
-    return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
 export function assert(condition: any, msg?: string): asserts condition {
-    if (!condition) {
-        throw new Error(msg);
-    }
+  if (!condition) {
+    throw new Error(msg);
+  }
 }
 
 export function toCapitalized(word: string): string {
-    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+  return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
 }
 
-export function truncate(originalText: string, maxLength: number = 10, replaceStr = "…"): string {
-    if (originalText && originalText.length > maxLength) {
-        return originalText.substring(0, maxLength) + replaceStr;
-    }
-    return originalText;
+export function truncate(
+  originalText: string,
+  maxLength: number = 10,
+  replaceStr = "…",
+): string {
+  if (originalText && originalText.length > maxLength) {
+    return originalText.substring(0, maxLength) + replaceStr;
+  }
+  return originalText;
 }
 
 export function usdCentFmt(value: number): string {
-    return (value / 100).toLocaleString('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-    })
+  return (value / 100).toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
 }
 
 export function formatStatus(status: string): string {
-    const table = {
-        'c': 'Completed',
-        't': 'Terminated',
-        'f': 'Failed',
-        'e': 'Entered',
-    }
-
-    return table[status as keyof typeof table] ?? "Unknown";
+  const table = {
+    c: "Completed",
+    t: "Terminated",
+    f: "Failed",
+    e: "Entered",
+  };
+
+  return table[status as keyof typeof table] ?? "Unknown";
 }
 
 export function formatSource(source: Source): string {
-    const table = {
-        'g': 'GRS',
-        'c': 'Cint',
-        'a': 'Dalia',
-        'd': 'Dynata',
-        'et': 'Etx',
-        'f': 'Full Circle',
-        'i': 'InnovateMR',
-        'l': 'Lucid',
-        'm': 'Morning Consult',
-        'n': 'Open Labs',
-        'o': 'Pollfish',
-        'e': 'Precision Sample',
-        'r': 'Prodege User',
-        'pr': 'Prodege',
-        'p': 'Pulley',
-        'rd': 'Rep Data',
-        'h': 'Sago',
-        's': 'Pure Spectrum',
-        't': 'Testing',
-        'u': 'Testing 2',
-        'w': 'WXET'
-    }
-
-    return table[source]
+  const table = {
+    g: "GRS",
+    c: "Cint",
+    a: "Dalia",
+    d: "Dynata",
+    et: "Etx",
+    f: "Full Circle",
+    i: "InnovateMR",
+    l: "Lucid",
+    m: "Morning Consult",
+    n: "Open Labs",
+    o: "Pollfish",
+    e: "Precision Sample",
+    r: "Prodege User",
+    pr: "Prodege",
+    p: "Pulley",
+    rd: "Rep Data",
+    h: "Sago",
+    s: "Pure Spectrum",
+    t: "Testing",
+    u: "Testing 2",
+    w: "WXET",
+  };
+
+  return table[source];
 }
 
 export function formatSecondsVerbose(seconds: number): string {
-    const mins = Math.floor(seconds / 60)
-    const secs = seconds % 60
-
-    const parts = []
-    if (mins > 0) parts.push(`${mins} min`)
-    if (secs > 0 || mins === 0) {
-        parts.push(`${secs.toLocaleString('en-US', {
-            minimumFractionDigits: 0,
-            maximumFractionDigits: 1
-        })} sec`)
-    }
-
-    return parts.join(" ")
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+
+  const parts = [];
+  if (mins > 0) parts.push(`${mins} min`);
+  if (secs > 0 || mins === 0) {
+    parts.push(
+      `${secs.toLocaleString("en-US", {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 1,
+      })} sec`,
+    );
+  }
+
+  return parts.join(" ");
 }
 
 export function formatSeconds(seconds: number): string {
-    const mins = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    const paddedSecs = secs.toString().padStart(2, '0')
-    return `${mins}:${paddedSecs}`
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  const paddedSecs = secs.toString().padStart(2, "0");
+  return `${mins}:${paddedSecs}`;
 }
 
 export function formatCentsToUSD(cents: number): string {
-    return new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-    }).format(cents / 100)
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(cents / 100);
 }
 
 export function titleCase(str: string): string {
-    return str
-        .split(" ")
-        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(" ");
-}
\ No newline at end of file
+  return str
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
diff --git a/jb-ui/src/main.tsx b/jb-ui/src/main.tsx
index 538bea2..6e02727 100644
--- a/jb-ui/src/main.tsx
+++ b/jb-ui/src/main.tsx
@@ -1,19 +1,19 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { Provider } from 'react-redux'
-import { store } from '@/store'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { Provider } from "react-redux";
+import { store } from "@/store";
 import JBApp from "@/JBApp";
 
-const rootElement = document.getElementById('root');
+const rootElement = document.getElementById("root");
 if (!rootElement) {
-    throw new Error('Failed to find the root element');
+  throw new Error("Failed to find the root element");
 }
 const root = ReactDOM.createRoot(rootElement);
 
 root.render(
-    <React.StrictMode>
-        <Provider store={store}>
-            <JBApp />
-        </Provider>
-    </React.StrictMode >
-);
\ No newline at end of file
+  <React.StrictMode>
+    <Provider store={store}>
+      <JBApp />
+    </Provider>
+  </React.StrictMode>,
+);
diff --git a/jb-ui/src/models/app.ts b/jb-ui/src/models/app.ts
index 95b4c11..4c3e69e 100644
--- a/jb-ui/src/models/app.ts
+++ b/jb-ui/src/models/app.ts
@@ -1,37 +1,39 @@
 import {
-    UserWalletBalance, TopNPlusBucket, TaskStatusResponse,
-    UserLedgerTransactionTypesSummary,
-    UserLedgerTransactionsResponseTransactionsInner,
-    OfferwallReason
+  UserWalletBalance,
+  TopNPlusBucket,
+  TaskStatusResponse,
+  UserLedgerTransactionTypesSummary,
+  UserLedgerTransactionsResponseTransactionsInner,
+  OfferwallReason,
 } from "@/api_fsb";
-import { PaginationState } from '@tanstack/react-table';
+import { PaginationState } from "@tanstack/react-table";
 
 export interface App {
-    // Global IDs needed by GRL + MTurk
-    bpuid?: string;
-    assignment_id?: string;
-    turkSubmitTo?: string;
+  // Global IDs needed by GRL + MTurk
+  bpuid?: string;
+  assignment_id?: string;
+  turkSubmitTo?: string;
 
-    // Global UI settings
-    loi: number;
-    availability_count?: number;
-    attempted_live_eligible_count?: number;
-    offerwall_reasons: OfferwallReason[];
+  // Global UI settings
+  loi: number;
+  availability_count?: number;
+  attempted_live_eligible_count?: number;
+  offerwall_reasons: OfferwallReason[];
 
-    // The timestamp of when the currently requested bucket was requested. We want
-    // to save this to prevent it from sitting for longer than 120 seconds.
-    currentBucketRequested?: number;  // Date.now() is a timestamp in ms
-    currentBuckets?: TopNPlusBucket[];
-    currentBucketEntered?: number;  // Date.now() is a timestamp in ms
-    taskStatus?: TaskStatusResponse;
+  // The timestamp of when the currently requested bucket was requested. We want
+  // to save this to prevent it from sitting for longer than 120 seconds.
+  currentBucketRequested?: number; // Date.now() is a timestamp in ms
+  currentBuckets?: TopNPlusBucket[];
+  currentBucketEntered?: number; // Date.now() is a timestamp in ms
+  taskStatus?: TaskStatusResponse;
 
-    // Wallet stuff
-    userWalletBalance?: UserWalletBalance;
-    userLedgerSummary?: UserLedgerTransactionTypesSummary;
-    userLedgerTxCount?: number;
-    userLedgerTxs: UserLedgerTransactionsResponseTransactionsInner[];
+  // Wallet stuff
+  userWalletBalance?: UserWalletBalance;
+  userLedgerSummary?: UserLedgerTransactionTypesSummary;
+  userLedgerTxCount?: number;
+  userLedgerTxs: UserLedgerTransactionsResponseTransactionsInner[];
 
-    txPagination: PaginationState;
-    txTotalItems?: number;
-    txTotalPages?: number;
+  txPagination: PaginationState;
+  txTotalItems?: number;
+  txTotalPages?: number;
 }
diff --git a/jb-ui/src/models/appSlice.ts b/jb-ui/src/models/appSlice.ts
index 87952d9..46c6a2f 100644
--- a/jb-ui/src/models/appSlice.ts
+++ b/jb-ui/src/models/appSlice.ts
@@ -1,188 +1,191 @@
 import {
-    TaskStatusResponse,
-    TopNPlusBucket,
-    UserLedgerTransactionsResponseTransactionsInner,
-    UserLedgerTransactionTypesSummary,
-    UserWalletBalance,
-    OfferwallReason
+  TaskStatusResponse,
+  TopNPlusBucket,
+  UserLedgerTransactionsResponseTransactionsInner,
+  UserLedgerTransactionTypesSummary,
+  UserWalletBalance,
+  OfferwallReason,
 } from "@/api_fsb";
 import { App } from "@/models/app";
 import { RootState } from "@/store";
-import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { PaginationState } from '@tanstack/react-table';
+import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { PaginationState } from "@tanstack/react-table";
 import moment from "moment";
 
 const initialState: App = {
-    bpuid: undefined,
-    assignment_id: undefined,
-    loi: 1800,
-    currentBuckets: undefined,
-    currentBucketEntered: undefined,
-    taskStatus: undefined,
-    offerwall_reasons: [],
-
-    userWalletBalance: undefined,
-    userLedgerSummary: undefined,
-    userLedgerTxCount: undefined,
-    userLedgerTxs: [],
-
-    txPagination: { pageIndex: 0, pageSize: 10 },
-    txTotalItems: undefined,
-    txTotalPages: undefined
-} as App
+  bpuid: undefined,
+  assignment_id: undefined,
+  loi: 1800,
+  currentBuckets: undefined,
+  currentBucketEntered: undefined,
+  taskStatus: undefined,
+  offerwall_reasons: [],
+
+  userWalletBalance: undefined,
+  userLedgerSummary: undefined,
+  userLedgerTxCount: undefined,
+  userLedgerTxs: [],
+
+  txPagination: { pageIndex: 0, pageSize: 10 },
+  txTotalItems: undefined,
+  txTotalPages: undefined,
+} as App;
 
 const appSlice = createSlice({
-    name: 'app',
-    initialState,
-    reducers: {
-
-        setProductUserID(state, action: PayloadAction<string>) {
-            state.bpuid = action.payload;
-        },
-
-        setAssignmentID(state, action: PayloadAction<string>) {
-            // This is really so silly. Amazon should simply not send 
-            // anything if it's unavailable.
-            if (action.payload === "ASSIGNMENT_ID_NOT_AVAILABLE") {
-                state.assignment_id = undefined;
-            }
-            state.assignment_id = action.payload;
-        },
-
-        setTurkSubmitTo(state, action: PayloadAction<string>) {
-            state.turkSubmitTo = action.payload;
-        },
-
-        setLOI(state, action: PayloadAction<number>) {
-            state.loi = action.payload;
-        },
-
-        setAvailabilityCount(state, action: PayloadAction<number>) {
-            state.availability_count = action.payload
-        },
-
-        setAttemptedLiveEligibleCount(state, action: PayloadAction<number>) {
-            state.attempted_live_eligible_count = action.payload
-        },
-
-        setCurrentBuckets(state, action: PayloadAction<TopNPlusBucket[] | undefined>) {
-            state.currentBucketRequested = moment.utc().unix();
-            state.currentBuckets = action.payload
-        },
-
-        setOfferwallReasons(state, action: PayloadAction<OfferwallReason[]>) {
-            state.offerwall_reasons = action.payload;
-        },
-
-        setEnteredTimestamp(state) {
-            // Go back by 2 seconds to account for any time drift
-            state.currentBucketEntered = moment.utc().unix() - 2;
-        },
-
-        setTaskStatus(state, action: PayloadAction<TaskStatusResponse>) {
-            state.taskStatus = action.payload;
-
-            state.bpuid = action.payload.product_user_id;
-        },
-
-        setUserWalletBalance(state, action: PayloadAction<UserWalletBalance>) {
-            state.userWalletBalance = action.payload;
-        },
-
-        setUserLedgerSummary(state, action: PayloadAction<UserLedgerTransactionTypesSummary>) {
-            state.userLedgerSummary = action.payload;
-        },
-
-        setUserLedgerTxs(state, action: PayloadAction<UserLedgerTransactionsResponseTransactionsInner[]>) {
-            // We're not appending the transaction details, it's only going
-            // to reassign the current page of Transactions.
-            state.userLedgerTxs = action.payload;
-        },
-
-        setTxPagination(state, action: PayloadAction<PaginationState>) {
-            state.txPagination = action.payload;
-        },
-
-        setTxTotalItems(state, action: PayloadAction<number>) {
-            state.txTotalItems = action.payload;
-        },
-
-        setTxTotalPages(state, action: PayloadAction<number>) {
-            state.txTotalPages = action.payload;
-        }
-
-    }
-})
+  name: "app",
+  initialState,
+  reducers: {
+    setProductUserID(state, action: PayloadAction<string>) {
+      state.bpuid = action.payload;
+    },
+
+    setAssignmentID(state, action: PayloadAction<string>) {
+      // This is really so silly. Amazon should simply not send
+      // anything if it's unavailable.
+      if (action.payload === "ASSIGNMENT_ID_NOT_AVAILABLE") {
+        state.assignment_id = undefined;
+      }
+      state.assignment_id = action.payload;
+    },
+
+    setTurkSubmitTo(state, action: PayloadAction<string>) {
+      state.turkSubmitTo = action.payload;
+    },
+
+    setLOI(state, action: PayloadAction<number>) {
+      state.loi = action.payload;
+    },
+
+    setAvailabilityCount(state, action: PayloadAction<number>) {
+      state.availability_count = action.payload;
+    },
+
+    setAttemptedLiveEligibleCount(state, action: PayloadAction<number>) {
+      state.attempted_live_eligible_count = action.payload;
+    },
+
+    setCurrentBuckets(
+      state,
+      action: PayloadAction<TopNPlusBucket[] | undefined>,
+    ) {
+      state.currentBucketRequested = moment.utc().unix();
+      state.currentBuckets = action.payload;
+    },
+
+    setOfferwallReasons(state, action: PayloadAction<OfferwallReason[]>) {
+      state.offerwall_reasons = action.payload;
+    },
+
+    setEnteredTimestamp(state) {
+      // Go back by 2 seconds to account for any time drift
+      state.currentBucketEntered = moment.utc().unix() - 2;
+    },
+
+    setTaskStatus(state, action: PayloadAction<TaskStatusResponse>) {
+      state.taskStatus = action.payload;
+
+      state.bpuid = action.payload.product_user_id;
+    },
+
+    setUserWalletBalance(state, action: PayloadAction<UserWalletBalance>) {
+      state.userWalletBalance = action.payload;
+    },
+
+    setUserLedgerSummary(
+      state,
+      action: PayloadAction<UserLedgerTransactionTypesSummary>,
+    ) {
+      state.userLedgerSummary = action.payload;
+    },
+
+    setUserLedgerTxs(
+      state,
+      action: PayloadAction<UserLedgerTransactionsResponseTransactionsInner[]>,
+    ) {
+      // We're not appending the transaction details, it's only going
+      // to reassign the current page of Transactions.
+      state.userLedgerTxs = action.payload;
+    },
+
+    setTxPagination(state, action: PayloadAction<PaginationState>) {
+      state.txPagination = action.payload;
+    },
+
+    setTxTotalItems(state, action: PayloadAction<number>) {
+      state.txTotalItems = action.payload;
+    },
+
+    setTxTotalPages(state, action: PayloadAction<number>) {
+      state.txTotalPages = action.payload;
+    },
+  },
+});
 
 export const {
-    setProductUserID,
-    setAssignmentID,
-    setTurkSubmitTo,
-    setLOI,
-    setAvailabilityCount,
-    setAttemptedLiveEligibleCount,
-    setOfferwallReasons,
-    setCurrentBuckets,
-    setEnteredTimestamp,
-    setTaskStatus,
-
-    setUserWalletBalance,
-
-    setUserLedgerSummary,
-    setUserLedgerTxs,
-
-    setTxPagination,
-    setTxTotalItems,
-    setTxTotalPages
+  setProductUserID,
+  setAssignmentID,
+  setTurkSubmitTo,
+  setLOI,
+  setAvailabilityCount,
+  setAttemptedLiveEligibleCount,
+  setOfferwallReasons,
+  setCurrentBuckets,
+  setEnteredTimestamp,
+  setTaskStatus,
+
+  setUserWalletBalance,
+
+  setUserLedgerSummary,
+  setUserLedgerTxs,
+
+  setTxPagination,
+  setTxTotalItems,
+  setTxTotalPages,
 } = appSlice.actions;
 
-export default appSlice.reducer
+export default appSlice.reducer;
 
 export const getLOIText = createSelector(
-    [(state: RootState) => state.app],
-    (app_config): string => {
-
-        const lookup: Record<number, string> = {
-            600: "ten",
-            1200: "twenty",
-            1800: "thirty",
-        };
-
-        return lookup[app_config.loi] || " – ";
-    }
+  [(state: RootState) => state.app],
+  (app_config): string => {
+    const lookup: Record<number, string> = {
+      600: "ten",
+      1200: "twenty",
+      1800: "thirty",
+    };
+
+    return lookup[app_config.loi] || " – ";
+  },
 );
 
 export const getAvailabilityCount = createSelector(
-    [(state: RootState) => state.app],
-    (app_config): number | undefined => {
-        return app_config.availability_count;
-    }
+  [(state: RootState) => state.app],
+  (app_config): number | undefined => {
+    return app_config.availability_count;
+  },
 );
 
 export const isLowBalance = createSelector(
-    [(state: RootState) => state.app],
-    (app_config): boolean => {
-        const bal_amt = app_config.userWalletBalance?.amount ?? 0
-        return bal_amt <= -90;
-    }
+  [(state: RootState) => state.app],
+  (app_config): boolean => {
+    const bal_amt = app_config.userWalletBalance?.amount ?? 0;
+    return bal_amt <= -90;
+  },
 );
 
-
 export const selectBucket = createSelector(
-    [
-        (state: RootState) => state.app.currentBuckets,
-    ],
-    (buckets): TopNPlusBucket | null => {
-        if (buckets && buckets.length >= 1) {
-            return buckets[0]
-        }
-        return null;
+  [(state: RootState) => state.app.currentBuckets],
+  (buckets): TopNPlusBucket | null => {
+    if (buckets && buckets.length >= 1) {
+      return buckets[0];
     }
+    return null;
+  },
 );
 
 export const getSurveyURL = createSelector(
-    [selectBucket],
-    (bucket): string | null => {
-        return bucket?.uri || null;
-    }
-);
\ No newline at end of file
+  [selectBucket],
+  (bucket): string | null => {
+    return bucket?.uri || null;
+  },
+);
diff --git a/jb-ui/src/models/grlEventsSlice.ts b/jb-ui/src/models/grlEventsSlice.ts
index 912c4ca..681c22e 100644
--- a/jb-ui/src/models/grlEventsSlice.ts
+++ b/jb-ui/src/models/grlEventsSlice.ts
@@ -1,58 +1,56 @@
 import { EventEnvelope } from "@/api_fsb";
 import { RootState } from "@/store";
-import { createEntityAdapter, createSelector, createSlice } from '@reduxjs/toolkit';
+import {
+  createEntityAdapter,
+  createSelector,
+  createSlice,
+} from "@reduxjs/toolkit";
 
 const eventAdapter = createEntityAdapter({
-    selectId: (model: EventEnvelope) => model.event_uuid!,
-    sortComparer: (a, b) => {
-        // ASC by timestamp
-        return a.timestamp!.localeCompare(b.timestamp!);
-    },
+  selectId: (model: EventEnvelope) => model.event_uuid!,
+  sortComparer: (a, b) => {
+    // ASC by timestamp
+    return a.timestamp!.localeCompare(b.timestamp!);
+  },
 });
 
-
 const grlEventsSlice = createSlice({
-    name: 'grlEvents',
-    initialState: eventAdapter.getInitialState(),
-
-    reducers: {
-        addEvent: eventAdapter.addOne,
-        addEvents: eventAdapter.addMany,
-        upsertEvent: eventAdapter.upsertOne,  // Add or Update
-
-    }
-})
-
-
-export const {
-    addEvent, addEvents, upsertEvent
-} = grlEventsSlice.actions;
+  name: "grlEvents",
+  initialState: eventAdapter.getInitialState(),
+
+  reducers: {
+    addEvent: eventAdapter.addOne,
+    addEvents: eventAdapter.addMany,
+    upsertEvent: eventAdapter.upsertOne, // Add or Update
+  },
+});
 
+export const { addEvent, addEvents, upsertEvent } = grlEventsSlice.actions;
 
 export const eventSelectors = eventAdapter.getSelectors(
-    (state: RootState) => state.events
+  (state: RootState) => state.events,
 );
 
-export const selectAllEvents = (state: RootState): EventEnvelope[] => eventSelectors.selectAll(state);
-
-const BASE_SPEED = 40;  // px/sec at idle
-const MAX_SPEED = 380;  // px/sec at surge
+export const selectAllEvents = (state: RootState): EventEnvelope[] =>
+  eventSelectors.selectAll(state);
 
-const RATE_WINDOW_MS = 10_000;  // ms window to measure message frequency
-const RATE_TO_SPEED = 55;  // px/sec added per msg/sec
+const BASE_SPEED = 40; // px/sec at idle
+const MAX_SPEED = 380; // px/sec at surge
 
+const RATE_WINDOW_MS = 10_000; // ms window to measure message frequency
+const RATE_TO_SPEED = 55; // px/sec added per msg/sec
 
-// --- Speed: derived from arrival rate of recent items --- 
+// --- Speed: derived from arrival rate of recent items ---
 export const selectCurrentSpeed = createSelector(selectAllEvents, (items) => {
-    const now = Date.now();
+  const now = Date.now();
 
-    const recentCount = items.filter((m) => {
-        const ts = new Date(m.timestamp!).getTime();
-        return now - ts < RATE_WINDOW_MS;
-    }).length;
+  const recentCount = items.filter((m) => {
+    const ts = new Date(m.timestamp!).getTime();
+    return now - ts < RATE_WINDOW_MS;
+  }).length;
 
-    const rate = recentCount / (RATE_WINDOW_MS / 1_000);  // msgs/sec
-    return Math.min(BASE_SPEED + rate * RATE_TO_SPEED, MAX_SPEED);
+  const rate = recentCount / (RATE_WINDOW_MS / 1_000); // msgs/sec
+  return Math.min(BASE_SPEED + rate * RATE_TO_SPEED, MAX_SPEED);
 });
 
-export default grlEventsSlice.reducer
+export default grlEventsSlice.reducer;
diff --git a/jb-ui/src/models/grlStatsSlice.ts b/jb-ui/src/models/grlStatsSlice.ts
index 9385256..004d321 100644
--- a/jb-ui/src/models/grlStatsSlice.ts
+++ b/jb-ui/src/models/grlStatsSlice.ts
@@ -1,54 +1,47 @@
 import { StatsSnapshot } from "@/api_fsb";
 import { RootState } from "@/store";
-import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-
-const initialState: StatsSnapshot[] = []
+const initialState: StatsSnapshot[] = [];
 
 const grlStatsSlice = createSlice({
-    name: 'grlStats',
-    initialState,
-    reducers: {
-
-        addStatsData(state, action: PayloadAction<StatsSnapshot>) {
-            state.push(action.payload);
-        }
-    }
-})
-
-export const {
-    addStatsData
-} = grlStatsSlice.actions;
-export default grlStatsSlice.reducer
-
+  name: "grlStats",
+  initialState,
+  reducers: {
+    addStatsData(state, action: PayloadAction<StatsSnapshot>) {
+      state.push(action.payload);
+    },
+  },
+});
+
+export const { addStatsData } = grlStatsSlice.actions;
+export default grlStatsSlice.reducer;
 
 export const selectRecentStats = createSelector(
-    [
-        (state: RootState) => state.stats,
-    ],
-    (stats): StatsSnapshot | null => {
-        const lastStat = stats[stats.length - 1];
-        return lastStat ?? null;
-    }
+  [(state: RootState) => state.stats],
+  (stats): StatsSnapshot | null => {
+    const lastStat = stats[stats.length - 1];
+    return lastStat ?? null;
+  },
 );
 
 export const activeUsers = createSelector(
-    [selectRecentStats],
-    (recentStats): number | null => {
-        return recentStats?.active_users_last_24h ?? null;
-    }
+  [selectRecentStats],
+  (recentStats): number | null => {
+    return recentStats?.active_users_last_24h ?? null;
+  },
 );
 
 export const activeSurveys = createSelector(
-    [selectRecentStats],
-    (recentStats): number | null => {
-        return recentStats?.live_task_count?.total ?? null;
-    }
+  [selectRecentStats],
+  (recentStats): number | null => {
+    return recentStats?.live_task_count?.total ?? null;
+  },
 );
 
 export const maxPayout = createSelector(
-    [selectRecentStats],
-    (recentStats): number | null => {
-        return recentStats?.live_tasks_max_payout?.value ?? null;
-    }
+  [selectRecentStats],
+  (recentStats): number | null => {
+    return recentStats?.live_tasks_max_payout?.value ?? null;
+  },
 );
diff --git a/jb-ui/src/models/profilingQuestionsSlice.ts b/jb-ui/src/models/profilingQuestionsSlice.ts
index cc36f17..577566f 100644
--- a/jb-ui/src/models/profilingQuestionsSlice.ts
+++ b/jb-ui/src/models/profilingQuestionsSlice.ts
@@ -1,313 +1,327 @@
 import {
-    BodySubmitProfilingQuestionsProductIdProfilingQuestionsPost,
-    ProfilingQuestionsApi,
-    StatusResponse,
-    UpkQuestion, UserQuestionAnswerIn
+  BodySubmitProfilingQuestionsProductIdProfilingQuestionsPost,
+  ProfilingQuestionsApi,
+  StatusResponse,
+  UpkQuestion,
+  UserQuestionAnswerIn,
 } from "@/api_fsb";
 import { assert, bpid } from "@/lib/utils";
 import { questionUtils } from "@/models/profilingUtils";
-import type { RootState } from '@/store';
+import type { RootState } from "@/store";
 import {
-    createAsyncThunk,
-    createEntityAdapter, createSlice,
-    PayloadAction,
-    WritableDraft
-} from '@reduxjs/toolkit';
+  createAsyncThunk,
+  createEntityAdapter,
+  createSlice,
+  PayloadAction,
+  WritableDraft,
+} from "@reduxjs/toolkit";
 
 interface UpkQuestionMetadata {
-    // The data we need to conduct profiling questions and manager user
-    // submission along with the User Interfaces
+  // The data we need to conduct profiling questions and manager user
+  // submission along with the User Interfaces
 
-    // Only one Question can be active at a time, which is the one 
-    // being shown to the Respondent
-    isActive: boolean;
+  // Only one Question can be active at a time, which is the one
+  // being shown to the Respondent
+  isActive: boolean;
 
-    answers: string[];
+  answers: string[];
 
-    // If it's actively being submitted to the server
-    isProcessing: boolean;
+  // If it's actively being submitted to the server
+  isProcessing: boolean;
 
-    // If we recieved a successful response from the server after submitting
-    isSaved: boolean;
+  // If we recieved a successful response from the server after submitting
+  isSaved: boolean;
 }
 
 interface ValidationResult {
-    // If isValid or isComplete are undefined, that means the question 
-    // hasn't been validated yet. This is different from false, which means 
-    // it has been validated and is not valid.
-    isValid?: boolean;
-    isComplete?: boolean;
-    errors: ValidationError[];
-};
+  // If isValid or isComplete are undefined, that means the question
+  // hasn't been validated yet. This is different from false, which means
+  // it has been validated and is not valid.
+  isValid?: boolean;
+  isComplete?: boolean;
+  errors: ValidationError[];
+}
 
 export interface ValidationError {
-    path: string;  // e.g., "user.email"
-    message: string;
-    severity: 'error' | 'warning';
-};
+  path: string; // e.g., "user.email"
+  message: string;
+  severity: "error" | "warning";
+}
 
 export interface ProfileQuestion extends UpkQuestion {
-    _metadata: UpkQuestionMetadata;
-    _validation: ValidationResult;
+  _metadata: UpkQuestionMetadata;
+  _validation: ValidationResult;
 }
 
 // Entity adapter for normalized storage
 const questionsAdapter = createEntityAdapter({
-    selectId: (model: ProfileQuestion) => model.question_id!,
-    sortComparer: (a, b) => {
-        return (b.importance?.task_score ?? 0) - (a.importance?.task_score ?? 0);
-    },
+  selectId: (model: ProfileQuestion) => model.question_id!,
+  sortComparer: (a, b) => {
+    return (b.importance?.task_score ?? 0) - (a.importance?.task_score ?? 0);
+  },
 });
 
-
 function getDefaultMetadata(): UpkQuestionMetadata {
-    return {
-        isActive: false,
-        answers: [],
-        isProcessing: false,
-        isSaved: false,
-    };
+  return {
+    isActive: false,
+    answers: [],
+    isProcessing: false,
+    isSaved: false,
+  };
 }
 
 function getDefaultValidation(): ValidationResult {
-
-    return {
-        isValid: undefined,
-        isComplete: undefined,
-        errors: [],
-    };
+  return {
+    isValid: undefined,
+    isComplete: undefined,
+    errors: [],
+  };
 }
 
 // Create the async thunk (outside your slice)
 export const saveAnswer = createAsyncThunk(
-    'profilingQuestions/saveAnswer',
-    async ({ questionId, bpuid }: { questionId: string; bpuid: string }, { getState, dispatch }) => {
-        const state = getState() as RootState;
-        const question = state.profilingQuestions.entities[questionId];
-
-        // Validations
-        const answers = {
-            'question_id': question.question_id!,
-            'answer': question._metadata.answers
-        } as UserQuestionAnswerIn;
-
-        const answers_body = {
-            'answers': [answers]
-        } as BodySubmitProfilingQuestionsProductIdProfilingQuestionsPost;
-
-        // Make API call
-        const res = await new ProfilingQuestionsApi()
-            .submitProfilingQuestionsProductIdProfilingQuestionsPost(
-                bpid,
-                bpuid,
-                answers_body,
-                undefined,
-                true
-            );
-
-        const response = res.data as StatusResponse;
-
-        // Check if we need to fetch new questions BEFORE returning
-        if (response.status === "success" && isFirstNonGR(state.profilingQuestions)) {
-            // NOW dispatch it
-            dispatch(fetchNewQuestions(bpuid));
-        }
-
-        return { questionId, response };
-
+  "profilingQuestions/saveAnswer",
+  async (
+    { questionId, bpuid }: { questionId: string; bpuid: string },
+    { getState, dispatch },
+  ) => {
+    const state = getState() as RootState;
+    const question = state.profilingQuestions.entities[questionId];
+
+    // Validations
+    const answers = {
+      question_id: question.question_id!,
+      answer: question._metadata.answers,
+    } as UserQuestionAnswerIn;
+
+    const answers_body = {
+      answers: [answers],
+    } as BodySubmitProfilingQuestionsProductIdProfilingQuestionsPost;
+
+    // Make API call
+    const res =
+      await new ProfilingQuestionsApi().submitProfilingQuestionsProductIdProfilingQuestionsPost(
+        bpid,
+        bpuid,
+        answers_body,
+        undefined,
+        true,
+      );
+
+    const response = res.data as StatusResponse;
+
+    // Check if we need to fetch new questions BEFORE returning
+    if (
+      response.status === "success" &&
+      isFirstNonGR(state.profilingQuestions)
+    ) {
+      // NOW dispatch it
+      dispatch(fetchNewQuestions(bpuid));
     }
-)
 
-export const fetchNewQuestions = createAsyncThunk(
-    'profilingQuestions/fetchNewQuestions',
-    async (bpuid: string) => {
-
-        console.log("profilingQuestions/fetchNewQuestions")
-        const res = await new ProfilingQuestionsApi()
-            .getProfilingQuestionsProductIdProfilingQuestionsGet(
-                bpid,
-                bpuid,
-                undefined, // "104.9.125.144", // ip
-                undefined, // countryIso
-                undefined, // languageIso
-                2_500
-            );
-        return res.data.questions;
-    }
+    return { questionId, response };
+  },
 );
 
-type ProfilingQuestionsState = ReturnType<typeof profilingQuestionSlice.getInitialState>;
+export const fetchNewQuestions = createAsyncThunk(
+  "profilingQuestions/fetchNewQuestions",
+  async (bpuid: string) => {
+    console.log("profilingQuestions/fetchNewQuestions");
+    const res =
+      await new ProfilingQuestionsApi().getProfilingQuestionsProductIdProfilingQuestionsGet(
+        bpid,
+        bpuid,
+        undefined, // "104.9.125.144", // ip
+        undefined, // countryIso
+        undefined, // languageIso
+        2_500,
+      );
+    return res.data.questions;
+  },
+);
 
+type ProfilingQuestionsState = ReturnType<
+  typeof profilingQuestionSlice.getInitialState
+>;
 
 // Helper function that contains the logic (outside the slice)
 function goToNextQuestionLogic(state: WritableDraft<ProfilingQuestionsState>) {
-    const allQuestions = questionsAdapter.getSelectors().selectAll(state);
-    const currentIndex = allQuestions.findIndex(q => q._metadata.isActive);
-
-    if (currentIndex === -1) return;
-
-    const totalQuestions = allQuestions.length;
-    let searchIndex = (currentIndex + 1) % totalQuestions;
-    let iterations = 0;
-
-    while (iterations < totalQuestions) {
-        if (!allQuestions[searchIndex]._metadata.isSaved) {
-            questionsAdapter.updateMany(state, [
-                {
-                    id: allQuestions[currentIndex].question_id!,
-                    changes: {
-                        _metadata: {
-                            ...allQuestions[currentIndex]._metadata,
-                            isActive: false
-                        }
-                    }
-                },
-                {
-                    id: allQuestions[searchIndex].question_id!,
-                    changes: {
-                        _metadata: {
-                            ...allQuestions[searchIndex]._metadata,
-                            isActive: true
-                        }
-                    }
-                }
-            ]);
-            return;
-        }
-
-        searchIndex = (searchIndex + 1) % totalQuestions;
-        iterations++;
+  const allQuestions = questionsAdapter.getSelectors().selectAll(state);
+  const currentIndex = allQuestions.findIndex((q) => q._metadata.isActive);
+
+  if (currentIndex === -1) return;
+
+  const totalQuestions = allQuestions.length;
+  let searchIndex = (currentIndex + 1) % totalQuestions;
+  let iterations = 0;
+
+  while (iterations < totalQuestions) {
+    if (!allQuestions[searchIndex]._metadata.isSaved) {
+      questionsAdapter.updateMany(state, [
+        {
+          id: allQuestions[currentIndex].question_id!,
+          changes: {
+            _metadata: {
+              ...allQuestions[currentIndex]._metadata,
+              isActive: false,
+            },
+          },
+        },
+        {
+          id: allQuestions[searchIndex].question_id!,
+          changes: {
+            _metadata: {
+              ...allQuestions[searchIndex]._metadata,
+              isActive: true,
+            },
+          },
+        },
+      ]);
+      return;
     }
+
+    searchIndex = (searchIndex + 1) % totalQuestions;
+    iterations++;
+  }
 }
 
 function setProfilingQuestionsLogic(
-    state: WritableDraft<ProfilingQuestionsState>,
-    questions: ProfileQuestion[]) {
-
-    const hasActiveQuestion = Object.values(state.entities).some(
-        entity => entity?._metadata.isActive
-    );
-
-    const entities = questions.map((serverQuestion, index) => {
-        const existing = state.entities[serverQuestion.question_id!];
-        const shouldActivate = !hasActiveQuestion && index === 0;
-
-        return {
-            ...serverQuestion,
-            _metadata: existing?._metadata || {
-                ...getDefaultMetadata(),
-                isActive: shouldActivate,
-            },
-            _validation: existing?._validation || getDefaultValidation(),
-        };
-    });
+  state: WritableDraft<ProfilingQuestionsState>,
+  questions: ProfileQuestion[],
+) {
+  const hasActiveQuestion = Object.values(state.entities).some(
+    (entity) => entity?._metadata.isActive,
+  );
 
-    questionsAdapter.setAll(state, entities);
-}
+  const entities = questions.map((serverQuestion, index) => {
+    const existing = state.entities[serverQuestion.question_id!];
+    const shouldActivate = !hasActiveQuestion && index === 0;
 
+    return {
+      ...serverQuestion,
+      _metadata: existing?._metadata || {
+        ...getDefaultMetadata(),
+        isActive: shouldActivate,
+      },
+      _validation: existing?._validation || getDefaultValidation(),
+    };
+  });
+
+  questionsAdapter.setAll(state, entities);
+}
 
 function isGR(ext_question_id: string): boolean {
-    return ext_question_id.startsWith("gr:")
+  return ext_question_id.startsWith("gr:");
 }
 
 function isFirstNonGR(state: WritableDraft<ProfilingQuestionsState>): boolean {
-    // We want to identify if the next question is the first non-GR question 
-    // because will want to trigger a full profile question refresh.
+  // We want to identify if the next question is the first non-GR question
+  // because will want to trigger a full profile question refresh.
 
-    const allQuestions = questionsAdapter.getSelectors().selectAll(state);
-    const currentIndex = allQuestions.findIndex(q => q._metadata.isActive);
+  const allQuestions = questionsAdapter.getSelectors().selectAll(state);
+  const currentIndex = allQuestions.findIndex((q) => q._metadata.isActive);
 
-    if (currentIndex === -1) false;
+  if (currentIndex === -1) false;
 
-    const totalQuestions = allQuestions.length;
-    let searchIndex = (currentIndex + 1) % totalQuestions;
-    let iterations = 0;
+  const totalQuestions = allQuestions.length;
+  let searchIndex = (currentIndex + 1) % totalQuestions;
+  let iterations = 0;
 
-    while (iterations < totalQuestions) {
-        if (!allQuestions[searchIndex]._metadata.isSaved) {
+  while (iterations < totalQuestions) {
+    if (!allQuestions[searchIndex]._metadata.isSaved) {
+      const current = isGR(allQuestions[currentIndex].ext_question_id!);
+      const next = isGR(allQuestions[searchIndex].ext_question_id!);
 
-            const current = isGR(allQuestions[currentIndex].ext_question_id!)
-            const next = isGR(allQuestions[searchIndex].ext_question_id!)
-
-            // We want to identify transitions from GR to non-GR questions,
-            // as we use GR questions to pre-calculate some non-GR questions,
-            // we should force a refresh.
-            return current && !next;
-        }
-
-        searchIndex = (searchIndex + 1) % totalQuestions;
-        iterations++;
+      // We want to identify transitions from GR to non-GR questions,
+      // as we use GR questions to pre-calculate some non-GR questions,
+      // we should force a refresh.
+      return current && !next;
     }
 
-    return false;
+    searchIndex = (searchIndex + 1) % totalQuestions;
+    iterations++;
+  }
+
+  return false;
 }
 
 const profilingQuestionSlice = createSlice({
-    name: 'profilingQuestions',
-    initialState: questionsAdapter.getInitialState(),
-    reducers: {
+  name: "profilingQuestions",
+  initialState: questionsAdapter.getInitialState(),
+  reducers: {
+    setProfilingQuestions: (
+      state,
+      action: PayloadAction<ProfileQuestion[]>,
+    ) => {
+      setProfilingQuestionsLogic(state, action.payload);
+    },
 
-        setProfilingQuestions: (state, action: PayloadAction<ProfileQuestion[]>) => {
-            setProfilingQuestionsLogic(state, action.payload);
-        },
+    metadataUpdated: (
+      state,
+      action: PayloadAction<{
+        question_id: string;
+        metadata: Partial<UpkQuestionMetadata>;
+      }>,
+    ) => {
+      const { question_id, metadata } = action.payload;
+      const entity = state.entities[question_id];
+      if (entity) {
+        entity._metadata = { ...entity._metadata, ...metadata };
+      }
+    },
 
-        metadataUpdated: (
-            state,
-            action: PayloadAction<{ question_id: string; metadata: Partial<UpkQuestionMetadata> }>
-        ) => {
-            const { question_id, metadata } = action.payload;
-            const entity = state.entities[question_id];
-            if (entity) {
-                entity._metadata = { ...entity._metadata, ...metadata };
-            }
-        },
+    validationUpdated: (
+      state,
+      action: PayloadAction<{
+        question_id: string;
+        validation: Partial<ValidationResult>;
+      }>,
+    ) => {
+      const { question_id, validation } = action.payload;
+      const entity = state.entities[question_id];
+      if (entity) {
+        entity._validation = { ...entity._validation, ...validation };
+      }
+    },
 
-        validationUpdated: (
-            state,
-            action: PayloadAction<{ question_id: string; validation: Partial<ValidationResult> }>
-        ) => {
-            const { question_id, validation } = action.payload;
-            const entity = state.entities[question_id];
-            if (entity) {
-                entity._validation = { ...entity._validation, ...validation };
-            }
-        },
+    // Set one question as active, deactivate all others
+    setActiveQuestion: (state, action: PayloadAction<string>) => {
+      const questionId = action.payload;
 
-        // Set one question as active, deactivate all others
-        setActiveQuestion: (state, action: PayloadAction<string>) => {
-            const questionId = action.payload;
-
-            // Deactivate all questions
-            Object.values(state.entities).forEach(entity => {
-                if (entity) {
-                    entity._metadata.isActive = false;
-                }
-            });
-
-            // Activate the selected one
-            const entity = state.entities[questionId];
-            if (entity) {
-                entity._metadata.isActive = true;
-            }
-        },
+      // Deactivate all questions
+      Object.values(state.entities).forEach((entity) => {
+        if (entity) {
+          entity._metadata.isActive = false;
+        }
+      });
 
-        // Clear active state from all questions
-        clearActiveQuestion: (state) => {
-            Object.values(state.entities).forEach(entity => {
-                if (entity) {
-                    entity._metadata.isActive = false;
-                }
-            });
-        },
+      // Activate the selected one
+      const entity = state.entities[questionId];
+      if (entity) {
+        entity._metadata.isActive = true;
+      }
+    },
 
-        goToNextQuestion: (state) => {
-            goToNextQuestionLogic(state);
-        },
+    // Clear active state from all questions
+    clearActiveQuestion: (state) => {
+      Object.values(state.entities).forEach((entity) => {
+        if (entity) {
+          entity._metadata.isActive = false;
+        }
+      });
+    },
+
+    goToNextQuestion: (state) => {
+      goToNextQuestionLogic(state);
+    },
 
-        // -----------------------
+    // -----------------------
 
-        addAnswers(state, action: PayloadAction<{ questionId: string, answers: string[] }>) {
-            /* When changing the answers in anyway, we want to:
+    addAnswers(
+      state,
+      action: PayloadAction<{ questionId: string; answers: string[] }>,
+    ) {
+      /* When changing the answers in anyway, we want to:
                 1. Add the new answers to the question metadata
 
                         This does not perform validation, it simply reassigns 
@@ -325,112 +339,124 @@ const profilingQuestionSlice = createSlice({
                 3. Re-calculate the isComplete and isValid state 
             */
 
-            // let new_question = questionUtils.addAnswer(action.payload.question, action.payload.answers)
-            let entity = state.entities[action.payload.questionId];
-            const newMetadata = { ...entity._metadata, answers: action.payload.answers };
+      // let new_question = questionUtils.addAnswer(action.payload.question, action.payload.answers)
+      let entity = state.entities[action.payload.questionId];
+      const newMetadata = {
+        ...entity._metadata,
+        answers: action.payload.answers,
+      };
 
-            if (entity) {
-                entity._metadata = newMetadata;
+      if (entity) {
+        entity._metadata = newMetadata;
 
-                entity = questionUtils.validate(entity)
-                entity = questionUtils.assignValidationState(entity)
+        entity = questionUtils.validate(entity);
+        entity = questionUtils.assignValidationState(entity);
 
-                state.entities[action.payload.questionId] = entity
-            }
-        },
+        state.entities[action.payload.questionId] = entity;
+      }
     },
-
-    extraReducers: (builder) => {
-        builder
-            .addCase(saveAnswer.pending, (state, action) => {
-                const questionId = action.meta.arg.questionId;
-                const bpuid = action.meta.arg.bpuid;
-                assert(bpuid, "Worker must be defined");
-
-                const question = state.entities[questionId];
-                if (question) {
-                    assert(question._validation.isComplete, "Must submit Completed Questions");
-                    assert(!question._metadata.isProcessing, "Can't submit processing Answer");
-                    assert(!question._metadata.isSaved, "Can't submit completed Answer");
-                    question._metadata.isProcessing = true;
-                }
-            })
-            .addCase(saveAnswer.fulfilled, (state, action) => {
-                const { questionId, response } = action.payload;
-                const question = state.entities[questionId];
-
-                if (question) {
-                    question._metadata.isProcessing = false;
-                    if (response.status === "success") {
-                        question._metadata.isSaved = true;
-
-                        // fetchNewQuestions is already being dispatched from 
-                        // the THUNK
-                        goToNextQuestionLogic(state);
-
-                    } else {
-                        question._metadata.isSaved = false;
-                    }
-                }
-            })
-            .addCase(saveAnswer.rejected, (state, action) => {
-                const questionId = action.meta.arg.questionId;
-                const question = state.entities[questionId];
-
-                if (question) {
-                    question._metadata.isProcessing = false;
-                    question._metadata.isSaved = false;
-                }
-            })
-            .addCase(fetchNewQuestions.fulfilled, (state, action) => {
-                console.log(".addCase(fetchNewQuestions.fulfilled, (state, action) => {")
-                setProfilingQuestionsLogic(state, action.payload as ProfileQuestion[]);
-            });
-        ;
-    }
-
-})
+  },
+
+  extraReducers: (builder) => {
+    builder
+      .addCase(saveAnswer.pending, (state, action) => {
+        const questionId = action.meta.arg.questionId;
+        const bpuid = action.meta.arg.bpuid;
+        assert(bpuid, "Worker must be defined");
+
+        const question = state.entities[questionId];
+        if (question) {
+          assert(
+            question._validation.isComplete,
+            "Must submit Completed Questions",
+          );
+          assert(
+            !question._metadata.isProcessing,
+            "Can't submit processing Answer",
+          );
+          assert(!question._metadata.isSaved, "Can't submit completed Answer");
+          question._metadata.isProcessing = true;
+        }
+      })
+      .addCase(saveAnswer.fulfilled, (state, action) => {
+        const { questionId, response } = action.payload;
+        const question = state.entities[questionId];
+
+        if (question) {
+          question._metadata.isProcessing = false;
+          if (response.status === "success") {
+            question._metadata.isSaved = true;
+
+            // fetchNewQuestions is already being dispatched from
+            // the THUNK
+            goToNextQuestionLogic(state);
+          } else {
+            question._metadata.isSaved = false;
+          }
+        }
+      })
+      .addCase(saveAnswer.rejected, (state, action) => {
+        const questionId = action.meta.arg.questionId;
+        const question = state.entities[questionId];
+
+        if (question) {
+          question._metadata.isProcessing = false;
+          question._metadata.isSaved = false;
+        }
+      })
+      .addCase(fetchNewQuestions.fulfilled, (state, action) => {
+        console.log(
+          ".addCase(fetchNewQuestions.fulfilled, (state, action) => {",
+        );
+        setProfilingQuestionsLogic(state, action.payload as ProfileQuestion[]);
+      });
+  },
+});
 
 export const {
-    setProfilingQuestions,
-    metadataUpdated,
-    setActiveQuestion,
-    goToNextQuestion,
-    addAnswers,
+  setProfilingQuestions,
+  metadataUpdated,
+  setActiveQuestion,
+  goToNextQuestion,
+  addAnswers,
 } = profilingQuestionSlice.actions;
 
 // Selectors
 export const questionsSelectors = questionsAdapter.getSelectors(
-    (state: RootState) => state.profilingQuestions
+  (state: RootState) => state.profilingQuestions,
 );
 
 // Custom selector to get the active question
 export const selectAllQuestions = (state: RootState): ProfileQuestion[] => {
-    return questionsSelectors.selectAll(state) ?? [];
+  return questionsSelectors.selectAll(state) ?? [];
 };
 
 // Custom selector to get the active question
-export const selectActiveQuestion = (state: RootState): ProfileQuestion | null => {
-    const allQuestions = questionsSelectors.selectAll(state);
-    return allQuestions.find(q => q._metadata.isActive) || null;
+export const selectActiveQuestion = (
+  state: RootState,
+): ProfileQuestion | null => {
+  const allQuestions = questionsSelectors.selectAll(state);
+  return allQuestions.find((q) => q._metadata.isActive) || null;
 };
 
 // Custom selector to get active question ID
 export const selectActiveQuestionId = (state: RootState): string | null => {
-    const activeQuestion = selectActiveQuestion(state);
-    return activeQuestion?.question_id || null;
+  const activeQuestion = selectActiveQuestion(state);
+  return activeQuestion?.question_id || null;
 };
 
-export const selectActiveQuestionMetadata = (state: RootState): UpkQuestionMetadata | null => {
-    const activeQuestion = selectActiveQuestion(state);
-    return activeQuestion?._metadata || null;
+export const selectActiveQuestionMetadata = (
+  state: RootState,
+): UpkQuestionMetadata | null => {
+  const activeQuestion = selectActiveQuestion(state);
+  return activeQuestion?._metadata || null;
 };
 
-export const selectActiveQuestionValidation = (state: RootState): ValidationResult | null => {
-    const activeQuestion = selectActiveQuestion(state);
-    return activeQuestion?._validation || null;
+export const selectActiveQuestionValidation = (
+  state: RootState,
+): ValidationResult | null => {
+  const activeQuestion = selectActiveQuestion(state);
+  return activeQuestion?._validation || null;
 };
 
-
-export default profilingQuestionSlice.reducer
-
+export default profilingQuestionSlice.reducer;
diff --git a/jb-ui/src/models/profilingUtils.ts b/jb-ui/src/models/profilingUtils.ts
index 104a5bb..a3ef7d2 100644
--- a/jb-ui/src/models/profilingUtils.ts
+++ b/jb-ui/src/models/profilingUtils.ts
@@ -1,29 +1,36 @@
-import { PatternValidation, UpkQuestionConfigurationMC, UpkQuestionConfigurationTE } from "@/api_fsb";
+import {
+  PatternValidation,
+  UpkQuestionConfigurationMC,
+  UpkQuestionConfigurationTE,
+} from "@/api_fsb";
 import { assert } from "@/lib/utils";
-import { ProfileQuestion, ValidationError } from '@/models/profilingQuestionsSlice';
-import { Filter } from 'bad-words';
+import {
+  ProfileQuestion,
+  ValidationError,
+} from "@/models/profilingQuestionsSlice";
+import { Filter } from "bad-words";
 
 const filter = new Filter();
 
 export const questionUtils = {
-
-    assignValidationState: (question: ProfileQuestion): ProfileQuestion => {
-        /*  This function performs validation on the question's current answers and 
+  assignValidationState: (question: ProfileQuestion): ProfileQuestion => {
+    /*  This function performs validation on the question's current answers and 
             assigns any error messages to question._metadata.error_msg. 
 
             If the question is MC, validate:
         */
 
-        const errors = question._validation.errors ?? []
+    const errors = question._validation.errors ?? [];
 
-        question._validation.isComplete = errors.length === 0
-        question._validation.isValid = errors.filter(e => e.severity === 'error').length === 0
+    question._validation.isComplete = errors.length === 0;
+    question._validation.isValid =
+      errors.filter((e) => e.severity === "error").length === 0;
 
-        return question;
-    },
+    return question;
+  },
 
-    validate: (question: ProfileQuestion): ProfileQuestion => {
-        /*  If the question is MC, validate:
+  validate: (question: ProfileQuestion): ProfileQuestion => {
+    /*  If the question is MC, validate:
             
             - validate selector SA vs MA (1 selected vs >1 selected)
             - the answers match actual codes in the choices
@@ -35,121 +42,132 @@ export const questionUtils = {
             - validation.patterns
         */
 
-        assert(question.question_id, "Question must have question_id")
-        // assert(question.configuration, "Question must have configuration")
-        const answers = question._metadata.answers ?? []
-
-        // Declare it here, and they we'll reassign any specific
-        // configuration types based on the question type.
-
-        // Start fresh without any error messages before validating
-        const errors: ValidationError[] = []
-
-        switch (question.question_type) {
-            case "TE":
-
-                answers.length === 0 && errors.push({
-                    path: `question_id:${question.question_id}`,
-                    message: "No answer provided",
-                    severity: "warning",
-                } as ValidationError)
-
-                answers.length > 1 && errors.push({
-                    path: `question_id:${question.question_id}`,
-                    message: "Only one answer allowed",
-                    severity: "error",
-                } as ValidationError)
-
-                let answer_text: string = answers[0]
-
-                const te_config = question.configuration as UpkQuestionConfigurationTE
-                const min_length = te_config.min_length ?? 0
-                const max_length = te_config.max_length ?? 100_000
-
-                answer_text.length < min_length && errors.push({
-                    path: `question_id:${question.question_id}`,
-                    message: "Answer shorter than allowed",
-                    severity: "warning",
-                } as ValidationError)
-
-                answer_text.length > max_length && errors.push({
-                    path: `question_id:${question.question_id}`,
-                    message: "Answer longer than allowed",
-                    severity: "error",
-                } as ValidationError)
-
-                filter.isProfane(answer_text) && errors.push({
-                    path: `question_id:${question.question_id}`,
-                    message: "Answer has inappropriate content",
-                    severity: "error",
-                } as ValidationError)
-
-                const patterns: PatternValidation[] = (question.validation ?? {})["patterns"] ?? []
-                patterns.forEach((pv) => {
-                    let re = new RegExp(pv.pattern)
-                    answer_text.search(re) == -1 && errors.push({
-                        path: `question_id:${question.question_id}`,
-                        message: pv.message,
-                        severity: "error",
-                    } as ValidationError)
-
-                })
-
-                break;
-
-            case "MC":
-
-                answers.length === 0 && errors.push({
-                    path: `question_id:${question.question_id}`,
-                    message: "Multiple Choice question with no selected answers",
-                    severity: "warning",
-                } as ValidationError)
-
-                const choice_codes: string[] = question.choices?.map((c) => c.choice_id) ?? [];
-
-                const mc_config = (question.configuration ?? {}) as UpkQuestionConfigurationMC
-                const max_select = mc_config.max_select ?? choice_codes.length
-
-                switch (question.selector) {
-                    case "SA":
-                        answers.length > 1 && errors.push({
-                            path: `question_id:${question.question_id}`,
-                            message: "Single Answer MC question with >1 selected answers",
-                            severity: "error",
-                        } as ValidationError)
-
-                        break;
-
-                    case "MA":
-                        answers.length > max_select && errors.push({
-                            path: `question_id:${question.question_id}`,
-                            message: "More options selected than allowed",
-                            severity: "error",
-                        } as ValidationError)
-
-                        answers.length === max_select && errors.push({
-                            path: `question_id:${question.question_id}`,
-                            message: "Selected all the options",
-                            severity: "error",
-                        } as ValidationError)
-
-                        break;
-                }
-
-                // Now validate Multiple Choice answers regardless of if 
-                // they're Single Answer (SA) or Multiple Answer (MA)
-                !answers.every(item => choice_codes.includes(item)) && errors.push({
-                    path: `question_id:${question.question_id}`,
-                    message: "Invalid options selected",
-                    severity: "error",
-                })
-
-                // const max_select: number = question.configuration?.max_select ?? choice_codes.length
-                // if (answer.values.length > max_select) {
-                //     answer.error_msg = "More options selected than allowed"
-                // }
-
-                /*
+    assert(question.question_id, "Question must have question_id");
+    // assert(question.configuration, "Question must have configuration")
+    const answers = question._metadata.answers ?? [];
+
+    // Declare it here, and they we'll reassign any specific
+    // configuration types based on the question type.
+
+    // Start fresh without any error messages before validating
+    const errors: ValidationError[] = [];
+
+    switch (question.question_type) {
+      case "TE":
+        answers.length === 0 &&
+          errors.push({
+            path: `question_id:${question.question_id}`,
+            message: "No answer provided",
+            severity: "warning",
+          } as ValidationError);
+
+        answers.length > 1 &&
+          errors.push({
+            path: `question_id:${question.question_id}`,
+            message: "Only one answer allowed",
+            severity: "error",
+          } as ValidationError);
+
+        let answer_text: string = answers[0];
+
+        const te_config = question.configuration as UpkQuestionConfigurationTE;
+        const min_length = te_config.min_length ?? 0;
+        const max_length = te_config.max_length ?? 100_000;
+
+        answer_text.length < min_length &&
+          errors.push({
+            path: `question_id:${question.question_id}`,
+            message: "Answer shorter than allowed",
+            severity: "warning",
+          } as ValidationError);
+
+        answer_text.length > max_length &&
+          errors.push({
+            path: `question_id:${question.question_id}`,
+            message: "Answer longer than allowed",
+            severity: "error",
+          } as ValidationError);
+
+        filter.isProfane(answer_text) &&
+          errors.push({
+            path: `question_id:${question.question_id}`,
+            message: "Answer has inappropriate content",
+            severity: "error",
+          } as ValidationError);
+
+        const patterns: PatternValidation[] =
+          (question.validation ?? {})["patterns"] ?? [];
+        patterns.forEach((pv) => {
+          let re = new RegExp(pv.pattern);
+          answer_text.search(re) == -1 &&
+            errors.push({
+              path: `question_id:${question.question_id}`,
+              message: pv.message,
+              severity: "error",
+            } as ValidationError);
+        });
+
+        break;
+
+      case "MC":
+        answers.length === 0 &&
+          errors.push({
+            path: `question_id:${question.question_id}`,
+            message: "Multiple Choice question with no selected answers",
+            severity: "warning",
+          } as ValidationError);
+
+        const choice_codes: string[] =
+          question.choices?.map((c) => c.choice_id) ?? [];
+
+        const mc_config = (question.configuration ??
+          {}) as UpkQuestionConfigurationMC;
+        const max_select = mc_config.max_select ?? choice_codes.length;
+
+        switch (question.selector) {
+          case "SA":
+            answers.length > 1 &&
+              errors.push({
+                path: `question_id:${question.question_id}`,
+                message: "Single Answer MC question with >1 selected answers",
+                severity: "error",
+              } as ValidationError);
+
+            break;
+
+          case "MA":
+            answers.length > max_select &&
+              errors.push({
+                path: `question_id:${question.question_id}`,
+                message: "More options selected than allowed",
+                severity: "error",
+              } as ValidationError);
+
+            answers.length === max_select &&
+              errors.push({
+                path: `question_id:${question.question_id}`,
+                message: "Selected all the options",
+                severity: "error",
+              } as ValidationError);
+
+            break;
+        }
+
+        // Now validate Multiple Choice answers regardless of if
+        // they're Single Answer (SA) or Multiple Answer (MA)
+        !answers.every((item) => choice_codes.includes(item)) &&
+          errors.push({
+            path: `question_id:${question.question_id}`,
+            message: "Invalid options selected",
+            severity: "error",
+          });
+
+        // const max_select: number = question.configuration?.max_select ?? choice_codes.length
+        // if (answer.values.length > max_select) {
+        //     answer.error_msg = "More options selected than allowed"
+        // }
+
+        /*
                 exclusive_choice = next((x for x in question["choices"] if x.get("exclusive")), None)
                 if exclusive_choice:
                     exclusive_choice_id = exclusive_choice["choice_id"]
@@ -157,21 +175,20 @@ export const questionUtils = {
                            exclusive_choice_id not in answer, "Invalid exclusive selection"
                  */
 
-                break;
-
-            default:
-                errors.push({
-                    path: `question_id:${question.question_id}`,
-                    message: "Incorrect Question Type provided",
-                    severity: "error",
-                } as ValidationError)
-        }
-
-        // Assign the errors back to the question's _validation field and
-        // then return the question
-        // TODO: does this edit in place, maybe I don't need to return it
-        question._validation.errors = errors
-        return question;
-    },
-
-};
\ No newline at end of file
+        break;
+
+      default:
+        errors.push({
+          path: `question_id:${question.question_id}`,
+          message: "Incorrect Question Type provided",
+          severity: "error",
+        } as ValidationError);
+    }
+
+    // Assign the errors back to the question's _validation field and
+    // then return the question
+    // TODO: does this edit in place, maybe I don't need to return it
+    question._validation.errors = errors;
+    return question;
+  },
+};
diff --git a/jb-ui/src/pages/Home.tsx b/jb-ui/src/pages/Home.tsx
index 5a5c953..8d509b6 100644
--- a/jb-ui/src/pages/Home.tsx
+++ b/jb-ui/src/pages/Home.tsx
@@ -1,13 +1,7 @@
-import max_lulu from "./max-and-lulu.jpg"
+import max_lulu from "./max-and-lulu.jpg";
 
 const Home = function () {
-    return (
-        <img
-            src={max_lulu}
-            alt="Max and Lulu"
-            className="object-contain"
-        />
-    )
+  return <img src={max_lulu} alt="Max and Lulu" className="object-contain" />;
 };
 
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/jb-ui/src/pages/LinkAmtAccount.tsx b/jb-ui/src/pages/LinkAmtAccount.tsx
index 0c9dab3..a72626f 100644
--- a/jb-ui/src/pages/LinkAmtAccount.tsx
+++ b/jb-ui/src/pages/LinkAmtAccount.tsx
@@ -5,69 +5,80 @@ import { Button } from "@/components/ui/button";
 type RequestState = "idle" | "working" | "sent" | "failed" | "missing-worker";
 
 const LinkAmtAccount = function () {
-    const [email, setEmail] = useState("");
-    const [state, setState] = useState<RequestState>("idle");
-    const [mockLink, setMockLink] = useState<string | null>(null);
-    const amtWorkerId = new URLSearchParams(window.location.search).get("workerId");
+  const [email, setEmail] = useState("");
+  const [state, setState] = useState<RequestState>("idle");
+  const [mockLink, setMockLink] = useState<string | null>(null);
+  const amtWorkerId = new URLSearchParams(window.location.search).get(
+    "workerId",
+  );
 
-    const submit = async (event: FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
-        if (!amtWorkerId) {
-            setState("missing-worker");
-            return;
-        }
+  const submit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!amtWorkerId) {
+      setState("missing-worker");
+      return;
+    }
 
-        setState("working");
-        setMockLink(null);
-        try {
-            const response = await fetch("/auth/link-amt/request", {
-                method: "POST",
-                credentials: "include",
-                headers: {"Content-Type": "application/json"},
-                body: JSON.stringify({
-                    "email": email,
-                    "amt_worker_id": amtWorkerId,
-                }),
-            });
-            if (!response.ok) throw new Error("Account-link request failed");
-            const body = await response.json() as {magic_link?: string};
-            setMockLink(body.magic_link ?? null);
-            setState("sent");
-        } catch {
-            setState("failed");
-        }
-    };
+    setState("working");
+    setMockLink(null);
+    try {
+      const response = await fetch("/auth/link-amt/request", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email: email,
+          amt_worker_id: amtWorkerId,
+        }),
+      });
+      if (!response.ok) throw new Error("Account-link request failed");
+      const body = (await response.json()) as { magic_link?: string };
+      setMockLink(body.magic_link ?? null);
+      setState("sent");
+    } catch {
+      setState("failed");
+    }
+  };
 
-    return (
-        <main className="flex min-h-screen items-center justify-center bg-zinc-200 p-4">
-            <section className="w-full max-w-md space-y-4 rounded-lg bg-white p-6 shadow-lg">
-                <h1 className="text-xl font-semibold">Link your MTurk account</h1>
-                <p>Enter the email address you want to use for James Billings.</p>
-                <form className="space-y-4" onSubmit={submit}>
-                    <input
-                        className="w-full rounded-md border px-3 py-2"
-                        type="email"
-                        autoComplete="email"
-                        required
-                        value={email}
-                        onChange={(event) => setEmail(event.target.value)}
-                        placeholder="you@example.com"
-                    />
-                    <Button type="submit" disabled={state === "working"}>
-                        {state === "working" ? "Sending…" : "Send link"}
-                    </Button>
-                </form>
-                {state === "sent" && <p>Check your email to finish linking your account.</p>}
-                {state === "failed" && <p>Unable to send the link. Please try again.</p>}
-                {state === "missing-worker" && <p>This page is missing your MTurk worker ID.</p>}
-                {mockLink && (
-                    <p>
-                        Development link: <a className="underline" href={mockLink}>continue</a>
-                    </p>
-                )}
-            </section>
-        </main>
-    );
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-zinc-200 p-4">
+      <section className="w-full max-w-md space-y-4 rounded-lg bg-white p-6 shadow-lg">
+        <h1 className="text-xl font-semibold">Link your MTurk account</h1>
+        <p>Enter the email address you want to use for James Billings.</p>
+        <form className="space-y-4" onSubmit={submit}>
+          <input
+            className="w-full rounded-md border px-3 py-2"
+            type="email"
+            autoComplete="email"
+            required
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            placeholder="you@example.com"
+          />
+          <Button type="submit" disabled={state === "working"}>
+            {state === "working" ? "Sending…" : "Send link"}
+          </Button>
+        </form>
+        {state === "sent" && (
+          <p>Check your email to finish linking your account.</p>
+        )}
+        {state === "failed" && (
+          <p>Unable to send the link. Please try again.</p>
+        )}
+        {state === "missing-worker" && (
+          <p>This page is missing your MTurk worker ID.</p>
+        )}
+        {mockLink && (
+          <p>
+            Development link:{" "}
+            <a className="underline" href={mockLink}>
+              continue
+            </a>
+          </p>
+        )}
+      </section>
+    </main>
+  );
 };
 
 export default LinkAmtAccount;
diff --git a/jb-ui/src/pages/MagicLink.tsx b/jb-ui/src/pages/MagicLink.tsx
index 4042624..eb272a6 100644
--- a/jb-ui/src/pages/MagicLink.tsx
+++ b/jb-ui/src/pages/MagicLink.tsx
@@ -3,42 +3,44 @@ import { useEffect, useRef, useState } from "react";
 type ExchangeState = "working" | "failed" | "missing";
 
 const MagicLink = function () {
-    const started = useRef(false);
-    const [state, setState] = useState<ExchangeState>("working");
-
-    useEffect(() => {
-        // React Strict Mode runs effects twice in development. Never redeem twice.
-        if (started.current) return;
-        started.current = true;
-
-        const params = new URLSearchParams(window.location.search);
-        const token = params.get("token");
-        if (!token) {
-            setState("missing");
-            return;
-        }
-
-        // Keep the credential out of browser history and subsequent Referer headers.
-        window.history.replaceState({}, "", window.location.pathname);
-
-        void fetch("/auth/magic-link/exchange", {
-            method: "POST",
-            credentials: "include",
-            headers: {"Content-Type": "application/json"},
-            body: JSON.stringify({"token": token}),
-        }).then((response) => {
-            if (!response.ok) throw new Error("Magic-link exchange failed");
-            window.location.replace("/");
-        }).catch(() => setState("failed"));
-    }, []);
-
-    if (state === "missing") {
-        return <p>This login link is missing its token.</p>;
+  const started = useRef(false);
+  const [state, setState] = useState<ExchangeState>("working");
+
+  useEffect(() => {
+    // React Strict Mode runs effects twice in development. Never redeem twice.
+    if (started.current) return;
+    started.current = true;
+
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get("token");
+    if (!token) {
+      setState("missing");
+      return;
     }
-    if (state === "failed") {
-        return <p>This login link is invalid or has expired.</p>;
-    }
-    return <p>Signing you in…</p>;
+
+    // Keep the credential out of browser history and subsequent Referer headers.
+    window.history.replaceState({}, "", window.location.pathname);
+
+    void fetch("/auth/magic-link/exchange", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ token: token }),
+    })
+      .then((response) => {
+        if (!response.ok) throw new Error("Magic-link exchange failed");
+        window.location.replace("/");
+      })
+      .catch(() => setState("failed"));
+  }, []);
+
+  if (state === "missing") {
+    return <p>This login link is missing its token.</p>;
+  }
+  if (state === "failed") {
+    return <p>This login link is invalid or has expired.</p>;
+  }
+  return <p>Signing you in…</p>;
 };
 
 export default MagicLink;
diff --git a/jb-ui/src/pages/Preview.tsx b/jb-ui/src/pages/Preview.tsx
index 153b4bb..6e50b0d 100644
--- a/jb-ui/src/pages/Preview.tsx
+++ b/jb-ui/src/pages/Preview.tsx
@@ -1,287 +1,300 @@
 import {
-    Leaderboard,
-    LeaderboardApi,
-    LeaderboardCode,
-    LeaderboardFrequency,
-    LeaderboardRow,
+  Leaderboard,
+  LeaderboardApi,
+  LeaderboardCode,
+  LeaderboardFrequency,
+  LeaderboardRow,
 } from "@/api_fsb";
 import { useAppSelector } from "@/hooks";
-import { bpid, formatCentsToUSD, truncate, } from "@/lib/utils";
+import { bpid, formatCentsToUSD, truncate } from "@/lib/utils";
 import { activeSurveys, activeUsers, maxPayout } from "@/models/grlStatsSlice";
 import { clsx } from "clsx";
-import moment from 'moment';
-import { useEffect, useState } from 'react';
+import moment from "moment";
+import { useEffect, useState } from "react";
 
 const showSmartRank = (
-    item: LeaderboardRow,
-    index: number,
-    items: LeaderboardRow[] | undefined
+  item: LeaderboardRow,
+  index: number,
+  items: LeaderboardRow[] | undefined,
 ): boolean => {
-    /**
-     * Smart rank calculation - this determines if we should show the rank
-     *  value. It's confusing to show people that multiple individuals ranked
-     *  in the same place, so this will only display the next ranked value, eg:
-     *
-     *  - 1st
-     *  - ___
-     *  - 3rd
-     *  - ___
-     *  - ___
-     *  - 6th
-     *
-     * @returns number
-     */
-    if (!items) return false;
-
-    const thisRank = item.rank;
-    if (index >= 1) {
-        const prevRank = items[index - 1].rank;
-        if (thisRank === prevRank) {
-            return false;
-        }
+  /**
+   * Smart rank calculation - this determines if we should show the rank
+   *  value. It's confusing to show people that multiple individuals ranked
+   *  in the same place, so this will only display the next ranked value, eg:
+   *
+   *  - 1st
+   *  - ___
+   *  - 3rd
+   *  - ___
+   *  - ___
+   *  - 6th
+   *
+   * @returns number
+   */
+  if (!items) return false;
+
+  const thisRank = item.rank;
+  if (index >= 1) {
+    const prevRank = items[index - 1].rank;
+    if (thisRank === prevRank) {
+      return false;
     }
-    return true;
+  }
+  return true;
 };
 
 interface FrequencyButtonsProps {
-    selected: LeaderboardFrequency;
-    onChange: (frequency: LeaderboardFrequency) => void;
+  selected: LeaderboardFrequency;
+  onChange: (frequency: LeaderboardFrequency) => void;
 }
 
 const frequency_map = [
-    { label: 'Day', value: LeaderboardFrequency.Daily },
-    { label: 'Week', value: LeaderboardFrequency.Weekly },
-    { label: 'Month', value: LeaderboardFrequency.Monthly },
+  { label: "Day", value: LeaderboardFrequency.Daily },
+  { label: "Week", value: LeaderboardFrequency.Weekly },
+  { label: "Month", value: LeaderboardFrequency.Monthly },
 ];
 
 const ThreeButtonToggle = ({ selected, onChange }: FrequencyButtonsProps) => {
-    return (
-        <div className="inline-flex rounded shadow-sm" role="group">
-            {frequency_map.map((button, idx) => (
-                <button
-                    type="button"
-                    key={button.value}
-                    onClick={() => onChange(button.value)}
-                    className={clsx(
-                        "px-2 py-1 text-[10px] font-medium",
-                        "border-t border-b border-gray-200",
-                        "hover:cursor-pointer hover:bg-zinc-200 hover:text-zinc-950",
-                        idx === 0 && "rounded-l",
-                        idx === frequency_map.length - 1 && "rounded-r",
-                        selected === button.value
-                            ? 'text-zinc-50 bg-zinc-400'
-                            : 'text-zinc-950 bg-zinc-50',
-                    )}>
-                    {button.label}
-                </button>
-            ))}
-        </div>
-    );
+  return (
+    <div className="inline-flex rounded shadow-sm" role="group">
+      {frequency_map.map((button, idx) => (
+        <button
+          type="button"
+          key={button.value}
+          onClick={() => onChange(button.value)}
+          className={clsx(
+            "px-2 py-1 text-[10px] font-medium",
+            "border-t border-b border-gray-200",
+            "hover:cursor-pointer hover:bg-zinc-200 hover:text-zinc-950",
+            idx === 0 && "rounded-l",
+            idx === frequency_map.length - 1 && "rounded-r",
+            selected === button.value
+              ? "text-zinc-50 bg-zinc-400"
+              : "text-zinc-950 bg-zinc-50",
+          )}
+        >
+          {button.label}
+        </button>
+      ))}
+    </div>
+  );
 };
 
-
-
 // Leaderboards Component
 export const Leaderboards = () => {
-    /**
-     * Leaderboards do not do any caching, or better state management. This is okay because 
-     * the API is handled to take it. However, it can easily handled better client 
-     * side rather than making the 
-     * **/
-
-    const [frequency, setFrequency] = useState<LeaderboardFrequency>(
-        LeaderboardFrequency.Daily
+  /**
+   * Leaderboards do not do any caching, or better state management. This is okay because
+   * the API is handled to take it. However, it can easily handled better client
+   * side rather than making the
+   * **/
+
+  const [frequency, setFrequency] = useState<LeaderboardFrequency>(
+    LeaderboardFrequency.Daily,
+  );
+
+  const [payouts, setPayouts] = useState<Leaderboard | null>(null);
+  const [completes, setCompletes] = useState<Leaderboard | null>(null);
+
+  // const bpuid = useAppSelector(state => state.app.bpuid)
+  const bpuid = undefined;
+
+  useEffect(() => {
+    new LeaderboardApi()
+      .timespanLeaderboardProductIdLeaderboardTimespanBoardCodeGet(
+        bpid,
+        LeaderboardCode.CompleteCount,
+        frequency,
+        "us",
+        bpuid, // bpuid
+        undefined, // within_time
+        10,
+      )
+      .then((res) => {
+        setCompletes(res.data.leaderboard as Leaderboard);
+      });
+
+    new LeaderboardApi()
+      .timespanLeaderboardProductIdLeaderboardTimespanBoardCodeGet(
+        bpid,
+        LeaderboardCode.SumUserPayout,
+        frequency,
+        "us",
+        bpuid,
+        undefined,
+        10,
+      )
+      .then((res) => {
+        setPayouts(res.data.leaderboard as Leaderboard);
+      });
+  }, [frequency]);
+
+  let dateRange = " - ";
+  if (completes) {
+    const start = moment(completes?.start_timestamp * 1000).format(
+      "MMM Do, ha",
     );
-
-    const [payouts, setPayouts] = useState<Leaderboard | null>(null);
-    const [completes, setCompletes] = useState<Leaderboard | null>(null);
-
-    // const bpuid = useAppSelector(state => state.app.bpuid)
-    const bpuid = undefined
-
-    useEffect(() => {
-        new LeaderboardApi().timespanLeaderboardProductIdLeaderboardTimespanBoardCodeGet(
-            bpid,
-            LeaderboardCode.CompleteCount,
-            frequency,
-            "us",
-            bpuid,  // bpuid
-            undefined,  // within_time
-            10)
-            .then(res => {
-                setCompletes(res.data.leaderboard as Leaderboard)
-            })
-
-        new LeaderboardApi().timespanLeaderboardProductIdLeaderboardTimespanBoardCodeGet(
-            bpid,
-            LeaderboardCode.SumUserPayout,
-            frequency,
-            "us",
-            bpuid,
-            undefined,
-            10)
-            .then(res => {
-                setPayouts(res.data.leaderboard as Leaderboard)
-            })
-    }, [frequency]);
-
-    let dateRange = " - "
-    if (completes) {
-        const start = moment(completes?.start_timestamp * 1000).format("MMM Do, ha");
-        const end = moment(completes?.end_timestamp * 1000).format("MMM Do, h:mm:ssa");
-        //dateRange = `${start} – ${end} (${completes?.timezone_name})`;
-        dateRange = `${start} – ${end}`;
-    }
-
-    const freq_label = frequency_map.find(f => f.value === frequency)?.label.toLocaleLowerCase()
-
-    return (
-        <div className="my-2 mx-4 py-0">
-            <div className="w-full flex items-center justify-between my-1">
-                {/* Left spacer (hidden on small screens) */}
-                <div className="hidden md:block md:w-1/3"></div>
-
-                {/* Centered text */}
-                <h3 className="text-center flex-1 md:1/3">
-                    Leaderboards
-                </h3>
-
-                {/* Right-aligned button group */}
-                <div className="flex md:w-1/3 justify-end">
-                    <ThreeButtonToggle
-                        selected={frequency}
-                        onChange={setFrequency}
-                    />
-                </div>
-            </div>
-
-            <div className="grid grid-cols-1 mb-2 text-zinc-700">
-                <p className="text-center text-[10px] font-thin">
-                    {dateRange}
-                </p>
-            </div>
-
-            <div className="grid grid-cols-1 gap-4 px-12 md:px-0
-            md:grid-cols-2">
-                <table className="border-collapse text-emerald-950 text-[8px] md:text-sm">
-                    <caption className="caption-top text-xs font-semibold">
-                        Most earned in the past {freq_label}.
-                    </caption>
-                    <thead>
-                        <tr className="
+    const end = moment(completes?.end_timestamp * 1000).format(
+      "MMM Do, h:mm:ssa",
+    );
+    //dateRange = `${start} – ${end} (${completes?.timezone_name})`;
+    dateRange = `${start} – ${end}`;
+  }
+
+  const freq_label = frequency_map
+    .find((f) => f.value === frequency)
+    ?.label.toLocaleLowerCase();
+
+  return (
+    <div className="my-2 mx-4 py-0">
+      <div className="w-full flex items-center justify-between my-1">
+        {/* Left spacer (hidden on small screens) */}
+        <div className="hidden md:block md:w-1/3"></div>
+
+        {/* Centered text */}
+        <h3 className="text-center flex-1 md:1/3">Leaderboards</h3>
+
+        {/* Right-aligned button group */}
+        <div className="flex md:w-1/3 justify-end">
+          <ThreeButtonToggle selected={frequency} onChange={setFrequency} />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 mb-2 text-zinc-700">
+        <p className="text-center text-[10px] font-thin">{dateRange}</p>
+      </div>
+
+      <div
+        className="grid grid-cols-1 gap-4 px-12 md:px-0
+            md:grid-cols-2"
+      >
+        <table className="border-collapse text-emerald-950 text-[8px] md:text-sm">
+          <caption className="caption-top text-xs font-semibold">
+            Most earned in the past {freq_label}.
+          </caption>
+          <thead>
+            <tr
+              className="
                             font-mono font-semibold text-center
-                            border border-zinc-150">
-                            <th>Rank</th>
-                            <th>Bonus</th>
-                            <th>User</th>
-                        </tr>
-                    </thead>
-                    <tbody className="font-mono">
-
-                        {payouts?.rows?.map((dataItem: LeaderboardRow) => (
-                            <tr key={dataItem.bpuid} className="
+                            border border-zinc-150"
+            >
+              <th>Rank</th>
+              <th>Bonus</th>
+              <th>User</th>
+            </tr>
+          </thead>
+          <tbody className="font-mono">
+            {payouts?.rows?.map((dataItem: LeaderboardRow) => (
+              <tr
+                key={dataItem.bpuid}
+                className="
                             text-center 
-                            border border-zinc-100">
-                                <td className="font-medium">
-                                    {dataItem.rank}
-                                </td>
-                                <td className="font-semibold">
-                                    {formatCentsToUSD(dataItem.value)}
-                                </td>
-                                <td className="font-light">
-                                    {truncate(dataItem.bpuid, 6, "*****").toUpperCase()}
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-
-                <table className="border-collapse border border-gray-400
-                text-emerald-950 text-[8px] md:text-sm">
-                    <caption className="caption-top text-xs font-semibold">
-                        Top completes in the past {freq_label}.
-                    </caption>
-                    <thead>
-                        <tr className="
+                            border border-zinc-100"
+              >
+                <td className="font-medium">{dataItem.rank}</td>
+                <td className="font-semibold">
+                  {formatCentsToUSD(dataItem.value)}
+                </td>
+                <td className="font-light">
+                  {truncate(dataItem.bpuid, 6, "*****").toUpperCase()}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        <table
+          className="border-collapse border border-gray-400
+                text-emerald-950 text-[8px] md:text-sm"
+        >
+          <caption className="caption-top text-xs font-semibold">
+            Top completes in the past {freq_label}.
+          </caption>
+          <thead>
+            <tr
+              className="
                             font-mono font-semibold text-center
-                            border border-zinc-150 rounded">
-                            <th>Rank</th>
-                            <th>Completes</th>
-                            <th>User</th>
-                        </tr>
-                    </thead>
-                    <tbody className="font-mono">
-
-                        {completes?.rows?.map((dataItem: LeaderboardRow, index: number) => (
-                            <tr key={dataItem.bpuid} className="
+                            border border-zinc-150 rounded"
+            >
+              <th>Rank</th>
+              <th>Completes</th>
+              <th>User</th>
+            </tr>
+          </thead>
+          <tbody className="font-mono">
+            {completes?.rows?.map((dataItem: LeaderboardRow, index: number) => (
+              <tr
+                key={dataItem.bpuid}
+                className="
                             text-center
-                            border border-zinc-100">
-                                <td className="font-medium">
-                                    {dataItem.rank ?? showSmartRank(dataItem, index, completes?.rows)}
-                                </td>
-                                <td className="font-semibold">
-                                    {dataItem.value}
-                                </td>
-                                <td className="font-light">
-                                    {truncate(dataItem.bpuid, 6, "*****").toUpperCase()}
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    );
+                            border border-zinc-100"
+              >
+                <td className="font-medium">
+                  {dataItem.rank ??
+                    showSmartRank(dataItem, index, completes?.rows)}
+                </td>
+                <td className="font-semibold">{dataItem.value}</td>
+                <td className="font-light">
+                  {truncate(dataItem.bpuid, 6, "*****").toUpperCase()}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
 };
 
-
-
 // Preview Component
 const Preview = () => {
-    /**
-     *
-     * @returns {JSX.Element}
-     */
-
-    const users = useAppSelector(state => activeUsers(state))
-    const users_f: string = users?.toLocaleString() ?? " – "
-
-    const surveys = useAppSelector(state => activeSurveys(state))
-    const surveys_f: string = surveys?.toLocaleString() ?? " – "
-
-    const survey_max_cpi = useAppSelector(state => maxPayout(state))
-    const formatter = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-    });
-    const survey_max_cpi_f: string = formatter.format((survey_max_cpi ?? 0) / 100)
-
-    return (
-        <div className="max-h-[calc(100vh-10rem)] overflow-y-auto">
-
-            <div className="bg-zinc-100 rounded py-2 m-0">
-                <p className="text-center text-sm italic text-zinc-600">
-                    {users_f} people are actively attempting {surveys_f} available surveys right now.
-                </p>
-            </div>
-
-            <Leaderboards />
-
-            <div className="bg-zinc-100 rounded py-2 px-6 m-0 text-xs text-center">
-                <p className="py-1">
-                    Get paid to take surveys. Our algorithm attempts to pair you with the
-                    highest paying survey available at the moment (right now, the highest
-                    paying survey is {survey_max_cpi_f}) that you are eligible for,
-                    each attempt is a valid HIT. Try as many as you can, our system will
-                    self regulate you: we want to ensure you have a high chance of being
-                    paired with a survey based on what surveys are available, as their
-                    availability constantly changes.</p>
-                <p className="py-1">
-                    Each HIT is paid when you attempt to take a survey and if you complete
-                    the survey, you will be awarded a bonus equal to that in which the
-                    survey pays out.</p>
-            </div>
-        </div>
-    );
+  /**
+   *
+   * @returns {JSX.Element}
+   */
+
+  const users = useAppSelector((state) => activeUsers(state));
+  const users_f: string = users?.toLocaleString() ?? " – ";
+
+  const surveys = useAppSelector((state) => activeSurveys(state));
+  const surveys_f: string = surveys?.toLocaleString() ?? " – ";
+
+  const survey_max_cpi = useAppSelector((state) => maxPayout(state));
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  });
+  const survey_max_cpi_f: string = formatter.format(
+    (survey_max_cpi ?? 0) / 100,
+  );
+
+  return (
+    <div className="max-h-[calc(100vh-10rem)] overflow-y-auto">
+      <div className="bg-zinc-100 rounded py-2 m-0">
+        <p className="text-center text-sm italic text-zinc-600">
+          {users_f} people are actively attempting {surveys_f} available surveys
+          right now.
+        </p>
+      </div>
+
+      <Leaderboards />
+
+      <div className="bg-zinc-100 rounded py-2 px-6 m-0 text-xs text-center">
+        <p className="py-1">
+          Get paid to take surveys. Our algorithm attempts to pair you with the
+          highest paying survey available at the moment (right now, the highest
+          paying survey is {survey_max_cpi_f}) that you are eligible for, each
+          attempt is a valid HIT. Try as many as you can, our system will self
+          regulate you: we want to ensure you have a high chance of being paired
+          with a survey based on what surveys are available, as their
+          availability constantly changes.
+        </p>
+        <p className="py-1">
+          Each HIT is paid when you attempt to take a survey and if you complete
+          the survey, you will be awarded a bonus equal to that in which the
+          survey pays out.
+        </p>
+      </div>
+    </div>
+  );
 };
-export default Preview;
\ No newline at end of file
+export default Preview;
diff --git a/jb-ui/src/pages/Result.tsx b/jb-ui/src/pages/Result.tsx
index 47af248..477f77e 100644
--- a/jb-ui/src/pages/Result.tsx
+++ b/jb-ui/src/pages/Result.tsx
@@ -10,114 +10,124 @@ import { useEffect } from "react";
 // }
 
 export const Complete = () => {
-    const ts = useAppSelector(state => state.app.taskStatus)
-
-    return (
-        <>
-            <h2 className="text-lg">Survey Completed</h2>
-            <p className="text-emerald-700 text-lg font-bold">Congratulations! You completed the Survey.</p>
-            <p className="text-emerald-700 text-2xl font-bold">{ts?.user_payout_string}</p>
-            <p className="text-slate-300">You may close this tab and return to submit the HIT</p>
-        </>
-    )
-}
+  const ts = useAppSelector((state) => state.app.taskStatus);
+
+  return (
+    <>
+      <h2 className="text-lg">Survey Completed</h2>
+      <p className="text-emerald-700 text-lg font-bold">
+        Congratulations! You completed the Survey.
+      </p>
+      <p className="text-emerald-700 text-2xl font-bold">
+        {ts?.user_payout_string}
+      </p>
+      <p className="text-slate-300">
+        You may close this tab and return to submit the HIT
+      </p>
+    </>
+  );
+};
 
 export const Enter = () => {
-    return (
-        <>
-            <h2 className="text-lg">Entered</h2>
-            <p className="text-slate-800 text-lg font-bold">You're currently in the Survey</p>
-            <p className="text-slate-300">You may close this tab and return to submit the HIT</p>
-        </>
-    )
-}
+  return (
+    <>
+      <h2 className="text-lg">Entered</h2>
+      <p className="text-slate-800 text-lg font-bold">
+        You're currently in the Survey
+      </p>
+      <p className="text-slate-300">
+        You may close this tab and return to submit the HIT
+      </p>
+    </>
+  );
+};
 
 export const InComplete = () => {
-    const ts = useAppSelector(state => state.app.taskStatus)
-    if (!ts) { return null; }
-
-    return (
-        <>
-            <h2 className="text-lg">HIT Complete</h2>
-            <p className="text-rose-800 text-lg font-bold">Survey terminated the attempt.</p>
-            <p className="text-slate-300">You may close this tab and return to submit the HIT</p>
-        </>
-
-    )
-}
+  const ts = useAppSelector((state) => state.app.taskStatus);
+  if (!ts) {
+    return null;
+  }
+
+  return (
+    <>
+      <h2 className="text-lg">HIT Complete</h2>
+      <p className="text-rose-800 text-lg font-bold">
+        Survey terminated the attempt.
+      </p>
+      <p className="text-slate-300">
+        You may close this tab and return to submit the HIT
+      </p>
+    </>
+  );
+};
 
 export const Unknown = () => {
-
-    return (
-        <>
-            <h2 className="text-lg">Task Issue</h2>
-            <p className="text-rose-800 text-lg font-bold">You're not currently eligible for any Surveys</p>
-            <p className="text-slate-300">You may close this tab and return to submit the HIT</p>
-        </>
-    )
-}
+  return (
+    <>
+      <h2 className="text-lg">Task Issue</h2>
+      <p className="text-rose-800 text-lg font-bold">
+        You're not currently eligible for any Surveys
+      </p>
+      <p className="text-slate-300">
+        You may close this tab and return to submit the HIT
+      </p>
+    </>
+  );
+};
 
 export const Loading = () => {
-
-    return (
-        <p className="text-2xl font-semibold">Loading...</p>
-    )
-}
-
+  return <p className="text-2xl font-semibold">Loading...</p>;
+};
 
 const Result = () => {
-
-    const ts = useAppSelector(state => state.app.taskStatus)
-
-    const confettiCannons = () => {
-        const end = Date.now() + 3 * 1000
-        const colors = ["#84cc16", "#1e3a8a", "#ec4899"]
-        const frame = () => {
-            if (Date.now() > end) return
-            confetti({
-                particleCount: 3,
-                angle: 60,
-                spread: 55,
-                startVelocity: 80,
-                gravity: 0.7,
-                origin: { x: 0, y: 0.8 },
-                colors: colors,
-            })
-            confetti({
-                particleCount: 3,
-                angle: 120,
-                spread: 55,
-                startVelocity: 80,
-                gravity: 0.7,
-                origin: { x: 1, y: 0.8 },
-                colors: colors,
-            })
-            requestAnimationFrame(frame)
-        }
-        frame()
+  const ts = useAppSelector((state) => state.app.taskStatus);
+
+  const confettiCannons = () => {
+    const end = Date.now() + 3 * 1000;
+    const colors = ["#84cc16", "#1e3a8a", "#ec4899"];
+    const frame = () => {
+      if (Date.now() > end) return;
+      confetti({
+        particleCount: 3,
+        angle: 60,
+        spread: 55,
+        startVelocity: 80,
+        gravity: 0.7,
+        origin: { x: 0, y: 0.8 },
+        colors: colors,
+      });
+      confetti({
+        particleCount: 3,
+        angle: 120,
+        spread: 55,
+        startVelocity: 80,
+        gravity: 0.7,
+        origin: { x: 1, y: 0.8 },
+        colors: colors,
+      });
+      requestAnimationFrame(frame);
+    };
+    frame();
+  };
+
+  useEffect(() => {
+    if (ts?.status === 3) {
+      confettiCannons();
     }
-
-    useEffect(() => {
-        if (ts?.status === 3) {
-            confettiCannons()
-        }
-    }, [ts])
-
-
-    switch (ts?.status) {
-        case 0:  // UNKNOWN
-            return <Unknown />;
-        case 1:  // ENTER
-            return <Enter />;
-        case 2:  // INCOMPLETE
-            return <InComplete />;
-        case 3:  // COMPLETE
-            return <Complete />;
-        default:
-            return <Loading />;
-    }
-
+  }, [ts]);
+
+  switch (ts?.status) {
+    case 0: // UNKNOWN
+      return <Unknown />;
+    case 1: // ENTER
+      return <Enter />;
+    case 2: // INCOMPLETE
+      return <InComplete />;
+    case 3: // COMPLETE
+      return <Complete />;
+    default:
+      return <Loading />;
+  }
 };
 
-
-export default Result;
\ No newline at end of file
+export default Result;
diff --git a/jb-ui/src/pages/Transfer.tsx b/jb-ui/src/pages/Transfer.tsx
new file mode 100644
index 0000000..6e087d6
--- /dev/null
+++ b/jb-ui/src/pages/Transfer.tsx
@@ -0,0 +1,50 @@
+import { clsx } from "clsx";
+
+import { useSelector } from "react-redux";
+
+const Transfer = function () {
+  let error = [];
+
+  const handleInputChange = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ) => {};
+
+  const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {};
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log("Form submitted successfully!");
+  };
+
+  return (
+    <div className="px-6 my-6">
+      <h2
+        className="
+                    bg-red-500 rounded py-2
+                    text-white text-2xl font-semibold text-center"
+      >
+        Transfer Required
+      </h2>
+      <p
+        className="
+                    py-4
+                    text-zinc-500 text-2xl font-semibold text-center"
+      >
+        James Billings is finished 😭 Just Kidding!!!
+      </p>
+
+      <input
+        type="text"
+        id="text-entry-input"
+        aria-describedby=""
+        // defaultValue={answer?.values.length ? answer?.values[0] : ""}
+        // onKeyUp={handleInputChange}
+        // onKeyDown={handleKeyPress} // Use onKeyDown to listen for the key press
+        // title={error ? answer?.error_msg : ""}
+        className={clsx("w-full border-1 rounded px-2 py-1")}
+      />
+    </div>
+  );
+};
+
+export default Transfer;
diff --git a/jb-ui/src/pages/Work.tsx b/jb-ui/src/pages/Work.tsx
index c54732f..32dcc96 100644
--- a/jb-ui/src/pages/Work.tsx
+++ b/jb-ui/src/pages/Work.tsx
@@ -1,765 +1,847 @@
 import {
-    BucketTask,
-    OfferwallApi,
-    OfferwallReason,
-    ReportApi, ReportTask, ReportValue, StatusApi,
-    TasksStatusResponse, TaskStatusResponse, TopNPlusBlockOfferWall
+  BucketTask,
+  OfferwallApi,
+  OfferwallReason,
+  ReportApi,
+  ReportTask,
+  ReportValue,
+  StatusApi,
+  TasksStatusResponse,
+  TaskStatusResponse,
+  TopNPlusBlockOfferWall,
 } from "@/api_fsb";
 
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
-    Field,
-    FieldDescription,
-    FieldGroup,
-    FieldLabel,
-    FieldLegend,
-    FieldSet,
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
 } from "@/components/ui/field";
 import { useAppDispatch, useAppSelector } from "@/hooks";
 import { bpid, formatCentsToUSD, formatSource, truncate } from "@/lib/utils";
 import {
-    getAvailabilityCount, getLOIText,
-    isLowBalance,
-    selectBucket,
-    setAttemptedLiveEligibleCount,
-    setAvailabilityCount,
-    setCurrentBuckets,
-    setEnteredTimestamp, setLOI,
-    setOfferwallReasons,
-    setTaskStatus
+  getAvailabilityCount,
+  getLOIText,
+  isLowBalance,
+  selectBucket,
+  setAttemptedLiveEligibleCount,
+  setAvailabilityCount,
+  setCurrentBuckets,
+  setEnteredTimestamp,
+  setLOI,
+  setOfferwallReasons,
+  setTaskStatus,
 } from "@/models/appSlice";
 import {
-    createColumnHelper, flexRender, getCoreRowModel,
-    useReactTable
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
 } from "@tanstack/react-table";
 import { XIcon } from "lucide-react";
 import moment from "moment/moment";
 import { useEffect, useRef, useState } from "react";
-import Markdown from 'react-markdown';
+import Markdown from "react-markdown";
 
 const Report = ({ onClose }: { onClose: () => void }) => {
-    const [showComplete, setShowComplete] = useState(false);
-    const [selectedValues, setSelectedValues] = useState<ReportValue[]>([]);
-
-    const bpuid = useAppSelector(state => state.app.bpuid)
-    const ts = useAppSelector(state => state.app.taskStatus)
-
-    const handleCheckboxChange = (value: ReportValue, checked: boolean) => {
-        setSelectedValues(prev =>
-            checked
-                ? [...prev, value]
-                : prev.filter(v => v !== value)
-        );
+  const [showComplete, setShowComplete] = useState(false);
+  const [selectedValues, setSelectedValues] = useState<ReportValue[]>([]);
+
+  const bpuid = useAppSelector((state) => state.app.bpuid);
+  const ts = useAppSelector((state) => state.app.taskStatus);
+
+  const handleCheckboxChange = (value: ReportValue, checked: boolean) => {
+    setSelectedValues((prev) =>
+      checked ? [...prev, value] : prev.filter((v) => v !== value),
+    );
+  };
+
+  const clicked_submit = () => {
+    if (!bpuid) return;
+    // ReportValue.NUMBER_0
+    console.log("selectedValues:", selectedValues);
+
+    const rt: ReportTask = {
+      bpuid: bpuid,
+      reasons: selectedValues,
+      notes: "",
     };
 
-    const clicked_submit = () => {
-        if (!bpuid) return;
-        // ReportValue.NUMBER_0
-        console.log("selectedValues:", selectedValues);
-
-        const rt: ReportTask = {
-            'bpuid': bpuid,
-            'reasons': selectedValues,
-            'notes': ""
-        };
-
-        new ReportApi().reportTaskProductIdReportPost(
-            bpid, // productId
-            rt, // reportTask
-        ).then(res => {
-            console.log("Response:", res); // Check what's actually here
-
-            if (res.status === 400) {
-                // Handle error here instead
-            } else {
-                setShowComplete(true);
-            }
-        })
-    }
-
-    const reportReasons = [
-        { id: 'TECHNICAL_ERROR', label: 'Technical Error', value: ReportValue.NUMBER_1 },
-        { id: 'NO_REDIRECT', label: 'No Redirect', value: ReportValue.NUMBER_2 },
-        { id: 'PRIVACY_INVASION', label: 'Privacy Invasion', value: ReportValue.NUMBER_3 },
-        { id: 'UNCOMFORTABLE_TOPICS', label: 'Uncomfortable Topics', value: ReportValue.NUMBER_4 },
-        { id: 'ASKED_FOR_NOT_ALLOWED_ACTION', label: 'Asked for Not Allowed Action', value: ReportValue.NUMBER_5 },
-        { id: 'BAD_ON_MOBILE', label: 'Bad on Mobile', value: ReportValue.NUMBER_6 },
-        { id: 'DIDNT_LIKE', label: "Didn't Like", value: ReportValue.NUMBER_7 },
-    ];
-
-    if (!ts?.finished) {
-        return <p>Please finish a Task to report its status.</p>
-    }
-
-    if (showComplete) {
-        return <SubimtAMT />
-    }
-
-    return (
-        <div className="border-2 border-rose-200 rounded">
-            <div className="flex justify-center">
-                <FieldSet className="mt-2">
-                    <FieldLegend variant="label" className="my-0 text-rose-950">
-                        Please select all reasons why you are reporting this Task:
-                    </FieldLegend>
-                    <FieldDescription className="my-0 text-rose-950">
-                        You must provide at least one reason to report a Task.
-                    </FieldDescription>
-                    <FieldGroup className="gap-2 my-0 py-0">
-
-                        {reportReasons.map((reason) => (
-                            <Field key={reason.id} orientation="horizontal" className="
-                            hover:cursor-pointer">
-                                <Checkbox
-                                    id={reason.id}
-                                    name={reason.id}
-                                    onCheckedChange={(checked) =>
-                                        handleCheckboxChange(reason.value, checked as boolean)
-                                    }
-                                />
-                                <FieldLabel
-                                    htmlFor={reason.id}
-                                    className="font-medium text-rose-950
+    new ReportApi()
+      .reportTaskProductIdReportPost(
+        bpid, // productId
+        rt, // reportTask
+      )
+      .then((res) => {
+        console.log("Response:", res); // Check what's actually here
+
+        if (res.status === 400) {
+          // Handle error here instead
+        } else {
+          setShowComplete(true);
+        }
+      });
+  };
+
+  const reportReasons = [
+    {
+      id: "TECHNICAL_ERROR",
+      label: "Technical Error",
+      value: ReportValue.NUMBER_1,
+    },
+    { id: "NO_REDIRECT", label: "No Redirect", value: ReportValue.NUMBER_2 },
+    {
+      id: "PRIVACY_INVASION",
+      label: "Privacy Invasion",
+      value: ReportValue.NUMBER_3,
+    },
+    {
+      id: "UNCOMFORTABLE_TOPICS",
+      label: "Uncomfortable Topics",
+      value: ReportValue.NUMBER_4,
+    },
+    {
+      id: "ASKED_FOR_NOT_ALLOWED_ACTION",
+      label: "Asked for Not Allowed Action",
+      value: ReportValue.NUMBER_5,
+    },
+    {
+      id: "BAD_ON_MOBILE",
+      label: "Bad on Mobile",
+      value: ReportValue.NUMBER_6,
+    },
+    { id: "DIDNT_LIKE", label: "Didn't Like", value: ReportValue.NUMBER_7 },
+  ];
+
+  if (!ts?.finished) {
+    return <p>Please finish a Task to report its status.</p>;
+  }
+
+  if (showComplete) {
+    return <SubimtAMT />;
+  }
+
+  return (
+    <div className="border-2 border-rose-200 rounded">
+      <div className="flex justify-center">
+        <FieldSet className="mt-2">
+          <FieldLegend variant="label" className="my-0 text-rose-950">
+            Please select all reasons why you are reporting this Task:
+          </FieldLegend>
+          <FieldDescription className="my-0 text-rose-950">
+            You must provide at least one reason to report a Task.
+          </FieldDescription>
+          <FieldGroup className="gap-2 my-0 py-0">
+            {reportReasons.map((reason) => (
+              <Field
+                key={reason.id}
+                orientation="horizontal"
+                className="
+                            hover:cursor-pointer"
+              >
+                <Checkbox
+                  id={reason.id}
+                  name={reason.id}
+                  onCheckedChange={(checked) =>
+                    handleCheckboxChange(reason.value, checked as boolean)
+                  }
+                />
+                <FieldLabel
+                  htmlFor={reason.id}
+                  className="font-medium text-rose-950
                                     hover:cursor-pointer hover:font-semibold"
-                                >
-                                    {reason.label}
-                                </FieldLabel>
-                            </Field>
-                        ))}
-
-                    </FieldGroup>
-                </FieldSet>
-            </div>
-            <div className="flex justify-center my-2 space-x-5">
-                <Button variant="outline" size="icon" aria-label="Submit"
-                    className="
+                >
+                  {reason.label}
+                </FieldLabel>
+              </Field>
+            ))}
+          </FieldGroup>
+        </FieldSet>
+      </div>
+      <div className="flex justify-center my-2 space-x-5">
+        <Button
+          variant="outline"
+          size="icon"
+          aria-label="Submit"
+          className="
                     border-2 rounded border-zinc-800 text-zinc-800
                     hover:cursor-pointer hover:bg-zinc-800 hover:text-zinc-50"
-                    onClick={onClose}>
-                    <XIcon />
-                </Button>
-                <Button variant="outline"
-                    className="
+          onClick={onClose}
+        >
+          <XIcon />
+        </Button>
+        <Button
+          variant="outline"
+          className="
                     border-2 rounded border-rose-400 text-rose-950
                     hover:cursor-pointer hover:bg-rose-400 hover:text-rose-50"
-                    onClick={clicked_submit}>Submit and Complete HIT</Button>
-            </div>
-        </div>
-    )
-}
+          onClick={clicked_submit}
+        >
+          Submit and Complete HIT
+        </Button>
+      </div>
+    </div>
+  );
+};
 
 const SubimtAMT = () => {
-    const bpuid = useAppSelector(state => state.app.bpuid)
-    const assignment_id = useAppSelector(state => state.app.assignment_id)
-    const ts = useAppSelector(state => state.app.taskStatus)
-    const turkSubmitTo = useAppSelector(state => state.app.turkSubmitTo)
+  const bpuid = useAppSelector((state) => state.app.bpuid);
+  const assignment_id = useAppSelector((state) => state.app.assignment_id);
+  const ts = useAppSelector((state) => state.app.taskStatus);
+  const turkSubmitTo = useAppSelector((state) => state.app.turkSubmitTo);
 
-    const formRef = useRef<HTMLFormElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
 
-    useEffect(() => {
-        if (!ts) return;
-        if (!bpuid) return;
-        if (!assignment_id) return;
-        if (!turkSubmitTo) return;
+  useEffect(() => {
+    if (!ts) return;
+    if (!bpuid) return;
+    if (!assignment_id) return;
+    if (!turkSubmitTo) return;
 
-        if (formRef.current) {
-            formRef.current.submit();
-        }
-    }, [ts?.tsid, bpuid, assignment_id, turkSubmitTo]);
+    if (formRef.current) {
+      formRef.current.submit();
+    }
+  }, [ts?.tsid, bpuid, assignment_id, turkSubmitTo]);
+
+  return (
+    <>
+      <form
+        ref={formRef}
+        action={`${turkSubmitTo}/mturk/externalSubmit`}
+        method="POST"
+        style={{ display: "none" }}
+      >
+        <input type="hidden" name="assignmentId" value={assignment_id} />
+        <input type="hidden" name="tsid" value={ts?.tsid} />
+        <input type="hidden" name="amt_assignment_id" value={assignment_id} />
+        <input type="hidden" name="amt_worker_id" value={bpuid} />
+        <button type="submit">Submit HIT</button>
+      </form>
+    </>
+  );
+};
 
-    return (
-        <>
-            <form
-                ref={formRef}
-                action={`${turkSubmitTo}/mturk/externalSubmit`}
-                method="POST"
-                style={{ display: 'none' }}>
-                <input type="hidden" name="assignmentId" value={assignment_id} />
-                <input type="hidden" name="tsid" value={ts?.tsid} />
-                <input type="hidden" name="amt_assignment_id" value={assignment_id} />
-                <input type="hidden" name="amt_worker_id" value={bpuid} />
-                <button type="submit">Submit HIT</button>
-            </form>
-        </>
-    )
-}
+const SurveyMonitor = () => {
+  const dispatch = useAppDispatch();
 
+  const [isPolling, setIsPolling] = useState(true);
+  // const [timeAgo, setTimeAgo] = useState("");
 
-const SurveyMonitor = () => {
-    const dispatch = useAppDispatch()
-
-    const [isPolling, setIsPolling] = useState(true);
-    // const [timeAgo, setTimeAgo] = useState("");
-
-    const [showComplete, setShowComplete] = useState(false);
-    const [showReport, setShowReport] = useState(false);
-
-    const bpuid = useAppSelector(state => state.app.bpuid)
-    const entered = useAppSelector(state => state.app.currentBucketEntered)
-    const isLow = useAppSelector(state => isLowBalance(state))
-
-    const ts = useAppSelector(state => state.app.taskStatus)
-    const isBaddie = ts?.status_code_1 === "SESSION_START_FAIL" || ts?.status_code_1 === "SESSION_START_QUALITY_FAIL" || ts?.status_code_1 === "SESSION_CONTINUE_QUALITY_FAIL";
-
-    // useEffect(() => {
-    //     if (!ts) return;
-
-    //     const updateTimeAgo = () => {
-    //         const time_ago = moment(ts.started).fromNow();
-    //         setTimeAgo(time_ago);
-    //     };
-
-    //     // Update immediately
-    //     updateTimeAgo();
-
-    //     // Then update every minute
-    //     const intervalId = setInterval(updateTimeAgo, 60 * 1000);
-
-    //     return () => clearInterval(intervalId);
-    // }, [ts]);
-
-    useEffect(() => {
-        if (!bpuid) return;
-        if (!entered) return;
-        if (!isPolling) return;
-
-        const pollApi = async () => {
-            new StatusApi().listTaskStatusesProductIdStatusGet(
-                bpid,  // productId
-                bpuid,  // Worker ID
-                entered,  // startedAfter
-                moment.utc().unix() // startedBefore    
-            ).then(res => {
-                const d = res.data as TasksStatusResponse;
-
-                if (!d.tasks_status || d.tasks_status.length === 0) {
-                    // Likely still in a GRS survey
-                    return;
-                }
-
-                // if (d_len >= 2) Sentry.captureMessage("Results returned back multiple")
-                const ts = d.tasks_status![0] as TaskStatusResponse;
-                dispatch(setTaskStatus(ts))
-
-                if (ts.status == 2 || ts.status == 3) {
-                    // INCOMPLETE + COMPLETE
-                    setIsPolling(false);
-                }
-            });
-
-            // If there is already a TaskStatus, update the time ago
-            // if (ts) {
-            //     const time_ago = moment(ts.started).fromNow();
-            //     setTimeAgo(time_ago);
-            // }
-        };
-
-        // Call immediately on mount, then set up interval
-        pollApi();
-        const intervalId = setInterval(pollApi, 4 * 1000);
-
-        // Cleanup: stop interval when component unmounts or isPolling changes
-        return () => clearInterval(intervalId);
-    }, [isPolling, entered]);
-
-    if (!ts) {
-        return (
-            <p>Loading</p>
-        )
-    }
+  const [showComplete, setShowComplete] = useState(false);
+  const [showReport, setShowReport] = useState(false);
 
-    // This is if they are actively in a survey or we can't determine the 
-    // status yet. We want to show the timer and keep them on this page to 
-    // monitor for completion. This gets shown no matter what regardless of 
-    // balance.
-    //
-    // 0 - UNKNOWN, 1 - ENTER
-    if (ts.status === 0 || ts.status === 1) {
-        return (
-            <>
-                <div>
-                    <h2 className="
-                    bg-blue-500 rounded py-2
-                    text-white text-2xl font-semibold text-center">
-                        In Progress
-                    </h2>
-                    <p className="
-                    py-4
-                    text-zinc-500 text-2xl font-semibold text-center">
-                        We're actively monitoring your Task status.
-                    </p>
-                </div>
-            </>
+  const bpuid = useAppSelector((state) => state.app.bpuid);
+  const entered = useAppSelector((state) => state.app.currentBucketEntered);
+  const isLow = useAppSelector((state) => isLowBalance(state));
+
+  const ts = useAppSelector((state) => state.app.taskStatus);
+  const isBaddie =
+    ts?.status_code_1 === "SESSION_START_FAIL" ||
+    ts?.status_code_1 === "SESSION_START_QUALITY_FAIL" ||
+    ts?.status_code_1 === "SESSION_CONTINUE_QUALITY_FAIL";
+
+  // useEffect(() => {
+  //     if (!ts) return;
+
+  //     const updateTimeAgo = () => {
+  //         const time_ago = moment(ts.started).fromNow();
+  //         setTimeAgo(time_ago);
+  //     };
+
+  //     // Update immediately
+  //     updateTimeAgo();
+
+  //     // Then update every minute
+  //     const intervalId = setInterval(updateTimeAgo, 60 * 1000);
+
+  //     return () => clearInterval(intervalId);
+  // }, [ts]);
+
+  useEffect(() => {
+    if (!bpuid) return;
+    if (!entered) return;
+    if (!isPolling) return;
+
+    const pollApi = async () => {
+      new StatusApi()
+        .listTaskStatusesProductIdStatusGet(
+          bpid, // productId
+          bpuid, // Worker ID
+          entered, // startedAfter
+          moment.utc().unix(), // startedBefore
         )
-    }
+        .then((res) => {
+          const d = res.data as TasksStatusResponse;
+
+          if (!d.tasks_status || d.tasks_status.length === 0) {
+            // Likely still in a GRS survey
+            return;
+          }
+
+          // if (d_len >= 2) Sentry.captureMessage("Results returned back multiple")
+          const ts = d.tasks_status![0] as TaskStatusResponse;
+          dispatch(setTaskStatus(ts));
+
+          if (ts.status == 2 || ts.status == 3) {
+            // INCOMPLETE + COMPLETE
+            setIsPolling(false);
+          }
+        });
+
+      // If there is already a TaskStatus, update the time ago
+      // if (ts) {
+      //     const time_ago = moment(ts.started).fromNow();
+      //     setTimeAgo(time_ago);
+      // }
+    };
 
-    // This is if they have finished a survey complete and it resulted in a 
-    // COMPLETE or a INCOMPLETE (doesn't matter). They can now submit the HIT.
-    //
-    // 2 - INCOMPLETE, 3 - COMPLETE
+    // Call immediately on mount, then set up interval
+    pollApi();
+    const intervalId = setInterval(pollApi, 4 * 1000);
+
+    // Cleanup: stop interval when component unmounts or isPolling changes
+    return () => clearInterval(intervalId);
+  }, [isPolling, entered]);
+
+  if (!ts) {
+    return <p>Loading</p>;
+  }
+
+  // This is if they are actively in a survey or we can't determine the
+  // status yet. We want to show the timer and keep them on this page to
+  // monitor for completion. This gets shown no matter what regardless of
+  // balance.
+  //
+  // 0 - UNKNOWN, 1 - ENTER
+  if (ts.status === 0 || ts.status === 1) {
     return (
-        <>
-            <div>
-                <h2 className="
+      <>
+        <div>
+          <h2
+            className="
                     bg-blue-500 rounded py-2
-                    text-white text-2xl font-semibold text-center">
-                    {ts.status === 3 ? "Survey Complete!" : "Survey Terminated."}
-                </h2>
-
-                {((ts.status === 3 || !isLow) && !isBaddie) && (
-                    <p className="
+                    text-white text-2xl font-semibold text-center"
+          >
+            In Progress
+          </h2>
+          <p
+            className="
+                    py-4
+                    text-zinc-500 text-2xl font-semibold text-center"
+          >
+            We're actively monitoring your Task status.
+          </p>
+        </div>
+      </>
+    );
+  }
+
+  // This is if they have finished a survey complete and it resulted in a
+  // COMPLETE or a INCOMPLETE (doesn't matter). They can now submit the HIT.
+  //
+  // 2 - INCOMPLETE, 3 - COMPLETE
+  return (
+    <>
+      <div>
+        <h2
+          className="
+                    bg-blue-500 rounded py-2
+                    text-white text-2xl font-semibold text-center"
+        >
+          {ts.status === 3 ? "Survey Complete!" : "Survey Terminated."}
+        </h2>
+
+        {(ts.status === 3 || !isLow) && !isBaddie && (
+          <p
+            className="
                     py-2
-                    text-zinc-500 text-md font-medium text-center">
-                        You may now submit the HIT.
-                    </p>
-                )}
-            </div>
-
-            {(isBaddie) ? (
-                <>
-                    <div className="
+                    text-zinc-500 text-md font-medium text-center"
+          >
+            You may now submit the HIT.
+          </p>
+        )}
+      </div>
+
+      {isBaddie ? (
+        <>
+          <div
+            className="
                     border-2 border-rose-500 rounded py-2
-                    bg-rose-400 text-rose-700">
-                        <h2 className="text-center text-xl font-bold text-white">
-                            Quality Check Failed.
-                        </h2>
-                        <p className="px-4 py-2 text-center text-sm font-medium text-white">
-                            Unfortunately, it looks like you did not pass the quality check for this survey.
-                        </p>
-
-                        <p className="
+                    bg-rose-400 text-rose-700"
+          >
+            <h2 className="text-center text-xl font-bold text-white">
+              Quality Check Failed.
+            </h2>
+            <p className="px-4 py-2 text-center text-sm font-medium text-white">
+              Unfortunately, it looks like you did not pass the quality check
+              for this survey.
+            </p>
+
+            <p
+              className="
                     pt-0 pb-4
-                    text-red-950 text-sm font-semibold text-center">
-                            Please return the HIT to avoid having your assignment rejected.
-                        </p>
-                    </div>
-                </>
-
-            ) : (
-                <>
-                    {(ts.status === 3 || !isLow) ? (
-                        <>
-                            <div className="flex justify-center my-4 space-x-5">
-
-                                <button type="button" className="
+                    text-red-950 text-sm font-semibold text-center"
+            >
+              Please return the HIT to avoid having your assignment rejected.
+            </p>
+          </div>
+        </>
+      ) : (
+        <>
+          {ts.status === 3 || !isLow ? (
+            <>
+              <div className="flex justify-center my-4 space-x-5">
+                <button
+                  type="button"
+                  className="
                 border-4 rounded border-emerald-400 py-1 px-3
                 text-xl font-bold text-emerald-950
                 hover:cursor-pointer hover:bg-emerald-400 hover:text-emerald-50"
-                                    onClick={() => setShowComplete(true)}
-                                >Submit HIT</button>
-
-                                <button type="button" className="
+                  onClick={() => setShowComplete(true)}
+                >
+                  Submit HIT
+                </button>
+
+                <button
+                  type="button"
+                  className="
                 border-4 rounded border-rose-200 py-1 px-3
                 text-xl font-bold text-rose-200
                 hover:cursor-pointer hover:border-rose-500 hover:bg-rose-400 hover:text-rose-50"
-                                    onClick={() => setShowReport(!showReport)}
-                                >Report Survey</button>
-                            </div>
-
-                            {showComplete && <SubimtAMT />}
-                            {showReport && <Report onClose={() => setShowReport(false)} />}
-                        </>
-                    ) : (
-                        <div>
-                            <p className="
-                    text-red-600 text-lg font-semibold text-center">
-                                Your balance is low. You cannot submit the HIT at this time.
-                            </p>
-
-                            <p className="
-                    pt-0 pb-4
-                    text-red-950 text-sm font-semibold text-center">
-                                Please return the HIT to avoid having your assignment rejected.
-                            </p>
-                        </div>
-                    )}
-                </>
-
-            )}
-
+                  onClick={() => setShowReport(!showReport)}
+                >
+                  Report Survey
+                </button>
+              </div>
+
+              {showComplete && <SubimtAMT />}
+              {showReport && <Report onClose={() => setShowReport(false)} />}
+            </>
+          ) : (
+            <div>
+              <p
+                className="
+                    text-red-600 text-lg font-semibold text-center"
+              >
+                Your balance is low. You cannot submit the HIT at this time.
+              </p>
 
+              <p
+                className="
+                    pt-0 pb-4
+                    text-red-950 text-sm font-semibold text-center"
+              >
+                Please return the HIT to avoid having your assignment rejected.
+              </p>
+            </div>
+          )}
         </>
-    )
-}
-
+      )}
+    </>
+  );
+};
 
 const LOISelect = () => {
-    // This is what's responsible for being able to click on the text 
-    //  we set the global LOI times.
-
-    const dispatch = useAppDispatch()
-    const loi: number = useAppSelector(state => state.app.loi)
-    const bucket = useAppSelector(state => selectBucket(state))
-
-    const toggle_loi = function () {
-        dispatch(setLOI(loi >= 1800 ? 600 : loi + 600))
-    }
-
-    const time_f = useAppSelector(state => getLOIText(state))
-
-    const avg_time_f = ((bucket?.duration.q2 ?? 0) / 60).toLocaleString(
-        'en-US', { minimumFractionDigits: 0, maximumFractionDigits: 1 })
-
-    const formatter = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-    });
-    const avg_pay_f: string = formatter.format((bucket?.payout.q2 ?? 0) / 100)
-
-    return (
-        <div className="bg-zinc-100 rounded py-2 m-0">
-            <p className="text-zinc-700 text-2xl text-center font-bold m-0">
-                I have <span
-                    className="cursor-pointer text-emerald-600 italic hover:text-emerald-700 hover:underline"
-                    onClick={toggle_loi}>{time_f}</span> minutes
-            </p>
-            <p
-                className="text-center text-xs font-thin m-0 text-zinc-500">
-                The average time spent is {avg_time_f} minutes and pays {avg_pay_f}</p>
-        </div>
-    )
-
+  // This is what's responsible for being able to click on the text
+  //  we set the global LOI times.
+
+  const dispatch = useAppDispatch();
+  const loi: number = useAppSelector((state) => state.app.loi);
+  const bucket = useAppSelector((state) => selectBucket(state));
+
+  const toggle_loi = function () {
+    dispatch(setLOI(loi >= 1800 ? 600 : loi + 600));
+  };
+
+  const time_f = useAppSelector((state) => getLOIText(state));
+
+  const avg_time_f = ((bucket?.duration.q2 ?? 0) / 60).toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+  });
+
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  });
+  const avg_pay_f: string = formatter.format((bucket?.payout.q2 ?? 0) / 100);
+
+  return (
+    <div className="bg-zinc-100 rounded py-2 m-0">
+      <p className="text-zinc-700 text-2xl text-center font-bold m-0">
+        I have{" "}
+        <span
+          className="cursor-pointer text-emerald-600 italic hover:text-emerald-700 hover:underline"
+          onClick={toggle_loi}
+        >
+          {time_f}
+        </span>{" "}
+        minutes
+      </p>
+      <p className="text-center text-xs font-thin m-0 text-zinc-500">
+        The average time spent is {avg_time_f} minutes and pays {avg_pay_f}
+      </p>
+    </div>
+  );
 };
 
 const SurveyLoading = () => {
-    return (
-        <div className="
+  return (
+    <div
+      className="
             border-8 border-emerald-400 rounded py-0 my-2
             text-center text-3xl 
-            hover:cursor-pointer hover:bg-green-500 hover:text-white">
-            <p className="py-2 text-center text-3xl font-semibold">
-                Survey Loading…
-            </p>
-        </div>
-    )
-}
-
+            hover:cursor-pointer hover:bg-green-500 hover:text-white"
+    >
+      <p className="py-2 text-center text-3xl font-semibold">Survey Loading…</p>
+    </div>
+  );
+};
 
 const NoSurveys = () => {
-    const offerwall_reasons = useAppSelector(state => state.app.offerwall_reasons)
-
-    const REASON_DISPLAY: Record<OfferwallReason, { label: string; description: string }> = {
-        [OfferwallReason.UserBlocked]: {
-            label: "Account Restricted",
-            description: "Your account has been restricted.",
-        },
-        [OfferwallReason.HighReconRate]: {
-            label: "High Reconciliation Rate",
-            description: "Your account has an unusually high reconciliation rate.",
-        },
-        [OfferwallReason.UncommonDemographics]: {
-            label: "Demographic Mismatch",
-            description: "No surveys require your current demographics.",
-        },
-        [OfferwallReason.UnderMinimumAge]: {
-            label: "Age Requirement Not Met",
-            description: "You must meet the minimum age requirement to participate.",
-        },
-        [OfferwallReason.ExhaustedHighValueSupply]: {
-            label: "No Premium Offers Available",
-            description: "You've attempted all premium surveys.",
-        },
-        [OfferwallReason.AllEligibleAttempted]: {
-            label: "All Offers Attempted",
-            description: "You've attempted all available surveys.",
-        },
-        [OfferwallReason.LowCurrentSupply]: {
-            label: "Limited Availability",
-            description: "There are currently limited opportunities available.",
-        },
-    };
-
-    function formatReasons(reasons: OfferwallReason[]): { label: string; description: string }[] {
-        return reasons.map((r) => REASON_DISPLAY[r]);
-    }
+  const offerwall_reasons = useAppSelector(
+    (state) => state.app.offerwall_reasons,
+  );
 
-    return (
-        <>
-            <div className="
+  const REASON_DISPLAY: Record<
+    OfferwallReason,
+    { label: string; description: string }
+  > = {
+    [OfferwallReason.UserBlocked]: {
+      label: "Account Restricted",
+      description: "Your account has been restricted.",
+    },
+    [OfferwallReason.HighReconRate]: {
+      label: "High Reconciliation Rate",
+      description: "Your account has an unusually high reconciliation rate.",
+    },
+    [OfferwallReason.UncommonDemographics]: {
+      label: "Demographic Mismatch",
+      description: "No surveys require your current demographics.",
+    },
+    [OfferwallReason.UnderMinimumAge]: {
+      label: "Age Requirement Not Met",
+      description: "You must meet the minimum age requirement to participate.",
+    },
+    [OfferwallReason.ExhaustedHighValueSupply]: {
+      label: "No Premium Offers Available",
+      description: "You've attempted all premium surveys.",
+    },
+    [OfferwallReason.AllEligibleAttempted]: {
+      label: "All Offers Attempted",
+      description: "You've attempted all available surveys.",
+    },
+    [OfferwallReason.LowCurrentSupply]: {
+      label: "Limited Availability",
+      description: "There are currently limited opportunities available.",
+    },
+  };
+
+  function formatReasons(
+    reasons: OfferwallReason[],
+  ): { label: string; description: string }[] {
+    return reasons.map((r) => REASON_DISPLAY[r]);
+  }
+
+  return (
+    <>
+      <div
+        className="
             border-8 border-emerald-400 rounded py-0 my-2
             text-center text-3xl 
-            hover:cursor-pointer hover:bg-green-500 hover:text-white">
-                <p className="py-2 text-center text-3xl font-semibold">
-                    No Surveys available…
-                </p>
-            </div>
-
-            {formatReasons(offerwall_reasons).map(r => {
-                return (
-                    <div className="
+            hover:cursor-pointer hover:bg-green-500 hover:text-white"
+      >
+        <p className="py-2 text-center text-3xl font-semibold">
+          No Surveys available…
+        </p>
+      </div>
+
+      {formatReasons(offerwall_reasons).map((r) => {
+        return (
+          <div
+            className="
                     border-6 border-rose-200 rounded py-0 my-2
                     text-center 
-                    hover:cursor-pointer hover:bg-rose-200 hover:text-rose-950  ">
-                        <p className="py-2 text-center text-md font-semibold text-rose-600">
-                            {r.description}
-                        </p>
-                    </div>
-                )
-            })}
-        </>
-    )
-}
+                    hover:cursor-pointer hover:bg-rose-200 hover:text-rose-950  "
+          >
+            <p className="py-2 text-center text-md font-semibold text-rose-600">
+              {r.description}
+            </p>
+          </div>
+        );
+      })}
+    </>
+  );
+};
 
 const BucketDetails = () => {
-    const bucket = useAppSelector(state => selectBucket(state))
-    if (!bucket) return null;
-    const [showDetails, setShowDetails] = useState(false);
-
-    const columnHelper = createColumnHelper<BucketTask>()
-    const columns = [
-        columnHelper.display({
-            id: 'index',
-            header: '#',
-            cell: ({ row }) => row.index + 1,
-            size: 25,
-            meta: {
-                align: 'center'
-            }
-        }),
-        columnHelper.accessor('source', {
-            header: () => 'Marketplace',
-            cell: (props) => {
-                const s = props.getValue()
-                return formatSource(s)
-            },
-            size: 85,
-            meta: {
-                align: 'left'
-            }
-        }),
-        columnHelper.accessor('id', {
-            header: () => 'Survey ID',
-            cell: props => {
-                return truncate(props.getValue(), 6, "*****").toUpperCase()
-            },
-            size: 70,
-            meta: {
-                align: 'left'
-            }
-        }),
-        columnHelper.accessor('payout', {
-            header: () => 'Amount',
-            cell: (props) => {
-                const val = props.renderValue() as number;
-                return formatCentsToUSD(val)
-            },
-            size: 50,
-            meta: {
-                align: 'center'
-            }
-        }),
-        columnHelper.accessor('loi', {
-            header: () => 'Duration',
-            cell: (props) => {
-                const val = props.renderValue() as number;
-                return `${Math.round(val / 60)} min`
-            },
-            size: 50,
-            meta: {
-                align: 'center'
-            }
-        }),
-    ]
-
-    const table = useReactTable({
-        'data': bucket.contents,
-        'columns': columns,
-        getCoreRowModel: getCoreRowModel(),
-    });
-
-    return (
-        <>
-            <div className="w-full text-center text-[8px] text-emerald-600
+  const bucket = useAppSelector((state) => selectBucket(state));
+  if (!bucket) return null;
+  const [showDetails, setShowDetails] = useState(false);
+
+  const columnHelper = createColumnHelper<BucketTask>();
+  const columns = [
+    columnHelper.display({
+      id: "index",
+      header: "#",
+      cell: ({ row }) => row.index + 1,
+      size: 25,
+      meta: {
+        align: "center",
+      },
+    }),
+    columnHelper.accessor("source", {
+      header: () => "Marketplace",
+      cell: (props) => {
+        const s = props.getValue();
+        return formatSource(s);
+      },
+      size: 85,
+      meta: {
+        align: "left",
+      },
+    }),
+    columnHelper.accessor("id", {
+      header: () => "Survey ID",
+      cell: (props) => {
+        return truncate(props.getValue(), 6, "*****").toUpperCase();
+      },
+      size: 70,
+      meta: {
+        align: "left",
+      },
+    }),
+    columnHelper.accessor("payout", {
+      header: () => "Amount",
+      cell: (props) => {
+        const val = props.renderValue() as number;
+        return formatCentsToUSD(val);
+      },
+      size: 50,
+      meta: {
+        align: "center",
+      },
+    }),
+    columnHelper.accessor("loi", {
+      header: () => "Duration",
+      cell: (props) => {
+        const val = props.renderValue() as number;
+        return `${Math.round(val / 60)} min`;
+      },
+      size: 50,
+      meta: {
+        align: "center",
+      },
+    }),
+  ];
+
+  const table = useReactTable({
+    data: bucket.contents,
+    columns: columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <>
+      <div
+        className="w-full text-center text-[8px] text-emerald-600
             rounded py-2 my-1
             hover:cursor-pointer hover:text-emerald-700 hover:underline hover:bg-emerald-200 
             "
-                onClick={() => setShowDetails(!showDetails)}
-            >
-                ({showDetails ? 'Hide' : 'Show'} details of surveys in this bucket)
-            </div>
-
-            {showDetails && (
-                <div className="w-full border-t-1 border-emerald-200 py-1 my-0 flex justify-center">
-                    <table className="text-[10px] text-emerald-900 table-fixed border-collapse">
-                        <thead className="font-bold">
-                            {table.getHeaderGroups().map((headerGroup) => (
-
-                                <tr key={headerGroup.id}>
-                                    {headerGroup.headers.map((header) => {
-                                        const align = header.column.columnDef.meta?.align || 'left';
-                                        const alignClass = align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left';
-
-                                        return (
-                                            <th
-                                                key={header.id}
-                                                className={`p-0 m-0 ${alignClass}`}
-                                                style={{
-                                                    width: `${header.column.getSize()}px`,
-                                                }}
-                                            >
-                                                {flexRender(
-                                                    header.column.columnDef.header,
-                                                    header.getContext(),
-                                                )}
-                                            </th>
-                                        )
-                                    })}
-                                </tr>
-                            ))}
-                        </thead>
-                        <tbody>
-                            {table.getRowModel().rows.map((row) => (
-                                <tr key={row.id}>
-                                    {row.getVisibleCells().map((cell) => {
-                                        const align = cell.column.columnDef.meta?.align || 'left';
-                                        const alignClass = align === 'center' ? 'text-center' :
-                                            align === 'right' ? 'text-right' : 'text-left';
-
-                                        return (
-                                            <td key={cell.id}
-                                                className={`p-0 ${alignClass}`}
-                                                style={{
-                                                    width: `${cell.column.getSize()}px`,
-                                                }}
-                                            >
-                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                            </td>
-                                        )
-                                    })}
-                                </tr>
-                            ))}
-                        </tbody>
-
-                    </table>
-                </div>
-            )}
-        </>
-    )
+        onClick={() => setShowDetails(!showDetails)}
+      >
+        ({showDetails ? "Hide" : "Show"} details of surveys in this bucket)
+      </div>
+
+      {showDetails && (
+        <div className="w-full border-t-1 border-emerald-200 py-1 my-0 flex justify-center">
+          <table className="text-[10px] text-emerald-900 table-fixed border-collapse">
+            <thead className="font-bold">
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => {
+                    const align = header.column.columnDef.meta?.align || "left";
+                    const alignClass =
+                      align === "center"
+                        ? "text-center"
+                        : align === "right"
+                          ? "text-right"
+                          : "text-left";
+
+                    return (
+                      <th
+                        key={header.id}
+                        className={`p-0 m-0 ${alignClass}`}
+                        style={{
+                          width: `${header.column.getSize()}px`,
+                        }}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                      </th>
+                    );
+                  })}
+                </tr>
+              ))}
+            </thead>
+            <tbody>
+              {table.getRowModel().rows.map((row) => (
+                <tr key={row.id}>
+                  {row.getVisibleCells().map((cell) => {
+                    const align = cell.column.columnDef.meta?.align || "left";
+                    const alignClass =
+                      align === "center"
+                        ? "text-center"
+                        : align === "right"
+                          ? "text-right"
+                          : "text-left";
+
+                    return (
+                      <td
+                        key={cell.id}
+                        className={`p-0 ${alignClass}`}
+                        style={{
+                          width: `${cell.column.getSize()}px`,
+                        }}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </>
+  );
 };
 
 const SurveyEnter = () => {
-    const dispatch = useAppDispatch()
-    const loi = useAppSelector(state => state.app.loi)
-    const bpuid = useAppSelector(state => state.app.bpuid)
-
-    const available_cnt = useAppSelector(state => getAvailabilityCount(state))
-    const buckets = useAppSelector(state => state.app.currentBuckets)
-    const bucket = useAppSelector(state => selectBucket(state))
-    const isLow = useAppSelector(state => isLowBalance(state))
-
-    useEffect(() => {
-        if (!bpuid) return;
-
-        new OfferwallApi().topNPlusBlockOfferwallProductIdOfferwallD48cce47Get(
-            bpid,  // productId
-            bpuid, // bpuid
-            undefined,  // ip
-            undefined,  // countryIso
-            undefined,  // languages
-            undefined,  // behavior
-            undefined,  // minPayout
-            loi,  //duration
-            1  // nBins
-        ).then(res => {
-            const top_n_res = res.data.offerwall as TopNPlusBlockOfferWall;
-            dispatch(setAvailabilityCount(top_n_res.availability_count))
-            if (top_n_res.attempted_live_eligible_count) {
-                dispatch(setAttemptedLiveEligibleCount(top_n_res.attempted_live_eligible_count))
-            }
-            dispatch(setCurrentBuckets(top_n_res.buckets))
-            dispatch(setOfferwallReasons(top_n_res.offerwall_reasons ?? []))
-        });
-    }, [loi, bpuid]);
-
-
-    const start_survey = () => {
-        if (!bucket?.uri) return;
-
-        dispatch(setEnteredTimestamp());
-        window.open(bucket.uri, '_blank');
-    }
-
-    if (buckets === undefined) {
-        return <SurveyLoading />
-    }
-
-    if (available_cnt === 0 || buckets.length === 0 || !bucket) {
-        return <NoSurveys />
-    }
-
-    return (
-        <>
-            {isLow && (
-                <div className="
+  const dispatch = useAppDispatch();
+  const loi = useAppSelector((state) => state.app.loi);
+  const bpuid = useAppSelector((state) => state.app.bpuid);
+
+  const available_cnt = useAppSelector((state) => getAvailabilityCount(state));
+  const buckets = useAppSelector((state) => state.app.currentBuckets);
+  const bucket = useAppSelector((state) => selectBucket(state));
+  const isLow = useAppSelector((state) => isLowBalance(state));
+
+  useEffect(() => {
+    if (!bpuid) return;
+
+    new OfferwallApi()
+      .topNPlusBlockOfferwallProductIdOfferwallD48cce47Get(
+        bpid, // productId
+        bpuid, // bpuid
+        undefined, // ip
+        undefined, // countryIso
+        undefined, // languages
+        undefined, // behavior
+        undefined, // minPayout
+        loi, //duration
+        1, // nBins
+      )
+      .then((res) => {
+        const top_n_res = res.data.offerwall as TopNPlusBlockOfferWall;
+        dispatch(setAvailabilityCount(top_n_res.availability_count));
+        if (top_n_res.attempted_live_eligible_count) {
+          dispatch(
+            setAttemptedLiveEligibleCount(
+              top_n_res.attempted_live_eligible_count,
+            ),
+          );
+        }
+        dispatch(setCurrentBuckets(top_n_res.buckets));
+        dispatch(setOfferwallReasons(top_n_res.offerwall_reasons ?? []));
+      });
+  }, [loi, bpuid]);
+
+  const start_survey = () => {
+    if (!bucket?.uri) return;
+
+    dispatch(setEnteredTimestamp());
+    window.open(bucket.uri, "_blank");
+  };
+
+  if (buckets === undefined) {
+    return <SurveyLoading />;
+  }
+
+  if (available_cnt === 0 || buckets.length === 0 || !bucket) {
+    return <NoSurveys />;
+  }
+
+  return (
+    <>
+      {isLow && (
+        <div
+          className="
                 border-8 border-rose-500 rounded py-2
-                bg-rose-400 text-rose-700">
-                    <h2 className="text-center text-xl font-bold text-white">
-                        Your balance is low.
-                    </h2>
-                    <p className="px-4 py-2 text-center text-sm font-medium text-white">
-                        You may continue to attempt surveys, but you will be
-                        advised to return the HIT if your survey attempt does
-                        not result in a complete.
-                    </p>
-                    <p className="px-4 py-2 text-center text-sm font-bold text-white">
-                        HIT submissions with a balance exceeding -$1.00 will
-                        return in rejected assignments.
-                    </p>
-                </div>
-            )}
-
-            <LOISelect />
-            <div
-                onClick={start_survey}
-                className="
+                bg-rose-400 text-rose-700"
+        >
+          <h2 className="text-center text-xl font-bold text-white">
+            Your balance is low.
+          </h2>
+          <p className="px-4 py-2 text-center text-sm font-medium text-white">
+            You may continue to attempt surveys, but you will be advised to
+            return the HIT if your survey attempt does not result in a complete.
+          </p>
+          <p className="px-4 py-2 text-center text-sm font-bold text-white">
+            HIT submissions with a balance exceeding -$1.00 will return in
+            rejected assignments.
+          </p>
+        </div>
+      )}
+
+      <LOISelect />
+      <div
+        onClick={start_survey}
+        className="
                 border-8 border-emerald-400 rounded py-0 my-2
-                hover:cursor-pointer hover:bg-emerald-400 hover:text-emerald-50">
-                <p className="py-2 text-center text-3xl font-semibold">
-                    <a
-                        target="_blank"
-                        rel="noopener noreferrer">
-                        Start Task
-                    </a>
-                </p>
-            </div>
-            <BucketDetails />
-
-            <div className="border-2 border-emerald-200 rounded py-2 m-0">
-                <p className="text-emerald-700 text-sm text-center font-medium px-2 m-0">
-                    <Markdown>
-                        {bucket.eligibility_explanation}
-                    </Markdown>
-                </p>
-            </div>
-        </>
-    )
+                hover:cursor-pointer hover:bg-emerald-400 hover:text-emerald-50"
+      >
+        <p className="py-2 text-center text-3xl font-semibold">
+          <a target="_blank" rel="noopener noreferrer">
+            Start Task
+          </a>
+        </p>
+      </div>
+      <BucketDetails />
+
+      <div className="border-2 border-emerald-200 rounded py-2 m-0">
+        <p className="text-emerald-700 text-sm text-center font-medium px-2 m-0">
+          <Markdown>{bucket.eligibility_explanation}</Markdown>
+        </p>
+      </div>
+    </>
+  );
 };
 
-
 const Work = () => {
-    const entered = useAppSelector(state => state.app.currentBucketEntered)
-    const assignment_id = useAppSelector(state => state.app.assignment_id)
-
-    if (!assignment_id) {
-        return (
-            <p className="text-center text-2xl py-3 text-red-800 font-semibold">
-                No Assignment ID found. Please access this page through
-                the Amazon Mechanical Turk platform.
-            </p>
-        )
-    }
+  const entered = useAppSelector((state) => state.app.currentBucketEntered);
+  const assignment_id = useAppSelector((state) => state.app.assignment_id);
 
+  if (!assignment_id) {
     return (
-        <>
-            {entered ? (
-                <SurveyMonitor />
-            ) : (
-                <SurveyEnter />
-            )}
-        </>
-    )
+      <p className="text-center text-2xl py-3 text-red-800 font-semibold">
+        No Assignment ID found. Please access this page through the Amazon
+        Mechanical Turk platform.
+      </p>
+    );
+  }
+
+  return <>{entered ? <SurveyMonitor /> : <SurveyEnter />}</>;
 };
 
-
-export default Work;
\ No newline at end of file
+export default Work;
diff --git a/jb-ui/src/store.ts b/jb-ui/src/store.ts
index 7b4d3e3..07cac9e 100644
--- a/jb-ui/src/store.ts
+++ b/jb-ui/src/store.ts
@@ -1,32 +1,31 @@
-import appReducers from "@/models/appSlice"
-import grlStatsReducers from "@/models/grlStatsSlice"
-import grlEventsReducers from "@/models/grlEventsSlice"
-import profilingQuestionsReducers from "@/models/profilingQuestionsSlice"
-import type { Action, ThunkAction } from '@reduxjs/toolkit'
-import { configureStore } from '@reduxjs/toolkit'
-
+import appReducers from "@/models/appSlice";
+import grlStatsReducers from "@/models/grlStatsSlice";
+import grlEventsReducers from "@/models/grlEventsSlice";
+import profilingQuestionsReducers from "@/models/profilingQuestionsSlice";
+import type { Action, ThunkAction } from "@reduxjs/toolkit";
+import { configureStore } from "@reduxjs/toolkit";
 
 export const store = configureStore({
-    reducer: {
-        app: appReducers,
-        stats: grlStatsReducers,
-        events: grlEventsReducers,
-        profilingQuestions: profilingQuestionsReducers,
-    }
-})
+  reducer: {
+    app: appReducers,
+    stats: grlStatsReducers,
+    events: grlEventsReducers,
+    profilingQuestions: profilingQuestionsReducers,
+  },
+});
 
 // Infer the type of `store`
-export type AppStore = typeof store
+export type AppStore = typeof store;
 // Infer the `AppDispatch` type from the store itself
-export type AppDispatch = typeof store.dispatch
+export type AppDispatch = typeof store.dispatch;
 // Same for the `RootState` type
 
-export type RootState = ReturnType<typeof store.getState>
+export type RootState = ReturnType<typeof store.getState>;
 
 // Define a reusable type describing thunk functions
 export type AppThunk<ThunkReturnType = void> = ThunkAction<
-    ThunkReturnType,
-    RootState,
-    unknown,
-    Action
->
+  ThunkReturnType,
+  RootState,
+  unknown,
+  Action
+>;
diff --git a/jb-ui/src/vite-env.d.ts b/jb-ui/src/vite-env.d.ts
index 11d7a7a..93dc3cc 100644
--- a/jb-ui/src/vite-env.d.ts
+++ b/jb-ui/src/vite-env.d.ts
@@ -1,17 +1,17 @@
 /// <reference types="vite/client" />
 
 interface ViteTypeOptions {
-    // By adding this line, you can make the type of ImportMetaEnv strict
-    // to disallow unknown keys.
-    // strictImportMetaEnv: unknown
+  // By adding this line, you can make the type of ImportMetaEnv strict
+  // to disallow unknown keys.
+  // strictImportMetaEnv: unknown
 }
 
 interface ImportMetaEnv {
-    readonly VITE_BASENAME: string
-    readonly VITE_BPID: string
-    readonly VITE_TAG_MANAGER: string
+  readonly VITE_BASENAME: string;
+  readonly VITE_BPID: string;
+  readonly VITE_TAG_MANAGER: string;
 }
 
 interface ImportMeta {
-    readonly env: ImportMetaEnv
-}
\ No newline at end of file
+  readonly env: ImportMetaEnv;
+}