diff --git a/web/src/components/ui/breadcrumbs.tsx b/web/src/components/ui/breadcrumbs.tsx
index feca3d4..e503cfd 100644
--- a/web/src/components/ui/breadcrumbs.tsx
+++ b/web/src/components/ui/breadcrumbs.tsx
@@ -14,7 +14,7 @@ interface IBreadcrumbsProps {
 const Breadcrumbs: FC<IBreadcrumbsProps> = ({ items, className }) => {
   return (
     <div
-      className={`${className ? `${className} ` : ""} flex flex-row p-3 gap-3 items-center text-gray-800 dark:text-gray-200`}
+      className={`${className ? `${className} ` : ""} flex flex-row p-1 sm:p-3 gap-3 items-center text-gray-800 dark:text-gray-200 text-sm sm:text-base`}
     >
       {items.map((item, index) => (
         <>