diff --git a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
index 7df96b8fdd..e0f3fa2594 100644
--- a/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
+++ b/packages/ui/v2/core/navigation/tabs/HorizontalTabItem.tsx
@@ -27,7 +27,7 @@ const HorizontalTabItem = function ({ name, href, linkProps, ...props }: Horizon
       <a
         className={classNames(
           isCurrent ? "bg-gray-200 text-gray-900" : "  text-gray-600 hover:bg-gray-100 hover:text-gray-900 ",
-          "mb-2 inline-flex items-center justify-center whitespace-nowrap rounded-md py-[10px] px-4 text-sm font-medium leading-4 md:mb-0",
+          "inline-flex items-center justify-center whitespace-nowrap rounded-[4px] py-[10px] px-4 text-sm font-medium leading-4 md:mb-0",
           props.disabled && "pointer-events-none !opacity-30",
           props.className
         )}
diff --git a/packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx b/packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx
index 31bb14f848..9578f6c72f 100644
--- a/packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx
+++ b/packages/ui/v2/core/navigation/tabs/HorizontalTabs.tsx
@@ -10,8 +10,8 @@ export interface NavTabProps {
 
 const HorizontalTabs = function ({ tabs, linkProps, actions, ...props }: NavTabProps) {
   return (
-    <div className="-mx-6 mb-2 w-[calc(100%+40px)]">
-      <nav className="no-scrollbar flex space-x-1 overflow-scroll px-6" aria-label="Tabs" {...props}>
+    <div className="mb-2 max-w-[calc(100%+40px)] lg:mb-5">
+      <nav className="no-scrollbar flex overflow-scroll rounded-md border p-1" aria-label="Tabs" {...props}>
         {tabs.map((tab, idx) => (
           <HorizontalTabItem {...tab} key={idx} {...linkProps} />
         ))}