diff --git a/app/src/main/java/com/sopetit/softie/data/entity/response/HappyChipResponse.kt b/app/src/main/java/com/sopetit/softie/data/entity/response/HappyChipResponse.kt
new file mode 100644
index 00000000..b7535dd9
--- /dev/null
+++ b/app/src/main/java/com/sopetit/softie/data/entity/response/HappyChipResponse.kt
@@ -0,0 +1,25 @@
+package com.sopetit.softie.data.entity.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class HappyChipResponse(
+    @SerialName("themes")
+    val themes: List<HappyChip>
+) {
+    @Serializable
+    data class HappyChip(
+        @SerialName("themeId")
+        val themeId: Int,
+        @SerialName("name")
+        val name: String,
+    )
+
+    fun toHappyChip() = themes.map { happychip ->
+        com.sopetit.softie.domain.entity.HappyChip(
+            themeId = happychip.themeId,
+            name = happychip.name,
+        )
+    }
+}
diff --git a/app/src/main/java/com/sopetit/softie/data/entity/response/HappyContentResponse.kt b/app/src/main/java/com/sopetit/softie/data/entity/response/HappyContentResponse.kt
new file mode 100644
index 00000000..cc305a4c
--- /dev/null
+++ b/app/src/main/java/com/sopetit/softie/data/entity/response/HappyContentResponse.kt
@@ -0,0 +1,34 @@
+package com.sopetit.softie.data.entity.response
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+
+@Serializable
+data class HappyContentResponse(
+    @SerialName("routines")
+    val routines: List<HappyContent>
+) {
+    @Serializable
+    data class HappyContent(
+        @SerialName("routineId")
+        val routineId: Int,
+        @SerialName("name")
+        val name: String,
+        @SerialName("nameColor")
+        val nameColor: String,
+        @SerialName("title")
+        val title: String,
+        @SerialName("iconImageUrl")
+        val iconImageUrl: String
+    )
+
+    fun toHappyContent() = routines.map { happycontent ->
+        com.sopetit.softie.domain.entity.HappyContent(
+            routineId = happycontent.routineId,
+            name = happycontent.name,
+            nameColor = happycontent.nameColor,
+            title = happycontent.title,
+            iconImageUrl = happycontent.iconImageUrl
+        )
+    }
+}
diff --git a/app/src/main/java/com/sopetit/softie/data/repositoryImpl/HappinessRoutineRepositoryImpl.kt b/app/src/main/java/com/sopetit/softie/data/repositoryImpl/HappinessRoutineRepositoryImpl.kt
new file mode 100644
index 00000000..b2eddc9f
--- /dev/null
+++ b/app/src/main/java/com/sopetit/softie/data/repositoryImpl/HappinessRoutineRepositoryImpl.kt
@@ -0,0 +1,21 @@
+package com.sopetit.softie.data.repositoryImpl
+
+import com.sopetit.softie.data.source.HappinessRoutineDataSource
+import com.sopetit.softie.domain.entity.HappyChip
+import com.sopetit.softie.domain.entity.HappyContent
+import com.sopetit.softie.domain.repository.HappinessRoutineRepository
+import javax.inject.Inject
+
+class HappinessRoutineRepositoryImpl @Inject constructor(
+    private val happinessRoutineDataSource: HappinessRoutineDataSource
+) : HappinessRoutineRepository {
+    override suspend fun getHappyChip(): Result<List<HappyChip>> =
+        runCatching { happinessRoutineDataSource.getHappyChip() }.map { response ->
+            requireNotNull(response.data).toHappyChip()
+        }
+
+    override suspend fun getHappyContent(themeId: Int): Result<List<HappyContent>> =
+        runCatching { happinessRoutineDataSource.getHappyContent(themeId) }.map { response ->
+            requireNotNull(response.data).toHappyContent()
+        }
+}
diff --git a/app/src/main/java/com/sopetit/softie/data/service/HappinessRoutineService.kt b/app/src/main/java/com/sopetit/softie/data/service/HappinessRoutineService.kt
new file mode 100644
index 00000000..24a86689
--- /dev/null
+++ b/app/src/main/java/com/sopetit/softie/data/service/HappinessRoutineService.kt
@@ -0,0 +1,17 @@
+package com.sopetit.softie.data.service
+
+import com.sopetit.softie.data.entity.BaseResponse
+import com.sopetit.softie.data.entity.response.HappyChipResponse
+import com.sopetit.softie.data.entity.response.HappyContentResponse
+import retrofit2.http.GET
+import retrofit2.http.Query
+
+interface HappinessRoutineService {
+    @GET("api/v1/routines/happiness/themes")
+    suspend fun getHappyChip(): BaseResponse<HappyChipResponse>
+
+    @GET("api/v1/routines/happiness")
+    suspend fun getHappyContent(
+        @Query("themeId") themeId: Int
+    ): BaseResponse<HappyContentResponse>
+}
diff --git a/app/src/main/java/com/sopetit/softie/data/source/HappinessRoutineDataSource.kt b/app/src/main/java/com/sopetit/softie/data/source/HappinessRoutineDataSource.kt
new file mode 100644
index 00000000..b527cec9
--- /dev/null
+++ b/app/src/main/java/com/sopetit/softie/data/source/HappinessRoutineDataSource.kt
@@ -0,0 +1,17 @@
+package com.sopetit.softie.data.source
+
+import com.sopetit.softie.data.entity.BaseResponse
+import com.sopetit.softie.data.entity.response.HappyChipResponse
+import com.sopetit.softie.data.entity.response.HappyContentResponse
+import com.sopetit.softie.data.service.HappinessRoutineService
+import javax.inject.Inject
+
+class HappinessRoutineDataSource @Inject constructor(
+    private val happinessRoutineService: HappinessRoutineService
+) {
+    suspend fun getHappyChip(): BaseResponse<HappyChipResponse> =
+        happinessRoutineService.getHappyChip()
+
+    suspend fun getHappyContent(themeId: Int): BaseResponse<HappyContentResponse> =
+        happinessRoutineService.getHappyContent(themeId)
+}
diff --git a/app/src/main/java/com/sopetit/softie/di/RepositoryModule.kt b/app/src/main/java/com/sopetit/softie/di/RepositoryModule.kt
index 15ac1602..9739dd55 100644
--- a/app/src/main/java/com/sopetit/softie/di/RepositoryModule.kt
+++ b/app/src/main/java/com/sopetit/softie/di/RepositoryModule.kt
@@ -2,9 +2,11 @@ package com.sopetit.softie.di
 
 import com.sopetit.softie.data.repositoryImpl.DailyRoutineRepositoryImpl
 import com.sopetit.softie.data.repositoryImpl.DollRepositoryImpl
