diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts
index e04f912ec..7f845a68e 100644
--- a/src/renderer/components/index.ts
+++ b/src/renderer/components/index.ts
@@ -14,3 +14,4 @@ export * from './select';
 export * from './date-picker';
 export * from './scroll-area';
 export * from './paper';
+export * from './tabs';
diff --git a/src/renderer/components/tabs/index.tsx b/src/renderer/components/tabs/index.tsx
new file mode 100644
index 000000000..0bfaa1217
--- /dev/null
+++ b/src/renderer/components/tabs/index.tsx
@@ -0,0 +1,25 @@
+import {
+  Tabs as MantineTabs,
+  TabsProps as MantineTabsProps,
+} from '@mantine/core';
+import styled from 'styled-components';
+
+type TabsProps = MantineTabsProps;
+
+const StyledTabs = styled(MantineTabs)`
+  button[data-active] {
+    border-color: var(--primary-color);
+
+    &:hover {
+      border-color: var(--primary-color);
+    }
+  }
+`;
+
+export const Tabs = ({ children, ...props }: TabsProps) => {
+  return <StyledTabs {...props}>{children}</StyledTabs>;
+};
+
+Tabs.List = StyledTabs.List;
+Tabs.Panel = StyledTabs.Panel;
+Tabs.Tab = StyledTabs.Tab;