diff --git a/apps/design-system/src/components/docs-page/code-block.tsx b/apps/design-system/src/components/docs-page/code-block.tsx
new file mode 100644
index 000000000..29e67d052
--- /dev/null
+++ b/apps/design-system/src/components/docs-page/code-block.tsx
@@ -0,0 +1,20 @@
+import { FC } from 'react'
+
+import { MarkdownViewer } from '@harnessio/ui/components'
+
+export interface CodeBlockProps {
+  code: string
+  language?: string
+}
+
+const CodeBlock: FC<CodeBlockProps> = ({ code, language = 'typescript tsx' }) => (
+  <MarkdownViewer
+    source={`
+\`\`\`${language}
+${code}
+\`\`\`
+`}
+  />
+)
+
+export default CodeBlock
diff --git a/apps/design-system/src/components/docs-page/docs-page.tsx b/apps/design-system/src/components/docs-page/docs-page.tsx
index 42fd1bddc..5f3bdaf0b 100644
--- a/apps/design-system/src/components/docs-page/docs-page.tsx
+++ b/apps/design-system/src/components/docs-page/docs-page.tsx
@@ -1,13 +1,19 @@
+import CodeBlock from './code-block.tsx'
 import ComponentExample from './component-example'
 import Example from './example'
+import PropsTable from './props-table.tsx'
 import Root from './root'
 import Section from './section'
+import SubSection from './sub-section.tsx'
 import Summary from './summary'
 
 export const DocsPage = {
   Root,
   Summary,
   Section,
+  SubSection,
   Example,
-  ComponentExample
+  ComponentExample,
+  CodeBlock,
+  PropsTable
 }
