diff --git a/app/assets/assets-table/data-table.tsx b/app/assets/assets-table/data-table.tsx
index 8f8fe5af..784a0d15 100644
--- a/app/assets/assets-table/data-table.tsx
+++ b/app/assets/assets-table/data-table.tsx
@@ -12,12 +12,10 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table"
-import { DollarSign } from "lucide-react"
+import { DollarSign, EyeOff } from "lucide-react"
 
 import { TransferDialog } from "@/components/dialogs/transfer/transfer-dialog"
 import { TableEmptyState } from "@/components/table-empty-state"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
 import {
   Table,
   TableBody,
@@ -27,8 +25,11 @@ import {
   TableRow,
 } from "@/components/ui/table"
 import { Toggle } from "@/components/ui/toggle"
-
-import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -95,58 +96,76 @@ export function DataTable<TData, TValue>({
           Your deposits inside of Renegade. Only you and your connected relayer
           can see your balances.
         </div>
-        <div className="ml-auto flex items-center space-x-2">
-          <Toggle
-            aria-label="Toggle USD"
-            pressed={
-              columnVisibility.renegadeUsdValue && columnVisibility.l2UsdValue
-            }
-            size="sm"
-            onPressedChange={(value) => {
-              value
-                ? setColumnVisibility({
-                    renegadeUsdValue: true,
-                    l2UsdValue: true,
-                    renegadeBalance: false,
-                    l2Balance: false,
-                  })
-                : setColumnVisibility({
-                    renegadeUsdValue: false,
-                    l2UsdValue: false,
-                    renegadeBalance: true,
-                    l2Balance: true,
-                  })
-            }}
-          >
-            <DollarSign className={cn("h-4 w-4 text-muted-foreground")} />
-          </Toggle>
-        </div>
-        <div className="ml-4 flex items-center space-x-2">
-          <Switch
-            checked={showZeroL2Balance && showZeroRenegadeBalance}
-            onCheckedChange={(value) => {
-              setShowZeroL2Balance(!!value)
-              setShowZeroRenegadeBalance(!!value)
-            }}
-          />
-          <Label
-            className="text-muted-foreground"
-            htmlFor="long-format"
-          >
-            Show zeroes
-          </Label>
-        </div>
-        <div className="ml-4 flex items-center space-x-2">
-          <Switch
-            checked={isLongFormat}
-            onCheckedChange={(value) => setIsLongFormat(!!value)}
-          />
-          <Label
-            className="text-muted-foreground"
-            htmlFor="long-format"
-          >
-            Show decimals
-          </Label>
+        <div className="ml-auto flex items-center gap-2">
+          <Tooltip>
+            <TooltipTrigger>
+              <Toggle
+                aria-label="Toggle USD"
+                pressed={
+                  columnVisibility.renegadeUsdValue &&
+                  columnVisibility.l2UsdValue
+                }
+                size="sm"
+                variant="outline"
+                onPressedChange={(value) => {
+                  value
+                    ? setColumnVisibility({
+                        renegadeUsdValue: true,
+                        l2UsdValue: true,
+                        renegadeBalance: false,
+                        l2Balance: false,
+                      })
+                    : setColumnVisibility({
+                        renegadeUsdValue: false,
+                        l2UsdValue: false,
+                        renegadeBalance: true,
+                        l2Balance: true,
+                      })
+                }}
+              >
+                <DollarSign className="h-4 w-4 text-muted-foreground" />
+              </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>USD Value</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger>
+              <Toggle
+                aria-label="Show zero balances"
+                pressed={!showZeroL2Balance && !showZeroRenegadeBalance}
+                size="sm"
+                variant="outline"
+                onPressedChange={(value) => {
+                  setShowZeroL2Balance(!value)
+                  setShowZeroRenegadeBalance(!value)
+                }}
+              >
+                <EyeOff className="h-4 w-4 text-muted-foreground" />
+              </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Hide zero balances</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger>
+              <Toggle
+                aria-label="Toggle decimal display"
+                className="w-8 p-0 font-mono text-xs font-bold text-muted-foreground data-[state=on]:text-muted-foreground"
+                pressed={isLongFormat}
+                size="sm"
+                variant="outline"
+                onPressedChange={(value) => setIsLongFormat(value)}
+              >
+                .00
+              </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Show decimals</p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
       <div className="border">
diff --git a/app/assets/history-table/data-table.tsx b/app/assets/history-table/data-table.tsx
index 16d88d84..ff24dafb 100644
--- a/app/assets/history-table/data-table.tsx
+++ b/app/assets/history-table/data-table.tsx
@@ -26,6 +26,12 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
+import { Toggle } from "@/components/ui/toggle"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 import { DISPLAY_TOKENS } from "@/lib/token"
 
@@ -150,17 +156,24 @@ export function DataTable<TData, TValue>({
             Clear
           </Button>
         ) : null}
-        <div className="ml-auto flex items-center space-x-2">
-          <Switch
-            checked={isLongFormat}
-            onCheckedChange={(value) => setIsLongFormat(!!value)}
-          />
-          <Label
-            className="text-muted-foreground"
-            htmlFor="long-format"
-          >
-            Show decimals
-          </Label>
+        <div className="ml-auto">
+          <Tooltip>
+            <TooltipTrigger>
+              <Toggle
+                aria-label="Toggle decimal display"
+                className="w-8 p-0 font-mono text-xs font-bold text-muted-foreground data-[state=on]:text-muted-foreground"
+                pressed={isLongFormat}
+                size="sm"
+                variant="outline"
+                onPressedChange={(value) => setIsLongFormat(value)}
+              >
+                .00
+              </Toggle>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Toggle decimals</p>
+            </TooltipContent>
+          </Tooltip>
         </div>
       </div>
       <div className="border">
diff --git a/app/assets/page-client.tsx b/app/assets/page-client.tsx
index 69751aba..ec3287bb 100644
--- a/app/assets/page-client.tsx
+++ b/app/assets/page-client.tsx
@@ -1,8 +1,7 @@
 "use client"
 
-import React, { useRef } from "react"
+import React from "react"
 
-import { InfoCircledIcon } from "@radix-ui/react-icons"
 import {
   TaskType,
   Token,
@@ -10,14 +9,13 @@ import {
   useBackOfQueueWallet,
   useTaskHistory,
 } from "@renegade-fi/react"
-import { ChevronDown, ChevronUp, Info } from "lucide-react"
+import { Info } from "lucide-react"
 import { formatUnits } from "viem/utils"
 import { useAccount, useReadContracts } from "wagmi"
 
 import { DataTable as AssetTable } from "@/app/assets/assets-table/data-table"
 import { DataTable as TransferHistoryTable } from "@/app/assets/history-table/data-table"
 
-import { Button } from "@/components/ui/button"
 import {
   Tooltip,
   TooltipContent,
@@ -158,38 +156,13 @@ export function PageClient() {
     }, [])
   }, [transferHistory])
 
-  const assetsRef = useRef<HTMLDivElement>(null)
-  const transferHistoryRef = useRef<HTMLDivElement>(null)
-
-  const scrollToSection = (ref: React.RefObject<HTMLDivElement>) => {
-    if (ref.current) {
-      const yOffset = -100 // Adjust this value to set your desired offset
-      const y =
-        ref.current.getBoundingClientRect().top + window.scrollY + yOffset
-      window.scrollTo({ top: y, behavior: "smooth" })
-    }
-  }
-
   return (
     <main>
       <div className="container">
-        <div
-          ref={assetsRef}
-          className="mt-12"
-        >
-          <div className="flex justify-between align-baseline">
-            <h1 className="font-serif text-3xl font-bold">Assets</h1>
-            <div>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => scrollToSection(transferHistoryRef)}
-              >
-                Transfer History
-                <ChevronDown className="ml-2 h-4 w-4" />
-              </Button>
-            </div>
-          </div>
+        <div className="mt-12">
+          <h1 className="font-serif text-3xl font-bold leading-normal">
+            Assets
+          </h1>
           <AssetTable
             columns={assetColumns}
             data={balances}
@@ -210,23 +183,10 @@ export function PageClient() {
             </TooltipContent>
           </Tooltip>
         </div>
-        <div
-          ref={transferHistoryRef}
-          className="mt-20"
-        >
-          <div className="mb-4 flex justify-between align-baseline">
-            <h1 className="font-serif text-3xl font-bold">Transfer History</h1>
-            <div>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => scrollToSection(assetsRef)}
-              >
-                Assets
-                <ChevronUp className="ml-2 h-4 w-4" />
-              </Button>
-            </div>
-          </div>
+        <div className="mt-20">
+          <h1 className="font-serif text-3xl font-bold leading-normal">
+            Transfer History
+          </h1>
           <TransferHistoryTable
             columns={historyColumns}
             data={historyData}
diff --git a/app/orders/data-table.tsx b/app/orders/data-table.tsx
index 843f8c70..d9e72629 100644
--- a/app/orders/data-table.tsx
+++ b/app/orders/data-table.tsx
@@ -31,6 +31,12 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
+import { Toggle } from "@/components/ui/toggle"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 import { useCancelAllOrders } from "@/hooks/use-cancel-all-orders"
 import { ExtendedOrderMetadata } from "@/hooks/use-order-table-data"
@@ -200,7 +206,7 @@ export function DataTable<TData, TValue>({
           </Button>
         ) : null}
         <Button
-          className="ml-auto text-muted-foreground"
+          className="ml-auto px-0 text-muted-foreground"
           disabled={isDisabled}
           size="sm"
           variant="link"
@@ -208,18 +214,23 @@ export function DataTable<TData, TValue>({
         >
           Cancel all open orders
         </Button>
-        <div className="flex items-center space-x-2">
-          <Switch
-            checked={isLongFormat}
-            onCheckedChange={(value) => setIsLongFormat(!!value)}
-          />
-          <Label
-            className="text-muted-foreground"
-            htmlFor="long-format"
-          >
-            Show decimals
-          </Label>
-        </div>
+        <Tooltip>
+          <TooltipTrigger>
+            <Toggle
+              aria-label="Toggle decimal display"
+              className="w-8 p-0 font-mono text-xs font-bold text-muted-foreground data-[state=on]:text-muted-foreground"
+              pressed={isLongFormat}
+              size="sm"
+              variant="outline"
+              onPressedChange={(value) => setIsLongFormat(value)}
+            >
+              .00
+            </Toggle>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Show decimals</p>
+          </TooltipContent>
+        </Tooltip>
       </div>
       <div className="border">
         <Table>
diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
index c50c2733..7ebdbf56 100644
--- a/components/ui/toggle.tsx
+++ b/components/ui/toggle.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  "inline-flex items-center justify-center  text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
     variants: {
       variant: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 474c30e7..6049603b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11064,7 +11064,7 @@ snapshots:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.2(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -11092,7 +11092,7 @@ snapshots:
       enhanced-resolve: 5.16.1
       eslint: 8.57.0
       eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.13.1
@@ -11114,7 +11114,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.5))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5