diff --git a/core-design-system/src/main/res/drawable/bg_rect_green50_r10.xml b/core-design-system/src/main/res/drawable/bg_rect_green50_r10.xml
new file mode 100644
index 00000000..fd08a776
--- /dev/null
+++ b/core-design-system/src/main/res/drawable/bg_rect_green50_r10.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <solid android:color="@color/green_50" />
+    <corners android:radius="10dp" />
+</shape>
diff --git a/core-design-system/src/main/res/drawable/bg_rect_white_r15.xml b/core-design-system/src/main/res/drawable/bg_rect_white_r15.xml
new file mode 100644
index 00000000..dc002105
--- /dev/null
+++ b/core-design-system/src/main/res/drawable/bg_rect_white_r15.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <solid android:color="@color/white" />
+    <corners android:radius="15dp" />
+
+</shape>
diff --git a/core-design-system/src/main/res/values/typography.xml b/core-design-system/src/main/res/values/typography.xml
index e3669530..7a5df107 100644
--- a/core-design-system/src/main/res/values/typography.xml
+++ b/core-design-system/src/main/res/values/typography.xml
@@ -111,6 +111,30 @@
         <item name="fontFamily">@font/suit_bold</item>
     </style>
 
+    <!-- Display1 -->
+    <style name="Typography.Display1">
+        <item name="android:textSize" tools:ignore="SpUsage">26dp</item>
+        <item name="fontFamily">@font/suit_semi_bold</item>
+    </style>
+
+    <!-- Display2 -->
+    <style name="Typography.Display2">
+        <item name="android:textSize" tools:ignore="SpUsage">17dp</item>
+        <item name="fontFamily">@font/suit_bold</item>
+    </style>
+
+    <!-- Display3 -->
+    <style name="Typography.Display3">
+        <item name="android:textSize" tools:ignore="SpUsage">10dp</item>
+        <item name="fontFamily">@font/suit_semi_bold</item>
+    </style>
+
+    <!-- Display4 -->
+    <style name="Typography.Display4">
+        <item name="android:textSize" tools:ignore="SpUsage">11dp</item>
+        <item name="fontFamily">@font/suit_bold</item>
+    </style>
+
     <!-- Calendar -->
     <style name="Typography.Calendar">
         <item name="fontFamily">@font/suit_semi_bold</item>
diff --git a/presentation/mate/src/main/java/com/depromeet/threedays/mate/nomate/NoMateFragment.kt b/presentation/mate/src/main/java/com/depromeet/threedays/mate/nomate/NoMateFragment.kt
new file mode 100644
index 00000000..f8720460
--- /dev/null
+++ b/presentation/mate/src/main/java/com/depromeet/threedays/mate/nomate/NoMateFragment.kt
@@ -0,0 +1,7 @@
+package com.depromeet.threedays.mate.nomate
+
+import androidx.fragment.app.Fragment
+
+class NoMateFragment : Fragment() {
+
+}
diff --git a/presentation/mate/src/main/res/drawable/ic_polygon.xml b/presentation/mate/src/main/res/drawable/ic_polygon.xml
new file mode 100644
index 00000000..9dccaae6
--- /dev/null
+++ b/presentation/mate/src/main/res/drawable/ic_polygon.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="22dp"
+    android:viewportWidth="24"
+    android:viewportHeight="22">
+  <path
+      android:pathData="M14.591,19.558C13.434,21.542 10.566,21.542 9.409,19.558L0.632,4.512C-0.535,2.512 0.908,0 3.223,0L20.777,0C23.092,0 24.535,2.512 23.368,4.512L14.591,19.558Z"
+      android:fillColor="#ffffff"/>
+</vector>
diff --git a/presentation/mate/src/main/res/layout/fragment_mate.xml b/presentation/mate/src/main/res/layout/fragment_mate.xml
index fad1d90b..72340683 100644
--- a/presentation/mate/src/main/res/layout/fragment_mate.xml
+++ b/presentation/mate/src/main/res/layout/fragment_mate.xml
@@ -10,6 +10,7 @@
     <androidx.coordinatorlayout.widget.CoordinatorLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
+        android:background="@color/gray_100"
         tools:context=".HistoryFragment">
 
         <androidx.constraintlayout.widget.ConstraintLayout
