diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt
index 26740ef59..91cc27cb5 100644
--- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt
+++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/CenterTitleTopBar.kt
@@ -26,7 +26,6 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.ku_stacks.ku_ring.designsystem.R
-import com.ku_stacks.ku_ring.designsystem.theme.CaptionGray1
 import com.ku_stacks.ku_ring.designsystem.theme.CaptionGray2
 import com.ku_stacks.ku_ring.designsystem.theme.KuringTheme
 import com.ku_stacks.ku_ring.designsystem.theme.Pretendard
@@ -40,6 +39,7 @@ import com.ku_stacks.ku_ring.designsystem.theme.Pretendard
  * @param navigation 텍스트 왼쪽에 표시할 navigation indicator. 주로 뒤로 가기 아이콘이 사용되나, `취소` 등의 텍스트를 사용할 수도 있다.
  * @param onNavigationClick 내비게이션 컴포넌트를 클릭할 때 실행할 콜백.
  * @param navigationClickLabel 내비게이션 클릭 콜백을 설명하는 텍스트. 콜백이 null이 아니라면 접근성을 위해 제공하는 것이 좋다.
+ * @param navigationContentColor 내비게이션 컴포넌트의 content color. [LocalContentColor]에 전달된다.
  * @param action 텍스트 오른쪽에 표시될 작업 텍스트. `완료`, `전송` 등의 텍스트가 사용될 수 있다.
  * @param onActionClick 액션 텍스트를 클릭할 때 실행할 콜백.
  * @param actionClickLabel 액션 클릭 콜백을 설명하는 텍스트. 콜백이 null이 아니라면 접근성을 위해 제공하는 것이 좋다.
