diff --git a/app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt b/app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt
index 8052114..209cb50 100644
--- a/app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt
+++ b/app/src/main/java/univ/earthbreaker/namu/compose/CommonDialogWithXIcon.kt
@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -48,12 +47,13 @@ fun CommonDialogWithXIcon(
             }
 
             Spacer(Modifier.height(23.dp))
-            IconButton(
+            Box(
                 modifier = Modifier
                     .size(size = 64.dp)
                     .clip(shape = RoundedCornerShape(100.dp))
-                    .background(GTTheme.colors.white),
-                onClick = dismiss,
+                    .background(GTTheme.colors.white)
+                    .noRippleClickable(onClick = dismiss),
+                contentAlignment = Alignment.Center,
             ) {
                 Icon(
                     painter = painterResource(id = R.drawable.ic_x),
diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeActivity.kt b/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeActivity.kt
index e328861..fbeebe2 100644
--- a/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeActivity.kt
+++ b/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeActivity.kt
@@ -8,7 +8,13 @@ class HomeActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            HomeScreen()
+            HomeScreen(
+                level = 1,
+                exp = 0.7f,
+                energyCount = 1,
+                currentEnergy = 1,
+                requiredEnergy = 3,
+            )
         }
     }
 }
diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeScreen.kt b/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeScreen.kt
index ac1ee42..88dcdd0 100644
--- a/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeScreen.kt
+++ b/app/src/main/java/univ/earthbreaker/namu/feature/home/HomeScreen.kt
@@ -1,7 +1,10 @@
 package univ.earthbreaker.namu.feature.home
 
+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
@@ -9,46 +12,171 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import univ.earthbreaker.namu.R
-import univ.earthbreaker.namu.feature.home.component.EnergyCard
+import univ.earthbreaker.namu.compose.CommonDialogWithXIcon
 import univ.earthbreaker.namu.feature.home.component.OpenDialogCard
+import univ.earthbreaker.namu.feature.home.component.TreeEnergyCard
+import univ.earthbreaker.namu.feature.home.component.UserEnergyCard
 import univ.earthbreaker.namu.feature.home.component.WeeklyTopRankerProfileCard
 import univ.earthbreaker.namu.ui.theme.GTTheme
 
 @Composable
