diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/Sample.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/Sample.kt
deleted file mode 100644
index 412a23fea..000000000
--- a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/Sample.kt
+++ /dev/null
@@ -1 +0,0 @@
-package com.suwiki.core.designsystem.component
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/dropdown/SuwikiDropDown.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/dropdown/SuwikiDropDown.kt
new file mode 100644
index 000000000..f09843996
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/dropdown/SuwikiDropDown.kt
@@ -0,0 +1,137 @@
+package com.suwiki.core.designsystem.component.dropdown
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.MaterialTheme
+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.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.DpOffset
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.R
+
+@Composable
+fun SuwikiDropDownMenu(
+  label: String = "",
+  onClickLabel: () -> Unit = {},
+  onDismissRequest: () -> Unit = {},
+  expanded: Boolean = false,
+  content: @Composable ColumnScope.() -> Unit,
+) {
+  Column(
+    horizontalAlignment = Alignment.Start,
+  ) {
+    Row(
+      modifier = Modifier
+        .clip(RoundedCornerShape(10.dp))
+        .clickable(onClick = onClickLabel)
+        .background(Color.LightGray)
+        .padding(
+          horizontal = 9.dp,
+          vertical = 6.dp,
+        ),
+      verticalAlignment = Alignment.CenterVertically,
+    ) {
+      Text(
+        text = label,
+      )
+      Image(
+        painter = painterResource(id = R.drawable.ic_dropdown_arrow_down),
+        contentDescription = "",
+      )
+    }
+
+    MaterialTheme(
+      shapes = MaterialTheme.shapes.copy(extraSmall = RoundedCornerShape(10.dp)),
+    ) {
+      DropdownMenu(
+        modifier = Modifier
+          .width(106.dp)
+          .background(Color.White)
+          .padding(vertical = 8.dp)
+          .clip(RoundedCornerShape(20.dp)),
+        offset = DpOffset(x = 0.dp, y = 6.dp),
+        expanded = expanded,
+        onDismissRequest = onDismissRequest,
+        content = content,
+      )
+    }
+  }
+}
+
+@Preview(showSystemUi = true)
+@Composable
+fun SuwikiDropDownMenuPreview() {
+  var isSemesterDropDownExpanded by remember {
+    mutableStateOf(false)
+  }
+
+  var isExamDropdownExpanded by remember {
+    mutableStateOf(false)
+  }
+
+  Column {
+    SuwikiDropDownMenu(
+      label = "수강학기 선택",
+      expanded = isSemesterDropDownExpanded,
+      onClickLabel = { isSemesterDropDownExpanded = true },
+      onDismissRequest = { isSemesterDropDownExpanded = false },
+    ) {
+      repeat(4) {
+        SuwikiDropdownMenuItem(
+          text = "menu",
+        )
+      }
+    }
+
+    SuwikiDropDownMenu(
+      label = "시험유형 선택",
+      expanded = isExamDropdownExpanded,
+      onClickLabel = { isExamDropdownExpanded = true },
+      onDismissRequest = { isExamDropdownExpanded = false },
+    ) {
+      repeat(4) {
+        SuwikiDropdownMenuItem(
+          text = "menu",
+        )
+      }
+    }
+  }
+}
+
+@Composable
+fun SuwikiDropdownMenuItem(
+  onClick: () -> Unit = {},
+  text: String = "",
+) {
+  DropdownMenuItem(
+    modifier = Modifier.fillMaxWidth(),
+    onClick = onClick,
+    text = {
+      Text(
+        text = text,
+        textAlign = TextAlign.Start,
+      )
+    },
+  )
+}
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/searchbar/SuwikiSearchBar.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/searchbar/SuwikiSearchBar.kt
new file mode 100644
index 000000000..9421d4dfe
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/searchbar/SuwikiSearchBar.kt
@@ -0,0 +1,106 @@
+package com.suwiki.core.designsystem.component.searchbar
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+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.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+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.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+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
+
+@Composable
+fun SuwikiSearchBar(
+  modifier: Modifier = Modifier,
+  hint: String = "",
+  value: String = "",
+  maxLines: Int = 1,
+  minLines: Int = 1,
+  onValueChange: (String) -> Unit = { _ -> },
+  onClickClearButton: () -> Unit = {},
+  interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+  Box(
+    Modifier
+      .background(Color.White)
+      .padding(vertical = 10.dp, horizontal = 24.dp),
+    contentAlignment = Alignment.Center,
+  ) {
+    BasicTextField(
+      value = value,
+      onValueChange = onValueChange,
+      modifier = modifier
+        .background(Color.LightGray, shape = RoundedCornerShape(10.dp))
+        .padding(8.dp),
+      singleLine = maxLines == 1,
+      maxLines = if (minLines > maxLines) minLines else maxLines,
+      minLines = minLines,
+      interactionSource = interactionSource,
+      cursorBrush = SolidColor(Color.Blue),
+      decorationBox = { innerText ->
+        Row(
+          verticalAlignment = Alignment.CenterVertically,
+        ) {
+          Image(painter = painterResource(id = R.drawable.ic_search), contentDescription = "")
+
+          Spacer(modifier = Modifier.size(5.dp))
+
+          Box(
+            modifier = Modifier.weight(1f),
+            contentAlignment = Alignment.CenterStart,
+          ) {
+            innerText()
+            if (value.isEmpty()) Text(text = hint, color = Color.Gray)
+          }
+
+          if (value.isNotEmpty()) {
+            Image(
+              modifier = Modifier
+                .clickable(onClick = onClickClearButton),
+              painter = painterResource(id = R.drawable.ic_textfield_clear),
+              contentDescription = "",
+            )
+          }
+        }
+      },
+    )
+  }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiSearchBarPreview() {
+  var normalValue by remember {
+    mutableStateOf("")
+  }
+
+  Column(
+    verticalArrangement = Arrangement.spacedBy(10.dp),
+  ) {
+    SuwikiSearchBar(
+      hint = "Hinted search text",
+      value = normalValue,
+      onValueChange = { normalValue = it },
+      onClickClearButton = { normalValue = "" },
+    )
+  }
+}
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/searchbar/SuwikiSearchBarWithFilter.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/searchbar/SuwikiSearchBarWithFilter.kt
new file mode 100644
index 000000000..92a38ba06
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/searchbar/SuwikiSearchBarWithFilter.kt
@@ -0,0 +1,122 @@
+package com.suwiki.core.designsystem.component.searchbar
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+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.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+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.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+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
+
+@Composable
+fun SuwikiSearchBarWithFilter(
+  modifier: Modifier = Modifier,
+  hint: String = "",
+  value: String = "",
+  maxLines: Int = 1,
+  minLines: Int = 1,
+  onValueChange: (String) -> Unit = { _ -> },
+  onClickClearButton: () -> Unit = {},
+  onClickFilterButton: () -> Unit = {},
+  interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+  Row(
+    Modifier
+      .background(Color.LightGray)
+      .padding(vertical = 10.dp, horizontal = 24.dp),
+    verticalAlignment = Alignment.CenterVertically,
+  ) {
+    BasicTextField(
+      value = value,
+      onValueChange = onValueChange,
+      modifier = modifier
+        .weight(1f)
+        .shadow(elevation = 10.dp) // TODO Custom Shadow로 변경해야함
+        .background(Color.White, shape = RoundedCornerShape(10.dp))
+        .padding(8.dp),
+      singleLine = maxLines == 1,
+      maxLines = if (minLines > maxLines) minLines else maxLines,
+      minLines = minLines,
+      interactionSource = interactionSource,
+      cursorBrush = SolidColor(Color.Blue),
+      decorationBox = { innerText ->
+        Row(
+          verticalAlignment = Alignment.CenterVertically,
+        ) {
+          Image(painter = painterResource(id = R.drawable.ic_search), contentDescription = "")
+
+          Spacer(modifier = Modifier.size(5.dp))
+
+          Box(
+            modifier = Modifier.weight(1f),
+            contentAlignment = Alignment.CenterStart,
+          ) {
+            innerText()
+            if (value.isEmpty()) Text(text = hint, color = Color.Gray)
+          }
+
+          if (value.isNotEmpty()) {
+            Image(
+              modifier = Modifier
+                .clickable(onClick = onClickClearButton),
+              painter = painterResource(id = R.drawable.ic_textfield_clear),
+              contentDescription = "",
+            )
+          }
+        }
+      },
+    )
+
+    Spacer(modifier = Modifier.size(4.dp))
+
+    Image(
+      modifier = Modifier
+        .shadow(elevation = 10.dp) // TODO Custom Shadow로 변경해야함
+        .background(Color.White, shape = RoundedCornerShape(10.dp))
+        .clickable(onClick = onClickFilterButton)
+        .padding(8.dp),
+      painter = painterResource(id = R.drawable.ic_filter),
+      contentDescription = "",
+    )
+  }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiSearchBarWithFilterPreview() {
+  var normalValue by remember {
+    mutableStateOf("")
+  }
+
+  Column(
+    verticalArrangement = Arrangement.spacedBy(10.dp),
+  ) {
+    SuwikiSearchBarWithFilter(
+      hint = "Hinted search text",
+      value = normalValue,
+      onValueChange = { normalValue = it },
+      onClickClearButton = { normalValue = "" },
+    )
+  }
+}
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/slider/SuwikiSlider.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/slider/SuwikiSlider.kt
new file mode 100644
index 000000000..1247a04cf
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/slider/SuwikiSlider.kt
@@ -0,0 +1,94 @@
+package com.suwiki.core.designsystem.component.slider
+
+import androidx.annotation.IntRange
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+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.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Slider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import kotlin.math.round
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SuwikiSlider(
+  value: Float = 2.5f,
+  onValueChange: (Float) -> Unit = { _ -> },
+  @IntRange(from = 0)
+  steps: Int = 9,
+  valueRange: ClosedFloatingPointRange<Float> = 0f..5f,
+  interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+  var isHovering by rememberSaveable {
+    mutableStateOf(false)
+  }
+
+  val label = (round(value * 100) / 100).toString()
+
+  Row(
+    modifier = Modifier.fillMaxWidth(),
+    verticalAlignment = Alignment.CenterVertically,
+  ) {
+    Slider(
+      modifier = Modifier.weight(1f).height(SUWIKI_THUMB_WIDTH_LABEL_HEIGHT.dp),
+      value = value,
+      onValueChange = {
+        isHovering = true
+        onValueChange(it)
+      },
+      onValueChangeFinished = { isHovering = false },
+      valueRange = valueRange,
+      steps = steps,
+      interactionSource = interactionSource,
+      thumb = {
+        if (isHovering) {
+          SuwikiSliderThumbWithLabel(
+            label = label,
+          )
+        } else {
+          SuwikiSliderThumb()
+        }
+      },
+      track = {
+        SuwikiSliderTrack(
+          value = value,
+          valueRange = valueRange,
+          height = 6.dp,
+          shape = RoundedCornerShape(4.dp),
+        )
+      },
+    )
+
+    Text(text = label)
+  }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiSliderPreview() {
+  var sliderPosition by rememberSaveable {
+    mutableFloatStateOf(2.5f)
+  }
+
+  Box(modifier = Modifier.padding(vertical = 40.dp)) {
+    SuwikiSlider(
+      value = sliderPosition,
+      onValueChange = { sliderPosition = if (it < 0.5) 0.5F else it },
+    )
+  }
+}
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/slider/SuwikiSliderThumb.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/slider/SuwikiSliderThumb.kt
new file mode 100644
index 000000000..7e73dac75
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/slider/SuwikiSliderThumb.kt
@@ -0,0 +1,35 @@
+package com.suwiki.core.designsystem.component.slider
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+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
+
+@Composable
+fun SuwikiSliderThumb() {
+  Box(
+    modifier = Modifier.size(28.dp),
+    contentAlignment = Alignment.Center,
+  ) {
+    Spacer(
+      modifier = Modifier
+        .size(16.dp)
+        .clip(CircleShape)
+        .background(Color.Blue),
+    )
+  }
+}
+
+@Preview
+@Composable
+fun SuwikiSliderThumbPreview() {
+  SuwikiSliderThumb()
+}
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/slider/SuwikiSliderThumbWithLabel.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/slider/SuwikiSliderThumbWithLabel.kt
new file mode 100644
index 000000000..3249f06f3
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/slider/SuwikiSliderThumbWithLabel.kt
@@ -0,0 +1,50 @@
+package com.suwiki.core.designsystem.component.slider
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.R
+
+const val SUWIKI_THUMB_WIDTH_LABEL_HEIGHT = 88
+
+@Composable
+fun SuwikiSliderThumbWithLabel(
+  modifier: Modifier = Modifier,
+  label: String,
+) {
+  Box(
+    modifier = modifier.height(SUWIKI_THUMB_WIDTH_LABEL_HEIGHT.dp),
+  ) {
+    Image(
+      painter = painterResource(id = R.drawable.ic_slider_thumb_hovered),
+      contentDescription = "",
+    )
+
+    Box(
+      modifier = Modifier.size(28.dp),
+      contentAlignment = Alignment.Center,
+    ) {
+      Text(
+        text = label,
+        textAlign = TextAlign.Center,
+        color = Color.White,
+      )
+    }
+  }
+}
+
+@Preview
+@Composable
+fun SuwikiSliderThumbWithLabelPreview() {
+  SuwikiSliderThumbWithLabel(label = "5.0")
+}
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/slider/SuwikiSliderTrack.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/slider/SuwikiSliderTrack.kt
new file mode 100644
index 000000000..7ec2bd21b
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/slider/SuwikiSliderTrack.kt
@@ -0,0 +1,61 @@
+package com.suwiki.core.designsystem.component.slider
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+@Composable
+@ExperimentalMaterial3Api
+fun SuwikiSliderTrack(
+  modifier: Modifier = Modifier,
+  value: Float,
+  valueRange: ClosedFloatingPointRange<Float>,
+  height: Dp = 6.dp,
+  shape: Shape = RoundedCornerShape(4.dp),
+) {
+  Box(
+    modifier = modifier
+      .track(height = height, shape = shape)
+      .background(Color.LightGray),
+  ) {
+    Box(
+      modifier = modifier
+        .progress(
+          value = value,
+          valueRange = valueRange,
+          height = height,
+          shape = shape,
+        )
+        .background(Color.Blue),
+    )
+  }
+}
+
+private fun Modifier.track(
+  height: Dp = 6.dp,
+  shape: Shape = CircleShape,
+) = fillMaxWidth()
+  .heightIn(min = height)
+  .clip(shape)
+
+private fun Modifier.progress(
+  value: Float,
+  valueRange: ClosedFloatingPointRange<Float>,
+  height: Dp = 6.dp,
+  shape: Shape = CircleShape,
+) =
+  fillMaxWidth(fraction = value / valueRange.endInclusive - valueRange.start)
+    .heightIn(min = height)
+    .clip(shape)
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/textfield/SuwikiTextFieldRegular.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/textfield/SuwikiTextFieldRegular.kt
new file mode 100644
index 000000000..87bdaea6c
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/textfield/SuwikiTextFieldRegular.kt
@@ -0,0 +1,157 @@
+package com.suwiki.core.designsystem.component.textfield
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsFocusedAsState
+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.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.HorizontalDivider
+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.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+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
+
+@Composable
+fun SuwikiTextFieldRegular(
+  modifier: Modifier = Modifier,
+  label: String = "",
+  hint: String = "",
+  value: String = "",
+  onValueChange: (String) -> Unit = { _ -> },
+  onClickClearButton: () -> Unit = {},
+  helperText: String = "",
+  isError: Boolean = false,
+  maxLines: Int = 1,
+  minLines: Int = 1,
+  interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+  val isFocused by interactionSource.collectIsFocusedAsState()
+
+  val (labelColor, helperTextColor) = when {
+    isError -> (Color.Red to Color.Red)
+    isFocused -> (Color.Blue to Color.Blue)
+    else -> (Color.Gray to Color.Gray)
+  }
+
+  val underlineColor = when {
+    isError -> Color.Red
+    isFocused -> Color.Blue
+    value.isEmpty() -> Color.Gray
+    else -> Color.LightGray
+  }
+
+  BasicTextField(
+    value = value,
+    onValueChange = onValueChange,
+    modifier = modifier.fillMaxWidth(),
+    singleLine = maxLines == 1,
+    maxLines = if (minLines > maxLines) minLines else maxLines,
+    minLines = minLines,
+    interactionSource = interactionSource,
+    cursorBrush = SolidColor(Color.Blue),
+    decorationBox = { innerText ->
+      Column {
+        Text(
+          text = label,
+          color = labelColor,
+        )
+
+        Spacer(modifier = Modifier.size(2.dp))
+
+        Row(
+          modifier = Modifier
+            .fillMaxWidth()
+            .heightIn(
+              min = 27.dp,
+            ),
+          horizontalArrangement = Arrangement.SpaceBetween,
+          verticalAlignment = Alignment.CenterVertically,
+        ) {
+          Box(
+            modifier = Modifier.weight(1f),
+            contentAlignment = Alignment.CenterStart,
+          ) {
+            innerText()
+            if (value.isEmpty()) Text(text = hint, color = Color.LightGray)
+          }
+
+          if (value.isNotEmpty()) {
+            Image(
+              modifier = Modifier.clickable(onClick = onClickClearButton),
+              painter = painterResource(id = R.drawable.ic_textfield_clear),
+              contentDescription = "",
+            )
+          }
+        }
+
+        Spacer(modifier = Modifier.height(if (isFocused || isError) 4.dp else 5.dp))
+
+        HorizontalDivider(
+          thickness = if (isFocused || isError) 2.dp else 1.dp,
+          color = underlineColor,
+        )
+
+        Spacer(modifier = Modifier.height(3.dp))
+
+        Text(
+          text = helperText,
+          color = helperTextColor,
+        )
+      }
+    },
+  )
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiTextFieldRegularPreview() {
+  var normalValue by remember {
+    mutableStateOf("")
+  }
+
+  var errorValue by remember {
+    mutableStateOf("")
+  }
+
+  Column(
+    verticalArrangement = Arrangement.spacedBy(10.dp),
+  ) {
+    SuwikiTextFieldRegular(
+      label = "라벨",
+      hint = "플레이스 홀더",
+      value = normalValue,
+      onValueChange = { normalValue = it },
+      onClickClearButton = { normalValue = "" },
+      helperText = "도움말 메세지",
+    )
+
+    SuwikiTextFieldRegular(
+      label = "라벨",
+      hint = "플레이스 홀더",
+      value = errorValue,
+      onValueChange = { errorValue = it },
+      onClickClearButton = { errorValue = "" },
+      helperText = "도움말 메세지",
+      isError = true,
+    )
+  }
+}
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/textfield/SuwikiTextFieldReview.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/textfield/SuwikiTextFieldReview.kt
new file mode 100644
index 000000000..00ff10cbc
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/textfield/SuwikiTextFieldReview.kt
@@ -0,0 +1,86 @@
+package com.suwiki.core.designsystem.component.textfield
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.interaction.MutableInteractionSource
+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.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+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.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun SuwikiTextFieldReview(
+  modifier: Modifier = Modifier,
+  hint: String = "",
+  value: String = "",
+  onValueChange: (String) -> Unit = { _ -> },
+  isError: Boolean = false,
+  interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+  BasicTextField(
+    value = value,
+    onValueChange = onValueChange,
+    modifier = modifier.fillMaxWidth(),
+    interactionSource = interactionSource,
+    cursorBrush = SolidColor(Color.Blue),
+    decorationBox = { innerText ->
+      Box(
+        modifier = Modifier
+          .heightIn(min = 198.dp)
+          .background(Color.LightGray, shape = RoundedCornerShape(10.dp))
+          .border(
+            width = 1.dp,
+            color = if (isError) Color.Red else Color.Unspecified,
+            shape = RoundedCornerShape(10.dp),
+          )
+          .padding(horizontal = 16.dp, vertical = 24.dp),
+        contentAlignment = Alignment.TopStart,
+      ) {
+        innerText()
+        if (value.isEmpty()) Text(text = hint, color = Color.Gray)
+      }
+    },
+  )
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiTextFieldReviewPreview() {
+  var normalValue by remember {
+    mutableStateOf("")
+  }
+
+  Column(
+    modifier = Modifier.padding(20.dp),
+    verticalArrangement = Arrangement.spacedBy(10.dp),
+  ) {
+    SuwikiTextFieldReview(
+      hint = "강의평가를 작성해주세요",
+      value = normalValue,
+      onValueChange = { normalValue = it },
+    )
+
+    SuwikiTextFieldReview(
+      hint = "강의평가를 작성해주세요",
+      value = normalValue,
+      isError = true,
+      onValueChange = { normalValue = it },
+    )
+  }
+}
diff --git a/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/textfield/SuwikiTextFieldSmall.kt b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/textfield/SuwikiTextFieldSmall.kt
new file mode 100644
index 000000000..bc75ab897
--- /dev/null
+++ b/core/designsystem/src/main/java/com/suwiki/core/designsystem/component/textfield/SuwikiTextFieldSmall.kt
@@ -0,0 +1,128 @@
+package com.suwiki.core.designsystem.component.textfield
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsFocusedAsState
+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.Spacer
+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.layout.size
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.HorizontalDivider
+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.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+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
+
+@Composable
+fun SuwikiTextFieldSmall(
+  modifier: Modifier = Modifier,
+  hint: String = "",
+  value: String = "",
+  onValueChange: (String) -> Unit = { _ -> },
+  onClickClearButton: () -> Unit = {},
+  maxLines: Int = 1,
+  minLines: Int = 1,
+  interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+  val isFocused by interactionSource.collectIsFocusedAsState()
+
+  val underlineColor = when {
+    isFocused -> Color.Blue
+    value.isEmpty() -> Color.Gray
+    else -> Color.LightGray
+  }
+
+  BasicTextField(
+    value = value,
+    onValueChange = onValueChange,
+    modifier = modifier.fillMaxWidth(),
+    singleLine = maxLines == 1,
+    maxLines = if (minLines > maxLines) minLines else maxLines,
+    minLines = minLines,
+    interactionSource = interactionSource,
+    cursorBrush = SolidColor(Color.Blue),
+    decorationBox = { innerText ->
+      Column {
+        Row(
+          modifier = Modifier
+            .fillMaxWidth()
+            .heightIn(
+              min = 21.dp,
+            ),
+          horizontalArrangement = Arrangement.SpaceBetween,
+          verticalAlignment = Alignment.CenterVertically,
+        ) {
+          Box(
+            modifier = Modifier.weight(1f),
+            contentAlignment = Alignment.CenterStart,
+          ) {
+            innerText()
+            if (value.isEmpty()) Text(text = hint, color = Color.LightGray)
+          }
+
+          if (value.isNotEmpty()) {
+            Image(
+              modifier = Modifier
+                .size(21.dp)
+                .clickable(onClick = onClickClearButton),
+              painter = painterResource(id = R.drawable.ic_textfield_clear),
+              contentDescription = "",
+            )
+          }
+        }
+
+        Spacer(modifier = Modifier.height(5.dp))
+
+        HorizontalDivider(
+          thickness = 1.dp,
+          color = underlineColor,
+        )
+      }
+    },
+  )
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiTextFieldSmallPreview() {
+  var normalValue by remember {
+    mutableStateOf("")
+  }
+
+  Column(
+    modifier = Modifier.padding(vertical = 10.dp),
+    verticalArrangement = Arrangement.spacedBy(10.dp),
+  ) {
+    SuwikiTextFieldSmall(
+      hint = "플레이스 홀더",
+      value = normalValue,
+      onValueChange = { normalValue = it },
+      onClickClearButton = { normalValue = "" },
+    )
+
+    SuwikiTextFieldSmall(
+      hint = "플레이스 홀더",
+      value = normalValue,
+      onValueChange = { normalValue = it },
+      onClickClearButton = { normalValue = "" },
+    )
+  }
+}
diff --git a/core/designsystem/src/main/res/drawable/ic_dropdown_arrow_down.xml b/core/designsystem/src/main/res/drawable/ic_dropdown_arrow_down.xml
new file mode 100644
index 000000000..00891344a
--- /dev/null
+++ b/core/designsystem/src/main/res/drawable/ic_dropdown_arrow_down.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="18dp"
+    android:viewportWidth="18"
+    android:viewportHeight="18">
+  <path
+      android:pathData="M5.25,7.5L9,11.25L12.75,7.5H5.25Z"
+      android:strokeAlpha="0.38"
+      android:fillColor="#1D1B20"
+      android:fillAlpha="0.38"/>
+</vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_filter.xml b/core/designsystem/src/main/res/drawable/ic_filter.xml
new file mode 100644
index 000000000..2bbadb61b
--- /dev/null
+++ b/core/designsystem/src/main/res/drawable/ic_filter.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="M9,3C9.552,3 10,3.448 10,4V13.172C10.418,13.319 10.802,13.559 11.121,13.879C11.684,14.441 12,15.204 12,16C12,16.796 11.684,17.559 11.121,18.121C10.802,18.441 10.418,18.681 10,18.828V20C10,20.552 9.552,21 9,21C8.448,21 8,20.552 8,20V18.828C7.582,18.681 7.198,18.441 6.879,18.121C6.316,17.559 6,16.796 6,16C6,15.204 6.316,14.441 6.879,13.879C7.198,13.559 7.582,13.319 8,13.172V4C8,3.448 8.448,3 9,3ZM9,17C9.265,17 9.52,16.895 9.707,16.707C9.895,16.52 10,16.265 10,16C10,15.735 9.895,15.48 9.707,15.293C9.52,15.105 9.265,15 9,15C8.735,15 8.48,15.105 8.293,15.293C8.105,15.48 8,15.735 8,16C8,16.265 8.105,16.52 8.293,16.707C8.48,16.895 8.735,17 9,17ZM15,3C15.552,3 16,3.448 16,4V5.172C16.418,5.319 16.802,5.559 17.121,5.879C17.684,6.441 18,7.204 18,8C18,8.796 17.684,9.559 17.121,10.121C16.802,10.441 16.418,10.681 16,10.828V20C16,20.552 15.552,21 15,21C14.448,21 14,20.552 14,20V10.828C13.582,10.681 13.198,10.441 12.879,10.121C12.316,9.559 12,8.796 12,8C12,7.204 12.316,6.441 12.879,5.879C13.198,5.559 13.582,5.319 14,5.172V4C14,3.448 14.448,3 15,3ZM15,9C15.265,9 15.52,8.895 15.707,8.707C15.895,8.52 16,8.265 16,8C16,7.735 15.895,7.48 15.707,7.293C15.52,7.105 15.265,7 15,7C14.735,7 14.48,7.105 14.293,7.293C14.105,7.48 14,7.735 14,8C14,8.265 14.105,8.52 14.293,8.707C14.48,8.895 14.735,9 15,9Z"
+      android:fillColor="#6A6A6A"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_search.xml b/core/designsystem/src/main/res/drawable/ic_search.xml
new file mode 100644
index 000000000..a9366503c
--- /dev/null
+++ b/core/designsystem/src/main/res/drawable/ic_search.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="M10.2,4.8C8.768,4.8 7.394,5.369 6.382,6.382C5.369,7.394 4.8,8.768 4.8,10.2C4.8,10.909 4.94,11.611 5.211,12.267C5.482,12.922 5.88,13.517 6.382,14.018C6.883,14.52 7.478,14.918 8.134,15.189C8.789,15.46 9.491,15.6 10.2,15.6C10.909,15.6 11.611,15.46 12.267,15.189C12.922,14.918 13.517,14.52 14.018,14.018C14.52,13.517 14.918,12.922 15.189,12.267C15.46,11.611 15.6,10.909 15.6,10.2C15.6,8.768 15.031,7.394 14.018,6.382C13.006,5.369 11.632,4.8 10.2,4.8ZM5.109,5.109C6.459,3.759 8.29,3 10.2,3C12.11,3 13.941,3.759 15.291,5.109C16.641,6.459 17.4,8.29 17.4,10.2C17.4,11.146 17.214,12.082 16.852,12.955C16.605,13.55 16.281,14.108 15.888,14.615L20.736,19.464C21.088,19.815 21.088,20.385 20.736,20.736C20.385,21.088 19.815,21.088 19.464,20.736L14.615,15.888C14.108,16.281 13.55,16.605 12.955,16.852C12.082,17.214 11.146,17.4 10.2,17.4C9.254,17.4 8.318,17.214 7.445,16.852C6.571,16.49 5.777,15.96 5.109,15.291C4.44,14.623 3.91,13.829 3.548,12.955C3.186,12.082 3,11.146 3,10.2C3,8.29 3.759,6.459 5.109,5.109Z"
+      android:fillColor="#959595"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_slider_thumb_hovered.xml b/core/designsystem/src/main/res/drawable/ic_slider_thumb_hovered.xml
new file mode 100644
index 000000000..4a81fe6e9
--- /dev/null
+++ b/core/designsystem/src/main/res/drawable/ic_slider_thumb_hovered.xml
@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="28dp"
+    android:height="57dp"
+    android:viewportWidth="28"
+    android:viewportHeight="57">
+  <path
+      android:pathData="M14,34L4.101,24.042C-1.367,18.542 -1.367,9.625 4.101,4.125C9.568,-1.375 18.432,-1.375 23.899,4.125C29.367,9.625 29.367,18.542 23.899,24.042L14,34Z"
+      android:fillColor="#346CFD"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M14,44m-13,0a13,13 0,1 1,26 0a13,13 0,1 1,-26 0"
+      android:strokeAlpha="0.2"
+      android:fillColor="#346CFD"
+      android:fillAlpha="0.2"/>
+  <path
+      android:pathData="M14,44m-8,0a8,8 0,1 1,16 0a8,8 0,1 1,-16 0"
+      android:fillColor="#346CFD"/>
+</vector>
diff --git a/core/designsystem/src/main/res/drawable/ic_textfield_clear.xml b/core/designsystem/src/main/res/drawable/ic_textfield_clear.xml
new file mode 100644
index 000000000..b66edaac7
--- /dev/null
+++ b/core/designsystem/src/main/res/drawable/ic_textfield_clear.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="25dp"
+    android:viewportWidth="24"
+    android:viewportHeight="25">
+  <path
+      android:pathData="M12,5.5C8.134,5.5 5,8.634 5,12.5C5,16.366 8.134,19.5 12,19.5C15.866,19.5 19,16.366 19,12.5C19,8.634 15.866,5.5 12,5.5ZM14.584,15.159L13.553,15.155L12,13.303L10.448,15.153L9.416,15.158C9.347,15.158 9.291,15.103 9.291,15.033C9.291,15.003 9.302,14.975 9.32,14.952L11.353,12.53L9.32,10.109C9.301,10.087 9.291,10.058 9.291,10.028C9.291,9.959 9.347,9.903 9.416,9.903L10.448,9.908L12,11.759L13.552,9.909L14.583,9.905C14.652,9.905 14.708,9.959 14.708,10.03C14.708,10.059 14.697,10.087 14.678,10.111L12.648,12.531L14.68,14.953C14.698,14.977 14.709,15.005 14.709,15.034C14.709,15.103 14.653,15.159 14.584,15.159Z"
+      android:fillColor="#959595"/>
+</vector>