@@ -31,220 +32,240 @@
                 app:layout_constraintGuide_end="20dp" />
 
             <androidx.constraintlayout.widget.Guideline
-                android:id="@+id/gl_top_30_percent"
+                android:id="@+id/gl_bottom_of_toolbar"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:orientation="horizontal"
-                app:layout_constraintGuide_percent="0.3" />
+                app:layout_constraintGuide_begin="73dp" />
+
+            <androidx.constraintlayout.widget.Guideline
+                android:id="@+id/gl_mock_bottom_sheet"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:orientation="horizontal"
+                app:layout_constraintGuide_end="108dp" />
 
             <androidx.constraintlayout.widget.Group
                 android:id="@+id/group_has_habit"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:visibility="gone"
-                app:constraint_referenced_ids="iv_delete, iv_share, cl_habit, iv_tooltip, cl_tooltip, tv_text, tv_start_date" />
+                app:constraint_referenced_ids="tv_speech_bubble, iv_polygon, tv_level, tv_mate_nickname, tv_start_date" />
 
             <androidx.constraintlayout.widget.Group
-                android:id="@+id/group_no_habit"
+                android:id="@+id/group_speech_bubble"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                app:constraint_referenced_ids="tv_create_mate_guide, btn_create_mate" />
+                app:constraint_referenced_ids="tv_speech_bubble, iv_polygon" />
+
+            <androidx.constraintlayout.widget.Group
+                android:id="@+id/group_achieve_max_level"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:visibility="gone"
+                app:constraint_referenced_ids="tv_achieve_max_level, btn_save_mate" />
 
             <TextView
                 android:id="@+id/tv_mate"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="24dp"
+                android:text="@string/mate"
                 android:textAppearance="@style/Typography.Heading"
                 android:textColor="@color/gray_800"
-                android:text="@string/mate"
-                app:layout_constraintTop_toTopOf="parent"
-                app:layout_constraintStart_toStartOf="@id/gl_begin" />
-
-            <ImageView
-                android:id="@+id/iv_delete"
-                android:layout_width="24dp"
-                android:layout_height="24dp"
-                android:src="@drawable/ic_delete"
-                app:layout_constraintTop_toTopOf="@id/tv_mate"
-                app:layout_constraintBottom_toBottomOf="@+id/tv_mate"
-                app:layout_constraintEnd_toEndOf="@id/gl_end"/>
-
-            <ImageView
-                android:id="@+id/iv_share"
-                android:layout_width="24dp"
-                android:layout_height="24dp"
-                android:layout_marginEnd="20dp"
-                android:src="@drawable/ic_share"
-                app:layout_constraintTop_toTopOf="@id/tv_mate"
-                app:layout_constraintBottom_toBottomOf="@+id/tv_mate"
-                app:layout_constraintEnd_toStartOf="@+id/iv_delete"/>
-
-            <androidx.constraintlayout.widget.ConstraintLayout
-                android:id="@+id/cl_habit"
-                android:layout_width="0dp"
-                android:layout_height="45dp"
-                android:layout_marginTop="36dp"
-                android:background="@drawable/bg_rect_white_r10"
-                app:layout_constraintTop_toBottomOf="@+id/iv_delete"
                 app:layout_constraintStart_toStartOf="@id/gl_begin"
-                app:layout_constraintEnd_toEndOf="@id/gl_end">
-
-                <TextView
-                    android:id="@+id/tv_habit_emoji"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_marginStart="20dp"
-                    android:textAppearance="@style/Typography.Body1"
-                    android:textColor="@color/gray_700"
-                    android:text="@string/medicine"
-                    app:layout_constraintTop_toTopOf="parent"
-                    app:layout_constraintBottom_toBottomOf="parent"
-                    app:layout_constraintStart_toStartOf="parent"/>
-
-                <TextView
-                    android:id="@+id/tv_habit_title"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_marginStart="8dp"
-                    android:textAppearance="@style/Typography.Body1"
-                    android:textColor="@color/gray_800"
-                    android:text="@string/habit_sample_title"
-                    app:layout_constraintTop_toTopOf="@+id/tv_habit_emoji"
-                    app:layout_constraintBottom_toBottomOf="@+id/tv_habit_emoji"
-                    app:layout_constraintStart_toEndOf="@+id/tv_habit_emoji" />
-
-            </androidx.constraintlayout.widget.ConstraintLayout>
+                app:layout_constraintTop_toTopOf="parent" />
 
             <ImageView
                 android:id="@+id/iv_tooltip"
                 android:layout_width="24dp"
                 android:layout_height="24dp"
