diff --git a/src/App.tsx b/src/App.tsx
index 61b16250..59b7f8de 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,7 @@ import {
 } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { RouterProvider } from 'react-router-dom'
-import { ThemeProvider, ToastProvider } from './components'
+import { TabsProvider, ThemeProvider, ToastProvider } from './components'
 import { router } from './routes'
 
 const queryClient = new QueryClient({
@@ -31,7 +31,9 @@ function App() {
     <ToastProvider>
       <QueryClientProvider client={queryClient}>
         <ThemeProvider>
-          <RouterProvider router={router} />
+          <TabsProvider>
+            <RouterProvider router={router} />
+          </TabsProvider>
         </ThemeProvider>
         <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>
diff --git a/src/components/TabsProvider/index.tsx b/src/components/TabsProvider/index.tsx
new file mode 100644
index 00000000..8cfeec37
--- /dev/null
+++ b/src/components/TabsProvider/index.tsx
@@ -0,0 +1,15 @@
+import { PropsWithChildren, useState } from 'react'
+import { TabsContext } from '@/contexts'
+import { Tabs } from '@/types'
+
+const TabsProvider = ({ children }: PropsWithChildren) => {
+  const [activeTab, setActiveTab] = useState<Tabs>('invited')
+
+  return (
+    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+      {children}
+    </TabsContext.Provider>
+  )
+}
+
+export default TabsProvider
diff --git a/src/components/index.ts b/src/components/index.ts
index 636e3fb8..a8cb913b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -7,6 +7,7 @@ export { default as SearchBar } from './SearchBar'
 export { default as Input } from './Input'
 export { default as Header } from './Header'
 export { default as ThemeProvider } from './ThemeProvider'
+export { default as TabsProvider } from './TabsProvider'
 export { default as Dropdown } from './Dropdown'
 export { default as Modal } from './Modal'
 export { default as ReviewInfo } from './ReviewInfo'
diff --git a/src/contexts/TabsContext.tsx b/src/contexts/TabsContext.tsx
new file mode 100644
index 00000000..55ea43ac
--- /dev/null
+++ b/src/contexts/TabsContext.tsx
@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction, createContext } from 'react'
+import { Tabs } from '@/types'
+
+interface TabsContextType {
+  activeTab: Tabs
+  setActiveTab: Dispatch<SetStateAction<Tabs>>
+}
+
+const TabsContext = createContext<TabsContextType>({
+  activeTab: 'invited',
+  setActiveTab: () => {},
+})
+
+export default TabsContext
diff --git a/src/contexts/index.ts b/src/contexts/index.ts
index 68433aca..79fe5743 100644
--- a/src/contexts/index.ts
+++ b/src/contexts/index.ts
@@ -1,2 +1,3 @@
 export { default as ThemeContext } from './ThemeContext'
 export { default as ToastContext } from './ToastContext'
+export { default as TabsContext } from './TabsContext'
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 3bbc1092..b8b640ef 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -6,3 +6,4 @@ export { default as useToast } from './useToast'
 export { default as useInfiniteScroll } from './useInfiniteScroll'
 export { default as useRefine } from './useRefine'
 export { default as useCheckHeaderRoute } from './useCheckHeaderRoute'
+export { default as useTabs } from './useTabs'
diff --git a/src/hooks/useTabs.ts b/src/hooks/useTabs.ts
new file mode 100644
index 00000000..9e29ba89
--- /dev/null
+++ b/src/hooks/useTabs.ts
@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+import { TabsContext } from '@/contexts'
+
+const useTabs = () => {
+  return useContext(TabsContext)
+}
+
+export default useTabs
diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx
index 1b1148c5..48137117 100644
--- a/src/pages/MainPage/index.tsx
+++ b/src/pages/MainPage/index.tsx
@@ -1,6 +1,6 @@
-import { Suspense, useState } from 'react'
+import { Suspense } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useToast } from '@/hooks'
+import { useTabs, useToast } from '@/hooks'
 import { Header, TokenErrorBoundary } from '@/components'
 import { useDeleteReview } from '@/apis/hooks'
 import { rangerIdle } from '@/assets/images'
@@ -20,9 +20,7 @@ const MainPage = () => {
 
   const navigate = useNavigate()
 
-  const [activeTab, setActiveTab] = useState<
-    'invited' | 'created' | 'received'
-  >('invited')
+  const { activeTab, setActiveTab } = useTabs()
 
   const { addToast } = useToast()
 
diff --git a/src/types/index.ts b/src/types/index.ts
index 8b8760ff..fc7b6aec 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,2 +1,3 @@
 export * from './reviews'
 export * from './reviewDetailed'
+export * from './tabs'
diff --git a/src/types/tabs.ts b/src/types/tabs.ts
new file mode 100644
index 00000000..1fc00362
--- /dev/null
+++ b/src/types/tabs.ts
@@ -0,0 +1 @@
+export type Tabs = 'invited' | 'created' | 'received'