diff --git a/app/src/main/java/org/sopt/pingle/domain/model/PingleEntity.kt b/app/src/main/java/org/sopt/pingle/domain/model/PingleEntity.kt
new file mode 100644
index 00000000..d32dd6ea
--- /dev/null
+++ b/app/src/main/java/org/sopt/pingle/domain/model/PingleEntity.kt
@@ -0,0 +1,16 @@
+package org.sopt.pingle.domain.model
+
+data class PingleEntity(
+    val id: Long,
+    val category: String,
+    val name: String,
+    val ownerName: String,
+    val location: String,
+    val date: String,
+    val startAt: String,
+    val endAt: String,
+    val maxParticipants: Int,
+    val curParticipants: Int,
+    val isParticipating: Boolean,
+    val chatLink: String
+)
diff --git a/app/src/main/java/org/sopt/pingle/presentation/type/CategoryType.kt b/app/src/main/java/org/sopt/pingle/presentation/type/CategoryType.kt
index 3a965793..d9f38b0b 100644
--- a/app/src/main/java/org/sopt/pingle/presentation/type/CategoryType.kt
+++ b/app/src/main/java/org/sopt/pingle/presentation/type/CategoryType.kt
@@ -35,11 +35,16 @@ enum class CategoryType(
         backgroundBadgeColor = R.color.badge_yellow,
         categoryNameRes = R.string.category_multi
     ),
-    OTHER(
+    OTHERS(
         textColor = R.color.g_01,
         activatedOutLinedColor = R.color.g_01,
         backgroundChipColor = R.color.g_10,
         backgroundBadgeColor = R.color.g_07,
         categoryNameRes = R.string.category_others
-    )
+    );
+
+    companion object {
+        fun fromString(categoryName: String) =
+            CategoryType.values().first() { it.name == categoryName }
+    }
 }
diff --git a/app/src/main/java/org/sopt/pingle/presentation/ui/common/AllModalDialogFragment.kt b/app/src/main/java/org/sopt/pingle/presentation/ui/common/AllModalDialogFragment.kt
index 90e20162..4c30fa7b 100644
--- a/app/src/main/java/org/sopt/pingle/presentation/ui/common/AllModalDialogFragment.kt
+++ b/app/src/main/java/org/sopt/pingle/presentation/ui/common/AllModalDialogFragment.kt
@@ -1,5 +1,6 @@
 package org.sopt.pingle.presentation.ui.common
 
+import android.content.DialogInterface
 import android.os.Bundle
 import android.view.View
 import org.sopt.pingle.R
@@ -12,7 +13,8 @@ class AllModalDialogFragment(
     private val buttonText: String,
     private val textButtonText: String,
     private val clickBtn: () -> Unit,
-    private val clickTextBtn: () -> Unit
+    private val clickTextBtn: () -> Unit,
+    private val onDialogClosed: () -> Unit = {}
 ) : BindingDialogFragment<DialogAllModalBinding>(R.layout.dialog_all_modal) {
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
@@ -21,6 +23,11 @@ class AllModalDialogFragment(
         addListeners()
     }
 
+    override fun onDismiss(dialog: DialogInterface) {
+        super.onDismiss(dialog)
+        onDialogClosed()
+    }
+
     private fun initLayout() {
         with(binding) {
             tvAllModalTitle.text = title
diff --git a/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapFragment.kt b/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapFragment.kt
index 074d46f3..fa265515 100644
--- a/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapFragment.kt
+++ b/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapFragment.kt
@@ -28,9 +28,13 @@ import org.sopt.pingle.R
 import org.sopt.pingle.databinding.FragmentMapBinding
 import org.sopt.pingle.presentation.mapper.toMarker
 import org.sopt.pingle.presentation.type.CategoryType
+import org.sopt.pingle.presentation.ui.common.AllModalDialogFragment
 import org.sopt.pingle.util.base.BindingFragment
+import org.sopt.pingle.util.component.OnPingleCardClickListener
 import org.sopt.pingle.util.component.PingleChip
+import org.sopt.pingle.util.fragment.navigateToWebView
 import org.sopt.pingle.util.fragment.showToast
+import org.sopt.pingle.util.fragment.stringOf
 
 class MapFragment : BindingFragment<FragmentMapBinding>(R.layout.fragment_map), OnMapReadyCallback {
     private val mapViewModel by viewModels<MapViewModel>()
@@ -79,7 +83,20 @@ class MapFragment : BindingFragment<FragmentMapBinding>(R.layout.fragment_map),
             chipMapCategoryPlay.setChipCategoryType(CategoryType.PLAY)
             chipMapCategoryStudy.setChipCategoryType(CategoryType.STUDY)
             chipMapCategoryMulti.setChipCategoryType(CategoryType.MULTI)
-            chipMapCategoryOthers.setChipCategoryType(CategoryType.OTHER)
+            chipMapCategoryOthers.setChipCategoryType(CategoryType.OTHERS)
+            cardMap.initLayout(mapViewModel.dummyPingle)
+            cardMap.listener = object : OnPingleCardClickListener {
+                override fun onPingleCardChatBtnClickListener() {
+                    startActivity(navigateToWebView(mapViewModel.dummyPingle.chatLink))
+                }
+
+                override fun onPingleCardParticipateBtnClickListener() {
+                    when (mapViewModel.dummyPingle.isParticipating) {
+                        true -> showMapCancelModalDialogFragment()
+                        false -> showMapModalDialogFragment()
+                    }
+                }
+            }
         }
     }
 
@@ -168,6 +185,30 @@ class MapFragment : BindingFragment<FragmentMapBinding>(R.layout.fragment_map),
         }
     }
 