+                android:layout_marginStart="4dp"
                 android:src="@drawable/ic_tooltip"
-                android:layout_marginTop="11dp"
-                android:layout_marginBottom="10dp"
-                android:layout_marginEnd="14dp"
-                app:layout_constraintTop_toTopOf="@id/cl_habit"
-                app:layout_constraintBottom_toBottomOf="@id/cl_habit"
-                app:layout_constraintEnd_toEndOf="@id/cl_habit"/>
+                app:layout_constraintBottom_toBottomOf="@id/tv_mate"
+                app:layout_constraintStart_toEndOf="@id/tv_mate"
+                app:layout_constraintTop_toTopOf="@id/tv_mate" />
 
             <androidx.constraintlayout.widget.ConstraintLayout
                 android:id="@+id/cl_tooltip"
                 android:layout_width="250dp"
                 android:layout_height="wrap_content"
+                android:layout_marginTop="8dp"
+                android:background="@drawable/bg_rect_white_r10"
+                android:elevation="2dp"
                 android:paddingHorizontal="20dp"
                 android:paddingVertical="16dp"
-                android:background="@drawable/bg_rect_white_r10"
-                android:elevation="4dp"
                 android:visibility="gone"
-                app:layout_constraintTop_toBottomOf="@+id/cl_habit"
-                app:layout_constraintEnd_toEndOf="@id/gl_end">
+                app:layout_constraintStart_toStartOf="@id/gl_begin"
+                app:layout_constraintTop_toBottomOf="@+id/tv_mate">
 
                 <TextView
                     android:id="@+id/tv_tooltip_title"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_marginEnd="14dp"
-                    android:textAppearance="@style/Typography.Paragraph3.13dp"
+                    android:elevation="8dp"
                     android:text="@string/clap_guide_title"
+                    android:textAppearance="@style/Typography.SubTitle"
                     android:textColor="@color/gray_800"
-                    android:elevation="8dp"
                     app:layout_constraintStart_toStartOf="parent"
-                    app:layout_constraintTop_toTopOf="parent"/>
+                    app:layout_constraintTop_toTopOf="parent" />
 
                 <TextView
                     android:id="@+id/tv_tooltip_content"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_marginTop="12dp"
-                    android:textAppearance="@style/Typography.Paragraph3.13dp"
-                    android:text="@string/clap_guide_content"
-                    android:textColor="@color/gray_600"
                     android:elevation="8dp"
                     android:minLines="3"
-                    app:layout_constraintTop_toBottomOf="@id/tv_tooltip_title"
-                    app:layout_constraintStart_toStartOf="parent"/>
+                    android:text="@string/clap_guide_content"
+                    android:textAppearance="@style/Typography.Paragraph3.13dp"
+                    android:textColor="@color/gray_600"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toBottomOf="@id/tv_tooltip_title" />
             </androidx.constraintlayout.widget.ConstraintLayout>
 
-            <!-- 나중에 폰트 display로 변경 필요 -->
+            <ImageView
+                android:id="@+id/iv_delete"
+                android:layout_width="24dp"
+                android:layout_height="24dp"
+                android:src="@drawable/ic_delete"
+                app:layout_constraintBottom_toBottomOf="@+id/tv_mate"
+                app:layout_constraintEnd_toEndOf="@id/gl_end"
+                app:layout_constraintTop_toTopOf="@id/tv_mate" />
+
+            <ImageView
+                android:id="@+id/iv_share"
+                android:layout_width="24dp"
+                android:layout_height="24dp"
+                android:layout_marginEnd="20dp"
+                android:src="@drawable/ic_share"
+                app:layout_constraintBottom_toBottomOf="@+id/tv_mate"
+                app:layout_constraintEnd_toStartOf="@+id/iv_delete"
+                app:layout_constraintTop_toTopOf="@id/tv_mate" />
+
             <TextView