+import com.sopetit.softie.data.repositoryImpl.HappinessRoutineRepositoryImpl
 import com.sopetit.softie.data.repositoryImpl.MemberRepositoryImpl
 import com.sopetit.softie.domain.repository.DailyRoutineRepository
 import com.sopetit.softie.domain.repository.DollRepository
+import com.sopetit.softie.domain.repository.HappinessRoutineRepository
 import com.sopetit.softie.domain.repository.MemberRepository
 import dagger.Binds
 import dagger.Module
@@ -32,4 +34,10 @@ abstract class RepositoryModule {
     abstract fun bindToDollRepository(
         dollRepositoryImpl: DollRepositoryImpl
     ): DollRepository
+
+    @Binds
+    @Singleton
+    abstract fun bindToHappinessRoutineRepository(
+        happinessRoutineRepositoryImpl: HappinessRoutineRepositoryImpl
+    ): HappinessRoutineRepository
 }
diff --git a/app/src/main/java/com/sopetit/softie/di/RetrofitServiceModule.kt b/app/src/main/java/com/sopetit/softie/di/RetrofitServiceModule.kt
index 987b8e1b..8c2cb821 100644
--- a/app/src/main/java/com/sopetit/softie/di/RetrofitServiceModule.kt
+++ b/app/src/main/java/com/sopetit/softie/di/RetrofitServiceModule.kt
@@ -2,6 +2,7 @@ package com.sopetit.softie.di
 
 import com.sopetit.softie.data.service.DailyRoutineService
 import com.sopetit.softie.data.service.DollService
+import com.sopetit.softie.data.service.HappinessRoutineService
 import com.sopetit.softie.data.service.MemberService
 import dagger.Module
 import dagger.Provides
@@ -23,4 +24,8 @@ object RetrofitServiceModule {
     @Provides
     fun providesDollService(@RetrofitModule.SoftieType retrofit: Retrofit): DollService =
         retrofit.create(DollService::class.java)
+
+    @Provides
+    fun providesHappinessRoutineService(@RetrofitModule.SoftieType retrofit: Retrofit): HappinessRoutineService =
+        retrofit.create(HappinessRoutineService::class.java)
 }
diff --git a/app/src/main/java/com/sopetit/softie/domain/entity/HappyContent.kt b/app/src/main/java/com/sopetit/softie/domain/entity/HappyContent.kt
index f5b2e63f..0ab2f4b6 100644
--- a/app/src/main/java/com/sopetit/softie/domain/entity/HappyContent.kt
+++ b/app/src/main/java/com/sopetit/softie/domain/entity/HappyContent.kt
@@ -1,10 +1,9 @@
 package com.sopetit.softie.domain.entity
 
-import androidx.annotation.DrawableRes
-
 data class HappyContent(
     val routineId: Int,
+    val name: String,
+    val nameColor: String,
     val title: String,
-    val content: String,
-    @DrawableRes val imageUrl: Int,
+    val iconImageUrl: String,
 )
