diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 9530fb2..e534860 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -43,6 +43,7 @@ chucker = "3.5.2"
 
 # Coil
 coil = "2.4.0"
+coil-compose = "2.4.0"
 
 # Lottie
 lottie-compose = "6.1.0"
@@ -132,6 +133,7 @@ hilt-ext-work = { group = "androidx.hilt", name = "hilt-work", version.ref = "hi
 
 #Coil
 coil-core = { group = "io.coil-kt", name = "coil", version.ref = "coil" }
+coil-compose = { group = "io.coil-kt", name = "coil-compose", version.ref = "coil-compose" }
 
 #Lottie
 lottie-compose = { group = "com.airbnb.android", name = "lottie-compose", version.ref = "lottie-compose" }
@@ -216,7 +218,7 @@ compose = [
     "compose-test-uiManifest",
     "compose-test-ui",
     "compose-viewModel",
-    "compose-hiltViewModel"
+    "compose-hiltViewModel",
 ]
 
 okhttp = [
diff --git a/presentation/checklist/build.gradle.kts b/presentation/checklist/build.gradle.kts
index 78ff53c..a78e2fd 100644
--- a/presentation/checklist/build.gradle.kts
+++ b/presentation/checklist/build.gradle.kts
@@ -20,4 +20,5 @@ dependencies {
     implementation(project(":presentation:resource"))
     implementation(project(":presentation:common"))
     implementation(project(":presentation:deeplink"))
+    implementation(libs.coil.compose)
 }
diff --git a/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/CheckList.kt b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/CheckList.kt
index 5af984a..898c3c6 100644
--- a/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/CheckList.kt
+++ b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/CheckList.kt
@@ -21,6 +21,8 @@ class CheckList : MVIComposeFragment<ChecklistIntent, ChecklistState, ChecklistE
     override fun processEffect(effect: ChecklistEffect) {
         when (effect) {
             ChecklistEffect.NavigateToAddCategory -> {}
+            is ChecklistEffect.NavigateToLink -> {}
+            is ChecklistEffect.NavigateToCategory -> {}
         }
     }
 
diff --git a/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/ChecklistContract.kt b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/ChecklistContract.kt
index 8a3b1b4..7efd887 100644
--- a/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/ChecklistContract.kt
+++ b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/ChecklistContract.kt
@@ -4,9 +4,10 @@ import androidx.compose.runtime.Stable
 import com.dkin.chevit.core.mvi.ViewEffect
 import com.dkin.chevit.core.mvi.ViewIntent
 import com.dkin.chevit.core.mvi.ViewState
-import com.dkin.chevit.presentation.common.category.Category
+import com.dkin.chevit.presentation.common.category.CategoryType
 
 sealed interface ChecklistIntent : ViewIntent {
+    data class ChangeTemplateOpenSetting(val isOpen: Boolean) : ChecklistIntent
 }
 
 @Stable
@@ -15,7 +16,9 @@ data class ChecklistState(
     val date: String,
     val notice: Notice,
     val weathers: List<Weather>,
-    val templates: List<Template>
+    val weatherDetailUrl: String,
+    val categories: List<Category>,
+    val isTemplateOpen: Boolean
 ) : ViewState {
 
     data class Notice(
@@ -26,13 +29,14 @@ data class ChecklistState(
     data class Weather(
         val date: String,
         val iconUrl: String,
-        val temp: String,
+        val temperature: String
     )
 
-    data class Template(
+    data class Category(
+        val categoryId: Int,
         val title: String,
-        val category: Category,
-        val remain: Int,
+        val categoryType: CategoryType,
+        val checked: Int,
         val total: Int,
     )
 
@@ -44,12 +48,27 @@ data class ChecklistState(
                 title = "[주의] 프랑스, 폭력시위 관련 안전유의 공지",
                 url = ""
             ),
-            weathers = listOf(),
-            templates = listOf()
+            weathers = listOf(
+                Weather(date = "7/16", iconUrl = "", temperature = "14°/25°"),
+                Weather(date = "7/17", iconUrl = "", temperature = "13°/22°"),
+                Weather(date = "7/18", iconUrl = "", temperature = "14°/21°"),
+            ),
+            weatherDetailUrl = "",
+            categories = listOf(
+                Category(categoryId = 0, title = "필수 준비물", categoryType = CategoryType.REQUIRES, checked = 12, total = 32),
+                Category(categoryId = 1, title = "세면도구", categoryType = CategoryType.TOILETRIES, checked = 24, total = 24),
+                Category(categoryId = 2, title = "의류", categoryType = CategoryType.CLOTHES, checked = 24, total = 24),
+                Category(categoryId = 3, title = "등산", categoryType = CategoryType.CAMPING, checked = 12, total = 32),
+                Category(categoryId = 4, title = "전자기기", categoryType = CategoryType.ELECTRONICS, checked = 20, total = 40),
+                Category(categoryId = 5, title = "반려동물", categoryType = CategoryType.COMPANION_ANIMAL, checked = 24, total = 24),
+            ),
+            isTemplateOpen = true
         )
     }
 }
 
 sealed interface ChecklistEffect : ViewEffect {
     object NavigateToAddCategory : ChecklistEffect
+    data class NavigateToLink(val url: String) : ChecklistEffect
+    data class NavigateToCategory(val categoryId: Int) : ChecklistEffect
 }
diff --git a/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/ChecklistScreen.kt b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/ChecklistScreen.kt
index 6ec898e..6964aaa 100644
--- a/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/ChecklistScreen.kt
+++ b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/ChecklistScreen.kt
@@ -1,14 +1,135 @@
 package com.dkin.chevit.presentation.checklist
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Switch
+import androidx.compose.material3.SwitchDefaults
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.checklist.component.ChecklistTopBar
+import com.dkin.chevit.presentation.checklist.component.CountryInfo
+import com.dkin.chevit.presentation.checklist.contents.CategoryEmptyContents
+import com.dkin.chevit.presentation.checklist.contents.CategoryListContents
+import com.dkin.chevit.presentation.resource.ChevitTheme
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
+import com.dkin.chevit.presentation.resource.icon.IconArrowDownLine
+import com.dkin.chevit.presentation.resource.icon.IconArrowUpLine
 
 @Composable
 fun ChecklistScreen(
     viewModel: ChecklistViewModel,
     onClickBack: () -> Unit
 ) {
-    Column {
-        
+    val checklistState by viewModel.state.collectAsState()
+    var showCountryInfo by remember { mutableStateOf(true) }
+
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        ChecklistTopBar(
+            modifier = Modifier.fillMaxWidth(),
+            title = checklistState.title,
+            onClickBack = onClickBack
+        )
+        Text(
+            text = checklistState.date,
+            style = ChevitTheme.typhography.bodyLarge.copy(color = ChevitTheme.colors.textCaption),
+        )
+        Spacer(modifier = Modifier.height(16.dp))
+        if (showCountryInfo) {
+            CountryInfo(
+                notice = checklistState.notice,
+                weathers = checklistState.weathers,
+                weatherDetailUrl = checklistState.weatherDetailUrl,
+                onClickUrl = { url -> viewModel.onClickUrl(url) }
+            )
+        }
+        Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+            if (showCountryInfo) {
+                Icon(
+                    modifier = Modifier.clickable { showCountryInfo = false },
+                    imageVector = ChevitIcon.IconArrowUpLine,
+                    contentDescription = "",
+                    tint = ChevitTheme.colors.grey10,
+                )
+                Spacer(modifier = Modifier.height(12.dp))
+            } else {
+                Icon(
+                    modifier = Modifier.clickable { showCountryInfo = true },
+                    imageVector = ChevitIcon.IconArrowDownLine,
+                    contentDescription = "",
+                    tint = ChevitTheme.colors.grey10,
+                )
+                Spacer(modifier = Modifier.height(12.dp))
+            }
+        }
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(4.dp)
+                .background(color = ChevitTheme.colors.grey0)
+        )
+        Spacer(modifier = Modifier.height(24.dp))
+        Row(modifier = Modifier.fillMaxWidth().padding(horizontal = 24.dp), verticalAlignment = Alignment.CenterVertically) {
+            Text(
+                modifier = Modifier.weight(1f),
+                text = "체크리스트 템플릿",
+                style = ChevitTheme.typhography.headlineMedium.copy(color = ChevitTheme.colors.textPrimary),
+            )
+            if (checklistState.categories.isNotEmpty()) {
+                Text(
+                    text = "공개",
+                    style = ChevitTheme.typhography.bodyMedium.copy(color = ChevitTheme.colors.textSecondary),
+                )
+                Spacer(modifier = Modifier.width(6.dp))
+                Switch(
+                    modifier = Modifier.size(width = 48.dp, height = 24.dp),
+                    checked = checklistState.isTemplateOpen,
+                    onCheckedChange = {
+                        viewModel.dispatch(
+                            ChecklistIntent.ChangeTemplateOpenSetting(
+                                it
+                            )
+                        )
+                    },
+                    colors = SwitchDefaults.colors(
+                        checkedThumbColor = ChevitTheme.colors.white,
+                        checkedTrackColor = ChevitTheme.colors.blue7,
+                        checkedBorderColor = Color.Unspecified,
+                        uncheckedThumbColor = ChevitTheme.colors.white,
+                        uncheckedTrackColor = ChevitTheme.colors.grey2,
+                        uncheckedBorderColor = Color.Unspecified,
+                    ),
+                )
+            }
+        }
+        Spacer(modifier = Modifier.height(24.dp))
+        if (checklistState.categories.isEmpty()) {
+            CategoryEmptyContents()
+        } else {
+            CategoryListContents(
+                categories = checklistState.categories,
+                onClickCategory = { id -> viewModel.onClickCategory(id) },
+            )
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/ChecklistViewModel.kt b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/ChecklistViewModel.kt
index 614a4b2..b9d7e8d 100644
--- a/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/ChecklistViewModel.kt
+++ b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/ChecklistViewModel.kt
@@ -12,7 +12,15 @@ class ChecklistViewModel @Inject constructor() :
 
     override suspend fun processIntent(intent: ChecklistIntent) {
         when (intent) {
-            else -> {}
+            is ChecklistIntent.ChangeTemplateOpenSetting -> {}
         }
     }
+
+    fun onClickUrl(url: String) {
+        setEffect { ChecklistEffect.NavigateToLink(url) }
+    }
+
+    fun onClickCategory(id: Int) {
+        setEffect { ChecklistEffect.NavigateToCategory(id) }
+    }
 }
\ No newline at end of file
diff --git a/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/component/ChecklistTopBar.kt b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/component/ChecklistTopBar.kt
new file mode 100644
index 0000000..784a2a4
--- /dev/null
+++ b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/component/ChecklistTopBar.kt
@@ -0,0 +1,44 @@
+package com.dkin.chevit.presentation.checklist.component
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.ChevitTheme
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
+import com.dkin.chevit.presentation.resource.icon.IconArrowLeftLine
+import com.dkin.chevit.presentation.resource.util.clickableNoRipple
+
+@Composable
+fun ChecklistTopBar(
+    modifier: Modifier = Modifier,
+    title: String,
+    onClickBack: () -> Unit,
+) {
+    Box(
+        modifier = modifier
+            .height(58.dp)
+            .padding(vertical = 16.dp, horizontal = 24.dp),
+        contentAlignment = Alignment.Center
+    ) {
+        Icon(
+            modifier = Modifier
+                .align(Alignment.CenterStart)
+                .clickableNoRipple { onClickBack() },
+            imageVector = ChevitIcon.IconArrowLeftLine,
+            contentDescription = "",
+        )
+        Text(
+            modifier = Modifier.align(Alignment.Center),
+            text = title,
+            textAlign = TextAlign.Center,
+            style = ChevitTheme.typhography.headlineMedium.copy(color = ChevitTheme.colors.textPrimary)
+        )
+    }
+}
\ No newline at end of file
diff --git a/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/component/CountryInfo.kt b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/component/CountryInfo.kt
new file mode 100644
index 0000000..a27d010
--- /dev/null
+++ b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/component/CountryInfo.kt
@@ -0,0 +1,155 @@
+package com.dkin.chevit.presentation.checklist.component
+
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PageSize
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import coil.request.ImageRequest
+import com.dkin.chevit.presentation.checklist.ChecklistState
+import com.dkin.chevit.presentation.resource.ChevitTheme
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun CountryInfo(
+    notice: ChecklistState.Notice,
+    weathers: List<ChecklistState.Weather>,
+    weatherDetailUrl: String,
+    onClickUrl: (url: String) -> Unit,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 24.dp),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        if (notice.title.isNotBlank()) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(
+                        color = ChevitTheme.colors.white,
+                        shape = RoundedCornerShape(100.dp),
+                    )
+                    .border(
+                        width = 1.dp,
+                        color = ChevitTheme.colors.grey2,
+                        shape = RoundedCornerShape(12.dp),
+                    )
+                    .padding(horizontal = 24.dp, vertical = 14.dp)
+                    .clickable { onClickUrl(notice.url) }
+            ) {
+                Notice(notice.title)
+            }
+        }
+        Spacer(modifier = Modifier.height(16.dp))
+        if (weathers.isNotEmpty()) {
+            val pagerState = rememberPagerState(initialPage = 0)
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(
+                        color = ChevitTheme.colors.white,
+                        shape = RoundedCornerShape(100.dp),
+                    )
+                    .border(
+                        width = 1.dp,
+                        color = ChevitTheme.colors.grey2,
+                        shape = RoundedCornerShape(12.dp),
+                    )
+                    .padding(horizontal = 22.dp, vertical = 13.dp),
+                contentAlignment = Alignment.Center
+            ) {
+                HorizontalPager(
+                    modifier = Modifier,
+                    state = pagerState,
+                    pageSpacing = 28.dp,
+                    pageSize = PageSize.Fixed(50.dp),
+                    pageCount = weathers.size
+                ) {
+                    Weather(weathers[it])
+                }
+            }
+            Spacer(modifier = Modifier.height(12.dp))
+            Text(
+                modifier = Modifier.clickable { onClickUrl(weatherDetailUrl) },
+                text = "날씨 정보 더보기",
+                style = ChevitTheme.typhography.bodySmall.copy(color = ChevitTheme.colors.textCaption)
+            )
+        }
+        Spacer(modifier = Modifier.height(24.dp))
+    }
+}
+
+@Composable
+private fun Notice(title: String) {
+    Text(
+        text = "\uD83D\uDCE2",
+        style = ChevitTheme.typhography.headlineSmall,
+    )
+    Spacer(modifier = Modifier.width(10.dp))
+    Text(
+        text = title,
+        style = ChevitTheme.typhography.headlineSmall.copy(color = ChevitTheme.colors.textPrimary),
+        overflow = TextOverflow.Ellipsis,
+        maxLines = 1
+    )
+}
+
+@Composable
+private fun Weather(weather: ChecklistState.Weather) {
+    Column(
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(
+            text = weather.date,
+            style = ChevitTheme.typhography.bodyMedium.copy(color = ChevitTheme.colors.textSecondary)
+        )
+        Spacer(modifier = Modifier.height(6.dp))
+        Box(
+            modifier = Modifier
+                .size(50.dp)
+                .background(color = ChevitTheme.colors.white, shape = CircleShape)
+                .border(
+                    width = 1.dp,
+                    color = ChevitTheme.colors.blue1,
+                    shape = CircleShape,
+                )
+        ) {
+            AsyncImage(
+                modifier = Modifier.size(40.dp),
+                model = ImageRequest.Builder(LocalContext.current)
+                    .data(weather.iconUrl)
+                    .crossfade(true)
+                    .build(),
+                contentDescription = ""
+            )
+        }
+        Spacer(modifier = Modifier.height(6.dp))
+        Text(
+            text = weather.temperature,
+            style = ChevitTheme.typhography.bodyMedium.copy(color = ChevitTheme.colors.textSecondary)
+        )
+    }
+}
\ No newline at end of file
diff --git a/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/contents/CategoryEmptyContents.kt b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/contents/CategoryEmptyContents.kt
new file mode 100644
index 0000000..2a37b54
--- /dev/null
+++ b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/contents/CategoryEmptyContents.kt
@@ -0,0 +1,50 @@
+package com.dkin.chevit.presentation.checklist.contents
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.ChevitButtonFillMedium
+import com.dkin.chevit.presentation.resource.ChevitTheme
+import com.dkin.chevit.presentation.resource.R
+
+@Composable
+fun CategoryEmptyContents() {
+    Column(
+        Modifier.fillMaxWidth(),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Spacer(modifier = Modifier.height(8.dp))
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Image(
+                modifier = Modifier
+                    .size(130.dp),
+                painter = painterResource(id = R.drawable.ic_empty_checklist_template),
+                contentDescription = "",
+            )
+            Text(
+                text = "카테고리를 추가하여\n체크리스트를 만들어 볼까요?",
+                textAlign = TextAlign.Center,
+                style = ChevitTheme.typhography.bodyLarge.copy(
+                    color = ChevitTheme.colors.textSecondary
+                )
+            )
+            Spacer(modifier = Modifier.height(18.dp))
+            ChevitButtonFillMedium(
+                modifier = Modifier.size(width = 147.dp, height = 54.dp),
+                onClick = {  }
+            ) {
+                Text(text = "추가하기")
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/contents/CategoryListContents.kt b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/contents/CategoryListContents.kt
new file mode 100644
index 0000000..3a8e56d
--- /dev/null
+++ b/presentation/checklist/src/main/java/com/dkin/chevit/presentation/checklist/contents/CategoryListContents.kt
@@ -0,0 +1,107 @@
+package com.dkin.chevit.presentation.checklist.contents
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.checklist.ChecklistState
+import com.dkin.chevit.presentation.resource.ChevitTheme
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
+import com.dkin.chevit.presentation.resource.icon.TemplateCheckOff
+import com.dkin.chevit.presentation.resource.icon.TemplateCheckOn
+import com.dkin.chevit.presentation.resource.icon.category.CategoryToiletries
+import com.dkin.chevit.presentation.resource.util.getCategoryIcon
+
+@Composable
+fun CategoryListContents(
+    categories: List<ChecklistState.Category>,
+    onClickCategory: (categoryId: Int) -> Unit
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 24.dp),
+    ) {
+        LazyVerticalGrid(
+            columns = GridCells.Fixed(3),
+            horizontalArrangement = Arrangement.spacedBy(14.dp),
+            verticalArrangement = Arrangement.spacedBy(14.dp),
+        ) {
+            items(categories) { category ->
+                val completed = category.checked == category.total
+                Column(
+                    modifier = Modifier
+                        .clip(RoundedCornerShape(8.dp))
+                        .background(color = if (completed) ChevitTheme.colors.grey0 else ChevitTheme.colors.grey1)
+                        .padding(vertical = 12.dp, horizontal = 12.dp)
+                        .clickable { onClickCategory(category.categoryId) },
+                    horizontalAlignment = Alignment.CenterHorizontally
+                ) {
+                    Box(
+                        modifier = Modifier
+                            .size(54.dp)
+                            .background(color = ChevitTheme.colors.white, shape = CircleShape),
+                        contentAlignment = Alignment.Center
+                    ) {
+//                        Image(imageVector = category.categoryType.getCategoryIcon(), contentDescription = "")
+                        Image(imageVector = ChevitIcon.CategoryToiletries, contentDescription = "")
+                    }
+                    Spacer(modifier = Modifier.height(6.dp))
+                    Text(
+                        text = category.title,
+                        style = ChevitTheme.typhography.bodyMedium.copy(color = ChevitTheme.colors.grey10),
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis
+                    )
+                    Row(verticalAlignment = Alignment.CenterVertically) {
+                        if (completed) {
+                            Image(
+                                modifier = Modifier.size(12.dp),
+                                imageVector = ChevitIcon.TemplateCheckOn,
+                                contentDescription = "",
+                            )
+                        } else {
+                            Image(
+                                modifier = Modifier.size(12.dp),
+                                imageVector = ChevitIcon.TemplateCheckOff,
+                                contentDescription = "",
+                            )
+                        }
+                        Spacer(modifier = Modifier.width(4.dp))
+                        Text(
+                            text = "${category.checked}",
+                            style = ChevitTheme.typhography.caption
+                                .copy(color = ChevitTheme.colors.grey10)
+                        )
+                        Text(
+                            text = "/${category.total}",
+                            style = ChevitTheme.typhography.caption
+                                .copy(color = if (completed) ChevitTheme.colors.grey10 else ChevitTheme.colors.grey5)
+                        )
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/presentation/common/src/main/java/com/dkin/chevit/presentation/common/category/Category.kt b/presentation/common/src/main/java/com/dkin/chevit/presentation/common/category/CategoryType.kt
similarity index 91%
rename from presentation/common/src/main/java/com/dkin/chevit/presentation/common/category/Category.kt
rename to presentation/common/src/main/java/com/dkin/chevit/presentation/common/category/CategoryType.kt
index 88aaeeb..276d52a 100644
--- a/presentation/common/src/main/java/com/dkin/chevit/presentation/common/category/Category.kt
+++ b/presentation/common/src/main/java/com/dkin/chevit/presentation/common/category/CategoryType.kt
@@ -1,6 +1,6 @@
 package com.dkin.chevit.presentation.common.category
 
-enum class Category(val title: String) {
+enum class CategoryType(val title: String) {
     REQUIRES("필수준비물"),
     ELECTRONICS("전자기기"),
     EXERCISE("운동"),
diff --git a/presentation/resource/build.gradle.kts b/presentation/resource/build.gradle.kts
index 133865e..db5ecb5 100644
--- a/presentation/resource/build.gradle.kts
+++ b/presentation/resource/build.gradle.kts
@@ -10,3 +10,6 @@ apply(from = project.rootProject.file("gradle-scripts/compose.gradle"))
 android {
     namespace = "com.dkin.chevit.presentation.resource"
 }
+dependencies {
+    implementation(project(":presentation:common"))
+}
\ No newline at end of file
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/IconArrowDownLine.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/IconArrowDownLine.kt
new file mode 100644
index 0000000..0f7b41b
--- /dev/null
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/IconArrowDownLine.kt
@@ -0,0 +1,40 @@
+package com.dkin.chevit.presentation.resource.icon
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
+import androidx.compose.ui.graphics.StrokeJoin.Companion.Miter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.ImageVector.Builder
+import androidx.compose.ui.graphics.vector.group
+import androidx.compose.ui.graphics.vector.path
+import androidx.compose.ui.unit.dp
+
+public val ChevitIcon.IconArrowDownLine: ImageVector
+    get() {
+        if (_iconArrowDownLine != null) {
+            return _iconArrowDownLine!!
+        }
+        _iconArrowDownLine = Builder(name = "IconArrowDownLine", defaultWidth = 25.0.dp,
+                defaultHeight = 24.0.dp, viewportWidth = 25.0f, viewportHeight = 24.0f).apply {
+            group {
+                path(fill = SolidColor(Color(0xFF171717)), stroke = null, strokeLineWidth = 0.0f,
+                        strokeLineCap = Butt, strokeLineJoin = Miter, strokeLineMiter = 4.0f,
+                        pathFillType = NonZero) {
+                    moveTo(12.2502f, 13.1722f)
+                    lineTo(17.2002f, 8.2222f)
+                    lineTo(18.6142f, 9.6362f)
+                    lineTo(12.2502f, 16.0002f)
+                    lineTo(5.8862f, 9.6362f)
+                    lineTo(7.3002f, 8.2222f)
+                    lineTo(12.2502f, 13.1722f)
+                    close()
+                }
+            }
+        }
+        .build()
+        return _iconArrowDownLine!!
+    }
+
+private var _iconArrowDownLine: ImageVector? = null
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/IconArrowUpLine.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/IconArrowUpLine.kt
new file mode 100644
index 0000000..66d5837
--- /dev/null
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/IconArrowUpLine.kt
@@ -0,0 +1,37 @@
+package com.dkin.chevit.presentation.resource.icon
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
+import androidx.compose.ui.graphics.StrokeJoin.Companion.Miter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.ImageVector.Builder
+import androidx.compose.ui.graphics.vector.path
+import androidx.compose.ui.unit.dp
+
+public val ChevitIcon.IconArrowUpLine: ImageVector
+    get() {
+        if (_iconArrowUpLine != null) {
+            return _iconArrowUpLine!!
+        }
+        _iconArrowUpLine = Builder(name = "IconArrowUpLine", defaultWidth = 25.0.dp, defaultHeight =
+                24.0.dp, viewportWidth = 25.0f, viewportHeight = 24.0f).apply {
+            path(fill = SolidColor(Color(0xFF171717)), stroke = null, strokeLineWidth = 0.0f,
+                    strokeLineCap = Butt, strokeLineJoin = Miter, strokeLineMiter = 4.0f,
+                    pathFillType = NonZero) {
+                moveTo(12.7493f, 11.05f)
+                lineTo(7.7993f, 16.0f)
+                lineTo(6.3853f, 14.586f)
+                lineTo(12.7493f, 8.222f)
+                lineTo(19.1133f, 14.586f)
+                lineTo(17.6993f, 16.0f)
+                lineTo(12.7493f, 11.05f)
+                close()
+            }
+        }
+        .build()
+        return _iconArrowUpLine!!
+    }
+
+private var _iconArrowUpLine: ImageVector? = null
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/TemplateCheckOff.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/TemplateCheckOff.kt
new file mode 100644
index 0000000..be522c2
--- /dev/null
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/TemplateCheckOff.kt
@@ -0,0 +1,48 @@
+package com.dkin.chevit.presentation.resource.icon
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
+import androidx.compose.ui.graphics.StrokeCap.Companion.Round
+import androidx.compose.ui.graphics.StrokeJoin.Companion.Miter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.ImageVector.Builder
+import androidx.compose.ui.graphics.vector.path
+import androidx.compose.ui.unit.dp
+
+public val ChevitIcon.TemplateCheckOff: ImageVector
+    get() {
+        if (_templateCheckOff != null) {
+            return _templateCheckOff!!
+        }
+        _templateCheckOff = Builder(name = "TemplateCheckOff", defaultWidth = 13.0.dp, defaultHeight
+                = 12.0.dp, viewportWidth = 13.0f, viewportHeight = 12.0f).apply {
+            path(fill = SolidColor(Color(0xFF8785FF)), stroke = SolidColor(Color(0xFF9B99FF)),
+                    strokeLineWidth = 0.5f, strokeLineCap = Butt, strokeLineJoin = Miter,
+                    strokeLineMiter = 4.0f, pathFillType = NonZero) {
+                moveTo(2.25f, 0.25f)
+                lineTo(10.25f, 0.25f)
+                arcTo(1.75f, 1.75f, 0.0f, false, true, 12.0f, 2.0f)
+                lineTo(12.0f, 10.0f)
+                arcTo(1.75f, 1.75f, 0.0f, false, true, 10.25f, 11.75f)
+                lineTo(2.25f, 11.75f)
+                arcTo(1.75f, 1.75f, 0.0f, false, true, 0.5f, 10.0f)
+                lineTo(0.5f, 2.0f)
+                arcTo(1.75f, 1.75f, 0.0f, false, true, 2.25f, 0.25f)
+                close()
+            }
+            path(fill = SolidColor(Color(0x00000000)), stroke = SolidColor(Color(0xFFffffff)),
+                    strokeLineWidth = 1.0f, strokeLineCap = Round, strokeLineJoin = Miter,
+                    strokeLineMiter = 4.0f, pathFillType = NonZero) {
+                moveTo(2.75f, 5.7549f)
+                lineTo(4.8598f, 8.0895f)
+                curveTo(5.0583f, 8.3092f, 5.4032f, 8.3092f, 5.6017f, 8.0896f)
+                lineTo(9.75f, 3.5f)
+            }
+        }
+        .build()
+        return _templateCheckOff!!
+    }
+
+private var _templateCheckOff: ImageVector? = null
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/TemplateCheckOn.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/TemplateCheckOn.kt
new file mode 100644
index 0000000..9e410a0
--- /dev/null
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/TemplateCheckOn.kt
@@ -0,0 +1,48 @@
+package com.dkin.chevit.presentation.resource.icon
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
+import androidx.compose.ui.graphics.StrokeCap.Companion.Round
+import androidx.compose.ui.graphics.StrokeJoin.Companion.Miter
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.ImageVector.Builder
+import androidx.compose.ui.graphics.vector.path
+import androidx.compose.ui.unit.dp
+
+public val ChevitIcon.TemplateCheckOn: ImageVector
+    get() {
+        if (_templateCheckOn != null) {
+            return _templateCheckOn!!
+        }
+        _templateCheckOn = Builder(name = "TemplateCheckOn", defaultWidth = 13.0.dp, defaultHeight =
+                12.0.dp, viewportWidth = 13.0f, viewportHeight = 12.0f).apply {
+            path(fill = SolidColor(Color(0xFF3531FF)), stroke = SolidColor(Color(0xFF4A47FF)),
+                    strokeLineWidth = 0.5f, strokeLineCap = Butt, strokeLineJoin = Miter,
+                    strokeLineMiter = 4.0f, pathFillType = NonZero) {
+                moveTo(2.25f, 0.25f)
+                lineTo(10.25f, 0.25f)
+                arcTo(1.75f, 1.75f, 0.0f, false, true, 12.0f, 2.0f)
+                lineTo(12.0f, 10.0f)
+                arcTo(1.75f, 1.75f, 0.0f, false, true, 10.25f, 11.75f)
+                lineTo(2.25f, 11.75f)
+                arcTo(1.75f, 1.75f, 0.0f, false, true, 0.5f, 10.0f)
+                lineTo(0.5f, 2.0f)
+                arcTo(1.75f, 1.75f, 0.0f, false, true, 2.25f, 0.25f)
+                close()
+            }
+            path(fill = SolidColor(Color(0x00000000)), stroke = SolidColor(Color(0xFFffffff)),
+                    strokeLineWidth = 1.0f, strokeLineCap = Round, strokeLineJoin = Miter,
+                    strokeLineMiter = 4.0f, pathFillType = NonZero) {
+                moveTo(2.75f, 5.7549f)
+                lineTo(4.8598f, 8.0895f)
+                curveTo(5.0583f, 8.3092f, 5.4032f, 8.3092f, 5.6017f, 8.0896f)
+                lineTo(9.75f, 3.5f)
+            }
+        }
+        .build()
+        return _templateCheckOn!!
+    }
+
+private var _templateCheckOn: ImageVector? = null
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryBaby.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryBaby.kt
similarity index 91%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryBaby.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryBaby.kt
index 6a119a8..4fc9855 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryBaby.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryBaby.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,6 +7,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
 public val ChevitIcon.CategoryBaby: ImageVector
     get() {
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryBeautyProducts.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryBeautyProducts.kt
similarity index 87%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryBeautyProducts.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryBeautyProducts.kt
index 486bdfe..c1881a4 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryBeautyProducts.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryBeautyProducts.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,8 +7,9 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
-public val ChevitIcon.BeautyProducts: ImageVector
+public val ChevitIcon.CategoryBeautyProducts: ImageVector
     get() {
         if (_categoryBeautyProducts != null) {
             return _categoryBeautyProducts!!
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryBusiness.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryBusiness.kt
similarity index 91%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryBusiness.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryBusiness.kt
index 9df2c9d..1cb0f4e 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryBusiness.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryBusiness.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,6 +7,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
 public val ChevitIcon.CategoryBusiness: ImageVector
     get() {
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryCamping.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryCamping.kt
similarity index 91%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryCamping.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryCamping.kt
index 14325bf..06021d6 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryCamping.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryCamping.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,6 +7,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
 public val ChevitIcon.CategoryCamping: ImageVector
     get() {
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryClothes.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryClothes.kt
similarity index 91%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryClothes.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryClothes.kt
index c65f29f..7720cf2 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryClothes.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryClothes.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,6 +7,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
 public val ChevitIcon.CategoryClothes: ImageVector
     get() {
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryCompanionAnimal.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryCompanionAnimal.kt
similarity index 91%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryCompanionAnimal.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryCompanionAnimal.kt
index ce3e1cd..dd03b95 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryCompanionAnimal.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryCompanionAnimal.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,6 +7,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
 public val ChevitIcon.CategoryCompanionAnimal: ImageVector
     get() {
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryElectronics.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryElectronics.kt
similarity index 87%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryElectronics.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryElectronics.kt
index 180de62..30adace 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryElectronics.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryElectronics.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,8 +7,9 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
-public val ChevitIcon.Electronics: ImageVector
+public val ChevitIcon.CategoryElectronics: ImageVector
     get() {
         if (_categoryElectronics != null) {
             return _categoryElectronics!!
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryEmergencyMedicine.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryEmergencyMedicine.kt
similarity index 87%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryEmergencyMedicine.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryEmergencyMedicine.kt
index 171b6e1..8a7f04e 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryEmergencyMedicine.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryEmergencyMedicine.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,8 +7,9 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
-public val ChevitIcon.EmergencyMedicine: ImageVector
+public val ChevitIcon.CategoryEmergencyMedicine: ImageVector
     get() {
         if (_categoryEmergencyMedicine != null) {
             return _categoryEmergencyMedicine!!
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryEtc.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryEtc.kt
similarity index 90%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryEtc.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryEtc.kt
index 0137522..5a805d3 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryEtc.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryEtc.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,6 +7,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
 public val ChevitIcon.CategoryEtc: ImageVector
     get() {
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryExercise.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryExercise.kt
similarity index 91%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryExercise.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryExercise.kt
index 0777d35..55f0609 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryExercise.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryExercise.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,6 +7,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
 public val ChevitIcon.CategoryExercise: ImageVector
     get() {
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryMountain.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryMountain.kt
similarity index 91%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryMountain.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryMountain.kt
index 5b2e19c..b43a937 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryMountain.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryMountain.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,6 +7,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
 public val ChevitIcon.CategoryMountain: ImageVector
     get() {
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryPhoto.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryPhoto.kt
similarity index 91%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryPhoto.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryPhoto.kt
index 5a76613..c963d41 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryPhoto.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryPhoto.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,6 +7,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
 public val ChevitIcon.CategoryPhoto: ImageVector
     get() {
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryRequires.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryRequires.kt
similarity index 91%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryRequires.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryRequires.kt
index 55bd846..c0cd709 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryRequires.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryRequires.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,6 +7,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
 public val ChevitIcon.CategoryRequires: ImageVector
     get() {
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategorySwimming.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategorySwimming.kt
similarity index 91%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategorySwimming.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategorySwimming.kt
index ab0dcc5..5e68205 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategorySwimming.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategorySwimming.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,6 +7,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
 public val ChevitIcon.CategorySwimming: ImageVector
     get() {
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryToiletries.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryToiletries.kt
similarity index 91%
rename from presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryToiletries.kt
rename to presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryToiletries.kt
index 6ba55e9..dfaf192 100644
--- a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/CategoryToiletries.kt
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/icon/category/CategoryToiletries.kt
@@ -1,4 +1,4 @@
-package com.dkin.chevit.presentation.resource.icon
+package com.dkin.chevit.presentation.resource.icon.category
 
 import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
 import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
@@ -7,6 +7,7 @@ import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.graphics.vector.ImageVector.Builder
 import androidx.compose.ui.graphics.vector.path
 import androidx.compose.ui.unit.dp
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
 
 public val ChevitIcon.CategoryToiletries: ImageVector
     get() {
diff --git a/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/util/IconUtil.kt b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/util/IconUtil.kt
new file mode 100644
index 0000000..d25c62f
--- /dev/null
+++ b/presentation/resource/src/main/java/com/dkin/chevit/presentation/resource/util/IconUtil.kt
@@ -0,0 +1,40 @@
+package com.dkin.chevit.presentation.resource.util
+
+import androidx.compose.ui.graphics.vector.ImageVector
+import com.dkin.chevit.presentation.common.category.CategoryType
+import com.dkin.chevit.presentation.resource.icon.ChevitIcon
+import com.dkin.chevit.presentation.resource.icon.category.CategoryBaby
+import com.dkin.chevit.presentation.resource.icon.category.CategoryBeautyProducts
+import com.dkin.chevit.presentation.resource.icon.category.CategoryBusiness
+import com.dkin.chevit.presentation.resource.icon.category.CategoryCamping
+import com.dkin.chevit.presentation.resource.icon.category.CategoryClothes
+import com.dkin.chevit.presentation.resource.icon.category.CategoryCompanionAnimal
+import com.dkin.chevit.presentation.resource.icon.category.CategoryElectronics
+import com.dkin.chevit.presentation.resource.icon.category.CategoryEmergencyMedicine
+import com.dkin.chevit.presentation.resource.icon.category.CategoryEtc
+import com.dkin.chevit.presentation.resource.icon.category.CategoryExercise
+import com.dkin.chevit.presentation.resource.icon.category.CategoryMountain
+import com.dkin.chevit.presentation.resource.icon.category.CategoryPhoto
+import com.dkin.chevit.presentation.resource.icon.category.CategoryRequires
+import com.dkin.chevit.presentation.resource.icon.category.CategorySwimming
+import com.dkin.chevit.presentation.resource.icon.category.CategoryToiletries
+
+fun CategoryType.getCategoryIcon(): ImageVector {
+    return when(this) {
+        CategoryType.REQUIRES -> ChevitIcon.CategoryRequires
+        CategoryType.ELECTRONICS -> ChevitIcon.CategoryElectronics
+        CategoryType.EXERCISE -> ChevitIcon.CategoryExercise
+        CategoryType.TOILETRIES -> ChevitIcon.CategoryToiletries
+        CategoryType.EMERGENCY_MEDICINE -> ChevitIcon.CategoryEmergencyMedicine
+        CategoryType.BEAUTY_PRODUCTS -> ChevitIcon.CategoryBeautyProducts
+        CategoryType.BABY -> ChevitIcon.CategoryBaby
+        CategoryType.COMPANION_ANIMAL -> ChevitIcon.CategoryCompanionAnimal
+        CategoryType.MOUNTAIN -> ChevitIcon.CategoryMountain
+        CategoryType.BUSINESS -> ChevitIcon.CategoryBusiness
+        CategoryType.PHOTO -> ChevitIcon.CategoryPhoto
+        CategoryType.CAMPING -> ChevitIcon.CategoryCamping
+        CategoryType.SWIMMING -> ChevitIcon.CategorySwimming
+        CategoryType.CLOTHES -> ChevitIcon.CategoryClothes
+        CategoryType.ETC -> ChevitIcon.CategoryEtc
+    }
+}
\ No newline at end of file
diff --git a/presentation/resource/src/main/res/drawable/ic_empty_checklist_template.png b/presentation/resource/src/main/res/drawable/ic_empty_checklist_template.png
new file mode 100644
index 0000000..c5e7b16
Binary files /dev/null and b/presentation/resource/src/main/res/drawable/ic_empty_checklist_template.png differ