diff --git a/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx b/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx
index f02725dd9..6e7b72ef0 100644
--- a/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx
+++ b/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx
@@ -5,7 +5,12 @@ export function Navbar(): ReactElement {
   return (
     <div className="daisy-navbar bg-base-100 ">
       <div className="daisy-navbar-start ml-2">
-        <a className="font-lato text-h6 font-extrabold uppercase tracking-widest text-primary">
+        <a className="inline-flex items-center gap-2 font-lato text-h6 font-extrabold uppercase tracking-widest">
+          <div className="inline-flex w-full">
+            <div className="h-4 w-2.5 -skew-x-12 bg-primary"></div>
+            <div className="h-4 w-2.5 -skew-x-12 bg-secondary"></div>
+            <div className="h-4 w-2.5 -skew-x-12 bg-accent"></div>
+          </div>
           Hyperdrive
         </a>
       </div>
diff --git a/apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx b/apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx
index 59544c7b0..13913603b 100644
--- a/apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx
+++ b/apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx
@@ -10,7 +10,7 @@ export function Disclosure({
   description,
 }: DisclosureProps): ReactElement {
   return (
-    <div className="group daisy-collapse-plus daisy-collapse border border-neutral-content/30">
+    <div className="group daisy-collapse-plus daisy-collapse border">
       <input type="checkbox" />
       <div className="text-xl daisy-collapse-title font-medium opacity-70 group-hover:opacity-100">
         {title}
diff --git a/apps/hyperdrive-trading/src/ui/base/components/Modal/Modal.tsx b/apps/hyperdrive-trading/src/ui/base/components/Modal/Modal.tsx
index b2b32d29c..fcd31eb94 100644
--- a/apps/hyperdrive-trading/src/ui/base/components/Modal/Modal.tsx
+++ b/apps/hyperdrive-trading/src/ui/base/components/Modal/Modal.tsx
@@ -25,10 +25,7 @@ export function Modal({
       {children({ showModal })}
 
       <dialog id={modalId} className={`daisy-modal`} ref={modalRef}>
-        <form
-          method="dialog"
-          className={`daisy-modal-box bg-base-300 ${className}`}
-        >
+        <form method="dialog" className={`daisy-modal-box ${className}`}>
           {modalContent}
         </form>
         <form method="dialog" className={`daisy-modal-backdrop`}>
diff --git a/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx b/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx
index 0cc28d5fb..ac4755578 100644
--- a/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx
+++ b/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { ReactElement, ReactNode } from "react";
 
 interface StatProps {
@@ -17,12 +18,17 @@ export function Stat({
     <div className={className}>
       <p
         data-tip={description}
-        // use before: to style the text inside the tooltip
-        className="daisy-tooltip mb-1 font-light text-neutral-content before:text-base-content"
+        // Future note: use before: to style the text inside the tooltip
+        className={classNames(
+          "daisy-label-text daisy-tooltip mb-1 underline-offset-4",
+          description
+            ? "cursor-help border-b border-dashed border-current"
+            : "",
+        )}
       >
         {label}
       </p>
-      <div className="whitespace-nowrap text-base-content">{value}</div>
+      <div className="whitespace-nowrap text-h6 font-bold">{value}</div>
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx b/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx
index e290664b2..b4eb87e99 100644
--- a/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx
+++ b/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx
@@ -18,15 +18,14 @@ export function Well({
   onClick,
 }: PropsWithChildren<WellProps>): ReactElement {
   const isInteractive = !disabled && (interactive || onClick);
-  const className = classNames("rounded-lg p-4", {
-    "w-full": block,
-    "hover:cursor-pointer hover:glass hover:-translate-y-1 hover:shadow-lg transition duration-300 ease-in-out":
-      isInteractive,
-    "bg-base-300/50 ring-neutral-content/20 ring-1": !variant,
-    "bg-primary/5 ring-primary/20 ring-1": variant === "primary",
-    "bg-secondary/5 ring-secondary/20 ring-1": variant === "secondary",
-    "bg-accent/5 ring-accent/20 ring-1": variant === "accent",
-  });
+  const className = classNames(
+    "daisy-card p-4 daisy-card-bordered shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] bg-base-200",
+    {
+      "w-full": block,
+      "hover:cursor-pointer hover:-translate-y-1 transition duration-300 hover:shadow-xl ease-in-out":
+        isInteractive,
+    },
+  );
 
   if (onClick || interactive) {
     return (
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 5f49fb748..4349de057 100644
--- a/apps/hyperdrive-trading/src/ui/base/components/tables/SortableGridTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/base/components/tables/SortableGridTable.tsx
@@ -206,8 +206,8 @@ function nextSortDirection(
 
 function DefaultEmptyTableElement() {
   return (
-    <div className="rounded-b-lg bg-base-300 p-10 text-center">
-      <p className=" text-lg text-base-content">Nothing to show.</p>
+    <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/hyperdrive/TransactionTable/TransactionsTable.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx
index ba3283dad..f54e45b99 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx
@@ -55,10 +55,7 @@ export function TransactionTable({
           {tableInstance.getHeaderGroups().map((headerGroup) => (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
-                <th
-                  className="text-lg font-thin text-neutral-content"
-                  key={header.id}
-                >
+                <th className="text-lg font-thin" key={header.id}>
                   {header.isPlaceholder
                     ? null
                     : flexRender(
@@ -73,7 +70,7 @@ export function TransactionTable({
         <tbody>
           {tableInstance.getRowModel().rows.map((row) => (
             <tr
-              className="h-16 grid-cols-4 items-center text-sm text-base-content even:bg-secondary/5 md:text-h6"
+              className="h-16 grid-cols-4 items-center text-sm even:bg-base-300/5 md:text-h6"
               key={row.id}
             >
               {row.getVisibleCells().map((cell) => {
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx
index 8c59c0230..0e0f4b4d1 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx
@@ -77,7 +77,7 @@ export function CloseLongForm({
       {/* You receive Section */}
       {long && (
         <div className="flex justify-between">
-          <p className="font-light text-neutral-content">You receive</p>
+          <p className="font-light">You receive</p>
           <p className="tracking-wide">
             {baseAmountOut
               ? `${formatBalance({
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 05550231d..eea1befc5 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx
@@ -23,30 +23,27 @@ export function OpenLongModalButton({
       {({ showModal }) => (
         <Well interactive variant="secondary" onClick={() => showModal()}>
           <div className="flex w-[272px] flex-col gap-2 p-4">
-            <ClockIcon className="mb-2 h-16 text-secondary" />
+            <ClockIcon className="mb-2 h-16" />
             <p className="text-h5 ">Open a long</p>
             <p className="font-bold">
-              Earn{" "}
-              <span className="text-secondary">
-                {fixedAPR?.formatted || "-"}% APR
-              </span>{" "}
-              on {hyperdrive.baseToken.symbol}
+              Earn <span>{fixedAPR?.formatted || "-"}% APR</span> on{" "}
+              {hyperdrive.baseToken.symbol}
             </p>
             <div className="mt-4 ml-4 flex flex-col gap-2">
-              <ChecklistItem checked readOnly variant="secondary">
+              <ChecklistItem checked readOnly>
                 Guaranteed fixed rate yield
               </ChecklistItem>
-              <ChecklistItem checked readOnly variant="secondary">
+              <ChecklistItem checked readOnly>
                 Minimal risk and maintenance
               </ChecklistItem>
-              <ChecklistItem checked readOnly variant="secondary">
+              <ChecklistItem checked readOnly>
                 Redeemable before term ends
               </ChecklistItem>
             </div>
             {/* Using a div styled as a button here just as a visual cue. Don't
             use a real button here since the Well is interactive already, and
             doing so would create invalid dom nesting of buttons. */}
-            <div className="daisy-btn-secondary daisy-btn-sm daisy-btn mt-4 justify-between gap-0 border-secondary">
+            <div className="daisy-btn-neutral daisy-btn-sm daisy-btn mt-4 justify-between gap-0 hover:daisy-btn-ghost">
               <span className="ml-4 flex-1 text-center">Open long</span>
               <ChevronRightIcon className="h-3 text-right" />
             </div>
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 2fd97c29e..99bd77be0 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx
@@ -24,16 +24,14 @@ export function OpenLongPreview({
         </div>
 
         <div className="flex justify-between">
-          <p className="font-light text-neutral-content">Matures on</p>
+          <p className="font-light">Matures on</p>
           <p className="tracking-wide">
             {new Date(Number(long.maturity * 1000n)).toLocaleDateString()}
           </p>
         </div>
 
         <div className="flex justify-between">
-          <p className="font-light text-neutral-content">
-            Claimable at maturity
-          </p>
+          <p className="font-light">Claimable at maturity</p>
           <p className="font-semibold tracking-wide">
             {formatBalance({
               balance: long.bondAmount,
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx
index 1ef75bd82..74bc914d8 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx
@@ -21,27 +21,26 @@ export function AddLiquidityModalButton({
       {({ showModal }) => (
         <Well interactive variant="primary" onClick={() => showModal()}>
           <div className="flex w-[272px] flex-col justify-between gap-2 p-4">
-            <SquaresPlusIcon className="mb-2 h-16 text-primary" />
+            <SquaresPlusIcon className="mb-2 h-16" />
             <p className="text-h5">Add Liquidity</p>
             <p className="font-bold">
-              Earn trading fees <span className="text-primary">and</span>{" "}
-              interest
+              Earn trading fees <span>and</span> interest
             </p>
             <div className="mt-4 ml-4 flex flex-col gap-2 ">
-              <ChecklistItem checked readOnly variant="primary">
+              <ChecklistItem checked readOnly>
                 Deposit {hyperdrive.baseToken.symbol} to back trades
               </ChecklistItem>
-              <ChecklistItem checked readOnly variant="primary">
+              <ChecklistItem checked readOnly>
                 Idle capital accrues vault APY
               </ChecklistItem>
-              <ChecklistItem checked readOnly variant="primary">
+              <ChecklistItem checked readOnly>
                 No rollovers, easy-to-use
               </ChecklistItem>
             </div>
             {/* Using a div styled as a button here just as a visual cue. Don't
             use a real button here since the Well is interactive already, and
             doing so would create invalid dom nesting of buttons. */}
-            <div className="daisy-btn-primary daisy-btn-sm daisy-btn mt-4 justify-between gap-0 border-primary">
+            <div className="daisy-btn-neutral daisy-btn-sm daisy-btn mt-4 justify-between gap-0 hover:daisy-btn-ghost">
               <span className="ml-4 flex-1 text-center">Add liquidity</span>
               <ChevronRightIcon className="h-3 text-right" />
             </div>
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 90c97c91b..a2885ddbb 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx
@@ -90,11 +90,11 @@ export function RemoveLiquidityForm({
 
       {/* You receive Section */}
       <div className="flex justify-between">
-        <p className="font-light text-neutral-content">You receive</p>
+        <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 text-neutral-content">Withdrawal shares</p>
+        <p className="font-light">Withdrawal shares</p>
         <p className="tracking-wide">{formattedWithdrawalSharesOut}</p>
       </div>
 
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx
index 20f45b5cf..103f12ae8 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx
@@ -77,7 +77,7 @@ export function CloseShortForm({
         <div className="flex flex-col gap-y-1 tracking-wide">
           {short && (
             <div className="flex justify-between">
-              <p className="font-light text-neutral-content">You receive</p>
+              <p className="font-light">You receive</p>
               <p className="tracking-wide">
                 {baseAmountOut
                   ? `${formatBalance({
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx
index b50b58e18..bd2ebcd79 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx
@@ -25,28 +25,27 @@ export function OpenShortModalButton({
       {({ showModal }) => (
         <Well interactive variant="accent" onClick={() => showModal()}>
           <div className="flex w-[272px] flex-col justify-between gap-2 p-4">
-            <BoltIcon className="mb-2 h-16 text-accent" />
+            <BoltIcon className="mb-2 h-16" />
             <p className="text-h5">Open a short</p>
             <p className="font-bold">
-              Earn{" "}
-              <span className="text-accent">{vaultRate?.formatted}% APY</span>{" "}
-              on {hyperdrive.baseToken.symbol}
+              Earn <span>{vaultRate?.formatted}% APY</span> on{" "}
+              {hyperdrive.baseToken.symbol}
             </p>
             <div className="mt-4 ml-4 flex flex-col gap-2 ">
-              <ChecklistItem readOnly checked variant="accent">
+              <ChecklistItem readOnly checked>
                 Variable rate yield
               </ChecklistItem>
-              <ChecklistItem readOnly checked variant="accent">
+              <ChecklistItem readOnly checked>
                 Profit from rising fixed rates
               </ChecklistItem>
-              <ChecklistItem readOnly checked variant="accent">
+              <ChecklistItem readOnly checked>
                 Redeemable before term ends
               </ChecklistItem>
             </div>
             {/* Using a div styled as a button here just as a visual cue. Don't
             use a real button here since the Well is interactive already, and
             doing so would create invalid dom nesting of buttons. */}
-            <div className="daisy-btn-accent daisy-btn-sm daisy-btn mt-4 justify-between gap-0">
+            <div className="daisy-btn-neutral daisy-btn-sm daisy-btn mt-4 justify-between gap-0 hover:daisy-btn-ghost">
               <span className="ml-4 flex-1 text-center">Open short</span>
               <ChevronRightIcon className="h-3 text-right" />
             </div>
diff --git a/apps/hyperdrive-trading/src/ui/main.tsx b/apps/hyperdrive-trading/src/ui/main.tsx
index 0448c5cfc..5a30b3d6f 100644
--- a/apps/hyperdrive-trading/src/ui/main.tsx
+++ b/apps/hyperdrive-trading/src/ui/main.tsx
@@ -1,4 +1,4 @@
-import { darkTheme, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -19,11 +19,7 @@ root.render(
   <QueryClientProvider client={queryClient}>
     <Toaster position="bottom-left" reverseOrder={false} />
     <WagmiConfig config={wagmiConfig}>
-      <RainbowKitProvider
-        chains={wagmiChains}
-        showRecentTransactions
-        theme={darkTheme()}
-      >
+      <RainbowKitProvider chains={wagmiChains} showRecentTransactions>
         <SkeletonTheme
           baseColor="hsl(var(--nc))"
           highlightColor="hsl(var(--bc))"
diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx
index 6d7d67198..f8f19070d 100644
--- a/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx
@@ -26,7 +26,7 @@ export function AllMarketsBreadcrumb(): ReactElement {
 
 function MarketsModalContent() {
   return (
-    <div className="flex max-h-[70vh] flex-col items-center overflow-auto rounded bg-base-300 p-1 md:p-4">
+    <div className="flex max-h-[70vh] flex-col items-center overflow-auto rounded p-1 md:p-4">
       <h3 className="mb-4 font-lato">Markets</h3>
 
       <MarketsTable />
diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketStats/MarketStats.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketStats/MarketStats.tsx
index 3f8f6e7f9..152bb464c 100644
--- a/apps/hyperdrive-trading/src/ui/markets/MarketStats/MarketStats.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/MarketStats/MarketStats.tsx
@@ -77,7 +77,6 @@ export function MarketStats({
             value={tradingVolume.formatted || "0"}
           />
         }
-        description={"The total trading volume in the last 24 hours"}
       />
       <Stat
         label="Liquidity"
@@ -87,9 +86,6 @@ export function MarketStats({
             value={liquidity?.formatted || "0"}
           />
         }
-        description={
-          "The total liquidity in the pool available for market making"
-        }
       />
     </div>
   );
diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
index d485ddd75..d9a90676e 100644
--- a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
@@ -61,7 +61,7 @@ export function MarketsTable(): ReactElement {
       {/* Markets sortable table */}
       <div>
         <SortableGridTable
-          headingRowClassName="grid-cols-auto bg-base-300 text-neutral-content bg-opacity-100"
+          headingRowClassName="grid-cols-auto bg-base-300 bg-opacity-100"
           bodyRowClassName="grid-cols-auto bg-transparent text-base-content"
           cols={[
             {
diff --git a/apps/hyperdrive-trading/src/ui/markets/YieldSourceLabel/YieldSourceLabel.tsx b/apps/hyperdrive-trading/src/ui/markets/YieldSourceLabel/YieldSourceLabel.tsx
index 730f31280..f84cb39e8 100644
--- a/apps/hyperdrive-trading/src/ui/markets/YieldSourceLabel/YieldSourceLabel.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/YieldSourceLabel/YieldSourceLabel.tsx
@@ -12,9 +12,7 @@ export function YieldSourceLabel({
   return (
     <span className={classNames("flex items-center gap-x-2")}>
       <img className="h-4" src={yieldSource?.iconUrl} />
-      <span className="font-normal text-neutral-content md:text-h6">
-        {yieldSource?.protocol}
-      </span>
+      <span className="font-normal md:text-h6">{yieldSource?.protocol}</span>
     </span>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx b/apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx
index 6e586b364..30752ef90 100644
--- a/apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx
+++ b/apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx
@@ -5,12 +5,12 @@ 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 text-neutral-content">FAQ</span>
+        <span className="pb-2 text-h5 font-thin">FAQ</span>
       </div>
       <Disclosure
         title={<span className="text-h6">What is a long?</span>}
         description={
-          <p className="text-neutral-content">
+          <p className="">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -24,7 +24,7 @@ export function FAQ(): ReactElement {
       <Disclosure
         title={<span className="text-h6">What is a short?</span>}
         description={
-          <p className="text-neutral-content">
+          <p className="">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -38,7 +38,7 @@ export function FAQ(): ReactElement {
       <Disclosure
         title={<span className="text-h6">How does LPing work?</span>}
         description={
-          <p className="text-neutral-content">
+          <p className="">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
             ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx
index 75a525b03..0b9fd09b8 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx
@@ -23,8 +23,8 @@ export function ClosedLongsTable({
 
   return (
     <SortableGridTable
-      headingRowClassName="grid-cols-5 text-neutral-content"
-      bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16 "
+      headingRowClassName="grid-cols-5"
+      bodyRowClassName="grid-cols-4 items-center text-sm md:text-h6 even:bg-base-300/5 h-16"
       cols={[
         {
           cell: (
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLpTable/ClosedLpTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLpTable/ClosedLpTable.tsx
index 82b774c6d..d1bf96ed2 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLpTable/ClosedLpTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLpTable/ClosedLpTable.tsx
@@ -99,8 +99,8 @@ export function ClosedLpTable({
 
   return (
     <SortableGridTable
-      headingRowClassName="grid-cols-5 text-start text-neutral-content"
-      bodyRowClassName="grid-cols-5 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16"
+      headingRowClassName="grid-cols-5 text-start"
+      bodyRowClassName="grid-cols-5 items-center text-sm md:text-h6 even:bg-base-300/5 h-16"
       cols={[
         {
           cell: (
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx
index 596e2be76..05470914e 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx
@@ -24,8 +24,8 @@ export function ClosedShortsTable({
 
   return (
     <SortableGridTable
-      headingRowClassName="grid-cols-5 text-neutral-content"
-      bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-accent/5 h-16"
+      headingRowClassName="grid-cols-5"
+      bodyRowClassName="grid-cols-4 items-center text-sm md:text-h6 even:bg-base-300/5 h-16"
       cols={[
         {
           cell: (
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx
index d2d26c076..a3938d659 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx
@@ -24,8 +24,8 @@ export function OpenLongsTable({
 
   return (
     <SortableGridTable
-      headingRowClassName="grid-cols-5 text-start text-neutral-content"
-      bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16"
+      headingRowClassName="grid-cols-5 text-start"
+      bodyRowClassName="grid-cols-4 items-center text-sm md:text-h6 even:bg-base-300/5 h-16"
       // Blank col added for actions
       cols={[
         {
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx
index a07d293cb..d840424e3 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx
@@ -138,8 +138,8 @@ export function OpenLpPosition({
 
   return (
     <SortableGridTable
-      headingRowClassName="grid-cols-[4fr_4fr_4fr_4fr_1fr] text-start text-neutral-content"
-      bodyRowClassName="grid-cols-[4fr_4fr_4fr_4fr_1fr] text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16"
+      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"
       // Blank col added for actions
       cols={[
         {
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
index 0b28d8fe1..3096ba0e6 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
@@ -24,8 +24,8 @@ export function OpenShortsTable({
 
   return (
     <SortableGridTable
-      headingRowClassName="grid-cols-5 text-neutral-content"
-      bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-accent/5 h-16"
+      headingRowClassName="grid-cols-5"
+      bodyRowClassName="grid-cols-4  items-center text-sm md:text-h6 even:bg-base-300/5 h-16"
       // Blank col added for actions
       cols={[
         {
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/PositionTabs/PositionTabs.tsx b/apps/hyperdrive-trading/src/ui/portfolio/PositionTabs/PositionTabs.tsx
index ecf2bd201..df63d4a62 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/PositionTabs/PositionTabs.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/PositionTabs/PositionTabs.tsx
@@ -17,7 +17,7 @@ export function PositionTabs({
         className={classNames(
           "daisy-tab-lifted daisy-tab daisy-tab-sm border-b-base-100 md:daisy-tab-lg",
           {
-            "daisy-tab-active glass": activePositionTab === "Longs",
+            "daisy-tab-active": activePositionTab === "Longs",
           },
         )}
       >
@@ -28,7 +28,7 @@ export function PositionTabs({
         className={classNames(
           "daisy-tab-lifted daisy-tab daisy-tab-sm border-b-base-100 md:daisy-tab-lg",
           {
-            "daisy-tab-active glass": activePositionTab === "Shorts",
+            "daisy-tab-active": activePositionTab === "Shorts",
           },
         )}
       >
@@ -39,7 +39,7 @@ export function PositionTabs({
         className={classNames(
           "daisy-tab-lifted daisy-tab daisy-tab-sm border-b-base-100 md:daisy-tab-lg",
           {
-            "daisy-tab-active glass": activePositionTab === "LP",
+            "daisy-tab-active": activePositionTab === "LP",
           },
         )}
       >
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx b/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx
index 3fd5bb6b6..b3d6f0cd5 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx
@@ -54,7 +54,7 @@ export function PositionsSection({
 
   return (
     <div>
-      <div className="mb-4 flex w-full items-end justify-between border-b border-neutral-content/30">
+      <div className="mb-4 flex w-full items-end justify-between border-b-2">
         <PositionTabs
           onTabClick={handleChangeTab}
           activePositionTab={activePositionTab}
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/YourBalanceWell/YourBalanceWell.tsx b/apps/hyperdrive-trading/src/ui/portfolio/YourBalanceWell/YourBalanceWell.tsx
index 2fa26a3b2..57d026f95 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/YourBalanceWell/YourBalanceWell.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/YourBalanceWell/YourBalanceWell.tsx
@@ -27,7 +27,6 @@ export function YourBalanceWell({ token }: { token: Token }): ReactElement {
           label="Your available balance"
           value={
             <div className="-mt-1 flex items-center gap-1 text-h5">
-              <img className="h-4" src={token.iconUrl} />
               {formatBalance({
                 balance: balance?.value || 0n,
                 decimals: token.decimals,
@@ -37,10 +36,10 @@ export function YourBalanceWell({ token }: { token: Token }): ReactElement {
               {chainId === 31337 ? (
                 <button
                   disabled={!mint}
-                  className="daisy-btn-xs daisy-btn ml-1"
+                  className="daisy-btn-outline daisy-btn-xs daisy-btn ml-1"
                   onClick={() => mint?.()}
                 >
-                  Mint Tokens
+                  Mint
                 </button>
               ) : undefined}
             </div>
diff --git a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx
index a1f3284a2..628d5bbf8 100644
--- a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx
+++ b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx
@@ -28,10 +28,7 @@ export function TradeBody({ hyperdrive }: PositionsTableProps): ReactElement {
         <div className="flex flex-wrap items-start justify-center md:justify-between">
           <div className="flex flex-col">
             <MarketBreadcrumbs hyperdrive={hyperdrive} />
-            <MarketHeader hyperdrive={hyperdrive} />
-            {longPrice ? (
-              <PriceBadges hyperdrive={hyperdrive} longPrice={longPrice} />
-            ) : null}
+            <MarketHeader hyperdrive={hyperdrive} longPrice={longPrice} />
           </div>
           <YourBalanceWell token={hyperdrive.baseToken} />
         </div>
@@ -50,9 +47,7 @@ export function TradeBody({ hyperdrive }: PositionsTableProps): ReactElement {
 
       <PositionsSection hyperdrive={hyperdrive} />
       <div>
-        <span className="mb-2 text-h5 font-thin text-neutral-content">
-          Transactions
-        </span>
+        <span className="mb-2 text-h5 font-thin">Transactions</span>
         {transactionData && (
           <TransactionTable data={transactionData} hyperdrive={hyperdrive} />
         )}
@@ -79,27 +74,40 @@ function MarketBreadcrumbs({ hyperdrive }: { hyperdrive: Hyperdrive }) {
   );
 }
 
-function MarketHeader({ hyperdrive }: { hyperdrive: Hyperdrive }) {
+function MarketHeader({
+  hyperdrive,
+  longPrice,
+}: {
+  hyperdrive: Hyperdrive;
+  longPrice: { price: bigint; formatted: string } | undefined;
+}) {
   return (
-    <h3 className="my-2 inline-flex items-center gap-2 font-semibold md:my-0">
-      <div className="daisy-avatar-group -space-x-6">
+    <div className="my-2 flex items-center gap-2 md:my-0">
+      <div className="daisy-avatar-group shrink-0 -space-x-4 p-2 font-semibold ">
         <div className="daisy-placeholder daisy-avatar">
-          <div className="w-14 bg-neutral-focus text-neutral-content">
-            <span className="text-sm">
-              <img src={hyperdrive.baseToken.iconUrl} />
+          <div className="w-16 bg-base-200">
+            <span className="text-body font-bold">
+              {hyperdrive.baseToken.symbol}
             </span>
           </div>
         </div>
         <div className="daisy-placeholder daisy-avatar">
-          <div className="w-14 bg-neutral-focus">
-            <span className="text-sm text-secondary">
+          <div className="w-16 bg-base-200">
+            <span className="text-body font-bold">
               hy{hyperdrive.baseToken.symbol}
             </span>
           </div>
         </div>
       </div>
-      {hyperdrive.baseToken.symbol} / hy{hyperdrive.baseToken.symbol}
-    </h3>
+      <div className="flex w-full flex-col items-start gap-1">
+        <h3 className="items-center font-semibold md:my-0">
+          {hyperdrive.baseToken.symbol} / hy{hyperdrive.baseToken.symbol}
+        </h3>
+        {longPrice ? (
+          <PriceBadges hyperdrive={hyperdrive} longPrice={longPrice} />
+        ) : null}
+      </div>
+    </div>
   );
 }
 
@@ -111,10 +119,9 @@ function PriceBadges({
   longPrice: { price: bigint; formatted: string };
 }) {
   return (
-    <div className="mt-4 flex gap-4">
-      <div className="daisy-badge daisy-badge-neutral daisy-badge-lg text-base-content">
-        <img className="mr-1 w-4" src={hyperdrive.baseToken.iconUrl} /> 1{" "}
-        {hyperdrive.baseToken.symbol} ≈{" "}
+    <div className="flex gap-4">
+      <div className="daisy-badge daisy-badge-ghost daisy-badge-lg border border-base-300/5">
+        1 {hyperdrive.baseToken.symbol} ≈{" "}
         {formatBalance({
           balance: divideBigInt(
             parseUnits("1", 18),
@@ -123,17 +130,16 @@ function PriceBadges({
           ),
 
           decimals: hyperdrive.baseToken.decimals,
-          places: 3,
+          places: 6,
         })}{" "}
         hy{hyperdrive.baseToken.symbol}
       </div>
-      <div className="daisy-badge daisy-badge-neutral daisy-badge-lg text-base-content">
-        <span className="mr-1 text-[6pt] text-secondary">hyBASE</span> 1 hy
-        {hyperdrive.baseToken.symbol} ≈{" "}
+      <div className="daisy-badge daisy-badge-ghost daisy-badge-lg border border-base-300/5">
+        1 hy{hyperdrive.baseToken.symbol} ≈{" "}
         {formatBalance({
           balance: longPrice.price,
           decimals: hyperdrive.baseToken.decimals,
-          places: 3,
+          places: 6,
         })}{" "}
         {hyperdrive.baseToken.symbol}
       </div>
diff --git a/apps/hyperdrive-trading/tailwind.config.js b/apps/hyperdrive-trading/tailwind.config.js
index 292bddad3..5a474f2a0 100644
--- a/apps/hyperdrive-trading/tailwind.config.js
+++ b/apps/hyperdrive-trading/tailwind.config.js
@@ -60,21 +60,14 @@ module.exports = {
       {
         night: {
           // eslint-disable-next-line @typescript-eslint/no-var-requires
-          ...require("daisyui/src/theming/themes")["[data-theme=night]"],
-          primary: "#F4B1FF",
-          secondary: "#8ABBFF",
-          accent: "#D4F17E",
-
-          success: "#61E4A3",
-          warning: "#FF9031",
-          error: "#E66E65",
-
-          "base-100": "#151427",
-          "base-content": "#D6D5F6",
-
-          neutral: "#202d40",
-          "neutral-content": "#9aa1cb",
-
+          ...require("daisyui/src/theming/themes")["[data-theme=lofi]"],
+          primary: "#007eed",
+          secondary: "#522dae",
+          accent: "#f40000",
+          "--tab-radius": "0.4rem",
+          "--rounded-box": "0.4rem", // border radius rounded-box utility class, used in card and other large boxes
+          "--rounded-btn": "0.4rem",
+          "--rounded-badge": "0.4rem",
           "--btn-text-case": "none", // set default text transform for buttons
         },
       },