diff --git a/src/blocks/tabs/Tabs.styled.ts b/src/blocks/tabs/Tabs.styled.ts
index 0856119cbf..a324c222d9 100644
--- a/src/blocks/tabs/Tabs.styled.ts
+++ b/src/blocks/tabs/Tabs.styled.ts
@@ -9,6 +9,7 @@ export const StyledFillTabs = styled(ReachTabs)`
 `;
 
 export const StyledFillTabList = styled(TabList)`
+  overflow: scroll hidden;
   display: flex;
   width: fit-content;
   padding: var(--spacing-xxxs);
@@ -68,6 +69,7 @@ export const StyledLineTabs = styled(ReachTabs)`
 `;
 
 export const StyledLineTabList = styled(TabList)`
+  overflow: scroll hidden;
   display: flex;
   background-color: var(--surface-transparent);
   gap: var(--spacing-xs);
@@ -119,6 +121,7 @@ export const StyledLineTab = styled(Tab)`
 `;
 
 export const StyledTabLabel = styled.span`
+  white-space: nowrap;
   font-family: var(--font-family);
   font-size: ${textVariants['h5-semibold'].fontSize};
   font-style: ${textVariants['h5-semibold'].fontStyle};
diff --git a/src/modules/rewards/components/RewardsTabs.tsx b/src/modules/rewards/components/RewardsTabs.tsx
deleted file mode 100644
index f4ab8a58a2..0000000000
--- a/src/modules/rewards/components/RewardsTabs.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { FC } from 'react';
-
-import { css } from 'styled-components';
-
-import { rewardsTabsList } from '../Rewards.constants';
-
-import { Box, Text } from 'blocks';
-
-import { RewardsTabs as RewardsTabsType } from '../Rewards.types';
-
-export type RewardsTabsProps = {
-  activeTab: RewardsTabsType;
-  handleSetActiveTab: (tab: RewardsTabsType) => void;
-};
-
-const RewardsTabs: FC<RewardsTabsProps> = ({ activeTab, handleSetActiveTab }) => {
-  // TODO: Use tab component
-  return (
-    <Box
-      display="flex"
-      gap="spacing-xs"
-      css={css`
-        border-bottom: var(--border-sm) solid var(--stroke-secondary);
-      `}
-      justifyContent={{ ml: 'space-between', initial: 'flex-start' }}
-    >
-      {rewardsTabsList.map((tab) => (
-        <Box
-          key={`${tab.value}`}
-          padding={{
-            ml: 'spacing-none spacing-none spacing-xs spacing-none',
-            initial: 'spacing-none spacing-sm spacing-sm spacing-sm',
-          }}
-          cursor="pointer"
-          onClick={() => handleSetActiveTab(tab.value)}
-          css={css`
-            margin-bottom: -1px;
-            border-bottom: ${tab.value === activeTab ? 'var(--border-md) solid var(--stroke-brand-medium)' : '0px'};
-          `}
-        >
-          <Text
-            variant="h5-semibold"
-            display={{ ml: 'none', dp: 'block' }}
-            color="text-primary"
-          >
-            {tab.label}
-          </Text>
-          <Text
-            variant="h6-semibold"
-            display={{ ml: 'block', dp: 'none' }}
-            color="text-primary"
-          >
-            {tab.label}
-          </Text>
-        </Box>
-      ))}
-    </Box>
-  );
-};
-
-export { RewardsTabs };
diff --git a/src/modules/rewards/components/RewardsTabsContainer.tsx b/src/modules/rewards/components/RewardsTabsContainer.tsx
index caa311e9bf..dc43571bf0 100644
--- a/src/modules/rewards/components/RewardsTabsContainer.tsx
+++ b/src/modules/rewards/components/RewardsTabsContainer.tsx
@@ -1,12 +1,11 @@
 import { FC } from 'react';
 
 //Components
-import { Box } from 'blocks';
-import { RewardsTabs } from './RewardsTabs';
+import { Box, TabItem, Tabs } from 'blocks';
 import { DashboardSection } from './DashboardSection';
 import { LeaderBoardSection } from './LeaderBoardSection';
 import { RewardsActivitiesSection } from './RewardsActivitiesSection';
-import { RewardsTabs as RewardsTabsType } from '../Rewards.types';
+import { RewardsTabs, RewardsTabs as RewardsTabsType } from '../Rewards.types';
 
 export type RewardsTabsContainerProps = {
   activeTab: RewardsTabsType;
@@ -14,6 +13,23 @@ export type RewardsTabsContainerProps = {
 };
 
 const RewardsTabsContainer: FC<RewardsTabsContainerProps> = ({ activeTab, handleSetActiveTab }) => {
+  const rewardsTabs: TabItem[] = [
+    {
+      key: 'dashboard',
+      label: 'Dashboard',
+      children: <DashboardSection onGetStarted={() => handleSetActiveTab('activity')} />,
+    },
+    {
+      key: 'activity',
+      label: 'Reward Activities',
+      children: <RewardsActivitiesSection />,
+    },
+    {
+      key: 'leaderboard',
+      label: 'Leaderboard',
+      children: <LeaderBoardSection />,
+    },
+  ];
   return (
     <Box
       backgroundColor="surface-primary"
@@ -27,14 +43,11 @@ const RewardsTabsContainer: FC<RewardsTabsContainerProps> = ({ activeTab, handle
         display="flex"
         flexDirection="column"
       >
-        <RewardsTabs
-          activeTab={activeTab}
-          handleSetActiveTab={handleSetActiveTab}
+        <Tabs
+          items={rewardsTabs}
+          activeKey={activeTab}
+          onChange={(activeKey) => handleSetActiveTab(activeKey as RewardsTabs)}
         />
-
-        {activeTab === 'dashboard' && <DashboardSection onGetStarted={() => handleSetActiveTab('activity')} />}
-        {activeTab === 'activity' && <RewardsActivitiesSection />}
-        {activeTab === 'leaderboard' && <LeaderBoardSection />}
       </Box>
     </Box>
   );