diff --git a/apps/hyperdrive-trading/src/ui/base/components/NonIdealState.tsx b/apps/hyperdrive-trading/src/ui/base/components/NonIdealState.tsx
new file mode 100644
index 000000000..18659d1cb
--- /dev/null
+++ b/apps/hyperdrive-trading/src/ui/base/components/NonIdealState.tsx
@@ -0,0 +1,9 @@
+import { ReactElement } from "react";
+
+export function NonIdealState(): ReactElement {
+  return (
+    <div className="rounded-b-lg bg-base-200 p-10 text-center">
+      <p className="text-lg">Nothing to show.</p>
+    </div>
+  );
+}
diff --git a/apps/hyperdrive-trading/src/ui/base/components/tables/GridTableHeader.tsx b/apps/hyperdrive-trading/src/ui/base/components/tables/GridTableHeader.tsx
index 6b1b7ed3f..0fb4f74f8 100644
--- a/apps/hyperdrive-trading/src/ui/base/components/tables/GridTableHeader.tsx
+++ b/apps/hyperdrive-trading/src/ui/base/components/tables/GridTableHeader.tsx
@@ -15,7 +15,7 @@ export function GridTableHeader({
   return (
     <div
       className={classNames(
-        "grid auto-cols-fr grid-flow-col items-center rounded-t-md bg-base-100 text-sm font-light md:text-lg [&>*]:text-ellipsis [&>*]:p-4",
+        "grid auto-cols-fr grid-flow-col items-center rounded-t-md [&>*]:text-ellipsis [&>*]:p-4",
         className,
       )}
     >
diff --git a/apps/hyperdrive-trading/src/ui/base/components/tables/SortableGridTable.tsx b/apps/hyperdrive-trading/src/ui/base/components/tables/SortableGridTable.tsx
index 4349de057..f8788c59a 100644
--- a/apps/hyperdrive-trading/src/ui/base/components/tables/SortableGridTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/base/components/tables/SortableGridTable.tsx
@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { ReactElement, ReactNode, useState } from "react";
 import Skeleton from "react-loading-skeleton";
+import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { GridTableHeader } from "src/ui/base/components/tables/GridTableHeader";
 import { GridTableRow } from "src/ui/base/components/tables/GridTableRow";
 import { GridTableRowLink } from "src/ui/base/components/tables/GridTableRowLink";
@@ -53,7 +54,7 @@ export function SortableGridTable<K extends string>({
   rows,
   onSort,
   headingRowClassName,
-  emptyTableElement = <DefaultEmptyTableElement />,
+  emptyTableElement = <NonIdealState />,
   showSkeleton,
   bodyRowClassName,
   defaultSortOptions,
@@ -204,14 +205,6 @@ function nextSortDirection(
   }
 }
 
-function DefaultEmptyTableElement() {
-  return (
-    <div className="rounded-b-lg bg-base-200 p-10 text-center">
-      <p className="text-lg">Nothing to show.</p>
-    </div>
-  );
-}
-
 interface CellWithTooltipProps {
   content: ReactNode;
   tooltip: string;
@@ -223,7 +216,9 @@ export function CellWithTooltip({
 }: CellWithTooltipProps): ReactElement {
   return (
     <span className="daisy-tooltip" data-tip={tooltip}>
-      {content}
+      <span className="text-sm font-bold text-black text-opacity-60">
+        {content}
+      </span>
     </span>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx
index 1786d67f8..6aa4cd0d0 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx
@@ -129,6 +129,7 @@ export function OpenLongForm({
             />
           </div>
         </Well>
+
         <p className="text-center text-body">
           Please note: 1 hy{hyperdrive.baseToken.symbol} is always worth 1{" "}
           {hyperdrive.baseToken.symbol} at maturity, however its value may
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx
index 14788df30..863889f20 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx
@@ -37,9 +37,9 @@ export function OpenLongModalButton({
               {hyperdrive.baseToken.symbol}
             </p>
             <p className="daisy-label-text">
-              1 hy{hyperdrive.baseToken.symbol} is worth 1{" "}
-              {hyperdrive.baseToken.symbol} at maturity, giving you a
-              predictable fixed rate yield.
+              1 hy{hyperdrive.baseToken.symbol} is always worth 1{" "}
+              {hyperdrive.baseToken.symbol} at maturity. It&apos;s a predictable
+              fixed rate yield.
             </p>
             <div className="mt-4 ml-4 flex flex-col gap-2">
               <ChecklistItem checked readOnly>
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx
index 7c0d20ec6..3c0627f92 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx
@@ -31,21 +31,40 @@ export function OpenLongPreview({
 
       <div className="flex justify-between">
         <p>Fixed rate</p>
-        <p>
-          {long.bondAmount > 0
-            ? `${calculateAnnualizedPercentageChange({
+        <p className="flex items-center">
+          {long.bondAmount > 0 ? (
+            <>
+              <div
+                className={
+                  "daisy-badge daisy-badge-md inline-flex text-success"
+                }
+              >
+                <span>{long.bondAmount > long.baseAmountPaid ? "+" : ""}</span>
+                {long.baseAmountPaid
+                  ? `${formatBalance({
+                      balance: long.bondAmount - long.baseAmountPaid,
+                      decimals: hyperdrive.baseToken.decimals,
+                      places: 4,
+                    })} ${hyperdrive.baseToken.symbol}`
+                  : undefined}
+              </div>
+              {calculateAnnualizedPercentageChange({
                 amountBefore: long.baseAmountPaid,
                 amountAfter: long.bondAmount,
                 days: numDays,
-              })}`
-            : "0"}
+              })}
+            </>
+          ) : (
+            "0"
+          )}
           % APR
         </p>
       </div>
       <div className="flex justify-between">
         <p className="">Matures in</p>
         <p className="">
-          7 days, {new Date(Number(long.maturity * 1000n)).toLocaleDateString()}
+          {convertMillisecondsToDays(hyperdrive.termLengthMS)} days,{" "}
+          {new Date(Number(long.maturity * 1000n)).toLocaleDateString()}
         </p>
       </div>
     </div>
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx
index 791a776bd..f4f29f5dc 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx
@@ -1,10 +1,9 @@
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { ReactElement } from "react";
-import { Link } from "react-router-dom";
 import { Hyperdrive } from "src/appconfig/types";
 import { MAX_UINT256 } from "src/base/constants";
 import { parseUnits } from "src/base/parseUnits";
+import { Well } from "src/ui/base/components/Well/Well";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { AddLiquidityPreview } from "src/ui/hyperdrive/lp/AddLiquidityPreview/AddLiquidityPreview";
@@ -71,22 +70,8 @@ export function AddLiquidityForm({
   });
 
   return (
-    <div className="flex flex-col gap-10">
-      <div className="text-base-content">
-        <h5>Add liquidity</h5>
-        <div className="flex flex-col items-start">
-          <p>Earn trading fees when users open long or shorts</p>
-          <Link
-            className="flex cursor-pointer flex-row items-center text-sm"
-            to={
-              "https://www.notion.so/delv-tech/LP-Profitability-0acf6928b88c4a33875221aa15ca62d2?pvs=4"
-            }
-          >
-            Learn More
-            <ArrowTopRightOnSquareIcon className="ml-1" width={12} />
-          </Link>
-        </div>
-      </div>
+    <div className="flex flex-col gap-4">
+      <h5 className="font-bold">Add liquidity</h5>
       <TokenInput
         token={market.baseToken}
         value={amount ?? ""}
@@ -105,43 +90,56 @@ export function AddLiquidityForm({
       />
 
       {/* New Position Section */}
-      <div className="space-y-4 text-base-content">
-        <h5>Position preview</h5>
-        <AddLiquidityPreview hyperdrive={market} lpShares={lpSharesOut || 0n} />
-      </div>
+      <div className="mt-4 flex flex-col gap-6">
+        <Well elevation="flat">
+          <div className="space-y-4">
+            <span className="text-h6 font-bold">Preview transaction</span>
+            <AddLiquidityPreview
+              hyperdrive={market}
+              lpShares={lpSharesOut || 0n}
+            />
+          </div>
+        </Well>
 
-      {account ? (
-        needsApproval ? (
-          // Approval button
-          <button
-            disabled={!approve}
-            className="daisy-btn-warning daisy-btn"
-            onClick={(e) => {
-              // Do this so we don't close the modal
-              e.preventDefault();
-              approve?.();
-            }}
-          >
-            Approve {market.baseToken.symbol}
-          </button>
+        <p className="text-center text-body">
+          Note: You can withdraw liquidity at any time. If you&apos;re backing
+          open positions, you&apos;ll receive Withdrawal Shares for later
+          redemption.
+        </p>
+
+        {account ? (
+          needsApproval ? (
+            // Approval button
+            <button
+              disabled={!approve}
+              className="daisy-btn-warning daisy-btn"
+              onClick={(e) => {
+                // Do this so we don't close the modal
+                e.preventDefault();
+                approve?.();
+              }}
+            >
+              Approve {market.baseToken.symbol}
+            </button>
+          ) : (
+            // Trade button
+            <button
+              disabled={!addLiquidity || addLiquidityStatus === "loading"}
+              className="daisy-btn-primary daisy-btn"
+              onClick={() => addLiquidity?.()}
+            >
+              Add liquidity
+            </button>
+          )
         ) : (
-          // Trade button
           <button
-            disabled={!addLiquidity || addLiquidityStatus === "loading"}
             className="daisy-btn-primary daisy-btn"
-            onClick={() => addLiquidity?.()}
+            onClick={() => openConnectModal?.()}
           >
-            Add liquidity
+            Connect wallet
           </button>
-        )
-      ) : (
-        <button
-          className="daisy-btn-primary daisy-btn"
-          onClick={() => openConnectModal?.()}
-        >
-          Connect wallet
-        </button>
-      )}
+        )}
+      </div>
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityPreview/AddLiquidityPreview.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityPreview/AddLiquidityPreview.tsx
index 7d09ca61b..36695afec 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityPreview/AddLiquidityPreview.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityPreview/AddLiquidityPreview.tsx
@@ -1,6 +1,5 @@
 import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
-import { Pill } from "src/ui/base/components/Pill";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 
 interface AddLiquidityPreviewProps {
@@ -13,25 +12,17 @@ export function AddLiquidityPreview({
   lpShares,
 }: AddLiquidityPreviewProps): ReactElement {
   return (
-    <div className="flex flex-col gap-y-4 rounded border border-neutral-content bg-transparent p-4">
-      <div className="flex items-center">
-        <h5 className="mr-4 font-bold">{hyperdrive.name}</h5>
-        <Pill className="h-6">LP</Pill>
-      </div>
-
-      <div className="flex flex-col gap-y-1 tracking-wide">
-        <div className="flex">
-          <p className="mr-auto">LP Shares Received</p>
-          <p className="font-semibold tracking-wide">
-            {formatBalance({
-              balance: lpShares,
-              decimals: hyperdrive.baseToken.decimals,
-              places: 4,
-              includeCommas: false,
-            })}{" "}
-            LP
-          </p>
-        </div>
+    <div className="flex flex-col gap-1">
+      <div className="flex justify-between">
+        <p>You receive</p>
+        <p className="font-bold">
+          {formatBalance({
+            balance: lpShares,
+            decimals: hyperdrive.baseToken.decimals,
+            places: 4,
+          })}{" "}
+          LP
+        </p>
       </div>
     </div>
   );
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RedeemWithdrawalSharesForm/RedeemWithdrawalSharesForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RedeemWithdrawalSharesForm/RedeemWithdrawalSharesForm.tsx
index 29b17cd8a..ad20f4ab3 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RedeemWithdrawalSharesForm/RedeemWithdrawalSharesForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RedeemWithdrawalSharesForm/RedeemWithdrawalSharesForm.tsx
@@ -1,7 +1,7 @@
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { MouseEvent, ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
-import { Stat } from "src/ui/base/components/Stat";
+import { Well } from "src/ui/base/components/Well/Well";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { usePreviewRedeemWithdrawalShares } from "src/ui/hyperdrive/lp/hooks/usePreviewRedeemWithdrawalShares";
@@ -55,65 +55,70 @@ export function RedeemWithdrawalSharesForm({
     });
 
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-4">
       {/* Amount to close section */}
-      <div className="space-y-4 text-base-content">
-        <h5>Amount to redeem</h5>
-        <TokenInput
-          token={{
-            name: "Hyperdrive Withdrawal Shares",
-            // TODO: What should the symbol be?
-            symbol: "Withdrawal shares",
-            decimals: baseDecimals,
-            address: "0x00",
-          }}
-          value={amount ?? ""}
-          stat={`Redeemable balance: ${formatBalance({
-            balance: maxRedeemableShares ?? withdrawalShares,
-            decimals: baseDecimals,
-            places: 4,
-          })}`}
-          maxValue={formatUnits(
-            maxRedeemableShares ?? withdrawalShares,
-            baseDecimals,
-          )}
-          onChange={(newAmount) => setAmount(newAmount)}
-        />
-      </div>
+      <h5 className="font-bold">Redeem withdrawal shares</h5>
+      <TokenInput
+        token={{
+          name: "Hyperdrive Withdrawal Shares",
+          // TODO: What should the symbol be?
+          symbol: "Withdrawal shares",
+          decimals: baseDecimals,
+          address: "0x00",
+        }}
+        value={amount ?? ""}
+        stat={`Balance: ${formatBalance({
+          balance: maxRedeemableShares ?? withdrawalShares,
+          decimals: baseDecimals,
+          places: 4,
+        })}`}
+        maxValue={formatUnits(
+          maxRedeemableShares ?? withdrawalShares,
+          baseDecimals,
+        )}
+        onChange={(newAmount) => setAmount(newAmount)}
+      />
 
       {/* You receive Section */}
-      <div className="space-y-4 text-center text-base-content">
-        <Stat
-          label={"You receive"}
-          value={
-            baseAmountOut
-              ? `${formatBalance({
-                  balance: baseAmountOut,
-                  decimals: baseDecimals,
-                  places: 8,
-                })} ${baseSymbol}`
-              : ""
-          }
-        />
-      </div>
+      <div className="mt-4 flex flex-col gap-6">
+        <Well elevation="flat">
+          <div className="space-y-4">
+            <span className="text-h6 font-bold">Preview transaction</span>
+            <div className="flex flex-col gap-1">
+              <div className="flex justify-between">
+                <p>You receive</p>
+                <p className="font-bold">
+                  {baseAmountOut
+                    ? `${formatBalance({
+                        balance: baseAmountOut,
+                        decimals: baseDecimals,
+                        places: 8,
+                      })} ${baseSymbol}`
+                    : ""}
+                </p>
+              </div>
+            </div>
+          </div>
+        </Well>
 
-      {account ? (
-        <button
-          className="daisy-btn-primary daisy-btn"
-          disabled={
-            !redeemWithdrawalShares ||
-            redeemWithdrawalSharesStatus === "loading"
-          }
-          onClick={(e) => {
-            redeemWithdrawalShares?.();
-            onRedeemWithdrawalShares?.(e);
-          }}
-        >
-          Redeem withdrawal shares
-        </button>
-      ) : (
-        <ConnectButton />
-      )}
+        {account ? (
+          <button
+            className="daisy-btn-primary daisy-btn"
+            disabled={
+              !redeemWithdrawalShares ||
+              redeemWithdrawalSharesStatus === "loading"
+            }
+            onClick={(e) => {
+              redeemWithdrawalShares?.();
+              onRedeemWithdrawalShares?.(e);
+            }}
+          >
+            Redeem withdrawal shares
+          </button>
+        ) : (
+          <ConnectButton />
+        )}
+      </div>
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RedeemWithdrawalSharesModalButton/RedeemWithdrawalSharesModalButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RedeemWithdrawalSharesModalButton/RedeemWithdrawalSharesModalButton.tsx
index dc3af5e02..0119a8ddd 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RedeemWithdrawalSharesModalButton/RedeemWithdrawalSharesModalButton.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RedeemWithdrawalSharesModalButton/RedeemWithdrawalSharesModalButton.tsx
@@ -28,13 +28,10 @@ export function RedeemWithdrawalSharesModalButton({
             onClick={closeModal}
           >
             <XMarkIcon
-              className="w-6 text-white opacity-70 hover:opacity-100 focus:opacity-100"
+              className="w-6 opacity-70 hover:opacity-100 focus:opacity-100"
               title="Close position"
             />
           </button>
-          <h3 className="text-h6 font-thin text-base-content">
-            Redeem withdrawal shares
-          </h3>
           <RedeemWithdrawalSharesForm
             hyperdrive={hyperdrive}
             withdrawalShares={withdrawalShares}
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx
index 063c13165..a1e3f5a35 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx
@@ -2,6 +2,7 @@ import { adjustAmountByPercentage } from "@hyperdrive/sdk";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { MouseEvent, ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
+import { Well } from "src/ui/base/components/Well/Well";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { usePreviewRemoveLiquidity } from "src/ui/hyperdrive/lp/hooks/usePreviewRemoveLiquidity";
@@ -21,7 +22,7 @@ export function RemoveLiquidityForm({
   lpShares,
   onRemoveLiquidity,
 }: RemoveLiquidityFormProps): ReactElement {
-  const { decimals: baseDecimals, symbol: baseSymbol } = hyperdrive.baseToken;
+  const { decimals: baseDecimals } = hyperdrive.baseToken;
 
   const { address: account } = useAccount();
 
@@ -58,7 +59,7 @@ export function RemoveLiquidityForm({
           balance: baseAmountOut,
           decimals: baseDecimals,
           places: 8,
-        })} ${baseSymbol}`
+        })}`
       : null;
 
   const formattedWithdrawalSharesOut = withdrawalSharesOut
@@ -70,55 +71,65 @@ export function RemoveLiquidityForm({
     : null;
 
   return (
-    <div className="flex flex-col gap-6">
-      {/* Amount to close section */}
-      <div className="space-y-4 text-base-content">
-        <h5>Amount to remove</h5>
-        <TokenInput
-          token={{
-            name: "Hyperdrive LP",
-            symbol: "LP shares",
-            decimals: baseDecimals,
-            address: "0x00",
-          }}
-          value={amount ?? ""}
-          maxValue={formatUnits(lpShares, baseDecimals)}
-          stat={
-            lpShares
-              ? `Balance: ${formatBalance({
-                  balance: lpShares,
-                  decimals: baseDecimals,
-                  places: 4,
-                })} LP shares`
-              : undefined
-          }
-          onChange={(newAmount) => setAmount(newAmount)}
-        />
-      </div>
+    <div className="flex flex-col gap-4">
+      <h5 className="font-bold">Remove liquidity</h5>
+      <TokenInput
+        token={{
+          name: "Hyperdrive LP",
+          symbol: "LP shares",
+          decimals: baseDecimals,
+          address: "0x00",
+        }}
+        value={amount ?? ""}
+        maxValue={formatUnits(lpShares, baseDecimals)}
+        stat={
+          lpShares
+            ? `Balance: ${formatBalance({
+                balance: lpShares,
+                decimals: baseDecimals,
+                places: 4,
+              })} LP shares`
+            : undefined
+        }
+        onChange={(newAmount) => setAmount(newAmount)}
+      />
 
       {/* You receive Section */}
-      <div className="flex justify-between">
-        <p className="font-light">You receive</p>
-        <p className="tracking-wide">{formattedBaseAmountOut}</p>
-      </div>
-      <div className="flex items-center justify-between">
-        <p className="font-light">Withdrawal shares</p>
-        <p className="tracking-wide">{formattedWithdrawalSharesOut}</p>
-      </div>
+      <div className="mt-4 flex flex-col gap-6">
+        <Well elevation="flat">
+          <div className="space-y-4">
+            <span className="text-h6 font-bold">Preview transaction</span>
+            <div className="flex flex-col gap-1">
+              <div className="flex justify-between">
+                <p>You receive</p>
+                <p>
+                  {formattedBaseAmountOut || 0} {hyperdrive.baseToken.symbol}
+                </p>
+              </div>
+
+              <div className="flex justify-between">
+                <p>Withdrawal shares</p>
+                <p>{formattedWithdrawalSharesOut || 0} Shares</p>
+              </div>
+            </div>
+          </div>
+        </Well>
 
-      {account ? (
-        <button
-          className="daisy-btn-primary daisy-btn"
-          disabled={!removeLiquidity || removeLiquidityStatus === "loading"}
-          onClick={(e) => {
-            removeLiquidity?.();
-          }}
-        >
-          Remove liquidity
-        </button>
-      ) : (
-        <ConnectButton />
-      )}
+        {account ? (
+          <button
+            className="daisy-btn-primary daisy-btn"
+            disabled={!removeLiquidity || removeLiquidityStatus === "loading"}
+            onClick={(e) => {
+              removeLiquidity?.();
+              onRemoveLiquidity?.(e);
+            }}
+          >
+            Remove liquidity
+          </button>
+        ) : (
+          <ConnectButton />
+        )}
+      </div>
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityModalButton/RemoveLiquidityModalButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityModalButton/RemoveLiquidityModalButton.tsx
index 32ef3542a..620be4d16 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityModalButton/RemoveLiquidityModalButton.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityModalButton/RemoveLiquidityModalButton.tsx
@@ -28,13 +28,10 @@ export function RemoveLiquidityModalButton({
             onClick={closeModal}
           >
             <XMarkIcon
-              className="w-6 text-white opacity-70 hover:opacity-100 focus:opacity-100"
+              className="w-6 opacity-70 hover:opacity-100 focus:opacity-100"
               title="Close position"
             />
           </button>
-          <h3 className="text-h6 font-thin text-base-content">
-            Remove liquidity
-          </h3>
           <RemoveLiquidityForm
             hyperdrive={hyperdrive}
             lpShares={lpShares}
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
index 7ae653b46..5bbd4c17e 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
@@ -1,9 +1,8 @@
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { ReactElement } from "react";
-import { Link } from "react-router-dom";
-import { Hyperdrive, Token } from "src/appconfig/types";
+import { Hyperdrive } from "src/appconfig/types";
 import { MAX_UINT256 } from "src/base/constants";
+import { Well } from "src/ui/base/components/Well/Well";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { usePoolInfo } from "src/ui/hyperdrive/hooks/usePoolInfo";
 import { useMaxShort } from "src/ui/hyperdrive/shorts/hooks/useMaxShort";
@@ -77,86 +76,77 @@ export function OpenShortForm({
     },
   });
 
-  const current = new Date();
-  const expiryDate = new Date(current.getTime() + market.termLengthMS);
-  const bondToken = {
-    symbol: `hy${market.baseToken.symbol}`,
-    address: "0x0",
-    decimals: 18,
-    name: "Bonds",
-  } as Token;
-
   return (
-    <div className="flex flex-col gap-10">
-      <div className="text-base-content">
-        <h5>Open a short</h5>
-        <div className="flex flex-col items-start">
-          <p>Earn yield by shorting the current bond price</p>
-          <Link
-            className="flex cursor-pointer flex-row items-center text-sm"
-            to={
-              "https://www.notion.so/delv-tech/Short-Scenarios-ddff34fa457545cdbc7556e57e43b282?pvs=4"
-            }
-          >
-            Learn More
-            <ArrowTopRightOnSquareIcon className="ml-1" width={12} />
-          </Link>
-        </div>
-      </div>
+    <div className="flex flex-col gap-4">
+      <h5 className="font-bold">Short hy{market.baseToken.symbol}</h5>
       <TokenInput
-        token={bondToken}
+        token={{
+          symbol: `hy${market.baseToken.symbol}`,
+          address: "0x0",
+          decimals: 18,
+          name: "Bonds",
+        }}
         inputLabel="Amount to short"
         value={amount ?? ""}
         onChange={(newAmount) => setAmount(newAmount)}
       />
 
       {/* New Position Section */}
-      <div className="space-y-4 text-base-content">
-        <h5>Position preview</h5>
-        <OpenShortPreview
-          market={market}
-          costBasis={baseAmountIn ?? 0n}
-          amountShort={amountAsBigInt ?? 0n}
-          expiryDate={expiryDate}
-        />
-      </div>
+      <div className="mt-4 flex flex-col gap-6">
+        <Well elevation="flat">
+          <div className="space-y-4">
+            <span className="text-h6 font-bold">Preview transaction</span>
+            <OpenShortPreview
+              market={market}
+              costBasis={baseAmountIn ?? 0n}
+              shortSize={amountAsBigInt}
+            />
+          </div>
+        </Well>
 
-      {account ? (
-        needsApproval ? (
-          // Approval button
-          <button
-            disabled={!approve}
-            className="daisy-btn-warning daisy-btn"
-            onClick={(e) => {
-              // Do this so we don't close the modal
-              e.preventDefault();
-              approve?.();
-            }}
-          >
-            <h5>Approve {market.baseToken.symbol}</h5>
-          </button>
+        <p className="text-center text-body">
+          Please note: When you short hy{market.baseToken.symbol} you earn the
+          variable rate on the equivalent amount of {market.baseToken.symbol}{" "}
+          deposited in the yield source.
+        </p>
+
+        {account ? (
+          needsApproval ? (
+            // Approval button
+            <button
+              disabled={!approve}
+              className="daisy-btn-warning daisy-btn"
+              onClick={(e) => {
+                // Do this so we don't close the modal
+                e.preventDefault();
+                approve?.();
+              }}
+            >
+              <h5>Approve {market.baseToken.symbol}</h5>
+            </button>
+          ) : (
+            // Open short button
+            <button
+              disabled={
+                !hasEnoughBalance ||
+                !openShort ||
+                openShortSubmittedStatus === "loading"
+              }
+              className="daisy-btn-accent daisy-btn"
+              onClick={() => openShort?.()}
+            >
+              Short hy{market.baseToken.symbol}
+            </button>
+          )
         ) : (
-          // Open short button
           <button
-            disabled={
-              !hasEnoughBalance ||
-              !openShort ||
-              openShortSubmittedStatus === "loading"
-            }
-            className="daisy-btn-accent daisy-btn"
-            onClick={() => openShort?.()}
+            className="daisy-btn-secondary daisy-btn"
+            onClick={() => openConnectModal?.()}
           >
-            Open short
+            <h5>Connect wallet</h5>
           </button>
-        )
-      ) : (
-        <button
-          className="daisy-btn-secondary daisy-btn"
-          onClick={() => openConnectModal?.()}
-        >
-          <h5>Connect wallet</h5>
-        </button>
-      )}
+        )}
+      </div>
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx
index 8ba02e13f..3a6a94900 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx
@@ -1,84 +1,56 @@
 import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
 import { convertMillisecondsToDays } from "src/base/convertMillisecondsToDays";
-import { Pill } from "src/ui/base/components/Pill";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 
 interface OpenShortPreviewProps {
   market: Hyperdrive;
   costBasis?: bigint;
-  amountShort: bigint;
-  expiryDate: Date;
+  shortSize?: bigint;
 }
 
 export function OpenShortPreview({
   market,
   costBasis,
-  amountShort,
-  expiryDate,
+  shortSize,
 }: OpenShortPreviewProps): ReactElement {
   return (
-    <div className="flex flex-col gap-y-4 rounded border border-neutral-content bg-transparent p-4">
-      <div className="flex items-center">
-        <h5 className="mr-4 font-bold">{market.name}</h5>
-        <Pill variant="Red" className="h-6 text-base-content">
-          Short
-        </Pill>
+    <div className="flex flex-col gap-1">
+      <div className="flex justify-between">
+        <p>Short size</p>
+        <p className="font-bold">
+          {shortSize
+            ? `${formatBalance({
+                balance: shortSize,
+                decimals: market.baseToken.decimals,
+                places: 6,
+              })}`
+            : "0"}{" "}
+          hy{market.baseToken.symbol}
+        </p>
+      </div>
+      <div className="flex justify-between">
+        <p>You pay</p>
+        <p className="font-bold">
+          {costBasis
+            ? `${formatBalance({
+                balance: costBasis,
+                decimals: market.baseToken.decimals,
+                places: 6,
+              })}`
+            : "0"}{" "}
+          {market.baseToken.symbol}
+        </p>
       </div>
 
-      <div className="flex flex-col gap-y-1 tracking-wide">
-        <div className="flex">
-          <p className="mr-auto">Cost Basis</p>
-          <p className="font-semibold tracking-wide">
-            {costBasis
-              ? `${formatBalance({
-                  balance: costBasis,
-                  decimals: market.baseToken.decimals,
-                  places: 6,
-                  includeCommas: false,
-                })} ${market.baseToken.symbol}`
-              : "0"}
-          </p>
-        </div>
-
-        <div className="flex">
-          <p className="mr-auto">Amount</p>
-          <p className="font-semibold tracking-wide">
-            {formatBalance({
-              balance: amountShort,
-              decimals: market.baseToken.decimals,
-              places: 6,
-            })}
-          </p>
-        </div>
-
-        <div className="flex">
-          <p className="mr-auto">Term Length</p>
-          <p className="font-semibold tracking-wide">
-            {convertMillisecondsToDays(market.termLengthMS)} days
-          </p>
-        </div>
-
-        <div className="flex">
-          <p className="mr-auto">Matures</p>
-          <p className="font-semibold tracking-wide">
-            {expiryDate.toLocaleDateString()}
-          </p>
-        </div>
-
-        <div className="flex">
-          <p className="mr-auto">Exposure</p>
-          <p className="font-semibold tracking-wide">
-            {!!costBasis && amountShort > 0n && costBasis > 0n
-              ? `${formatBalance({
-                  balance: amountShort / costBasis,
-                  decimals: market.baseToken.decimals,
-                  places: 4,
-                  includeCommas: false,
-                })}x`
-              : "0"}
-          </p>
-        </div>
+      <div className="flex justify-between">
+        <p>Matures in</p>
+        <p>
+          {convertMillisecondsToDays(market.termLengthMS)} days,{" "}
+          {new Date(
+            Date.now() + Number(market.termLengthMS),
+          ).toLocaleDateString()}
+        </p>
       </div>
     </div>
   );
diff --git a/apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx b/apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx
index de49aec69..f06ab5dda 100644
--- a/apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx
+++ b/apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx
@@ -5,7 +5,7 @@ export function FAQ(): ReactElement {
   return (
     <div className="flex flex-col gap-6 pb-12">
       <div className="flex w-full items-center justify-between border-base-100">
-        <span className="pb-2 text-h5 font-thin">FAQ</span>
+        <span className="pb-2 text-h5 font-bold">FAQ</span>
       </div>
       <Disclosure
         title={<span className="text-h6">How can I get fixed rates?</span>}
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx
index d0abcfcb0..7724973fa 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx
@@ -10,6 +10,7 @@ import {
 import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
 import { makeQueryKey } from "src/base/makeQueryKey";
+import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
 import { useAccount } from "wagmi";
@@ -124,6 +125,7 @@ export function ClosedLongsTable({
           })}
         </tbody>
       </table>
+      {!closedLongs?.length ? <NonIdealState /> : null}
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLpTable/ClosedLpTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLpTable/ClosedLpTable.tsx
index e313cc511..0dcbf7197 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLpTable/ClosedLpTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLpTable/ClosedLpTable.tsx
@@ -36,10 +36,7 @@ export function ClosedLpTable({
       ...closedLpShares.map(
         ({ lpAmount, baseAmount, closedTimestamp, withdrawalShareAmount }) => {
           return [
-            <span
-              key="type"
-              className="font-semibold uppercase italic text-primary"
-            >
+            <span key="type" className="font-semibold uppercase italic">
               LP
             </span>,
             <span key="shares" className="italic">
@@ -89,7 +86,7 @@ export function ClosedLpTable({
             })} ${hyperdrive.baseToken.symbol}`}
           </span>,
           <span key="withdrawalShares" className="italic">
-            0
+            N/A
           </span>,
           <span key="closed-on" className="italic">
             {new Date(Number(redeemedTimestamp * 1000n)).toLocaleDateString()}
@@ -102,12 +99,12 @@ export function ClosedLpTable({
   return (
     <SortableGridTable
       headingRowClassName="grid-cols-5 text-start"
-      bodyRowClassName="grid-cols-5 items-center text-sm md:text-h6 even:bg-base-300/5 h-16"
+      bodyRowClassName="grid-cols-5 items-center even:bg-base-300/5 h-16"
       cols={[
         {
           cell: (
             <CellWithTooltip
-              tooltip="Long and Short positions have a maturity date based on the open date and position duration of the pool whereas LP positions can remain active indefinitely (until closed by the LPer)."
+              tooltip="LP Shares and Withdrawal shares"
               content="Position"
             />
           ),
@@ -115,7 +112,7 @@ export function ClosedLpTable({
         {
           cell: (
             <CellWithTooltip
-              tooltip="LP's proportionate stake in the liquidity pool."
+              tooltip="Amount of LP shares or withdrawal shares that were closed"
               content="Shares closed"
             />
           ),
@@ -124,15 +121,15 @@ export function ClosedLpTable({
           cell: (
             <CellWithTooltip
               content={`Amount received (${hyperdrive.baseToken.symbol})`}
-              tooltip="Total assets collected upon closing the position."
+              tooltip={`Total amount of ${hyperdrive.baseToken.symbol} user received  upon closing the position.`}
             />
           ),
         },
         {
           cell: (
             <CellWithTooltip
-              content="Withdrawal shares"
-              tooltip="Portion of LP's stake withdrawn from the pool."
+              content="Withdrawal shares received"
+              tooltip="Shares to claim idle liquidity to completely exit an LP position"
             />
           ),
         },
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx
index f2dc6f65a..f0f67ca72 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx
@@ -9,6 +9,7 @@ import {
 import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
 import { makeQueryKey } from "src/base/makeQueryKey";
+import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
 import { useAccount } from "wagmi";
@@ -123,6 +124,7 @@ export function ClosedShortsTable({
           })}
         </tbody>
       </table>
+      {!closedShorts?.length ? <NonIdealState /> : null}
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx
index fff32be58..3f91e00e4 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx
@@ -13,6 +13,7 @@ import { Hyperdrive } from "src/appconfig/types";
 import { calculateAnnualizedPercentageChange } from "src/base/calculateAnnualizedPercentageChange";
 import { convertMillisecondsToDays } from "src/base/convertMillisecondsToDays";
 import { makeQueryKey } from "src/base/makeQueryKey";
+import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
 import { CloseLongModalButton } from "src/ui/hyperdrive/longs/CloseLongModalButton/CloseLongModalButton";
@@ -165,6 +166,7 @@ export function OpenLongsTable({
           })}
         </tbody>
       </table>
+      {!longs?.length ? <NonIdealState /> : null}
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx
index f13e075e6..f08248d4f 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx
@@ -15,7 +15,6 @@ import { usePreviewRemoveLiquidity } from "src/ui/hyperdrive/lp/hooks/usePreview
 import { useWithdrawalShares } from "src/ui/hyperdrive/lp/hooks/useWithdrawalShares";
 import { RedeemWithdrawalSharesModalButton } from "src/ui/hyperdrive/lp/RedeemWithdrawalSharesModalButton/RedeemWithdrawalSharesModalButton";
 import { RemoveLiquidityModalButton } from "src/ui/hyperdrive/lp/RemoveLiquidityModalButton/RemoveLiquidityModalButton";
-import { formatUnits } from "viem";
 import { useAccount } from "wagmi";
 
 interface OpenOrdersTableProps {
@@ -57,10 +56,14 @@ export function OpenLpPosition({
   const rows: Row[] = [];
   if (lpShares) {
     rows.push([
-      <span key="type" className="font-semibold uppercase text-primary">
+      <span key="type" className="font-semibold uppercase">
         LP
       </span>,
-      formatUnits(lpShares, (hyperdrive as Hyperdrive).baseToken.decimals),
+      formatBalance({
+        balance: lpShares,
+        decimals: (hyperdrive as Hyperdrive).baseToken.decimals,
+        places: 4,
+      }),
       <span key="value">
         {!!poolInfo ? (
           `${formatBalance({
@@ -69,6 +72,7 @@ export function OpenLpPosition({
               hyperdrive.baseToken.decimals,
             ),
             decimals: hyperdrive.baseToken.decimals,
+            places: 4,
           })} ${hyperdrive.baseToken.symbol}`
         ) : (
           <Skeleton />
@@ -138,8 +142,8 @@ export function OpenLpPosition({
 
   return (
     <SortableGridTable
-      headingRowClassName="grid-cols-[4fr_4fr_4fr_4fr_1fr] text-start"
-      bodyRowClassName="grid-cols-[4fr_4fr_4fr_4fr_1fr] items-center text-sm md:text-h6 even:bg-base-300/5 h-16"
+      headingRowClassName="grid-cols-[4fr_4fr_4fr_4fr_1fr]"
+      bodyRowClassName="grid-cols-[4fr_4fr_4fr_4fr_1fr] items-center even:bg-base-300/5 h-16"
       // Blank col added for actions
       cols={[
         {
@@ -154,7 +158,7 @@ export function OpenLpPosition({
           cell: (
             <CellWithTooltip
               tooltip="LP's proportionate stake in the total liquidity pool."
-              content="Share"
+              content="Shares"
             />
           ),
         },
@@ -174,6 +178,7 @@ export function OpenLpPosition({
             />
           ),
         },
+        { cell: <div /> },
       ]}
       rows={rows}
       showSkeleton={
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
index a2c020946..cdab8c45f 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
@@ -12,6 +12,7 @@ import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
 import { makeQueryKey } from "src/base/makeQueryKey";
 import { parseUnits } from "src/base/parseUnits";
+import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
 import {
@@ -175,6 +176,7 @@ export function OpenShortsTable({
           })}
         </tbody>
       </table>
+      {!shorts?.length ? <NonIdealState /> : null}
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx
index 33888d687..a5926d895 100644
--- a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx
+++ b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx
@@ -47,7 +47,7 @@ export function TradeBody({ hyperdrive }: PositionsTableProps): ReactElement {
 
       <PositionsSection hyperdrive={hyperdrive} />
       <div>
-        <span className="mb-2 text-h5 font-thin">Transactions</span>
+        <span className="mb-2 text-h5 font-bold ">Transactions</span>
         {transactionData && (
           <TransactionTable data={transactionData} hyperdrive={hyperdrive} />
         )}