From 63f0ef23b08a4c2dd51dac063fad2b2126a20456 Mon Sep 17 00:00:00 2001
From: Ivica Cardic <ivica.cardic@gmail.com>
Date: Sun, 17 Nov 2024 20:13:36 +0100
Subject: [PATCH] 1380 - client - Update borders by replacing border-muted with
 border-*-border

---
 client/src/App.tsx                                     |  2 +-
 client/src/components/TagList.tsx                      |  4 ++--
 .../api-clients/components/ApiClientTable.tsx          |  6 +++---
 .../api-platform/api-collections/ApiCollections.tsx    |  1 -
 .../components/ApiCollectionEndpointList.tsx           |  2 +-
 .../api-collections/components/ApiCollectionList.tsx   |  2 +-
 .../components/ApiCollectionListItem.tsx               |  6 ++++--
 .../components/ApiCollectionsFilterTitle.tsx           |  2 +-
 .../components/ApiConnectorEndpointList.tsx            |  2 +-
 client/src/pages/account/settings/Appearance.tsx       |  6 +++---
 client/src/pages/account/settings/Sessions.tsx         |  4 ++--
 .../components/connection-list/ConnectionList.tsx      |  2 +-
 .../components/connection-list/ConnectionListItem.tsx  |  2 +-
 .../automation/project-instances/ProjectInstances.tsx  |  2 +-
 .../project-instance-list/ProjectInstanceList.tsx      |  4 ++--
 .../project-instance-list/ProjectInstanceListItem.tsx  |  6 ++++--
 client/src/pages/automation/project/Project.tsx        |  2 +-
 .../components/project-header/ProjectHeader.tsx        |  2 +-
 .../projects/components/project-list/ProjectList.tsx   |  2 +-
 .../components/project-list/ProjectListItem.tsx        |  4 ++--
 .../components/WorkflowExecutionsTable.tsx             |  8 ++++++--
 .../WorkflowExecutionSheet.tsx                         |  2 +-
 .../WorkflowExecutionSheetAccordion.tsx                |  8 ++++----
 .../embedded/app-events/components/AppEventList.tsx    |  2 +-
 .../connected-users/components/ConnectedUserTable.tsx  |  6 +++---
 .../components/connection-list/ConnectionList.tsx      |  2 +-
 .../components/connection-list/ConnectionListItem.tsx  |  2 +-
 .../IntegrationInstanceConfigurations.tsx              |  2 +-
 .../IntegrationInstanceConfigurationList.tsx           |  4 ++--
 .../IntegrationInstanceConfigurationListItem.tsx       |  6 ++++--
 client/src/pages/embedded/integration/Integration.tsx  |  2 +-
 .../integration-header/IntegrationHeader.tsx           |  2 +-
 .../components/integration-list/IntegrationList.tsx    |  2 +-
 .../integration-list/IntegrationListItem.tsx           |  2 +-
 .../components/WorkflowExecutionsTable.tsx             | 10 +++++++---
 .../WorkflowExecutionSheet.tsx                         |  2 +-
 .../WorkflowExecutionSheetAccordion.tsx                |  8 ++++----
 .../settings/api-keys/components/ApiKeyTable.tsx       |  6 +++---
 .../components/CurrentOperationSelect.tsx              |  2 +-
 .../platform/workflow-editor/components/DataPill.tsx   |  2 +-
 .../workflow-editor/components/DataPillPanel.tsx       |  4 ++--
 .../components/DataPillPanelBodyInputsItem.tsx         |  6 +++---
 .../components/DataPillPanelBodyPropertiesItem.tsx     |  6 +++---
 .../components/Properties/ArrayProperty.tsx            |  2 +-
 .../components/Properties/ObjectProperty.tsx           |  2 +-
 .../PropertyCodeEditor/PropertyCodeEditorSheet.tsx     |  4 ++--
 .../workflow-editor/components/SchemaProperties.tsx    |  4 ++--
 .../components/WorkflowInputsSheetTable.tsx            |  4 ++--
 .../components/WorkflowNodeDetailsPanel.tsx            |  2 +-
 .../WorkflowNodesPopoverMenuOperationList.tsx          |  2 +-
 .../components/WorkflowNodesSidebar.tsx                |  2 +-
 .../components/WorkflowOutputsSheetTable.tsx           |  4 ++--
 .../components/node-details-tabs/OutputTab.tsx         |  2 +-
 .../signing-keys/components/SigningKeyTable.tsx        |  6 +++---
 client/src/shared/layout/LayoutContainer.tsx           |  2 +-
 .../shared/layout/desktop-sidebar/DesktopSidebar.tsx   |  2 +-
 56 files changed, 105 insertions(+), 92 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 5d0cd7987e..ab91d903b9 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -230,7 +230,7 @@ function App() {
                     <Outlet />
 
                     {ai.enabled && showCopilot && (
-                        <aside className="border-l">
+                        <aside className="border-l border-l-border/70">
                             <CopilotPanel />
                         </aside>
                     )}
diff --git a/client/src/components/TagList.tsx b/client/src/components/TagList.tsx
index 7e3e179740..ad6fe5679d 100644
--- a/client/src/components/TagList.tsx
+++ b/client/src/components/TagList.tsx
@@ -23,7 +23,7 @@ interface TagProps {
 }
 
 const Tag = ({onDeleteTag, tag}: TagProps) => (
-    <div className="group flex max-h-8 items-center justify-between rounded-full border border-muted pl-2 pr-1 text-xs text-gray-700">
+    <div className="group flex max-h-8 items-center justify-between rounded-full border border-border/50 pl-2 pr-1 text-xs text-gray-700">
         <span className="py-1">{tag.name}</span>
 
         <Tooltip>
@@ -153,7 +153,7 @@ const TagList = ({getRequest, id, remainingTags, tags, updateTagsMutation}: TagL
                 </>
             ) : (
                 <div
-                    className="flex size-6 cursor-pointer items-center justify-center rounded border border-muted hover:bg-gray-200"
+                    className="flex size-6 cursor-pointer items-center justify-center rounded border border-border/50 hover:bg-gray-200"
                     onClick={(event) => {
                         event.preventDefault();
 
diff --git a/client/src/ee/pages/automation/api-platform/api-clients/components/ApiClientTable.tsx b/client/src/ee/pages/automation/api-platform/api-clients/components/ApiClientTable.tsx
index e2dd895ca4..38ddd7f3cb 100644
--- a/client/src/ee/pages/automation/api-platform/api-clients/components/ApiClientTable.tsx
+++ b/client/src/ee/pages/automation/api-platform/api-clients/components/ApiClientTable.tsx
@@ -148,7 +148,7 @@ const ApiClientTable = ({apiClients}: ApiClientTableProps) => {
             <Table className="table-auto">
                 <TableHeader>
                     {headerGroups.map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
+                        <TableRow className="border-b-border/50" key={headerGroup.id}>
                             {headerGroup.headers.map((header) => (
                                 <TableHead
                                     className="sticky top-0 z-10 bg-white p-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500"
@@ -162,9 +162,9 @@ const ApiClientTable = ({apiClients}: ApiClientTableProps) => {
                     ))}
                 </TableHeader>
 
-                <TableBody className="divide-y divide-gray-200 bg-white">
+                <TableBody>
                     {rows.map((row) => (
-                        <TableRow className="cursor-pointer" key={row.id}>
+                        <TableRow className="cursor-pointer border-b-border/50" key={row.id}>
                             {row.getVisibleCells().map((cell) => (
                                 <TableCell
                                     className={twMerge(
diff --git a/client/src/ee/pages/automation/api-platform/api-collections/ApiCollections.tsx b/client/src/ee/pages/automation/api-platform/api-collections/ApiCollections.tsx
index 869e28c45a..9907c9e52a 100644
--- a/client/src/ee/pages/automation/api-platform/api-collections/ApiCollections.tsx
+++ b/client/src/ee/pages/automation/api-platform/api-collections/ApiCollections.tsx
@@ -23,7 +23,6 @@ export enum Type {
 }
 
 const ApiCollections = () => {
-    console.log('ApiCollections');
     const {currentWorkspaceId} = useWorkspaceStore();
 
     const location = useLocation();
diff --git a/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionEndpointList.tsx b/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionEndpointList.tsx
index 30e0f4e6e9..086a84facb 100644
--- a/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionEndpointList.tsx
+++ b/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionEndpointList.tsx
@@ -26,7 +26,7 @@ const ApiCollectionEndpointList = ({
     const {data: projectInstance} = useGetProjectInstanceQuery(projectInstanceId);
 
     return (
-        <div className="border-b border-b-gray-100 py-3 pl-4">
+        <div className="border-b border-b-border/50 py-3 pl-4">
             {apiCollectionEndpoints && apiCollectionEndpoints.length > 0 ? (
                 <>
                     <div className="mb-1 flex items-center justify-between">
diff --git a/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionList.tsx b/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionList.tsx
index 7a68536db0..c653cf6bee 100644
--- a/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionList.tsx
+++ b/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionList.tsx
@@ -6,7 +6,7 @@ import ApiCollectionListItem from './ApiCollectionListItem';
 
 const ApiCollectionList = ({apiCollections}: {apiCollections: ApiCollection[]}) => {
     return (
-        <div className="w-full px-2 2xl:mx-auto 2xl:w-4/5">
+        <div className="w-full divide-y divide-border/50 px-4 2xl:mx-auto 2xl:w-4/5">
             {apiCollections.length > 0 &&
                 apiCollections.map((apiCollection) => {
                     return (
diff --git a/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionListItem.tsx b/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionListItem.tsx
index 8899e24130..0d260925c6 100644
--- a/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionListItem.tsx
+++ b/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionListItem.tsx
@@ -76,7 +76,7 @@ const ApiCollectionListItem = ({apiCollection}: ApiCollectionListItemProps) => {
     return (
         <>
             <div className="flex w-full items-center justify-between rounded-md px-2 hover:bg-gray-50">
-                <div className="flex flex-1 items-center border-b border-muted py-5 group-data-[state='open']:border-none">
+                <div className="flex flex-1 items-center py-5 group-data-[state='open']:border-none">
                     <div className="flex-1">
                         <div className="flex items-center justify-between">
                             <div className="flex w-full items-center justify-between">
@@ -131,7 +131,9 @@ const ApiCollectionListItem = ({apiCollection}: ApiCollectionListItemProps) => {
                             <span>V{apiCollection.collectionVersion}</span>
                         </Badge>
 
-                        <Badge variant="secondary">{apiCollection.projectInstance?.environment}</Badge>
+                        <div className="flex min-w-28 justify-end">
+                            <Badge variant="secondary">{apiCollection.projectInstance?.environment}</Badge>
+                        </div>
 
                         <div className="flex min-w-52 flex-col items-end gap-y-4">
                             <Switch checked={apiCollection.enabled} onCheckedChange={handleOnCheckedChange} />
diff --git a/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionsFilterTitle.tsx b/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionsFilterTitle.tsx
index 5bf2a7aa05..6150837857 100644
--- a/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionsFilterTitle.tsx
+++ b/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionsFilterTitle.tsx
@@ -31,7 +31,7 @@ const ApiCollectionsFilterTitle = ({
 
             <Badge variant="secondary">
                 <span className="text-sm">
-                    {environment === undefined ? 'All environments' : environment === 1 ? 'Test' : 'Production'}
+                    {environment === undefined ? 'All Environments' : environment === 1 ? 'Test' : 'Production'}
                 </span>
             </Badge>
 
diff --git a/client/src/ee/pages/settings/platform/api-connectors/components/ApiConnectorEndpointList.tsx b/client/src/ee/pages/settings/platform/api-connectors/components/ApiConnectorEndpointList.tsx
index 7c7cde291c..f81db07860 100644
--- a/client/src/ee/pages/settings/platform/api-connectors/components/ApiConnectorEndpointList.tsx
+++ b/client/src/ee/pages/settings/platform/api-connectors/components/ApiConnectorEndpointList.tsx
@@ -5,7 +5,7 @@ import ApiConnectorEndpointListItem from './ApiConnectorEndpointListItem';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ApiConnectorEndpointList = ({apiConnectorEndpoints}: {apiConnectorEndpoints?: Array<ApiConnectorEndpoint>}) => {
     return (
-        <div className="border-b border-b-gray-100 py-3 pl-4">
+        <div className="border-b border-b-border/50 py-3 pl-4">
             <h3 className="flex justify-start pl-2 text-sm font-semibold uppercase text-gray-400">Endpoints</h3>
 
             <ul>
diff --git a/client/src/pages/account/settings/Appearance.tsx b/client/src/pages/account/settings/Appearance.tsx
index ce99858eef..d76cd42855 100644
--- a/client/src/pages/account/settings/Appearance.tsx
+++ b/client/src/pages/account/settings/Appearance.tsx
@@ -58,7 +58,7 @@ export default function Appearance() {
                                                 <RadioGroupItem className="sr-only" value="light" />
                                             </FormControl>
 
-                                            <div className="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
+                                            <div className="items-center rounded-md border-2 border-border/50 p-1 hover:border-accent">
                                                 <div className="space-y-2 rounded-sm bg-input p-2">
                                                     <div className="space-y-2 rounded-md bg-white p-2 shadow-sm">
                                                         <div className="h-2 w-appearance-theme-choice-skeleton-small-width rounded-lg bg-input" />
@@ -90,7 +90,7 @@ export default function Appearance() {
                                                 <RadioGroupItem className="sr-only" value="dark" />
                                             </FormControl>
 
-                                            <div className="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
+                                            <div className="items-center rounded-md border-2 border-border/50 bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
                                                 <div className="space-y-2 rounded-sm bg-slate-950 p-2">
                                                     <div className="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
                                                         <div className="h-2 w-appearance-theme-choice-skeleton-small-width rounded-lg bg-slate-400" />
@@ -122,7 +122,7 @@ export default function Appearance() {
                                                 <RadioGroupItem className="sr-only" value="system" />
                                             </FormControl>
 
-                                            <div className="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
+                                            <div className="items-center rounded-md border-2 border-border/50 bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
                                                 <div className="space-y-2 rounded-sm bg-input p-2">
                                                     <div className="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
                                                         <div className="h-2 w-appearance-theme-choice-skeleton-small-width rounded-lg bg-slate-400" />
diff --git a/client/src/pages/account/settings/Sessions.tsx b/client/src/pages/account/settings/Sessions.tsx
index 2739ba2ed7..ed3f98085d 100644
--- a/client/src/pages/account/settings/Sessions.tsx
+++ b/client/src/pages/account/settings/Sessions.tsx
@@ -62,7 +62,7 @@ const Sessions = () => {
                     <div className="w-full px-2 2xl:mx-auto 2xl:w-4/5">
                         <Table className="table-auto">
                             <TableHeader>
-                                <TableRow>
+                                <TableRow className="border-b-border/50">
                                     <TableHead>IP Address</TableHead>
 
                                     <TableHead>User agent</TableHead>
@@ -75,7 +75,7 @@ const Sessions = () => {
 
                             <TableBody>
                                 {sessions.map((s, index) => (
-                                    <TableRow key={index}>
+                                    <TableRow className="cursor-pointer border-b-border/50" key={index}>
                                         <TableCell>{s.ipAddress}</TableCell>
 
                                         <TableCell>
diff --git a/client/src/pages/automation/connections/components/connection-list/ConnectionList.tsx b/client/src/pages/automation/connections/components/connection-list/ConnectionList.tsx
index b2a6bc234f..670ae398de 100644
--- a/client/src/pages/automation/connections/components/connection-list/ConnectionList.tsx
+++ b/client/src/pages/automation/connections/components/connection-list/ConnectionList.tsx
@@ -4,7 +4,7 @@ import ConnectionListItem from './ConnectionListItem';
 
 const ConnectionList = ({connections, tags}: {connections: Connection[]; tags: Tag[]}) => {
     return (
-        <ul className="w-full px-2 2xl:mx-auto 2xl:w-4/5" role="list">
+        <ul className="w-full divide-y divide-border/50 px-4 2xl:mx-auto 2xl:w-4/5" role="list">
             {connections.map((connection) => {
                 const connectionTagIds = connection.tags?.map((tag) => tag.id);
 
diff --git a/client/src/pages/automation/connections/components/connection-list/ConnectionListItem.tsx b/client/src/pages/automation/connections/components/connection-list/ConnectionListItem.tsx
index 04ae705bf4..3708214fc0 100644
--- a/client/src/pages/automation/connections/components/connection-list/ConnectionListItem.tsx
+++ b/client/src/pages/automation/connections/components/connection-list/ConnectionListItem.tsx
@@ -90,7 +90,7 @@ const ConnectionListItem = ({connection, remainingTags}: ConnectionListItemProps
         <li key={connection.id}>
             <>
                 <div className="group flex items-center rounded-md bg-white px-2 hover:bg-gray-50">
-                    <div className="flex flex-1 items-center border-b border-muted py-5">
+                    <div className="flex flex-1 items-center py-5">
                         <div className="flex-1">
                             <div className="flex items-center justify-between">
                                 <div className="relative flex items-center gap-2">
diff --git a/client/src/pages/automation/project-instances/ProjectInstances.tsx b/client/src/pages/automation/project-instances/ProjectInstances.tsx
index fff393a9b7..fe3ecddfd2 100644
--- a/client/src/pages/automation/project-instances/ProjectInstances.tsx
+++ b/client/src/pages/automation/project-instances/ProjectInstances.tsx
@@ -200,7 +200,7 @@ const ProjectInstances = () => {
                 loading={projectsIsLoading || projectInstancesIsLoading || tagsIsLoading}
             >
                 {projectInstances && projectInstances?.length > 0 ? (
-                    <div className="w-full px-2 2xl:mx-auto 2xl:w-4/5">
+                    <div className="w-full divide-y divide-border/50 px-4 2xl:mx-auto 2xl:w-4/5">
                         {Array.from(projectInstanceMap.keys())?.map(
                             (projectId) =>
                                 projects &&
diff --git a/client/src/pages/automation/project-instances/components/project-instance-list/ProjectInstanceList.tsx b/client/src/pages/automation/project-instances/components/project-instance-list/ProjectInstanceList.tsx
index 953fa797cd..bf259f060f 100644
--- a/client/src/pages/automation/project-instances/components/project-instance-list/ProjectInstanceList.tsx
+++ b/client/src/pages/automation/project-instances/components/project-instance-list/ProjectInstanceList.tsx
@@ -17,7 +17,7 @@ const ProjectInstanceList = ({
     const projectInstanceMap = useProjectInstancesEnabledStore(({projectInstanceMap}) => projectInstanceMap);
 
     return (
-        <div className="w-full">
+        <>
             {projectInstances.map((projectInstance) => {
                 const projectTagIds = projectInstance.tags?.map((tag) => tag.id);
 
@@ -51,7 +51,7 @@ const ProjectInstanceList = ({
                     </Collapsible>
                 );
             })}
-        </div>
+        </>
     );
 };
 
diff --git a/client/src/pages/automation/project-instances/components/project-instance-list/ProjectInstanceListItem.tsx b/client/src/pages/automation/project-instances/components/project-instance-list/ProjectInstanceListItem.tsx
index 373b0f19c3..6338ed0647 100644
--- a/client/src/pages/automation/project-instances/components/project-instance-list/ProjectInstanceListItem.tsx
+++ b/client/src/pages/automation/project-instances/components/project-instance-list/ProjectInstanceListItem.tsx
@@ -90,7 +90,7 @@ const ProjectInstanceListItem = ({projectInstance, remainingTags}: ProjectInstan
     return (
         <>
             <div className="flex w-full items-center justify-between rounded-md px-2 hover:bg-gray-50">
-                <div className="flex flex-1 items-center border-b border-muted py-5 group-data-[state='open']:border-none">
+                <div className="flex flex-1 items-center py-5 group-data-[state='open']:border-none">
                     <div className="flex-1">
                         <div className="flex items-center justify-between">
                             <div className="flex w-full items-center gap-2">
@@ -143,7 +143,9 @@ const ProjectInstanceListItem = ({projectInstance, remainingTags}: ProjectInstan
                     <div className="flex items-center justify-end gap-x-6">
                         <Badge variant="secondary">V{projectInstance.projectVersion}</Badge>
 
-                        <Badge variant="secondary">{projectInstance.environment}</Badge>
+                        <div className="flex min-w-28 justify-end">
+                            <Badge variant="secondary">{projectInstance.environment}</Badge>
+                        </div>
 
                         <div className="flex min-w-52 flex-col items-end gap-y-4">
                             <div className="flex items-center">
diff --git a/client/src/pages/automation/project/Project.tsx b/client/src/pages/automation/project/Project.tsx
index 0b08806867..b8d39dcb38 100644
--- a/client/src/pages/automation/project/Project.tsx
+++ b/client/src/pages/automation/project/Project.tsx
@@ -273,7 +273,7 @@ const Project = () => {
                 rightSidebarOpen={rightSidebarOpen}
                 rightSidebarWidth="96"
                 rightToolbarBody={<RightSidebar navigation={rightSidebarNavigation} />}
-                rightToolbarClass="border-l"
+                rightToolbarClass="border-l border-l-border/50"
                 rightToolbarOpen={true}
                 topHeader={
                     projectId && (
diff --git a/client/src/pages/automation/project/components/project-header/ProjectHeader.tsx b/client/src/pages/automation/project/components/project-header/ProjectHeader.tsx
index 5064a1ec29..35972e7d10 100644
--- a/client/src/pages/automation/project/components/project-header/ProjectHeader.tsx
+++ b/client/src/pages/automation/project/components/project-header/ProjectHeader.tsx
@@ -179,7 +179,7 @@ const ProjectHeader = ({
     };
 
     return (
-        <header className="flex items-center border-b py-2.5 pl-3 pr-2.5">
+        <header className="flex items-center border-b border-b-border/50 py-2.5 pl-3 pr-2.5">
             <div className="flex flex-1">{project && <ProjectHeaderTitle project={project} />}</div>
 
             <div className="flex items-center space-x-12">
diff --git a/client/src/pages/automation/projects/components/project-list/ProjectList.tsx b/client/src/pages/automation/projects/components/project-list/ProjectList.tsx
index 9cb9941afe..f7c76b1149 100644
--- a/client/src/pages/automation/projects/components/project-list/ProjectList.tsx
+++ b/client/src/pages/automation/projects/components/project-list/ProjectList.tsx
@@ -6,7 +6,7 @@ import ProjectWorkflowList from '../project-workflow-list/ProjectWorkflowList';
 
 const ProjectList = ({projects, tags}: {projects: Project[]; tags: Tag[]}) => {
     return (
-        <div className="w-full px-2 2xl:mx-auto 2xl:w-4/5">
+        <div className="w-full divide-y divide-border/50 px-4 2xl:mx-auto 2xl:w-4/5">
             {projects.map((project) => {
                 const projectTagIds = project.tags?.map((tag) => tag.id);
 
diff --git a/client/src/pages/automation/projects/components/project-list/ProjectListItem.tsx b/client/src/pages/automation/projects/components/project-list/ProjectListItem.tsx
index 075bf52271..d2eb5037ac 100644
--- a/client/src/pages/automation/projects/components/project-list/ProjectListItem.tsx
+++ b/client/src/pages/automation/projects/components/project-list/ProjectListItem.tsx
@@ -131,8 +131,8 @@ const ProjectListItem = ({project, remainingTags}: ProjectItemProps) => {
 
     return (
         <>
-            <div className="flex w-full items-center justify-between rounded-md px-2 hover:bg-gray-50">
-                <div className="flex flex-1 items-center border-b border-muted py-5 group-data-[state='open']:border-none">
+            <div className="flex w-full items-center justify-between rounded-md px-2 hover:bg-muted/50">
+                <div className="flex flex-1 items-center py-5 group-data-[state='open']:border-none">
                     <div className="flex-1">
                         <div className="flex items-center gap-2">
                             {project.projectWorkflowIds && project.projectWorkflowIds.length > 0 ? (
diff --git a/client/src/pages/automation/workflow-executions/components/WorkflowExecutionsTable.tsx b/client/src/pages/automation/workflow-executions/components/WorkflowExecutionsTable.tsx
index 2362d2ea34..145ea8db11 100644
--- a/client/src/pages/automation/workflow-executions/components/WorkflowExecutionsTable.tsx
+++ b/client/src/pages/automation/workflow-executions/components/WorkflowExecutionsTable.tsx
@@ -85,7 +85,7 @@ const WorkflowExecutionsTable = ({data}: {data: WorkflowExecution[]}) => {
             <Table>
                 <TableHeader>
                     {headerGroups.map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
+                        <TableRow className="border-b-border/50" key={headerGroup.id}>
                             {headerGroup.headers.map((header, index) => (
                                 <TableHead key={`${headerGroup.id}_${header.id}_${index}`}>
                                     {!header.isPlaceholder &&
@@ -98,7 +98,11 @@ const WorkflowExecutionsTable = ({data}: {data: WorkflowExecution[]}) => {
 
                 <TableBody>
                     {rows.map((row) => (
-                        <TableRow className="cursor-pointer" key={row.id} onClick={() => handleRowClick(row.index)}>
+                        <TableRow
+                            className="cursor-pointer border-b-border/50"
+                            key={row.id}
+                            onClick={() => handleRowClick(row.index)}
+                        >
                             {row.getVisibleCells().map((cell, index) => (
                                 <TableCell className="whitespace-nowrap py-4" key={`${row.id}_${cell.id}_${index}`}>
                                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/client/src/pages/automation/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx b/client/src/pages/automation/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx
index be16db45ac..9b9f344037 100644
--- a/client/src/pages/automation/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx
+++ b/client/src/pages/automation/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx
@@ -24,7 +24,7 @@ const WorkflowExecutionSheet = () => {
             <SheetContent className="flex w-11/12 gap-0 p-0 sm:max-w-screen-xl">
                 {workflowExecutionLoading && <span>Loading...</span>}
 
-                <div className="flex min-w-workflow-execution-sheet-width max-w-workflow-execution-sheet-width flex-col border-r border-muted bg-white">
+                <div className="flex min-w-workflow-execution-sheet-width max-w-workflow-execution-sheet-width flex-col border-r border-r-border/50 bg-white">
                     {workflowExecution?.job && (
                         <WorkflowExecutionSheetAccordion
                             job={workflowExecution.job}
diff --git a/client/src/pages/automation/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheetAccordion.tsx b/client/src/pages/automation/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheetAccordion.tsx
index b6aa2637f6..40e6b684f8 100644
--- a/client/src/pages/automation/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheetAccordion.tsx
+++ b/client/src/pages/automation/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheetAccordion.tsx
@@ -51,11 +51,11 @@ const WorkflowExecutionSheetAccordion = ({job, triggerExecution}: {job: Job; tri
                 <Accordion collapsible defaultValue={triggerExecution?.id || ''} type="single">
                     {triggerExecution && (
                         <AccordionItem key={triggerExecution.id} value={triggerExecution.id || ''}>
-                            <AccordionTrigger className="flex w-full items-center justify-between border-muted bg-background data-[state=closed]:border-b">
+                            <AccordionTrigger className="flex w-full items-center justify-between border-border/50 bg-background data-[state=closed]:border-b">
                                 <WorkflowTriggerExecutionItem triggerExecution={triggerExecution} />
                             </AccordionTrigger>
 
-                            <AccordionContent className="space-y-4 border-b border-muted p-3">
+                            <AccordionContent className="space-y-4 border-b border-b-border/50 p-3">
                                 <WorkflowExecutionContent {...triggerExecution} />
                             </AccordionContent>
                         </AccordionItem>
@@ -64,11 +64,11 @@ const WorkflowExecutionSheetAccordion = ({job, triggerExecution}: {job: Job; tri
                     {job?.taskExecutions &&
                         job?.taskExecutions.map((taskExecution) => (
                             <AccordionItem key={taskExecution.id} value={taskExecution.id || ''}>
-                                <AccordionTrigger className="flex w-full items-center justify-between border-muted bg-background data-[state=closed]:border-b">
+                                <AccordionTrigger className="flex w-full items-center justify-between border-border/50 bg-background data-[state=closed]:border-b">
                                     <WorkflowTaskExecutionItem taskExecution={taskExecution} />
                                 </AccordionTrigger>
 
-                                <AccordionContent className="space-y-4 border-b border-muted p-3">
+                                <AccordionContent className="space-y-4 border-b border-b-border/50 p-3">
                                     <WorkflowExecutionContent {...taskExecution} />
                                 </AccordionContent>
                             </AccordionItem>
diff --git a/client/src/pages/embedded/app-events/components/AppEventList.tsx b/client/src/pages/embedded/app-events/components/AppEventList.tsx
index a760ae5f67..2faea1ce6e 100644
--- a/client/src/pages/embedded/app-events/components/AppEventList.tsx
+++ b/client/src/pages/embedded/app-events/components/AppEventList.tsx
@@ -3,7 +3,7 @@ import {AppEvent} from '@/shared/middleware/embedded/configuration';
 
 const AppEventList = ({appEvents}: {appEvents: AppEvent[]}) => {
     return (
-        <ul className="w-full divide-y divide-gray-100 px-2 2xl:mx-auto 2xl:w-4/5" role="list">
+        <ul className="w-full divide-y divide-gray-100 px-4 2xl:mx-auto 2xl:w-4/5" role="list">
             {appEvents.map((appEvent) => {
                 return <AppEventListItem appEvent={appEvent} key={appEvent.id} />;
             })}
diff --git a/client/src/pages/embedded/connected-users/components/ConnectedUserTable.tsx b/client/src/pages/embedded/connected-users/components/ConnectedUserTable.tsx
index ff1b45d47f..187f9d4ebb 100644
--- a/client/src/pages/embedded/connected-users/components/ConnectedUserTable.tsx
+++ b/client/src/pages/embedded/connected-users/components/ConnectedUserTable.tsx
@@ -183,7 +183,7 @@ const ConnectedUserTable = ({connectedUsers}: ConnectedUserTableProps) => {
             <Table className="table-auto">
                 <TableHeader>
                     {headerGroups.map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
+                        <TableRow className="border-b-border/50" key={headerGroup.id}>
                             {headerGroup.headers.map((header) => (
                                 <TableHead
                                     className="sticky top-0 z-10 bg-white p-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500"
@@ -197,9 +197,9 @@ const ConnectedUserTable = ({connectedUsers}: ConnectedUserTableProps) => {
                     ))}
                 </TableHeader>
 
-                <TableBody className="divide-y divide-gray-200 bg-white">
+                <TableBody>
                     {rows.map((row) => (
-                        <TableRow className="cursor-pointer" key={row.id}>
+                        <TableRow className="cursor-pointer border-b-border/50" key={row.id}>
                             {row.getVisibleCells().map((cell) => {
                                 let width = '';
                                 if (cell.id.endsWith('integrationInstances')) {
diff --git a/client/src/pages/embedded/connections/components/connection-list/ConnectionList.tsx b/client/src/pages/embedded/connections/components/connection-list/ConnectionList.tsx
index 6d36437895..b9fea402f7 100644
--- a/client/src/pages/embedded/connections/components/connection-list/ConnectionList.tsx
+++ b/client/src/pages/embedded/connections/components/connection-list/ConnectionList.tsx
@@ -4,7 +4,7 @@ import ConnectionListItem from './ConnectionListItem';
 
 const ConnectionList = ({connections, tags}: {connections: Connection[]; tags: Tag[]}) => {
     return (
-        <ul className="w-full px-2 2xl:mx-auto 2xl:w-4/5" role="list">
+        <ul className="w-full divide-y divide-border/50 px-4 2xl:mx-auto 2xl:w-4/5" role="list">
             {connections.map((connection) => {
                 const connectionTagIds = connection.tags?.map((tag) => tag.id);
 
diff --git a/client/src/pages/embedded/connections/components/connection-list/ConnectionListItem.tsx b/client/src/pages/embedded/connections/components/connection-list/ConnectionListItem.tsx
index a8c443481c..0585aa5cc4 100644
--- a/client/src/pages/embedded/connections/components/connection-list/ConnectionListItem.tsx
+++ b/client/src/pages/embedded/connections/components/connection-list/ConnectionListItem.tsx
@@ -90,7 +90,7 @@ const ConnectionListItem = ({connection, remainingTags}: ConnectionListItemProps
         <li key={connection.id}>
             <>
                 <div className="group flex items-center rounded-md bg-white px-2 hover:bg-gray-50">
-                    <div className="flex flex-1 items-center border-b border-muted py-5">
+                    <div className="flex flex-1 items-center py-5">
                         <div className="flex-1">
                             <div className="flex items-center justify-between">
                                 <div className="relative flex items-center gap-2">
diff --git a/client/src/pages/embedded/integration-instance-configurations/IntegrationInstanceConfigurations.tsx b/client/src/pages/embedded/integration-instance-configurations/IntegrationInstanceConfigurations.tsx
index f0759022f6..072465acf2 100644
--- a/client/src/pages/embedded/integration-instance-configurations/IntegrationInstanceConfigurations.tsx
+++ b/client/src/pages/embedded/integration-instance-configurations/IntegrationInstanceConfigurations.tsx
@@ -273,7 +273,7 @@ const IntegrationInstanceConfigurations = () => {
                 {componentDefinitions &&
                 integrationInstanceConfigurations &&
                 integrationInstanceConfigurations?.length > 0 ? (
-                    <div className="w-full px-2 2xl:mx-auto 2xl:w-4/5">
+                    <div className="w-full divide-y divide-border/50 px-4 2xl:mx-auto 2xl:w-4/5">
                         {Array.from(integrationInstanceConfigurationMap.keys())?.map(
                             (integrationId) =>
                                 integrations &&
diff --git a/client/src/pages/embedded/integration-instance-configurations/components/integration-instance-configuration-list/IntegrationInstanceConfigurationList.tsx b/client/src/pages/embedded/integration-instance-configurations/components/integration-instance-configuration-list/IntegrationInstanceConfigurationList.tsx
index 73d084a5e4..8d28d8801c 100644
--- a/client/src/pages/embedded/integration-instance-configurations/components/integration-instance-configuration-list/IntegrationInstanceConfigurationList.tsx
+++ b/client/src/pages/embedded/integration-instance-configurations/components/integration-instance-configuration-list/IntegrationInstanceConfigurationList.tsx
@@ -19,7 +19,7 @@ const IntegrationInstanceConfigurationList = ({
     return (
         <>
             {integrationInstanceConfigurations.length > 0 && (
-                <div className="w-full">
+                <>
                     {integrationInstanceConfigurations.map((integrationInstanceConfiguration) => {
                         const integrationTagIds = integrationInstanceConfiguration.tags?.map((tag) => tag.id);
 
@@ -55,7 +55,7 @@ const IntegrationInstanceConfigurationList = ({
                             </Collapsible>
                         );
                     })}
-                </div>
+                </>
             )}
         </>
     );
diff --git a/client/src/pages/embedded/integration-instance-configurations/components/integration-instance-configuration-list/IntegrationInstanceConfigurationListItem.tsx b/client/src/pages/embedded/integration-instance-configurations/components/integration-instance-configuration-list/IntegrationInstanceConfigurationListItem.tsx
index 76abe35e2f..6261fe9391 100644
--- a/client/src/pages/embedded/integration-instance-configurations/components/integration-instance-configuration-list/IntegrationInstanceConfigurationListItem.tsx
+++ b/client/src/pages/embedded/integration-instance-configurations/components/integration-instance-configuration-list/IntegrationInstanceConfigurationListItem.tsx
@@ -99,7 +99,7 @@ const IntegrationInstanceConfigurationListItem = ({
     return (
         <>
             <div className="flex w-full items-center justify-between rounded-md px-2 hover:bg-gray-50">
-                <div className="flex flex-1 items-center border-b border-muted py-5 group-data-[state='open']:border-none">
+                <div className="flex flex-1 items-center py-5 group-data-[state='open']:border-none">
                     <div className="flex-1">
                         <div className="flex items-center justify-between">
                             <div className="flex w-full items-center gap-2">
@@ -162,7 +162,9 @@ const IntegrationInstanceConfigurationListItem = ({
                     <div className="flex items-center justify-end gap-x-6">
                         <Badge variant="secondary">V{integrationInstanceConfiguration.integrationVersion}</Badge>
 
-                        <Badge variant="secondary">{integrationInstanceConfiguration.environment}</Badge>
+                        <div className="flex min-w-28 justify-end">
+                            <Badge variant="secondary">{integrationInstanceConfiguration.environment}</Badge>
+                        </div>
 
                         <div className="flex min-w-52 flex-col items-end gap-y-4">
                             <div className="flex items-center">
diff --git a/client/src/pages/embedded/integration/Integration.tsx b/client/src/pages/embedded/integration/Integration.tsx
index 47da496ae9..d94142a69f 100644
--- a/client/src/pages/embedded/integration/Integration.tsx
+++ b/client/src/pages/embedded/integration/Integration.tsx
@@ -274,7 +274,7 @@ const Integration = () => {
                 rightSidebarOpen={rightSidebarOpen}
                 rightSidebarWidth="96"
                 rightToolbarBody={<RightSidebar navigation={rightSidebarNavigation} />}
-                rightToolbarClass="border-l"
+                rightToolbarClass="border-l border-l-border/50"
                 rightToolbarOpen={true}
                 topHeader={
                     integrationId && (
diff --git a/client/src/pages/embedded/integration/components/integration-header/IntegrationHeader.tsx b/client/src/pages/embedded/integration/components/integration-header/IntegrationHeader.tsx
index f6ae384ef4..a61039337a 100644
--- a/client/src/pages/embedded/integration/components/integration-header/IntegrationHeader.tsx
+++ b/client/src/pages/embedded/integration/components/integration-header/IntegrationHeader.tsx
@@ -186,7 +186,7 @@ const IntegrationHeader = ({
     };
 
     return (
-        <header className="flex items-center border-b py-2.5 pl-3 pr-2.5">
+        <header className="flex items-center border-b border-b-border/50 py-2.5 pl-3 pr-2.5">
             <div className="flex flex-1">{integration && <IntegrationHeaderTitle integration={integration} />}</div>
 
             <div className="flex items-center space-x-12">
diff --git a/client/src/pages/embedded/integrations/components/integration-list/IntegrationList.tsx b/client/src/pages/embedded/integrations/components/integration-list/IntegrationList.tsx
index 85079bc443..e262b603ec 100644
--- a/client/src/pages/embedded/integrations/components/integration-list/IntegrationList.tsx
+++ b/client/src/pages/embedded/integrations/components/integration-list/IntegrationList.tsx
@@ -6,7 +6,7 @@ import IntegrationWorkflowList from '../integration-workflow-list/IntegrationWor
 
 const IntegrationList = ({integrations, tags}: {integrations: Integration[]; tags: Tag[]}) => {
     return (
-        <div className="w-full px-2 2xl:mx-auto 2xl:w-4/5">
+        <div className="w-full divide-y divide-border/50 px-4 2xl:mx-auto 2xl:w-4/5">
             {integrations.map((integration) => {
                 const integrationTagIds = integration.tags?.map((tag) => tag.id);
 
diff --git a/client/src/pages/embedded/integrations/components/integration-list/IntegrationListItem.tsx b/client/src/pages/embedded/integrations/components/integration-list/IntegrationListItem.tsx
index 3f5e150374..3cfab058f3 100644
--- a/client/src/pages/embedded/integrations/components/integration-list/IntegrationListItem.tsx
+++ b/client/src/pages/embedded/integrations/components/integration-list/IntegrationListItem.tsx
@@ -140,7 +140,7 @@ const IntegrationListItem = ({integration, remainingTags}: IntegrationItemProps)
     return (
         <>
             <div className="flex w-full items-center justify-between rounded-md px-2 hover:bg-gray-50">
-                <div className="flex flex-1 items-center border-b border-muted py-5 group-data-[state='open']:border-none">
+                <div className="flex flex-1 items-center py-5 group-data-[state='open']:border-none">
                     <div className="flex-1">
                         <div className="flex items-center justify-between">
                             <div className="relative flex items-center gap-2">
diff --git a/client/src/pages/embedded/workflow-executions/components/WorkflowExecutionsTable.tsx b/client/src/pages/embedded/workflow-executions/components/WorkflowExecutionsTable.tsx
index f7d88a8746..2d8887e837 100644
--- a/client/src/pages/embedded/workflow-executions/components/WorkflowExecutionsTable.tsx
+++ b/client/src/pages/embedded/workflow-executions/components/WorkflowExecutionsTable.tsx
@@ -85,7 +85,7 @@ const WorkflowExecutionsTable = ({data}: {data: WorkflowExecution[]}) => {
             <Table className="table-auto">
                 <TableHeader>
                     {headerGroups.map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
+                        <TableRow className="border-b-border/50" key={headerGroup.id}>
                             {headerGroup.headers.map((header, index) => (
                                 <TableHead
                                     className="sticky top-0 z-10 bg-white p-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500"
@@ -99,9 +99,13 @@ const WorkflowExecutionsTable = ({data}: {data: WorkflowExecution[]}) => {
                     ))}
                 </TableHeader>
 
-                <TableBody className="divide-y divide-gray-200 bg-white">
+                <TableBody>
                     {rows.map((row) => (
-                        <TableRow className="cursor-pointer" key={row.id} onClick={() => handleRowClick(row.index)}>
+                        <TableRow
+                            className="cursor-pointer border-b-border/50"
+                            key={row.id}
+                            onClick={() => handleRowClick(row.index)}
+                        >
                             {row.getVisibleCells().map((cell, index) => (
                                 <TableCell className="whitespace-nowrap py-4" key={`${row.id}_${cell.id}_${index}`}>
                                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/client/src/pages/embedded/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx b/client/src/pages/embedded/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx
index 0f7ff39feb..9431483caf 100644
--- a/client/src/pages/embedded/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx
+++ b/client/src/pages/embedded/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx
@@ -24,7 +24,7 @@ const WorkflowExecutionSheet = () => {
             <SheetContent className="flex w-11/12 gap-0 p-0 sm:max-w-screen-xl">
                 {workflowExecutionLoading && <span>Loading...</span>}
 
-                <div className="flex w-7/12 flex-col border-r border-muted bg-white">
+                <div className="flex w-7/12 flex-col border-r border-r-border/50 bg-white">
                     {workflowExecution?.job && (
                         <WorkflowExecutionSheetAccordion
                             job={workflowExecution.job}
diff --git a/client/src/pages/embedded/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheetAccordion.tsx b/client/src/pages/embedded/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheetAccordion.tsx
index a2f4a87760..47ffdf2db3 100644
--- a/client/src/pages/embedded/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheetAccordion.tsx
+++ b/client/src/pages/embedded/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheetAccordion.tsx
@@ -51,11 +51,11 @@ const WorkflowExecutionSheetAccordion = ({job, triggerExecution}: {job: Job; tri
                 <Accordion collapsible defaultValue={triggerExecution?.id || ''} type="single">
                     {triggerExecution && (
                         <AccordionItem key={triggerExecution.id} value={triggerExecution.id || ''}>
-                            <AccordionTrigger className="flex w-full items-center justify-between border-muted bg-background data-[state=closed]:border-b">
+                            <AccordionTrigger className="flex w-full items-center justify-between border-border/50 bg-background data-[state=closed]:border-b">
                                 <WorkflowTriggerExecutionItem triggerExecution={triggerExecution} />
                             </AccordionTrigger>
 
-                            <AccordionContent className="space-y-4 border-b border-muted p-3">
+                            <AccordionContent className="space-y-4 border-b border-b-border/50 p-3">
                                 <WorkflowExecutionContent {...triggerExecution} />
                             </AccordionContent>
                         </AccordionItem>
@@ -64,11 +64,11 @@ const WorkflowExecutionSheetAccordion = ({job, triggerExecution}: {job: Job; tri
                     {job?.taskExecutions &&
                         job?.taskExecutions.map((taskExecution) => (
                             <AccordionItem key={taskExecution.id} value={taskExecution.id || ''}>
-                                <AccordionTrigger className="flex w-full items-center justify-between border-muted bg-background data-[state=closed]:border-b">
+                                <AccordionTrigger className="flex w-full items-center justify-between border-border/50 bg-background data-[state=closed]:border-b">
                                     <WorkflowTaskExecutionItem taskExecution={taskExecution} />
                                 </AccordionTrigger>
 
-                                <AccordionContent className="space-y-4 border-b border-muted p-3">
+                                <AccordionContent className="space-y-4 border-b border-b-border/50 p-3">
                                     <WorkflowExecutionContent {...taskExecution} />
                                 </AccordionContent>
                             </AccordionItem>
diff --git a/client/src/pages/platform/settings/api-keys/components/ApiKeyTable.tsx b/client/src/pages/platform/settings/api-keys/components/ApiKeyTable.tsx
index 7cede12ef3..19632432b5 100644
--- a/client/src/pages/platform/settings/api-keys/components/ApiKeyTable.tsx
+++ b/client/src/pages/platform/settings/api-keys/components/ApiKeyTable.tsx
@@ -149,7 +149,7 @@ const ApiKeyTable = ({apiKeys}: ApiKeyTableProps) => {
             <Table className="table-auto">
                 <TableHeader>
                     {headerGroups.map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
+                        <TableRow className="border-b-border/50" key={headerGroup.id}>
                             {headerGroup.headers.map((header) => (
                                 <TableHead
                                     className="sticky top-0 z-10 bg-white p-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500"
@@ -163,9 +163,9 @@ const ApiKeyTable = ({apiKeys}: ApiKeyTableProps) => {
                     ))}
                 </TableHeader>
 
-                <TableBody className="divide-y divide-gray-200 bg-white">
+                <TableBody>
                     {rows.map((row) => (
-                        <TableRow className="cursor-pointer" key={row.id}>
+                        <TableRow className="cursor-pointer border-b-border/50" key={row.id}>
                             {row.getVisibleCells().map((cell) => (
                                 <TableCell
                                     className={twMerge(
diff --git a/client/src/pages/platform/workflow-editor/components/CurrentOperationSelect.tsx b/client/src/pages/platform/workflow-editor/components/CurrentOperationSelect.tsx
index 563f13b6d6..1e85d1a4f9 100644
--- a/client/src/pages/platform/workflow-editor/components/CurrentOperationSelect.tsx
+++ b/client/src/pages/platform/workflow-editor/components/CurrentOperationSelect.tsx
@@ -85,7 +85,7 @@ const CurrentOperationSelect = ({
     triggerSelect,
     value,
 }: CurrentOperationSelectProps) => (
-    <div className="flex items-end border-b border-muted p-4">
+    <div className="flex items-end border-b border-b-border/50 p-4">
         {operations?.length === 1 && !!operations[0] ? (
             <div className="flex w-full flex-col">
                 <div className="flex items-center space-x-1">
diff --git a/client/src/pages/platform/workflow-editor/components/DataPill.tsx b/client/src/pages/platform/workflow-editor/components/DataPill.tsx
index 8d8bfb8781..d98ecc5d93 100644
--- a/client/src/pages/platform/workflow-editor/components/DataPill.tsx
+++ b/client/src/pages/platform/workflow-editor/components/DataPill.tsx
@@ -128,7 +128,7 @@ const DataPill = ({
             </div>
 
             {!!subProperties?.length && (
-                <ul className="mt-2 flex flex-col space-y-2 border-l border-gray-200 pl-4">
+                <ul className="mt-2 flex flex-col space-y-2 border-l border-l-border/50 pl-4">
                     {subProperties?.map((subProperty, index) => {
                         let sampleValue;
 
diff --git a/client/src/pages/platform/workflow-editor/components/DataPillPanel.tsx b/client/src/pages/platform/workflow-editor/components/DataPillPanel.tsx
index 74d3083282..5004520de8 100644
--- a/client/src/pages/platform/workflow-editor/components/DataPillPanel.tsx
+++ b/client/src/pages/platform/workflow-editor/components/DataPillPanel.tsx
@@ -61,7 +61,7 @@ const DataPillPanel = ({
     }
 
     return (
-        <div className="absolute inset-y-4 right-data-pill-panel-placement z-10 w-screen max-w-data-pill-panel-width overflow-hidden rounded-xl border border-muted bg-white shadow-lg">
+        <div className="absolute inset-y-4 right-data-pill-panel-placement z-10 w-screen max-w-data-pill-panel-width overflow-hidden rounded-xl border border-border/50 bg-white shadow-lg">
             <div className="flex h-full flex-col divide-y divide-gray-100 bg-white">
                 <header className="flex content-center items-center p-4 text-lg font-medium">
                     <span>Data Pill Panel</span>
@@ -87,7 +87,7 @@ const DataPillPanel = ({
                 </header>
 
                 <main className="flex w-full grow flex-col">
-                    <div className="mb-0 border-b border-muted p-4">
+                    <div className="mb-0 border-b border-b-border/50 p-4">
                         <Input
                             name="dataPillFilter"
                             onChange={(event) => setDataPillFilterQuery(event.target.value)}
diff --git a/client/src/pages/platform/workflow-editor/components/DataPillPanelBodyInputsItem.tsx b/client/src/pages/platform/workflow-editor/components/DataPillPanelBodyInputsItem.tsx
index dcfec62670..025c21cbc8 100644
--- a/client/src/pages/platform/workflow-editor/components/DataPillPanelBodyInputsItem.tsx
+++ b/client/src/pages/platform/workflow-editor/components/DataPillPanelBodyInputsItem.tsx
@@ -10,7 +10,7 @@ const DataPillPanelBodyInputsItem = () => {
 
     return workflow.inputs && workflow.inputs.length > 0 ? (
         <>
-            <AccordionTrigger className="group flex w-full items-center justify-between border-muted bg-background p-4 group-data-[state=closed]:border-b">
+            <AccordionTrigger className="group flex w-full items-center justify-between border-border/50 bg-background p-4 group-data-[state=closed]:border-b">
                 <div className="flex items-center space-x-4">
                     <div className="flex size-5 items-center">
                         <FormInputIcon />
@@ -21,8 +21,8 @@ const DataPillPanelBodyInputsItem = () => {
 
                 <ChevronDownIcon className="size-5 text-gray-400 transition-transform duration-300 group-data-[state=open]:rotate-180" />
             </AccordionTrigger>
-            <AccordionContent className="size-full space-y-2 border-b border-muted px-4 pb-4">
-                <ul className="flex w-full flex-col space-y-2 border-l pl-4 group-data-[state=open]:h-full">
+            <AccordionContent className="size-full space-y-2 border-b border-b-border/50 px-4 pb-4">
+                <ul className="flex w-full flex-col space-y-2 border-l border-l-border/50 pl-4 group-data-[state=open]:h-full">
                     {workflow.inputs?.map((input) => {
                         return (
                             <div className="flex items-center space-x-3" key={input.name}>
diff --git a/client/src/pages/platform/workflow-editor/components/DataPillPanelBodyPropertiesItem.tsx b/client/src/pages/platform/workflow-editor/components/DataPillPanelBodyPropertiesItem.tsx
index 4b801ed4c7..d92de9efa4 100644
--- a/client/src/pages/platform/workflow-editor/components/DataPillPanelBodyPropertiesItem.tsx
+++ b/client/src/pages/platform/workflow-editor/components/DataPillPanelBodyPropertiesItem.tsx
@@ -52,7 +52,7 @@ const DataPillPanelBodyPropertiesItem = ({
     return (
         <>
             <AccordionTrigger
-                className="group flex w-full items-center justify-between border-muted bg-background p-4 group-data-[state=closed]:border-b"
+                className="group flex w-full items-center justify-between border-border/50 bg-background p-4 group-data-[state=closed]:border-b"
                 key={`accordion-trigger-${workflowNodeName}`}
             >
                 <div className="flex items-center space-x-4">
@@ -77,7 +77,7 @@ const DataPillPanelBodyPropertiesItem = ({
             </AccordionTrigger>
 
             <AccordionContent
-                className="size-full space-y-2 border-b border-muted px-4 pb-4"
+                className="size-full space-y-2 border-b border-b-border/50 px-4 pb-4"
                 key={`accordion-content-${workflowNodeName}`}
             >
                 {outputSchema ? (
@@ -90,7 +90,7 @@ const DataPillPanelBodyPropertiesItem = ({
                             workflowNodeName={workflowNodeName}
                         />
 
-                        <ul className="flex w-full flex-col space-y-2 border-l pl-4 group-data-[state=open]:h-full">
+                        <ul className="flex w-full flex-col space-y-2 border-l border-l-border/50 pl-4 group-data-[state=open]:h-full">
                             {filteredProperties?.map((property) => {
                                 let value;
 
diff --git a/client/src/pages/platform/workflow-editor/components/Properties/ArrayProperty.tsx b/client/src/pages/platform/workflow-editor/components/Properties/ArrayProperty.tsx
index c480b93541..cf00477557 100644
--- a/client/src/pages/platform/workflow-editor/components/Properties/ArrayProperty.tsx
+++ b/client/src/pages/platform/workflow-editor/components/Properties/ArrayProperty.tsx
@@ -238,7 +238,7 @@ const ArrayProperty = ({onDeleteClick, path, property}: ArrayPropertyProps) => {
 
     return (
         <Fragment key={`${path}_${name}_arrayProperty`}>
-            <ul className="ml-2 flex flex-col space-y-4 border-l">
+            <ul className="ml-2 flex flex-col space-y-4 border-l border-l-border/50">
                 {arrayItems?.map((arrayItem, index) =>
                     Array.isArray(arrayItem) ? (
                         arrayItem.map((subItem: ArrayPropertyType, subItemIndex: number) => (
diff --git a/client/src/pages/platform/workflow-editor/components/Properties/ObjectProperty.tsx b/client/src/pages/platform/workflow-editor/components/Properties/ObjectProperty.tsx
index efab7e2ee4..65e77602ea 100644
--- a/client/src/pages/platform/workflow-editor/components/Properties/ObjectProperty.tsx
+++ b/client/src/pages/platform/workflow-editor/components/Properties/ObjectProperty.tsx
@@ -179,7 +179,7 @@ const ObjectProperty = ({arrayIndex, arrayName, onDeleteClick, operationName, pa
             <ul
                 className={twMerge(
                     'space-y-4',
-                    label && !isContainerObject && 'ml-2 border-l',
+                    label && !isContainerObject && 'ml-2 border-l border-l-border/50',
                     arrayName && !isContainerObject && 'pl-2'
                 )}
             >
diff --git a/client/src/pages/platform/workflow-editor/components/Properties/components/PropertyCodeEditor/PropertyCodeEditorSheet.tsx b/client/src/pages/platform/workflow-editor/components/Properties/components/PropertyCodeEditor/PropertyCodeEditorSheet.tsx
index a24b2c8c87..09f62d9c09 100644
--- a/client/src/pages/platform/workflow-editor/components/Properties/components/PropertyCodeEditor/PropertyCodeEditorSheet.tsx
+++ b/client/src/pages/platform/workflow-editor/components/Properties/components/PropertyCodeEditor/PropertyCodeEditorSheet.tsx
@@ -170,7 +170,7 @@ const PropertyCodeEditorSheet = ({
                             </ResizablePanel>
                         </ResizablePanelGroup>
 
-                        <div className="flex border-l">
+                        <div className="flex border-l border-l-border/50">
                             <RightSidebar
                                 className="bg-transparent"
                                 navigation={[
@@ -185,7 +185,7 @@ const PropertyCodeEditorSheet = ({
                     </div>
 
                     {showConnections && (
-                        <div className="w-80 border-l">
+                        <div className="w-80 border-l border-l-border/50">
                             <PropertyCodeEditorSheetConnectionsSheet
                                 onCLose={() => setShowConnections(false)}
                                 workflow={workflow}
diff --git a/client/src/pages/platform/workflow-editor/components/SchemaProperties.tsx b/client/src/pages/platform/workflow-editor/components/SchemaProperties.tsx
index b7176fa56b..f585c84e1b 100644
--- a/client/src/pages/platform/workflow-editor/components/SchemaProperties.tsx
+++ b/client/src/pages/platform/workflow-editor/components/SchemaProperties.tsx
@@ -38,7 +38,7 @@ const SchemaProperties = ({
                     />
 
                     {properties && !!properties.length && (
-                        <div className="ml-3 flex flex-col overflow-y-auto border-l border-gray-200 pl-1" key={name}>
+                        <div className="ml-3 flex flex-col overflow-y-auto border-l border-l-border/50 pl-1" key={name}>
                             <SchemaProperties
                                 copiedValue={copiedValue}
                                 copyToClipboard={copyToClipboard}
@@ -51,7 +51,7 @@ const SchemaProperties = ({
                     )}
 
                     {items && !!items.length && (
-                        <div className="ml-3 flex flex-col overflow-y-auto border-l border-gray-200 pl-1" key={name}>
+                        <div className="ml-3 flex flex-col overflow-y-auto border-l border-l-border/50 pl-1" key={name}>
                             <SchemaProperties
                                 copiedValue={copiedValue}
                                 copyToClipboard={copyToClipboard}
diff --git a/client/src/pages/platform/workflow-editor/components/WorkflowInputsSheetTable.tsx b/client/src/pages/platform/workflow-editor/components/WorkflowInputsSheetTable.tsx
index 01fcc72e8c..07dcb957af 100644
--- a/client/src/pages/platform/workflow-editor/components/WorkflowInputsSheetTable.tsx
+++ b/client/src/pages/platform/workflow-editor/components/WorkflowInputsSheetTable.tsx
@@ -64,7 +64,7 @@ const WorkflowInputsSheetTable = ({
             {workflow.inputs && workflow.inputs.length > 0 ? (
                 <Table>
                     <TableHeader>
-                        <TableRow>
+                        <TableRow className="border-b-border/50">
                             <TableHead>Name</TableHead>
 
                             <TableHead>Label</TableHead>
@@ -84,7 +84,7 @@ const WorkflowInputsSheetTable = ({
                     <TableBody>
                         {workflow.inputs &&
                             workflow.inputs.map((input, index) => (
-                                <TableRow key={input.name}>
+                                <TableRow className="cursor-pointer border-b-border/50" key={input.name}>
                                     <TableCell>{input.name}</TableCell>
 
                                     <TableCell>{input.label}</TableCell>
diff --git a/client/src/pages/platform/workflow-editor/components/WorkflowNodeDetailsPanel.tsx b/client/src/pages/platform/workflow-editor/components/WorkflowNodeDetailsPanel.tsx
index a1dd481964..6547530a68 100644
--- a/client/src/pages/platform/workflow-editor/components/WorkflowNodeDetailsPanel.tsx
+++ b/client/src/pages/platform/workflow-editor/components/WorkflowNodeDetailsPanel.tsx
@@ -516,7 +516,7 @@ const WorkflowNodeDetailsPanel = ({
 
     return (
         <div
-            className="absolute inset-y-4 right-4 z-10 w-screen max-w-workflow-node-details-panel-width overflow-hidden rounded-xl border border-muted bg-white shadow-lg"
+            className="absolute inset-y-4 right-4 z-10 w-screen max-w-workflow-node-details-panel-width overflow-hidden rounded-xl border border-border/50 bg-white shadow-lg"
             key={currentNode?.name}
         >
             <div className="flex h-full flex-col divide-y divide-gray-100 bg-white">
diff --git a/client/src/pages/platform/workflow-editor/components/WorkflowNodesPopoverMenuOperationList.tsx b/client/src/pages/platform/workflow-editor/components/WorkflowNodesPopoverMenuOperationList.tsx
index 251f09922e..3f061861f9 100644
--- a/client/src/pages/platform/workflow-editor/components/WorkflowNodesPopoverMenuOperationList.tsx
+++ b/client/src/pages/platform/workflow-editor/components/WorkflowNodesPopoverMenuOperationList.tsx
@@ -280,7 +280,7 @@ const WorkflowNodesPopoverMenuOperationList = ({
     };
 
     return (
-        <div className="flex w-workflow-nodes-popover-actions-menu-width flex-col rounded-r-lg border-l">
+        <div className="flex w-workflow-nodes-popover-actions-menu-width flex-col rounded-r-lg border-l border-l-border/50">
             <header className="flex items-center space-x-2 rounded-tr-lg bg-white px-3 py-1.5">
                 {icon ? (
                     <InlineSVG className="size-8" loader={<ComponentIcon className="size-8" />} src={icon} />
diff --git a/client/src/pages/platform/workflow-editor/components/WorkflowNodesSidebar.tsx b/client/src/pages/platform/workflow-editor/components/WorkflowNodesSidebar.tsx
index cf2d11f644..3890d276b4 100644
--- a/client/src/pages/platform/workflow-editor/components/WorkflowNodesSidebar.tsx
+++ b/client/src/pages/platform/workflow-editor/components/WorkflowNodesSidebar.tsx
@@ -57,7 +57,7 @@ const WorkflowNodesSidebar = ({
     }, [componentDefinitions, filter, taskDispatcherDefinitions]);
 
     return (
-        <div className="flex h-full flex-col border-l border-muted bg-background">
+        <div className="flex h-full flex-col border-l border-l-border/50 bg-background">
             <header className="p-3 text-center text-gray-600">
                 <Input
                     name="workflowNodeFilter"
diff --git a/client/src/pages/platform/workflow-editor/components/WorkflowOutputsSheetTable.tsx b/client/src/pages/platform/workflow-editor/components/WorkflowOutputsSheetTable.tsx
index 037db12aa9..833c4ea529 100644
--- a/client/src/pages/platform/workflow-editor/components/WorkflowOutputsSheetTable.tsx
+++ b/client/src/pages/platform/workflow-editor/components/WorkflowOutputsSheetTable.tsx
@@ -63,7 +63,7 @@ const WorkflowOutputsSheetTable = ({workflow}: {workflow: Workflow}) => {
             {workflow.outputs && workflow.outputs.length > 0 ? (
                 <Table>
                     <TableHeader>
-                        <TableRow>
+                        <TableRow className="border-b-border/50">
                             <TableHead>Name</TableHead>
 
                             <TableHead>Value</TableHead>
@@ -77,7 +77,7 @@ const WorkflowOutputsSheetTable = ({workflow}: {workflow: Workflow}) => {
                     <TableBody>
                         {workflow.outputs &&
                             workflow.outputs.map((output, index) => (
-                                <TableRow key={output.name}>
+                                <TableRow className="cursor-pointer border-b-border/50" key={output.name}>
                                     <TableCell>{output.name}</TableCell>
 
                                     <TableCell>
diff --git a/client/src/pages/platform/workflow-editor/components/node-details-tabs/OutputTab.tsx b/client/src/pages/platform/workflow-editor/components/node-details-tabs/OutputTab.tsx
index 7dc95076fa..cb8fa9a3cf 100644
--- a/client/src/pages/platform/workflow-editor/components/node-details-tabs/OutputTab.tsx
+++ b/client/src/pages/platform/workflow-editor/components/node-details-tabs/OutputTab.tsx
@@ -166,7 +166,7 @@ const OutputTab = ({connectionMissing, currentNode, outputDefined = false, workf
                     )}
 
                     {(outputSchema as PropertyAllType)?.items && sampleOutput && (
-                        <div className="ml-3 flex flex-col overflow-y-auto border-l border-gray-200 pl-1">
+                        <div className="ml-3 flex flex-col overflow-y-auto border-l border-l-border/50 pl-1">
                             <SchemaProperties
                                 copiedValue={copiedValue}
                                 copyToClipboard={copyToClipboard}
diff --git a/client/src/pages/settings/embedded/signing-keys/components/SigningKeyTable.tsx b/client/src/pages/settings/embedded/signing-keys/components/SigningKeyTable.tsx
index 30fe37b934..36987ebdb9 100644
--- a/client/src/pages/settings/embedded/signing-keys/components/SigningKeyTable.tsx
+++ b/client/src/pages/settings/embedded/signing-keys/components/SigningKeyTable.tsx
@@ -160,7 +160,7 @@ const SigningKeyTable = ({signingKeys}: SigningKeyTableProps) => {
             <Table>
                 <TableHeader>
                     {headerGroups.map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
+                        <TableRow className="border-b-border/50" key={headerGroup.id}>
                             {headerGroup.headers.map((header) => (
                                 <TableHead
                                     className="sticky top-0 z-10 bg-white p-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500"
@@ -174,9 +174,9 @@ const SigningKeyTable = ({signingKeys}: SigningKeyTableProps) => {
                     ))}
                 </TableHeader>
 
-                <TableBody className="divide-y divide-gray-200 bg-white">
+                <TableBody>
                     {rows.map((row) => (
-                        <TableRow className="cursor-pointer" key={row.id}>
+                        <TableRow className="cursor-pointer border-b-border/50" key={row.id}>
                             {row.getVisibleCells().map((cell) => (
                                 <TableCell
                                     className={twMerge(
diff --git a/client/src/shared/layout/LayoutContainer.tsx b/client/src/shared/layout/LayoutContainer.tsx
index 7a9d541cde..4ead7d08b7 100644
--- a/client/src/shared/layout/LayoutContainer.tsx
+++ b/client/src/shared/layout/LayoutContainer.tsx
@@ -87,7 +87,7 @@ const LayoutContainer = ({
             {leftSidebarOpen && (
                 <aside
                     className={twMerge(
-                        'hidden lg:flex lg:flex-col border-r bg-muted/50',
+                        'hidden lg:flex lg:flex-col border-r border-r-border/50 bg-muted/50',
                         'lg:fixed lg:inset-y-0',
                         leftSidebarClass,
                         leftSidebarWidths[leftSidebarWidth][0]
diff --git a/client/src/shared/layout/desktop-sidebar/DesktopSidebar.tsx b/client/src/shared/layout/desktop-sidebar/DesktopSidebar.tsx
index aa933caebf..af775068ae 100644
--- a/client/src/shared/layout/desktop-sidebar/DesktopSidebar.tsx
+++ b/client/src/shared/layout/desktop-sidebar/DesktopSidebar.tsx
@@ -33,7 +33,7 @@ export function DesktopSidebar({
 
     return (
         <aside className={twMerge('hidden bg-muted lg:flex lg:shrink-0', className)}>
-            <div className="flex w-sidebar-width border-r bg-muted">
+            <div className="flex w-sidebar-width border-r border-r-border/50 bg-muted">
                 <div className="flex min-h-0 flex-1 flex-col">
                     <div className="flex-1">
                         <div className="flex items-center justify-center py-4">