-fun HomeScreen() {
+fun HomeScreen(level: Int, exp: Float, energyCount: Int, currentEnergy: Int, requiredEnergy: Int) {
+    var doesDialogExist by rememberSaveable {
+        mutableStateOf(false)
+    }
+
     Column(
         modifier = Modifier
             .fillMaxSize()
             .background(color = GTTheme.colors.bgBlack),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.SpaceBetween,
     ) {
+        HomeTopCard(level, exp, energyCount, onProfileClick = { doesDialogExist = true })
+        Image(
+            painter = painterResource(id = R.drawable.img_mock_character),
+            contentDescription = null,
+        )
+        HomeBottomCard(currentEnergy = currentEnergy, requiredEnergy = requiredEnergy)
+    }
+    if (doesDialogExist) {
+        Column(
+            modifier = Modifier.fillMaxSize(),
+        ) {
+            CommonDialogWithXIcon(
+                content = {
+                    Column {
+                        repeat(15) {
+                            Text(
+                                text = "Hello World!",
+                                style = GTTheme.typography.titleSemiBold20,
+                            )
+                        }
+                    }
+                },
+                dismiss = { doesDialogExist = false },
+            )
+        }
+    }
+}
+
+@Composable
+fun HomeTopCard(level: Int, exp: Float, energyCount: Int, onProfileClick: () -> Unit = {}) {
+    Column {
+        Row(
+            modifier = Modifier.padding(start = 18.dp, end = 18.dp, top = 30.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(
+                text = "Lv. $level",
+                style = GTTheme.typography.detailBold11,
+                color = GTTheme.colors.white,
+            )
+            LinearProgressIndicator(
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(start = 7.dp)
+                    .height(11.dp)
+                    .clip(RoundedCornerShape(20.dp)),
+                progress = exp,
+                color = GTTheme.colors.green1,
+                trackColor = GTTheme.colors.bg2Black,
+            )
+        }
+
         Row(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(start = 20.dp, end = 20.dp, top = 30.dp),
             horizontalArrangement = Arrangement.SpaceBetween,
         ) {
-            WeeklyTopRankerProfileCard()
             Column {
-                EnergyCard()
-                Spacer(Modifier.height(5.dp))
-                OpenDialogCard(text = stringResource(R.string.book)) { /* TODO */ }
-                Spacer(Modifier.height(5.dp))
-                OpenDialogCard(text = stringResource(R.string.my)) { /* TODO */ }
-                Spacer(Modifier.height(5.dp))
-                OpenDialogCard(text = stringResource(R.string.mission)) { /* TODO */ }
+                WeeklyTopRankerProfileCard(onClick = onProfileClick)
+                Spacer(Modifier.height(7.dp))
+                OpenDialogCard(
+                    text = stringResource(R.string.adding_friends),
+                    onClick = {},
+                    width = 85.dp,
+                )
+                Spacer(Modifier.height(7.dp))
+                OpenDialogCard(
+                    text = stringResource(R.string.guestbook),
+                    onClick = {},
+                    width = 72.dp,
+                )
+            }
+            Column {
+                UserEnergyCard(energyCount = energyCount)
+                Spacer(Modifier.height(7.dp))
+                OpenDialogCard(text = stringResource(R.string.book), onClick = {})
+                Spacer(Modifier.height(7.dp))
+                OpenDialogCard(text = stringResource(R.string.mission), onClick = {})
+                Spacer(Modifier.height(7.dp))
+                OpenDialogCard(text = stringResource(R.string.my), onClick = {})
+                Spacer(Modifier.height(7.dp))
+                OpenDialogCard(text = stringResource(R.string.notification), onClick = {})
             }
         }
     }
 }
 
+@Composable
+fun HomeBottomCard(currentEnergy: Int, requiredEnergy: Int) {
+    val isReady = currentEnergy == requiredEnergy
+    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+        TreeEnergyCard(currentEnergy, requiredEnergy)
+        Spacer(modifier = Modifier.height(52.dp))
+        Box(
+            modifier = Modifier
+                .padding(horizontal = 30.dp)
+                .fillMaxWidth()
+                .background(
+                    color = if (isReady) GTTheme.colors.green1 else GTTheme.colors.gray3,
+                    shape = RoundedCornerShape(5.dp),
+                )
+                .clickable(enabled = isReady) { },
+            contentAlignment = Alignment.Center,
+        ) {
+            Text(
+                modifier = Modifier.padding(vertical = 15.dp),
+                text = if (isReady) "다음 단계로 성장하기" else "에너지가 2개 모자라요 !",
+                style = GTTheme.typography.titleSemiBold18,
+            )
+        }
+        Spacer(modifier = Modifier.height(56.dp))
+    }
+}
+
 @Preview
 @Composable
 fun HomeScreenPreview() {
-    HomeScreen()
+    HomeScreen(level = 1, exp = 0.7f, energyCount = 1, currentEnergy = 1, requiredEnergy = 3)
+}
+
+@Preview
+@Composable
+fun HomeTopCardPreview() {
+    HomeTopCard(level = 1, exp = 0.7f, energyCount = 1)
+}
+
+@Preview
+@Composable
+fun HomeBottomCardPreview() {
+    HomeBottomCard(currentEnergy = 1, requiredEnergy = 3)
 }
diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/home/component/OpenDialogCard.kt b/app/src/main/java/univ/earthbreaker/namu/feature/home/component/OpenDialogCard.kt
index d0ff94a..095def4 100644
--- a/app/src/main/java/univ/earthbreaker/namu/feature/home/component/OpenDialogCard.kt
+++ b/app/src/main/java/univ/earthbreaker/namu/feature/home/component/OpenDialogCard.kt
@@ -3,9 +3,8 @@ package univ.earthbreaker.namu.feature.home.component
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
@@ -15,6 +14,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import univ.earthbreaker.namu.R
 import univ.earthbreaker.namu.compose.noRippleClickable
@@ -24,11 +24,12 @@ import univ.earthbreaker.namu.ui.theme.GTTheme
 fun OpenDialogCard(
     text: String,
     onClick: () -> Unit,
+    width: Dp = 62.dp,
+    height: Dp = 26.dp,
 ) {
     Row(
         modifier = Modifier
-            .width(62.dp)
-            .height(26.dp)
+            .size(width, height)
             .background(color = GTTheme.colors.bgBlack, shape = RoundedCornerShape(100.dp))
             .noRippleClickable(onClick = onClick),
         horizontalArrangement = Arrangement.SpaceBetween,
@@ -54,5 +55,5 @@ fun OpenDialogCard(
 @Preview
 @Composable
 fun OpenDialogCardPreview() {
-    OpenDialogCard(stringResource(id = R.string.book)) {}
+    OpenDialogCard(stringResource(id = R.string.book), onClick = {})
 }
diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/home/component/TreeEnergyCard.kt b/app/src/main/java/univ/earthbreaker/namu/feature/home/component/TreeEnergyCard.kt
new file mode 100644
index 0000000..e4b099d
--- /dev/null
+++ b/app/src/main/java/univ/earthbreaker/namu/feature/home/component/TreeEnergyCard.kt
@@ -0,0 +1,32 @@
+package univ.earthbreaker.namu.feature.home.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Row
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import univ.earthbreaker.namu.R
+
+@Composable
+fun TreeEnergyCard(currentEnergy: Int, requiredEnergy: Int) {
+    Row {
+        repeat(requiredEnergy) { index ->
+            Image(
+                painter = painterResource(
+                    id = if (index < currentEnergy) {
+                        R.drawable.ic_filled_required_energy
+                    } else {
+                        R.drawable.ic_empty_required_energy
+                    },
+                ),
+                contentDescription = null,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+fun TreeEnergyCardPreview() {
+    TreeEnergyCard(currentEnergy = 1, requiredEnergy = 3)
+}
diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/home/component/EnergyCard.kt b/app/src/main/java/univ/earthbreaker/namu/feature/home/component/UserEnergyCard.kt
similarity index 96%
rename from app/src/main/java/univ/earthbreaker/namu/feature/home/component/EnergyCard.kt
rename to app/src/main/java/univ/earthbreaker/namu/feature/home/component/UserEnergyCard.kt
index 6ae9a02..a3ba183 100644
--- a/app/src/main/java/univ/earthbreaker/namu/feature/home/component/EnergyCard.kt
+++ b/app/src/main/java/univ/earthbreaker/namu/feature/home/component/UserEnergyCard.kt
@@ -20,7 +20,7 @@ import univ.earthbreaker.namu.R
 import univ.earthbreaker.namu.ui.theme.GTTheme
 
 @Composable
-fun EnergyCard(energyCount: Int = 0) {
+fun UserEnergyCard(energyCount: Int = 0) {
     Row(
         modifier = Modifier
             .width(62.dp)
@@ -51,5 +51,5 @@ fun EnergyCard(energyCount: Int = 0) {
 @Preview
 @Composable
 fun EnergyCardPreview() {
-    EnergyCard()
+    UserEnergyCard()
 }
diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/home/component/WeeklyTopRankerProfileCard.kt b/app/src/main/java/univ/earthbreaker/namu/feature/home/component/WeeklyTopRankerProfileCard.kt
index 6a1a4b8..3c4ea45 100644
--- a/app/src/main/java/univ/earthbreaker/namu/feature/home/component/WeeklyTopRankerProfileCard.kt
+++ b/app/src/main/java/univ/earthbreaker/namu/feature/home/component/WeeklyTopRankerProfileCard.kt
@@ -16,15 +16,16 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import univ.earthbreaker.namu.R
+import univ.earthbreaker.namu.compose.noRippleClickable
 import univ.earthbreaker.namu.ui.theme.GTTheme
 
 @Composable
-fun WeeklyTopRankerProfileCard(modifier: Modifier = Modifier) {
+fun WeeklyTopRankerProfileCard(modifier: Modifier = Modifier, onClick: () -> Unit = {}) {
     Column(
         modifier = modifier.background(
             color = GTTheme.colors.bgBlack,
             shape = RoundedCornerShape(15.dp),
-        ),
+        ).noRippleClickable(onClick = onClick),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
         Image(
diff --git a/app/src/main/java/univ/earthbreaker/namu/feature/login/LoginScreen.kt b/app/src/main/java/univ/earthbreaker/namu/feature/login/LoginScreen.kt
index 25f795c..4cebe03 100644
--- a/app/src/main/java/univ/earthbreaker/namu/feature/login/LoginScreen.kt
+++ b/app/src/main/java/univ/earthbreaker/namu/feature/login/LoginScreen.kt
@@ -2,7 +2,6 @@ package univ.earthbreaker.namu.feature.login
 
 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.Column
 import androidx.compose.foundation.layout.Spacer
@@ -17,6 +16,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import univ.earthbreaker.namu.R
+import univ.earthbreaker.namu.compose.noRippleClickable
 import univ.earthbreaker.namu.ui.theme.GTTheme
 
 @Composable
@@ -34,7 +34,7 @@ fun LoginScreen(onClickLoginButton: () -> Unit = {}) {
             modifier = Modifier
                 .padding(horizontal = 20.dp)
                 .fillMaxWidth()
-                .clickable(onClick = onClickLoginButton),
+                .noRippleClickable(onClick = onClickLoginButton),
             painter = painterResource(id = R.drawable.img_kakao_login),
             contentDescription = null,
         )
diff --git a/app/src/main/res/drawable-xhdpi/img_mock_character.png b/app/src/main/res/drawable-xhdpi/img_mock_character.png
new file mode 100644
index 0000000..d0b9366
Binary files /dev/null and b/app/src/main/res/drawable-xhdpi/img_mock_character.png differ
diff --git a/app/src/main/res/drawable-xxhdpi/img_mock_character.png b/app/src/main/res/drawable-xxhdpi/img_mock_character.png
new file mode 100644
index 0000000..653cf04
Binary files /dev/null and b/app/src/main/res/drawable-xxhdpi/img_mock_character.png differ
diff --git a/app/src/main/res/drawable/ic_empty_required_energy.xml b/app/src/main/res/drawable/ic_empty_required_energy.xml
new file mode 100644
index 0000000..2ed8429
--- /dev/null
+++ b/app/src/main/res/drawable/ic_empty_required_energy.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="26dp"
+    android:height="27dp"
+    android:viewportWidth="26"
+    android:viewportHeight="27">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M0.504,26.5C0.53,24.789 0.694,23.23 0.989,21.798L1.009,21.703L0.992,21.608C0.667,19.811 0.5,17.35 0.5,14.21C0.5,6.646 6.735,0.5 14.444,0.5C15.127,0.5 15.82,0.584 16.584,0.695C16.742,0.718 16.903,0.742 17.068,0.766C17.692,0.859 18.364,0.959 19.09,1.03C20.811,1.2 22.853,1.211 25.5,0.63V2.842C25.5,9.588 23.588,14.425 20.563,17.573C17.538,20.721 13.345,22.237 8.668,22.237H6.464C6.642,20.395 7.04,18.904 7.751,17.543C8.531,16.05 9.705,14.68 11.446,13.165C11.899,12.77 12.242,12.407 12.485,12.086C12.721,11.775 12.888,11.47 12.947,11.194C12.977,11.055 12.988,10.879 12.923,10.705C12.85,10.509 12.697,10.362 12.499,10.297C12.323,10.24 12.149,10.258 12.014,10.293C11.874,10.329 11.734,10.392 11.6,10.471L0.504,26.5ZM0.504,26.5H2.393L2.393,26.47L2.393,26.465H2.393C2.459,22.675 3.239,19.556 4.778,16.935C6.318,14.315 8.596,12.229 11.6,10.471L0.504,26.5Z"
+      android:fillColor="#8E8C8C"
+      android:fillAlpha="0.59"
+      android:strokeColor="#ffffff"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_filled_required_energy.xml b/app/src/main/res/drawable/ic_filled_required_energy.xml
new file mode 100644
index 0000000..0869294
--- /dev/null
+++ b/app/src/main/res/drawable/ic_filled_required_energy.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="26dp"
+    android:height="27dp"
+    android:viewportWidth="26"
+    android:viewportHeight="27">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M0.504,26.5C0.53,24.789 0.694,23.23 0.989,21.798L1.009,21.703L0.992,21.608C0.667,19.811 0.5,17.35 0.5,14.21C0.5,6.646 6.735,0.5 14.444,0.5C15.127,0.5 15.82,0.584 16.584,0.695C16.742,0.718 16.903,0.742 17.068,0.766C17.692,0.859 18.364,0.959 19.09,1.03C20.811,1.2 22.853,1.211 25.5,0.63V2.842C25.5,9.588 23.588,14.425 20.563,17.573C17.538,20.721 13.345,22.237 8.668,22.237H6.464C6.642,20.395 7.04,18.904 7.751,17.543C8.531,16.05 9.705,14.68 11.446,13.165C11.899,12.77 12.242,12.407 12.485,12.086C12.721,11.775 12.888,11.47 12.947,11.194C12.977,11.055 12.988,10.879 12.923,10.705C12.85,10.509 12.697,10.362 12.499,10.297C12.323,10.24 12.149,10.258 12.014,10.293C11.874,10.329 11.734,10.392 11.6,10.471L0.504,26.5ZM0.504,26.5H2.393L2.393,26.47L2.393,26.465H2.393C2.459,22.675 3.239,19.556 4.778,16.935C6.318,14.315 8.596,12.229 11.6,10.471L0.504,26.5Z"
+      android:fillColor="#4ECB71"
+      android:strokeColor="#ffffff"/>
+</vector>
diff --git a/app/src/main/res/drawable/img_mock_character.png b/app/src/main/res/drawable/img_mock_character.png
new file mode 100644
index 0000000..3e485c2
Binary files /dev/null and b/app/src/main/res/drawable/img_mock_character.png differ
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index cc649e9..6368408 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -2,6 +2,9 @@
     <string name="app_name">Grow Tree</string>
     <string name="tree_king_of_the_week">금주의 나무왕</string>
     <string name="book">도감</string>
-    <string name="my">MY</string>
     <string name="mission">미션</string>
-</resources>
\ No newline at end of file
+    <string name="my">MY</string>
+    <string name="notification">알림</string>
+    <string name="adding_friends">친구 추가</string>
+    <string name="guestbook">방명록</string>
+</resources>