diff --git a/packages/raystack/components/breadcrumb/__tests__/breadcrumb.test.tsx b/packages/raystack/components/breadcrumb/__tests__/breadcrumb.test.tsx
index ac685c2a..95b9587d 100644
--- a/packages/raystack/components/breadcrumb/__tests__/breadcrumb.test.tsx
+++ b/packages/raystack/components/breadcrumb/__tests__/breadcrumb.test.tsx
@@ -241,7 +241,7 @@ describe('Breadcrumb', () => {
       render(
         <Breadcrumb>
           <Breadcrumb.Item>Home</Breadcrumb.Item>
-          <Breadcrumb.Separator />
+          <Breadcrumb.Separator>/</Breadcrumb.Separator>
           <Breadcrumb.Item>Products</Breadcrumb.Item>
         </Breadcrumb>
       );
@@ -349,13 +349,13 @@ describe('Breadcrumb', () => {
       render(
         <Breadcrumb>
           <Breadcrumb.Item href='/'>Home</Breadcrumb.Item>
-          <Breadcrumb.Separator />
+          <Breadcrumb.Separator>/</Breadcrumb.Separator>
           <Breadcrumb.Item href='/products'>Products</Breadcrumb.Item>
-          <Breadcrumb.Separator />
+          <Breadcrumb.Separator>/</Breadcrumb.Separator>
           <Breadcrumb.Item href='/products/electronics'>
             Electronics
           </Breadcrumb.Item>
-          <Breadcrumb.Separator />
+          <Breadcrumb.Separator>/</Breadcrumb.Separator>
           <Breadcrumb.Item current>Laptop</Breadcrumb.Item>
         </Breadcrumb>
       );
diff --git a/packages/raystack/components/breadcrumb/breadcrumb-item.tsx b/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
index 6770d0f7..fdc5cf87 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
+++ b/packages/raystack/components/breadcrumb/breadcrumb-item.tsx
@@ -49,7 +49,7 @@ export const BreadcrumbItem = forwardRef<
         {leadingIcon && (
           <span className={styles['breadcrumb-icon']}>{leadingIcon}</span>
         )}
-        <span>{children}</span>
+        {children && <span>{children}</span>}
       </>
     );
 
diff --git a/packages/raystack/components/breadcrumb/breadcrumb-misc.tsx b/packages/raystack/components/breadcrumb/breadcrumb-misc.tsx
index 1d7c87c2..52bc07c9 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb-misc.tsx
+++ b/packages/raystack/components/breadcrumb/breadcrumb-misc.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { DotsHorizontalIcon } from '@radix-ui/react-icons';
+import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
 import { HTMLAttributes, forwardRef } from 'react';
 import styles from './breadcrumb.module.css';
@@ -11,17 +11,26 @@ export interface BreadcrumbEllipsisProps
 export const BreadcrumbEllipsis = forwardRef<
   HTMLSpanElement,
   BreadcrumbEllipsisProps
->(({ className, children = <DotsHorizontalIcon />, ...props }, ref) => {
-  return (
-    <span
-      className={cx(styles['breadcrumb-ellipsis'], className)}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </span>
-  );
-});
+>(
+  (
+    {
+      className,
+      children = <DotsHorizontalIcon width={20} height={20} />,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <span
+        className={cx(styles['breadcrumb-ellipsis'], className)}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
 
 BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
 
@@ -31,16 +40,25 @@ export interface BreadcrumbSeparatorProps
 export const BreadcrumbSeparator = forwardRef<
   HTMLSpanElement,
   BreadcrumbSeparatorProps
->(({ children = '/', className, ...props }, ref) => {
-  return (
-    <span
-      className={cx(styles['breadcrumb-separator'], className)}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </span>
-  );
-});
+>(
+  (
+    {
+      children = <ChevronRightIcon width={12} height={12} />,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <span
+        className={cx(styles['breadcrumb-separator'], className)}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
 
 BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
diff --git a/packages/raystack/components/breadcrumb/breadcrumb.module.css b/packages/raystack/components/breadcrumb/breadcrumb.module.css
index 6ab78706..88e2238b 100644
--- a/packages/raystack/components/breadcrumb/breadcrumb.module.css
+++ b/packages/raystack/components/breadcrumb/breadcrumb.module.css
@@ -21,6 +21,7 @@
   list-style-type: none;
   padding: 0;
   margin: 0;
+  gap: var(--rs-space-2);
 }
 
 .breadcrumb-item {
@@ -35,6 +36,7 @@
   color: var(--rs-color-foreground-base-tertiary);
   text-decoration: none;
   text-wrap: nowrap;
+  gap: var(--rs-space-2);
 }
 
 .breadcrumb-link:hover {
@@ -50,24 +52,11 @@
 .breadcrumb-icon {
   display: flex;
   align-items: center;
-  margin-right: var(--rs-space-2);
-}
-
-.breadcrumb-separator {
-  color: var(--rs-color-foreground-base-tertiary);
-  margin: 0 var(--rs-space-3);
 }
 
+.breadcrumb-separator,
 .breadcrumb-ellipsis {
-  display: flex;
-  align-items: center;
-  color: var(--rs-color-foreground-base-secondary);
-}
-
-.breadcrumb-ellipsis svg {
-  width: var(--rs-space-4);
-  height: var(--rs-space-4);
-  color: var(--rs-color-foreground-base-secondary);
+  color: var(--rs-color-foreground-base-tertiary);
 }
 
 .breadcrumb-dropdown-trigger {