-                android:id="@+id/tv_text"
-                android:layout_width="200dp"
+                android:id="@+id/tv_achieve_max_level"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="10dp"
+                android:text="@string/achieve_max_level"
+                android:textAppearance="@style/Typography.Display2"
+                android:textColor="@color/gray_600"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintBottom_toTopOf="@+id/btn_save_mate" />
+
+            <androidx.appcompat.widget.AppCompatButton
+                android:id="@+id/btn_save_mate"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="36dp"
+                android:background="@drawable/bg_rect_gray800_r30"
+                android:gravity="center"
+                android:paddingHorizontal="44dp"
+                android:paddingVertical="14dp"
+                android:text="@string/save_mate"
+                android:textAppearance="@style/Typography.Button1"
+                android:textColor="@color/white"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintBottom_toTopOf="@+id/tv_illustration"/>
+
+            <TextView
+                android:id="@+id/tv_speech_bubble"
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="45dp"
-                android:textAppearance="@style/Typography.Body1"
-                android:textColor="@color/gray_800"
-                android:textSize="17sp"
-                android:text="Text"
+                android:background="@drawable/bg_rect_white_r15"
                 android:gravity="center"
                 android:maxLines="2"
-                app:layout_constraintStart_toStartOf="@id/gl_begin"
-                app:layout_constraintEnd_toEndOf="@+id/gl_end"
-                app:layout_constraintTop_toBottomOf="@+id/cl_habit" />
+                android:paddingHorizontal="28dp"
+                android:paddingVertical="20dp"
+                android:text="안녕하세요 오늘은 어떤 하루를\n보내고 있으신가요오오오?"
+                android:textAppearance="@style/Typography.Display2"
+                android:textColor="@color/gray_600"
+                android:textSize="17sp"
+                app:layout_constraintBottom_toTopOf="@+id/iv_polygon"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHorizontal_bias="0.5"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/gl_bottom_of_toolbar"
+                app:layout_constraintVertical_chainStyle="packed" />
+
+            <ImageView
+                android:id="@+id/iv_polygon"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:src="@drawable/ic_polygon"
+                android:translationY="-8dp"
+                app:layout_constraintBottom_toTopOf="@+id/tv_illustration"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHorizontal_bias="0.5"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/tv_speech_bubble" />
 
             <TextView
                 android:id="@+id/tv_illustration"
-                android:layout_width="240dp"
-                android:layout_height="240dp"
-                android:layout_marginBottom="250dp"
+                android:layout_width="180dp"
+                android:layout_height="180dp"
                 android:background="@color/gray_200"
                 android:gravity="center"
                 android:text="일러스트로 대체될 영역"
-                app:layout_constraintTop_toBottomOf="@+id/gl_top_30_percent"
+                app:layout_constraintBottom_toTopOf="@+id/gl_mock_bottom_sheet"
                 app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintStart_toStartOf="parent"/>
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/gl_bottom_of_toolbar" />
 
             <TextView
-                android:id="@+id/tv_start_date"
+                android:id="@+id/tv_level"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginTop="12dp"
-                android:textAppearance="@style/Typography.Body4.Medium"
-                android:text="@string/start_date_with_mate"
-                android:textColor="@color/gray_450"
-                app:layout_constraintEnd_toEndOf="@id/gl_end"
-                app:layout_constraintStart_toStartOf="@id/gl_begin"
+                android:layout_marginTop="30dp"
+                android:background="@drawable/bg_rect_green50_r10"
+                android:fontFamily="@font/suit_bold"
+                android:paddingHorizontal="8dp"
+                android:paddingVertical="3dp"
+                android:text="Lv. 2"
+                android:textColor="@color/white"
+                android:textSize="11dp"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toBottomOf="@+id/tv_illustration" />
 
             <TextView
