diff --git a/.idea/misc.xml b/.idea/misc.xml
index 62464c5c..38860e7c 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="CodeInsightWorkspaceSettings">
     <option name="optimizeImportsOnTheFly" value="true" />
diff --git a/app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/AlarmFilterRow.kt b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/AlarmFilterRow.kt
new file mode 100644
index 00000000..f70659bc
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/component/AlarmFilterRow.kt
@@ -0,0 +1,49 @@
+package com.texthip.thip.ui.common.alarmpage.component
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+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.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.buttons.OptionChipButton
+
+@Composable
+fun AlarmFilterRow(
+    selectedStates: BooleanArray,
+    onToggle: (Int) -> Unit
+) {
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(12.dp)
+    ) {
+        OptionChipButton(
+            text = stringResource(R.string.alarm_feed),
+            isFilled = true,
+            onClick = { onToggle(0) }
+        )
+        OptionChipButton(
+            text = stringResource(R.string.alarm_group),
+            isFilled = true,
+            onClick = { onToggle(1) }
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun AlarmFilterRowPreview() {
+    var selectedStates by remember { mutableStateOf(booleanArrayOf(false, false)) }
+
+    AlarmFilterRow(
+        selectedStates = selectedStates,
+        onToggle = { idx ->
+            selectedStates = selectedStates.copyOf().also { it[idx] = !it[idx] }
+        }
+    )
+}
+
diff --git a/app/src/main/java/com/texthip/thip/ui/common/alarmpage/mock/AlarmItem.kt b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/mock/AlarmItem.kt
new file mode 100644
index 00000000..84bc094f
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/mock/AlarmItem.kt
@@ -0,0 +1,10 @@
+package com.texthip.thip.ui.common.alarmpage.mock
+
+data class AlarmItem(
+    val id: Int,
+    val badgeText: String,
+    val title: String,
+    val message: String,
+    val timeAgo: String,
+    var isRead: Boolean
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt
new file mode 100644
index 00000000..cefec058
--- /dev/null
+++ b/app/src/main/java/com/texthip/thip/ui/common/alarmpage/screen/AlarmScreen.kt
@@ -0,0 +1,136 @@
+package com.texthip.thip.ui.common.alarmpage.screen
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Icon
+import androidx.compose.material3.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.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.texthip.thip.R
+import com.texthip.thip.ui.common.alarmpage.component.AlarmFilterRow
+import com.texthip.thip.ui.common.alarmpage.mock.AlarmItem
+import com.texthip.thip.ui.common.cards.CardAlarm
+import com.texthip.thip.ui.common.topappbar.DefaultTopAppBar
+import com.texthip.thip.ui.theme.ThipTheme
+import com.texthip.thip.ui.theme.ThipTheme.colors
+import com.texthip.thip.ui.theme.ThipTheme.typography
+
+@Composable
+fun AlarmScreen(
+    alarmItems: List<AlarmItem>, onCardClick: (AlarmItem) -> Unit = {}
+) {
+    var selectedStates by remember { mutableStateOf(booleanArrayOf(false, false)) }
+    var alarms by remember { mutableStateOf(alarmItems) }
+
+    val filteredList = when {
+        selectedStates[0] && !selectedStates[1] -> alarms.filter { it.badgeText == stringResource(R.string.alarm_feed) }
+        !selectedStates[0] && selectedStates[1] -> alarms.filter { it.badgeText == stringResource(R.string.alarm_group) }
+        else -> alarms
+    }
+
+    Column(
+        Modifier
+            .fillMaxSize()
+    ) {
+        DefaultTopAppBar(
+            title = stringResource(R.string.alarm_string),
+            onLeftClick = {},
+        )
+        Column(
+            Modifier
+                .fillMaxSize()
+                .padding(horizontal = 20.dp)
+        ) {
+            Spacer(modifier = Modifier.height(20.dp))
+            AlarmFilterRow(
+                selectedStates = selectedStates, onToggle = { idx ->
+                    selectedStates = selectedStates.copyOf().also { it[idx] = !it[idx] }
+                })
+            Spacer(modifier = Modifier.height(20.dp))
+
+            if (filteredList.isEmpty()) {
+
+                Column(
+                    modifier = Modifier.fillMaxSize(),
+                    verticalArrangement = Arrangement.Center,
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Icon(
+                        painter = painterResource(R.drawable.ic_notification),
+                        contentDescription = null,
+                        tint = colors.Grey02,
+                    )
+                    Spacer(modifier = Modifier.height(12.dp))
+                    Text(
+                        text = stringResource(R.string.alarm_notification_comment),
+                        style = typography.smalltitle_sb600_s16_h20,
+                        color = colors.Grey01
+                    )
+                }
+            } else {
+                LazyColumn(
+                    verticalArrangement = Arrangement.spacedBy(20.dp),
+                    contentPadding = PaddingValues(bottom = 20.dp),
+                    modifier = Modifier.fillMaxSize()
+                ) {
+                    items(filteredList, key = { it.id }) { alarm ->
+                        CardAlarm(
+                            badgeText = alarm.badgeText,
+                            title = alarm.title,
+                            message = alarm.message,
+                            timeAgo = alarm.timeAgo,
+                            isRead = alarm.isRead,
+                            onClick = {
+                                alarms = alarms.map {
+                                    if (it.id == alarm.id) it.copy(isRead = true) else it
+                                }
+                            })
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+fun AlarmScreenPreview() {
+    ThipTheme {
+        AlarmScreen(
+            alarmItems = listOf(
+                AlarmItem(1, "피드", "내 글을 좋아합니다.", "user123님이 내 글에 좋아요를 눌렀어요.", "2", false),
+                AlarmItem(2, "모임", "같이 읽기를 시작했어요!", "모임방에서 20분 동안 같이 읽기가 시작되었어요!", "7", false),
+                AlarmItem(3, "피드", "내 글에 댓글이 달렸어요.", "user1: 진짜 공감합니다!", "2025.01.12", true),
+                AlarmItem(4, "모임", "투표가 시작되었어요!", "투표지를 먼저 열람합니다.", "17", false)
+            )
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun AlarmScreenEmptyPreview() {
+    ThipTheme {
+        AlarmScreen(
+            alarmItems = emptyList()
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/texthip/thip/ui/common/cards/CardAlarm.kt b/app/src/main/java/com/texthip/thip/ui/common/cards/CardAlarm.kt
index e23d86a6..71e90ff4 100644
--- a/app/src/main/java/com/texthip/thip/ui/common/cards/CardAlarm.kt
+++ b/app/src/main/java/com/texthip/thip/ui/common/cards/CardAlarm.kt
@@ -9,6 +9,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -42,8 +44,8 @@ fun CardAlarm(
     message: String,
     timeAgo: String,
     isRead: Boolean = false,
-    containerColorUnread: Color = colors.DarkGrey,  // 안읽음 상태의 배경색
-    containerColorRead: Color = colors.DarkGrey02, // 읽음 상태의 배경색
+    containerColorUnread: Color = colors.DarkGrey02,  // 안읽음 상태의 배경색
+    containerColorRead: Color = colors.DarkGrey03, // 읽음 상태의 배경색
     onClick: () -> Unit = {}
 ) {
     Card(
@@ -86,11 +88,12 @@ fun CardAlarm(
                     )
                 }
 
-                Spacer(modifier = Modifier.width(12.dp))
+                Spacer(modifier = Modifier.width(8.dp))
 
                 // 내용 (제목, 빨간 점, 시간, 메시지)
                 Column(
-                    modifier = Modifier.weight(1f)
+                    modifier = Modifier.weight(1f),
+                    verticalArrangement = Arrangement.Center
                 ) {
                     Row(
                         modifier = Modifier.fillMaxWidth(),
@@ -98,7 +101,7 @@ fun CardAlarm(
                     ) {
                         Text(
                             text = title,
-                            style = typography.menu_sb600_s14_h24,
+                            style = typography.view_m500_s14,
                             color = if (isRead) colors.Grey01 else colors.White,
                             modifier = Modifier.weight(1f),
                             maxLines = 1,
@@ -110,7 +113,6 @@ fun CardAlarm(
                         ) {
                             // 안읽음 상태일 때만 빨간 점
                             if (!isRead) {
-                                Spacer(modifier = Modifier.width(8.dp))
                                 Box(
                                     modifier = Modifier
                                         .size(6.dp)
@@ -121,15 +123,18 @@ fun CardAlarm(
 
                             Text(
                                 text = timeAgo + stringResource(R.string.time_ago),
-                                style = typography.view_m500_s12_h20,
+                                style = typography.timedate_r400_s11,
                                 color = if (isRead) colors.Grey02 else colors.Grey01,
+                                modifier = Modifier
+                                    .padding(top = 7.dp, end = 2.dp)
+                                    .offset(y = (-5).dp)
                             )
                         }
                     }
                 }
             }
 
-            Spacer(modifier = Modifier.width(12.dp))
+            Spacer(modifier = Modifier.height(10.dp))
 
             Text(
                 text = message,
diff --git a/app/src/main/java/com/texthip/thip/ui/theme/Color.kt b/app/src/main/java/com/texthip/thip/ui/theme/Color.kt
index 18710484..31961f3e 100644
--- a/app/src/main/java/com/texthip/thip/ui/theme/Color.kt
+++ b/app/src/main/java/com/texthip/thip/ui/theme/Color.kt
@@ -35,6 +35,7 @@ val Grey02 = Color(0xFF888888)
 val Grey03 = Color(0xFF525252)
 val DarkGrey = Color(0xFF3D3D3D)
 val DarkGrey50 = Color(0x803D3D3D)
+val DarkGrey03 = Color(0xFF1D1D1D)
 val DarkGrey02 = Color(0xFF282828)
 val DarkGrey01 = Color(0x4B4B4B4B)
 val Black = Color(0xFF121212)
@@ -71,6 +72,7 @@ data class ThipColors(
     val DarkGrey: Color,
     val darkGray01: Color,
     val DarkGrey50: Color,
+    val DarkGrey03: Color,
     val DarkGrey02: Color,
     val Black: Color,
     val Black50: Color,
@@ -106,6 +108,7 @@ val defaultThipColors = ThipColors(
     DarkGrey = DarkGrey,
     darkGray01 = DarkGrey01,
     DarkGrey50 = DarkGrey50,
+    DarkGrey03 = DarkGrey03,
     DarkGrey02 = DarkGrey02,
     Black = Black,
     Black50 = Black50,
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 1880926f..3ec6ca56 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -167,6 +167,12 @@
     <string name="view_by_page">페이지별 보기</string>
     <string name="view_by_all">총평 보기</string>
 
+    <!--    alarm    -->
+    <string name="alarm_feed">피드</string>
+    <string name="alarm_group">모임</string>
+    <string name="alarm_string">알림</string>
+    <string name="alarm_notification_comment">새로운 알림이 없어요</string>
+
     <!--    group makeroom    -->
     <string name="group_making_group">모임 만들기</string>
     <string name="group_saved_book">저장한 책</string>