From 183c4f99067e9be7b51ffe7127ba6e342f2e6cab Mon Sep 17 00:00:00 2001
From: nassery318 <nassery318@gmail.com>
Date: Tue, 24 Feb 2026 12:30:20 -0500
Subject: [PATCH] applied typography to connection, keybrowser, learn more,
 send command and setting views

Signed-off-by: nassery318 <nassery318@gmail.com>
---
 .../src/components/connection/Connection.tsx  |  2 +-
 .../src/components/key-browser/KeyBrowser.tsx |  7 ++++-
 .../src/components/key-browser/add-key.tsx    | 17 ++++++----
 .../key-details/key-details-hash.tsx          | 13 ++++----
 .../key-details/key-details-json.tsx          | 11 ++++---
 .../key-details/key-details-list.tsx          | 15 ++++-----
 .../key-details/key-details-set.tsx           | 15 ++++-----
 .../key-details/key-details-stream.tsx        | 22 +++++++------
 .../key-details/key-details-string.tsx        | 11 ++++---
 .../key-details/key-details-zset.tsx          | 11 ++++---
 .../key-browser/key-details/key-details.tsx   | 11 ++++---
 .../src/components/key-browser/key-tree.tsx   | 31 ++++++++++---------
 .../src/components/learn-more/LearnMore.tsx   | 18 ++++++-----
 .../components/send-command/SendCommand.tsx   | 25 ++++++++-------
 .../src/components/settings/Settings.tsx      | 30 +++++++++---------
 15 files changed, 133 insertions(+), 106 deletions(-)