-                android:id="@+id/tv_create_mate_guide"
+                android:id="@+id/tv_mate_nickname"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginTop="24dp"
-                android:textAppearance="@style/Typography.Paragraph3.13dp"
-                android:text="@string/create_mate_guide"
-                android:textColor="@color/gray_500"
-                app:layout_constraintEnd_toEndOf="@id/gl_end"
-                app:layout_constraintStart_toStartOf="@id/gl_begin"
-                app:layout_constraintTop_toBottomOf="@+id/tv_illustration" />
+                android:layout_marginTop="10dp"
+                android:text="@string/mate_nickname_sample"
+                android:textAppearance="@style/Typography.Title1"
+                android:textColor="@color/gray_800"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/tv_level" />
 
-            <androidx.appcompat.widget.AppCompatButton
-                android:id="@+id/btn_create_mate"
+            <TextView
+                android:id="@+id/tv_start_date"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginTop="24dp"
-                android:paddingHorizontal="44dp"
-                android:paddingVertical="14dp"
-                android:textAppearance="@style/Typography.Button1"
-                android:textColor="@color/white"
-                android:text="@string/create_mate"
-                android:gravity="center"
-                android:background="@drawable/bg_rect_gray800_r30"
-                app:layout_constraintTop_toBottomOf="@+id/tv_create_mate_guide"
+                android:layout_marginTop="6dp"
+                android:text="@string/start_date_with_mate"
+                android:textAppearance="@style/Typography.Body4.Medium"
+                android:textColor="@color/gray_450"
+                app:layout_constraintEnd_toEndOf="@id/gl_end"
                 app:layout_constraintStart_toStartOf="@id/gl_begin"
-                app:layout_constraintEnd_toEndOf="@id/gl_end" />
+                app:layout_constraintTop_toBottomOf="@+id/tv_mate_nickname" />
         </androidx.constraintlayout.widget.ConstraintLayout>
 
         <!-- Persistent Bottom Sheet -->
         <androidx.constraintlayout.widget.ConstraintLayout
             android:id="@+id/cl_bottom_sheet"
             android:layout_width="match_parent"
-            android:layout_height="360dp"
+            android:layout_height="352dp"
             android:background="@drawable/bg_rect_white_top_r15"
-            android:visibility="gone"
-            app:behavior_hideable="false"
-            app:behavior_peekHeight="120dp"
             app:behavior_halfExpandedRatio="0.5"
+            app:behavior_hideable="false"
+            app:behavior_peekHeight="108dp"
             app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
 
             <ImageView
@@ -258,48 +279,42 @@
                 app:layout_constraintTop_toTopOf="parent" />
 
             <TextView
-                android:id="@+id/tv_level"
+                android:id="@+id/tv_habit_emoji"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:background="@drawable/bg_rect_blue10_r10"
-                android:fontFamily="@font/suit_bold"
-                android:paddingHorizontal="8dp"
-                android:paddingVertical="3dp"
-                android:text="Lv. 2"
-                android:textColor="@color/blue_50"
-                android:textSize="11dp"
-                app:layout_constraintBottom_toBottomOf="@id/tv_mate_nickname"
-                app:layout_constraintEnd_toStartOf="@+id/tv_mate_nickname"
-                app:layout_constraintHorizontal_bias="0.5"
+                android:text="@string/medicine"
+                android:textAppearance="@style/Typography.Body1"
+                android:textColor="@color/gray_700"
+                app:layout_constraintEnd_toStartOf="@+id/tv_habit_title"
                 app:layout_constraintHorizontal_chainStyle="packed"
                 app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toTopOf="@id/tv_mate_nickname" />
+                app:layout_constraintTop_toTopOf="@+id/tv_habit_title" />
 
             <TextView
-                android:id="@+id/tv_mate_nickname"
+                android:id="@+id/tv_habit_title"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginTop="12dp"
-                android:text="@string/mate_nickname_sample"
-                android:textAppearance="@style/Typography.Title1"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="10dp"
+                android:text="@string/habit_sample_title"
+                android:textAppearance="@style/Typography.Body1"
                 android:textColor="@color/gray_800"
-                android:layout_marginStart="9dp"
+                app:layout_constraintBottom_toBottomOf="@+id/tv_habit_emoji"
                 app:layout_constraintEnd_toEndOf="parent"
-                app:layout_constraintHorizontal_bias="0.5"
-                app:layout_constraintStart_toEndOf="@+id/tv_level"
+                app:layout_constraintStart_toEndOf="@+id/tv_habit_emoji"
                 app:layout_constraintTop_toBottomOf="@id/iv_arrow_up" />
 
             <TextView
                 android:id="@+id/tv_next_level_guide"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginTop="12dp"