diff --git a/app/src/main/java/com/sopetit/softie/domain/entity/HappyUser.kt b/app/src/main/java/com/sopetit/softie/domain/entity/HappyUser.kt
new file mode 100644
index 00000000..ce7b7ecc
--- /dev/null
+++ b/app/src/main/java/com/sopetit/softie/domain/entity/HappyUser.kt
@@ -0,0 +1,14 @@
+package com.sopetit.softie.domain.entity
+
+import androidx.annotation.DrawableRes
+
+data class HappyUser(
+    val routineId: Int,
+    @DrawableRes val imageUrl: Int,
+    val title: String,
+    val content: String,
+    val detailTitle: String,
+    val detailContent: String,
+    val detailTime: String,
+    val detailPlace: String
+)
diff --git a/app/src/main/java/com/sopetit/softie/domain/repository/HappinessRoutineRepository.kt b/app/src/main/java/com/sopetit/softie/domain/repository/HappinessRoutineRepository.kt
new file mode 100644
index 00000000..bf963fa7
--- /dev/null
+++ b/app/src/main/java/com/sopetit/softie/domain/repository/HappinessRoutineRepository.kt
@@ -0,0 +1,9 @@
+package com.sopetit.softie.domain.repository
+
+import com.sopetit.softie.domain.entity.HappyChip
+import com.sopetit.softie.domain.entity.HappyContent
+
+interface HappinessRoutineRepository {
+    suspend fun getHappyChip(): Result<List<HappyChip>>
+    suspend fun getHappyContent(themeId: Int): Result<List<HappyContent>>
+}
diff --git a/app/src/main/java/com/sopetit/softie/domain/usecase/GetHappyChipUseCase.kt b/app/src/main/java/com/sopetit/softie/domain/usecase/GetHappyChipUseCase.kt
new file mode 100644
index 00000000..6680e326
--- /dev/null
+++ b/app/src/main/java/com/sopetit/softie/domain/usecase/GetHappyChipUseCase.kt
@@ -0,0 +1,10 @@
+package com.sopetit.softie.domain.usecase
+
+import com.sopetit.softie.domain.repository.HappinessRoutineRepository
+import javax.inject.Inject
+
+class GetHappyChipUseCase @Inject constructor(
+    private val happinessRoutineRepository: HappinessRoutineRepository
+) {
+    suspend operator fun invoke() = happinessRoutineRepository.getHappyChip()
+}
diff --git a/app/src/main/java/com/sopetit/softie/domain/usecase/GetHappyContentUseCase.kt b/app/src/main/java/com/sopetit/softie/domain/usecase/GetHappyContentUseCase.kt
new file mode 100644
index 00000000..fc7b5693
--- /dev/null
+++ b/app/src/main/java/com/sopetit/softie/domain/usecase/GetHappyContentUseCase.kt
@@ -0,0 +1,11 @@
+package com.sopetit.softie.domain.usecase
+
+import com.sopetit.softie.domain.repository.HappinessRoutineRepository
+import javax.inject.Inject
+
+class GetHappyContentUseCase @Inject constructor(
+    private val happinessRoutineRepository: HappinessRoutineRepository
+) {
+    suspend operator fun invoke(themeId: Int) =
+        happinessRoutineRepository.getHappyContent(themeId)
+}
diff --git a/app/src/main/java/com/sopetit/softie/ui/happyroutine/addlist/HappyAddListActivity.kt b/app/src/main/java/com/sopetit/softie/ui/happyroutine/addlist/HappyAddListActivity.kt
index 934cd48a..1d5a3d47 100644
--- a/app/src/main/java/com/sopetit/softie/ui/happyroutine/addlist/HappyAddListActivity.kt
+++ b/app/src/main/java/com/sopetit/softie/ui/happyroutine/addlist/HappyAddListActivity.kt
@@ -6,7 +6,6 @@ import androidx.activity.viewModels
 import androidx.recyclerview.widget.RecyclerView
 import com.sopetit.softie.R
 import com.sopetit.softie.databinding.ActivityHappyAddListBinding
-import com.sopetit.softie.domain.entity.HappyContent
 import com.sopetit.softie.ui.happyroutine.adddetail.HappyDetailActivity
 import com.sopetit.softie.util.HorizontalChipItemDecoration
 import com.sopetit.softie.util.VerticalItemDecoration
@@ -25,18 +24,18 @@ class HappyAddListActivity :
     private var happyAddListChipContentAdapter: HappyAddListChipContentAdapter? = null
     private var happyAddListContentAdapter: HappyAddListContentAdapter? = null
 
-    private val themeId = 0
-
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         binding = ActivityHappyAddListBinding.inflate(layoutInflater)
         setContentView(binding.root)
         setStatusBarColorFromResource(R.color.background)
 
+        viewModel.getHappyChip()
+
         setChipAdapters()
         setBackEnter()
         setItemDeco()
-        setupAdapter(themeId)
+        setupAdapter()
     }
 
     private fun setChipAdapters() {
@@ -57,33 +56,20 @@ class HappyAddListActivity :
         binding.rvHappyAddListChip.addItemDecoration(chipDeco)
     }
 
