diff --git a/.changeset/sources-separator-click-ui.md b/.changeset/sources-separator-click-ui.md
new file mode 100644
index 0000000000..b4fdf8ad14
--- /dev/null
+++ b/.changeset/sources-separator-click-ui.md
@@ -0,0 +1,6 @@
+---
+'@hyperdx/app': patch
+---
+
+refactor: use the click-ui `Separator` instead of the Mantine `Divider` in the
+source form and the sources list.
diff --git a/packages/app/src/components/Sources/SourceForm/LogTableModelForm.tsx b/packages/app/src/components/Sources/SourceForm/LogTableModelForm.tsx
index a6bddd67fe..b936c352f3 100644
--- a/packages/app/src/components/Sources/SourceForm/LogTableModelForm.tsx
+++ b/packages/app/src/components/Sources/SourceForm/LogTableModelForm.tsx
@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { useWatch } from 'react-hook-form';
+import { Separator } from '@clickhouse/click-ui';
 import { SourceKind } from '@hyperdx/common-utils/dist/types';
-import { Anchor, Box, Button, Divider, Group, Stack } from '@mantine/core';
+import { Anchor, Box, Button, Group, Stack } from '@mantine/core';
 import { IconSettings } from '@tabler/icons-react';
 
 import { useBrandDisplayName } from '@/brand';
@@ -110,7 +111,7 @@ export function LogTableModelForm(props: TableModelProps) {
           display: showOptionalFields ? 'flex' : 'none',
         }}
       >
-        <Divider />
+        <Separator size="xs" />
         <ExpressionFormRow
           control={control}
           setValue={setValue}