-                android:textAppearance="@style/Typography.Body4.Medium"
+                android:layout_marginTop="6dp"
                 android:text="@string/next_level_guide"
+                android:textAppearance="@style/Typography.Body4.Medium"
                 android:textColor="@color/gray_500"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintTop_toBottomOf="@+id/tv_mate_nickname" />
+                app:layout_constraintTop_toBottomOf="@+id/tv_habit_title" />
         </androidx.constraintlayout.widget.ConstraintLayout>
     </androidx.coordinatorlayout.widget.CoordinatorLayout>
 </layout>
diff --git a/presentation/mate/src/main/res/layout/fragment_no_mate.xml b/presentation/mate/src/main/res/layout/fragment_no_mate.xml
new file mode 100644
index 00000000..66f84e36
--- /dev/null
+++ b/presentation/mate/src/main/res/layout/fragment_no_mate.xml
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    tools:context=".nomate.NoMateFragment">
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/gl_top_of_30_percent"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="horizontal"
+        app:layout_constraintGuide_percent="0.3"/>
+
+    <TextView
+        android:id="@+id/tv_illustration"
+        android:layout_width="180dp"
+        android:layout_height="180dp"
+        android:background="@color/gray_200"
+        android:gravity="center"
+        android:text="일러스트로 대체될 영역"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="@+id/gl_top_of_30_percent" />
+
+    <TextView
+        android:id="@+id/tv_create_mate_guide"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="24dp"
+        android:text="@string/create_mate_guide"
+        android:textAppearance="@style/Typography.Paragraph3.13dp"
+        android:textColor="@color/gray_500"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/tv_illustration" />
+
+    <androidx.appcompat.widget.AppCompatButton
+        android:id="@+id/btn_create_mate"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="24dp"
+        android:background="@drawable/bg_rect_gray800_r30"
+        android:gravity="center"
+        android:paddingHorizontal="44dp"
+        android:paddingVertical="14dp"
+        android:text="@string/create_mate"
+        android:textAppearance="@style/Typography.Button1"
+        android:textColor="@color/white"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/tv_create_mate_guide" />
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/presentation/mate/src/main/res/values/strings.xml b/presentation/mate/src/main/res/values/strings.xml
index 6aa6db1d..fc5d37ed 100644
--- a/presentation/mate/src/main/res/values/strings.xml
+++ b/presentation/mate/src/main/res/values/strings.xml
@@ -4,12 +4,14 @@
     <string name="start_date_with_mate">2022.05.11부터 함께했어요</string>
     <string name="level">Lv. </string>
     <string name="level_sample">Lv. 2</string>
-    <string name="mate_nickname_sample">수줍은 인구기(별명)</string>
+    <string name="mate_nickname_sample">별명</string>
     <string name="next_level_guide">다음 레벨까지 박수[n]개를 더 모아보세요!</string>
     <string name="clap_guide_title">습관 박수와 짝꿍의 박수가 달라요!</string>
     <string name="clap_guide_content">레벨업을 위한 박수는 짝꿍 생성 시점부터 카운트돼요. 때문에 습관을 생성한 시점부터 모은 박수와 차이날 수 있어요!</string>
     <string name="create_mate_guide">혼자서는 힘드셨죠?\n짝꿍이 도와드릴게요.</string>
     <string name="create_mate">짝꿍과 함께하기</string>
+    <string name="achieve_max_level">최종레벨 달성!</string>
+    <string name="save_mate">함께한 짝꿍에 저장하기</string>
 
     <!-- step1 -->
     <string name="connect_habit_guide">어떤 습관을 연결하시겠어요?</string>
@@ -47,7 +49,4 @@
     <string name="save_as_image">이미지로 저장</string>
     <string name="share_story">스토리 공유</string>
     <string name="share_page_guide">\@ZZAKSIM 을 태그해주시면 리포스팅 해드려요</string>
-
-    <!-- 최종 레벨 달성 팝업 -->
-    <string name="achieve_max_level">최종 레벨 달성</string>
 </resources>