-    private fun setupAdapter(themeId: Int) {
+    private fun setupAdapter() {
         with(binding) {
             rvHappyAddListChip.adapter = happyAddListChipContentAdapter
             rvHappyAddList.adapter = happyAddListContentAdapter
         }
-        happyAddListChipContentAdapter?.submitList(viewModel.mockHappyChipList.value)
-        happyAddListContentAdapter?.submitList(viewModel.mockHappyContentList.value)
-
-        happyAddListChipContentAdapter?.setOnChipClickListener { handleChipClick(it.themeId) }
-    }
-
-    private fun handleChipClick(themeId: Int) {
-        val listToSubmit = when (themeId) {
-            1 -> viewModel.mockHappyContentList.value
-            2 -> viewModel.mockHappyContentListOne.value
-            3 -> viewModel.mockHappyContentListTwo.value
-            4 -> viewModel.mockHappyContentListThree.value
-            5 -> viewModel.mockHappyContentListFour.value
-            6 -> viewModel.mockHappyContentListFive.value
-            else -> viewModel.mockHappyContentList.value
+        viewModel.happyChipResponse.observe(this) {
+            happyAddListChipContentAdapter?.submitList(viewModel.happyChipResponse.value)
+        }
+        viewModel.happyContentResponse.observe(this) {
+            happyAddListContentAdapter?.submitList(viewModel.happyContentResponse.value)
+        }
+        happyAddListChipContentAdapter?.setOnChipClickListener {
+            viewModel.getHappyContent(it.themeId)
         }
-
-        listToSubmit?.let { makeSubmitList(it) }
-    }
-
-    private fun makeSubmitList(list: List<HappyContent>) {
-        happyAddListContentAdapter?.submitList(list)
     }
 
     private fun moveToDetail(id: Int) {
diff --git a/app/src/main/java/com/sopetit/softie/ui/happyroutine/addlist/HappyAddListContentAdapter.kt b/app/src/main/java/com/sopetit/softie/ui/happyroutine/addlist/HappyAddListContentAdapter.kt
index 4b1323f9..a4cbd24a 100644
--- a/app/src/main/java/com/sopetit/softie/ui/happyroutine/addlist/HappyAddListContentAdapter.kt
+++ b/app/src/main/java/com/sopetit/softie/ui/happyroutine/addlist/HappyAddListContentAdapter.kt
@@ -1,9 +1,11 @@
 package com.sopetit.softie.ui.happyroutine.addlist
 
+import android.graphics.Color
 import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.recyclerview.widget.ListAdapter
 import androidx.recyclerview.widget.RecyclerView
+import coil.load
 import com.sopetit.softie.databinding.ItemHappyAddListBinding
 import com.sopetit.softie.domain.entity.HappyContent
 import com.sopetit.softie.util.ItemDiffCallback
@@ -22,9 +24,10 @@ class HappyAddListContentAdapter(private val moveToDetail: (Int) -> Unit) :
     ) :
         RecyclerView.ViewHolder(binding.root) {
         fun onBind(data: HappyContent) {
-            binding.tvHappyListItemTitle.text = data.title
-            binding.tvHappyListItemContent.text = data.content
-            binding.ivHappyListItemIcon.setImageResource(data.imageUrl)
+            binding.tvHappyListItemTitle.text = data.name
+            binding.tvHappyListItemTitle.setTextColor(Color.parseColor(data.nameColor))
+            binding.tvHappyListItemContent.text = data.title
+            binding.ivHappyListItemIcon.load(data.iconImageUrl)
 
             binding.root.setOnClickListener {
                 moveToDetail(data.routineId)
diff --git a/app/src/main/java/com/sopetit/softie/ui/happyroutine/addlist/HappyAddListViewModel.kt b/app/src/main/java/com/sopetit/softie/ui/happyroutine/addlist/HappyAddListViewModel.kt
index d8541b65..f59255b3 100644
--- a/app/src/main/java/com/sopetit/softie/ui/happyroutine/addlist/HappyAddListViewModel.kt
+++ b/app/src/main/java/com/sopetit/softie/ui/happyroutine/addlist/HappyAddListViewModel.kt
@@ -3,160 +3,48 @@ package com.sopetit.softie.ui.happyroutine.addlist
 import androidx.lifecycle.LiveData
 import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.ViewModel
-import com.sopetit.softie.R
+import androidx.lifecycle.viewModelScope
 import com.sopetit.softie.domain.entity.HappyChip
 import com.sopetit.softie.domain.entity.HappyContent
+import com.sopetit.softie.domain.usecase.GetHappyChipUseCase
+import com.sopetit.softie.domain.usecase.GetHappyContentUseCase
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.launch
+import timber.log.Timber
+import javax.inject.Inject
+
+@HiltViewModel
+class HappyAddListViewModel @Inject constructor(
+    private val getHappyChipUseCase: GetHappyChipUseCase,
+    private val getHappyContentUseCase: GetHappyContentUseCase
+) : ViewModel() {
+    private val _happyChipResponse = MutableLiveData<List<HappyChip>>()
+    val happyChipResponse: LiveData<List<HappyChip>> get() = _happyChipResponse
+
+    private val _happyContentResponse = MutableLiveData<List<HappyContent>>()
+    val happyContentResponse: LiveData<List<HappyContent>> get() = _happyContentResponse
+
+    fun getHappyChip() {
+        viewModelScope.launch {
+            getHappyChipUseCase()
+                .onSuccess { response ->
+                    _happyChipResponse.value = response
+                }
+                .onFailure { throwable ->
+                    Timber.e("$throwable")
+                }
+        }
+    }
 
-class HappyAddListViewModel : ViewModel() {
-    private val _mockHappyChipList = MutableLiveData<List<HappyChip>>()
-    val mockHappyChipList: LiveData<List<HappyChip>> = _mockHappyChipList
-
-    private val _mockHappyContentList = MutableLiveData<List<HappyContent>>()
-    val mockHappyContentList: LiveData<List<HappyContent>> = _mockHappyContentList
-
-    private val _mockHappyContentListOne = MutableLiveData<List<HappyContent>>()
-    val mockHappyContentListOne: LiveData<List<HappyContent>> = _mockHappyContentListOne
-
-    private val _mockHappyContentListTwo = MutableLiveData<List<HappyContent>>()
-    val mockHappyContentListTwo: LiveData<List<HappyContent>> = _mockHappyContentListTwo
-
-    private val _mockHappyContentListThree = MutableLiveData<List<HappyContent>>()
-    val mockHappyContentListThree: LiveData<List<HappyContent>> = _mockHappyContentListThree
-
-    private val _mockHappyContentListFour = MutableLiveData<List<HappyContent>>()
-    val mockHappyContentListFour: LiveData<List<HappyContent>> = _mockHappyContentListFour
-
-    private val _mockHappyContentListFive = MutableLiveData<List<HappyContent>>()
-    val mockHappyContentListFive: LiveData<List<HappyContent>> = _mockHappyContentListFive
-
-    init {
-        _mockHappyContentList.value = listOf<HappyContent>(
-            HappyContent(
-                routineId = 1,
-                title = "관계쌓기",
-                content = "성숙한 사랑을 만나기 위한",
-                imageUrl = R.drawable.ic_happy_red
-            ),
-            HappyContent(
-                routineId = 2,
-                title = "관계쌓기",
-                content = "진정성 있는 관계를 만드는",
-                imageUrl = R.drawable.ic_happy_red
-            ),
-            HappyContent(
-                routineId = 3,
-                title = "한 걸음 성장",
-                content = "나를 알고 진짜 목표를 세우는",
-                imageUrl = R.drawable.ic_happy_orange
-            ),
-            HappyContent(
-                routineId = 4,
-                title = "한 걸음 성장",
-                content = "좋아하는, 잘하는 일을 찾아 가는",
-                imageUrl = R.drawable.ic_happy_orange
-            ),
-            HappyContent(
-                routineId = 5,
-                title = "잘 쉬어가기",
-                content = "데이터가 아직 없습니다",
-                imageUrl = R.drawable.ic_happy_green
-            ),
-            HappyContent(
-                routineId = 6,
-                title = "새로운 나",
-                content = "나를 알고 진짜 목표를 세우는",
-                imageUrl = R.drawable.ic_happy_blue
-            ),
-            HappyContent(
-                routineId = 7,
-                title = "마음 챙김",
-                content = "데이터가 아직 없습니다",
-                imageUrl = R.drawable.ic_happy_purple
-            )
-        )
-
-        _mockHappyChipList.value = listOf<HappyChip>(
-            HappyChip(
-                themeId = 1,
-                name = "전체"
-            ),
-            HappyChip(
-                themeId = 2,
-                name = "관계쌓기"
-            ),
-            HappyChip(
-                themeId = 3,
-                name = "한 걸음 성장"
-            ),
-            HappyChip(
-                themeId = 4,
-                name = "잘 쉬어가기"
-            ),
-            HappyChip(
-                themeId = 5,
-                name = "새로운 나"
-            ),
-            HappyChip(
-                themeId = 6,
-                name = "마음 챙김"
-            )
-        )
-
-        _mockHappyContentListOne.value = listOf<HappyContent>(
-            HappyContent(
-                routineId = 1,
-                title = "관계쌓기",
-                content = "성숙한 사랑을 만나기 위한",
-                imageUrl = R.drawable.ic_happy_red
-            ),
-            HappyContent(
-                routineId = 2,
-                title = "관계쌓기",
-                content = "진정성 있는 관계를 만드는",
-                imageUrl = R.drawable.ic_happy_red
-            )
-        )
-
-        _mockHappyContentListTwo.value = listOf<HappyContent>(
-            HappyContent(
-                routineId = 3,
-                title = "한 걸음 성장",
-                content = "나를 알고 진짜 목표를 세우는",
-                imageUrl = R.drawable.ic_happy_orange
-            ),
-            HappyContent(
-                routineId = 4,
-                title = "한 걸음 성장",
-                content = "좋아하는, 잘하는 일을 찾아 가는",
-                imageUrl = R.drawable.ic_happy_orange
-            )
-        )
-
-        _mockHappyContentListThree.value = listOf<HappyContent>(
-            HappyContent(
-                routineId = 5,
-                title = "잘 쉬어가기",
-                content = "데이터가 아직 없습니다",
-                imageUrl = R.drawable.ic_happy_green
-            )
-        )
-
-        _mockHappyContentListFour.value = listOf<HappyContent>(
-            HappyContent(
-                routineId = 6,
-                title = "새로운 나",
-                content = "나를 알고 진짜 목표를 세우는",
-                imageUrl = R.drawable.ic_happy_blue
-            )
-        )
-
-        _mockHappyContentListFive.value = listOf<HappyContent>(
-            HappyContent(
-                routineId = 7,
-                title = "마음 챙김",
-                content = "데이터가 아직 없습니다",
-                imageUrl = R.drawable.ic_happy_purple
-            )
-        )
+    fun getHappyContent(themeId: Int) {
+        viewModelScope.launch {
+            getHappyContentUseCase(themeId)
+                .onSuccess { response ->
+                    _happyContentResponse.value = response
+                }
+                .onFailure { throwable ->
+                    Timber.e("$throwable")
+                }
+        }
     }
 }
diff --git a/app/src/main/java/com/sopetit/softie/ui/happyroutine/delete/HappyDeleteFragment.kt b/app/src/main/java/com/sopetit/softie/ui/happyroutine/delete/HappyDeleteFragment.kt
new file mode 100644
index 00000000..1ca52426
--- /dev/null
+++ b/app/src/main/java/com/sopetit/softie/ui/happyroutine/delete/HappyDeleteFragment.kt
@@ -0,0 +1,98 @@
+package com.sopetit.softie.ui.happyroutine.delete
+
+import android.os.Bundle
+import android.view.View
+import androidx.fragment.app.activityViewModels
+import com.sopetit.softie.R
+import com.sopetit.softie.databinding.FragmentHappyDeleteBinding
+import com.sopetit.softie.domain.entity.HappyProgress
+import com.sopetit.softie.ui.happyroutine.HappyRoutineFragment
+import com.sopetit.softie.ui.happyroutine.progress.HappyProgressViewModel
+import com.sopetit.softie.util.OriginalBottomSheet
+import com.sopetit.softie.util.binding.BindingBottomSheet
+import com.sopetit.softie.util.binding.BindingFragment
+import com.sopetit.softie.util.snackBar
+
+class HappyDeleteFragment :
+    BindingFragment<FragmentHappyDeleteBinding>(R.layout.fragment_happy_delete) {
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        val viewModel: HappyProgressViewModel by activityViewModels()
+        val happyDelete = viewModel.mockHappyProgress
+        val routineId = 1
+
+        setCardBinding(happyDelete)
+        setCardEnter()
+        setCancelEnter()
+        setClearEnter(routineId)
+    }
+
+    private fun setCardBinding(happyDelete: HappyProgress) {
+        with(binding) {
+            tvHappyDeleteSubtitle.text = happyDelete.title
+            ivHappyDeleteCardFront.setImageResource(happyDelete.imageUrl)
+            tvHappyDeleteCardFrontTitle.text = happyDelete.content
+            tvHappyDeleteCardBackTitle.text = happyDelete.detailTitle
+            tvHappyDeleteCardBackContent.text = happyDelete.detailContent
+            tvHappyDeleteCardBackTime.text = happyDelete.detailTime
+            tvHappyDeleteCardBackPlace.text = happyDelete.detailPlace
+        }
+    }
+
+    private fun setCardEnter() {
+        with(binding) {
+            clHappyDeleteCardFront.setOnClickListener {
+                setCardFlip(clHappyDeleteCardFront, clHappyDeleteCardBack)
+            }
+            clHappyDeleteCardBack.setOnClickListener {
+                setCardFlip(clHappyDeleteCardBack, clHappyDeleteCardFront)
+            }
+        }
+    }
+
+    private fun setCancelEnter() {
+        binding.tvHappyDeleteDestroy.setOnClickListener {
+            requireActivity().supportFragmentManager.popBackStack()
+        }
+    }
+
+    private fun setCardFlip(viewFront: View, viewToBack: View) {
+        val isVisible = viewFront.visibility == View.VISIBLE
+        if (isVisible) {
+            viewFront.visibility = View.INVISIBLE
+            viewToBack.visibility = View.VISIBLE
+        } else {
+            viewFront.visibility = View.VISIBLE
+            viewToBack.visibility = View.INVISIBLE
+        }
+    }
+
+    private fun setClearEnter(routineId: Int) {
+        binding.btnHappyDeleteClear.setOnClickListener {
+            BindingBottomSheet.Builder().build(
+                isDrawable = true,
+                imageDrawable = R.drawable.ic_bear_face_crying,
+                imageUri = "",
+                title = getString(R.string.happy_delete_bottom_sheet_title),
+                content = "",
+                isContentVisible = true,
+                contentColor = R.color.gray400,
+                backBtnContent = getString(R.string.happy_delete_bottom_sheet_back_btn),
+                doBtnContent = getString(R.string.happy_delete_bottom_sheet_do_btn),
+                doBtnColor = R.drawable.shape_red_fill_12_rect,
+                backBtnAction = {},
+                doBtnAction = {
+                    snackBar(
+                        binding.root.rootView,
+                        getString(R.string.happy_routine_delete_snack_bar)
+                    )
+                    requireActivity().supportFragmentManager.beginTransaction()
+                        .replace(R.id.fcv_main, HappyRoutineFragment())
+                        .commit()
+                }
+            ).show(parentFragmentManager, OriginalBottomSheet.BOTTOM_SHEET_TAG)
+        }
+    }
+}
diff --git a/app/src/main/java/com/sopetit/softie/ui/happyroutine/progress/HappyProgressFragment.kt b/app/src/main/java/com/sopetit/softie/ui/happyroutine/progress/HappyProgressFragment.kt
index e2150e95..3c06bf23 100644
--- a/app/src/main/java/com/sopetit/softie/ui/happyroutine/progress/HappyProgressFragment.kt
+++ b/app/src/main/java/com/sopetit/softie/ui/happyroutine/progress/HappyProgressFragment.kt
@@ -7,7 +7,7 @@ import com.sopetit.softie.R
 import com.sopetit.softie.databinding.FragmentHappyProgressBinding
 import com.sopetit.softie.domain.entity.HappyProgress
 import com.sopetit.softie.ui.happyroutine.HappyRoutineFragment
-import com.sopetit.softie.ui.main.home.HomeFragment
+import com.sopetit.softie.ui.happyroutine.delete.HappyDeleteFragment
 import com.sopetit.softie.util.OriginalBottomSheet
 import com.sopetit.softie.util.binding.BindingBottomSheet
 import com.sopetit.softie.util.binding.BindingFragment
@@ -53,9 +53,9 @@ class HappyProgressFragment :
 
     private fun setEditEnter() {
         binding.tvHappyProgressEdit.setOnClickListener {
-            val homeFragment = HomeFragment()
+            val happyDeleteFragment = HappyDeleteFragment()
             requireActivity().supportFragmentManager.beginTransaction()
-                .replace(R.id.fcv_main, homeFragment)
+                .replace(R.id.fcv_main, happyDeleteFragment)
                 .commit()
         }
     }
@@ -71,12 +71,6 @@ class HappyProgressFragment :
         }
     }
 
-    private fun setClearEnter() {
-        binding.btnHappyProgressClear.setOnClickListener {
-            initHappyRoutineCompleteBottomSheet()
-        }
-    }
-
     private fun initHappyRoutineCompleteBottomSheet() {
         BindingBottomSheet.Builder().build(
             isDrawable = false,
@@ -106,4 +100,8 @@ class HappyProgressFragment :
             .replace(R.id.fcv_main, happyRoutineFragment)
             .commit()
     }
+
+    private fun setClearEnter() {
+        initHappyRoutineCompleteBottomSheet()
+    }
 }
diff --git a/app/src/main/res/drawable/shape_red_fill_12_rect.xml b/app/src/main/res/drawable/shape_red_fill_12_rect.xml
index d1ad4862..361e21e3 100644
--- a/app/src/main/res/drawable/shape_red_fill_12_rect.xml
+++ b/app/src/main/res/drawable/shape_red_fill_12_rect.xml
@@ -1,7 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
+
+    <size
+        android:height="57dp" />
+    <corners android:radius="12dp" />
     <solid android:color="@color/red"/>
-    <corners android:radius="12dp"/>
 
 </shape>
diff --git a/app/src/main/res/layout/fragment_happy_delete.xml b/app/src/main/res/layout/fragment_happy_delete.xml
new file mode 100644
index 00000000..16651f14
--- /dev/null
+++ b/app/src/main/res/layout/fragment_happy_delete.xml
@@ -0,0 +1,248 @@
+<?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:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:background="@color/background">
+
+        <TextView
+            android:id="@+id/tv_happy_delete_title"
+            style="@style/body1"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="18dp"
+            android:layout_marginTop="40dp"
+            android:visibility="visible"
+            android:text="@string/happy_progress_title"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <TextView
+            android:id="@+id/tv_happy_delete_destroy"
+            style="@style/body4"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="19dp"
+            android:text="@string/happy_delete_destroy"
+            android:textColor="@color/gray400"
+            app:layout_constraintBottom_toBottomOf="@id/tv_happy_delete_title"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="@id/tv_happy_delete_title" />
+
+        <ImageView
+            android:id="@+id/iv_happy_delete_mention"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="87dp"
+            android:src="@drawable/ic_speech_happy"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <TextView
+            android:id="@+id/tv_happy_delete_mention"
+            style="@style/bubble16"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="4dp"
+            android:text="@string/happy_progress_mention"
+            app:layout_constraintBottom_toBottomOf="@id/iv_happy_delete_mention"
+            app:layout_constraintEnd_toEndOf="@id/iv_happy_delete_mention"
+            app:layout_constraintStart_toStartOf="@id/iv_happy_delete_mention"
+            app:layout_constraintTop_toTopOf="@id/iv_happy_delete_mention" />
+
+        <TextView
+            android:id="@+id/tv_happy_delete_subtitle"
+            style="@style/head1"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="24dp"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/iv_happy_delete_mention"
+            tools:text="성숙한 사랑을 만나기 위한" />
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/cl_happy_delete_card_front"
+            android:layout_width="280dp"
+            android:layout_height="398dp"
+            android:layout_marginTop="24dp"
+            android:background="@drawable/shape_white_fill_gray100_stroke_20_rect"
+            android:visibility="visible"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/tv_happy_delete_subtitle">
+
+            <ImageView
+                android:id="@+id/iv_happy_delete_card_front"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                tools:src="@drawable/ic_happycard_up_green" />
+
+            <TextView
+                android:id="@+id/tv_happy_delete_card_front_title"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginHorizontal="20dp"
+                android:layout_marginTop="70dp"
+                android:gravity="center"
+                android:lineSpacingExtra="4dp"
+                android:textAppearance="@style/body2"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/iv_happy_delete_card_front"
+                tools:text="10년이 가도" />
+
+            <ImageView
+                android:id="@+id/iv_happy_delete_card_front_magnify"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="22dp"
+                android:layout_marginBottom="22dp"
+                android:src="@drawable/ic_magnify"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/cl_happy_delete_card_back"
+            android:layout_width="280dp"
+            android:layout_height="398dp"
+            android:background="@drawable/shape_white_fill_gray100_stroke_20_rect"
+            android:visibility="invisible"
+            app:layout_constraintBottom_toBottomOf="@id/cl_happy_delete_card_front"
+            app:layout_constraintEnd_toEndOf="@id/cl_happy_delete_card_front"
+            app:layout_constraintStart_toStartOf="@id/cl_happy_delete_card_front"
+            app:layout_constraintTop_toTopOf="@id/cl_happy_delete_card_front">
+
+            <TextView
+                android:id="@+id/tv_happy_delete_card_back_title"
+                style="@style/body2"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_centerInParent="true"
+                android:layout_marginHorizontal="20dp"
+                android:gravity="center"
+                android:lineSpacingExtra="4dp"
+                android:textAppearance="@style/body2"
+                app:layout_constraintBottom_toBottomOf="@id/md_happy_delete_card_back_divider"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                tools:text="이상형의 특성 10가지" />
+
+            <com.google.android.material.divider.MaterialDivider
+                android:id="@+id/md_happy_delete_card_back_divider"
+                android:layout_width="match_parent"
+                android:layout_height="1dp"
+                android:layout_marginStart="18dp"
+                android:layout_marginTop="123dp"
+                android:layout_marginEnd="18dp"
+                app:dividerColor="@color/gray100"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:id="@+id/tv_happy_delete_card_back_content"
+                style="@style/body4"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="20dp"
+                android:layout_marginTop="17dp"
+                android:layout_marginEnd="20dp"
+                android:breakStrategy="simple"
+                android:lineSpacingMultiplier="1.3"
+                android:textColor="@color/gray400"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/md_happy_delete_card_back_divider"
+                tools:text="평소에 바빠서 연락하지 못한 사람이 있다면 안부인사 개인톡을 보내 봐. 꼭 만나서 밥을 먹거나 하지 않아도 연락 한 통이 나와 그 사람을 연결하는 방법이 될 수 있어" />
+
+            <ImageView
+                android:id="@+id/iv_happy_delete_card_back_time"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="20dp"
+                android:layout_marginBottom="7dp"
+                android:src="@drawable/ic_time"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintBottom_toTopOf="@id/iv_happy_delete_card_back_place"
+                app:layout_constraintVertical_bias="1" />
+
+            <TextView
+                android:id="@+id/tv_happy_delete_card_back_time"
+                style="@style/caption1"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="6dp"
+                android:textAppearance="@style/body2"
+                android:textColor="@color/gray400"
+                app:layout_constraintBottom_toBottomOf="@id/iv_happy_delete_card_back_time"
+                app:layout_constraintStart_toEndOf="@id/iv_happy_delete_card_back_time"
+                app:layout_constraintTop_toTopOf="@id/iv_happy_delete_card_back_time"
+                tools:text="5~10분" />
+
+            <ImageView
+                android:id="@+id/iv_happy_delete_card_back_place"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="20dp"
+                android:layout_marginBottom="65dp"
+                android:src="@drawable/ic_place"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintStart_toStartOf="parent" />
+
+            <TextView
+                android:id="@+id/tv_happy_delete_card_back_place"
+                style="@style/caption1"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="6dp"
+                android:textAppearance="@style/body2"
+                android:textColor="@color/gray400"
+                app:layout_constraintBottom_toBottomOf="@id/iv_happy_delete_card_back_place"
+                app:layout_constraintStart_toEndOf="@id/iv_happy_delete_card_back_place"
+                app:layout_constraintTop_toTopOf="@id/iv_happy_delete_card_back_place"
+                tools:text="홍대입구, 길거리" />
+
+            <ImageView
+                android:id="@+id/iv_happy_delete_card_back_transfer"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="22dp"
+                android:layout_marginBottom="22dp"
+                android:src="@drawable/ic_transfer"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent" />
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+        <androidx.appcompat.widget.AppCompatButton
+            android:id="@+id/btn_happy_delete_clear"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="20dp"
+            android:layout_marginTop="55dp"
+            android:layout_marginEnd="20dp"
+            android:layout_marginBottom="34dp"
+            android:background="@drawable/shape_red_fill_12_rect"
+            android:text="@string/happy_delete_button"
+            android:textAppearance="@style/body1"
+            android:textColor="@color/gray000"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
diff --git a/app/src/main/res/layout/fragment_happy_progress.xml b/app/src/main/res/layout/fragment_happy_progress.xml
index 870f37fe..607f503d 100644
--- a/app/src/main/res/layout/fragment_happy_progress.xml
+++ b/app/src/main/res/layout/fragment_happy_progress.xml
@@ -175,11 +175,10 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginStart="20dp"
-                android:layout_marginTop="52dp"
                 android:layout_marginBottom="7dp"
                 android:src="@drawable/ic_time"
                 app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toBottomOf="@id/tv_happy_progress_card_back_content"
+                app:layout_constraintBottom_toTopOf="@id/iv_happy_progress_card_back_place"
                 app:layout_constraintVertical_bias="1" />
 
             <TextView
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index ca4c6e1c..74c89f4b 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -58,6 +58,13 @@
     <string name="happy_progress_sheet_do_btn">완료했어</string>
     <string name="happy_progress_sheet_back_btn">아니, 아직이야</string>
 
+    <!-- happy delete -->
+    <string name="happy_delete_destroy">취소</string>
+    <string name="happy_delete_button">삭제하기</string>
+    <string name="happy_delete_bottom_sheet_title">정말 삭제할까요?</string>
+    <string name="happy_delete_bottom_sheet_do_btn">삭제할래</string>
+    <string name="happy_delete_bottom_sheet_back_btn">취소</string>
+
     <!-- doll selection -->
     <string name="doll_selection_question">어떤 친구와 함께 할까요?</string>
     <string name="doll_selection_subtitle">한 번 선택한 인형은 바꿀 수 없어요</string>