@@ -209,7 +210,7 @@ export function LogTableModelForm(props: TableModelProps) {
             disableKeywordAutocomplete
           />
         </FormRow>
-        <Divider />
+        <Separator size="xs" />
         <FormRow
           label={'Correlated Metric Source'}
           helpText={`${brandName} Source for metrics associated with logs. Optional`}
@@ -244,7 +245,7 @@ export function LogTableModelForm(props: TableModelProps) {
           tableConnection={tableConnection}
         />
 
-        <Divider />
+        <Separator size="xs" />
         {/* <FormRow label={'Table Filter Expression'}>
           <SQLInlineEditorControlled
             tableConnection={{
@@ -285,7 +286,7 @@ export function LogTableModelForm(props: TableModelProps) {
           />
         </FormRow>
         <UseTextIndexFormRow control={control} />
-        <Divider />
+        <Separator size="xs" />
         <HighlightedAttributeExpressionsFormRow
           {...props}
           name="highlightedRowAttributeExpressions"
@@ -298,11 +299,11 @@ export function LogTableModelForm(props: TableModelProps) {
           label="Highlighted Trace Attributes"
           helpText="Expressions defining trace-level attributes which are displayed in the trace view for the selected trace."
         />
-        <Divider />
+        <Separator size="xs" />
         <MaterializedViewsFormSection {...props} />
-        <Divider />
+        <Separator size="xs" />
         <MetadataMaterializedViewsFormSection {...props} />
-        <Divider />
+        <Separator size="xs" />
         <OrderByFormRow
           control={control}
           databaseName={databaseName}
diff --git a/packages/app/src/components/Sources/SourceForm/MaterializedViews.tsx b/packages/app/src/components/Sources/SourceForm/MaterializedViews.tsx
index 2927d77e50..43290b5d7e 100644
--- a/packages/app/src/components/Sources/SourceForm/MaterializedViews.tsx
+++ b/packages/app/src/components/Sources/SourceForm/MaterializedViews.tsx
@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { Controller, useFieldArray, useWatch } from 'react-hook-form';
+import { Separator } from '@clickhouse/click-ui';
 import { SourceKind } from '@hyperdx/common-utils/dist/types';
 import {
   ActionIcon,
   Box,
   Button,
-  Divider,
   Flex,
   Grid,
   Group,
@@ -349,7 +349,7 @@ function MaterializedViewFormSection({
         mvIndex={mvIndex}
         setValue={setValue}
       />
-      <Divider />
+      <Separator size="xs" />
     </Stack>
   );
 }
diff --git a/packages/app/src/components/Sources/SourceForm/TraceTableModelForm.tsx b/packages/app/src/components/Sources/SourceForm/TraceTableModelForm.tsx
index b60459b02c..47265e50e9 100644
--- a/packages/app/src/components/Sources/SourceForm/TraceTableModelForm.tsx
+++ b/packages/app/src/components/Sources/SourceForm/TraceTableModelForm.tsx
@@ -1,6 +1,7 @@
 import { Controller, useWatch } from 'react-hook-form';
+import { Separator } from '@clickhouse/click-ui';
 import { SourceKind } from '@hyperdx/common-utils/dist/types';
-import { Box, Divider, Slider, Stack } from '@mantine/core';
+import { Box, Slider, Stack } from '@mantine/core';
 
 import { useBrandDisplayName } from '@/brand';
 import { SourceSelectControlled } from '@/components/SourceSelect';
@@ -74,7 +75,7 @@ export function TraceTableModelForm(props: TableModelProps) {
           placeholder="Timestamp, ServiceName, StatusCode, Duration, SpanName"
         />
       </FormRow>
-      <Divider />
+      <Separator size="xs" />
       <FormRow label={'Duration Expression'}>
         <SQLInlineEditorControlled
           tableConnection={{
@@ -222,7 +223,7 @@ export function TraceTableModelForm(props: TableModelProps) {
           placeholder="SpanKind"
         />
       </FormRow>
-      <Divider />
+      <Separator size="xs" />
       <FormRow
         label={'Correlated Log Source'}
         helpText={`${brandName} Source for logs associated with traces. Optional`}
@@ -394,7 +395,7 @@ export function TraceTableModelForm(props: TableModelProps) {
           disableKeywordAutocomplete
         />
       </FormRow>
-      <Divider />
+      <Separator size="xs" />
       <HighlightedAttributeExpressionsFormRow
         {...props}
         name="highlightedRowAttributeExpressions"
@@ -407,11 +408,11 @@ export function TraceTableModelForm(props: TableModelProps) {
         label="Highlighted Trace Attributes"
         helpText="Expressions defining trace-level attributes which are displayed in the trace view for the selected trace."
       />
-      <Divider />
+      <Separator size="xs" />
       <MaterializedViewsFormSection {...props} />
-      <Divider />
+      <Separator size="xs" />
       <MetadataMaterializedViewsFormSection {...props} />
-      <Divider />
+      <Separator size="xs" />
       <OrderByFormRow
         control={control}
         databaseName={databaseName}
diff --git a/packages/app/src/components/Sources/SourcesList.tsx b/packages/app/src/components/Sources/SourcesList.tsx
index 4a981f189a..89fe1a635e 100644
--- a/packages/app/src/components/Sources/SourcesList.tsx
+++ b/packages/app/src/components/Sources/SourcesList.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
-import { Badge } from '@clickhouse/click-ui';
+import { Badge, Separator } from '@clickhouse/click-ui';
 import { SourceKind } from '@hyperdx/common-utils/dist/types';
 import {
   ActionIcon,
@@ -8,7 +8,6 @@ import {
   Box,
   Button,
   Card,
-  Divider,
   Flex,
   Group,
   Loader,
@@ -257,13 +256,13 @@ export function SourcesList({
                 />
               </Box>
             )}
-            {index < (sources?.length ?? 0) - 1 && <Divider />}
+            {index < (sources?.length ?? 0) - 1 && <Separator size="xs" />}
           </React.Fragment>
         ))}
 
         {isCreatingSource && (
           <>
-            {sources && sources.length > 0 && <Divider />}
+            {sources && sources.length > 0 && <Separator size="xs" />}
             <TableSourceForm
               isNew
               onCreate={() => setIsCreatingSource(false)}