+    private fun showMapCancelModalDialogFragment() {
+        AllModalDialogFragment(
+            title = stringOf(R.string.map_cancel_modal_title),
+            detail = stringOf(R.string.map_cancel_modal_detail),
+            buttonText = stringOf(R.string.map_cancel_modal_button_text),
+            textButtonText = stringOf(R.string.map_cancel_modal_text_button_text),
+            clickBtn = { mapViewModel.cancelPingle() },
+            clickTextBtn = { },
+            onDialogClosed = { binding.cardMap.initLayout(mapViewModel.dummyPingle) }
+        ).show(childFragmentManager, MAP_CANCEL_MODAL)
+    }
+
+    private fun showMapModalDialogFragment() {
+        with(mapViewModel.dummyPingle) {
+            MapModalDialogFragment(
+                category = CategoryType.fromString(categoryName = category),
+                name = name,
+                ownerName = ownerName,
+                clickBtn = { mapViewModel.joinPingle() },
+                onDialogClosed = { binding.cardMap.initLayout(mapViewModel.dummyPingle) }
+            ).show(childFragmentManager, MAP_MODAL)
+        }
+    }
+
     companion object {
         private const val LOCATION_PERMISSION_REQUEST_CODE = 1000
         private val LOCATION_PERMISSIONS = arrayOf(
@@ -175,5 +216,7 @@ class MapFragment : BindingFragment<FragmentMapBinding>(R.layout.fragment_map),
             Manifest.permission.ACCESS_COARSE_LOCATION
         )
         private const val SINGLE_SELECTION = 0
+        private const val MAP_CANCEL_MODAL = "mapCancelModal"
+        private const val MAP_MODAL = "mapModal"
     }
 }
diff --git a/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapModalDialogFragment.kt b/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapModalDialogFragment.kt
index b2a628a2..490ab2a8 100644
--- a/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapModalDialogFragment.kt
+++ b/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapModalDialogFragment.kt
@@ -1,5 +1,6 @@
 package org.sopt.pingle.presentation.ui.main.home.map
 
+import android.content.DialogInterface
 import android.os.Bundle
 import android.view.View
 import org.sopt.pingle.R
