diff --git a/presentation/src/main/java/com/msg/presentation/view/home/component/Cafeteria.kt b/presentation/src/main/java/com/msg/presentation/view/home/component/Cafeteria.kt
new file mode 100644
index 00000000..5e90609a
--- /dev/null
+++ b/presentation/src/main/java/com/msg/presentation/view/home/component/Cafeteria.kt
@@ -0,0 +1,106 @@
+package com.msg.presentation.view.home.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Surface
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.dotori.dotori_components.components.button.DotoriSegmentedButtons
+import com.dotori.dotori_components.theme.DotoriTheme
+import com.msg.presentation.R
+import java.time.LocalDate
+
+@Composable
+fun Cafeteria(
+    modifier: Modifier = Modifier
+) {
+    var date by remember { mutableStateOf(LocalDate.now()) }
+    var list = mutableListOf("조식", "중식", "석식")
+
+    Surface(
+        modifier = modifier
+            .fillMaxWidth()
+            .aspectRatio(160 / 281f),
+        color = DotoriTheme.colors.cardBackground,
+        shape = RoundedCornerShape(16.dp),
+        elevation = 8.dp
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(24.dp),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.SpaceBetween
+        ) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.SpaceBetween
+            ) {
+                Text(
+                    text = stringResource(R.string.cafeteria),
+                    style = DotoriTheme.typography.subTitle2,
+                    color = DotoriTheme.colors.neutral10
+                )
+                Spacer(modifier = modifier.weight(1f))
+                CalendarHeader(
+                    title = date,
+                    onLeftClicked = { date.minusDays(1) },
+                    onRightClicked = { date.plusDays(1) }
+                )
+            }
+            DotoriSegmentedButtons(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(50.dp),
+                textPadding = 13.dp,
+                rowPadding = 4.dp,
+                outRoundedCornerShape = 4.dp,
+                innerRoundedCornerShape = 8.dp,
+                sectionNames = list,
+                onSwitchClick = {}
+            )
+            Surface(
+                modifier = modifier
+                    .fillMaxWidth()
+                    .aspectRatio(271 / 398f),
+                color = DotoriTheme.colors.neutral50,
+                shape = RoundedCornerShape(16.dp)
+            ) {
+                Column(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(24.dp)
+                ) {
+                    Text(
+                        text = "급식이 없습니다.",
+                        style = DotoriTheme.typography.subTitle2,
+                        color = DotoriTheme.colors.neutral10
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun CafeteriaPre() {
+    Cafeteria()
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/msg/presentation/view/home/component/CalendarHeader.kt b/presentation/src/main/java/com/msg/presentation/view/home/component/CalendarHeader.kt
new file mode 100644
index 00000000..8359afe5
--- /dev/null
+++ b/presentation/src/main/java/com/msg/presentation/view/home/component/CalendarHeader.kt
@@ -0,0 +1,69 @@
+package com.msg.presentation.view.home.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.dotori.dotori_components.theme.DotoriTheme
+import com.msg.presentation.R
+import java.time.LocalDate
+import java.time.format.DateTimeFormatter
+import java.time.format.TextStyle
+import java.util.Locale
+
+@Composable
+fun CalendarHeader(
+    modifier: Modifier = Modifier,
+    title: LocalDate,
+    onLeftClicked: () -> Unit,
+    onRightClicked: () -> Unit
+) {
+    val dayOfWeek = title.dayOfWeek.getDisplayName(TextStyle.NARROW, Locale.KOREAN)
+    val formattedDate = DateTimeFormatter.ofPattern("yyyy.MM.dd").format(title)
+
+    Row(
+        modifier = modifier.background(color = DotoriTheme.colors.cardBackground),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        Image(
+            modifier = Modifier.clickable { onLeftClicked() },
+            painter = painterResource(R.drawable.ic_left_icon),
+            contentDescription = "previous"
+        )
+        Text(
+            text = "$formattedDate ($dayOfWeek)",
+            style = DotoriTheme.typography.body2,
+            color = DotoriTheme.colors.neutral20
+        )
+        Image(
+            modifier = Modifier.clickable { onRightClicked() },
+            painter = painterResource(R.drawable.ic_right_icon),
+            contentDescription = "previous"
+        )
+    }
+}
+
+@Preview
+@Composable
+fun CalendarHeaderPre() {
+    var date by remember { mutableStateOf(LocalDate.now()) }
+
+    CalendarHeader(
+        title = date,
+        onLeftClicked = { date = date.minusDays(1) },
+        onRightClicked = { date = date.plusDays(1) }
+    )
+}
\ No newline at end of file
diff --git a/presentation/src/main/res/drawable/ic_left_icon.xml b/presentation/src/main/res/drawable/ic_left_icon.xml
new file mode 100644
index 00000000..7bd62bfe
--- /dev/null
+++ b/presentation/src/main/res/drawable/ic_left_icon.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="28dp"
+    android:height="28dp"
+    android:viewportWidth="28"
+    android:viewportHeight="28">
+  <path
+      android:pathData="M17,0L11,0A11,11 0,0 0,0 11L0,17A11,11 0,0 0,11 28L17,28A11,11 0,0 0,28 17L28,11A11,11 0,0 0,17 0z"
+      android:fillColor="#F2F2F4"/>
+  <path
+      android:pathData="M16,9L11.177,13.823C11.079,13.921 11.079,14.079 11.177,14.177L16,19"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#656B80"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/presentation/src/main/res/drawable/ic_right_icon.xml b/presentation/src/main/res/drawable/ic_right_icon.xml
new file mode 100644
index 00000000..58ba4a43
--- /dev/null
+++ b/presentation/src/main/res/drawable/ic_right_icon.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="28dp"
+    android:height="28dp"
+    android:viewportWidth="28"
+    android:viewportHeight="28">
+  <path
+      android:pathData="M11,0L17,0A11,11 0,0 1,28 11L28,17A11,11 0,0 1,17 28L11,28A11,11 0,0 1,0 17L0,11A11,11 0,0 1,11 0z"
+      android:fillColor="#F2F2F4"/>
+  <path
+      android:pathData="M12,9L16.823,13.823C16.921,13.921 16.921,14.079 16.823,14.177L12,19"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#656B80"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/presentation/src/main/res/values/string.xml b/presentation/src/main/res/values/string.xml
index d367c278..6d56a8e8 100644
--- a/presentation/src/main/res/values/string.xml
+++ b/presentation/src/main/res/values/string.xml
@@ -1,4 +1,5 @@
 <resources>
     <string name = "login_page_dotori_description">광주소프트웨어마이스터고 기숙사 관리 시스템, DOTORI</string>
     <string name = "login_text">로그인</string>
+    <string name = "cafeteria">급식</string>
 </resources>
\ No newline at end of file