From 0f899c31c73ebb4b0a9c785a0be346dd447e30c0 Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <ryan@acorn.io>
Date: Tue, 7 Jan 2025 14:50:32 -0600
Subject: [PATCH] chore: refactor to embrace dom typographical elements

Signed-off-by: Ryan Hopper-Lowe <ryan@acorn.io>
---
 ui/admin/app/components/TruncatedText.tsx     |  29 ---
 ui/admin/app/components/Typography.tsx        | 208 ------------------
 ui/admin/app/components/agent/Agent.tsx       |  19 +-
 ui/admin/app/components/agent/AgentForm.tsx   |   5 +-
 .../components/agent/AgentPublishStatus.tsx   |   7 +-
 ui/admin/app/components/agent/PastThreads.tsx |   9 +-
 ui/admin/app/components/agent/Publish.tsx     |  18 +-
 ui/admin/app/components/agent/ToolEntry.tsx   |   4 +-
 ui/admin/app/components/agent/ToolForm.tsx    |  17 +-
 .../shared/EnvironmentVariableSection.tsx     |   5 +-
 ui/admin/app/components/branding/ObotLogo.tsx |   5 +-
 ui/admin/app/components/chat/Message.tsx      |   7 +-
 .../chat/chat-actions/KnowledgeInfo.tsx       |   7 +-
 .../chat/chat-actions/ToolsInfo.tsx           |  12 +-
 ui/admin/app/components/composed/CopyText.tsx |   5 +-
 .../composed/FirstModelProviderBanner.tsx     |   9 +-
 .../app/components/composed/typography.tsx    |  41 ++++
 .../knowledge/AgentKnowledgePanel.tsx         |   5 +-
 .../ModelProviderDeconfigure.tsx              |   9 +-
 .../model-providers/ModelProviderForm.tsx     |   9 +-
 .../components/oauth-apps/OAuthAppDetail.tsx  |  37 ++--
 .../components/oauth-apps/OAuthAppList.tsx    |   3 +-
 .../components/oauth-apps/OAuthAppTile.tsx    |   5 +-
 .../oauth-apps/custom/CustomOAuthAppForm.tsx  |   3 +-
 .../oauth-apps/custom/CustomOAuthAppTile.tsx  |  15 +-
 .../oauth-apps/custom/CustomOAuthApps.tsx     |   3 +-
 ui/admin/app/components/sidebar/Sidebar.tsx   |   7 +-
 .../tools/toolGrid/CategoryHeader.tsx         |   5 +-
 .../components/tools/toolGrid/ToolCard.tsx    |  27 +--
 .../components/tools/toolGrid/ToolGrid.tsx    |   3 +-
 .../webhooks/WebhookConfirmation.tsx          |   9 +-
 .../app/components/webhooks/WebhookForm.tsx   |   5 +-
 .../DeleteWorkflowTrigger.tsx                 |   7 +-
 .../workflow-triggers/ScheduleForm.tsx        |   5 +-
 .../workflow/DeleteWorkflowWebhook.tsx        |   5 +-
 ui/admin/app/components/workflow/Workflow.tsx |  25 +--
 .../workflow/WorkflowSchedulePanel.tsx        |   5 +-
 .../workflow/WorkflowWebhookPanel.tsx         |   7 +-
 ui/admin/app/routes/_auth.agents._index.tsx   |   7 +-
 ui/admin/app/routes/_auth.debug.tsx           |  15 +-
 ui/admin/app/routes/_auth.model-providers.tsx |   5 +-
 ui/admin/app/routes/_auth.oauth-apps.tsx      |   3 +-
 ui/admin/app/routes/_auth.threads._index.tsx  |  11 +-
 ui/admin/app/routes/_auth.tools._index.tsx    |   3 +-
 ui/admin/app/routes/_auth.users.tsx           |  13 +-
 .../routes/_auth.workflow-triggers._index.tsx |   3 +-
 .../app/routes/_auth.workflows._index.tsx     |  11 +-
 ui/admin/app/tailwind.css                     |  39 ++++
 48 files changed, 241 insertions(+), 475 deletions(-)
 delete mode 100644 ui/admin/app/components/TruncatedText.tsx
 delete mode 100644 ui/admin/app/components/Typography.tsx
 create mode 100644 ui/admin/app/components/composed/typography.tsx