diff --git a/apps/frontend/src/components/connection/Connection.tsx b/apps/frontend/src/components/connection/Connection.tsx
index b9b1bacb..ad2691c5 100644
--- a/apps/frontend/src/components/connection/Connection.tsx
+++ b/apps/frontend/src/components/connection/Connection.tsx
@@ -60,7 +60,7 @@ export function Connection() {
       {/* top header */}
       <div className="flex items-center justify-between h-10">
         <Typography className="flex items-center gap-2" variant="heading">
-          <HousePlug /> Connections
+          <HousePlug size={20}/> Connections
         </Typography>
         {hasConnectionsWithHistory && (
           <Button
diff --git a/apps/frontend/src/components/key-browser/KeyBrowser.tsx b/apps/frontend/src/components/key-browser/KeyBrowser.tsx
index ba6caa10..a416f48f 100644
--- a/apps/frontend/src/components/key-browser/KeyBrowser.tsx
+++ b/apps/frontend/src/components/key-browser/KeyBrowser.tsx
@@ -21,6 +21,7 @@ import { StatCard } from "../ui/stat-card"
 import { SearchInput } from "../ui/search-input"
 import RouteContainer from "../ui/route-container"
 import { TooltipIcon } from "../ui/tooltip-icon"
+import { Typography } from "../ui/typography"
 import { SplitPanel } from "../ui/split-panel"
 import { Panel } from "../ui/panel"
 import { useAppDispatch } from "@/hooks/hooks"
@@ -141,7 +142,11 @@ export function KeyBrowser() {
     <RouteContainer title="Key Browser">
       <AppHeader icon={<KeyRound size={20} />} title="Key Browser" />
 
-      {error && <div className="ml-2">Error loading keys: {error}</div>}
+      {error && (
+        <Typography className="ml-2" variant="bodySm">
+          Error loading keys: {error}
+        </Typography>
+      )}
 
       {/* Total Keys and Key Stats */}
       <TooltipProvider>
diff --git a/apps/frontend/src/components/key-browser/add-key.tsx b/apps/frontend/src/components/key-browser/add-key.tsx
index c6bb349f..d629022c 100644
--- a/apps/frontend/src/components/key-browser/add-key.tsx
+++ b/apps/frontend/src/components/key-browser/add-key.tsx
@@ -14,6 +14,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Select } from "@/components/ui/select"
+import { Typography } from "@/components/ui/typography"
 
 interface AddNewKeyProps {
   onClose: () => void;
@@ -253,7 +254,9 @@ export default function AddNewKey({ onClose }: AddNewKeyProps) {
             <div className="w-1/2 h-3/4 p-6 bg-white dark:bg-tw-dark-primary dark:border-tw-dark-border rounded-lg shadow-lg 
             border flex flex-col">
               <div className="flex justify-between">
-                <Dialog.Title className="text-lg font-semibold">Add Key</Dialog.Title>
+                <Dialog.Title asChild>
+                  <Typography variant="subheading">Add Key</Typography>
+                </Dialog.Title>
                 <Dialog.Close asChild>
                   <Button className="hover:text-tw-primary h-auto p-0" variant="ghost">
                     <X size={20} />
@@ -309,9 +312,9 @@ export default function AddNewKey({ onClose }: AddNewKeyProps) {
                       />
                     </div>
                   </div>
-                  <div className="mt-6 text-sm font-semibold border-b border-tw-dark-border pb-2">
+                  <Typography className="mt-6 border-b border-tw-dark-border pb-2" variant="bodySm">
                     Key Elements
-                  </div>
+                  </Typography>
                 </div>
                 <div className="flex-1 overflow-y-auto min-h-0 px-1">
                   {keyType === KEY_TYPES.STRING ? (
@@ -355,14 +358,16 @@ export default function AddNewKey({ onClose }: AddNewKeyProps) {
                   ) : keyType === KEY_TYPES.JSON ? (
                     <JsonFields jsonModuleAvailable={jsonModuleAvailable} setValue={setValue} value={value} />
                   ) : (
-                    <div className="mt-2 text-sm font-light">Select a key type</div>
+                    <Typography className="mt-2 text-gray-500" variant="bodySm">
+                      Select a key type
+                    </Typography>
                   )}
                 </div>
                 <div className="flex-shrink-0">
                   {error && (
-                    <div className="mt-4 text-sm text-red-500 font-medium">
+                    <Typography className="mt-4" variant="bodySm">
                       {error}
-                    </div>
+                    </Typography>
                   )}
 
                   <div className="pt-2 text-sm flex space-x-1">
diff --git a/apps/frontend/src/components/key-browser/key-details/key-details-hash.tsx b/apps/frontend/src/components/key-browser/key-details/key-details-hash.tsx
index cb4fc5fa..fd5a7e1f 100644
--- a/apps/frontend/src/components/key-browser/key-details/key-details-hash.tsx
+++ b/apps/frontend/src/components/key-browser/key-details/key-details-hash.tsx
@@ -5,6 +5,7 @@ import { Button } from "../../ui/button"
 import { Input } from "../../ui/input"
 import { EditActionButtons } from "../../ui/edit-action-buttons"
 import DeleteModal from "../../ui/delete-modal"
+import { Typography } from "../../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { updateKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { cn } from "@/lib/utils"
@@ -145,8 +146,8 @@ export default function KeyDetailsHash(
     <div className="flex items-center justify-center w-full p-4">
       <div className="w-full">
         <div className={cn("grid grid-cols-4 gap-4 items-center py-1 px-4", "bg-muted/60 text-foreground")}>
-          <div className="font-semibold text-left">Key</div>
-          <div className="col-span-2 font-semibold text-left">Value</div>
+          <Typography className="text-left" variant="label">Key</Typography>
+          <Typography className="col-span-2 text-left" variant="label">Value</Typography>
           <div className="flex justify-end gap-1">
             <EditActionButtons
               isEditable={isEditable}
@@ -159,8 +160,8 @@ export default function KeyDetailsHash(
         {selectedKeyInfo.elements
           .filter((element: ElementInfo) => !deletedHashFields.has(element.key))
           .map((element: ElementInfo, index: number) => (
-            <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={index}>
-              <div>{element.key}</div>
+            <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={index}>
+              <Typography variant="code">{element.key}</Typography>
               <div className="col-span-3">
                 {isEditable ? (
                   <div className="flex gap-2 relative">
@@ -187,13 +188,13 @@ export default function KeyDetailsHash(
                     )}
                   </div>
                 ) : (
-                  element.value
+                  <Typography variant="code">{element.value}</Typography>
                 )}
               </div>
             </div>
           ))}
         {isEditable && newFields.map((newField) => (
-          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={newField.tempId}>
+          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={newField.tempId}>
             <div>
               <Input
                 onChange={(e) => handleNewFieldKeyChange(newField.tempId, e.target.value)}
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 a2d05d03..fb23246f 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
@@ -4,6 +4,7 @@ import { KEY_TYPES } from "@common/src/constants"
 import { useSelector } from "react-redux"
 import { EditActionButtons } from "../../ui/edit-action-buttons"
 import { Textarea } from "../../ui/textarea"
+import { Typography } from "../../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { updateKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { selectJsonModuleAvailable } from "@/state/valkey-features/connection/connectionSelectors"
@@ -78,8 +79,8 @@ export default function KeyDetailsJson(
       <table className="table-auto w-full overflow-hidden">
         <thead className={cn("bg-muted/60 text-foreground")}>
           <tr>
-            <th className="w-full py-3 px-4 text-left font-semibold">
-              JSON Value
+            <th className="w-full py-3 px-4 text-left">
+              <Typography variant="label">JSON Value</Typography>
             </th>
             <th className="">
               <EditActionButtons
@@ -107,7 +108,7 @@ export default function KeyDetailsJson(
             </tr>
           )}
           <tr>
-            <td className={cn("py-3 px-4 font-light text-foreground")} colSpan={2}>
+            <td className={cn("py-3 px-4 text-foreground")} colSpan={2}>
               {isEditable ? (
                 <div>
                   <Textarea
@@ -123,9 +124,9 @@ export default function KeyDetailsJson(
                   )}
                 </div>
               ) : (
-                <pre className="font-mono text-sm overflow-x-auto whitespace-pre-wrap break-words">
+                <Typography className="overflow-x-auto whitespace-pre-wrap break-words" variant="code">
                   {formattedJson}
-                </pre>
+                </Typography>
               )}
             </td>
           </tr>
diff --git a/apps/frontend/src/components/key-browser/key-details/key-details-list.tsx b/apps/frontend/src/components/key-browser/key-details/key-details-list.tsx
index 1d72446e..47314616 100644
--- a/apps/frontend/src/components/key-browser/key-details/key-details-list.tsx
+++ b/apps/frontend/src/components/key-browser/key-details/key-details-list.tsx
@@ -5,6 +5,7 @@ import { Button } from "../../ui/button"
 import { Input } from "../../ui/input"
 import { EditActionButtons } from "../../ui/edit-action-buttons"
 import DeleteModal from "../../ui/delete-modal"
+import { Typography } from "../../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { updateKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { cn } from "@/lib/utils"
@@ -133,8 +134,8 @@ export default function KeyDetailsList(
     <div className="flex items-center justify-center w-full p-4">
       <div className="w-full">
         <div className={cn("grid grid-cols-4 gap-4 items-center py-1 px-4", "bg-muted/60 text-foreground")}>
-          <div className="font-semibold text-left">Index</div>
-          <div className="col-span-2 font-semibold text-left">Elements</div>
+          <Typography className="text-left" variant="label">Index</Typography>
+          <Typography className="col-span-2 text-left" variant="label">Elements</Typography>
           <div className="flex justify-end gap-1">
             <EditActionButtons
               isEditable={isEditable}
@@ -148,8 +149,8 @@ export default function KeyDetailsList(
           .map((element: string, index: number) => ({ element, index }))
           .filter(({ index }) => !deletedIndices.has(index))
           .map(({ element, index }) => (
-            <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={index}>
-              <div>{index}</div>
+            <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={index}>
+              <Typography variant="bodySm">{index}</Typography>
               <div className="col-span-3">
                 {isEditable ? (
                   <div className="flex gap-2 relative">
@@ -176,14 +177,14 @@ export default function KeyDetailsList(
                     )}
                   </div>
                 ) : (
-                  String(element)
+                  <Typography variant="code">{String(element)}</Typography>
                 )}
               </div>
             </div>
           ))}
         {isEditable && newItems.map((newItem) => (
-          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={newItem.tempId}>
-            <div>New</div>
+          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={newItem.tempId}>
+            <Typography variant="bodySm">New</Typography>
             <div className="col-span-3">
               <div className="flex gap-2">
                 <Input
diff --git a/apps/frontend/src/components/key-browser/key-details/key-details-set.tsx b/apps/frontend/src/components/key-browser/key-details/key-details-set.tsx
index 8f26212d..e8be3d38 100644
--- a/apps/frontend/src/components/key-browser/key-details/key-details-set.tsx
+++ b/apps/frontend/src/components/key-browser/key-details/key-details-set.tsx
@@ -5,6 +5,7 @@ import { Button } from "../../ui/button"
 import { Input } from "../../ui/input"
 import { EditActionButtons } from "../../ui/edit-action-buttons"
 import DeleteModal from "../../ui/delete-modal"
+import { Typography } from "../../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { updateKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { cn } from "@/lib/utils"
@@ -130,8 +131,8 @@ export default function KeyDetailsSet(
     <div className="flex items-center justify-center w-full p-4">
       <div className="w-full">
         <div className={cn("grid grid-cols-4 gap-4 items-center py-1 px-4", "bg-muted/60 text-foreground")}>
-          <div className="font-semibold text-left">Index</div>
-          <div className="col-span-2 font-semibold text-left">Value</div>
+          <Typography className="text-left" variant="label">Index</Typography>
+          <Typography className="col-span-2 text-left" variant="label">Value</Typography>
           <div className="flex justify-end gap-1">
             <EditActionButtons
               isEditable={isEditable}
@@ -145,8 +146,8 @@ export default function KeyDetailsSet(
           .map((element: string, index: number) => ({ element, index }))
           .filter(({ element }) => !deletedValues.has(element))
           .map(({ element, index }) => (
-            <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={index}>
-              <div>{index}</div>
+            <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={index}>
+              <Typography variant="bodySm">{index}</Typography>
               <div className="col-span-3">
                 {isEditable ? (
                   <div className="flex gap-2 relative">
@@ -173,14 +174,14 @@ export default function KeyDetailsSet(
                     )}
                   </div>
                 ) : (
-                  String(element)
+                  <Typography variant="code">{String(element)}</Typography>
                 )}
               </div>
             </div>
           ))}
         {isEditable && newItems.map((newItem) => (
-          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={newItem.tempId}>
-            <div>New</div>
+          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={newItem.tempId}>
+            <Typography variant="bodySm">New</Typography>
             <div className="col-span-3">
               <div className="flex gap-2">
                 <Input
diff --git a/apps/frontend/src/components/key-browser/key-details/key-details-stream.tsx b/apps/frontend/src/components/key-browser/key-details/key-details-stream.tsx
index 0e18f30a..2d5937b7 100644
--- a/apps/frontend/src/components/key-browser/key-details/key-details-stream.tsx
+++ b/apps/frontend/src/components/key-browser/key-details/key-details-stream.tsx
@@ -1,3 +1,4 @@
+import { Typography } from "../../ui/typography"
 import { cn } from "@/lib/utils"
 
 interface KeyDetailsStreamProps {
@@ -24,28 +25,29 @@ export default function KeyDetailsStream(
     <div className="flex flex-col w-full p-4 space-y-4">
       {selectedKeyInfo?.elements.map((entry, index: number) => (
         <div className="overflow-hidden" key={index}>
-          <div className={cn("bg-muted/60 text-foreground py-2 px-4 font-semibold")}>
-            Entry ID: {entry.key} <span className="text-xs font-light">({new Date(Number(entry.key.split("-")[0])).toLocaleString()})</span>
+          <div className={cn("bg-muted/60 text-foreground py-2 px-4")}>
+            <Typography variant="label">Entry ID: {entry.key}</Typography> 
+            <Typography variant="bodySm">({new Date(Number(entry.key.split("-")[0])).toLocaleString()})</Typography>
           </div>
           <table className="table-auto w-full">
             <thead className={cn("bg-muted/50 text-foreground")}>
               <tr>
-                <th className="w-1/2 py-3 px-4 text-left font-semibold">
-                  Field
+                <th className="w-1/2 py-3 px-4 text-left">
+                  <Typography variant="label">Field</Typography>
                 </th>
-                <th className="w-1/2 py-3 px-4 text-left font-semibold">
-                  Value
+                <th className="w-1/2 py-3 px-4 text-left">
+                  <Typography variant="label">Value</Typography>
                 </th>
               </tr>
             </thead>
             <tbody>
               {entry.value.map(([field, value], fieldIndex: number) => (
                 <tr key={fieldIndex}>
-                  <td className={cn("py-3 px-4 border-b border-border font-light text-foreground")}>
-                    {field}
+                  <td className={cn("py-3 px-4 border-b border-border text-foreground")}>
+                    <Typography variant="code">{field}</Typography>
                   </td>
-                  <td className={cn("py-3 px-4 border-b border-border font-light text-foreground")}>
-                    {value}
+                  <td className={cn("py-3 px-4 border-b border-border text-foreground")}>
+                    <Typography variant="code">{value}</Typography>
                   </td>
                 </tr>
               ))}
diff --git a/apps/frontend/src/components/key-browser/key-details/key-details-string.tsx b/apps/frontend/src/components/key-browser/key-details/key-details-string.tsx
index 0e6c8a26..77805014 100644
--- a/apps/frontend/src/components/key-browser/key-details/key-details-string.tsx
+++ b/apps/frontend/src/components/key-browser/key-details/key-details-string.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react"
 import { EditActionButtons } from "../../ui/edit-action-buttons"
 import { Textarea } from "../../ui/textarea"
+import { Typography } from "../../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { updateKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { cn } from "@/lib/utils"
@@ -52,8 +53,8 @@ export default function KeyDetailsString(
       <table className="table-auto w-full overflow-hidden">
         <thead className={cn("bg-muted/60 text-foreground")}>
           <tr>
-            <th className="w-full py-3 px-4 text-left font-semibold">
-              Value
+            <th className="w-full py-3 px-4 text-left">
+              <Typography variant="label">Value</Typography>
             </th>
             <th className="">
               <EditActionButtons
@@ -67,7 +68,7 @@ export default function KeyDetailsString(
         </thead>
         <tbody>
           <tr>
-            <td className={cn("py-3 px-4 font-light text-foreground")} colSpan={2}>
+            <td className={cn("py-3 px-4 text-foreground")} colSpan={2}>
               {isEditable ? (
                 <Textarea
                   autoFocus
@@ -76,9 +77,9 @@ export default function KeyDetailsString(
                   value={editedValue}
                 />
               ) : (
-                <div className="whitespace-pre-wrap break-words">
+                <Typography className="whitespace-pre-wrap break-words" variant="code">
                   {selectedKeyInfo.elements}
-                </div>
+                </Typography>
               )}
             </td>
           </tr>
diff --git a/apps/frontend/src/components/key-browser/key-details/key-details-zset.tsx b/apps/frontend/src/components/key-browser/key-details/key-details-zset.tsx
index d691fc84..d76f27ea 100644
--- a/apps/frontend/src/components/key-browser/key-details/key-details-zset.tsx
+++ b/apps/frontend/src/components/key-browser/key-details/key-details-zset.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react"
 import { Input } from "../../ui/input"
 import { EditActionButtons } from "../../ui/edit-action-buttons"
+import { Typography } from "../../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { updateKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { cn } from "@/lib/utils"
@@ -76,8 +77,8 @@ export default function KeyDetailsZSet(
     <div className="flex items-center justify-center w-full p-4">
       <div className="w-full">
         <div className={cn("grid grid-cols-4 gap-4 items-center py-1 px-4", "bg-muted/60 text-foreground")}>
-          <div className="font-semibold text-left">Key</div>
-          <div className="col-span-2 font-semibold text-left">Value</div>
+          <Typography className="text-left" variant="label">Key</Typography>
+          <Typography className="col-span-2 text-left" variant="label">Value</Typography>
           <div className="flex justify-end gap-1">
             <EditActionButtons
               isEditable={isEditable}
@@ -88,8 +89,8 @@ export default function KeyDetailsZSet(
           </div>
         </div>
         {selectedKeyInfo.elements.map((element: ZSetElement, index: number) => (
-          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border font-light text-foreground")} key={index}>
-            <div>{element.key}</div>
+          <div className={cn("grid grid-cols-4 gap-4 py-3 px-4 border-b border-border text-foreground")} key={index}>
+            <Typography variant="code">{element.key}</Typography>
             <div className="col-span-3">
               {isEditable ? (
                 <Input
@@ -99,7 +100,7 @@ export default function KeyDetailsZSet(
                   value={editedValues[index] !== undefined ? editedValues[index] : element.value}
                 />
               ) : (
-                element.value
+                <Typography variant="code">{element.value}</Typography>
               )}
             </div>
           </div>
diff --git a/apps/frontend/src/components/key-browser/key-details/key-details.tsx b/apps/frontend/src/components/key-browser/key-details/key-details.tsx
index d1fb9e66..d5447ff5 100644
--- a/apps/frontend/src/components/key-browser/key-details/key-details.tsx
+++ b/apps/frontend/src/components/key-browser/key-details/key-details.tsx
@@ -16,6 +16,7 @@ import KeyDetailsJson from "./key-details-json"
 import { useAppDispatch } from "@/hooks/hooks"
 import { deleteKeyRequested } from "@/state/valkey-features/keys/keyBrowserSlice"
 import { CustomTooltip } from "@/components/ui/tooltip"
+import { Typography } from "@/components/ui/typography"
 
 interface BaseKeyInfo {
   name: string;
@@ -96,10 +97,10 @@ export default function KeyDetails({ selectedKey, selectedKeyInfo, connectionId,
           <div className="h-full p-4 text-sm font-light overflow-y-auto">
             {/* Header Section */}
             <div className="flex justify-between items-center mb-2 border-b pb-4 border-tw-dark-border">
-              <span className="font-semibold flex items-center gap-2">
+              <Typography className="flex items-center gap-2" variant="label">
                 <Key size={16} />
                 {selectedKey}
-              </span>
+              </Typography>
               <div className="space-x-2 flex items-center relative">
 
                 {!readOnly && (
@@ -217,8 +218,10 @@ export default function KeyDetails({ selectedKey, selectedKeyInfo, connectionId,
             )}
           </div>
         ) : (
-          <div className="h-full p-4 text-sm font-light flex items-center justify-center text-gray-500">
-            Select a key to see details
+          <div className="h-full p-4 flex items-center justify-center">
+            <Typography variant="bodySm">
+              Select a key to see details
+            </Typography>
           </div>
         )}
       </Panel>
diff --git a/apps/frontend/src/components/key-browser/key-tree.tsx b/apps/frontend/src/components/key-browser/key-tree.tsx
index 6fecab7a..134281d1 100644
--- a/apps/frontend/src/components/key-browser/key-tree.tsx
+++ b/apps/frontend/src/components/key-browser/key-tree.tsx
@@ -4,6 +4,7 @@ import { convertTTL } from "@common/src/ttl-conversion"
 import { formatBytes } from "@common/src/bytes-conversion"
 import { keyTreeBuilder, countKeys } from "@common/src/key-tree-builder"
 import { CustomTooltip } from "../ui/tooltip"
+import { Typography } from "../ui/typography"
 
 interface KeyInfo {
   name: string
@@ -69,7 +70,7 @@ function TreeNodeItem({ node, level, selectedKey, onKeyClick, loading }: TreeNod
       <div
         className={`${showBorder ? "h-16 p-2 dark:border-tw-dark-border border hover:bg-tw-primary/30 cursor-pointer rounded" 
           : "py-1 px-2 cursor-pointer hover:bg-tw-primary/10 rounded text-sm"} flex items-center gap-2 justify-between ${
-          isSelected ? "bg-tw-primary/80 hover:bg-tw-primary/80" : ""
+          isSelected ? "border-l-6 border-primary bg-primary/20 dark:bg-primary/50" : ""
         }`}
         onClick={handleClick}
       >
@@ -99,49 +100,49 @@ function TreeNodeItem({ node, level, selectedKey, onKeyClick, loading }: TreeNod
           <div className="flex flex-col flex-1 min-w-0">
             <span className="flex items-center gap-2">
               {node.isLeaf && <Key size={16} />}
-              <span className="truncate">{node.segment}</span>
+              <Typography className="truncate" variant="bodySm">{node.segment}</Typography>
               {!node.isLeaf && (
-                <span className={`text-xs ${isSelected ? "text-white" : "text-tw-primary"}`}>
+                <Typography  variant="bodySm">
                   ({keyCount})
-                </span>
+                </Typography>
               )}
             </span>
             {node.isLeaf && node.key && (
-              <div className={`ml-6 text-xs font-light uppercase text-tw-primary ${isSelected ? "text-white" : ""}`}>
+              <Typography className="uppercase" variant="bodyXs">
                 {node.key.type === "ReJSON-RL" ? "json" : node.key.type}
-              </div>
+              </Typography>
             )}
           </div>
         </div>
 
         {/* key ttl and size only for leaf nodes */}
         {node.isLeaf && node.key && (
-          <div className="flex items-center gap-1 text-xs">
+          <div className="flex items-center gap-1">
             {node.key.size && (
               <CustomTooltip content="Size">
-                <span
-                  className={`flex items-center justify-between gap-1 text-xs px-2 py-1
-                   text-tw-primary ${isSelected ? "text-white" : ""} dark:text-white`}
+                <Typography
+                  className="flex items-center justify-between gap-1 px-2 py-1"
+                  variant="bodyXs"
                 >
                   <Database
                     className="text-white bg-tw-primary p-1 rounded-full"
                     size={20}
                   />{" "}
                   {formatBytes(node.key.size)}
-                </span>
+                </Typography>
               </CustomTooltip>
             )}
             <CustomTooltip content="TTL">
-              <span
-                className={`flex items-center justify-between gap-1 text-xs px-2 py-1
-                  text-tw-primary ${isSelected ? "text-white" : ""} dark:text-white`}
+              <Typography
+                className="flex items-center justify-between gap-1 px-2 py-1"
+                variant="bodyXs"
               >
                 <Hourglass
                   className="text-white bg-tw-primary p-1 rounded-full"
                   size={20}
                 />{" "}
                 {convertTTL(node.key.ttl)}
-              </span>
+              </Typography>
             </CustomTooltip>
           </div>
         )}
diff --git a/apps/frontend/src/components/learn-more/LearnMore.tsx b/apps/frontend/src/components/learn-more/LearnMore.tsx
index 3a40e93e..0f7ee27a 100644
--- a/apps/frontend/src/components/learn-more/LearnMore.tsx
+++ b/apps/frontend/src/components/learn-more/LearnMore.tsx
@@ -1,25 +1,27 @@
 import { CircleQuestionMark } from "lucide-react"
+import RouteContainer from "../ui/route-container"
+import { Typography } from "../ui/typography"
 
 export default function LearnMore() {
   return (
-    <div className="p-4 relative min-h-screen flex flex-col">
+    <RouteContainer title="Learn More">
       {/* top header */}
       <div className="flex items-center justify-between h-10">
-        <h1 className="text-xl font-bold flex items-center gap-2 text-gray-700 dark:text-white">
-          <CircleQuestionMark /> Learn More
-        </h1>
+        <Typography className="flex items-center gap-2" variant={"heading"}>
+          <CircleQuestionMark size={20}/> Learn More
+        </Typography>
       </div>
-      <div className="flex flex-col flex-1 items-center justify-center gap-2 font-light text-sm">
+      <div className="flex flex-col flex-1 items-center justify-center gap-2">
         <a
-          className="text-tw-primary underline"
+          className="text-tw-primary underline text-body-sm"
           href="https://github.com/valkey-io/valkey-admin"
           rel="noopener noreferrer"
           target="_blank"
         >
           Valkey Admin Version 0.0.1
         </a>
-        <p className="text-gray-600 dark:text-white">A dedicated UI for Valkey</p>
+        <Typography variant="bodySm">A dedicated UI for Valkey</Typography>
       </div>
-    </div>
+    </RouteContainer>
   )
 }
diff --git a/apps/frontend/src/components/send-command/SendCommand.tsx b/apps/frontend/src/components/send-command/SendCommand.tsx
index b0e83dd5..42118588 100644
--- a/apps/frontend/src/components/send-command/SendCommand.tsx
+++ b/apps/frontend/src/components/send-command/SendCommand.tsx
@@ -18,6 +18,7 @@ import { Panel } from "@/components/ui/panel.tsx"
 import DiffCommands from "@/components/send-command/DiffCommands.tsx"
 import Response from "@/components/send-command/Response.tsx"
 import { useAppDispatch } from "@/hooks/hooks.ts"
+import { Typography } from "@/components/ui/typography.tsx"
 
 export function SendCommand() {
   const dispatch = useAppDispatch()
@@ -67,7 +68,7 @@ export function SendCommand() {
       <div className="flex-1 overflow-auto w-full flex flex-row gap-4">
         {/* response | diff */}
         <div className="flex flex-col flex-2">
-          <h3 className="text-muted-foreground text-sm font-medium mb-2">{compareWith ? "Diff" : "Response"}</h3>
+          <Typography className="mb-2" variant="bodySm">{compareWith ? "Diff" : "Response"}</Typography>
           <div className="mb-2 relative">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10" size={18} />
             <Input
@@ -77,8 +78,8 @@ export function SendCommand() {
               value={keysFilter}
             /> </div>
           <Panel className="flex-1 bg-muted">
-            <pre className="h-full overflow-y-auto whitespace-pre-wrap wrap-break-word p-2">
-              <code className={`text-sm font-mono ${error ? "text-destructive" : "text-primary"}`}>
+            <Typography className="h-full overflow-y-auto whitespace-pre-wrap wrap-break-word p-2" variant={"codeBlock"}>
+              <Typography className={`${error ? "text-destructive" : ""}`} variant={"code"}>
                 {
                   compareWith === null ?
                     <Response
@@ -92,14 +93,14 @@ export function SendCommand() {
                       indexB={compareWith}
                     />
                 }
-              </code>
-            </pre>
+              </Typography>
+            </Typography>
           </Panel>
         </div>
 
         {/* commands history */}
         <div className="flex flex-col flex-1 max-w-[40vw]">
-          <h3 className="text-muted-foreground text-sm font-medium mb-2">History</h3>
+          <Typography className="mb-2" variant="bodySm">History</Typography>
           <div className="mb-2 relative">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10" size={18} />
             <Input
@@ -129,22 +130,23 @@ export function SendCommand() {
                       />
                       <Tooltip delayDuration={2000}>
                         <TooltipTrigger asChild>
-                          <div
+                          <Typography
                             className="truncate text-left cursor-pointer"
                             onClick={() => {
                               setText("")
                               setCompareWith(null)
                               setCommandIndex(i)
                             }}
+                            variant="code"
                           >
                             {command}
-                          </div>
+                          </Typography>
                         </TooltipTrigger>
                         <TooltipContent side="left">
-                          <p className="max-w-[50vw]">
+                          <Typography className="max-w-[50vw]" variant="bodySm">
                             See response for:<br/>
-                            <code>{command}</code>
-                          </p>
+                            <Typography as="span" variant="code">{command}</Typography>
+                          </Typography>
                         </TooltipContent>
                       </Tooltip>
                       <div className="flex flex-row justify-self-end ml-auto">
@@ -214,6 +216,7 @@ export function SendCommand() {
         <Button
           disabled={text.trim().length === 0}
           onClick={() => onSubmit()}
+          variant={"default"}
         >
           Send
         </Button>
diff --git a/apps/frontend/src/components/settings/Settings.tsx b/apps/frontend/src/components/settings/Settings.tsx
index c302d0b7..4498af80 100644
--- a/apps/frontend/src/components/settings/Settings.tsx
+++ b/apps/frontend/src/components/settings/Settings.tsx
@@ -6,10 +6,10 @@ import { TooltipProvider } from "@radix-ui/react-tooltip"
 import ThemeToggle from "../ui/theme-toggle"
 import { ButtonGroup } from "../ui/button-group"
 import RouteContainer from "../ui/route-container"
-import { SectionHeader } from "../ui/section-header"
 import { TooltipIcon } from "../ui/tooltip-icon"
 import { Input } from "../ui/input"
 import { Button } from "../ui/button"
+import { Typography } from "../ui/typography"
 import { useAppDispatch } from "@/hooks/hooks"
 import { selectConfig, updateConfig } from "@/state/valkey-features/config/configSlice"
 
@@ -41,27 +41,27 @@ export default function Settings() {
     <RouteContainer className="p-4 relative min-h-screen flex flex-col">
       {/* top header */}
       <div className="flex items-center justify-between h-10">
-        <h1 className="text-xl font-bold flex items-center gap-2 text-gray-700 dark:text-white">
-          <Cog /> Settings
-        </h1>
+        <Typography className="flex items-center gap-2" variant="heading">
+          <Cog size={20}/> Settings
+        </Typography>
       </div>
-      <div className="mt-4 pl-1">
-        <SectionHeader className="border-b-1 pb-1">Appearance</SectionHeader>
+      <div className="mt-4 pl-1 flex flex-col gap-3">
+        <Typography className="border-b pb-1" variant={"label"}>Appearance</Typography>
         <ThemeToggle />
       </div>
       {/* monitoring - only show when connected */}
       {config && (
         <div className="mt-10 pl-1">
           <TooltipProvider>
-            <SectionHeader className="flex items-center gap-2 border-b-1 pb-1">
+            <Typography className="flex items-center gap-2 border-b pb-1" variant="label">
               Hot Keys
               <TooltipIcon description="Enables monitoring to collect hotkeys. Requires key eviction policy not
                set to LFU* and cluster slot stats to be enabled." size={16}>
               </TooltipIcon>
-            </SectionHeader>
-            <div className="flex items-center justify-between">
+            </Typography>
+            <div className="flex  items-center justify-between mt-4">
               <div className="flex items-center gap-2">
-                <span className="text-sm">Enable Monitoring</span>
+                <Typography variant="bodySm">Enable Monitoring</Typography>
                 <TooltipIcon description="Enable or disable monitoring for this connection." size={16}>
                 </TooltipIcon>
               </div>
@@ -77,19 +77,19 @@ export default function Settings() {
 
             {monitorEnabled && (
               <div className="mt-3 flex items-center gap-2 p-2 bg-tw-primary/20 border border-tw-primary/50 rounded">
-                <AlertTriangle className="text-amber-600 flex-shrink-0" size={18} />
-                <span className="text-tw-primary text-sm">
+                <AlertTriangle className="text-amber-600 shrink-0" size={18} />
+                <Typography variant="bodySm">
                   Running{" "}
-                  <span className="font-mono">MONITOR</span>{" "}
+                  <Typography variant="code">MONITOR</Typography>{" "}
                   Monitoring can impact performance. We recommend testing with your workload
                   before production use.
-                </span>
+                </Typography>
               </div>
             )}
 
             <div className="flex items-center justify-between mt-4">
               <div className="flex items-center gap-2">
-                <span className="text-sm">Monitor Duration (ms)</span>
+                <Typography variant="bodySm">Monitor Duration (ms)</Typography>
                 <TooltipIcon description="Duration in milliseconds during which monitoring data is collected." size={16}>
                 </TooltipIcon>
               </div>