diff --git a/app/(app)/(tabs)/_layout.tsx b/app/(app)/(tabs)/_layout.tsx
new file mode 100644
index 0000000..50d3712
--- /dev/null
+++ b/app/(app)/(tabs)/_layout.tsx
@@ -0,0 +1,56 @@
+import {Pressable, View} from 'react-native';
+import {Icon, useDooboo} from 'dooboo-ui';
+import {Link, Tabs, useRouter} from 'expo-router';
+
+function SettingsMenu(): JSX.Element {
+  const {theme} = useDooboo();
+  const {push} = useRouter();
+
+  return (
+    <Link asChild href="/modal">
+      <Pressable onPress={() => push('settings')}>
+        {({pressed}) => (
+          <Icon
+            color={theme.text.basic}
+            name="List"
+            size={22}
+            style={{marginRight: 15, opacity: pressed ? 0.5 : 1}}
+          />
+        )}
+      </Pressable>
+    </Link>
+  );
+}
+
+export default function TabLayout(): JSX.Element {
+  const {theme} = useDooboo();
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: theme.role.primary,
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: '커뮤니티',
+          tabBarIcon: () => (
+            <Icon color={theme.text.label} name="Article" size={24} />
+          ),
+          headerRight: () => <View>{SettingsMenu()}</View>,
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: '프로필',
+          tabBarIcon: () => (
+            <Icon color={theme.text.label} name="User" size={24} />
+          ),
+          headerRight: () => <View>{SettingsMenu()}</View>,
+        }}
+      />
+    </Tabs>
+  );
+}
diff --git a/app/(app)/(tabs)/index.tsx b/app/(app)/(tabs)/index.tsx
new file mode 100644
index 0000000..927c346
--- /dev/null
+++ b/app/(app)/(tabs)/index.tsx
@@ -0,0 +1,29 @@
+import {View} from 'react-native';
+import styled, {css} from '@emotion/native';
+import {Fab, Typography} from 'dooboo-ui';
+import {Stack} from 'expo-router';
+
+const Container = styled.View`
+  flex: 1;
+  align-self: stretch;
+  background-color: ${({theme}) => theme.bg.basic};
+`;
+
+export default function Community(): JSX.Element {
+  return (
+    <Container>
+      <Stack.Screen options={{title: '커뮤니티'}} />
+      <Typography.Heading3>커뮤니티</Typography.Heading3>
+      <Fab
+        animationDuration={300}
+        fabIcon="Plus"
+        onPressFab={() => {
+          console.log('onPressFab');
+        }}
+        style={css`
+          bottom: 16px;
+        `}
+      />
+    </Container>
+  );
+}
diff --git a/app/(app)/(tabs)/profile.tsx b/app/(app)/(tabs)/profile.tsx
new file mode 100644
index 0000000..a8d8524
--- /dev/null
+++ b/app/(app)/(tabs)/profile.tsx
@@ -0,0 +1,11 @@
+import {View} from 'react-native';
+import {Typography} from 'dooboo-ui';
+import {Stack} from 'expo-router';
+
+export default function Index(): JSX.Element {
+  return (
+    <View>
+      <Typography.Heading3>프로필</Typography.Heading3>
+    </View>
+  );
+}
diff --git a/app/(app)/index.tsx b/app/(app)/index.tsx
deleted file mode 100644
index f354883..0000000
--- a/app/(app)/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import styled, {css} from '@emotion/native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import {Button, SwitchToggle, useDooboo} from 'dooboo-ui';
-import {Redirect, Stack, useRouter} from 'expo-router';
-import {useRecoilValue} from 'recoil';
-
-import {authRecoilState} from '../../src/recoil/atoms';
-import {t} from '../../src/STRINGS';
-import {AsyncStorageKey} from '../../src/utils/constants';
-
-const Container = styled.View`
-  background-color: ${({theme}) => theme.bg.basic};
-
-  flex: 1;
-  align-self: stretch;
-  justify-content: center;
-  align-items: center;
-`;
-
-const Content = styled.View`
-  padding: 16px;
-
-  justify-content: center;
-  align-items: center;
-`;
-
-export default function Index(): JSX.Element {
-  const {themeType, changeThemeType} = useDooboo();
-  const {push} = useRouter();
-  const authId = useRecoilValue(authRecoilState);
-
-  if (!authId) {
-    return <Redirect href="/sign-in" />;
-  }
-
-  // if (loading) {
-  //   return <LottieView />;
-  // }
-
-  return (
-    <Container>
-      <Stack.Screen
-        options={{
-          title: t('HOME'),
-        }}
-      />
-      <Content>
-        <SwitchToggle
-          isOn={themeType === 'dark'}
-          onPress={() => {
-            const nextTheme = themeType === 'dark' ? 'light' : 'dark';
-            AsyncStorage.setItem(
-              AsyncStorageKey.DarkMode,
-              themeType === 'dark' ? 'false' : 'true',
-            );
-            changeThemeType(nextTheme);
-          }}
-        />
-        <Button
-          onPress={() => push('/details')}
-          style={css`
-            margin-top: 28px;
-            margin-bottom: 40px;
-          `}
-          styles={{
-            text: css`
-              font-family: Pretendard-Bold;
-            `,
-          }}
-          text={t('SEE_DETAILS')}
-        />
-      </Content>
-    </Container>
-  );
-}
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 17b85bc..4e569d4 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -131,6 +131,7 @@ function Layout(): JSX.Element | null {
               ),
           }}
         >
+          <Stack.Screen name="(app)/(tabs)" options={{headerShown: false}} />
           {/* Note: Only modals are written here.  */}
         </Stack>
       </Content>
diff --git a/test/app/index.test.tsx b/test/app/index.test.tsx
index 5043803..f024fac 100644
--- a/test/app/index.test.tsx
+++ b/test/app/index.test.tsx
@@ -3,7 +3,7 @@ import 'react-native';
 import type {RenderAPI} from '@testing-library/react-native';
 import {render, waitFor} from '@testing-library/react-native';
 
-import Page from '../../app/(app)/index';
+import Page from '../../app/(app)/(tabs)/_layout';
 import {createTestElement, createTestProps} from '../testUtils';
 
 let props: any;