diff --git a/apps/design-system/src/components/docs-page/props-table.tsx b/apps/design-system/src/components/docs-page/props-table.tsx
new file mode 100644
index 000000000..8b8aeb204
--- /dev/null
+++ b/apps/design-system/src/components/docs-page/props-table.tsx
@@ -0,0 +1,37 @@
+import { FC } from 'react'
+
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@harnessio/ui/components'
+
+interface PropDescription {
+  name: string
+  required?: boolean
+  defaultValue?: string
+  description?: string
+}
+
+export interface PropsTableProps {
+  props: PropDescription[]
+}
+
+const PropsTable: FC<PropsTableProps> = ({ props }) => (
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Prop</TableHead>
+        <TableHead>Required</TableHead>
+        <TableHead>Default</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      {props.map(({ name, required, defaultValue, description }) => (
+        <TableRow key={name}>
+          <TableCell title={description}>{name}</TableCell>
+          <TableCell>{required ? 'yup' : 'nope'}</TableCell>
+          <TableCell>{defaultValue}</TableCell>
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+)
+
+export default PropsTable
diff --git a/apps/design-system/src/components/docs-page/section.module.css b/apps/design-system/src/components/docs-page/section.module.css
new file mode 100644
index 000000000..ae4721f4d
--- /dev/null
+++ b/apps/design-system/src/components/docs-page/section.module.css
@@ -0,0 +1,5 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
diff --git a/apps/design-system/src/components/docs-page/section.tsx b/apps/design-system/src/components/docs-page/section.tsx
index 395cdc7b7..0d7d92a0a 100644
--- a/apps/design-system/src/components/docs-page/section.tsx
+++ b/apps/design-system/src/components/docs-page/section.tsx
@@ -2,13 +2,15 @@ import { FC, PropsWithChildren, ReactNode } from 'react'
 
 import { Text } from '@harnessio/ui/components'
 
+import css from './section.module.css'
+
 export interface SectionProps extends PropsWithChildren {
   title: string
   description?: ReactNode
 }
 
 const Section: FC<SectionProps> = ({ title, description, children }) => (
-  <section>
+  <section className={css.section}>
     <Text as="h3" size={5}>
       {title}
     </Text>
diff --git a/apps/design-system/src/components/docs-page/sub-section.tsx b/apps/design-system/src/components/docs-page/sub-section.tsx
new file mode 100644
index 000000000..90db2c3a6
--- /dev/null
+++ b/apps/design-system/src/components/docs-page/sub-section.tsx
@@ -0,0 +1,22 @@
+import { FC, PropsWithChildren, ReactNode } from 'react'
+
+import { Text } from '@harnessio/ui/components'
+
+import css from './section.module.css'
+
+export interface SubSectionProps extends PropsWithChildren {
+  title: string
+  description?: ReactNode
+}
+
+const SubSection: FC<SubSectionProps> = ({ title, description, children }) => (
+  <section className={css.section}>
+    <Text as="h4" size={4}>
+      {title}
+    </Text>
+    {description}
+    {children}
+  </section>
+)
+
+export default SubSection
diff --git a/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx
index 31551abd9..57549ac17 100644
--- a/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx
+++ b/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx
@@ -3,16 +3,7 @@ import { Outlet, Route, Routes } from 'react-router-dom'
 
 import { noop, useThemeStore, useTranslationsStore } from '@utils/viewUtils'
 
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbSeparator,
-  Navbar,
-  NavbarItemType,
-  Topbar
-} from '@harnessio/ui/components'
+import { Breadcrumb, Navbar, NavbarItemType, Topbar } from '@harnessio/ui/components'
 import { SandboxLayout } from '@harnessio/ui/views'
 
 const RootViewWrapper: FC<PropsWithChildren<{ asChild?: boolean }>> = ({ children, asChild = false }) => {
@@ -62,19 +53,19 @@ const RootViewWrapper: FC<PropsWithChildren<{ asChild?: boolean }>> = ({ childre
               <div className="bg-background-1 sticky top-0 z-40">
                 <Topbar.Root>
                   <Topbar.Left>
-                    <Breadcrumb className="select-none">
-                      <BreadcrumbList>
-                        <BreadcrumbItem>
-                          <BreadcrumbLink href="#">Lorem</BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator />
-                        <BreadcrumbItem>
-                          <BreadcrumbLink href="#">Ipsum</BreadcrumbLink>
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator />
-                        <BreadcrumbItem>Dolor</BreadcrumbItem>
-                      </BreadcrumbList>
-                    </Breadcrumb>
+                    <Breadcrumb.Root className="select-none">
+                      <Breadcrumb.List>
+                        <Breadcrumb.Item>
+                          <Breadcrumb.Link href="#">Lorem</Breadcrumb.Link>
+                        </Breadcrumb.Item>
+                        <Breadcrumb.Separator />
+                        <Breadcrumb.Item>
+                          <Breadcrumb.Link href="#">Ipsum</Breadcrumb.Link>
+                        </Breadcrumb.Item>
+                        <Breadcrumb.Separator />
+                        <Breadcrumb.Item>Dolor</Breadcrumb.Item>
+                      </Breadcrumb.List>
+                    </Breadcrumb.Root>
                   </Topbar.Left>
                 </Topbar.Root>
               </div>
diff --git a/apps/design-system/src/subjects/components/breadcrumb.tsx b/apps/design-system/src/subjects/components/breadcrumb.tsx
new file mode 100644
index 000000000..35d393157
--- /dev/null
+++ b/apps/design-system/src/subjects/components/breadcrumb.tsx
@@ -0,0 +1,170 @@
+import { DocsPage } from '@components/docs-page/docs-page'
+
+const BreadcrumbComponent = () => (
+  <DocsPage.Root>
+    <DocsPage.Summary title="Breadcrumb">
+      <p>
+        A breadcrumbs is a list of links that help visualize the location of a page within the hierarchical structure of
+        a site, it allows navigation up to any of the ancestors.
+      </p>
+    </DocsPage.Summary>
+
+    <DocsPage.ComponentExample
+      code={`
+  <Breadcrumb.Root className="select-none">
+    <Breadcrumb.List>
+      <Breadcrumb.Item>
+        <Breadcrumb.Link href="#">Lorem</Breadcrumb.Link>
+      </Breadcrumb.Item>
+      <Breadcrumb.Separator />
+      <Breadcrumb.Ellipsis />
+      <Breadcrumb.Separator />
+      <Breadcrumb.Item>
+        <Breadcrumb.Link href="#">Ipsum</Breadcrumb.Link>
+      </Breadcrumb.Item>
+      <Breadcrumb.Separator />
+      <Breadcrumb.Page>Dolor</Breadcrumb.Page>
+    </Breadcrumb.List>
+  </Breadcrumb.Root>
+    `}
+    />
+
+    <DocsPage.Section title="Anatomy">
+      <p>All parts of the breadcrumb can be imported and composed as required.</p>
+
+      <DocsPage.CodeBlock
+        code={`<Breadcrumb.Root className="select-none">
+  <Breadcrumb.List>
+    <Breadcrumb.Item>
+      <Breadcrumb.Link href="#">Lorem</Breadcrumb.Link>
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Ellipsis />
+    <Breadcrumb.Separator />
+    <Breadcrumb.Item>
+      <Breadcrumb.Link href="#">Ipsum</Breadcrumb.Link>
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Page>Dolor</Breadcrumb.Page>
+  </Breadcrumb.List>
+</Breadcrumb.Root>`}
+      />
+    </DocsPage.Section>
+
+    <DocsPage.Section title="API Reference">
+      <DocsPage.SubSection title="Root">
+        <p>The `Root` component wraps the breadcrumb with a `nav` tag for use as page navigation.</p>
+        <DocsPage.PropsTable
+          props={[
+            { name: 'children', description: 'You can pass in your `Breadcrumb.List` as a child', required: true },
+            { name: 'className', required: false }
+          ]}
+        />
+      </DocsPage.SubSection>
+
+      <DocsPage.SubSection title="List">
+        <p>The `List` component adds styling to ensure the breadcrumb is displayed inline as a list.</p>
+        <DocsPage.CodeBlock
+          code={`<Breadcrumb.List>
+  {/* Pass Breadcrumb.Item, Breadcrumb.Separator and Breadcrumb.Page elements as children */}
+</Breadcrumb.List>`}
+        />
+        <DocsPage.PropsTable
+          props={[
+            { name: 'children', description: 'You can pass in your `Breadcrumb.Item`s as children', required: true },
+            { name: 'className', required: false }
+          ]}
+        />
+      </DocsPage.SubSection>
+
+      <DocsPage.SubSection title="Item">
+        <p>The `Item` component displays its contents as a node within the breadcrumb.</p>
+        <DocsPage.CodeBlock
+          code={`<Breadcrumb.Item>
+  {/* Pass text, JSX elements or Breadcrumb.Link elements as children */}
+</Breadcrumb.Item>`}
+        />
+        <DocsPage.PropsTable
+          props={[
+            { name: 'children', description: 'Content to display', required: true },
+            { name: 'className', required: false }
+          ]}
+        />
+      </DocsPage.SubSection>
+
+      <DocsPage.SubSection title="Link">
+        <p>
+          The `Link` component can be passed as a child to an `Item` component to display a clickable breadcrumb item.
+        </p>
+        <DocsPage.CodeBlock
+          code={`<Breadcrumb.Item>
+  <Breadcrumb.Link href="#">
+    Lorem
+  </Breadcrumb.Link>
+</Breadcrumb.Item>
+
+<Breadcrumb.Item>
+  <Breadcrumb.Link asChild>
+    <button onClick={handleLinkClick}>Click me</button>
+  </Breadcrumb.Link>
+</Breadcrumb.Item>`}
+        />
+        <DocsPage.PropsTable
+          props={[
+            { name: 'href', description: 'Where to link to' },
+            { name: 'children', description: 'Content to display in the link', required: true },
+            {
+              name: 'asChild',
+              description: 'Render using the passed child element instead of as an anchor element',
+              defaultValue: 'false'
+            },
+            { name: 'className' }
+          ]}
+        />
+      </DocsPage.SubSection>
+
+      <DocsPage.SubSection title="Page">
+        <p>
+          The `Page` component displays its contents as a node within the breadcrumb with styling to denote that it is
+          the current page.
+        </p>
+        <DocsPage.CodeBlock code={`<Breadcrumb.Page>Lorem ipsum</Breadcrumb.Page>`} />
+        <DocsPage.PropsTable
+          props={[
+            { name: 'children', description: 'Content to display', required: true },
+            { name: 'className', required: false }
+          ]}
+        />
+      </DocsPage.SubSection>
+
+      <DocsPage.SubSection title="Separator">
+        <p>The `Separator` component displays a separator between the items of the breadcrumb.</p>
+        <DocsPage.CodeBlock
+          code={`<Breadcrumb.Separator />
+
+<Breadcrumb.Item>
+  Lorem ipsum
+</Breadcrumb.Item>
+
+<Breadcrumb.Separator>
+  &gt;
+</Breadcrumb.Separator>`}
+        />
+        <DocsPage.PropsTable
+          props={[
+            { name: 'children', description: 'Content to display', defaultValue: '/' },
+            { name: 'className', required: false }
+          ]}
+        />
+      </DocsPage.SubSection>
+
+      <DocsPage.SubSection title="Ellipsis">
+        <p>The `Ellipsis` component displays an ellipsis for use when there are too many items to display.</p>
+        <DocsPage.CodeBlock code={`<Breadcrumb.Ellipsis />`} />
+        <DocsPage.PropsTable props={[{ name: 'className', required: false }]} />
+      </DocsPage.SubSection>
+    </DocsPage.Section>
+  </DocsPage.Root>
+)
+
+export default BreadcrumbComponent
diff --git a/apps/design-system/src/subjects/components/componentPages.ts b/apps/design-system/src/subjects/components/componentPages.ts
index e145a7e8e..12dbeedab 100644
--- a/apps/design-system/src/subjects/components/componentPages.ts
+++ b/apps/design-system/src/subjects/components/componentPages.ts
@@ -1,8 +1,9 @@
 import type { RouteProps } from 'react-router-dom'
 
-import AlertComponent from '@subjects/components/alert'
-import BadgeComponent from '@subjects/components/badge'
-import ButtonComponent from '@subjects/components/button'
+import AlertComponent from './alert'
+import BadgeComponent from './badge'
+import BreadcrumbComponent from './breadcrumb'
+import ButtonComponent from './button'
 
 interface ComponentPage {
   name: string
@@ -13,5 +14,6 @@ interface ComponentPage {
 export const componentPages: ComponentPage[] = [
   { name: 'Alert', path: 'alert', Component: AlertComponent },
   { name: 'Badge', path: 'badge', Component: BadgeComponent },
+  { name: 'Breadcrumb', path: 'breadcrumb', Component: BreadcrumbComponent },
   { name: 'Button', path: 'button', Component: ButtonComponent }
 ]
diff --git a/apps/gitness/src/components-v2/breadcrumbs/breadcrumbs.tsx b/apps/gitness/src/components-v2/breadcrumbs/breadcrumbs.tsx
index 802f9d66f..3dfca19d2 100644
--- a/apps/gitness/src/components-v2/breadcrumbs/breadcrumbs.tsx
+++ b/apps/gitness/src/components-v2/breadcrumbs/breadcrumbs.tsx
@@ -1,13 +1,6 @@
 import { useMatches } from 'react-router-dom'
 
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbSeparator,
-  Topbar
-} from '@harnessio/ui/components'
+import { Breadcrumb, Topbar } from '@harnessio/ui/components'
 
 import { CustomHandle } from '../../framework/routing/types'
 
@@ -17,8 +10,8 @@ function Breadcrumbs() {
   return (
     <Topbar.Root>
       <Topbar.Left>
-        <Breadcrumb className="select-none">
-          <BreadcrumbList>
+        <Breadcrumb.Root className="select-none">
+          <Breadcrumb.List>
             {matches.map((match, index) => {
               const { breadcrumb } = (match.handle || {}) as CustomHandle
               const isFirst = index === 1
@@ -27,18 +20,18 @@ function Breadcrumbs() {
               if (!breadcrumb) return null
 
               return (
-                <BreadcrumbItem key={index}>
-                  {!isFirst ? <BreadcrumbSeparator /> : null}
+                <Breadcrumb.Item key={index}>
+                  {!isFirst ? <Breadcrumb.Separator /> : null}
                   {isLast ? (
                     breadcrumb(match.params)
                   ) : (
-                    <BreadcrumbLink href={match.pathname}>{breadcrumb(match.params)}</BreadcrumbLink>
+                    <Breadcrumb.Link href={match.pathname}>{breadcrumb(match.params)}</Breadcrumb.Link>
                   )}
-                </BreadcrumbItem>
+                </Breadcrumb.Item>
               )
             })}
-          </BreadcrumbList>
-        </Breadcrumb>
+          </Breadcrumb.List>
+        </Breadcrumb.Root>
       </Topbar.Left>
     </Topbar.Root>
   )
diff --git a/apps/gitness/src/components/breadcrumbs/breadcrumb-dropdown.tsx b/apps/gitness/src/components/breadcrumbs/breadcrumb-dropdown.tsx
index dc10f60f2..240575769 100644
--- a/apps/gitness/src/components/breadcrumbs/breadcrumb-dropdown.tsx
+++ b/apps/gitness/src/components/breadcrumbs/breadcrumb-dropdown.tsx
@@ -1,8 +1,8 @@
+import { ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 
 import {
-  BreadcrumbItem,
-  BreadcrumbLink,
+  Breadcrumb,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -15,7 +15,7 @@ export interface BreadcrumbDropdownProps {
   selectedValue?: string | number
   selectedItem?: { path: string; label: string; value: string | number; key: string }
   placeholder?: string
-  icon: React.ReactNode
+  icon: ReactNode
 }
 
 export const BreadcrumbDropdown = (props: BreadcrumbDropdownProps) => {
@@ -23,11 +23,11 @@ export const BreadcrumbDropdown = (props: BreadcrumbDropdownProps) => {
   const selectedItem = selectedItemProps ?? items.find(item => item.value === selectedValue)
 
   return (
-    <BreadcrumbItem>
+    <Breadcrumb.Item>
       {icon}
       <DropdownMenu>
         <DropdownMenuTrigger className="group flex items-center gap-2 outline-none">
-          <BreadcrumbLink asChild className={'flex items-center gap-x-1'}>
+          <Breadcrumb.Link asChild className={'flex items-center gap-x-1'}>
             {selectedItem ? (
               <Link to={selectedItem.path}>
                 {selectedItem.label} <Icon name="chevron-down" size={10} />
@@ -37,7 +37,7 @@ export const BreadcrumbDropdown = (props: BreadcrumbDropdownProps) => {
                 {placeholder} <Icon name="chevron-down" size={10} />
               </>
             )}
-          </BreadcrumbLink>
+          </Breadcrumb.Link>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" className="mt-1.5">
           <>
@@ -55,6 +55,6 @@ export const BreadcrumbDropdown = (props: BreadcrumbDropdownProps) => {
           </>
         </DropdownMenuContent>
       </DropdownMenu>
-    </BreadcrumbItem>
+    </Breadcrumb.Item>
   )
 }
diff --git a/apps/gitness/src/components/breadcrumbs/breadcrumbs.tsx b/apps/gitness/src/components/breadcrumbs/breadcrumbs.tsx
index 7cef01237..6005622b5 100644
--- a/apps/gitness/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/apps/gitness/src/components/breadcrumbs/breadcrumbs.tsx
@@ -1,17 +1,7 @@
 import { useMemo } from 'react'
 import { Link, useLocation, useParams } from 'react-router-dom'
 
-import {
-  Avatar,
-  AvatarFallback,
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  Topbar
-} from '@harnessio/ui/components'
+import { Avatar, AvatarFallback, Breadcrumb, Topbar } from '@harnessio/ui/components'
 
 import { useAppContext } from '../../framework/context/AppContext'
 import { useGetSpaceURLParam } from '../../framework/hooks/useGetSpaceParam'
@@ -70,16 +60,16 @@ export default function Breadcrumbs() {
   const getBreadcrumbSegment = ({ label, path, isLast }: { label?: string; path: string; isLast: boolean }) => {
     return (
       <>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
           {!isLast ? (
-            <BreadcrumbLink asChild>
+            <Breadcrumb.Link asChild>
               <Link to={path}>{label}</Link>
-            </BreadcrumbLink>
+            </Breadcrumb.Link>
           ) : (
-            <BreadcrumbPage>{label}</BreadcrumbPage>
+            <Breadcrumb.Page>{label}</Breadcrumb.Page>
           )}
-        </BreadcrumbItem>
+        </Breadcrumb.Item>
       </>
     )
   }
@@ -87,8 +77,8 @@ export default function Breadcrumbs() {
   return (
     <Topbar.Root>
       <Topbar.Left>
-        <Breadcrumb className="select-none">
-          <BreadcrumbList>
+        <Breadcrumb.Root className="select-none">
+          <Breadcrumb.List>
             {spacesBreadcrumbProps ? <BreadcrumbDropdown {...spacesBreadcrumbProps} /> : null}
 
             {isProjectRoute && spaces ? (
@@ -170,8 +160,8 @@ export default function Breadcrumbs() {
                 })}
               </>
             ) : null}
-          </BreadcrumbList>
-        </Breadcrumb>
+          </Breadcrumb.List>
+        </Breadcrumb.Root>
       </Topbar.Left>
     </Topbar.Root>
   )
diff --git a/apps/gitness/src/routes.tsx b/apps/gitness/src/routes.tsx
index 2a3cc2eda..5a55858a9 100644
--- a/apps/gitness/src/routes.tsx
+++ b/apps/gitness/src/routes.tsx
@@ -1,6 +1,6 @@
 import { Navigate } from 'react-router-dom'
 
-import { BreadcrumbSeparator, Text } from '@harnessio/ui/components'
+import { Breadcrumb, Text } from '@harnessio/ui/components'
 import { EmptyPage, RepoSettingsPage, SandboxLayout } from '@harnessio/ui/views'
 
 import AppShell from './components-v2/app-shell'
@@ -458,7 +458,7 @@ export const routes: CustomRouteObject[] = [
           breadcrumb: () => (
             <>
               <Text>Account</Text>
-              <BreadcrumbSeparator />
+              <Breadcrumb.Separator />
               <Text>Users</Text>
             </>
           )
@@ -471,7 +471,7 @@ export const routes: CustomRouteObject[] = [
           breadcrumb: () => (
             <>
               <Text>User</Text>
-              <BreadcrumbSeparator className="mx-2.5" />
+              <Breadcrumb.Separator className="mx-2.5" />
               <Text>Settings</Text>
             </>
           )
diff --git a/packages/ui/src/components/breadcrumb.tsx b/packages/ui/src/components/breadcrumb.tsx
index 643b5ab48..a7e03df75 100644
--- a/packages/ui/src/components/breadcrumb.tsx
+++ b/packages/ui/src/components/breadcrumb.tsx
@@ -4,14 +4,14 @@ import { DotsHorizontalIcon } from '@radix-ui/react-icons'
 import { Slot } from '@radix-ui/react-slot'
 import { cn } from '@utils/cn'
 
-type BreadcrumbProps = ComponentPropsWithoutRef<'nav'> & {
+type BreadcrumbRootProps = ComponentPropsWithoutRef<'nav'> & {
   separator?: ReactNode
 }
 
-const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(({ ...props }, ref) => {
+const BreadcrumbRoot = forwardRef<HTMLElement, BreadcrumbRootProps>(({ ...props }, ref) => {
   return <nav ref={ref} aria-label="breadcrumb" {...props} />
 })
-Breadcrumb.displayName = 'Breadcrumb'
+BreadcrumbRoot.displayName = 'BreadcrumbRoot'
 
 type BreadcrumbListProps = ComponentPropsWithoutRef<'ol'>
 
@@ -83,19 +83,23 @@ const BreadcrumbEllipsis = ({ className, ...props }: BreadcrumbEllipsisProps) =>
 )
 BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'
 
+const Breadcrumb = {
+  Root: BreadcrumbRoot,
+  List: BreadcrumbList,
+  Item: BreadcrumbItem,
+  Link: BreadcrumbLink,
+  Page: BreadcrumbPage,
+  Separator: BreadcrumbSeparator,
+  Ellipsis: BreadcrumbEllipsis
+}
+
 export {
   Breadcrumb,
-  BreadcrumbProps,
-  BreadcrumbList,
+  BreadcrumbRootProps,
   BreadcrumbListProps,
-  BreadcrumbItem,
   BreadcrumbItemProps,
-  BreadcrumbLink,
   BreadcrumbLinkProps,
-  BreadcrumbPage,
   BreadcrumbPageProps,
-  BreadcrumbSeparator,
   BreadcrumbSeparatorProps,
-  BreadcrumbEllipsis,
   BreadcrumbEllipsisProps
 }
diff --git a/packages/ui/src/components/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
index b5476fe12..651d2b8a9 100644
--- a/packages/ui/src/components/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -150,7 +150,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex size-4 items-center justify-center rounded-full border border-icons-1">
       <DropdownMenuPrimitive.ItemIndicator>
-        <span className="size-2 bg-icons-2 rounded-full block" />
+        <span className="block size-2 rounded-full bg-icons-2" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/packages/ui/src/components/path-breadcrumbs.tsx b/packages/ui/src/components/path-breadcrumbs.tsx
index 77c3a3c32..0fa3cc01a 100644
--- a/packages/ui/src/components/path-breadcrumbs.tsx
+++ b/packages/ui/src/components/path-breadcrumbs.tsx
@@ -1,16 +1,7 @@
 import { ChangeEvent, Fragment, useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  Icon,
-  Input
-} from '@/components'
+import { Breadcrumb, Icon, Input } from '@/components'
 import { debounce } from 'lodash-es'
 
 interface InputPathBreadcrumbItemProps {
@@ -113,38 +104,38 @@ export const PathBreadcrumbs = ({ items, isEdit, isNew, ...props }: PathBreadcru
   }
 
   return (
-    <Breadcrumb>
-      <BreadcrumbList>
+    <Breadcrumb.Root>
+      <Breadcrumb.List>
         {items.map(({ parentPath, path }, idx) => {
           const isLast = length === idx + 1
 
           if (isLast) {
             return (
-              <BreadcrumbItem key={idx}>
-                {isEdit ? renderInput() : <BreadcrumbPage>{path}</BreadcrumbPage>}
-              </BreadcrumbItem>
+              <Breadcrumb.Item key={idx}>
+                {isEdit ? renderInput() : <Breadcrumb.Page>{path}</Breadcrumb.Page>}
+              </Breadcrumb.Item>
             )
           }
 
           return (
             <Fragment key={idx}>
-              <BreadcrumbItem>
-                <BreadcrumbLink asChild>
+              <Breadcrumb.Item>
+                <Breadcrumb.Link asChild>
                   <Link to={parentPath}>{path}</Link>
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator />
+                </Breadcrumb.Link>
+              </Breadcrumb.Item>
+              <Breadcrumb.Separator />
             </Fragment>
           )
         })}
 
         {isNew && (
           <>
-            {!!items.length && <BreadcrumbSeparator />}
-            <BreadcrumbItem>{renderInput()}</BreadcrumbItem>
+            {!!items.length && <Breadcrumb.Separator />}
+            <Breadcrumb.Item>{renderInput()}</Breadcrumb.Item>
           </>
         )}
-      </BreadcrumbList>
-    </Breadcrumb>
+      </Breadcrumb.List>
+    </Breadcrumb.Root>
   )
 }
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 5cbae7da5..631a8515f 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -11,7 +11,7 @@ const tabsListVariants = cva('inline-flex items-center text-foreground-4', {
       underline: 'h-11 justify-center gap-4',
       navigation: 'h-[44px] w-full justify-start gap-6 border-b border-borders-5 px-6',
       tabnav:
-        'relative flex w-full before:absolute before:left-0 before:h-px before:w-full before:bg-borders-1 before:bottom-0'
+        'relative flex w-full before:absolute before:bottom-0 before:left-0 before:h-px before:w-full before:bg-borders-1'
     }
   },
   defaultVariants: {
@@ -30,7 +30,7 @@ const tabsTriggerVariants = cva(
         navigation:
           'm-0 -mb-px h-[44px] border-b border-solid border-b-transparent px-0 text-xs font-normal text-foreground-2 duration-150 ease-in-out hover:text-foreground-1 data-[state=active]:border-borders-9',
         tabnav:
-          'h-[36px] rounded-t-md border-x border-t border-transparent px-3.5 font-normal text-foreground-2 hover:text-foreground-1 data-[state=active]:border-borders-1 data-[state=active]:text-foreground-1 data-[state=active]:bg-background-1'
+          'h-[36px] rounded-t-md border-x border-t border-transparent px-3.5 font-normal text-foreground-2 hover:text-foreground-1 data-[state=active]:border-borders-1 data-[state=active]:bg-background-1 data-[state=active]:text-foreground-1'
       }
     },
     defaultVariants: {
diff --git a/packages/ui/src/views/project/project-general/project-general-page.tsx b/packages/ui/src/views/project/project-general/project-general-page.tsx
index 36baed560..6e1a55982 100644
--- a/packages/ui/src/views/project/project-general/project-general-page.tsx
+++ b/packages/ui/src/views/project/project-general/project-general-page.tsx
@@ -166,7 +166,7 @@ export const ProjectSettingsGeneralPage = ({
           </Fieldset>
         </FormWrapper>
 
-        <Button size="sm" theme="error" className="self-start mt-7" onClick={setOpenDeleteDialog}>
+        <Button size="sm" theme="error" className="mt-7 self-start" onClick={setOpenDeleteDialog}>
           Delete project
         </Button>
       </SandboxLayout.Content>
diff --git a/packages/ui/src/views/repo/pull-request/components/pull-request-header.tsx b/packages/ui/src/views/repo/pull-request/components/pull-request-header.tsx
index 0e0a22511..8cfd0819e 100644
--- a/packages/ui/src/views/repo/pull-request/components/pull-request-header.tsx
+++ b/packages/ui/src/views/repo/pull-request/components/pull-request-header.tsx
@@ -50,7 +50,7 @@ export const PullRequestHeader: React.FC<PullRequestTitleProps> = ({
   return (
     <div className="flex flex-col gap-y-4">
       <div className="flex items-center">
-        <h1 className="text-foreground-1 font-medium text-24 flex gap-x-2.5">
+        <h1 className="flex gap-x-2.5 text-24 font-medium text-foreground-1">
           {original}
           <span className="font-normal text-foreground-4">#{number}</span>
         </h1>
@@ -82,7 +82,7 @@ export const PullRequestHeader: React.FC<PullRequestTitleProps> = ({
               {source_branch}
             </Link>
           </Badge>
-          <span className="w-px h-4 mx-1.5 bg-borders-2" />
+          <span className="mx-1.5 h-4 w-px bg-borders-2" />
           <span className="text-foreground-4">{formattedTime}</span>
         </div>
       </div>
diff --git a/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-panel.tsx b/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-panel.tsx
index 71db8359c..1229655a5 100644
--- a/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-panel.tsx
+++ b/packages/ui/src/views/repo/pull-request/details/components/conversation/pull-request-panel.tsx
@@ -111,7 +111,7 @@ const HeaderTitle = ({ ...props }: HeaderProps) => {
         </div>
         {props.headerMsg && (
           <div className="flex w-full justify-end">
-            <span className="text-destructive text-12">{props.headerMsg}</span>
+            <span className="text-12 text-destructive">{props.headerMsg}</span>
           </div>
         )}
       </>
@@ -231,7 +231,7 @@ const PullRequestPanel = ({
                           }
                         }}
                       />
-                      <span className="text-primary text-12">Bypass and merge anyway</span>
+                      <span className="text-12 text-primary">Bypass and merge anyway</span>
                     </Layout.Horizontal>
                   )}
                   <Button
@@ -264,8 +264,8 @@ const PullRequestPanel = ({
                                     key={action_idx}
                                   >
                                     <div className="flex flex-col">
-                                      <span className="text-foreground-8 leading-none">{action.title}</span>
-                                      <span className="text-foreground-4 mt-1.5">{action.description}</span>
+                                      <span className="leading-none text-foreground-8">{action.title}</span>
+                                      <span className="mt-1.5 text-foreground-4">{action.description}</span>
                                     </div>
                                   </DropdownMenuRadioItem>
                                 )
diff --git a/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx b/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx
index e06b76dd1..37284116f 100644
--- a/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx
+++ b/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-changes-section.tsx
@@ -67,7 +67,7 @@ interface HeaderItemProps {
   header: string
 }
 const HeaderItem: React.FC<HeaderItemProps> = ({ header }: HeaderItemProps) => {
-  return <span className="text-foreground-3 text-12">{header}</span>
+  return <span className="text-12 text-foreground-3">{header}</span>
 }
 
 const AvatarItem: React.FC<AvatarItemProps> = ({ evaluations }: AvatarItemProps) => {
@@ -244,15 +244,15 @@ const PullRequestChangesSection = ({
             ((minApproval ?? 0) > 0 && minReqLatestApproval === undefined)) && (
             <div className="ml-6 flex items-center justify-between">
               {approvedEvaluations && minApproval && minApproval <= approvedEvaluations?.length ? (
-                <div className="flex gap-x-2 items-center">
+                <div className="flex items-center gap-x-2">
                   <Icon name="success" className="text-icons-success" />
                   <span className="text-14 text-foreground-1">
                     {`Changes were approved by ${approvedEvaluations?.length} ${easyPluralize(approvedEvaluations?.length, 'reviewer', 'reviewers')}`}
                   </span>
                 </div>
               ) : (
-                <div className="flex gap-x-2 items-center">
-                  <Icon name="circle" className="text-icons-7 fill-transparent" />
+                <div className="flex items-center gap-x-2">
+                  <Icon name="circle" className="fill-transparent text-icons-7" />
                   <span className="text-14 text-foreground-1">
                     {`${(approvedEvaluations && approvedEvaluations.length) || ''}/${minApproval} approvals completed`}
                   </span>
@@ -269,13 +269,13 @@ const PullRequestChangesSection = ({
               {latestApprovalArr !== undefined &&
               minReqLatestApproval !== undefined &&
               minReqLatestApproval <= latestApprovalArr?.length ? (
-                <div className="flex gap-x-2 items-center">
+                <div className="flex items-center gap-x-2">
                   <Icon name="success" className="text-icons-success" />
                   <span className="text-14 text-foreground-1">{`Latest changes were approved by ${latestApprovalArr?.length || minReqLatestApproval || ''} ${easyPluralize(latestApprovalArr?.length || minReqLatestApproval, 'reviewer', 'reviewers')}`}</span>
                 </div>
               ) : (
-                <div className="flex gap-x-2 items-center">
-                  <Icon name="circle" className="text-icons-7 fill-transparent" />
+                <div className="flex items-center gap-x-2">
+                  <Icon name="circle" className="fill-transparent text-icons-7" />
                   <span className="text-14 text-foreground-1">
                     {`${latestApprovalArr?.length || minReqLatestApproval || ''} ${easyPluralize(latestApprovalArr?.length || minReqLatestApproval || 0, 'approval', 'approvals')} pending on latest changes`}
                   </span>
@@ -289,7 +289,7 @@ const PullRequestChangesSection = ({
 
           {!isEmpty(changeReqEvaluations) && (
             <div className="ml-6 flex items-center justify-between">
-              <div className="flex gap-x-2 items-center">
+              <div className="flex items-center gap-x-2">
                 <Icon
                   name="triangle-warning"
                   className={cn({
@@ -310,7 +310,7 @@ const PullRequestChangesSection = ({
           {!isEmpty(codeOwners) && !isEmpty(codeOwners.evaluation_entries) && (
             <div className="ml-6 flex items-center justify-between">
               {codeOwnerChangeReqEntries && codeOwnerChangeReqEntries?.length > 0 ? (
-                <div className="flex gap-x-2 items-center">
+                <div className="flex items-center gap-x-2">
                   <Icon
                     name="triangle-warning"
                     className={cn({
diff --git a/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-line-title.tsx b/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-line-title.tsx
index 28933260b..56cbf4bb6 100644
--- a/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-line-title.tsx
+++ b/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-line-title.tsx
@@ -11,7 +11,7 @@ export const LineTitle = ({ ...props }: LineTitleProps) => {
   return (
     <div className="inline-flex items-center gap-2">
       {props.icon}
-      <h3 className="font-medium text-14">{props.text}</h3>
+      <h3 className="text-14 font-medium">{props.text}</h3>
     </div>
   )
 }
@@ -19,7 +19,7 @@ export const LineTitle = ({ ...props }: LineTitleProps) => {
 export const LineDescription = ({ ...props }: LineDescriptionProps) => {
   return (
     <div className="ml-6 inline-flex items-center gap-2">
-      <p className="text-foreground-4 text-14 font-normal">{props.text}</p>
+      <p className="text-14 font-normal text-foreground-4">{props.text}</p>
     </div>
   )
 }
diff --git a/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-merge-section.tsx b/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-merge-section.tsx
index 2078a8fdb..8fee0e7e1 100644
--- a/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-merge-section.tsx
+++ b/packages/ui/src/views/repo/pull-request/details/components/conversation/sections/pull-request-merge-section.tsx
@@ -49,7 +49,7 @@ const PullRequestMergeSection = ({
               <LineDescription text={'Checking for ability to merge automatically...'} />
             ) : !mergeable ? (
               <div className="ml-6 inline-flex items-center gap-2">
-                <p className="text-foreground-4 text-14 font-normal">
+                <p className="text-14 font-normal text-foreground-4">
                   Use the
                   <span
                     // onClick={() => {
@@ -84,7 +84,7 @@ const PullRequestMergeSection = ({
             {!isEmpty(conflictingFiles) && (
               <div className="mt-2">
                 {conflictingFiles?.map((file, idx) => (
-                  <div className="py-1.5 flex items-center gap-x-2" key={`${file}-${idx}`}>
+                  <div className="flex items-center gap-x-2 py-1.5" key={`${file}-${idx}`}>
                     <Icon className="text-icons-1" size={16} name="file" />
                     <span className="text-14 text-foreground-1">{file}</span>
                   </div>