@@ -12,7 +13,8 @@ class MapModalDialogFragment(
     private val category: CategoryType,
     private val name: String,
     private val ownerName: String,
-    private val clickBtn: () -> Unit
+    private val clickBtn: () -> Unit,
+    private val onDialogClosed: () -> Unit = {}
 ) : BindingDialogFragment<DialogMapModalBinding>(R.layout.dialog_map_modal) {
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
@@ -22,6 +24,11 @@ class MapModalDialogFragment(
         addListeners()
     }
 
+    override fun onDismiss(dialog: DialogInterface) {
+        super.onDismiss(dialog)
+        onDialogClosed.invoke()
+    }
+
     private fun initLayout() {
         with(binding) {
             badgeMapModalPingleInfoCategory.setBadgeCategoryType(category)
diff --git a/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapViewModel.kt b/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapViewModel.kt
index d4a9947d..69ce4bd9 100644
--- a/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapViewModel.kt
+++ b/app/src/main/java/org/sopt/pingle/presentation/ui/main/home/map/MapViewModel.kt
@@ -4,6 +4,7 @@ import androidx.lifecycle.ViewModel
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.asStateFlow
 import org.sopt.pingle.domain.model.PinEntity
+import org.sopt.pingle.domain.model.PingleEntity
 import org.sopt.pingle.presentation.type.CategoryType
 
 class MapViewModel() : ViewModel() {
@@ -38,10 +39,59 @@ class MapViewModel() : ViewModel() {
         )
     )
 
+    var dummyPingle = PingleEntity(
+        id = 1,
+        category = "PLAY",
+        name = "핑글핑글핑글 ~",
+        ownerName = "배지현",
+        location = "길음역",
+        date = "2023-01-06",
+        startAt = "10:30:00",
+        endAt = "22:34:00",
+        maxParticipants = 5,
+        curParticipants = 4,
+        isParticipating = false,
+        chatLink = "https://github.com/TeamPINGLE/PINGLE-ANDROID"
+    )
+
     private val _category = MutableStateFlow<CategoryType?>(null)
     val category get() = _category.asStateFlow()
 
     fun setCategory(category: CategoryType?) {
         _category.value = category
     }
+
+    fun cancelPingle() {
+        dummyPingle = PingleEntity(
+            id = 1,
+            category = "PLAY",
+            name = "핑글핑글핑글 ~",
+            ownerName = "배지현",
+            location = "길음역",
+            date = "2023-01-06",
+            startAt = "10:30:00",
+            endAt = "22:34:00",
+            maxParticipants = 5,
+            curParticipants = 4,
+            isParticipating = false,
+            chatLink = "https://github.com/TeamPINGLE/PINGLE-ANDROID"
+        )
+    }
+
+    fun joinPingle() {
+        dummyPingle = PingleEntity(
+            id = 1,
+            category = "PLAY",
+            name = "핑글핑글핑글 ~",
+            ownerName = "배지현",
+            location = "길음역",
+            date = "2023-01-06",
+            startAt = "10:30:00",
+            endAt = "22:34:00",
+            maxParticipants = 5,
+            curParticipants = 5,
+            isParticipating = true,
+            chatLink = "https://github.com/TeamPINGLE/PINGLE-ANDROID"
+        )
+    }
 }
diff --git a/app/src/main/java/org/sopt/pingle/util/component/PingleCard.kt b/app/src/main/java/org/sopt/pingle/util/component/PingleCard.kt
new file mode 100644
index 00000000..72d640e0
--- /dev/null
+++ b/app/src/main/java/org/sopt/pingle/util/component/PingleCard.kt
@@ -0,0 +1,132 @@
+package org.sopt.pingle.util.component
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.text.Spannable
+import android.text.SpannableString
+import android.text.style.ForegroundColorSpan
+import android.text.style.TextAppearanceSpan
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import androidx.constraintlayout.widget.ConstraintLayout
+import java.time.LocalDate
+import java.time.LocalTime
+import java.time.format.DateTimeFormatter
+import org.sopt.pingle.R
+import org.sopt.pingle.databinding.CardPingleBinding
+import org.sopt.pingle.domain.model.PingleEntity
+import org.sopt.pingle.presentation.type.CategoryType
+import org.sopt.pingle.util.view.colorOf
+import org.sopt.pingle.util.view.stringOf
+
+@SuppressLint("CustomViewStyleable")
+class PingleCard @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : ConstraintLayout(context, attrs, defStyleAttr) {
+    private val binding: CardPingleBinding
+    var listener: OnPingleCardClickListener? = null
+
+    init {
+        binding = CardPingleBinding.inflate(LayoutInflater.from(context), this, true)
+
+        addListeners()
+    }
+
+    private fun addListeners() {
+        binding.btnCardBottomMapChat.setOnClickListener {
+            listener?.onPingleCardChatBtnClickListener()
+        }
+
+        binding.btnCardBottomMapParticipate.setOnClickListener {
+            listener?.onPingleCardParticipateBtnClickListener()
+        }
+    }
+
+    fun initLayout(pingleEntity: PingleEntity) {
+        val category: CategoryType = CategoryType.fromString(pingleEntity.category)
+
+        with(binding) {
+            badgeCardTopInfo.setBadgeCategoryType(category)
+            tvCardTopInfoName.text = pingleEntity.name
+            tvCardTopInfoName.setTextColor(colorOf(category.textColor))
+            tvCardTopInfoOwnerName.text = pingleEntity.ownerName
+            tvCardBottomCalenderDetail.text = pingleEntity.convertToCalenderDetail()
+            tvCardBottomMapDetail.text = pingleEntity.location
+            btnCardBottomMapChat.isEnabled = pingleEntity.isParticipating
+            btnCardBottomMapParticipate.text = when (pingleEntity.isParticipating) {
+                true -> stringOf(R.string.map_card_cancel)
+                false -> stringOf(R.string.map_card_participate)
+            }
+            btnCardBottomMapParticipate.isEnabled =
+                pingleEntity.isParticipating || !pingleEntity.isCompleted()
+
+            if (pingleEntity.isCompleted()) {
+                with(tvCardTopInfoParticipantDetail) {
+                    text = stringOf(R.string.map_card_completed)
+                    setTextAppearance(R.style.TextAppearance_Pingle_Sub_Semi_16)
+                }
+            } else {
+                with(tvCardTopInfoParticipantDetail) {
+                    val participantDetail = context.getString(
+                        R.string.map_card_participant_detail,
+                        pingleEntity.curParticipants,
+                        pingleEntity.maxParticipants
+                    )
+                    text = SpannableString(participantDetail).apply {
+                        setSpan(
+                            ForegroundColorSpan(
+                                colorOf(category.textColor)
+                            ),
+                            CUR_PARTICIPANTS_START,
+                            pingleEntity.curParticipants.toString().length,
+                            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
+                        )
+                        setSpan(
+                            TextAppearanceSpan(
+                                context,
+                                R.style.TextAppearance_Pingle_Title_Semi_30
+                            ),
+                            CUR_PARTICIPANTS_START,
+                            pingleEntity.curParticipants.toString().length + 1,
+                            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
+                        )
+                        setSpan(
+                            TextAppearanceSpan(
+                                context,
+                                R.style.TextAppearance_Pingle_Title_Semi_20
+                            ),
+                            pingleEntity.curParticipants.toString().length + 1,
+                            participantDetail.length,
+                            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
+                        )
+                    }
+                }
+            }
+        }
+    }
+
+    companion object {
+        const val CUR_PARTICIPANTS_START = 0
+    }
+}
+
+interface OnPingleCardClickListener {
+    fun onPingleCardChatBtnClickListener()
+    fun onPingleCardParticipateBtnClickListener()
+}
+
+fun PingleEntity.isCompleted() = maxParticipants == curParticipants
+
+fun PingleEntity.convertToCalenderDetail(): String {
+    val localDate = LocalDate.parse(date, DateTimeFormatter.ISO_LOCAL_DATE)
+    val startTime = LocalTime.parse(startAt, DateTimeFormatter.ISO_LOCAL_TIME)
+    val endTime = LocalTime.parse(endAt, DateTimeFormatter.ISO_LOCAL_TIME)
+
+    return buildString {
+        append("${localDate.year}년 ${localDate.monthValue}월 ${localDate.dayOfMonth}일\n")
+        append("${startTime.format(DateTimeFormatter.ofPattern("HH:mm"))} ~ ")
+        append("${endTime.format(DateTimeFormatter.ofPattern("HH:mm"))}")
+    }
+}
diff --git a/app/src/main/res/color/selector_pingle_btn_m.xml b/app/src/main/res/color/selector_pingle_btn_m.xml
new file mode 100644
index 00000000..df8f2c15
--- /dev/null
+++ b/app/src/main/res/color/selector_pingle_btn_m.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="@color/g_01" android:state_enabled="true" />
+    <item android:color="@color/g_07" android:state_enabled="false" />
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/color/selector_pingle_btn_s.xml b/app/src/main/res/color/selector_pingle_btn_s.xml
new file mode 100644
index 00000000..7b6fae3d
--- /dev/null
+++ b/app/src/main/res/color/selector_pingle_btn_s.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="@color/white" android:state_enabled="true" />
+    <item android:color="@color/g_06" android:state_enabled="false" />
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/shape_oval_stroke_1.xml b/app/src/main/res/drawable/shape_oval_stroke_1.xml
new file mode 100644
index 00000000..4b79d3aa
--- /dev/null
+++ b/app/src/main/res/drawable/shape_oval_stroke_1.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <stroke android:width="1dp" android:color="@color/g_06"/>
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/layout/card_pingle.xml b/app/src/main/res/layout/card_pingle.xml
new file mode 100644
index 00000000..dee84ad1
--- /dev/null
+++ b/app/src/main/res/layout/card_pingle.xml
@@ -0,0 +1,259 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <data>
+
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/layout_card"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/layout_card_top"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:background="@drawable/shape_border_radius_15"
+            android:backgroundTint="@color/g_11"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/gl_card_top_start"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                app:layout_constraintGuide_begin="@dimen/card_horizontal_margin" />
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/gl_card_top_end"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                app:layout_constraintGuide_end="@dimen/card_horizontal_margin" />
+
+            <androidx.constraintlayout.widget.ConstraintLayout
+                android:id="@+id/layout_card_top_info"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="16dp"
+                app:layout_constraintBottom_toBottomOf="@id/layout_card_top_participant"
+                app:layout_constraintEnd_toStartOf="@id/layout_card_top_participant"
+                app:layout_constraintStart_toStartOf="@id/gl_card_top_start"
+                app:layout_constraintTop_toTopOf="@id/layout_card_top_participant">
+
+                <org.sopt.pingle.util.component.PingleBadge
+                    android:id="@+id/badge_card_top_info"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toTopOf="parent"
+                    tools:text="STUDY" />
+
+                <TextView
+                    android:id="@+id/tv_card_top_info_name"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="8dp"
+                    android:textAppearance="@style/TextAppearance.Pingle.Body.Bold.14"
+                    android:textColor="@color/pingle_orange"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toBottomOf="@id/badge_card_top_info"
+                    tools:text="강남 모각작팟" />
+
+                <TextView
+                    android:id="@+id/tv_card_top_info_owner_name"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="4dp"
+                    android:textAppearance="@style/TextAppearance.Pingle.Body.Med.14"
+                    android:textColor="@color/g_03"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toBottomOf="@id/tv_card_top_info_name"
+                    tools:text="박소현" />
+
+            </androidx.constraintlayout.widget.ConstraintLayout>
+
+            <androidx.constraintlayout.widget.ConstraintLayout
+                android:id="@+id/layout_card_top_participant"
+                android:layout_width="@dimen/card_participant_size"
+                android:layout_height="0dp"
+                android:layout_marginTop="19dp"
+                android:layout_marginBottom="16dp"
+                android:background="@drawable/shape_oval_stroke_1"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintDimensionRatio="1"
+                app:layout_constraintEnd_toStartOf="@id/gl_card_top_end"
+                app:layout_constraintTop_toTopOf="parent">
+
+                <TextView
+                    android:id="@+id/tv_card_top_info_participant_title"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_marginHorizontal="17dp"
+                    android:layout_marginTop="12dp"
+                    android:gravity="center"
+                    android:text="@string/map_card_participant"
+                    android:textAppearance="@style/TextAppearance.Pingle.Cap.Med.12"
+                    android:textColor="@color/white"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toTopOf="parent" />
+
+                <TextView
+                    android:id="@+id/tv_card_top_info_participant_detail"
+                    android:layout_width="wrap_content"
+                    android:layout_height="42dp"
+                    android:gravity="center"
+                    android:textColor="@color/g_06"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toBottomOf="@id/tv_card_top_info_participant_title"
+                    tools:text="5/10" />
+
+            </androidx.constraintlayout.widget.ConstraintLayout>
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/layout_card_bottom"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:background="@drawable/shape_border_radius_15"
+            android:backgroundTint="@color/g_11"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/layout_card_top">
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/gl_card_bottom_start"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                app:layout_constraintGuide_begin="@dimen/card_horizontal_margin" />
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/gl_card_bottom_end"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="vertical"
+                app:layout_constraintGuide_end="@dimen/card_horizontal_margin" />
+
+            <ImageView
+                android:id="@+id/iv_card_bottom_calendar"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="23dp"
+                android:src="@drawable/ic_all_calendar_24"
+                app:layout_constraintStart_toStartOf="@id/gl_card_bottom_start"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:id="@+id/tv_card_bottom_calender_title"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/map_card_calender"
+                android:textAppearance="@style/TextAppearance.Pingle.Body.Semi.14"
+                android:textColor="@color/g_01"
+                app:layout_constraintBottom_toBottomOf="@id/iv_card_bottom_calendar"
+                app:layout_constraintStart_toEndOf="@id/iv_card_bottom_calendar"
+                app:layout_constraintTop_toTopOf="@id/iv_card_bottom_calendar" />
+
+            <TextView
+                android:id="@+id/tv_card_bottom_calender_detail"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="47dp"
+                android:textAppearance="@style/TextAppearance.Pingle.Body.Med.14"
+                android:textColor="@color/g_03"
+                app:layout_constraintEnd_toStartOf="@id/gl_card_bottom_end"
+                app:layout_constraintStart_toEndOf="@id/tv_card_bottom_calender_title"
+                app:layout_constraintTop_toTopOf="@id/iv_card_bottom_calendar"
+                tools:text="2023년 12월 31일\n00:00~00:00" />
+
+            <ImageView
+                android:id="@+id/iv_card_bottom_map"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="17dp"
+                android:src="@drawable/ic_all_map_24"
+                app:layout_constraintStart_toStartOf="@id/gl_card_bottom_start"
+                app:layout_constraintTop_toBottomOf="@id/tv_card_bottom_calender_detail" />
+
+            <TextView
+                android:id="@+id/tv_card_bottom_map_title"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/map_card_map"
+                android:textAppearance="@style/TextAppearance.Pingle.Body.Semi.14"
+                android:textColor="@color/g_01"
+                app:layout_constraintBottom_toBottomOf="@id/iv_card_bottom_map"
+                app:layout_constraintStart_toEndOf="@id/iv_card_bottom_map"
+                app:layout_constraintTop_toTopOf="@id/iv_card_bottom_map" />
+
+            <TextView
+                android:id="@+id/tv_card_bottom_map_detail"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="3dp"
+                android:textAppearance="@style/TextAppearance.Pingle.Body.Med.14"
+                android:textColor="@color/g_03"
+                app:layout_constraintStart_toStartOf="@id/tv_card_bottom_calender_detail"
+                app:layout_constraintTop_toTopOf="@id/tv_card_bottom_map_title"
+                tools:text="햐얀집 2호점" />
+
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/btn_card_bottom_map_chat"
+                style="@style/Theme.Pingle.Button.S"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="16dp"
+                android:layout_marginTop="32dp"
+                android:layout_marginEnd="11dp"
+                android:layout_marginBottom="32dp"
+                android:text="@string/map_card_chat"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toStartOf="@id/btn_card_bottom_map_participate"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/iv_card_bottom_map"
+                app:strokeColor="@color/g_03" />
+
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/btn_card_bottom_map_participate"
+                style="@style/Theme.Pingle.Button.M"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="16dp"
+                android:backgroundTint="@color/selector_pingle_btn_m"
+                android:textColor="@color/g_11"
+                app:layout_constraintBottom_toBottomOf="@id/btn_card_bottom_map_chat"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@id/btn_card_bottom_map_chat"
+                app:layout_constraintTop_toTopOf="@id/btn_card_bottom_map_chat"
+                tools:text="참여하기" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+        <View
+            android:id="@+id/view_card_middle_line"
+            android:layout_width="0dp"
+            android:layout_height="1dp"
+            android:layout_marginHorizontal="21dp"
+            android:background="@color/g_07"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/layout_card_top" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+
+</layout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_map.xml b/app/src/main/res/layout/fragment_map.xml
index 1a378bc8..04d62eec 100644
--- a/app/src/main/res/layout/fragment_map.xml
+++ b/app/src/main/res/layout/fragment_map.xml
@@ -85,5 +85,15 @@
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent" />
 
+        <org.sopt.pingle.util.component.PingleCard
+            android:id="@+id/card_map"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginHorizontal="@dimen/card_horizontal_margin"
+            android:layout_marginBottom="8dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent" />
+
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
\ No newline at end of file
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index 7febdf1c..3df7c155 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -39,6 +39,7 @@
     <dimen name="button_m_height">42dp</dimen>
     <dimen name="button_s_height">42dp</dimen>
     <dimen name="button_corner_radius">10dp</dimen>
+    <dimen name="button_s_width">95dp</dimen>
 
     <!-- fab -->
     <dimen name="fab_size">50dp</dimen>
@@ -50,4 +51,8 @@
     <dimen name="dialog_horizontal_margin">24dp</dimen>
     <dimen name="dialog_all_modal_horizontal_margin">34dp</dimen>
     <dimen name="dialog_map_modal_horizontal_margin">24dp</dimen>
+
+    <!-- card -->
+    <dimen name="card_horizontal_margin">24dp</dimen>
+    <dimen name="card_participant_size">81dp</dimen>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 6695d9d0..871c7545 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -39,6 +39,9 @@
     <string name="plan_time_am">오전</string>
     <string name="plan_time_pm">오후</string>
 
+    <string name="plan_open_chatting_hint">링크를 입력해주세요</string>
+    <string name="plan_open_chatting_title">채팅방 링크</string>
+
     <!-- join group success -->
     <string name="join_group_success_btn">입장하기</string>
     <string name="join_gorup_success_title">단체 입장\n완료!</string>
@@ -59,6 +62,20 @@
 
     <!-- map modal -->
     <string name="map_modal_description">이 핑글에 참여할까요?</string>
-    <string name="plan_open_chatting_hint">링크를 입력해주세요</string>
-    <string name="plan_open_chatting_title">채팅방 링크</string>
+
+    <!-- map card -->
+    <string name="map_card_participant">참여자</string>
+    <string name="map_card_participant_detail">%d/%d</string>
+    <string name="map_card_calender">일시</string>
+    <string name="map_card_map">장소</string>
+    <string name="map_card_chat">대화하기</string>
+    <string name="map_card_participate">참여하기</string>
+    <string name="map_card_cancel">취소하기</string>
+    <string name="map_card_completed">모집완료</string>
+
+    <!-- map cancel dialog -->
+    <string name="map_cancel_modal_title">참여를 취소하시겠어요?</string>
+    <string name="map_cancel_modal_detail">취소한 모임은 언제든 다시 신청할 수 있어요</string>
+    <string name="map_cancel_modal_button_text">취소하기</string>
+    <string name="map_cancel_modal_text_button_text">돌아가기</string>
 </resources>
\ No newline at end of file
diff --git a/app/src/main/res/values/text_appearance.xml b/app/src/main/res/values/text_appearance.xml
index 22734dff..c2d353f3 100644
--- a/app/src/main/res/values/text_appearance.xml
+++ b/app/src/main/res/values/text_appearance.xml
@@ -30,7 +30,7 @@
         <item name="android:fontFamily">@font/suit_semibold</item>
     </style>
 
-    <!-- Sub -->
+    <!-- Subtitle -->
     <style name="TextAppearance.Pingle.Sub.Bold.18" parent="TextAppearance.Pingle">
         <item name="android:textSize">18dp</item>
         <item name="android:lineHeight">25dp</item>
@@ -68,6 +68,12 @@
         <item name="android:fontFamily">@font/suit_medium</item>
     </style>
 
+    <style name="TextAppearance.Pingle.Body.Bold.14" parent="TextAppearance.Pingle">
+        <item name="android:textSize">14dp</item>
+        <item name="android:lineHeight">20dp</item>
+        <item name="android:fontFamily">@font/suit_bold</item>
+    </style>
+
     <style name="TextAppearance.Pingle.Body.Semi.14" parent="TextAppearance.Pingle">
         <item name="android:textSize">14dp</item>
         <item name="android:lineHeight">20dp</item>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index cc30e141..19b5c008 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -33,8 +33,12 @@
 
     <style name="Theme.Pingle.Button.S" parent="Theme.Pingle.Button">
         <item name="android:height">@dimen/button_s_height</item>
+        <item name="android:layout_width">@dimen/button_s_width</item>
         <item name="cornerRadius">@dimen/button_corner_radius</item>
         <item name="strokeWidth">1dp</item>
+        <item name="android:backgroundTint">@android:color/transparent</item>
+        <item name="strokeColor">@color/selector_pingle_btn_s</item>
+        <item name="android:textColor">@color/selector_pingle_btn_s</item>
         <item name="android:textAppearance">@style/TextAppearance.Pingle.Body.Semi.14</item>
     </style>