diff --git a/packages/lib/hooks/useUrlMatchesCurrentUrl.ts b/packages/lib/hooks/useUrlMatchesCurrentUrl.ts
index 5526f2fbe2..7fc0c5fe2c 100644
--- a/packages/lib/hooks/useUrlMatchesCurrentUrl.ts
+++ b/packages/lib/hooks/useUrlMatchesCurrentUrl.ts
@@ -7,7 +7,7 @@ export const useUrlMatchesCurrentUrl = (url: string) => {
   // It can certainly have null value https://nextjs.org/docs/app/api-reference/functions/use-pathname#:~:text=usePathname%20can%20return%20null%20when%20a%20fallback%20route%20is%20being%20rendered%20or%20when%20a%20pages%20directory%20page%20has%20been%20automatically%20statically%20optimized%20by%20Next.js%20and%20the%20router%20is%20not%20ready.
   const pathname = usePathname() as null | string;
   const searchParams = useSearchParams();
-  const query = searchParams.toString();
+  const query = searchParams?.toString();
   let pathnameWithQuery;
   if (query) {
     pathnameWithQuery = `${pathname}?${query}`;
diff --git a/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx b/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx
new file mode 100644
index 0000000000..701cd54c8e
--- /dev/null
+++ b/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx
@@ -0,0 +1,134 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
+
+import {
+  Title,
+  VariantRow,
+  VariantsTable,
+  CustomArgsTable,
+  Examples,
+  Example,
+} from "@calcom/storybook/components";
+import { Plus } from "@calcom/ui/components/icon";
+
+import HorizontalTabs from "../HorizontalTabs";
+
+<Meta title="UI/Navigation/HorizontalTabs" component={HorizontalTabs} />
+
+<Title title="Horizontal Tabs" suffix="Brief" subtitle="Version 1.0 — Last Update: 17 Aug 2023" />
+
+## Definition
+
+The HorizontalTabs component is a user interface element used for displaying a horizontal set of tabs, often employed for navigation or organization purposes within a web application.
+
+## Structure
+
+The HorizontalTabs component is designed to work alongside the HorizontalTabItem component, which represents individual tabs within the tab bar.
+
+export const tabs = [
+  {
+    name: "Tab 1",
+    href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab1",
+    disabled: false,
+    linkShallow: true,
+    linkScroll: true,
+    icon: Plus,
+  },
+  {
+    name: "Tab 2",
+    href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab2",
+    disabled: false,
+    linkShallow: true,
+    linkScroll: true,
+    avatar: "Avatar",
+  },
+  {
+    name: "Tab 3",
+    href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab3",
+    disabled: true,
+    linkShallow: true,
+    linkScroll: true,
+  },
+];
+
+<CustomArgsTable of={HorizontalTabs} />
+
+<Examples title="Default">
+  <Example title="Default">
+    <HorizontalTabs
+      tabs={[
+        {
+          name: "tab 1",
+          href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab1",
+        },
+      ]}
+    />
+  </Example>
+  <Example title="With avatar">
+    <HorizontalTabs
+      tabs={[
+        {
+          name: "Tab 1",
+          href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab1",
+          avatar: "Avatar",
+        },
+      ]}
+    />
+  </Example>
+  <Example title="With icon">
+    <HorizontalTabs
+      tabs={[
+        {
+          name: "Tab 1",
+          href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab1",
+          icon: Plus,
+        },
+      ]}
+    />
+  </Example>
+  <Example title="Disabled">
+    <HorizontalTabs
+      tabs={[
+        {
+          name: "Tab 1",
+          href: "?path=/story/ui-navigation-horizontaltabs--horizontal-tabs/tab1",
+          disabled: true,
+        },
+      ]}
+    />
+  </Example>
+</Examples>
+
+## HorizontalTabs Story
+
+<Canvas>
+  <Story
+    name="Horizontal Tabs"
+    args={{
+      name: "Tab 1",
+      href: "/tab1",
+      disabled: false,
+      className: "",
+      linkShallow: true,
+      linkScroll: true,
+      icon: "",
+      avatar: "",
+    }}
+    argTypes={{
+      name: { control: "text", description: "Tab name" },
+      href: { control: "text", description: "Tab link" },
+      disabled: { control: "boolean", description: "Whether the tab is disabled" },
+      className: { control: "text", description: "Additional CSS class" },
+      linkShallow: { control: "boolean", description: "Whether to use shallow links" },
+      linkScroll: { control: "boolean", description: "Whether to scroll to links" },
+      icon: { control: "text", description: "SVGComponent icon" },
+      avatar: { control: "text", description: "Avatar image URL" },
+    }}>
+    {(...props) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
+        <VariantRow>
+          <HorizontalTabs tabs={tabs} className="overflow-hidden" actions={<button>Click me</button>} />
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>
diff --git a/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx b/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx
new file mode 100644
index 0000000000..6b7b3ea2c6
--- /dev/null
+++ b/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx
@@ -0,0 +1,158 @@
+import { Meta, Story } from "@storybook/addon-docs/blocks";
+
+import {
+  Title,
+  CustomArgsTable,
+  Examples,
+  Example,
+  VariantsTable,
+  VariantsRow,
+} from "@calcom/storybook/components";
+import { Plus } from "@calcom/ui/components/icon";
+
+import VerticalTabs from "../VerticalTabs";
+
+<Meta title="UI/Navigation/VerticalTabs" component={VerticalTabs} />
+
+<Title title="Vertical Tabs Brief" subtitle="Version 1.0 — Last Update: 17 Aug 2023" />
+
+## Definition
+
+The VerticalTabs component is a user interface element utilized to present a vertical set of tabs, commonly employed for navigation or organizing content within a web application.
+
+## Structure
+
+The VerticalTabs component is designed to complement the HorizontalTabItem component, which represents individual tabs within the tab bar. This combination allows for creating intuitive navigation experiences and organized content presentation.
+
+export const tabs = [
+  {
+    name: "Tab 1",
+    href: "/tab1",
+    disabled: false,
+    linkShallow: true,
+    linkScroll: true,
+    disableChevron: true,
+    icon: Plus,
+  },
+  {
+    name: "Tab 2",
+    href: "/tab2",
+    disabled: false,
+    linkShallow: true,
+    linkScroll: true,
+    avatar: "Avatar",
+  },
+  {
+    name: "Tab 3",
+    href: "/tab3",
+    disabled: true,
+    linkShallow: true,
+    linkScroll: true,
+  },
+];
+
+<CustomArgsTable of={VerticalTabs} />
+
+<Examples title="Default">
+  <Example title="Default">
+    <VerticalTabs
+      tabs={[
+        {
+          name: "tab 1",
+          href: "/tab1",
+        },
+      ]}
+    />
+  </Example>
+  <Example title="Disabled chevron">
+    <VerticalTabs
+      tabs={[
+        {
+          name: "Tab 1",
+          href: "/tab1",
+          disableChevron: true,
+        },
+      ]}
+    />
+  </Example>
+  <Example title="With icon">
+    <VerticalTabs
+      tabs={[
+        {
+          name: "Tab 1",
+          href: "/tab1",
+          icon: Plus,
+        },
+      ]}
+    />
+  </Example>
+  <Example title="Disabled">
+    <VerticalTabs
+      tabs={[
+        {
+          name: "Tab 1",
+          href: "/tab1",
+          disabled: true,
+        },
+      ]}
+    />
+  </Example>
+</Examples>
+
+## VerticalTabs Story
+
+<Canvas>
+  <Story
+    name="Vertical Tabs"
+    args={{
+      name: "Tab 1",
+      info: "Tab information",
+      icon: Plus,
+      disabled: false,
+      children: [
+        {
+          name: "Sub Tab 1",
+          href: "/sub-tab1",
+          disabled: false,
+          className: "sub-tab",
+        },
+      ],
+      textClassNames: "",
+      className: "",
+      isChild: false,
+      hidden: false,
+      disableChevron: true,
+      href: "/tab1",
+      isExternalLink: true,
+      linkShallow: true,
+      linkScroll: true,
+      avatar: "",
+      iconClassName: "",
+    }}
+    argTypes={{
+      name: { control: "text", description: "Tab name" },
+      info: { control: "text", description: "Tab information" },
+      icon: { control: "object", description: "SVGComponent icon" },
+      disabled: { control: "boolean", description: "Whether the tab is disabled" },
+      children: { control: "object", description: "Array of child tabs" },
+      textClassNames: { control: "text", description: "Additional text class names" },
+      className: { control: "text", description: "Additional CSS class" },
+      isChild: { control: "boolean", description: "Whether the tab is a child tab" },
+      hidden: { control: "boolean", description: "Whether the tab is hidden" },
+      disableChevron: { control: "boolean", description: "Whether to disable the chevron" },
+      href: { control: "text", description: "Tab link" },
+      isExternalLink: { control: "boolean", description: "Whether the link is external" },
+      linkShallow: { control: "boolean", description: "Whether to use shallow links" },
+      linkScroll: { control: "boolean", description: "Whether to scroll to links" },
+      avatar: { control: "text", description: "Avatar image URL" },
+      iconClassName: { control: "text", description: "Additional icon class name" },
+    }}>
+    {(...props) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={150}>
+        <VariantRow>
+          <VerticalTabs tabs={tabs} className="overflow-hidden" />
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>