diff --git a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx
index 84a34b4f..c15d2db7 100644
--- a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx
+++ b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx
@@ -12,7 +12,7 @@ import { Button } from 'components/shared/Button';
 import {
   BranchIcon,
   ClockIcon,
-  GitHubLogo,
+  GithubLogoIcon,
   HorizontalDotIcon,
   WarningDiamondIcon,
 } from 'components/shared/CustomIcon';
@@ -118,7 +118,7 @@ export const ProjectCard = ({
         <div className={theme.deploymentText()}>
           {hasDeployment ? (
             <>
-              <GitHubLogo />
+              <GithubLogoIcon />
               <span>{relativeTimeMs(project.deployments[0].createdAt)} on</span>
               <BranchIcon />
               <span>{project.deployments[0].branch}</span>
diff --git a/packages/frontend/src/components/shared/CustomIcon/BranchStrokeIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/BranchStrokeIcon.tsx
index 0348e35d..4ccb3590 100644
--- a/packages/frontend/src/components/shared/CustomIcon/BranchStrokeIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/BranchStrokeIcon.tsx
@@ -3,16 +3,15 @@ import { CustomIcon, CustomIconProps } from './CustomIcon';
 export const BranchStrokeIcon = (props: CustomIconProps) => {
   return (
     <CustomIcon
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
       fill="none"
       {...props}
     >
       <path
-        d="M4.66667 4.99984C5.58714 4.99984 6.33333 4.25365 6.33333 3.33317C6.33333 2.4127 5.58714 1.6665 4.66667 1.6665C3.74619 1.6665 3 2.4127 3 3.33317C3 4.25365 3.74619 4.99984 4.66667 4.99984ZM4.66667 4.99984V10.9998M4.66667 10.9998C3.74619 10.9998 3 11.746 3 12.6665C3 13.587 3.74619 14.3332 4.66667 14.3332C5.58714 14.3332 6.33333 13.587 6.33333 12.6665C6.33333 11.746 5.58714 10.9998 4.66667 10.9998ZM4.66667 10.9998V9.33317C4.66667 8.59679 5.26362 7.99984 6 7.99984H10C10.7364 7.99984 11.3333 7.40288 11.3333 6.6665V4.99984M11.3333 4.99984C12.2538 4.99984 13 4.25365 13 3.33317C13 2.4127 12.2538 1.6665 11.3333 1.6665C10.4129 1.6665 9.66667 2.4127 9.66667 3.33317C9.66667 4.25365 10.4129 4.99984 11.3333 4.99984Z"
-        stroke="currentColor"
-        strokeLinejoin="round"
+        d="M14.1667 9.99967V10.4997H14.6667V9.99967H14.1667ZM5.83333 9.99967V9.49967H5.33333V9.99967H5.83333ZM7.41667 4.16634C7.41667 5.04079 6.70778 5.74967 5.83333 5.74967V6.74967C7.26007 6.74967 8.41667 5.59308 8.41667 4.16634H7.41667ZM5.83333 5.74967C4.95888 5.74967 4.25 5.04079 4.25 4.16634H3.25C3.25 5.59308 4.4066 6.74967 5.83333 6.74967V5.74967ZM4.25 4.16634C4.25 3.29189 4.95888 2.58301 5.83333 2.58301V1.58301C4.4066 1.58301 3.25 2.73961 3.25 4.16634H4.25ZM5.83333 2.58301C6.70778 2.58301 7.41667 3.29189 7.41667 4.16634H8.41667C8.41667 2.73961 7.26007 1.58301 5.83333 1.58301V2.58301ZM7.41667 15.833C7.41667 16.7075 6.70778 17.4163 5.83333 17.4163V18.4163C7.26007 18.4163 8.41667 17.2597 8.41667 15.833H7.41667ZM5.83333 17.4163C4.95888 17.4163 4.25 16.7075 4.25 15.833H3.25C3.25 17.2597 4.4066 18.4163 5.83333 18.4163V17.4163ZM4.25 15.833C4.25 14.9586 4.95888 14.2497 5.83333 14.2497V13.2497C4.4066 13.2497 3.25 14.4063 3.25 15.833H4.25ZM5.83333 14.2497C6.70778 14.2497 7.41667 14.9586 7.41667 15.833H8.41667C8.41667 14.4063 7.26007 13.2497 5.83333 13.2497V14.2497ZM5.33333 6.24967V13.7497H6.33333V6.24967H5.33333ZM13.6667 6.24967V9.99967H14.6667V6.24967H13.6667ZM14.1667 9.49967H5.83333V10.4997H14.1667V9.49967ZM5.33333 9.99967V13.7497H6.33333V9.99967H5.33333ZM15.75 4.16634C15.75 5.04079 15.0411 5.74967 14.1667 5.74967V6.74967C15.5934 6.74967 16.75 5.59308 16.75 4.16634H15.75ZM14.1667 5.74967C13.2922 5.74967 12.5833 5.04079 12.5833 4.16634H11.5833C11.5833 5.59308 12.7399 6.74967 14.1667 6.74967V5.74967ZM12.5833 4.16634C12.5833 3.29189 13.2922 2.58301 14.1667 2.58301V1.58301C12.7399 1.58301 11.5833 2.73961 11.5833 4.16634H12.5833ZM14.1667 2.58301C15.0411 2.58301 15.75 3.29189 15.75 4.16634H16.75C16.75 2.73961 15.5934 1.58301 14.1667 1.58301V2.58301Z"
+        fill="currentColor"
       />
     </CustomIcon>
   );
diff --git a/packages/frontend/src/components/shared/CustomIcon/CollaboratorsIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CollaboratorsIcon.tsx
new file mode 100644
index 00000000..ee1e05ec
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/CollaboratorsIcon.tsx
@@ -0,0 +1,19 @@
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const CollaboratorsIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M12.5002 2.08301C14.3411 2.08301 15.8335 3.57539 15.8335 5.41634C15.8335 7.25729 14.3411 8.74968 12.5002 8.74968M14.5835 11.1659C17.2451 12.0374 19.1668 14.498 19.1668 17.083H16.6668M7.50016 8.74968C5.65921 8.74968 4.16683 7.25729 4.16683 5.41634C4.16683 3.57539 5.65921 2.08301 7.50016 2.08301C9.34111 2.08301 10.8335 3.57539 10.8335 5.41634C10.8335 7.25729 9.34111 8.74968 7.50016 8.74968ZM0.833496 17.083C0.833496 13.8613 3.81826 10.833 7.50016 10.833C11.1821 10.833 14.1668 13.8613 14.1668 17.083H0.833496Z"
+        stroke="currentColor"
+        stroke-linecap="square"
+      />
+    </CustomIcon>
+  );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/GitHubLogo.tsx b/packages/frontend/src/components/shared/CustomIcon/GitHubLogoIcon.tsx
similarity index 97%
rename from packages/frontend/src/components/shared/CustomIcon/GitHubLogo.tsx
rename to packages/frontend/src/components/shared/CustomIcon/GitHubLogoIcon.tsx
index f870f83a..3793e04f 100644
--- a/packages/frontend/src/components/shared/CustomIcon/GitHubLogo.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/GitHubLogoIcon.tsx
@@ -1,6 +1,6 @@
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const GitHubLogo = (props: CustomIconProps) => {
+export const GithubLogoIcon = (props: CustomIconProps) => {
   return (
     <CustomIcon
       width="12"
diff --git a/packages/frontend/src/components/shared/CustomIcon/SwitchIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/SwitchIcon.tsx
new file mode 100644
index 00000000..430b09fc
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/SwitchIcon.tsx
@@ -0,0 +1,22 @@
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const SwitchIcon = (props: CustomIconProps) => {
+  return (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M1.25 9.99967C1.25 7.00813 3.67512 4.58301 6.66667 4.58301H13.3333C16.3249 4.58301 18.75 7.00813 18.75 9.99967C18.75 12.9912 16.3249 15.4163 13.3333 15.4163H6.66667C3.67512 15.4163 1.25 12.9912 1.25 9.99967Z"
+        stroke="currentColor"
+      />
+      <path
+        d="M10.4167 9.99967C10.4167 8.38884 11.7225 7.08301 13.3333 7.08301C14.9442 7.08301 16.25 8.38884 16.25 9.99967C16.25 11.6105 14.9442 12.9163 13.3333 12.9163C11.7225 12.9163 10.4167 11.6105 10.4167 9.99967Z"
+        stroke="currentColor"
+      />
+    </CustomIcon>
+  );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts
index f271b978..5e16803e 100644
--- a/packages/frontend/src/components/shared/CustomIcon/index.ts
+++ b/packages/frontend/src/components/shared/CustomIcon/index.ts
@@ -32,7 +32,7 @@ export * from './BuildingIcon';
 export * from './CheckRadioIcon';
 export * from './ChevronDownIcon';
 export * from './BranchIcon';
-export * from './GitHubLogo';
+export * from './GitHubLogoIcon';
 export * from './ClockIcon';
 export * from './HorizontalDotIcon';
 export * from './WarningDiamondIcon';
@@ -69,6 +69,8 @@ export * from './GoogleIcon';
 export * from './KeyIcon';
 export * from './TrashIcon';
 export * from './CopyUnfilledIcon';
+export * from './SwitchIcon';
+export * from './CollaboratorsIcon';
 
 // Templates
 export * from './templates';
diff --git a/packages/frontend/src/components/shared/Tabs/index.ts b/packages/frontend/src/components/shared/Tabs/index.ts
index 856dbbb3..a28a031c 100644
--- a/packages/frontend/src/components/shared/Tabs/index.ts
+++ b/packages/frontend/src/components/shared/Tabs/index.ts
@@ -1 +1,4 @@
 export * from './Tabs';
+export { default as TabsList } from './TabsList';
+export { default as TabsTrigger } from './TabsTrigger';
+export { default as TabsContent } from './TabsContent';
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx b/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx
index 1775576e..66638354 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Deployments.tsx
@@ -7,7 +7,7 @@ import FilterForm, {
   FilterValue,
   StatusOptions,
 } from 'components/projects/project/deployments/FilterForm';
-import { OutletContextType } from '../../../../types/types';
+import { OutletContextType } from '../../../../types';
 import { useGQLClient } from 'context/GQLClientContext';
 import { Button } from 'components/shared/Button';
 import { RefreshIcon } from 'components/shared/CustomIcon';
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
index 75e3153e..2de55d8c 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
@@ -4,10 +4,7 @@ import { Link, useNavigate, useOutletContext } from 'react-router-dom';
 import { RequestError } from 'octokit';
 
 import { useOctokit } from '../../../../context/OctokitContext';
-import {
-  GitCommitWithBranch,
-  OutletContextType,
-} from '../../../../types/types';
+import { GitCommitWithBranch, OutletContextType } from '../../../../types';
 import { useGQLClient } from '../../../../context/GQLClientContext';
 import { Button } from 'components/shared/Button';
 import { Heading } from 'components/shared/Heading';
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx b/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx
index 1aad83a7..8f6367be 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Settings.tsx
@@ -1,40 +1,46 @@
 import { useMemo } from 'react';
 import { Link, Outlet, useLocation, useOutletContext } from 'react-router-dom';
 
+import { OutletContextType } from '../../../../types';
 import {
   Tabs,
-  TabsHeader,
-  TabsBody,
-  Tab,
-} from '@snowballtools/material-tailwind-react-fork';
-
-import { OutletContextType } from '../../../../types/types';
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from 'components/shared/Tabs';
+import {
+  BranchStrokeIcon,
+  CollaboratorsIcon,
+  GearIcon,
+  GlobeIcon,
+  SwitchIcon,
+} from 'components/shared/CustomIcon';
 
 const tabsData = [
   {
     label: 'General',
-    icon: '',
+    icon: <GearIcon />,
     value: 'general',
   },
   {
     label: 'Domains',
-    icon: '',
+    icon: <GlobeIcon />,
     value: 'domains',
   },
   {
     label: 'Git',
-    icon: '',
+    icon: <BranchStrokeIcon />,
     value: 'git',
   },
   {
     label: 'Environment variables',
-    icon: '',
+    icon: <SwitchIcon />,
     value: 'environment-variables',
   },
   {
-    label: 'Members',
-    icon: '',
-    value: 'members',
+    label: 'Collaborators',
+    icon: <CollaboratorsIcon />,
+    value: 'collaborators',
   },
 ];
 
@@ -57,31 +63,26 @@ const SettingsTabPanel = () => {
       <Tabs
         value={currentTab}
         orientation="vertical"
-        className="grid grid-cols-4"
+        className="grid grid-cols-5"
       >
-        <TabsHeader
-          className="bg-transparent col-span-1"
-          indicatorProps={{
-            className: 'bg-gray-900/10 shadow-none !text-gray-900',
-          }}
-        >
+        <TabsList className="col-span-1">
           {tabsData.map(({ label, value, icon }) => (
             <Link key={value} to={value === 'general' ? '' : value}>
-              <Tab
+              <TabsTrigger
                 value={value === 'general' ? '' : `/${value}`}
-                className="flex justify-start"
+                className="col-span-1"
               >
-                <div className="flex gap-2">
-                  <div>{icon}</div>
-                  <div>{label}</div>
+                <div className="items-center gap-2 inline-flex">
+                  <div className="items-center">{icon}</div>
+                  <div className="items-center">{label}</div>
                 </div>
-              </Tab>
+              </TabsTrigger>
             </Link>
           ))}
-        </TabsHeader>
-        <TabsBody className="col-span-2">
+        </TabsList>
+        <TabsContent value={currentTab ?? ''} className="col-span-3">
           <Outlet context={{ project, onUpdate }} />
-        </TabsBody>
+        </TabsContent>
       </Tabs>
     </>
   );
diff --git a/packages/frontend/src/pages/org-slug/projects/id/routes.tsx b/packages/frontend/src/pages/org-slug/projects/id/routes.tsx
index 78b15816..4ae7e81d 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/routes.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/routes.tsx
@@ -4,7 +4,7 @@ import SettingsTabPanel from './Settings';
 import GeneralTabPanel from './settings/General';
 import GitTabPanel from './settings/Git';
 import { EnvironmentVariablesTabPanel } from './settings/EnvironmentVariables';
-import MembersTabPanel from './settings/Members';
+import CollaboratorsTabPanel from './settings/Collaborators';
 import Domains from './settings/Domains';
 
 const Integrations = () => (
@@ -34,8 +34,8 @@ export const settingsTabRoutes = [
     element: <EnvironmentVariablesTabPanel />,
   },
   {
-    path: 'members',
-    element: <MembersTabPanel />,
+    path: 'collaborators',
+    element: <CollaboratorsTabPanel />,
   },
 ];
 
diff --git a/packages/frontend/src/pages/org-slug/projects/id/settings/Members.tsx b/packages/frontend/src/pages/org-slug/projects/id/settings/Collaborators.tsx
similarity index 93%
rename from packages/frontend/src/pages/org-slug/projects/id/settings/Members.tsx
rename to packages/frontend/src/pages/org-slug/projects/id/settings/Collaborators.tsx
index 7f118fff..9a343a34 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/settings/Members.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/settings/Collaborators.tsx
@@ -2,11 +2,11 @@ import { useCallback, useEffect, useState } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import { Permission, AddProjectMemberInput, ProjectMember } from 'gql-client';
 
-import MemberCard from '../../../../../components/projects/project/settings/MemberCard';
-import AddMemberDialog from '../../../../../components/projects/project/settings/AddMemberDialog';
+import MemberCard from 'components/projects/project/settings/MemberCard';
+import AddMemberDialog from 'components/projects/project/settings/AddMemberDialog';
 import { useGQLClient } from '../../../../../context/GQLClientContext';
 import { OutletContextType } from '../../../../../types';
-import { useToast } from '../../../../../components/shared/Toast';
+import { useToast } from 'components/shared/Toast';
 import { Button } from 'components/shared/Button';
 import { PlusIcon } from 'components/shared/CustomIcon';
 import { Badge } from 'components/shared/Badge';
@@ -14,7 +14,7 @@ import { Heading } from 'components/shared/Heading';
 
 const FIRST_MEMBER_CARD = 0;
 
-const MembersTabPanel = () => {
+const CollaboratorsTabPanel = () => {
   const client = useGQLClient();
   const { toast } = useToast();
   const { project } = useOutletContext<OutletContextType>();
@@ -160,4 +160,4 @@ const MembersTabPanel = () => {
   );
 };
 
-export default MembersTabPanel;
+export default CollaboratorsTabPanel;
diff --git a/packages/frontend/src/stories/Components/Icons/CollaboratorsIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CollaboratorsIcon.stories.tsx
new file mode 100644
index 00000000..3541b0a4
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/CollaboratorsIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CollaboratorsIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof CollaboratorsIcon> = {
+  title: 'Components/CollaboratorsIcon',
+  component: CollaboratorsIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CollaboratorsIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <CollaboratorsIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/GithubLogoIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GithubLogoIcon.stories.tsx
new file mode 100644
index 00000000..ee5bb425
--- /dev/null
+++ b/packages/frontend/src/stories/Components/Icons/GithubLogoIcon.stories.tsx
@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { GithubLogoIcon } from 'components/shared/CustomIcon';
+
+const meta: Meta<typeof GithubLogoIcon> = {
+  title: 'Icons/GithubLogoIcon',
+  component: GithubLogoIcon,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'text',
+    },
+    name: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GithubLogoIcon>;
+
+export const Default: Story = {
+  render: ({ size, name }) => <GithubLogoIcon size={size} name={name} />,
+  args: {
+    size: '24px',
+    name: 'plus',
+  },
+};
diff --git a/packages/frontend/src/stories/Components/Icons/GitHubLogo.stories.tsx b/packages/frontend/src/stories/Components/Icons/SwitchIcon.stories.tsx
similarity index 53%
rename from packages/frontend/src/stories/Components/Icons/GitHubLogo.stories.tsx
rename to packages/frontend/src/stories/Components/Icons/SwitchIcon.stories.tsx
index 2768d670..f8b3ded9 100644
--- a/packages/frontend/src/stories/Components/Icons/GitHubLogo.stories.tsx
+++ b/packages/frontend/src/stories/Components/Icons/SwitchIcon.stories.tsx
@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { GitHubLogo } from 'components/shared/CustomIcon';
+import { SwitchIcon } from 'components/shared/CustomIcon';
 
-const meta: Meta<typeof GitHubLogo> = {
-  title: 'Icons/GitHubLogo',
-  component: GitHubLogo,
+const meta: Meta<typeof SwitchIcon> = {
+  title: 'Icons/SwitchIcon',
+  component: SwitchIcon,
   tags: ['autodocs'],
   argTypes: {
     size: {
@@ -18,10 +18,10 @@ const meta: Meta<typeof GitHubLogo> = {
 
 export default meta;
 
-type Story = StoryObj<typeof GitHubLogo>;
+type Story = StoryObj<typeof SwitchIcon>;
 
 export const Default: Story = {
-  render: ({ size, name }) => <GitHubLogo size={size} name={name} />,
+  render: ({ size, name }) => <SwitchIcon size={size} name={name} />,
   args: {
     size: '24px',
     name: 'plus',