diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/align/SuwikiAlignButton.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/align/SuwikiAlignButton.kt
new file mode 100644
index 000000000..f2c74eee4
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/align/SuwikiAlignButton.kt
@@ -0,0 +1,46 @@
+package com.suwiki.core.designsystem.component.align
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.R
+import com.suwiki.core.designsystem.theme.Gray6A
+import com.suwiki.core.designsystem.theme.White
+import com.suwiki.core.ui.extension.suwikiClickable
+
+@Composable
+fun SuwikiAlignButton(
+  onClick: () -> Unit = {},
+) {
+  Icon(
+    painter = painterResource(id = R.drawable.ic_filter),
+    contentDescription = "",
+    modifier = Modifier
+      .shadow(elevation = 10.dp)
+      .clip(RoundedCornerShape(10.dp))
+      .suwikiClickable(onClick = onClick)
+      .background(White)
+      .padding(8.dp),
+    tint = Gray6A,
+  )
+}
+
+@Preview(widthDp = 400, heightDp = 400)
+@Composable
+fun SuwikiAlignButtonPreview() {
+  Column(
+    verticalArrangement = Arrangement.spacedBy(10.dp),
+  ) {
+    SuwikiAlignButton()
+  }
+}
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/align/SuwikiAlignContainer.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/align/SuwikiAlignContainer.kt
new file mode 100644
index 000000000..2d6c24a88
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/align/SuwikiAlignContainer.kt
@@ -0,0 +1,86 @@
+package com.suwiki.core.designsystem.component.align
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.R
+import com.suwiki.core.designsystem.theme.Gray6A
+import com.suwiki.core.designsystem.theme.Primary
+import com.suwiki.core.designsystem.theme.SuwikiTheme
+import com.suwiki.core.designsystem.theme.White
+import com.suwiki.core.ui.extension.suwikiClickable
+
+@Composable
+fun SuwikiAlignContainer(
+  text: String,
+  isChecked: Boolean = false,
+  onClick: () -> Unit = {},
+) {
+  val textColor = if (isChecked) Primary else Gray6A
+  Box(
+    modifier = Modifier
+      .background(White)
+      .fillMaxWidth()
+      .wrapContentHeight()
+      .suwikiClickable(
+        onClick = onClick,
+        rippleColor = Gray6A,
+      ),
+  ) {
+    Text(
+      text = text,
+      color = textColor,
+      style = SuwikiTheme.typography.body2,
+      modifier = Modifier
+        .align(Alignment.CenterStart)
+        .padding(top = 13.dp, bottom = 14.dp, start = 24.dp, end = 52.dp),
+    )
+    if (isChecked) {
+      Icon(
+        painter = painterResource(id = R.drawable.ic_align_checked),
+        contentDescription = "",
+        modifier = Modifier
+          .align(Alignment.CenterEnd)
+          .padding(end = 16.dp)
+          .size(24.dp),
+        tint = Primary,
+      )
+    }
+  }
+}
+
+@Preview(widthDp = 300, heightDp = 200)
+@Composable
+fun SuwikiAlignContainerPreview() {
+  var isChecked by remember { mutableStateOf(false) }
+
+  SuwikiTheme {
+    Column(
+      verticalArrangement = Arrangement.Center,
+      horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+      SuwikiAlignContainer(
+        text = "메뉴",
+        isChecked = isChecked,
+        onClick = { isChecked = !isChecked },
+      )
+    }
+  }
+}
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiContainedChip.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiContainedChip.kt
index c3d2a6f01..ec3085a25 100644
--- a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiContainedChip.kt
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiContainedChip.kt
@@ -3,8 +3,8 @@ package com.suwiki.core.designsystem.component.chips
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -18,7 +18,14 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
+import com.suwiki.core.designsystem.theme.Blue10
+import com.suwiki.core.designsystem.theme.Blue100
+import com.suwiki.core.designsystem.theme.Green10
+import com.suwiki.core.designsystem.theme.Green100
+import com.suwiki.core.designsystem.theme.Orange10
+import com.suwiki.core.designsystem.theme.Orange100
+import com.suwiki.core.designsystem.theme.SuwikiTheme
+
 enum class SuwikiChipType {
   ORANGE,
   BLUE,
@@ -34,9 +41,9 @@ fun SuwikiContainedChip(
 ) {
   val (backgroundColor, contentColor) = if (isChecked) {
     when (type) {
-      SuwikiChipType.ORANGE -> Color(0xFFFFF3EB) to Color(0xFFFD873B)
-      SuwikiChipType.BLUE -> Color(0xFFECEDFF) to Color(0xFF3D4EFB)
-      SuwikiChipType.GREEN -> Color(0xFFEAF8EC) to Color(0xFF2DB942)
+      SuwikiChipType.ORANGE -> Orange10 to Orange100
+      SuwikiChipType.BLUE -> Blue10 to Blue100
+      SuwikiChipType.GREEN -> Green10 to Green100
     }
   } else {
     Color(0xFFF6F6F6) to Color(0xFF959595)
@@ -47,20 +54,15 @@ fun SuwikiContainedChip(
       .clip(RoundedCornerShape(5.dp))
       .background(color = backgroundColor)
       .clickable(onClick = onClick)
-      .height(26.dp),
+      .wrapContentHeight()
+      .padding(vertical = 4.dp, horizontal = 6.dp),
   ) {
-    Box(
-      modifier = Modifier
-        .padding(vertical = 4.dp, horizontal = 6.dp)
-        .height(18.dp),
-    ) {
-      Text(
-        text = text,
-        color = contentColor,
-        fontSize = 12.sp,
-        modifier = Modifier.align(Alignment.Center),
-      )
-    }
+    Text(
+      text = text,
+      style = SuwikiTheme.typography.caption1,
+      color = contentColor,
+      modifier = Modifier.align(Alignment.Center),
+    )
   }
 }
 
@@ -69,10 +71,12 @@ fun SuwikiContainedChip(
 fun SuwikiContainedChipPreview() {
   var isChecked by remember { mutableStateOf(false) }
 
-  SuwikiContainedChip(
-    isChecked = isChecked,
-    onClick = { isChecked = !isChecked },
-    type = SuwikiChipType.GREEN,
-    text = "label",
-  )
+  SuwikiTheme {
+    SuwikiContainedChip(
+      isChecked = isChecked,
+      onClick = { isChecked = !isChecked },
+      type = SuwikiChipType.GREEN,
+      text = "label",
+    )
+  }
 }
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiOutlinedChip.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiOutlinedChip.kt
index 6c8682120..a15c28788 100644
--- a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiOutlinedChip.kt
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiOutlinedChip.kt
@@ -4,8 +4,8 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -16,10 +16,13 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
+import com.suwiki.core.designsystem.theme.Gray95
+import com.suwiki.core.designsystem.theme.GrayDA
+import com.suwiki.core.designsystem.theme.Primary
+import com.suwiki.core.designsystem.theme.SuwikiTheme
+import com.suwiki.core.designsystem.theme.White
 
 @Composable
 fun SuwikiOutlinedChip(
@@ -28,31 +31,27 @@ fun SuwikiOutlinedChip(
   onClick: () -> Unit = {},
 ) {
   val (borderLineColor, contentColor) = if (isChecked) {
-    Color(0xFFDADADA) to Color(0xFF959595)
+    Primary to Primary
   } else {
-    Color(0xFF346CFD) to Color(0xFF346CFD)
+    GrayDA to Gray95
   }
 
   Box(
     modifier = Modifier
       .clip(RoundedCornerShape(5.dp))
       .clickable(onClick = onClick)
-      .height(26.dp)
-      .background(color = Color(0xFFFFFFFF))
-      .border(width = 1.dp, color = borderLineColor, shape = RoundedCornerShape(5.dp)),
+      .wrapContentHeight()
+      .background(color = White)
+      .border(width = 1.dp, color = borderLineColor, shape = RoundedCornerShape(5.dp))
+      .padding(vertical = 4.dp, horizontal = 6.dp),
   ) {
-    Box(
+    Text(
+      text = text,
+      style = SuwikiTheme.typography.caption1,
+      color = contentColor,
       modifier = Modifier
-        .padding(vertical = 4.dp, horizontal = 6.dp)
-        .height(18.dp),
-    ) {
-      Text(
-        text = text,
-        color = contentColor,
-        fontSize = 12.sp,
-        modifier = Modifier.align(Alignment.Center),
-      )
-    }
+        .align(Alignment.Center),
+    )
   }
 }
 
@@ -61,9 +60,11 @@ fun SuwikiOutlinedChip(
 fun SuwikiOutlinedChipPreview() {
   var isChecked by remember { mutableStateOf(false) }
 
-  SuwikiOutlinedChip(
-    text = "label",
-    isChecked = isChecked,
-    onClick = { isChecked = !isChecked },
-  )
+  SuwikiTheme {
+    SuwikiOutlinedChip(
+      text = "label",
+      isChecked = isChecked,
+      onClick = { isChecked = !isChecked },
+    )
+  }
 }
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/filter/SuwikiFilterButton.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/filter/SuwikiFilterButton.kt
new file mode 100644
index 000000000..a9ca7e5b7
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/filter/SuwikiFilterButton.kt
@@ -0,0 +1,65 @@
+package com.suwiki.core.designsystem.component.filter
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+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.suwiki.core.designsystem.R
+import com.suwiki.core.designsystem.theme.Primary
+import com.suwiki.core.designsystem.theme.SuwikiTheme
+import com.suwiki.core.ui.extension.suwikiClickable
+
+@Composable
+fun SuwikiFilterButton(
+  text: String,
+  onClick: () -> Unit = {},
+) {
+  Box(
+    modifier = Modifier
+      .suwikiClickable(onClick = onClick)
+      .wrapContentHeight()
+      .padding(vertical = 4.dp, horizontal = 8.dp),
+  ) {
+    Row(
+      verticalAlignment = Alignment.CenterVertically,
+    ) {
+      Text(
+        text = text,
+        style = SuwikiTheme.typography.header6,
+        color = Primary,
+      )
+      Icon(
+        painter = painterResource(id = R.drawable.ic_filter_arrow_down),
+        contentDescription = "",
+        tint = Primary,
+        modifier = Modifier
+          .size(24.dp)
+          .padding(vertical = 9.dp, horizontal = 7.dp),
+      )
+    }
+  }
+}
+
+@Preview(widthDp = 400, heightDp = 50)
+@Composable
+fun SuwikiFilterButtonPreview() {
+  SuwikiTheme {
+    Column(
+      verticalArrangement = Arrangement.Center,
+      horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+      SuwikiFilterButton(text = "학과필터")
+    }
+  }
+}
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/filter/SuwikiFilterContainer.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/filter/SuwikiFilterContainer.kt
new file mode 100644
index 000000000..5a20fb59a
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/filter/SuwikiFilterContainer.kt
@@ -0,0 +1,97 @@
+package com.suwiki.core.designsystem.component.filter
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.R
+import com.suwiki.core.designsystem.theme.Black
+import com.suwiki.core.designsystem.theme.Blue5
+import com.suwiki.core.designsystem.theme.GrayDA
+import com.suwiki.core.designsystem.theme.Primary
+import com.suwiki.core.designsystem.theme.SuwikiTheme
+import com.suwiki.core.designsystem.theme.White
+import com.suwiki.core.ui.extension.suwikiClickable
+
+@Composable
+fun SuwikiFilterContainer(
+  text: String,
+  isChecked: Boolean,
+  isStared: Boolean,
+  onClick: () -> Unit = {},
+  onClickStar: () -> Unit = {},
+) {
+  val (textColor, backgroundColor) = if (isChecked) {
+    Primary to Blue5
+  } else {
+    Black to White
+  }
+
+  Box(
+    modifier = Modifier
+      .background(backgroundColor)
+      .fillMaxWidth()
+      .wrapContentHeight()
+      .suwikiClickable(onClick = onClick),
+  ) {
+    Row(
+      verticalAlignment = Alignment.CenterVertically,
+      horizontalArrangement = Arrangement.Start,
+      modifier = Modifier
+        .padding(vertical = 12.dp, horizontal = 24.dp),
+    ) {
+      Icon(
+        painter = painterResource(id = R.drawable.ic_filter_stared),
+        contentDescription = "",
+        modifier = Modifier
+          .size(24.dp)
+          .suwikiClickable(
+            onClick = onClickStar,
+            rippleEnabled = false,
+          ),
+        tint = if (isStared) Primary else GrayDA,
+      )
+      Spacer(modifier = Modifier.width(4.dp))
+      Text(
+        text = text,
+        style = SuwikiTheme.typography.body2,
+        color = textColor,
+      )
+    }
+  }
+}
+
+@Preview(widthDp = 300, heightDp = 50)
+@Composable
+fun SuwikiFilterContainerPreview() {
+  var isChecked by remember { mutableStateOf(false) }
+  var isStared by remember { mutableStateOf(false) }
+
+  SuwikiTheme {
+    SuwikiFilterContainer(
+      text = "개설학과명",
+      isChecked = isChecked,
+      isStared = isStared,
+      onClick = { isChecked = !isChecked },
+      onClickStar = { isStared = !isStared },
+    )
+  }
+}
diff --git a/core/designsystem/src/main/res/drawable/ic_align_checked.xml b/core/designsystem/src/main/res/drawable/ic_align_checked.xml
new file mode 100644
index 000000000..bf627674f
--- /dev/null
+++ b/core/designsystem/src/main/res/drawable/ic_align_checked.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M18.643,6.234C19.066,6.59 19.121,7.22 18.766,7.643L10.366,17.643C10.179,17.865 9.906,17.995 9.617,18C9.328,18.005 9.05,17.884 8.857,17.669L5.257,13.669C4.887,13.259 4.921,12.626 5.331,12.257C5.742,11.887 6.374,11.92 6.743,12.331L9.574,15.476L17.234,6.357C17.59,5.934 18.22,5.879 18.643,6.234Z"
+      android:fillColor="#346CFD"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_filter_arrow_down.xml b/core/designsystem/src/main/res/drawable/ic_filter_arrow_down.xml
new file mode 100644
index 000000000..ff8a84a70
--- /dev/null
+++ b/core/designsystem/src/main/res/drawable/ic_filter_arrow_down.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="10dp"
+    android:height="6dp"
+    android:viewportWidth="10"
+    android:viewportHeight="6">
+  <path
+      android:pathData="M0.292,0.305C0.48,0.118 0.734,0.012 0.999,0.012C1.263,0.012 1.517,0.118 1.705,0.305L4.994,3.591L8.283,0.305C8.375,0.209 8.485,0.133 8.607,0.081C8.729,0.029 8.86,0.001 8.993,0C9.125,-0.001 9.257,0.024 9.379,0.074C9.502,0.124 9.614,0.199 9.707,0.292C9.801,0.386 9.875,0.497 9.926,0.62C9.976,0.743 10.001,0.874 10,1.007C9.999,1.139 9.971,1.27 9.919,1.392C9.867,1.514 9.79,1.624 9.695,1.716L5.7,5.708C5.513,5.895 5.259,6 4.994,6C4.729,6 4.475,5.895 4.288,5.708L0.292,1.716C0.105,1.529 0,1.275 0,1.01C0,0.746 0.105,0.492 0.292,0.305Z"
+      android:fillColor="#346CFD"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_filter_stared.xml b/core/designsystem/src/main/res/drawable/ic_filter_stared.xml
new file mode 100644
index 000000000..b78de28d6
--- /dev/null
+++ b/core/designsystem/src/main/res/drawable/ic_filter_stared.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M20.483,10.634L15.686,9.904L13.542,5.352C13.484,5.228 13.387,5.127 13.268,5.065C12.97,4.911 12.607,5.04 12.458,5.352L10.314,9.904L5.517,10.634C5.385,10.654 5.264,10.719 5.172,10.818C5.06,10.939 4.998,11.101 5,11.269C5.002,11.437 5.068,11.597 5.183,11.714L8.653,15.257L7.833,20.26C7.814,20.377 7.826,20.496 7.869,20.606C7.911,20.715 7.982,20.81 8.073,20.879C8.165,20.949 8.273,20.99 8.385,20.998C8.498,21.007 8.61,20.982 8.71,20.927L13,18.565L17.29,20.927C17.407,20.992 17.543,21.014 17.674,20.99C18.002,20.931 18.223,20.604 18.167,20.26L17.347,15.257L20.817,11.714C20.912,11.617 20.974,11.491 20.993,11.352C21.044,11.006 20.813,10.686 20.483,10.634Z"
+      android:fillColor="#346CFD"/>
+</vector>