diff --git a/ui/admin/app/components/TruncatedText.tsx b/ui/admin/app/components/TruncatedText.tsx
deleted file mode 100644
index 18dbf2977..000000000
--- a/ui/admin/app/components/TruncatedText.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { cn } from "~/lib/utils";
-
-import { TypographyP } from "~/components/Typography";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-} from "~/components/ui/tooltip";
-
-export function TruncatedText({
-    content,
-    className,
-}: {
-    content: React.ReactNode;
-    className?: string;
-}) {
-    return (
-        <Tooltip>
-            <TooltipTrigger asChild>
-                <div className={cn(`truncate cursor-pointer`, className)}>
-                    <TypographyP className="truncate">{content}</TypographyP>
-                </div>
-            </TooltipTrigger>
-            <TooltipContent>
-                <p>{content}</p>
-            </TooltipContent>
-        </Tooltip>
-    );
-}
diff --git a/ui/admin/app/components/Typography.tsx b/ui/admin/app/components/Typography.tsx
deleted file mode 100644
index fcac44c10..000000000
--- a/ui/admin/app/components/Typography.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import React, { ReactNode } from "react";
-
-import { cn } from "~/lib/utils";
-
-type TypographyElement = keyof JSX.IntrinsicElements;
-
-type TypographyProps<T extends TypographyElement> = {
-    children: ReactNode;
-    className?: string;
-} & React.JSX.IntrinsicElements[T];
-
-export function TypographyH1({
-    children,
-    className,
-    ...props
-}: TypographyProps<"h1">) {
-    return (
-        <h1
-            className={cn(
-                `scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl`,
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </h1>
-    );
-}
-
-export function TypographyH2({
-    children,
-    className,
-    ...props
-}: TypographyProps<"h2">) {
-    return (
-        <h2
-            className={cn(
-                `scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0`,
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </h2>
-    );
-}
-
-export function TypographyH3({
-    children,
-    className,
-    ...props
-}: TypographyProps<"h3">) {
-    return (
-        <h3
-            className={cn(
-                `scroll-m-20 text-2xl font-semibold tracking-tight`,
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </h3>
-    );
-}
-
-export function TypographyH4({
-    children,
-    className,
-    ...props
-}: TypographyProps<"h4">) {
-    return (
-        <h4
-            className={cn(
-                `scroll-m-20 text-xl font-semibold tracking-tight`,
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </h4>
-    );
-}
-
-export function TypographyP({
-    children,
-    className,
-    ...props
-}: TypographyProps<"p">) {
-    return (
-        <p className={cn(`leading-7`, className)} {...props}>
-            {children}
-        </p>
-    );
-}
-
-export function TypographyPAccent({
-    children,
-    className,
-    ...props
-}: TypographyProps<"p">) {
-    return (
-        <TypographyP className={cn(`text-secondary`, className)} {...props}>
-            {children}
-        </TypographyP>
-    );
-}
-
-export function TypographyBlockquote({
-    children,
-    className,
-    ...props
-}: TypographyProps<"blockquote">) {
-    return (
-        <blockquote
-            className={cn(`mt-6 border-l-2 pl-6 italic`, className)}
-            {...props}
-        >
-            {children}
-        </blockquote>
-    );
-}
-
-export function TypographyInlineCode({
-    children,
-    className,
-    ...props
-}: TypographyProps<"code">) {
-    return (
-        <code
-            className={cn(
-                `relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold`,
-                className
-            )}
-            {...props}
-        >
-            {children}
-        </code>
-    );
-}
-
-export function TypographyLead({
-    children,
-    className,
-    ...props
-}: TypographyProps<"p">) {
-    return (
-        <p
-            className={cn(`text-xl text-muted-foreground`, className)}
-            {...props}
-        >
-            {children}
-        </p>
-    );
-}
-
-export function TypographyLarge({
-    children,
-    className,
-    ...props
-}: TypographyProps<"div">) {
-    return (
-        <div className={cn(`text-lg font-semibold`, className)} {...props}>
-            {children}
-        </div>
-    );
-}
-
-export function TypographySmall({
-    children,
-    className,
-    ...props
-}: TypographyProps<"small">) {
-    return (
-        <small
-            className={cn(`text-sm font-medium leading-none`, className)}
-            {...props}
-        >
-            {children}
-        </small>
-    );
-}
-
-export function TypographyMuted({
-    children,
-    className,
-    ...props
-}: TypographyProps<"p">) {
-    return (
-        <p
-            className={cn(`text-sm text-muted-foreground`, className)}
-            {...props}
-        >
-            {children}
-        </p>
-    );
-}
-
-export function TypographyMutedAccent({
-    children,
-    className,
-    ...props
-}: TypographyProps<"p">) {
-    return (
-        <p className={cn(`text-sm text-blue-500`, className)} {...props}>
-            {children}
-        </p>
-    );
-}
diff --git a/ui/admin/app/components/agent/Agent.tsx b/ui/admin/app/components/agent/Agent.tsx
index 5b9979458..bc1fd9c3d 100644
--- a/ui/admin/app/components/agent/Agent.tsx
+++ b/ui/admin/app/components/agent/Agent.tsx
@@ -7,7 +7,6 @@ import { AssistantNamespace } from "~/lib/model/assistants";
 import { AgentService } from "~/lib/service/api/agentService";
 import { cn } from "~/lib/utils";
 
-import { TypographyH4, TypographyP } from "~/components/Typography";
 import { useAgent } from "~/components/agent/AgentContext";
 import { AgentForm } from "~/components/agent/AgentForm";
 import { AgentPublishStatus } from "~/components/agent/AgentPublishStatus";
@@ -111,10 +110,10 @@ export function Agent({ className, currentThreadId, onRefresh }: AgentProps) {
                 </div>
 
                 <div className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
-                    <TypographyH4 className="flex items-center gap-2 border-b pb-2">
+                    <h4 className="flex items-center gap-2 border-b pb-2">
                         <WrenchIcon className="w-5 h-5" />
                         Tools
-                    </TypographyH4>
+                    </h4>
 
                     <CardDescription>
                         Add tools the allow the agent to perform useful actions
@@ -132,10 +131,10 @@ export function Agent({ className, currentThreadId, onRefresh }: AgentProps) {
                 </div>
 
                 <div className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
-                    <TypographyH4 className="flex items-center gap-2 border-b pb-2">
+                    <h4 className="flex items-center gap-2 border-b pb-2">
                         <VariableIcon className="w-5 h-5" />
                         Environment Variables
-                    </TypographyH4>
+                    </h4>
 
                     <EnvironmentVariableSection
                         entity={agent}
@@ -145,10 +144,10 @@ export function Agent({ className, currentThreadId, onRefresh }: AgentProps) {
                 </div>
 
                 <div className="p-4 m-4 space-y-4 lg:mx-6 xl:mx-8">
-                    <TypographyH4 className="flex items-center gap-2 border-b pb-2">
+                    <h4 className="flex items-center gap-2 border-b pb-2">
                         <LibraryIcon className="w-6 h-6" />
                         Knowledge
-                    </TypographyH4>
+                    </h4>
                     <CardDescription>
                         Provide knowledge to the agent in the form of files,
                         website, or external links in order to give it context
@@ -172,11 +171,11 @@ export function Agent({ className, currentThreadId, onRefresh }: AgentProps) {
             <footer className="flex justify-between items-center px-8 py-4 gap-4 shadow-inner">
                 <div className="text-muted-foreground">
                     {error ? (
-                        <TypographyP>Error saving agent</TypographyP>
+                        <p>Error saving agent</p>
                     ) : isUpdating ? (
-                        <TypographyP>Saving...</TypographyP>
+                        <p>Saving...</p>
                     ) : lastUpdated ? (
-                        <TypographyP>Saved</TypographyP>
+                        <p>Saved</p>
                     ) : (
                         <div />
                     )}
diff --git a/ui/admin/app/components/agent/AgentForm.tsx b/ui/admin/app/components/agent/AgentForm.tsx
index e22890d66..ac24fa66d 100644
--- a/ui/admin/app/components/agent/AgentForm.tsx
+++ b/ui/admin/app/components/agent/AgentForm.tsx
@@ -8,7 +8,6 @@ import { z } from "zod";
 import { ModelUsage } from "~/lib/model/models";
 import { ModelApiService } from "~/lib/service/api/modelApiService";
 
-import { TypographyH4 } from "~/components/Typography";
 import { ComboBox } from "~/components/composed/ComboBox";
 import {
     ControlledAutosizeTextarea,
@@ -101,10 +100,10 @@ export function AgentForm({ agent, onSubmit, onChange }: AgentFormProps) {
                     className="text-xl text-muted-foreground"
                 />
 
-                <TypographyH4 className="flex items-center gap-2">
+                <h4 className="flex items-center gap-2">
                     <BrainIcon className="w-5 h-5" />
                     Instructions
-                </TypographyH4>
+                </h4>
 
                 <ControlledAutosizeTextarea
                     control={form.control}
diff --git a/ui/admin/app/components/agent/AgentPublishStatus.tsx b/ui/admin/app/components/agent/AgentPublishStatus.tsx
index 7a03d971a..651f9e805 100644
--- a/ui/admin/app/components/agent/AgentPublishStatus.tsx
+++ b/ui/admin/app/components/agent/AgentPublishStatus.tsx
@@ -7,7 +7,6 @@ import { Agent } from "~/lib/model/agents";
 import { ConsumptionUrl } from "~/lib/routers/baseRouter";
 import { AssistantApiService } from "~/lib/service/api/assistantApiService";
 
-import { TypographySmall } from "~/components/Typography";
 import { AgentDropdownActions } from "~/components/agent/AgentDropdownActions";
 import { Publish } from "~/components/agent/Publish";
 import { Unpublish } from "~/components/agent/Unpublish";
@@ -73,10 +72,10 @@ export function AgentPublishStatus({
                 <div className="flex flex-col gap-1 h-full">
                     <div className="flex items-center gap-2">
                         <div className="size-2 bg-warning rounded-full" />
-                        <TypographySmall>Unavailable</TypographySmall>
+                        <small>Unavailable</small>
                     </div>
 
-                    <TypographySmall className="pb-0 text-muted-foreground">
+                    <small className="pb-0 text-muted-foreground">
                         <span className="min-w-fit">
                             Ref name <b>{refAssistant.id}</b> used by{" "}
                         </span>
@@ -86,7 +85,7 @@ export function AgentPublishStatus({
                         >
                             {refAssistant.name}
                         </Link>
-                    </TypographySmall>
+                    </small>
                 </div>
             );
         }
diff --git a/ui/admin/app/components/agent/PastThreads.tsx b/ui/admin/app/components/agent/PastThreads.tsx
index 2ba8aead5..b79bd8742 100644
--- a/ui/admin/app/components/agent/PastThreads.tsx
+++ b/ui/admin/app/components/agent/PastThreads.tsx
@@ -5,7 +5,6 @@ import useSWR from "swr";
 import { Thread } from "~/lib/model/threads";
 import { ThreadsService } from "~/lib/service/api/threadsService";
 
-import { TypographyP } from "~/components/Typography";
 import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
 import { Button } from "~/components/ui/button";
 import {
@@ -98,17 +97,17 @@ export const PastThreads: React.FC<PastThreadsProps> = ({
                                         >
                                             <div className="flex items-center justify-between w-full">
                                                 <div>
-                                                    <TypographyP className="font-semibold">
+                                                    <p className="font-semibold">
                                                         Thread
                                                         <span className="ml-2 text-muted-foreground">
                                                             {thread.id}
                                                         </span>
-                                                    </TypographyP>
-                                                    <TypographyP className="text-sm text-gray-500">
+                                                    </p>
+                                                    <p className="text-sm text-gray-500">
                                                         {new Date(
                                                             thread.created
                                                         ).toLocaleString()}
-                                                    </TypographyP>
+                                                    </p>
                                                 </div>
                                                 <div>
                                                     {currentThreadId &&
diff --git a/ui/admin/app/components/agent/Publish.tsx b/ui/admin/app/components/agent/Publish.tsx
index cf2fe4cab..0c3efc5ea 100644
--- a/ui/admin/app/components/agent/Publish.tsx
+++ b/ui/admin/app/components/agent/Publish.tsx
@@ -1,10 +1,6 @@
 import { Eye } from "lucide-react";
 import { useState } from "react";
 
-import {
-    TypographyMuted,
-    TypographyMutedAccent,
-} from "~/components/Typography";
 import { Button } from "~/components/ui/button";
 import {
     Dialog,
@@ -47,17 +43,19 @@ export function Publish({ className, alias: _alias, onPublish }: PublishProps) {
                     />
                 </div>
                 <div className="space-y-4 py-4">
-                    <TypographyMuted>
+                    <p className="text-muted-foreground">
                         This agent will be available at:
-                    </TypographyMuted>
-                    <TypographyMutedAccent>
+                    </p>
+
+                    <p className="text-primary">
                         {`${window.location.protocol}//${window.location.host}/${alias}`}
-                    </TypographyMutedAccent>
-                    <TypographyMuted>
+                    </p>
+
+                    <p className="text-muted-foreground">
                         If you have another agent with this handle, you will
                         need to unpublish it before this agent can be accessed
                         at the above URL.
-                    </TypographyMuted>
+                    </p>
                 </div>
                 <DialogFooter>
                     <div className="w-full flex justify-center items-center gap-10 pt-4">
diff --git a/ui/admin/app/components/agent/ToolEntry.tsx b/ui/admin/app/components/agent/ToolEntry.tsx
index 9208dd887..0358c9a6f 100644
--- a/ui/admin/app/components/agent/ToolEntry.tsx
+++ b/ui/admin/app/components/agent/ToolEntry.tsx
@@ -4,7 +4,7 @@ import useSWR from "swr";
 
 import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
 
-import { TruncatedText } from "~/components/TruncatedText";
+import { Truncate } from "~/components/composed/typography";
 import { ToolIcon } from "~/components/tools/ToolIcon";
 import { LoadingSpinner } from "~/components/ui/LoadingSpinner";
 import { Button } from "~/components/ui/button";
@@ -26,7 +26,7 @@ export function ToolEntry({
                 <div className="flex items-center gap-2">
                     {toolInfo.icon}
 
-                    <TruncatedText content={toolInfo.label} />
+                    <Truncate>{toolInfo.label}</Truncate>
                 </div>
 
                 <div className="flex items-center gap-2">
diff --git a/ui/admin/app/components/agent/ToolForm.tsx b/ui/admin/app/components/agent/ToolForm.tsx
index 3d74cb463..10d953ed7 100644
--- a/ui/admin/app/components/agent/ToolForm.tsx
+++ b/ui/admin/app/components/agent/ToolForm.tsx
@@ -6,7 +6,6 @@ import { z } from "zod";
 import { Agent } from "~/lib/model/agents";
 import { noop } from "~/lib/utils";
 
-import { TypographyP, TypographySmall } from "~/components/Typography";
 import { ToolEntry } from "~/components/agent/ToolEntry";
 import { ToolCatalogDialog } from "~/components/tools/ToolCatalog";
 import { Form } from "~/components/ui/form";
@@ -148,14 +147,14 @@ export function ToolForm({
                 onSubmit={handleSubmit(onSubmit || noop)}
                 className="flex flex-col gap-2"
             >
-                <TypographyP className="flex justify-between items-end font-normal">
+                <p className="flex justify-between items-end font-normal">
                     Agent Tools
-                </TypographyP>
+                </p>
 
-                <TypographySmall className="text-muted-foreground">
+                <small className="text-muted-foreground">
                     These tools are essential for the agent&apos;s core
                     functionality and are always enabled.
-                </TypographySmall>
+                </small>
 
                 <div className="mt-2 w-full overflow-y-auto">
                     {fixedFields.map((field) => (
@@ -177,14 +176,14 @@ export function ToolForm({
                     />
                 </div>
 
-                <TypographyP className="flex justify-between items-end font-normal mt-4">
+                <p className="flex justify-between items-end font-normal mt-4">
                     User Tools
-                </TypographyP>
+                </p>
 
-                <TypographySmall className="text-muted-foreground">
+                <small className="text-muted-foreground">
                     Optional tools users can turn on or off. Use the toggle to
                     set whether they&apos;re active by default for the agent.
-                </TypographySmall>
+                </small>
 
                 <div className="mt-2 w-full overflow-y-auto">
                     {userFields.map((field) => (
diff --git a/ui/admin/app/components/agent/shared/EnvironmentVariableSection.tsx b/ui/admin/app/components/agent/shared/EnvironmentVariableSection.tsx
index ad21ec60d..1e0ed9665 100644
--- a/ui/admin/app/components/agent/shared/EnvironmentVariableSection.tsx
+++ b/ui/admin/app/components/agent/shared/EnvironmentVariableSection.tsx
@@ -6,7 +6,6 @@ import { EnvVariable } from "~/lib/model/environmentVariables";
 import { Workflow } from "~/lib/model/workflows";
 import { EnvironmentApiService } from "~/lib/service/api/EnvironmentApiService";
 
-import { TypographyP } from "~/components/Typography";
 import { EnvForm } from "~/components/agent/shared/AgentEnvironmentVariableForm";
 import { SelectList } from "~/components/composed/SelectModule";
 import { Button } from "~/components/ui/button";
@@ -112,8 +111,8 @@ export function EnvironmentVariableSection({
     function renderItem(item: EnvVariable) {
         return (
             <div className="flex items-center justify-between gap-2 w-full">
-                <TypographyP className="flex-1">{item.name}</TypographyP>
-                <TypographyP>{"•".repeat(15)}</TypographyP>
+                <p className="flex-1">{item.name}</p>
+                <p>{"•".repeat(15)}</p>
             </div>
         );
     }
diff --git a/ui/admin/app/components/branding/ObotLogo.tsx b/ui/admin/app/components/branding/ObotLogo.tsx
index 88e65cf78..389c6d746 100644
--- a/ui/admin/app/components/branding/ObotLogo.tsx
+++ b/ui/admin/app/components/branding/ObotLogo.tsx
@@ -1,6 +1,5 @@
 import { assetUrl, cn } from "~/lib/utils";
 
-import { TypographyH2 } from "~/components/Typography";
 import { useTheme } from "~/components/theme";
 
 export function ObotLogo({
@@ -18,7 +17,7 @@ export function ObotLogo({
         logo = "/logo/obot-icon-blue.svg";
     }
     return (
-        <TypographyH2
+        <h2
             className={cn(
                 "text-center flex gap-2 items-center justify-center pb-0",
                 classNames.root
@@ -29,6 +28,6 @@ export function ObotLogo({
                 alt="Obot Logo"
                 className={cn("h-8", classNames.image)}
             />
-        </TypographyH2>
+        </h2>
     );
 }
diff --git a/ui/admin/app/components/chat/Message.tsx b/ui/admin/app/components/chat/Message.tsx
index 4bb3b29f8..9915fc0d0 100644
--- a/ui/admin/app/components/chat/Message.tsx
+++ b/ui/admin/app/components/chat/Message.tsx
@@ -11,7 +11,6 @@ import { Message as MessageType } from "~/lib/model/messages";
 import { PromptApiService } from "~/lib/service/api/PromptApi";
 import { cn } from "~/lib/utils";
 
-import { TypographyP } from "~/components/Typography";
 import { useChat } from "~/components/chat/ChatContext";
 import { MessageDebug } from "~/components/chat/MessageDebug";
 import { ToolCallInfo } from "~/components/chat/ToolCallInfo";
@@ -200,16 +199,14 @@ function PromptMessage({ prompt }: { prompt: AuthPrompt }) {
     if (isSubmitted) {
         return (
             <div className="flex-auto flex flex-col flex-wrap gap-2 w-fit">
-                <TypographyP className="min-w-fit">
-                    {getSubmittedText()}
-                </TypographyP>
+                <p className="min-w-fit">{getSubmittedText()}</p>
             </div>
         );
     }
 
     return (
         <div className="flex-auto flex flex-col flex-wrap gap-2 w-fit">
-            <TypographyP className="min-w-fit">{getMessage()}</TypographyP>
+            <p className="min-w-fit">{getMessage()}</p>
 
             {isRunning && prompt.metadata?.authURL && (
                 <Link
diff --git a/ui/admin/app/components/chat/chat-actions/KnowledgeInfo.tsx b/ui/admin/app/components/chat/chat-actions/KnowledgeInfo.tsx
index 165a4e7a8..93d799cf1 100644
--- a/ui/admin/app/components/chat/chat-actions/KnowledgeInfo.tsx
+++ b/ui/admin/app/components/chat/chat-actions/KnowledgeInfo.tsx
@@ -5,7 +5,6 @@ import { KNOWLEDGE_TOOL } from "~/lib/model/agents";
 import { KnowledgeFileNamespace } from "~/lib/model/knowledge";
 import { cn } from "~/lib/utils";
 
-import { TypographyLead, TypographySmall } from "~/components/Typography";
 import { useThreadAgents } from "~/components/chat/thread-helpers";
 import { KnowledgeFileItem } from "~/components/knowledge/KnowledgeFileItem";
 import { Button } from "~/components/ui/button";
@@ -76,11 +75,11 @@ export function KnowledgeInfo({
 
                     <PopoverContent align="start" className="w-[30vw]">
                         <div className="flex justify-between items-center gap-2 mb-4">
-                            <TypographyLead>Knowledge</TypographyLead>
+                            <h4 className="text-muted-foreground">Knowledge</h4>
 
-                            <TypographySmall className="text-muted-foreground">
+                            <small className="text-muted-foreground">
                                 {knowledge.length || "No"} files
-                            </TypographySmall>
+                            </small>
                         </div>
 
                         <div className="flex flex-col gap-2">
diff --git a/ui/admin/app/components/chat/chat-actions/ToolsInfo.tsx b/ui/admin/app/components/chat/chat-actions/ToolsInfo.tsx
index 606035550..4ac8f6c81 100644
--- a/ui/admin/app/components/chat/chat-actions/ToolsInfo.tsx
+++ b/ui/admin/app/components/chat/chat-actions/ToolsInfo.tsx
@@ -4,7 +4,6 @@ import { useMemo } from "react";
 import { Agent } from "~/lib/model/agents";
 import { cn } from "~/lib/utils";
 
-import { TypographyMuted, TypographySmall } from "~/components/Typography";
 import { ToolEntry } from "~/components/agent/ToolEntry";
 import { Button } from "~/components/ui/button";
 import {
@@ -90,15 +89,16 @@ export function ToolsInfo({
                 <PopoverContent className="w-80" align="start">
                     {toolItems.length > 0 ? (
                         <div className="space-y-2">
-                            <TypographySmall className="font-semibold">
-                                Available Tools
-                            </TypographySmall>
+                            <h4 className="">Available Tools</h4>
+
                             <div className="space-y-1">
                                 {toolItems.map(renderToolItem)}
                             </div>
                         </div>
                     ) : (
-                        <TypographyMuted>No tools available</TypographyMuted>
+                        <small className="text-muted-foreground">
+                            No tools available
+                        </small>
                     )}
                 </PopoverContent>
             </Popover>
@@ -119,7 +119,7 @@ export function ToolsInfo({
                             }
                         />
                     ) : (
-                        <TypographyMuted>On</TypographyMuted>
+                        <p className="text-muted-foreground">On</p>
                     )
                 }
             />
diff --git a/ui/admin/app/components/composed/CopyText.tsx b/ui/admin/app/components/composed/CopyText.tsx
index f56cf5c9e..88f13d32e 100644
--- a/ui/admin/app/components/composed/CopyText.tsx
+++ b/ui/admin/app/components/composed/CopyText.tsx
@@ -4,7 +4,6 @@ import { toast } from "sonner";
 
 import { cn } from "~/lib/utils";
 
-import { TypographyP } from "~/components/Typography";
 import { Button } from "~/components/ui/button";
 import {
     Tooltip,
@@ -49,9 +48,9 @@ export function CopyText({
                         onClick={() => handleCopy(text)}
                         className="decoration-dotted underline-offset-4 underline text-ellipsis overflow-hidden text-nowrap"
                     >
-                        <TypographyP className="truncate break-words p-2">
+                        <p className="truncate break-words p-2">
                             {displayText}
-                        </TypographyP>
+                        </p>
                     </TooltipTrigger>
 
                     <TooltipContent>
diff --git a/ui/admin/app/components/composed/FirstModelProviderBanner.tsx b/ui/admin/app/components/composed/FirstModelProviderBanner.tsx
index 69400a058..a3cb2546b 100644
--- a/ui/admin/app/components/composed/FirstModelProviderBanner.tsx
+++ b/ui/admin/app/components/composed/FirstModelProviderBanner.tsx
@@ -3,7 +3,6 @@ import { $path } from "safe-routes";
 
 import { assetUrl } from "~/lib/utils";
 
-import { TypographyH3, TypographyP } from "~/components/Typography";
 import { Button } from "~/components/ui/button";
 import { useModelProviders } from "~/hooks/model-providers/useModelProviders";
 
@@ -28,16 +27,16 @@ export function FirstModelProviderBanner() {
                         />
                     </div>
                     <div className="flex flex-col md:ml-64 relative z-10 gap-1">
-                        <TypographyH3 className="mb-0.5">
+                        <h3 className="mb-0.5">
                             Wait! You need to set up a Model Provider!
-                        </TypographyH3>
-                        <TypographyP className="text-sm font-light mb-2">
+                        </h3>
+                        <p className="text-sm font-light mb-2">
                             You&apos;re almost there! To start creating or using{" "}
                             Obot&apos;s features, you&apos;ll need access to an
                             LLM (Large Language Model) <b>Model Provider</b>.
                             Luckily, we support a variety of providers to help
                             get you started.
-                        </TypographyP>
+                        </p>
                         <Button className="mt-0 w-fit px-10" variant="warning">
                             <Link to={$path("/model-providers")}>
                                 Get Started
diff --git a/ui/admin/app/components/composed/typography.tsx b/ui/admin/app/components/composed/typography.tsx
new file mode 100644
index 000000000..19bf18281
--- /dev/null
+++ b/ui/admin/app/components/composed/typography.tsx
@@ -0,0 +1,41 @@
+import { Slot } from "@radix-ui/react-slot";
+
+import { cn } from "~/lib/utils";
+
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
+
+export function Truncate({
+    children,
+    className,
+    asChild,
+    disableTooltip,
+    tooltipContent = <p>{children}</p>,
+}: {
+    children: React.ReactNode;
+    className?: string;
+    asChild?: boolean;
+    disableTooltip?: boolean;
+    tooltipContent?: React.ReactNode;
+}) {
+    const Comp = asChild ? Slot : "p";
+
+    if (disableTooltip) {
+        return <Comp className="truncate">{children}</Comp>;
+    }
+
+    return (
+        <Tooltip>
+            <TooltipContent>{tooltipContent}</TooltipContent>
+
+            <TooltipTrigger asChild>
+                <div className={cn("cursor-pointer", className)}>
+                    <Comp className="truncate">{children}</Comp>
+                </div>
+            </TooltipTrigger>
+        </Tooltip>
+    );
+}
diff --git a/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx b/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx
index 7a246bb75..14d79b4e4 100644
--- a/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx
+++ b/ui/admin/app/components/knowledge/AgentKnowledgePanel.tsx
@@ -10,7 +10,6 @@ import {
 import { ModelAlias } from "~/lib/model/models";
 import { DefaultModelAliasApiService } from "~/lib/service/api/defaultModelAliasApiService";
 
-import { TypographyP } from "~/components/Typography";
 import { ErrorDialog } from "~/components/composed/ErrorDialog";
 import { WarningAlert } from "~/components/composed/WarningAlert";
 import { AddKnowledgeButton } from "~/components/knowledge/AddKnowledgeButton";
@@ -126,13 +125,13 @@ export default function AgentKnowledgePanel({
                 <WarningAlert
                     title="Default Text Embedding Model Required!"
                     description={
-                        <TypographyP>
+                        <p>
                             In order to process the knowledge base for your
                             agent, you&apos;ll need to set up a default text
                             embedding model. Click{" "}
                             <Link to={$path("/model-providers")}>here</Link> to
                             update your model provider and/or default models.
-                        </TypographyP>
+                        </p>
                     }
                 />
             )}
diff --git a/ui/admin/app/components/model-providers/ModelProviderDeconfigure.tsx b/ui/admin/app/components/model-providers/ModelProviderDeconfigure.tsx
index 428e0430d..b3782a9db 100644
--- a/ui/admin/app/components/model-providers/ModelProviderDeconfigure.tsx
+++ b/ui/admin/app/components/model-providers/ModelProviderDeconfigure.tsx
@@ -6,7 +6,6 @@ import { ModelProvider } from "~/lib/model/modelProviders";
 import { ModelApiService } from "~/lib/service/api/modelApiService";
 import { ModelProviderApiService } from "~/lib/service/api/modelProviderApiService";
 
-import { TypographyP } from "~/components/Typography";
 import { Button } from "~/components/ui/button";
 import {
     Dialog,
@@ -66,17 +65,17 @@ export function ModelProviderDeconfigure({
                 <DialogHeader>
                     <DialogTitle>Deconfigure {modelProvider.name}</DialogTitle>
                 </DialogHeader>
-                <TypographyP>
+                <p>
                     Deconfiguring this model provider will remove all models
                     associated with it and reset it to its unconfigured state.
                     You will need to set up the model provider once again to use
                     it.
-                </TypographyP>
+                </p>
 
-                <TypographyP>
+                <p>
                     Are you sure you want to deconfigure{" "}
                     <b>{modelProvider.name}</b>?
-                </TypographyP>
+                </p>
 
                 <DialogFooter>
                     <div className="w-full flex justify-center items-center gap-10 pt-4">
diff --git a/ui/admin/app/components/model-providers/ModelProviderForm.tsx b/ui/admin/app/components/model-providers/ModelProviderForm.tsx
index 33bc46547..26f923520 100644
--- a/ui/admin/app/components/model-providers/ModelProviderForm.tsx
+++ b/ui/admin/app/components/model-providers/ModelProviderForm.tsx
@@ -9,7 +9,6 @@ import { ModelProvider, ModelProviderConfig } from "~/lib/model/modelProviders";
 import { ModelApiService } from "~/lib/service/api/modelApiService";
 import { ModelProviderApiService } from "~/lib/service/api/modelProviderApiService";
 
-import { TypographyH4 } from "~/components/Typography";
 import {
     HelperTooltipLabel,
     HelperTooltipLink,
@@ -218,9 +217,9 @@ export function ModelProviderForm({
             )}
             <ScrollArea className="max-h-[50vh]">
                 <div className="flex flex-col gap-4 p-4">
-                    <TypographyH4 className="font-semibold text-md">
+                    <h4 className="font-semibold text-md">
                         Required Configuration
-                    </TypographyH4>
+                    </h4>
                     <Form {...form}>
                         <form
                             id={FORM_ID}
@@ -283,9 +282,9 @@ export function ModelProviderForm({
                 <Separator className="my-4" />
 
                 <div className="flex items-center">
-                    <TypographyH4 className="font-semibold text-md">
+                    <h4 className="font-semibold text-md">
                         Custom Configuration (Optional)
-                    </TypographyH4>
+                    </h4>
                     {ModelProviderConfigurationLinks[modelProvider.id]
                         ? renderCustomConfigTooltip(modelProvider.id)
                         : null}
diff --git a/ui/admin/app/components/oauth-apps/OAuthAppDetail.tsx b/ui/admin/app/components/oauth-apps/OAuthAppDetail.tsx
index 92c684263..215cb7361 100644
--- a/ui/admin/app/components/oauth-apps/OAuthAppDetail.tsx
+++ b/ui/admin/app/components/oauth-apps/OAuthAppDetail.tsx
@@ -8,7 +8,6 @@ import {
 } from "~/lib/model/oauthApps/oauth-helpers";
 import { cn } from "~/lib/utils";
 
-import { TypographyP } from "~/components/Typography";
 import { ConfigureOAuthApp } from "~/components/oauth-apps/ConfigureOAuthApp";
 import { DeleteOAuthApp } from "~/components/oauth-apps/DeleteOAuthApp";
 import { OAuthAppTypeIcon } from "~/components/oauth-apps/OAuthAppTypeIcon";
@@ -114,7 +113,7 @@ export function OAuthAppDetail({
 }
 
 function DisabledContent({ spec }: { spec: OAuthAppSpec }) {
-    return <TypographyP>{spec.disabledReason}</TypographyP>;
+    return <p>{spec.disabledReason}</p>;
 }
 
 function EmptyContent({
@@ -126,30 +125,30 @@ function EmptyContent({
 }) {
     return spec.noGatewayIntegration ? (
         <div className="flex flex-col gap-2">
-            <TypographyP>
+            <p>
                 {spec.displayName} OAuth is not configured. You must configure
                 it to enable tools that interact with protected{" "}
                 {spec.displayName} APIs.
-            </TypographyP>
+            </p>
 
-            <TypographyP className="mb-4">
+            <p className="mb-4">
                 You can also configure {spec.displayName} OAuth by clicking the
                 button below.
-            </TypographyP>
+            </p>
 
             <ConfigureOAuthApp type={spec.type} onSuccess={onSuccess} />
         </div>
     ) : (
         <div className="flex flex-col gap-2">
-            <TypographyP>
+            <p>
                 {spec.displayName} OAuth is currently enabled. No action is
                 needed here.
-            </TypographyP>
+            </p>
 
-            <TypographyP className="mb-4">
+            <p className="mb-4">
                 You can also configure your own {spec.displayName} OAuth by
                 clicking the button below.
-            </TypographyP>
+            </p>
 
             <ConfigureOAuthApp type={spec.type} onSuccess={onSuccess} />
         </div>
@@ -167,21 +166,21 @@ function Content({
 }) {
     return (
         <div className="flex flex-col gap-2">
-            <TypographyP>
+            <p>
                 Obot only supports one custom {spec.displayName} OAuth. If you
                 need to use a different configuration, you can replace the
                 current configuration with a new one.
-            </TypographyP>
+            </p>
 
-            <TypographyP>
+            <p>
                 When {spec.displayName} OAuth is used, Obot will use your custom
                 OAuth app.
-            </TypographyP>
+            </p>
 
             <div className="grid grid-cols-2 gap-2 px-8 py-4">
-                <TypographyP>
+                <p>
                     <strong>Client ID</strong>
-                </TypographyP>
+                </p>
 
                 <Tooltip>
                     <TooltipTrigger className="truncate underline decoration-dotted">
@@ -191,10 +190,10 @@ function Content({
                     <TooltipContent>{app.clientID}</TooltipContent>
                 </Tooltip>
 
-                <TypographyP>
+                <p>
                     <strong>Client Secret</strong>
-                </TypographyP>
-                <TypographyP>****************</TypographyP>
+                </p>
+                <p>****************</p>
             </div>
 
             <ConfigureOAuthApp type={app.type} onSuccess={onSuccess} />
diff --git a/ui/admin/app/components/oauth-apps/OAuthAppList.tsx b/ui/admin/app/components/oauth-apps/OAuthAppList.tsx
index 4d1239003..91aa196eb 100644
--- a/ui/admin/app/components/oauth-apps/OAuthAppList.tsx
+++ b/ui/admin/app/components/oauth-apps/OAuthAppList.tsx
@@ -1,4 +1,3 @@
-import { TypographyH3 } from "~/components/Typography";
 import { OAuthAppTile } from "~/components/oauth-apps/OAuthAppTile";
 import { useOAuthAppList } from "~/hooks/oauthApps/useOAuthApps";
 
@@ -7,7 +6,7 @@ export function OAuthAppList() {
 
     return (
         <div className="space-y-4">
-            <TypographyH3>Default OAuth Apps</TypographyH3>
+            <h3>Default OAuth Apps</h3>
 
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
                 {apps.map(({ type }) => (
diff --git a/ui/admin/app/components/oauth-apps/OAuthAppTile.tsx b/ui/admin/app/components/oauth-apps/OAuthAppTile.tsx
index f67ca0eb2..0416b3158 100644
--- a/ui/admin/app/components/oauth-apps/OAuthAppTile.tsx
+++ b/ui/admin/app/components/oauth-apps/OAuthAppTile.tsx
@@ -1,7 +1,6 @@
 import { OAuthProvider } from "~/lib/model/oauthApps/oauth-helpers";
 import { cn } from "~/lib/utils";
 
-import { TypographyH3 } from "~/components/Typography";
 import { OAuthAppDetail } from "~/components/oauth-apps/OAuthAppDetail";
 import { useTheme } from "~/components/theme";
 import { Badge } from "~/components/ui/badge";
@@ -42,9 +41,7 @@ export function OAuthAppTile({
         >
             <CardHeader className="flex flex-row justify-between items-start pb-2 space-y-0">
                 <div className="flex flex-wrap gap-2 items-center">
-                    <TypographyH3 className="min-w-fit">
-                        {displayName}
-                    </TypographyH3>
+                    <h3 className="min-w-fit">{displayName}</h3>
 
                     {info.appOverride ? (
                         <Tooltip>
diff --git a/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppForm.tsx b/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppForm.tsx
index 4ca30801a..ca6ab6e56 100644
--- a/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppForm.tsx
+++ b/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppForm.tsx
@@ -10,7 +10,6 @@ import { ConflictError } from "~/lib/service/api/apiErrors";
 import { OauthAppService } from "~/lib/service/api/oauthAppService";
 import { ErrorService } from "~/lib/service/errorService";
 
-import { TypographySmall } from "~/components/Typography";
 import { CopyText } from "~/components/composed/CopyText";
 import { ControlledInput } from "~/components/form/controlledInputs";
 import { Button } from "~/components/ui/button";
@@ -204,7 +203,7 @@ export function CustomOAuthAppForm({
                 {step === Step.INFO && app && (
                     <>
                         <div className="flex flex-col gap-2">
-                            <TypographySmall>Redirect URL</TypographySmall>
+                            <small>Redirect URL</small>
 
                             <CopyText
                                 text={app.links.redirectURL}
diff --git a/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppTile.tsx b/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppTile.tsx
index 2789b53bf..d029420fc 100644
--- a/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppTile.tsx
+++ b/ui/admin/app/components/oauth-apps/custom/CustomOAuthAppTile.tsx
@@ -5,11 +5,6 @@ import { OAuthApp } from "~/lib/model/oauthApps";
 import { OauthAppService } from "~/lib/service/api/oauthAppService";
 import { cn, timeSince } from "~/lib/utils";
 
-import {
-    TypographyH3,
-    TypographyP,
-    TypographySmall,
-} from "~/components/Typography";
 import { ConfirmationDialog } from "~/components/composed/ConfirmationDialog";
 import { EditCustomOAuthApp } from "~/components/oauth-apps/custom/EditCustomOAuthApp";
 import { Button } from "~/components/ui/button";
@@ -36,20 +31,18 @@ export function CustomOAuthAppTile({ app }: CustomOAuthAppTileProps) {
         <Card className={cn("border-2 border-primary")}>
             <CardHeader className="flex flex-row justify-between">
                 <div className="flex gap-2 items-center">
-                    <TypographyH3>{app.name}</TypographyH3>
+                    <h3>{app.name}</h3>
                 </div>
             </CardHeader>
 
             <CardContent>
-                <TypographyP className="truncate">
-                    {app.integration}
-                </TypographyP>
+                <p className="truncate">{app.integration}</p>
             </CardContent>
 
             <CardFooter className="flex-grow flex justify-between items-center">
-                <TypographySmall className="text-muted-foreground">
+                <small className="text-muted-foreground">
                     {timeSince(new Date(app.created))} ago
-                </TypographySmall>
+                </small>
 
                 <div className="flex gap-2 items-center">
                     <EditCustomOAuthApp app={app} />
diff --git a/ui/admin/app/components/oauth-apps/custom/CustomOAuthApps.tsx b/ui/admin/app/components/oauth-apps/custom/CustomOAuthApps.tsx
index 73c6d9ed1..6476d8b97 100644
--- a/ui/admin/app/components/oauth-apps/custom/CustomOAuthApps.tsx
+++ b/ui/admin/app/components/oauth-apps/custom/CustomOAuthApps.tsx
@@ -1,4 +1,3 @@
-import { TypographyH3 } from "~/components/Typography";
 import { CustomOAuthAppTile } from "~/components/oauth-apps/custom/CustomOAuthAppTile";
 import { useCustomOAuthAppInfo } from "~/hooks/oauthApps/useOAuthApps";
 
@@ -9,7 +8,7 @@ export function CustomOAuthApps() {
 
     return (
         <div className="space-y-4">
-            <TypographyH3>Custom OAuth Apps</TypographyH3>
+            <h3>Custom OAuth Apps</h3>
 
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
                 {apps.map((app) => (
diff --git a/ui/admin/app/components/sidebar/Sidebar.tsx b/ui/admin/app/components/sidebar/Sidebar.tsx
index 854ffd4ca..f8361c9c0 100644
--- a/ui/admin/app/components/sidebar/Sidebar.tsx
+++ b/ui/admin/app/components/sidebar/Sidebar.tsx
@@ -16,7 +16,6 @@ import useSWR from "swr";
 import { VersionApiService } from "~/lib/service/api/versionApiService";
 import { cn } from "~/lib/utils";
 
-import { TypographyMuted, TypographySmall } from "~/components/Typography";
 import { ObotLogo } from "~/components/branding/ObotLogo";
 import { Button } from "~/components/ui/button";
 import {
@@ -167,8 +166,10 @@ function VersionInfo() {
                     {versionEntries.map(([key, value], index) =>
                         value ? (
                             <div key={key}>
-                                <TypographyMuted>{key}:</TypographyMuted>
-                                <TypographySmall>{value}</TypographySmall>
+                                <small className="text-muted-foreground">
+                                    {key}:
+                                </small>
+                                <small>{value}</small>
                                 {index !== versionEntries.length - 1 && (
                                     <Separator className="my-2" />
                                 )}
diff --git a/ui/admin/app/components/tools/toolGrid/CategoryHeader.tsx b/ui/admin/app/components/tools/toolGrid/CategoryHeader.tsx
index 4aff1e99f..29480e8bf 100644
--- a/ui/admin/app/components/tools/toolGrid/CategoryHeader.tsx
+++ b/ui/admin/app/components/tools/toolGrid/CategoryHeader.tsx
@@ -2,7 +2,6 @@ import { Folder } from "lucide-react";
 
 import { ToolReference } from "~/lib/model/toolReferences";
 
-import { TypographyH2 } from "~/components/Typography";
 import { ToolIcon } from "~/components/tools/ToolIcon";
 import { Badge } from "~/components/ui/badge";
 
@@ -31,10 +30,10 @@ export function CategoryHeader({
                     <Folder className="w-6 h-6" />
                 )}
             </div>
-            <TypographyH2 className="flex items-center space-x-2 ">
+            <h2 className="flex items-center space-x-2 ">
                 <span>{category}</span>
                 <Badge className="pointer-events-none">{tools.length}</Badge>
-            </TypographyH2>
+            </h2>
         </div>
     );
 }
diff --git a/ui/admin/app/components/tools/toolGrid/ToolCard.tsx b/ui/admin/app/components/tools/toolGrid/ToolCard.tsx
index 9c3d13769..0c534a732 100644
--- a/ui/admin/app/components/tools/toolGrid/ToolCard.tsx
+++ b/ui/admin/app/components/tools/toolGrid/ToolCard.tsx
@@ -3,13 +3,8 @@ import { Trash } from "lucide-react";
 import { ToolReference } from "~/lib/model/toolReferences";
 import { cn, timeSince } from "~/lib/utils";
 
-import { TruncatedText } from "~/components/TruncatedText";
-import {
-    TypographyH4,
-    TypographyP,
-    TypographySmall,
-} from "~/components/Typography";
 import { ConfirmationDialog } from "~/components/composed/ConfirmationDialog";
+import { Truncate } from "~/components/composed/typography";
 import { ToolIcon } from "~/components/tools/ToolIcon";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
@@ -39,7 +34,7 @@ export function ToolCard({ tool, onDelete }: ToolCardProps) {
             })}
         >
             <CardHeader className="pb-2">
-                <TypographyH4 className="truncate flex flex-wrap items-center gap-x-2">
+                <h4 className="truncate flex flex-wrap items-center gap-x-2">
                     <div className="flex flex-nowrap gap-x-2">
                         <ToolIcon
                             className="w-5 min-w-5 h-5"
@@ -56,30 +51,28 @@ export function ToolCard({ tool, onDelete }: ToolCardProps) {
                                 </Badge>
                             </TooltipTrigger>
                             <TooltipContent className="max-w-xs bg-error-foreground border border-error text-foreground">
-                                <TypographyP>{tool.error}</TypographyP>
+                                <p>{tool.error}</p>
                             </TooltipContent>
                         </Tooltip>
                     )}
                     {tool.metadata?.bundle && (
                         <Badge className="pointer-events-none">Bundle</Badge>
                     )}
-                </TypographyH4>
+                </h4>
             </CardHeader>
             <CardContent className="flex-grow">
                 {!tool.builtin && (
-                    <TruncatedText
-                        content={tool.reference}
-                        className="max-w-full"
-                    />
+                    <Truncate className="max-w-full">{tool.reference}</Truncate>
                 )}
-                <TypographyP className="mt-2 text-sm text-muted-foreground line-clamp-2">
+                <p className="mt-2 text-sm text-muted-foreground line-clamp-2">
                     {tool.description || "No description available"}
-                </TypographyP>
+                </p>
             </CardContent>
             <CardFooter className="flex justify-between items-center pt-2 h-14">
-                <TypographySmall className="text-muted-foreground">
+                <small className="text-muted-foreground">
                     {timeSince(new Date(tool.created))} ago
-                </TypographySmall>
+                </small>
+
                 {!tool.builtin && (
                     <ConfirmationDialog
                         title="Delete Tool Reference"
diff --git a/ui/admin/app/components/tools/toolGrid/ToolGrid.tsx b/ui/admin/app/components/tools/toolGrid/ToolGrid.tsx
index 43eee5ec8..18cf01864 100644
--- a/ui/admin/app/components/tools/toolGrid/ToolGrid.tsx
+++ b/ui/admin/app/components/tools/toolGrid/ToolGrid.tsx
@@ -6,7 +6,6 @@ import {
     YourToolsToolCategory,
 } from "~/lib/service/api/toolreferenceService";
 
-import { TypographyP } from "~/components/Typography";
 import { CategoryHeader } from "~/components/tools/toolGrid/CategoryHeader";
 import { CategoryTools } from "~/components/tools/toolGrid/CategoryTools";
 import { useDebounce } from "~/hooks/useDebounce";
@@ -59,7 +58,7 @@ export function ToolGrid({ toolCategories, filter, onDelete }: ToolGridProps) {
     }, [filter, debouncedFilter]);
 
     if (!Object.entries(filteredResults).length) {
-        return <TypographyP>No tools found...</TypographyP>;
+        return <p>No tools found...</p>;
     }
 
     const yourToolsCategory = filteredResults[YourToolsToolCategory];
diff --git a/ui/admin/app/components/webhooks/WebhookConfirmation.tsx b/ui/admin/app/components/webhooks/WebhookConfirmation.tsx
index 824b0ec5e..a87c9a747 100644
--- a/ui/admin/app/components/webhooks/WebhookConfirmation.tsx
+++ b/ui/admin/app/components/webhooks/WebhookConfirmation.tsx
@@ -3,7 +3,6 @@ import { $path } from "safe-routes";
 import { Webhook } from "~/lib/model/webhooks";
 import { cn } from "~/lib/utils";
 
-import { TypographyP } from "~/components/Typography";
 import { CopyText } from "~/components/composed/CopyText";
 import { Button } from "~/components/ui/button";
 import {
@@ -61,7 +60,7 @@ export const WebhookConfirmation = ({
                 </DialogDescription>
 
                 <div className={cn("flex flex-col gap-1")}>
-                    <TypographyP>Payload URL: </TypographyP>
+                    <p>Payload URL: </p>
                     <CopyText
                         text={getWebhookUrl(webhook, token)}
                         className="w-fit-content max-w-full"
@@ -73,7 +72,7 @@ export const WebhookConfirmation = ({
                         "flex-row gap-2": !secret,
                     })}
                 >
-                    <TypographyP>Secret: </TypographyP>
+                    <p>Secret: </p>
                     {secret ? (
                         <CopyText
                             className="min-w-fit"
@@ -81,9 +80,9 @@ export const WebhookConfirmation = ({
                             text={secret ?? ""}
                         />
                     ) : (
-                        <TypographyP className="text-muted-foreground">
+                        <p className="text-muted-foreground">
                             ({secretRemoved ? "None" : "Unchanged"})
-                        </TypographyP>
+                        </p>
                     )}
                 </div>
 
diff --git a/ui/admin/app/components/webhooks/WebhookForm.tsx b/ui/admin/app/components/webhooks/WebhookForm.tsx
index 7f7afec30..998f9f869 100644
--- a/ui/admin/app/components/webhooks/WebhookForm.tsx
+++ b/ui/admin/app/components/webhooks/WebhookForm.tsx
@@ -3,7 +3,6 @@ import useSWR from "swr";
 import { WorkflowService } from "~/lib/service/api/workflowService";
 import { cn, getAliasFrom } from "~/lib/utils";
 
-import { TypographyH2 } from "~/components/Typography";
 import {
     ControlledCustomInput,
     ControlledInput,
@@ -66,9 +65,7 @@ export function WebhookFormContent({ hideTitle }: WebhookFormContentProps) {
                 onSubmit={handleSubmit}
             >
                 {!hideTitle && (
-                    <TypographyH2>
-                        {isEdit ? "Edit Webhook" : "Create Webhook"}
-                    </TypographyH2>
+                    <h2>{isEdit ? "Edit Webhook" : "Create Webhook"}</h2>
                 )}
 
                 <ControlledInput control={control} name="name" label="Name" />
diff --git a/ui/admin/app/components/workflow-triggers/DeleteWorkflowTrigger.tsx b/ui/admin/app/components/workflow-triggers/DeleteWorkflowTrigger.tsx
index d33f00e8e..793857907 100644
--- a/ui/admin/app/components/workflow-triggers/DeleteWorkflowTrigger.tsx
+++ b/ui/admin/app/components/workflow-triggers/DeleteWorkflowTrigger.tsx
@@ -4,7 +4,6 @@ import { mutate } from "swr";
 import { CronJobApiService } from "~/lib/service/api/cronjobApiService";
 import { WebhookApiService } from "~/lib/service/api/webhookApiService";
 
-import { TypographyP } from "~/components/Typography";
 import { ConfirmationDialog } from "~/components/composed/ConfirmationDialog";
 import { DropdownMenuItem } from "~/components/ui/dropdown-menu";
 import { useConfirmationDialog } from "~/hooks/component-helpers/useConfirmationDialog";
@@ -60,11 +59,11 @@ export function DeleteWorkflowTrigger({
                 title="Delete Workflow Trigger?"
                 description={
                     <div className="flex flex-col">
-                        <TypographyP>
+                        <p>
                             Are you sure you want to delete workflow trigger:{" "}
                             <b>{name || id}</b>?
-                        </TypographyP>
-                        <TypographyP>The action cannot be undone.</TypographyP>
+                        </p>
+                        <p>The action cannot be undone.</p>
                     </div>
                 }
                 confirmProps={{
diff --git a/ui/admin/app/components/workflow-triggers/ScheduleForm.tsx b/ui/admin/app/components/workflow-triggers/ScheduleForm.tsx
index 13facc0b3..d90b7d8d3 100644
--- a/ui/admin/app/components/workflow-triggers/ScheduleForm.tsx
+++ b/ui/admin/app/components/workflow-triggers/ScheduleForm.tsx
@@ -11,7 +11,6 @@ import { CronJob } from "~/lib/model/cronjobs";
 import { CronJobApiService } from "~/lib/service/api/cronjobApiService";
 import { WorkflowService } from "~/lib/service/api/workflowService";
 
-import { TypographyH2 } from "~/components/Typography";
 import {
     ControlledCustomInput,
     ControlledInput,
@@ -98,9 +97,7 @@ export function ScheduleForm({ cronjob }: { cronjob?: CronJob }) {
                     className="space-y-8 p-8 max-w-3xl mx-auto"
                     onSubmit={handleSubmit}
                 >
-                    <TypographyH2>
-                        {hasCronJob ? "Edit" : "Create"} Schedule
-                    </TypographyH2>
+                    <h2>{hasCronJob ? "Edit" : "Create"} Schedule</h2>
 
                     <ControlledInput
                         control={form.control}
diff --git a/ui/admin/app/components/workflow/DeleteWorkflowWebhook.tsx b/ui/admin/app/components/workflow/DeleteWorkflowWebhook.tsx
index f514b32b1..911fdf642 100644
--- a/ui/admin/app/components/workflow/DeleteWorkflowWebhook.tsx
+++ b/ui/admin/app/components/workflow/DeleteWorkflowWebhook.tsx
@@ -5,7 +5,6 @@ import { mutate } from "swr";
 
 import { WebhookApiService } from "~/lib/service/api/webhookApiService";
 
-import { TypographyP } from "~/components/Typography";
 import { Button } from "~/components/ui/button";
 import {
     Popover,
@@ -37,9 +36,7 @@ export function DeleteWorkflowWebhook({ webhookId }: { webhookId: string }) {
                 </Button>
             </PopoverTrigger>
             <PopoverContent>
-                <TypographyP>
-                    Are you sure you want to delete this webhook?
-                </TypographyP>
+                <p>Are you sure you want to delete this webhook?</p>
                 <div className="flex justify-end gap-2">
                     <Button variant="ghost" onClick={() => setOpen(false)}>
                         Cancel
diff --git a/ui/admin/app/components/workflow/Workflow.tsx b/ui/admin/app/components/workflow/Workflow.tsx
index 8fed39792..dbe2d7ce9 100644
--- a/ui/admin/app/components/workflow/Workflow.tsx
+++ b/ui/admin/app/components/workflow/Workflow.tsx
@@ -5,7 +5,6 @@ import { AssistantNamespace } from "~/lib/model/assistants";
 import { Workflow as WorkflowType } from "~/lib/model/workflows";
 import { cn } from "~/lib/utils";
 
-import { TypographyH4, TypographyP } from "~/components/Typography";
 import { AgentForm } from "~/components/agent";
 import { EnvironmentVariableSection } from "~/components/agent/shared/EnvironmentVariableSection";
 import { ToolAuthenticationStatus } from "~/components/agent/shared/ToolAuthenticationStatus";
@@ -76,10 +75,10 @@ function WorkflowContent({ className }: WorkflowProps) {
                 </div>
 
                 <div className="p-4 m-4 flex flex-col gap-4">
-                    <TypographyH4 className="flex items-center gap-2">
+                    <h4 className="flex items-center gap-2">
                         <WrenchIcon className="w-5 h-5" />
                         Tools
-                    </TypographyH4>
+                    </h4>
 
                     <CardDescription>
                         Add tools the allow the agent to perform useful actions
@@ -103,10 +102,10 @@ function WorkflowContent({ className }: WorkflowProps) {
                 </div>
 
                 <div className="p-4 m-4 flex flex-col gap-4">
-                    <TypographyH4 className="flex items-center gap-2">
+                    <h4 className="flex items-center gap-2">
                         <Variable className="w-4 h-4" />
                         Environment Variables
-                    </TypographyH4>
+                    </h4>
 
                     <EnvironmentVariableSection
                         entity={workflow}
@@ -116,10 +115,10 @@ function WorkflowContent({ className }: WorkflowProps) {
                 </div>
 
                 <div className="p-4 m-4 flex flex-col gap-4">
-                    <TypographyH4 className="flex items-center gap-2">
+                    <h4 className="flex items-center gap-2">
                         <List className="w-4 h-4" />
                         Parameters
-                    </TypographyH4>
+                    </h4>
 
                     <ParamsForm
                         workflow={workflow}
@@ -132,10 +131,10 @@ function WorkflowContent({ className }: WorkflowProps) {
                 </div>
 
                 <div className="p-4 m-4 flex flex-col gap-4">
-                    <TypographyH4 className="flex items-center gap-2">
+                    <h4 className="flex items-center gap-2">
                         <PuzzleIcon className="w-4 h-4" />
                         Steps
-                    </TypographyH4>
+                    </h4>
 
                     <StepsForm
                         workflow={workflowUpdates}
@@ -146,10 +145,10 @@ function WorkflowContent({ className }: WorkflowProps) {
                 </div>
 
                 <div className="p-4 m-4 flex flex-col gap-4">
-                    <TypographyH4 className="flex items-center gap-2">
+                    <h4 className="flex items-center gap-2">
                         <Library className="w-4 h-4" />
                         Knowledge
-                    </TypographyH4>
+                    </h4>
 
                     <CardDescription>
                         Provide knowledge to the workflow in the form of files,
@@ -177,9 +176,9 @@ function WorkflowContent({ className }: WorkflowProps) {
 
             <footer className="flex justify-between items-center p-4 gap-4 border-t text-muted-foreground">
                 {isUpdating ? (
-                    <TypographyP>Saving...</TypographyP>
+                    <p>Saving...</p>
                 ) : lastUpdated ? (
-                    <TypographyP>Saved</TypographyP>
+                    <p>Saved</p>
                 ) : (
                     <div />
                 )}
diff --git a/ui/admin/app/components/workflow/WorkflowSchedulePanel.tsx b/ui/admin/app/components/workflow/WorkflowSchedulePanel.tsx
index a99c6a606..293926d14 100644
--- a/ui/admin/app/components/workflow/WorkflowSchedulePanel.tsx
+++ b/ui/admin/app/components/workflow/WorkflowSchedulePanel.tsx
@@ -2,7 +2,6 @@ import { ClockIcon, PlusIcon, TrashIcon } from "lucide-react";
 
 import { CronJob } from "~/lib/model/cronjobs";
 
-import { TypographyH4 } from "~/components/Typography";
 import { Button } from "~/components/ui/button";
 import { CardDescription } from "~/components/ui/card";
 import { ScheduleSelection } from "~/components/workflow-triggers/shared/ScheduleSelection";
@@ -32,10 +31,10 @@ export function WorkflowSchedulePanel({ workflowId }: { workflowId: string }) {
     return (
         <div className="p-4 m-4 flex flex-col gap-4">
             <div className="flex justify-between items-center gap-2">
-                <TypographyH4 className="flex items-center gap-2">
+                <h4 className="flex items-center gap-2">
                     <ClockIcon className="w-4 h-4" />
                     Schedule
-                </TypographyH4>
+                </h4>
             </div>
 
             <CardDescription>
diff --git a/ui/admin/app/components/workflow/WorkflowWebhookPanel.tsx b/ui/admin/app/components/workflow/WorkflowWebhookPanel.tsx
index eb4941c9a..b84fb34bb 100644
--- a/ui/admin/app/components/workflow/WorkflowWebhookPanel.tsx
+++ b/ui/admin/app/components/workflow/WorkflowWebhookPanel.tsx
@@ -3,7 +3,6 @@ import useSWR from "swr";
 
 import { WebhookApiService } from "~/lib/service/api/webhookApiService";
 
-import { TypographyH4, TypographyP } from "~/components/Typography";
 import { CardDescription } from "~/components/ui/card";
 import { DeleteWorkflowWebhook } from "~/components/workflow/DeleteWorkflowWebhook";
 import { WorkflowWebhookDialog } from "~/components/workflow/WorkflowWebhookDialog";
@@ -20,10 +19,10 @@ export function WorkflowWebhookPanel({ workflowId }: { workflowId: string }) {
 
     return (
         <div className="p-4 m-4 flex flex-col gap-4">
-            <TypographyH4 className="flex items-center gap-2">
+            <h4 className="flex items-center gap-2">
                 <WebhookIcon className="w-4 h-4" />
                 Webhooks
-            </TypographyH4>
+            </h4>
 
             <CardDescription>
                 Add webhooks to notify external services when your AI agent
@@ -33,7 +32,7 @@ export function WorkflowWebhookPanel({ workflowId }: { workflowId: string }) {
             <div className="flex flex-col gap-2">
                 {workflowWebhooks?.map((webhook) => (
                     <div key={webhook.id} className="flex justify-between">
-                        <TypographyP>{webhook.name || webhook.id}</TypographyP>
+                        <p>{webhook.name || webhook.id}</p>
 
                         <div className="flex gap-2">
                             <WorkflowWebhookDialog
diff --git a/ui/admin/app/routes/_auth.agents._index.tsx b/ui/admin/app/routes/_auth.agents._index.tsx
index a42b7ccfb..073250a93 100644
--- a/ui/admin/app/routes/_auth.agents._index.tsx
+++ b/ui/admin/app/routes/_auth.agents._index.tsx
@@ -12,7 +12,6 @@ import { ThreadsService } from "~/lib/service/api/threadsService";
 import { generateRandomName } from "~/lib/service/nameGenerator";
 import { timeSince } from "~/lib/utils";
 
-import { TypographyH2, TypographyP } from "~/components/Typography";
 import { DeleteAgent } from "~/components/agent/DeleteAgent";
 import { DataTable } from "~/components/composed/DataTable";
 import { Button } from "~/components/ui/button";
@@ -61,7 +60,7 @@ export default function Agents() {
             <div className="h-full p-8 flex flex-col gap-4">
                 <div className="flex-auto overflow-hidden">
                     <div className="flex space-x-2 width-full justify-between mb-8">
-                        <TypographyH2>Agents</TypographyH2>
+                        <h2>Agents</h2>
                         <Button
                             variant="outline"
                             className="justify-start"
@@ -137,9 +136,7 @@ export default function Agents() {
                 id: "created",
                 header: "Created",
                 cell: (info) => (
-                    <TypographyP>
-                        {timeSince(new Date(info.row.original.created))} ago
-                    </TypographyP>
+                    <p>{timeSince(new Date(info.row.original.created))} ago</p>
                 ),
             }),
             columnHelper.display({
diff --git a/ui/admin/app/routes/_auth.debug.tsx b/ui/admin/app/routes/_auth.debug.tsx
index fff70bd3e..8125d520f 100644
--- a/ui/admin/app/routes/_auth.debug.tsx
+++ b/ui/admin/app/routes/_auth.debug.tsx
@@ -3,7 +3,6 @@ import { ChangeEvent, useEffect, useRef, useState } from "react";
 
 import { Calls } from "~/lib/model/runs";
 
-import { TypographyH1, TypographyH3 } from "~/components/Typography";
 import CallFrames from "~/components/chat/CallFrames";
 import { Button } from "~/components/ui/button";
 import { Card } from "~/components/ui/card";
@@ -53,7 +52,8 @@ export default function Debug() {
                     {fileName ? (
                         <Card className="p-2 w-full h-full overflow-y-auto">
                             <div className="flex items-center justify-between">
-                                <TypographyH3>{fileName}</TypographyH3>
+                                <h3>{fileName}</h3>
+
                                 <Button
                                     onClick={handleRemoveFile}
                                     variant="destructive"
@@ -67,17 +67,16 @@ export default function Debug() {
                             </div>
                         </Card>
                     ) : (
-                        <div className="p-2 mb-10 w-full flex items-center justify-center w-full h-full flex-col w-1/3">
+                        <div className="p-2 mb-10 flex items-center justify-center h-full flex-col w-1/3">
                             <div className="flex flex-col items-center justify-center space-y-4">
-                                <TypographyH1>
-                                    Looking to debug a run?
-                                </TypographyH1>
-                                <TypographyH3 className="text-muted-foreground text-center">
+                                <h1>Looking to debug a run?</h1>
+
+                                <h3 className="text-muted-foreground text-center">
                                     You&apos;re in the right place! Click the
                                     button below to upload your stack trace and
                                     you can step through all the frames behind
                                     your run.
-                                </TypographyH3>
+                                </h3>
                             </div>
                             <input
                                 type="file"
diff --git a/ui/admin/app/routes/_auth.model-providers.tsx b/ui/admin/app/routes/_auth.model-providers.tsx
index e3f756a76..b7c7e5bad 100644
--- a/ui/admin/app/routes/_auth.model-providers.tsx
+++ b/ui/admin/app/routes/_auth.model-providers.tsx
@@ -6,7 +6,6 @@ import { DefaultModelAliasApiService } from "~/lib/service/api/defaultModelAlias
 import { ModelApiService } from "~/lib/service/api/modelApiService";
 import { RouteHandle } from "~/lib/service/routeHandles";
 
-import { TypographyH2 } from "~/components/Typography";
 import { WarningAlert } from "~/components/composed/WarningAlert";
 import { ModelProviderList } from "~/components/model-providers/ModelProviderLists";
 import { CommonModelProviderIds } from "~/components/model-providers/constants";
@@ -64,9 +63,7 @@ export default function ModelProviders() {
             <div className="relative px-8 pb-8">
                 <div className="sticky top-0 bg-background py-8 flex flex-col gap-4 z-10">
                     <div className="flex items-center justify-between">
-                        <TypographyH2 className="mb-0 pb-0">
-                            Model Providers
-                        </TypographyH2>
+                        <h2 className="mb-0 pb-0">Model Providers</h2>
                         <DefaultModelAliasFormDialog
                             disabled={!modelProviderConfigured}
                         />
diff --git a/ui/admin/app/routes/_auth.oauth-apps.tsx b/ui/admin/app/routes/_auth.oauth-apps.tsx
index f8aed5d0e..6326ad35c 100644
--- a/ui/admin/app/routes/_auth.oauth-apps.tsx
+++ b/ui/admin/app/routes/_auth.oauth-apps.tsx
@@ -4,7 +4,6 @@ import { preload } from "swr";
 import { OauthAppService } from "~/lib/service/api/oauthAppService";
 import { RouteHandle } from "~/lib/service/routeHandles";
 
-import { TypographyH2 } from "~/components/Typography";
 import { OAuthAppList } from "~/components/oauth-apps/OAuthAppList";
 import { CreateCustomOAuthApp } from "~/components/oauth-apps/custom/CreateCustomOAuthApp";
 import { CustomOAuthApps } from "~/components/oauth-apps/custom/CustomOAuthApps";
@@ -22,7 +21,7 @@ export default function OauthApps() {
     return (
         <div className="relative space-y-10 px-8 pb-8">
             <div className="sticky top-0 bg-background pt-8 pb-4 flex items-center justify-between">
-                <TypographyH2 className="mb-4">OAuth Apps</TypographyH2>
+                <h2 className="mb-4">OAuth Apps</h2>
 
                 <CreateCustomOAuthApp />
             </div>
diff --git a/ui/admin/app/routes/_auth.threads._index.tsx b/ui/admin/app/routes/_auth.threads._index.tsx
index 0039af71f..7e8050f98 100644
--- a/ui/admin/app/routes/_auth.threads._index.tsx
+++ b/ui/admin/app/routes/_auth.threads._index.tsx
@@ -25,7 +25,6 @@ import { RouteHandle } from "~/lib/service/routeHandles";
 import { RouteQueryParams, RouteService } from "~/lib/service/routeService";
 import { timeSince } from "~/lib/utils";
 
-import { TypographyH2, TypographyP } from "~/components/Typography";
 import { DataTable } from "~/components/composed/DataTable";
 import { Button } from "~/components/ui/button";
 import { ScrollArea } from "~/components/ui/scroll-area";
@@ -152,7 +151,7 @@ export default function Threads() {
 
     return (
         <ScrollArea className="max-h-full p-8 flex flex-col gap-4">
-            <TypographyH2>Threads</TypographyH2>
+            <h2>Threads</h2>
 
             <ThreadFilters
                 userMap={userMap}
@@ -192,14 +191,14 @@ export default function Threads() {
                 header: "Type",
                 cell: ({ row }) => {
                     return (
-                        <TypographyP className="flex items-center gap-2">
+                        <p className="flex items-center gap-2">
                             {row.original.agentID ? (
                                 <PersonIcon className="w-4 h-4" />
                             ) : (
                                 <PuzzleIcon className="w-4 h-4" />
                             )}
                             {row.original.agentID ? "Agent" : "Workflow"}
-                        </TypographyP>
+                        </p>
                     );
                 },
             }),
@@ -212,9 +211,7 @@ export default function Threads() {
                 id: "created",
                 header: "Created",
                 cell: (info) => (
-                    <TypographyP>
-                        {timeSince(new Date(info.row.original.created))} ago
-                    </TypographyP>
+                    <p>{timeSince(new Date(info.row.original.created))} ago</p>
                 ),
                 sortingFn: "datetime",
             }),
diff --git a/ui/admin/app/routes/_auth.tools._index.tsx b/ui/admin/app/routes/_auth.tools._index.tsx
index d83cc3739..e9ca4444e 100644
--- a/ui/admin/app/routes/_auth.tools._index.tsx
+++ b/ui/admin/app/routes/_auth.tools._index.tsx
@@ -6,7 +6,6 @@ import useSWR, { preload } from "swr";
 import { ToolReferenceService } from "~/lib/service/api/toolreferenceService";
 import { RouteHandle } from "~/lib/service/routeHandles";
 
-import { TypographyH2 } from "~/components/Typography";
 import { ErrorDialog } from "~/components/composed/ErrorDialog";
 import { CreateTool } from "~/components/tools/CreateTool";
 import { ToolGrid } from "~/components/tools/toolGrid";
@@ -62,7 +61,7 @@ export default function Tools() {
     return (
         <ScrollArea className="h-full p-8 flex flex-col gap-4">
             <div className="flex justify-between items-center">
-                <TypographyH2>Tools</TypographyH2>
+                <h2>Tools</h2>
                 <div className="flex items-center space-x-2">
                     <div className="relative">
                         <SearchIcon className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" />
diff --git a/ui/admin/app/routes/_auth.users.tsx b/ui/admin/app/routes/_auth.users.tsx
index fd6130f90..1474ed33e 100644
--- a/ui/admin/app/routes/_auth.users.tsx
+++ b/ui/admin/app/routes/_auth.users.tsx
@@ -11,7 +11,6 @@ import { UserService } from "~/lib/service/api/userService";
 import { RouteHandle } from "~/lib/service/routeHandles";
 import { pluralize, timeSince } from "~/lib/utils";
 
-import { TypographyH2, TypographyP } from "~/components/Typography";
 import { DataTable } from "~/components/composed/DataTable";
 import { Link } from "~/components/ui/link";
 
@@ -56,7 +55,7 @@ export default function Users() {
     return (
         <div>
             <div className="h-full p-8 flex flex-col gap-4">
-                <TypographyH2 className="mb-4">Users</TypographyH2>
+                <h2 className="mb-4">Users</h2>
                 <DataTable
                     columns={getColumns()}
                     data={users}
@@ -90,23 +89,19 @@ export default function Users() {
                             </Link>
                         );
                     }
-                    return <TypographyP>No Threads</TypographyP>;
+                    return <p>No Threads</p>;
                 },
             }),
             columnHelper.display({
                 id: "role",
                 header: "Role",
-                cell: ({ row }) => (
-                    <TypographyP>{roleToString(row.original.role)}</TypographyP>
-                ),
+                cell: ({ row }) => <p>{roleToString(row.original.role)}</p>,
             }),
             columnHelper.display({
                 id: "created",
                 header: "Created",
                 cell: ({ row }) => (
-                    <TypographyP>
-                        {timeSince(new Date(row.original.created))} ago
-                    </TypographyP>
+                    <p>{timeSince(new Date(row.original.created))} ago</p>
                 ),
             }),
         ];
diff --git a/ui/admin/app/routes/_auth.workflow-triggers._index.tsx b/ui/admin/app/routes/_auth.workflow-triggers._index.tsx
index 492a97c76..f63906a7e 100644
--- a/ui/admin/app/routes/_auth.workflow-triggers._index.tsx
+++ b/ui/admin/app/routes/_auth.workflow-triggers._index.tsx
@@ -10,7 +10,6 @@ import { CronJobApiService } from "~/lib/service/api/cronjobApiService";
 import { WebhookApiService } from "~/lib/service/api/webhookApiService";
 import { WorkflowService } from "~/lib/service/api/workflowService";
 
-import { TypographyH2 } from "~/components/Typography";
 import { DataTable } from "~/components/composed/DataTable";
 import { CreateWorkflowTrigger } from "~/components/workflow-triggers/CreateWorkflowTrigger";
 import { WorkflowTriggerActions } from "~/components/workflow-triggers/WorkflowTriggerActions";
@@ -81,7 +80,7 @@ export default function WorkflowTriggersPage() {
     return (
         <div className="h-full flex flex-col p-8 space-y-4">
             <div className="flex items-center justify-between">
-                <TypographyH2>Workflow Triggers</TypographyH2>
+                <h2>Workflow Triggers</h2>
 
                 <CreateWorkflowTrigger />
             </div>
diff --git a/ui/admin/app/routes/_auth.workflows._index.tsx b/ui/admin/app/routes/_auth.workflows._index.tsx
index 204bd0701..214143332 100644
--- a/ui/admin/app/routes/_auth.workflows._index.tsx
+++ b/ui/admin/app/routes/_auth.workflows._index.tsx
@@ -10,7 +10,6 @@ import { ThreadsService } from "~/lib/service/api/threadsService";
 import { WorkflowService } from "~/lib/service/api/workflowService";
 import { timeSince } from "~/lib/utils";
 
-import { TypographyH2, TypographyP } from "~/components/Typography";
 import { DataTable } from "~/components/composed/DataTable";
 import { Button } from "~/components/ui/button";
 import { Link } from "~/components/ui/link";
@@ -79,7 +78,7 @@ export default function Workflows() {
             <div className="h-full p-8 flex flex-col gap-4">
                 <div className="flex-auto overflow-hidden">
                     <div className="flex space-x-2 width-full justify-between mb-8">
-                        <TypographyH2>Workflows</TypographyH2>
+                        <h2>Workflows</h2>
 
                         <CreateWorkflow />
                     </div>
@@ -118,9 +117,7 @@ export default function Workflows() {
                                 })}
                                 className="px-0"
                             >
-                                <TypographyP>
-                                    {info.getValue() || 0} Threads
-                                </TypographyP>
+                                <p>{info.getValue() || 0} Threads</p>
                             </Link>
                         </div>
                     ),
@@ -130,9 +127,7 @@ export default function Workflows() {
                 id: "created",
                 header: "Created",
                 cell: (info) => (
-                    <TypographyP>
-                        {timeSince(new Date(info.row.original.created))} ago
-                    </TypographyP>
+                    <p>{timeSince(new Date(info.row.original.created))} ago</p>
                 ),
             }),
             columnHelper.display({
diff --git a/ui/admin/app/tailwind.css b/ui/admin/app/tailwind.css
index a61c60429..7e1e67e86 100644
--- a/ui/admin/app/tailwind.css
+++ b/ui/admin/app/tailwind.css
@@ -163,7 +163,46 @@ body {
     * {
         @apply border-border;
     }
+
     body {
         @apply bg-background text-foreground;
     }
+
+    /* Typography */
+
+    h1 {
+        @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
+    }
+
+    h2 {
+        @apply scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0;
+    }
+
+    h3 {
+        @apply scroll-m-20 text-2xl font-semibold tracking-tight;
+    }
+
+    h4 {
+        @apply scroll-m-20 text-xl font-semibold tracking-tight;
+    }
+
+    p {
+        @apply leading-7;
+    }
+
+    blockquote {
+        @apply mt-6 border-l-2 pl-6 italic;
+    }
+
+    code {
+        @apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
+    }
+
+    large {
+        @apply text-lg font-semibold;
+    }
+
+    small {
+        @apply text-sm font-medium leading-none;
+    }
 }