diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index a425311..bb0078e 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -4,7 +4,6 @@
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
-        <option name="testRunner" value="CHOOSE_PER_TEST" />
         <option name="externalProjectPath" value="$PROJECT_DIR$" />
         <option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
         <option name="modules">
diff --git a/app/src/main/kotlin/com/yourssu/handy/demo/BottomSheetPreview.kt b/app/src/main/kotlin/com/yourssu/handy/demo/BottomSheetPreview.kt
new file mode 100644
index 0000000..b72652b
--- /dev/null
+++ b/app/src/main/kotlin/com/yourssu/handy/demo/BottomSheetPreview.kt
@@ -0,0 +1,88 @@
+package com.yourssu.handy.demo
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.yourssu.handy.compose.BottomSheet
+import com.yourssu.handy.compose.BottomSheetType
+import com.yourssu.handy.compose.HandyTheme
+import com.yourssu.handy.compose.SheetValue
+import com.yourssu.handy.compose.Text
+import com.yourssu.handy.compose.rememberModalBottomSheetState
+
+@Preview(showBackground = true)
+@Composable
+private fun OneShortBottomSheetPreview() {
+    HandyTheme {
+        val sheetState = rememberModalBottomSheetState(
+            initialValue = SheetValue.Expanded
+        )
+        BottomSheet(
+            onDismissRequest = {},
+            sheetState = sheetState,
+            bottomSheetType = BottomSheetType.OneButton(
+                buttonText = "TEXT"
+            )
+        ) {
+            Text("one button")
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun OneLongBottomSheetPreview() {
+    HandyTheme {
+        val sheetState = rememberModalBottomSheetState(
+            initialValue = SheetValue.Expanded
+        )
+        BottomSheet(
+            onDismissRequest = {},
+            sheetState = sheetState,
+            bottomSheetType = BottomSheetType.OneButton(
+                buttonText = "TEXT"
+            )
+        ) {
+            Text("one button\none button\none button\none button\none button\none button\none button\none button")
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun TwoShortBottomSheetPreview() {
+    HandyTheme {
+        val sheetState = rememberModalBottomSheetState(
+            initialValue = SheetValue.Expanded
+        )
+        BottomSheet(
+            onDismissRequest = {},
+            sheetState = sheetState,
+            bottomSheetType = BottomSheetType.TwoButton(
+                firstButtonText = "LEFT",
+                secondButtonText = "RIGHT"
+            )
+        ) {
+            Text("two button")
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun TwoLongBottomSheetPreview() {
+    HandyTheme {
+        val sheetState = rememberModalBottomSheetState(
+            initialValue = SheetValue.Expanded
+        )
+        BottomSheet(
+            onDismissRequest = {},
+            sheetState = sheetState,
+            bottomSheetType = BottomSheetType.TwoButton(
+                firstButtonText = "LEFT",
+                secondButtonText = "RIGHT"
+            )
+        ) {
+            Text("two button\ntwo button\ntwo button\ntwo button\ntwo button\ntwo button\ntwo button\ntwo button")
+        }
+    }
+}
\ No newline at end of file
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/BottomSheet.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/BottomSheet.kt
new file mode 100644
index 0000000..cb3927c
--- /dev/null
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/BottomSheet.kt
@@ -0,0 +1,263 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.anchoredDraggable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.SideEffect
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Popup
+import com.yourssu.handy.compose.BottomSheetDefaults.DragHandle
+import com.yourssu.handy.compose.BottomSheetDefaults.contentMinHeight
+import com.yourssu.handy.compose.BottomSheetDefaults.contentPadding
+import com.yourssu.handy.compose.BottomSheetDefaults.surfaceBottomPadding
+import com.yourssu.handy.compose.BottomSheetDefaults.surfaceHorizontalPadding
+import com.yourssu.handy.compose.BottomSheetType.OneButton
+import com.yourssu.handy.compose.BottomSheetType.TwoButton
+import com.yourssu.handy.compose.SheetValue.Hidden
+import com.yourssu.handy.compose.button.BaseButton
+import com.yourssu.handy.compose.button.ButtonColorState
+import com.yourssu.handy.compose.foundation.ColorGray080
+import com.yourssu.handy.compose.foundation.HandyTypography
+import com.yourssu.handy.compose.foundation.Radius
+import kotlinx.coroutines.flow.distinctUntilChanged
+import kotlinx.coroutines.flow.drop
+import kotlinx.coroutines.flow.filter
+import kotlinx.coroutines.launch
+
+/**
+ * BottomSheet의 타입을 나타냅니다.
+ *
+ * [OneButton] : 하단에 버튼 한 개 표시
+ * [TwoButton] : 하단에 버튼 두 개 표시
+ */
+sealed class BottomSheetType {
+    data class OneButton(
+        val buttonText: String
+    ) : BottomSheetType()
+
+    data class TwoButton(
+        val firstButtonText: String,
+        val secondButtonText: String
+    ) : BottomSheetType()
+}
+
+/**
+ * 바텀시트의 UI를 나타내는 함수입니다.
+ *
+ * @param onDismissRequest 바텀시트가 닫힐 때 호출되는 함수
+ * @param bottomSheetType 바텀시트의 [BottomSheetType] 타입을 결정
+ * @param modifier Modifier 수정자
+ * @param sheetState 바텀시트의 상태를 나타내는 객체
+ * @param onOneButtonClick [BottomSheetType.OneButton]의 버튼 클릭 시 호출되는 함수
+ * @param onFirstButtonClick [BottomSheetType.TwoButton]의 첫 번째 버튼 클릭 시 호출되는 함수
+ * @param onSecondButtonClick [BottomSheetType.TwoButton]의 두 번째 버튼 클릭 시 호출되는 함수
+ * @param content 바텀시트 내부에 표시될 내용을 결정
+ */
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun BottomSheet(
+    onDismissRequest: () -> Unit,
+    bottomSheetType: BottomSheetType,
+    modifier: Modifier = Modifier,
+    sheetState: SheetState = rememberModalBottomSheetState(),
+    onOneButtonClick: () -> Unit = {},
+    onFirstButtonClick: () -> Unit = {},
+    onSecondButtonClick: () -> Unit = {},
+    content: @Composable () -> Unit
+) {
+    val density = LocalDensity.current
+    SideEffect {
+        sheetState.density = density
+    }
+    val scope = rememberCoroutineScope()
+    val animateToDismiss: () -> Unit = {
+        scope.launch { sheetState.hide() }.invokeOnCompletion {
+            if (!sheetState.isVisible) onDismissRequest()
+        }
+    }
+
+    LaunchedEffect(sheetState) {
+        snapshotFlow { sheetState.currentValue }
+            .drop(1)
+            .distinctUntilChanged()
+            .filter { it == Hidden }
+            .collect {
+                scope.launch { sheetState.hide() }.invokeOnCompletion { onDismissRequest() }
+            }
+    }
+
+    Popup {
+        BoxWithConstraints(Modifier.fillMaxSize()) {
+            val fullHeight = constraints.maxHeight
+            Scrim(
+                color = ColorGray080,
+                onDismissRequest = animateToDismiss,
+                visible = sheetState.targetValue != Hidden
+            )
+            Surface(
+                modifier = modifier
+                    .fillMaxWidth()
+                    .align(Alignment.BottomCenter)
+                    .padding(horizontal = surfaceHorizontalPadding)
+                    .padding(bottom = surfaceBottomPadding)
+                    .offset {
+                        IntOffset(
+                            x = 0,
+                            y = sheetState
+                                .requireOffset()
+                                .toInt()
+                        )
+                    }
+                    .anchoredDraggable(
+                        state = sheetState.anchoredDraggableState,
+                        orientation = Orientation.Vertical,
+                    )
+                    .modalBottomSheetAnchors(
+                        sheetState = sheetState,
+                        fullHeight = fullHeight.toFloat()
+                    ),
+                shape = RoundedCornerShape(24.dp)
+            ) {
+                Column(
+                    modifier = Modifier
+                        .background(HandyTheme.colors.bgBasicDefault)
+                        .align(Alignment.BottomCenter)
+                        .padding(horizontal = contentPadding)
+                        .padding(bottom = contentPadding),
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .defaultMinSize(minHeight = contentMinHeight),
+                        horizontalAlignment = Alignment.CenterHorizontally
+                    ) {
+                        DragHandle()
+                        Spacer(modifier = Modifier.height(contentPadding))
+                        content()
+                        Spacer(modifier = Modifier.height(contentPadding))
+                    }
+                    Column {
+                        when (bottomSheetType) {
+                            is OneButton -> {
+                                OneButtonBottomSheet(
+                                    buttonText = bottomSheetType.buttonText,
+                                    onClick = onOneButtonClick
+                                )
+                            }
+
+                            is TwoButton -> {
+                                TwoButtonBottomSheet(
+                                    firstButtonText = bottomSheetType.firstButtonText,
+                                    secondButtonText = bottomSheetType.secondButtonText,
+                                    onFirstButtonClick = onFirstButtonClick,
+                                    onSecondButtonClick = onSecondButtonClick
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    if (sheetState.hasExpandedState) {
+        LaunchedEffect(sheetState) {
+            sheetState.show()
+        }
+    }
+}
+
+/**
+ * 하단에 버튼이 하나만 표시될 때 사용하는 함수입니다.
+ *
+ * @param buttonText 버튼에 표시될 텍스트
+ * @param onClick 버튼 클릭 시 호출되는 함수
+ * @param modifier Modifier 수정자
+ */
+@Composable
+private fun OneButtonBottomSheet(
+    buttonText: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    BaseButton(
+        onClick = onClick,
+        colors = ButtonColorState(bgColor = HandyTheme.colors.buttonFilledPrimaryEnabled),
+        modifier = modifier.fillMaxWidth(),
+        rounding = Radius.XL.dp
+    ) {
+        Text(
+            text = buttonText,
+            style = HandyTypography.B1Sb16,
+            color = HandyTheme.colors.textBasicWhite
+        )
+    }
+}
+
+/**
+ * 하단에 버튼이 두 개일 때 표시될 때 사용하는 함수입니다.
+ *
+ * @param firstButtonText 첫 번째 버튼에 표시될 텍스트
+ * @param secondButtonText 두 번째 버튼에 표시될 텍스트
+ * @param onFirstButtonClick 첫 번째 버튼 클릭 시 호출되는 함수
+ * @param onSecondButtonClick 두 번째 버튼 클릭 시 호출되는 함수
+ * @param modifier Modifier 수정자
+ */
+@Composable
+private fun TwoButtonBottomSheet(
+    firstButtonText: String,
+    secondButtonText: String,
+    onFirstButtonClick: () -> Unit,
+    onSecondButtonClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.spacedBy(8.dp)
+    ) {
+        BaseButton(
+            onClick = onFirstButtonClick,
+            colors = ButtonColorState(bgColor = HandyTheme.colors.buttonFilledSecondaryEnabled),
+            modifier = Modifier.weight(1f),
+            rounding = Radius.XL.dp
+        ) {
+            Text(
+                text = firstButtonText,
+                style = HandyTypography.B1Sb16,
+                color = HandyTheme.colors.textBrandSecondary
+            )
+        }
+        BaseButton(
+            onClick = onSecondButtonClick,
+            colors = ButtonColorState(bgColor = HandyTheme.colors.buttonFilledPrimaryEnabled),
+            modifier = Modifier.weight(1f),
+            rounding = Radius.XL.dp
+        ) {
+            Text(
+                text = secondButtonText,
+                style = HandyTypography.B1Sb16,
+                color = HandyTheme.colors.textBasicWhite
+            )
+        }
+    }
+}
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/BottomSheetData.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/BottomSheetData.kt
new file mode 100644
index 0000000..40108c8
--- /dev/null
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/BottomSheetData.kt
@@ -0,0 +1,223 @@
+package com.yourssu.handy.compose
+
+import androidx.compose.animation.core.SpringSpec
+import androidx.compose.animation.core.TweenSpec
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.gestures.AnchoredDraggableState
+import androidx.compose.foundation.gestures.DraggableAnchors
+import androidx.compose.foundation.gestures.animateTo
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.saveable.Saver
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.isSpecified
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.yourssu.handy.compose.SheetValue.Expanded
+import com.yourssu.handy.compose.SheetValue.Hidden
+
+/**
+ * 바텀시트의 상태를 정의하는 Enum 클래스입니다.
+ *
+ * [Hidden]: 바텀시트가 보이지 않는 상태
+ * [Expanded]: 바텀시트가 보이는 상태
+ */
+enum class SheetValue {
+    Hidden,
+    Expanded,
+}
+
+@Composable
+fun rememberModalBottomSheetState(
+    initialValue: SheetValue = Hidden
+) = rememberSheetState(initialValue)
+
+@Composable
+internal fun rememberSheetState(
+    initialValue: SheetValue = Hidden,
+): SheetState {
+    val density = LocalDensity.current
+    return rememberSaveable(
+        saver = SheetState.Saver(density = density)
+    ) {
+        SheetState(density, initialValue)
+    }
+}
+
+/**
+ * 바텀시트 상태를 관리하는 클래스입니다.
+ *
+ * @property density 화면 밀도
+ * @param initialValue 초기 바텀시트 상태
+ */
+@Stable
+@OptIn(ExperimentalFoundationApi::class)
+class SheetState(
+    internal var density: Density,
+    initialValue: SheetValue = Hidden,
+) {
+    val currentValue: SheetValue get() = anchoredDraggableState.currentValue
+
+    val targetValue: SheetValue get() = anchoredDraggableState.targetValue
+
+    val isVisible: Boolean
+        get() = anchoredDraggableState.currentValue != Hidden
+
+    fun requireOffset(): Float = anchoredDraggableState.requireOffset()
+
+    val hasExpandedState: Boolean
+        get() = anchoredDraggableState.anchors.hasAnchorFor(Expanded)
+
+    suspend fun show() {
+        animateTo(Expanded)
+    }
+
+    suspend fun hide() {
+        animateTo(Hidden)
+    }
+
+    private suspend fun animateTo(
+        targetValue: SheetValue,
+        velocity: Float = anchoredDraggableState.lastVelocity
+    ) {
+        anchoredDraggableState.animateTo(targetValue, velocity)
+    }
+
+    internal var anchoredDraggableState = AnchoredDraggableState(
+        initialValue = initialValue,
+        animationSpec = SpringSpec(),
+        positionalThreshold = { with(requireDensity()) { 56.dp.toPx() } },
+        velocityThreshold = { with(requireDensity()) { 125.dp.toPx() } },
+    )
+
+    private fun requireDensity() = density
+
+    companion object {
+        fun Saver(
+            density: Density
+        ) = Saver<SheetState, SheetValue>(
+            save = { it.currentValue },
+            restore = { savedValue ->
+                SheetState(density, savedValue)
+            }
+        )
+    }
+}
+
+internal object BottomSheetDefaults {
+    /**
+     * Sheet 상단에 놓인 시각적 마커를 나타내며 드래그할 수 있습니다.
+     */
+    @Composable
+    fun DragHandle(
+        modifier: Modifier = Modifier,
+        width: Dp = DockedDragHandleWidth,
+        height: Dp = DockedDragHandleHeight,
+        shape: Shape = CircleShape,
+        color: Color = HandyTheme.colors.bottomSheetHandle,
+    ) {
+        Surface(
+            modifier = modifier
+                .padding(vertical = DragHandleVerticalPadding),
+            backgroundColor = color,
+            shape = shape
+        ) {
+            Box(
+                Modifier
+                    .size(
+                        width = width,
+                        height = height
+                    )
+            )
+        }
+    }
+
+    val contentPadding = 16.dp
+    val contentMinHeight = 208.dp
+    val surfaceHorizontalPadding = 16.dp
+    val surfaceBottomPadding = 34.dp
+    private val DockedDragHandleWidth = 32.dp
+    private val DockedDragHandleHeight = 4.dp
+    private val DragHandleVerticalPadding = 16.dp
+}
+
+/**
+ * 바텀시트의 드래그 앵커를 설정하는 Modifier 확장 함수입니다.
+ *
+ * @param sheetState 현재 바텀시트 상태를 관리하는 객체
+ * @param fullHeight 화면의 전체 높이
+ */
+@OptIn(ExperimentalFoundationApi::class)
+internal fun Modifier.modalBottomSheetAnchors(
+    sheetState: SheetState,
+    fullHeight: Float
+) = onSizeChanged { sheetSize ->
+
+    val newAnchors = DraggableAnchors {
+        Hidden at fullHeight - sheetSize.height
+        Expanded at 0f
+    }
+
+    val newTarget = when (sheetState.anchoredDraggableState.targetValue) {
+        Hidden -> Hidden
+        Expanded -> Expanded
+    }
+
+    sheetState.anchoredDraggableState.updateAnchors(newAnchors, newTarget)
+}
+
+/**
+ * 바텀시트가 보일 때 스크림 효과를 추가하는 함수입니다.
+ *
+ * @param color 스크림의 색상
+ * @param onDismissRequest 스크림을 눌렀을 때 호출되는 함수
+ * @param visible 스크림의 가시 여부 결정
+ */
+@Composable
+internal fun Scrim(
+    color: Color,
+    onDismissRequest: () -> Unit,
+    visible: Boolean
+) {
+    if (color.isSpecified) {
+        val alpha by animateFloatAsState(
+            targetValue = if (visible) 1f else 0f,
+            animationSpec = TweenSpec(), label = ""
+        )
+        val dismissSheet = if (visible) {
+            Modifier
+                .pointerInput(onDismissRequest) {
+                    detectTapGestures {
+                        onDismissRequest()
+                    }
+                }
+                .clearAndSetSemantics {}
+        } else {
+            Modifier
+        }
+        Canvas(
+            Modifier
+                .fillMaxSize()
+                .then(dismissSheet)
+        ) {
+            drawRect(color = color, alpha = alpha)
+        }
+    }
+}
\ No newline at end of file
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/PrimitiveColors.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/PrimitiveColors.kt
index 5739e77..f8671a8 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/PrimitiveColors.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/PrimitiveColors.kt
@@ -39,7 +39,8 @@ internal val ColorNeutralTransparent = Color(0x00FFFFFF)
 internal val ColorStatusRedMain = Color(0xFFFF5C5C)
 internal val ColorStatusRedSub = Color(0xFFFFEBEB)
 
-
-
 internal val ColorFabPrimaryShadow = Color(0x6E768740).copy(alpha = 0.25f)
-internal val ColorFabSecondaryShadow = Color(0xB5B9C440).copy(alpha = 0.25f)
\ No newline at end of file
+internal val ColorFabSecondaryShadow = Color(0xB5B9C440).copy(alpha = 0.25f)
+
+// Opacity/gray/080
+internal val ColorGray080 = Color(0xFF25262C).copy(alpha = 0.80f)
\ No newline at end of file
diff --git a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
index 5a50a8d..a4c702a 100644
--- a/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
+++ b/compose/src/main/kotlin/com/yourssu/handy/compose/foundation/SemanticColors.kt
@@ -123,6 +123,9 @@ data class ColorScheme(
     val switchSelected: Color = ColorViolet500,
     val switchDisabled: Color = ColorGray200,
     val switchThumb: Color = ColorNeutralWhite,
+
+    // BottomSheet
+    val bottomSheetHandle: Color = ColorGray300
 )
 
 val lightColorScheme = ColorScheme()