@@ -51,6 +51,9 @@ fun CenterTitleTopBar(
     navigation: @Composable () -> Unit = {},
     onNavigationClick: (() -> Unit)? = null,
     navigationClickLabel: String? = null,
+    // 현재 디자인된 Gray600 색깔은 다크 모드에서 거의 보이지 않음
+    // 따라서 임시로 onSurface를 사용하고, 다크 모드 디자인이 나오면 다시 수정
+    navigationContentColor: Color = MaterialTheme.colors.onSurface,
     action: String = "",
     onActionClick: (() -> Unit)? = null,
     actionClickLabel: String? = null,
@@ -60,6 +63,7 @@ fun CenterTitleTopBar(
         navigation = navigation,
         onNavigationClick = onNavigationClick,
         navigationClickLabel = navigationClickLabel,
+        navigationContentColor = navigationContentColor,
         action = {
             Text(
                 text = action,
@@ -87,6 +91,7 @@ fun CenterTitleTopBar(
  * @param navigation 텍스트 왼쪽에 표시할 navigation indicator. 주로 뒤로 가기 아이콘이 사용되나, `취소` 등의 텍스트를 사용할 수도 있다.
  * @param onNavigationClick 내비게이션 컴포넌트를 클릭할 때 실행할 콜백.
  * @param navigationClickLabel 내비게이션 클릭 콜백을 설명하는 텍스트. 콜백이 null이 아니라면 접근성을 위해 제공하는 것이 좋다.
+ * @param navigationContentColor 내비게이션 컴포넌트의 content color. [LocalContentColor]에 전달된다.
  * @param action 텍스트 오른쪽에 표시될 작업. [Icon] 등을 넣을 수 있다.
  * @param onActionClick 액션 텍스트를 클릭할 때 실행할 콜백.
  * @param actionClickLabel 액션 클릭 콜백을 설명하는 텍스트. 콜백이 null이 아니라면 접근성을 위해 제공하는 것이 좋다.
@@ -98,12 +103,15 @@ fun CenterTitleTopBar(
     navigation: @Composable () -> Unit = {},
     onNavigationClick: (() -> Unit)? = null,
     navigationClickLabel: String? = null,
+    // 현재 디자인된 Gray600 색깔은 다크 모드에서 거의 보이지 않음
+    // 따라서 임시로 onSurface를 사용하고, 다크 모드 디자인이 나오면 다시 수정
+    navigationContentColor: Color = MaterialTheme.colors.onSurface,
     action: @Composable () -> Unit = {},
     onActionClick: (() -> Unit)? = null,
     actionClickLabel: String? = null,
 ) {
     val backgroundColor = MaterialTheme.colors.surface
-    val contentPadding = PaddingValues(13.dp)
+    val contentPadding = PaddingValues(horizontal = 20.dp, vertical = 16.dp)
     Box(
         modifier = modifier
             .background(backgroundColor)
@@ -112,6 +120,7 @@ fun CenterTitleTopBar(
     ) {
         Navigation(
             navigationIcon = navigation,
+            navigationContentColor = navigationContentColor,
             onNavigationClick = onNavigationClick,
             navigationClickLabel = navigationClickLabel,
             contentPadding = contentPadding,
@@ -180,12 +189,13 @@ private fun TopBarTitle(
 @Composable
 private fun Navigation(
     navigationIcon: @Composable () -> Unit,
+    navigationContentColor: Color,
     modifier: Modifier = Modifier,
     onNavigationClick: (() -> Unit)? = null,
     navigationClickLabel: String? = null,
     contentPadding: PaddingValues = PaddingValues(0.dp),
 ) {
-    CompositionLocalProvider(LocalContentColor provides CaptionGray1) {
+    CompositionLocalProvider(LocalContentColor provides navigationContentColor) {
         LazyColumn(
             modifier = modifier.clickable(
                 onClick = { onNavigationClick?.invoke() },
diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/DepartmentItems.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/DepartmentItems.kt
index b91475bcd..cf6d48f81 100644
--- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/DepartmentItems.kt
+++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/DepartmentItems.kt
@@ -2,6 +2,7 @@ package com.ku_stacks.ku_ring.designsystem.components
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -16,6 +17,7 @@ import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.material.contentColorFor
+import androidx.compose.material.minimumInteractiveComponentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -23,13 +25,18 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.ku_stacks.ku_ring.designsystem.R
+import com.ku_stacks.ku_ring.designsystem.theme.Gray300
 import com.ku_stacks.ku_ring.designsystem.theme.KuringTheme
+import com.ku_stacks.ku_ring.designsystem.theme.MainPrimarySelected
 import com.ku_stacks.ku_ring.designsystem.theme.Pretendard
+import com.ku_stacks.ku_ring.designsystem.theme.TextCaption1
 import com.ku_stacks.ku_ring.domain.Department
 
 @Composable
@@ -38,7 +45,7 @@ fun DepartmentWithDeleteIcon(
     onDeleteDepartment: (Department) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Department(
+    BaseDepartment(
         department = department,
         modifier = modifier,
     ) {
@@ -46,7 +53,7 @@ fun DepartmentWithDeleteIcon(
             SelectedDepartmentMark()
         }
         Spacer(modifier = Modifier.weight(1f))
-        DeleteIconButton(onClick = { onDeleteDepartment(department) })
+        DeleteButton(onClick = { onDeleteDepartment(department) })
     }
 }
 
@@ -56,7 +63,7 @@ fun DepartmentWithAddIcon(
     onAddDepartment: (Department) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Department(
+    BaseDepartment(
         department = department,
         modifier = modifier,
     ) {
@@ -71,7 +78,7 @@ fun DepartmentWithCheckIcon(
     onClickDepartment: (Department) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    Department(
+    BaseDepartment(
         department = department,
         modifier = modifier,
     ) {
@@ -88,15 +95,15 @@ private fun SelectedDepartmentMark(
     Box(
         modifier = modifier
             .clip(shape)
-            .background(MaterialTheme.colors.surface, shape)
+            .background(MainPrimarySelected, shape)
             .border(0.5.dp, MaterialTheme.colors.primary, shape)
-            .padding(horizontal = 8.dp),
+            .padding(horizontal = 8.dp, vertical = 2.dp),
     ) {
         Text(
             text = stringResource(id = R.string.selected_department),
             style = TextStyle(
-                fontSize = 11.sp,
-                lineHeight = 17.93.sp,
+                fontSize = 12.sp,
+                lineHeight = 19.56.sp,
                 fontFamily = Pretendard,
                 fontWeight = FontWeight(600),
                 color = MaterialTheme.colors.primary,
@@ -106,21 +113,25 @@ private fun SelectedDepartmentMark(
 }
 
 @Composable
-private fun DeleteIconButton(
+private fun DeleteButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
-    contentDescription: String? = null,
 ) {
-    IconButton(
-        onClick = onClick,
-        modifier = modifier,
-    ) {
-        Icon(
-            painter = painterResource(id = R.drawable.ic_trashcan),
-            contentDescription = contentDescription,
-            tint = contentColorFor(backgroundColor = MaterialTheme.colors.surface),
-        )
-    }
+    Text(
+        text = stringResource(id = R.string.notice_item_delete_button),
+        style = TextStyle(
+            fontSize = 16.sp,
+            lineHeight = 24.sp,
+            fontFamily = Pretendard,
+            fontWeight = FontWeight(500),
+            color = TextCaption1,
+            textAlign = TextAlign.End,
+        ),
+        modifier = modifier
+            .clip(RoundedCornerShape(50))
+            .clickable(onClick = onClick, role = Role.Button)
+            .minimumInteractiveComponentSize(),
+    )
 }
 
 @Composable
@@ -136,7 +147,7 @@ private fun AddIconButton(
         Icon(
             painter = painterResource(id = R.drawable.ic_add),
             contentDescription = contentDescription,
-            tint = contentColorFor(backgroundColor = MaterialTheme.colors.surface),
+            tint = Gray300,
         )
     }
 }
@@ -160,7 +171,7 @@ private fun CheckIconButton(
 }
 
 @Composable
-private fun Department(
+private fun BaseDepartment(
     department: Department,
     modifier: Modifier = Modifier,
     contents: @Composable RowScope.() -> Unit = {},
@@ -169,9 +180,9 @@ private fun Department(
     Row(
         modifier = modifier
             .background(backgroundColor)
-            .padding(start = 24.dp, end = 12.dp),
+            .padding(horizontal = 24.dp),
         verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
     ) {
         DepartmentTitle(
             departmentName = department.koreanName,
diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringAlertDialog.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringAlertDialog.kt
index ff0d12e9c..9a436adbf 100644
--- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringAlertDialog.kt
+++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringAlertDialog.kt
@@ -169,7 +169,7 @@ private fun KuringAlertDialogButton(
             ),
             modifier = Modifier
                 .align(Alignment.Center)
-                .padding(vertical = 16.dp),
+                .padding(vertical = 20.dp),
         )
     }
 }
@@ -179,7 +179,7 @@ private fun KuringAlertDialogButton(
 private fun KuringAlertDialogPreview() {
     KuringTheme {
         KuringAlertDialog(
-            text = "스마트ICT융합공학과를\n삭제하시겠습니까?",
+            text = "스마트ICT융합공학과를\n내 학과 목록에 추가할까요?",
             onConfirm = {},
             onDismiss = {},
             modifier = Modifier.padding(16.dp),
diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringCallToAction.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringCallToAction.kt
index 73b4fe6b7..597ede064 100644
--- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringCallToAction.kt
+++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/KuringCallToAction.kt
@@ -2,6 +2,7 @@ package com.ku_stacks.ku_ring.designsystem.components
 
 import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -12,28 +13,33 @@ import androidx.compose.material.MaterialTheme
 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.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.ku_stacks.ku_ring.designsystem.theme.Gray200
+import com.ku_stacks.ku_ring.designsystem.theme.Gray300
 import com.ku_stacks.ku_ring.designsystem.theme.KuringSub
 import com.ku_stacks.ku_ring.designsystem.theme.KuringTheme
+import com.ku_stacks.ku_ring.designsystem.theme.MainPrimarySelected
 import com.ku_stacks.ku_ring.designsystem.theme.Pretendard
 
 /**
  * 쿠링 앱에서 사용될 CTA 버튼이다.
- * 주로 화면 하단에 위치하며, 사용자가 수행할 메인 작업을 표현한다.
+ * 화면 하단에 위치하며, 사용자가 수행할 메인 작업을 표현한다.
  *
  * @param text CTA에 보여줄 텍스트
  * @param onClick CTA를 클릭했을 때 실행할 콜백
  * @param modifier CTA에 적용될 [Modifier]
  * @param enabled CTA 버튼이 활성화되었는지를 나타낸다. true라면 배경색이 [MaterialTheme.colors.primary]로 설정되며,
  * false라면 배경색이 [KuringSub]로 설정된다. 컨텐츠 색깔은 둘 중 배경색으로 사용되지 않은 나머지 색으로 설정된다.
+ * @param blur 버튼 위에 블러 효과를 적용할 지 결정한다. 블러는 버튼 위에 버튼 높이의 1/4만큼 그려진다.
  */
 @Composable
 fun KuringCallToAction(
@@ -41,13 +47,19 @@ fun KuringCallToAction(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
+    blur: Boolean = false,
 ) {
-    KuringCallToAction(onClick = onClick, enabled = enabled, modifier = modifier) {
+    KuringCallToAction(
+        onClick = onClick,
+        enabled = enabled,
+        modifier = modifier,
+        blur = blur,
+    ) {
         Text(
             text = text,
             style = TextStyle(
                 fontSize = 16.sp,
-                lineHeight = 26.08.sp,
+                lineHeight = 24.sp,
                 fontFamily = Pretendard,
                 fontWeight = FontWeight(600),
             ),
@@ -57,24 +69,27 @@ fun KuringCallToAction(
 
 /**
  * 쿠링 앱에서 사용될 CTA 버튼이다.
- * 주로 화면 하단에 위치하며, 사용자가 수행할 메인 작업을 표현한다.
+ * 화면 하단에 위치하며, 사용자가 수행할 메인 작업을 표현한다.
  *
  * @param onClick CTA를 클릭했을 때 실행할 콜백
  * @param modifier CTA에 적용될 [Modifier]
  * @param enabled CTA 버튼이 활성화되었는지를 나타낸다. true라면 배경색이 [MaterialTheme.colors.primary]로 설정되며,
  * false라면 배경색이 [KuringSub]로 설정된다. 컨텐츠 색깔은 둘 중 배경색으로 사용되지 않은 나머지 색으로 설정된다.
+ * @param blur 버튼 위에 블러 효과를 적용할 지 결정한다. 블러는 버튼 위에 버튼 높이의 1/4만큼 그려진다.
  */
 @Composable
 fun KuringCallToAction(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
+    blur: Boolean = false,
     contents: @Composable () -> Unit,
 ) {
     KuringCallToActionBase(
         onClick = onClick,
         paddingValues = PaddingValues(horizontal = 50.dp, vertical = 16.dp),
         enabled = enabled,
+        blur = blur,
         modifier = modifier,
         contents = contents,
     )
@@ -85,18 +100,38 @@ private fun KuringCallToActionBase(
     onClick: () -> Unit,
     paddingValues: PaddingValues,
     enabled: Boolean,
+    blur: Boolean,
     modifier: Modifier = Modifier,
     contents: @Composable () -> Unit,
 ) {
     val backgroundColor by animateColorAsState(
-        targetValue = if (enabled) MaterialTheme.colors.primary else KuringSub,
+        targetValue = if (enabled) MaterialTheme.colors.primary else Gray200,
         label = "background color",
     )
     val contentColor by animateColorAsState(
-        targetValue = if (enabled) KuringSub else MaterialTheme.colors.primary,
+        targetValue = if (enabled) MainPrimarySelected else Gray300,
         label = "content color",
     )
 
+    val blurModifier = if (blur) {
+        val surfaceColor = MaterialTheme.colors.surface
+        Modifier.drawBehind {
+            val gradientHeight = size.height * 0.3f
+            val gradientBrush = Brush.verticalGradient(
+                colors = listOf(Color.Transparent, surfaceColor),
+                startY = -gradientHeight,
+                endY = 0f,
+            )
+            drawRect(
+                brush = gradientBrush,
+                topLeft = Offset(x = 0f, y = -gradientHeight),
+                size = Size(width = size.width, height = gradientHeight),
+            )
+        }
+    } else {
+        Modifier
+    }
+
     Button(
         onClick = onClick,
         colors = ButtonDefaults.textButtonColors(
@@ -106,7 +141,9 @@ private fun KuringCallToActionBase(
         shape = RoundedCornerShape(50),
         elevation = null,
         contentPadding = paddingValues,
-        modifier = modifier,
+        modifier = modifier
+            .then(blurModifier)
+            .padding(horizontal = 20.dp, vertical = 16.dp),
     ) {
         contents()
     }
@@ -114,18 +151,38 @@ private fun KuringCallToActionBase(
 
 @LightAndDarkPreview
 @Composable
-private fun KuringCallToActionPreview() {
-    var isEnabled by remember { mutableStateOf(false) }
-
+private fun KuringCallToActionPreview_Enabled() {
     KuringTheme {
         KuringCallToAction(
             text = "완료",
-            enabled = isEnabled,
-            onClick = { isEnabled = !isEnabled },
+            enabled = true,
+            onClick = { },
             modifier = Modifier
-                .background(Color.Gray)
-                .padding(16.dp)
+                .background(MaterialTheme.colors.surface)
                 .fillMaxWidth(),
         )
     }
+}
+
+@LightAndDarkPreview
+@Composable
+private fun KuringCallToActionPreview_Enabled_Blur() {
+    KuringTheme {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(Color.Gray)
+                .padding(top = 30.dp),
+        ) {
+            KuringCallToAction(
+                text = "완료",
+                enabled = true,
+                blur = true,
+                onClick = { },
+                modifier = Modifier
+                    .background(MaterialTheme.colors.surface)
+                    .fillMaxWidth(),
+            )
+        }
+    }
 }
\ No newline at end of file
diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt
index a442dc424..5f090ee40 100644
--- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt
+++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/NoticeItem.kt
@@ -2,262 +2,199 @@ package com.ku_stacks.ku_ring.designsystem.components
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.alpha
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.ColorFilter
-import androidx.compose.ui.graphics.asImageBitmap
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import androidx.constraintlayout.compose.ConstraintLayout
-import androidx.constraintlayout.compose.Dimension
-import androidx.core.content.res.ResourcesCompat
-import androidx.core.graphics.drawable.toBitmap
 import com.ku_stacks.ku_ring.designsystem.R
 import com.ku_stacks.ku_ring.designsystem.theme.KuringTheme
-import com.ku_stacks.ku_ring.designsystem.theme.SfProDisplay
+import com.ku_stacks.ku_ring.designsystem.theme.Pretendard
 import com.ku_stacks.ku_ring.domain.Notice
 
+/**
+ * 공지를 보여주는 컴포넌트이다.
+ *
+ * @param notice 보여줄 공지 객체
+ * @param modifier 적용할 [Modifier]
+ * @param onClick 공지를 클릭했을 때의 콜백
+ * @param content 컴포넌트 오른쪽에 보여줄 slot이다. [content]가 주어지면 북마크 아이콘이 보이지 않는다.
+ */
 @Composable
 fun NoticeItem(
     notice: Notice,
     modifier: Modifier = Modifier,
     onClick: (Notice) -> Unit = {},
+    content: @Composable (() -> Unit)? = null,
 ) {
-    ConstraintLayout(
+    // TODO: 중요 공지일 경우 배경색을 초록색으로 바꾸고, [중요] 태그 보여주기
+    Row(
         modifier = modifier
             .clickable { onClick(notice) }
             .fillMaxWidth()
+            .background(MaterialTheme.colors.surface)
+            .padding(horizontal = 20.dp),
     ) {
-        val (point, subjectText, postedDateText, tags) = createRefs()
-        NoticeItemPoint(
-            isNew = notice.isNew,
-            isRead = notice.isRead,
-            isSubscribing = notice.isSubscribing,
-            isSaved = notice.isSaved,
-            modifier = Modifier.constrainAs(point) {
-                start.linkTo(parent.start, margin = 20.dp)
-                top.linkTo(parent.top, margin = 26.dp)
-                bottom.linkTo(parent.bottom, margin = 34.dp)
-            }
-        )
-        NoticeItemSubject(
-            subject = notice.subject,
-            isRead = notice.isRead,
+        NoticeItemContent(
+            notice = notice,
             modifier = Modifier
-                .constrainAs(subjectText) {
-                    start.linkTo(point.end, margin = 12.dp)
-                    end.linkTo(parent.end, margin = 22.dp)
-                    top.linkTo(parent.top, 7.dp)
-                    width = Dimension.fillToConstraints
-                }
-        )
-        NoticeItemPostedDate(
-            postedDate = notice.postedDate,
-            isRead = notice.isRead,
-            modifier = Modifier.constrainAs(postedDateText) {
-                start.linkTo(subjectText.start)
-                top.linkTo(subjectText.bottom, margin = 6.dp)
-                bottom.linkTo(parent.bottom, margin = 20.dp)
-            },
-        )
-        NoticeItemTags(
-            tags = notice.tag,
-            modifier = Modifier.constrainAs(tags) {
-                start.linkTo(postedDateText.end, margin = 8.dp)
-                top.linkTo(postedDateText.top)
-            }
+                .padding(vertical = 12.dp)
+                .weight(1f),
         )
+        if (content != null) {
+            content()
+        } else if (notice.isSaved) {
+            NoticeItemBookmarkIcon(
+                modifier = Modifier
+                    .height(IntrinsicSize.Min)
+                    .align(Alignment.Top),
+            )
+        }
     }
 }
 
 @Composable
-private fun NoticeItemPoint(
-    isNew: Boolean,
-    isRead: Boolean,
-    isSubscribing: Boolean,
-    isSaved: Boolean,
+private fun NoticeItemContent(
+    notice: Notice,
     modifier: Modifier = Modifier,
 ) {
-    val pointColorId = when {
-        isSaved -> R.color.kus_green// green
-        isSubscribing -> R.color.kus_pink //pink
-        else -> R.color.kus_secondary_gray// gray
-    }
-    val pointColor = colorResource(id = pointColorId)
-
-    // visibility 대용
-    val alpha = when {
-        isSaved -> 1f
-        isRead -> 0f
-        isNew -> 1f
-        else -> 0f
+    Box(modifier = modifier.heightIn(min = 64.dp)) {
+        Column(
+            modifier = Modifier.align(Alignment.CenterStart),
+            verticalArrangement = Arrangement.spacedBy(4.dp),
+        ) {
+            NoticeItemTitle(
+                title = notice.subject,
+                isRead = notice.isRead,
+            )
+            NoticeItemDate(
+                date = notice.postedDate,
+                isRead = notice.isRead,
+            )
+        }
     }
+}
 
-    val pointDrawable = ResourcesCompat.getDrawable(
-        LocalContext.current.resources,
-        R.drawable.point_primary_gray,
-        null
-    ) ?: return
-    val size = with(LocalDensity.current) { 8.dp.roundToPx() }
-    Image(
-        bitmap = pointDrawable.toBitmap(size, size).asImageBitmap(),
-        contentDescription = null,
-        colorFilter = ColorFilter.tint(pointColor),
-        modifier = modifier.alpha(alpha)
+@Composable
+private fun NoticeItemImportantTag(modifier: Modifier = Modifier) {
+    val shape = RoundedCornerShape(50)
+    Text(
+        text = stringResource(id = R.string.notice_item_important_tag),
+        style = TextStyle(
+            fontSize = 11.sp,
+            lineHeight = 17.93.sp,
+            fontFamily = Pretendard,
+            fontWeight = FontWeight(600),
+            color = MaterialTheme.colors.primary,
+        ),
+        modifier = modifier
+            .background(color = Color.White, shape = shape)
+            .border(width = 0.5.dp, color = MaterialTheme.colors.primary, shape = shape)
+            .padding(horizontal = 8.dp, vertical = 3.dp),
     )
 }
 
 @Composable
-private fun NoticeItemSubject(
-    subject: String,
+private fun NoticeItemTitle(
+    title: String,
     isRead: Boolean,
     modifier: Modifier = Modifier,
 ) {
+    val color = if (isRead) Color(0xFF8E8E8E) else MaterialTheme.colors.onSurface
     Text(
-        text = subject,
+        text = title,
+        style = TextStyle(
+            fontFamily = Pretendard,
+            fontSize = 16.sp,
+            lineHeight = 24.sp,
+            fontWeight = FontWeight(500),
+            color = color,
+        ),
+        maxLines = 2,
+        overflow = TextOverflow.Ellipsis,
         modifier = modifier,
-        fontFamily = SfProDisplay,
-        fontWeight = FontWeight.Normal,
-        fontSize = 15.sp,
-        color = colorResource(id = if (isRead) R.color.kus_secondary_label else R.color.kus_label)
     )
 }
 
 @Composable
-private fun NoticeItemPostedDate(
-    postedDate: String,
+private fun NoticeItemDate(
+    date: String,
     isRead: Boolean,
     modifier: Modifier = Modifier,
 ) {
-    val dottedPostedDate = if (postedDate.length == 8) {
-        "${postedDate.substring(0..3)}.${postedDate.substring(4..5)}.${postedDate.substring(6..7)}"
-    } else {
-        postedDate
-    }
+    // 현재 디자인된 색깔은 다크 모드에서 너무 안 보임
+    // 임시로 onSurface(alpha=0.8) 색을 사용
+    val color = if (isRead) Color(0xFF8E8E8E) else MaterialTheme.colors.onSurface.copy(alpha = 0.8f)
     Text(
-        text = dottedPostedDate,
+        text = date,
+        style = TextStyle(
+            fontFamily = Pretendard,
+            fontSize = 14.sp,
+            lineHeight = 22.82.sp,
+            fontWeight = FontWeight(500),
+            color = color,
+        ),
         modifier = modifier,
-        fontFamily = SfProDisplay,
-        fontWeight = FontWeight.Normal,
-        fontSize = 14.sp,
-        color = colorResource(id = if (isRead) R.color.kus_secondary_label else R.color.kus_label)
     )
 }
 
 @Composable
-private fun NoticeItemTags(
-    tags: List<String>,
-    modifier: Modifier = Modifier
+private fun NoticeItemBookmarkIcon(
+    modifier: Modifier = Modifier,
 ) {
-    Row(
+    Image(
+        painter = painterResource(id = R.drawable.ic_bookmark),
+        contentDescription = null,
         modifier = modifier,
-        horizontalArrangement = Arrangement.spacedBy(5.dp),
-    ) {
-        tags.forEach { tag ->
-            NoticeItemTag(
-                tag = tag,
-                modifier = Modifier
-                    .clip(RoundedCornerShape(11.dp))
-                    .background(colorResource(R.color.kus_secondary_gray))
-            )
-        }
-    }
-}
-
-@Composable
-private fun NoticeItemTag(
-    tag: String,
-    modifier: Modifier = Modifier
-) {
-    Text(
-        text = tag,
-        modifier = modifier.padding(horizontal = 4.dp, vertical = 0.5.dp),
-        fontFamily = SfProDisplay,
-        fontWeight = FontWeight.Medium,
-        fontSize = 12.sp,
-        color = colorResource(R.color.kus_background)
     )
 }
 
-@LightAndDarkPreview
-@Composable
-private fun NoticeItemSubjectPreview() {
-    val subject = "2021-2학기 중간고사 이후 수업 운영 가이드라인"
-    KuringTheme {
-        Column(modifier = Modifier.padding(10.dp)) {
-            NoticeItemSubject(
-                subject = subject,
-                isRead = false,
-            )
-            NoticeItemSubject(
-                subject = subject,
-                isRead = true,
-            )
-        }
-    }
-}
-
-@LightAndDarkPreview
-@Composable
-private fun NoticeItemPostedDatePreview() {
-    KuringTheme {
-        NoticeItemPostedDate(
-            postedDate = "2021.10.01",
-            isRead = false,
-            modifier = Modifier.padding(10.dp),
-        )
-    }
-}
-
-@LightAndDarkPreview
-@Composable
-private fun NoticeItemTagsPreview() {
-    val tags = listOf("지급", "학사", "한국교육과정평가원")
-    KuringTheme {
-        NoticeItemTags(
-            tags = tags,
-            modifier = Modifier.padding(10.dp),
-        )
-    }
-}
+private val notice = Notice(
+    postedDate = "2023.05.13",
+    subject = "코로나-19 재확산에 따른 방역 수칙 및 자발적 거리두기 중요 내용 안내",
+    category = "department",
+    department = "cse",
+    url = "",
+    articleId = "",
+    isNew = false,
+    isRead = false,
+    isSubscribing = false,
+    isSaved = false,
+    isReadOnStorage = false,
+    tag = listOf("지급"),
+)
 
 @LightAndDarkPreview
 @Composable
 private fun NoticeItemPreview() {
-    val notice = Notice(
-        postedDate = "2023.05.13",
-        subject = "2023학년도 1학기 2차 교직 응급처치 및 심폐소생술 실습 안내",
-        category = "department",
-        department = "cse",
-        url = "",
-        articleId = "",
-        isNew = false,
-        isRead = false,
-        isSubscribing = false,
-        isSaved = false,
-        isReadOnStorage = false,
-        tag = listOf("지급"),
-    )
     KuringTheme {
-        Column(modifier = Modifier.fillMaxWidth()) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(MaterialTheme.colors.surface),
+        ) {
             NoticeItem(notice = notice)
             NoticeItem(notice = notice.copy(isRead = true))
-            NoticeItem(notice = notice.copy(isNew = true))
-            NoticeItem(notice = notice.copy(isNew = true, isSubscribing = true))
             NoticeItem(notice = notice.copy(isSaved = true))
         }
     }
diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/SearchTextField.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/SearchTextField.kt
index 37133ea46..a27c33b7d 100644
--- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/SearchTextField.kt
+++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/components/SearchTextField.kt
@@ -36,9 +36,9 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.ku_stacks.ku_ring.designsystem.R
 import com.ku_stacks.ku_ring.designsystem.theme.BoxBackgroundColor2
-import com.ku_stacks.ku_ring.designsystem.theme.CaptionGray1
 import com.ku_stacks.ku_ring.designsystem.theme.KuringTheme
 import com.ku_stacks.ku_ring.designsystem.theme.Pretendard
+import com.ku_stacks.ku_ring.designsystem.theme.TextCaption1
 
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
@@ -108,7 +108,7 @@ private fun LeadingSearchIcon(modifier: Modifier = Modifier) {
     Icon(
         painter = painterResource(id = R.drawable.ic_search),
         contentDescription = null,
-        tint = CaptionGray1,
+        tint = TextCaption1,
         modifier = modifier,
     )
 }
@@ -139,7 +139,7 @@ private fun TrailingDeleteIcon(
     Icon(
         painter = painterResource(id = R.drawable.ic_close),
         contentDescription = null,
-        tint = CaptionGray1,
+        tint = TextCaption1,
         modifier = modifier
             .scale(0.8f)
             .clickable(onClick = onClear),
diff --git a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt
index 7e7b0fedd..0adbd35a3 100644
--- a/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt
+++ b/common/designsystem/src/main/java/com/ku_stacks/ku_ring/designsystem/theme/Color.kt
@@ -14,14 +14,22 @@ val KuringGreen50: Color
     @Composable get() = colorResource(R.color.kus_green_50)
 val KuringSecondaryGreen: Color
     @Composable get() = colorResource(R.color.kus_secondary_green)
+val MainPrimarySelected: Color
+    @Composable get() = Color(0xFFE2F5EC)
 val KuringSub: Color
     @Composable get() = Color(0xFFECF9F3)
-val CaptionGray1: Color
+val TextCaption1: Color
     @Composable get() = Color(0xFF868A92)
 val CaptionGray2: Color
     @Composable get() = Color(0xFFAEB1B6)
 val Gray2: Color
     @Composable get() = Color(0xFF636363)
+val Gray200: Color
+    @Composable get() = Color(0xFFE5E5E5)
+val Gray300: Color
+    @Composable get() = Color(0xFF999999)
+val Gray600: Color
+    @Composable get() = Color(0xFF262626)
 val BoxBackgroundColor2: Color
     @Composable get() = Color(0xFFF2F3F5)
 
diff --git a/common/designsystem/src/main/res/values/strings.xml b/common/designsystem/src/main/res/values/strings.xml
index c467efd50..e914322d4 100644
--- a/common/designsystem/src/main/res/values/strings.xml
+++ b/common/designsystem/src/main/res/values/strings.xml
@@ -4,13 +4,17 @@
 
     <!--  Common  -->
     <string name="network_error">네트워크 문제로 연결되지 않았습니다. 다시 시도해주세요</string>
-    <string name="cancel">취소</string>
-    <string name="confirm">확인</string>
+    <string name="cancel">취소하기</string>
+    <string name="confirm">추가하기</string>
     <string name="start">시작하기</string>
     <string name="complete">완료하기</string>
 
     <string name="selected_department">대표</string>
 
+    <!--  components  -->
+    <string name="notice_item_important_tag">중요</string>
+    <string name="notice_item_delete_button">삭제</string>
+
     <!--  splash  -->
     <string name="ku_ring_version">ver. %1$s</string>
     <string name="ku_ring_rights">© 2021 KU Ring. All rights reserved.</string>
diff --git a/feature/edit_subscription/src/main/java/com/ku_stacks/ku_ring/edit_subscription/compose/EditSubscriptionScreen.kt b/feature/edit_subscription/src/main/java/com/ku_stacks/ku_ring/edit_subscription/compose/EditSubscriptionScreen.kt
index 9e8196be0..123c2fb87 100644
--- a/feature/edit_subscription/src/main/java/com/ku_stacks/ku_ring/edit_subscription/compose/EditSubscriptionScreen.kt
+++ b/feature/edit_subscription/src/main/java/com/ku_stacks/ku_ring/edit_subscription/compose/EditSubscriptionScreen.kt
@@ -313,7 +313,6 @@ private fun DepartmentCategoryEmptyIndicator(
             text = stringResource(id = R.string.department_subscription_add_department),
             onClick = onAddDepartmentButtonClick,
             modifier = Modifier
-                .padding(26.dp)
                 .fillMaxWidth(),
         )
     }
@@ -364,9 +363,9 @@ private fun DepartmentCategoryList(
         KuringCallToAction(
             text = stringResource(id = R.string.department_subscription_complete),
             onClick = onCallToActionClick,
+            blur = true,
             modifier = Modifier
                 .background(MaterialTheme.colors.surface)
-                .padding(26.dp)
                 .fillMaxWidth(),
         )
     }
diff --git a/feature/feedback/src/main/java/com/ku_stacks/ku_ring/feedback/feedback/compose/FeedbackScreen.kt b/feature/feedback/src/main/java/com/ku_stacks/ku_ring/feedback/feedback/compose/FeedbackScreen.kt
index 12939a2a7..8d05b2e42 100644
--- a/feature/feedback/src/main/java/com/ku_stacks/ku_ring/feedback/feedback/compose/FeedbackScreen.kt
+++ b/feature/feedback/src/main/java/com/ku_stacks/ku_ring/feedback/feedback/compose/FeedbackScreen.kt
@@ -34,6 +34,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.ku_stacks.ku_ring.designsystem.components.CenterTitleTopBar
+import com.ku_stacks.ku_ring.designsystem.components.KuringCallToAction
 import com.ku_stacks.ku_ring.designsystem.components.LightAndDarkPreview
 import com.ku_stacks.ku_ring.designsystem.theme.KuringGreen
 import com.ku_stacks.ku_ring.designsystem.theme.KuringSecondaryGreen
@@ -122,9 +123,11 @@ private fun FeedbackScreen(
                 .border(width = 1.5f.dp, color = Color.Gray, shape = RoundedCornerShape(20.dp)),
         )
 
-        SendFeedbackButton(
-            textStatus = textStatus,
-            onClickSendFeedback = onClickSendFeedback,
+        KuringCallToAction(
+            text = stringResource(id = R.string.feedback_send_content),
+            onClick = onClickSendFeedback,
+            enabled = textStatus == FeedbackTextStatus.NORMAL,
+            modifier = Modifier.fillMaxWidth(),
         )
     }
 }