diff --git a/apps/frontend/src/components/cluster-topology/cluster-node.tsx b/apps/frontend/src/components/cluster-topology/cluster-node.tsx
index bb933c0c..7f07a6ff 100644
--- a/apps/frontend/src/components/cluster-topology/cluster-node.tsx
+++ b/apps/frontend/src/components/cluster-topology/cluster-node.tsx
@@ -6,6 +6,7 @@ import { TooltipProvider } from "@radix-ui/react-tooltip"
 import { Badge } from "../ui/badge"
 import { CustomTooltip } from "../ui/tooltip"
 import { Button } from "../ui/button"
+import { Typography } from "../ui/typography"
 import type { RootState } from "@/store.ts"
 import type { PrimaryNode, ParsedNodeInfo } from "@/state/valkey-features/cluster/clusterSlice"
 import { connectPending, type ConnectionDetails } from "@/state/valkey-features/connection/connectionSlice.ts"
@@ -62,11 +63,11 @@ export function ClusterNode({
     <div className="flex items-center gap-2 text-xs">
       <div className="flex items-center gap-1">
         <MemoryStick className="text-primary" size={14} />
-        <span>{nodeData?.used_memory_human ?? "N/A"}</span>
+        <Typography variant="bodyXs">{nodeData?.used_memory_human ?? "N/A"}</Typography>
       </div>
       <div className="flex items-center gap-1">
         <Users className="text-primary" size={14} />
-        <span>{nodeData?.connected_clients ?? "N/A"}</span>
+        <Typography variant="bodyXs">{nodeData?.connected_clients ?? "N/A"}</Typography>
       </div>
     </div>
   )
@@ -81,12 +82,12 @@ export function ClusterNode({
               <Server className="text-tw-primary shrink-0" size={18} />
               <div className="flex flex-col gap-1 min-w-0">
                 <div className="flex items-center gap-2 flex-wrap">
-                  <span className="font-semibold text-sm">{primaryData?.server_name || primaryKey}</span>
+                  <Typography variant={"label"}>{primaryData?.server_name || primaryKey}</Typography>
                   <Badge className="text-xs px-2 py-0" variant={isConnected ? "success" : "secondary"}>
                     PRIMARY
                   </Badge>
                 </div>
-                <span className="text-xs text-tw-dark-border">{`${primary.host}:${primary.port}`}</span>
+                <Typography variant="bodyXs">{`${primary.host}:${primary.port}`}</Typography>
                 <NodeDetails nodeData={primaryData} />
               </div>
             </div>
@@ -107,7 +108,7 @@ export function ClusterNode({
                   return (
                     <div className="flex items-center mb-2 gap-1" key={replicaKey}>
                       <Server className="text-tw-primary shrink-0" size={16} />
-                      <span className="text-xs text-tw-dark-border underline">{replicaKey}</span>
+                      <Typography className="underline" variant="bodyXs">{replicaKey}</Typography>
                     </div>
                   )
                 })}
diff --git a/apps/frontend/src/components/connection/ConnectionEntry.tsx b/apps/frontend/src/components/connection/ConnectionEntry.tsx
index b751389f..16f2f56f 100644
--- a/apps/frontend/src/components/connection/ConnectionEntry.tsx
+++ b/apps/frontend/src/components/connection/ConnectionEntry.tsx
@@ -119,7 +119,7 @@ export const ConnectionEntry = ({
               </Button>
             </Typography>
             {connection.connectionDetails.alias && (
-              <Typography className="ml-1 text-tw-dark-border dark:text-white/50 truncate" title={label} variant="bodyXs">
+              <Typography className="ml-1 truncate" title={label} variant="code">
                 ({label})
               </Typography>)}
             <div className="flex items-center gap-3">
diff --git a/apps/frontend/src/components/connection/__tests__/text-truncation.test.tsx b/apps/frontend/src/components/connection/__tests__/text-truncation.test.tsx
index 4013d69f..c4c0562a 100644
--- a/apps/frontend/src/components/connection/__tests__/text-truncation.test.tsx
+++ b/apps/frontend/src/components/connection/__tests__/text-truncation.test.tsx
@@ -100,10 +100,10 @@ describe("Text Truncation Improvements", () => {
         </TestWrapper>,
       )
 
-      // Check for alias in Typography component with truncate and title
-      const aliasElements = container.querySelectorAll("p.truncate[title]")
-      const hasAliasElement = Array.from(aliasElements).some((p) =>
-        p.textContent?.includes("(") && p.textContent?.includes(")"),
+      // Check for alias in Typography component with code variant (renders as <code> element) with title
+      const aliasElements = container.querySelectorAll("code[title]")
+      const hasAliasElement = Array.from(aliasElements).some((code) =>
+        code.textContent?.includes("(") && code.textContent?.includes(")"),
       )
       expect(hasAliasElement).toBe(true)
     })
diff --git a/apps/frontend/src/components/key-browser/key-details/key-details-json.tsx b/apps/frontend/src/components/key-browser/key-details/key-details-json.tsx
index fb23246f..a22a8dc6 100644
--- a/apps/frontend/src/components/key-browser/key-details/key-details-json.tsx
+++ b/apps/frontend/src/components/key-browser/key-details/key-details-json.tsx
@@ -98,11 +98,11 @@ export default function KeyDetailsJson(
           {!jsonModuleAvailable && (
             <tr>
               <td className="px-4 pt-3" colSpan={2}>
-                <div className="flex items-center gap-2 px-3 py-2 rounded text-sm bg-tw-primary/20 text-red-400">
+                <div className="flex items-center gap-2 px-3 py-2 rounded bg-tw-primary/20">
                   <TriangleAlert size={14} />
-                  <span>
+                  <Typography variant="bodyXs">
                     JSON module is not loaded on this Valkey instance. Editing is disabled.
-                  </span>
+                  </Typography>
                 </div>
               </td>
             </tr>
diff --git a/apps/frontend/src/components/key-browser/key-types.tsx b/apps/frontend/src/components/key-browser/key-types.tsx
index 97660d78..e22160f9 100644
--- a/apps/frontend/src/components/key-browser/key-types.tsx
+++ b/apps/frontend/src/components/key-browser/key-types.tsx
@@ -3,6 +3,7 @@ import { Button } from "../ui/button"
 import { Input } from "../ui/input"
 import { Label } from "../ui/label"
 import { Textarea } from "../ui/textarea"
+import { Typography } from "../ui/typography"
 
 interface StringFieldsProps {
   value: string
@@ -309,17 +310,17 @@ export function JsonFields({ value, setValue, jsonModuleAvailable = false }: Jso
         <Label htmlFor="json-value">JSON Value *</Label>
 
         {/* JSON Module Indicator */}
-        <div className={`flex items-center gap-2 px-3 py-2 rounded text-sm ${
+        <div className={`flex gap-2 px-3 py-2 rounded bg-tw-primary/20 ${
           jsonModuleAvailable
-            ? "bg-tw-primary/20 text-teal-500"
-            : "bg-tw-primary/20 text-red-400"
+            ? "text-teal-500"
+            : "text-red-400"
         }`}>
-          <span className="font-semibold">{jsonModuleAvailable ? <Check size={14} /> : <TriangleAlert size={14} />}</span>
-          <span>
+          {jsonModuleAvailable ? <Check size={14} /> : <TriangleAlert size={14} />}
+          <Typography variant="bodyXs">
             {jsonModuleAvailable
               ? "JSON module is available"
               : "JSON module is not loaded on this Valkey instance"}
-          </span>
+          </Typography>
         </div>
 
         <Textarea
@@ -330,7 +331,7 @@ export function JsonFields({ value, setValue, jsonModuleAvailable = false }: Jso
           required
           value={value}
         />
-        <p className="text-xs text-muted-foreground">Enter valid JSON data</p>
+        <Typography variant="bodyXs">Enter valid JSON data</Typography>
       </div>
     </div>
   )
diff --git a/apps/frontend/src/components/monitoring/Monitoring.tsx b/apps/frontend/src/components/monitoring/Monitoring.tsx
index 9fc2d047..38ed64fe 100644
--- a/apps/frontend/src/components/monitoring/Monitoring.tsx
+++ b/apps/frontend/src/components/monitoring/Monitoring.tsx
@@ -12,7 +12,6 @@ import { CommandLogTable } from "./command-log-table"
 import KeyDetails from "../key-browser/key-details/key-details"
 import RouteContainer from "../ui/route-container"
 import { Button } from "../ui/button"
-import { Panel } from "../ui/panel"
 import type { RootState } from "@/store"
 import { commandLogsRequested, selectCommandLogs } from "@/state/valkey-features/commandlogs/commandLogsSlice"
 import { useAppDispatch } from "@/hooks/hooks"
@@ -151,10 +150,10 @@ export const Monitoring = () => {
 
       {/* Tab Content */}
       {activeTab === "hot-keys" ? (
-        <div className="flex flex-1">
+        <div className="flex flex-1 h-full overflow-hidden gap-2">
           {/* Hot Keys List */}
-          <div className={selectedKey ? "w-2/3 pr-2" : "w-full"}>
-            <Panel >
+          <div className={selectedKey ? "w-2/3 h-full" : "w-full h-full"}>
+            <div className="flex-1 h-full border border-input rounded-md shadow-xs">
               <HotKeys
                 data={hotKeysData}
                 errorMessage={hotKeysErrorMessage as string | null}
@@ -162,23 +161,25 @@ export const Monitoring = () => {
                 selectedKey={selectedKey}
                 status={hotKeysStatus}
               />
-            </Panel>
+            </div>
           </div>
           {/* Key Details Panel */}
           {selectedKey && (
-            <KeyDetails
-              connectionId={id!}
-              readOnly={true}
-              selectedKey={selectedKey}
-              selectedKeyInfo={selectedKeyInfo}
-              setSelectedKey={setSelectedKey}
-            />
+            <div className="w-1/3 h-full">
+              <KeyDetails
+                connectionId={id!}
+                readOnly={true}
+                selectedKey={selectedKey}
+                selectedKeyInfo={selectedKeyInfo}
+                setSelectedKey={setSelectedKey}
+              />
+            </div>
           )}
         </div>
       ) : (
-        <Panel>
+        <div className="flex-1 h-full border border-input rounded-md shadow-xs">
           <CommandLogTable data={getCurrentCommandLogData()} logType={commandLogSubTab} />
-        </Panel>
+        </div>
       )}
     </RouteContainer>
 
diff --git a/apps/frontend/src/components/monitoring/command-log-table.tsx b/apps/frontend/src/components/monitoring/command-log-table.tsx
index 335a2071..a48d685b 100644
--- a/apps/frontend/src/components/monitoring/command-log-table.tsx
+++ b/apps/frontend/src/components/monitoring/command-log-table.tsx
@@ -5,6 +5,7 @@ import { SORT_ORDER, SORT_FIELD } from "@common/src/constants"
 import { EmptyState } from "../ui/empty-state"
 import { TableContainer } from "../ui/table-container"
 import { SortableTableHeader, StaticTableHeader } from "../ui/sortable-table-header"
+import { Typography } from "../ui/typography"
 
 type SortOrder = typeof SORT_ORDER.ASC | typeof SORT_ORDER.DESC
 type SortField = typeof SORT_FIELD.TIMESTAMP | typeof SORT_FIELD.METRIC
@@ -131,30 +132,30 @@ export function CommandLogTable({ data, logType }: CommandLogTableProps) {
           >
             {/* command */}
             <td className="px-4 py-2 flex-1">
-              <code className="text-sm font-mono text-tw-primary bg-tw-primary/20 px-3 py-1 rounded-full">
+              <Typography className="bg-primary/30 py-1 px-2 rounded-full"  variant="code">
                 {entry.argv.join(" ")}
-              </code>
+              </Typography>
             </td>
 
             {/* metric (duration or size) */}
             <td className="px-4 py-2 w-1/6 text-center">
-              <span className="inline-flex font-mono items-center text-sm bg-tw-primary/30 px-2 text-tw-primary rounded-full">
+              <Typography className="" variant="bodySm">
                 {config.metricFormat(metricValue)}
-              </span>
+              </Typography>
             </td>
 
             {/* timestamp */}
             <td className="px-4 py-2 w-1/4 text-center">
-              <span className="text-sm">
+              <Typography variant="bodySm">
                 {new Date(entry.ts).toLocaleString()}
-              </span>
+              </Typography>
             </td>
 
             {/* client address */}
             <td className="px-4 py-2 w-1/5 text-center">
-              <span className="text-sm font-mono">
+              <Typography variant="code">
                 {entry.addr}
-              </span>
+              </Typography>
             </td>
           </tr>
         )
diff --git a/apps/frontend/src/components/monitoring/hot-keys.tsx b/apps/frontend/src/components/monitoring/hot-keys.tsx
index 792453d1..43251531 100644
--- a/apps/frontend/src/components/monitoring/hot-keys.tsx
+++ b/apps/frontend/src/components/monitoring/hot-keys.tsx
@@ -8,6 +8,7 @@ import { LoadingState } from "../ui/loading-state"
 import { EmptyState } from "../ui/empty-state"
 import { TableContainer } from "../ui/table-container"
 import { SortableTableHeader, StaticTableHeader, type SortOrder } from "../ui/sortable-table-header"
+import { Typography } from "../ui/typography"
 import { copyToClipboard } from "@/lib/utils"
 
 interface HotKeysProps {
@@ -51,6 +52,7 @@ export function HotKeys({ data, errorMessage, status, onKeyClick, selectedKey }:
           />
           <SortableTableHeader
             active={true}
+            className="text-center"
             label="Access Count"
             onClick={toggleSortOrder}
             sortOrder={sortOrder}
@@ -78,14 +80,12 @@ export function HotKeys({ data, errorMessage, status, onKeyClick, selectedKey }:
             {/* key name */}
             <td className="px-4 py-3 w-2/5">
               <div className="flex items-center gap-2">
-                <span className={`text-sm font-medium truncate
+                <Typography className={`truncate
                             ${isDeleted
-            ? "line-through opacity-75"
-            : selectedKey === keyName
-                    && "text-tw-primary font-light"
-          }`}>
+            ? "line-through opacity-75" : ""
+          }`} variant={"code"}>
                   {keyName}
-                </span>
+                </Typography>
                 {isDeleted && (
                   <span className="inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full
                              bg-red-200 dark:bg-red-400">
@@ -105,28 +105,24 @@ export function HotKeys({ data, errorMessage, status, onKeyClick, selectedKey }:
             </td>
 
             {/* access count */}
-            <td className="px-4 py-3 w-1/5">
-              <span className={`inline-flex items-center text-sm px-3 py-1 rounded-full
-                          ${isDeleted
-            ? "bg-tw-dark-border/20 dark:bg-gray-700"
-            : "bg-tw-primary/20 text-tw-primary"
-          }`}>
+            <td className="px-4 py-3 w-1/5 text-center">
+              <Typography variant={"bodySm"}>
                 {count.toLocaleString()}
-              </span>
+              </Typography>
             </td>
 
             {/* size */}
             <td className="px-4 py-3 w-1/5 text-center">
-              <span className="font-mono text-sm">
+              <Typography variant={"bodySm"}>
                 {isDeleted ? "—" : formatBytes(size!)}
-              </span>
+              </Typography>
             </td>
 
             {/* ttl */}
             <td className="px-4 py-3 w-1/5 text-center">
-              <span className="font-mono text-sm">
+              <Typography variant={"bodySm"}>
                 {isDeleted ? "—" : convertTTL(ttl)}
-              </span>
+              </Typography>
             </td>
           </tr>
         )
@@ -138,10 +134,10 @@ export function HotKeys({ data, errorMessage, status, onKeyClick, selectedKey }:
         errorMessage && (
           <div className="mt-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-md">
             <div className="flex items-start gap-2">
-              <AlertCircle className="w-4 h-4 text-red-500 mt-0.5 flex-shrink-0" />
-              <p className="text-sm text-red-700 dark:text-red-400 text-left">
+              <AlertCircle className="w-4 h-4 text-red-500 mt-0.5 shrink-0" />
+              <Typography variant="bodySm">
                 {errorMessage}
-              </p>
+              </Typography>
             </div>
           </div>
         )
diff --git a/apps/frontend/src/components/ui/connection-modal.tsx b/apps/frontend/src/components/ui/connection-modal.tsx
index d0eecd13..927e9858 100644
--- a/apps/frontend/src/components/ui/connection-modal.tsx
+++ b/apps/frontend/src/components/ui/connection-modal.tsx
@@ -4,7 +4,9 @@ import * as Dialog from "@radix-ui/react-dialog"
 import { MAX_CONNECTIONS } from "@common/src/constants.ts"
 import { Button } from "./button.tsx"
 import { Input } from "./input.tsx"
+import { Typography } from "./typography.tsx"
 import type { ConnectionDetails } from "@/state/valkey-features/connection/connectionSlice.ts"
+import { Label } from "@/components/ui/label"
 
 interface ConnectionModalProps {
   open: boolean
@@ -46,28 +48,30 @@ export function ConnectionModal({
           <div className="fixed inset-0 z-40 flex items-center justify-center">
             <div className="w-full max-w-md p-6 bg-white dark:bg-tw-dark-primary dark:border-tw-dark-border rounded-lg shadow-lg border">
               <div className="flex justify-between">
-                <Dialog.Title className="text-lg font-semibold">{title}</Dialog.Title>
+                <Dialog.Title asChild>
+                  <Typography variant="subheading">{title}</Typography>
+                </Dialog.Title>
                 <Dialog.Close asChild>
                   <Button className="hover:text-tw-primary h-auto p-0" variant="ghost">
                     <X size={20} />
                   </Button>
                 </Dialog.Close>
               </div>
-              <Dialog.Description className="text-sm font-light">
-                {description}
+              <Dialog.Description asChild>
+                <Typography variant="bodySm">{description}</Typography>
               </Dialog.Description>
 
               {errorMessage && (
-                <div className="mt-4 p-1 text-sm bg-tw-primary/20 text-red-500 border rounded">
-                  {errorMessage}
+                <div className="mt-4 p-1 bg-tw-primary/20 border rounded">
+                  <Typography className="text-red-500" variant="bodySm">{errorMessage}</Typography>
                 </div>
               )}
 
               <form className="space-y-4 mt-4" onSubmit={onSubmit}>
                 <div>
-                  <label className="block mb-1 text-sm" htmlFor="host">
+                  <Label className="block mb-1" htmlFor="host">
                     Host
-                  </label>
+                  </Label>
                   <Input
                     id="host"
                     onChange={(e) =>
@@ -81,9 +85,9 @@ export function ConnectionModal({
                 </div>
 
                 <div>
-                  <label className="block mb-1 text-sm" htmlFor="port">
+                  <Label className="block mb-1" htmlFor="port">
                     Port
-                  </label>
+                  </Label>
                   <Input
                     id="port"
                     onChange={(e) =>
@@ -97,9 +101,9 @@ export function ConnectionModal({
                 </div>
 
                 <div>
-                  <label className="block mb-1 text-sm" htmlFor="alias">
+                  <Label className="block mb-1" htmlFor="alias">
                     Alias
-                  </label>
+                  </Label>
                   <Input
                     className="placeholder:text-xs"
                     id="alias"
@@ -113,9 +117,9 @@ export function ConnectionModal({
                 </div>
 
                 <div>
-                  <label className="block mb-1 text-sm" htmlFor="username">
+                  <Label className="block mb-1" htmlFor="username">
                     Username
-                  </label>
+                  </Label>
                   <Input
                     id="username"
                     onChange={(e) =>
@@ -127,9 +131,9 @@ export function ConnectionModal({
                 </div>
 
                 <div>
-                  <label className="block mb-1 text-sm" htmlFor="password">
+                  <Label className="block mb-1" htmlFor="password">
                     Password
-                  </label>
+                  </Label>
                   <Input
                     id="password"
                     onChange={(e) =>
@@ -153,9 +157,9 @@ export function ConnectionModal({
                     }
                     type="checkbox"
                   />
-                  <label className="text-sm select-none" htmlFor="tls">
+                  <Label className="select-none" htmlFor="tls">
                     {showVerifyTlsCertificate ? "Use TLS" : "TLS"}
-                  </label>
+                  </Label>
                 </div>
 
                 {showVerifyTlsCertificate && (
@@ -172,16 +176,18 @@ export function ConnectionModal({
                       }
                       type="checkbox"
                     />
-                    <label className="text-sm select-none" htmlFor="verifycert">
+                    <Label className="select-none" htmlFor="verifycert">
                       Verify TLS Certificate
-                    </label>
+                    </Label>
                   </div>
                 )}
 
                 {showConnectionLimitWarning && (
-                  <div className="mt-4 p-2 text-sm bg-yellow-100 text-yellow-800 border rounded">
-                    You've reached the maximum of {MAX_CONNECTIONS} active connections.
-                    Please disconnect one before connecting to another.
+                  <div className="mt-4 p-2 bg-yellow-100 border rounded">
+                    <Typography variant="bodyXs">
+                      You've reached the maximum of {MAX_CONNECTIONS} active connections.
+                      Please disconnect one before connecting to another.
+                    </Typography>
                   </div>
                 )}