diff --git a/app/src/main/res/drawable/bg_creator_channel_donation_ranking_all.xml b/app/src/main/res/drawable/bg_creator_channel_donation_ranking_all.xml
new file mode 100644
index 00000000..dc0ab517
--- /dev/null
+++ b/app/src/main/res/drawable/bg_creator_channel_donation_ranking_all.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@android:color/transparent" />
+    <stroke
+        android:width="1dp"
+        android:color="@color/color_4dffffff" />
+    <corners android:radius="100dp" />
+</shape>
diff --git a/app/src/main/res/layout/fragment_creator_channel_donation.xml b/app/src/main/res/layout/fragment_creator_channel_donation.xml
new file mode 100644
index 00000000..e6371a89
--- /dev/null
+++ b/app/src/main/res/layout/fragment_creator_channel_donation.xml
@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:background="@color/black">
+
+    <LinearLayout
+        android:id="@+id/layout_creator_channel_donation_count_bar"
+        android:layout_width="0dp"
+        android:layout_height="52dp"
+        android:gravity="center_vertical"
+        android:orientation="horizontal"
+        android:paddingHorizontal="@dimen/spacing_14"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <TextView
+            android:id="@+id/tv_creator_channel_donation_total_label"
+            style="@style/Typography.Body2"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:includeFontPadding="false"
+            android:text="@string/creator_channel_donation_all_label"
+            android:textColor="@color/white" />
+
+        <TextView
+            android:id="@+id/tv_creator_channel_donation_total_count"
+            style="@style/Typography.Body2"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/spacing_4"
+            android:includeFontPadding="false"
+            android:textColor="@color/gray_500"
+            tools:text="23" />
+    </LinearLayout>
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/rv_creator_channel_donation"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:clipToPadding="false"
+        android:nestedScrollingEnabled="false"
+        android:paddingBottom="@dimen/spacing_32"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/layout_creator_channel_donation_count_bar"
+        tools:itemCount="3"
+        tools:listitem="@layout/item_creator_channel_donation" />
+
+    <LinearLayout
+        android:id="@+id/layout_creator_channel_donation_empty"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:gravity="center"
+        android:orientation="vertical"
+        android:paddingHorizontal="@dimen/spacing_14"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:visibility="visible">
+
+        <TextView
+            android:id="@+id/tv_creator_channel_donation_empty_message"
+            style="@style/Typography.Body3"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:lineSpacingMultiplier="1.45"
+            android:text="@string/creator_channel_donation_empty_title"
+            android:textColor="@color/gray_500" />
+    </LinearLayout>
+
+    <TextView
+        android:id="@+id/tv_creator_channel_donation_error_message"
+        style="@style/Typography.Body3"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:gravity="center"
+        android:text="@string/creator_channel_donation_error_message"
+        android:textColor="@color/gray_500"
+        android:visibility="gone"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id="@+id/btn_creator_channel_donation_retry"
+        style="@style/Typography.Body5"
+        android:layout_width="wrap_content"
+        android:layout_height="40dp"
+        android:layout_marginTop="@dimen/spacing_14"
+        android:background="@drawable/bg_creator_channel_live_retry"
+        android:gravity="center"
+        android:minWidth="96dp"
+        android:paddingHorizontal="@dimen/spacing_20"
+        android:text="@string/creator_channel_donation_retry"
+        android:textColor="@color/white"
+        android:visibility="gone"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/tv_creator_channel_donation_error_message" />
+
+    <ImageView
+        android:id="@+id/btn_creator_channel_donation_write"
+        android:layout_width="58dp"
+        android:layout_height="58dp"
+        android:layout_marginEnd="@dimen/spacing_14"
+        android:layout_marginBottom="@dimen/spacing_14"
+        android:background="@drawable/bg_creator_channel_fantalk_write_button"
+        android:contentDescription="@string/creator_channel_donation_action"
+        android:padding="@dimen/spacing_16"
+        android:src="@drawable/ic_new_donation"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent" />
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/item_creator_channel_donation.xml b/app/src/main/res/layout/item_creator_channel_donation.xml
new file mode 100644
index 00000000..428c154b
--- /dev/null
+++ b/app/src/main/res/layout/item_creator_channel_donation.xml
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="utf-8"?>
+<kr.co.vividnext.sodalive.v2.creator.channel.ui.CreatorChannelDonationCardView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_marginHorizontal="@dimen/spacing_14"
+    android:layout_marginTop="@dimen/spacing_8"
+    android:background="@drawable/bg_creator_channel_donation_card"
+    android:orientation="vertical">
+
+    <FrameLayout
+        android:id="@+id/layout_creator_channel_donation_header"
+        android:layout_width="match_parent"
+        android:layout_height="70dp"
+        android:padding="@dimen/spacing_14"
+        tools:background="#73FF01">
+
+        <ImageView
+            android:id="@+id/iv_creator_channel_donation_profile"
+            android:layout_width="42dp"
+            android:layout_height="42dp"
+            android:contentDescription="@null"
+            android:scaleType="centerCrop"
+            android:src="@drawable/ic_placeholder_profile"
+            tools:src="@drawable/ic_placeholder_profile" />
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_vertical"
+            android:layout_marginStart="50dp"
+            android:layout_marginEnd="92dp"
+            android:orientation="vertical">
+
+            <TextView
+                android:id="@+id/tv_creator_channel_donation_nickname"
+                style="@style/Typography.Body5"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:ellipsize="end"
+                android:maxLines="1"
+                android:textColor="@color/black"
+                tools:text="팬 이름" />
+
+            <TextView
+                android:id="@+id/tv_creator_channel_donation_created_at"
+                style="@style/Typography.Body6"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="2dp"
+                android:ellipsize="end"
+                android:maxLines="1"
+                android:textColor="@color/gray_700"
+                tools:text="2분 전" />
+        </LinearLayout>
+
+        <LinearLayout
+            android:id="@+id/layout_creator_channel_donation_can_badge"
+            android:layout_width="wrap_content"
+            android:layout_height="28dp"
+            android:layout_gravity="center_vertical|end"
+            android:background="@drawable/bg_creator_channel_donation_can_capsule"
+            android:gravity="center"
+            android:orientation="horizontal"
+            android:paddingHorizontal="@dimen/spacing_6">
+
+            <ImageView
+                android:layout_width="18dp"
+                android:layout_height="18dp"
+                android:contentDescription="@null"
+                android:src="@drawable/ic_bar_cash" />
+
+            <TextView
+                android:id="@+id/tv_creator_channel_donation_can"
+                style="@style/Typography.Body6"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="2dp"
+                android:textColor="@color/white"
+                tools:text="20캔" />
+        </LinearLayout>
+    </FrameLayout>
+
+    <TextView
+        android:id="@+id/tv_creator_channel_donation_message"
+        style="@style/Typography.Body3"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:paddingHorizontal="@dimen/spacing_14"
+        android:paddingTop="@dimen/spacing_14"
+        android:paddingBottom="@dimen/spacing_14"
+        android:textColor="@color/white"
+        tools:text="팬이 후원한 글이 보이는 부분 팬이 후원한 글이 보이는 부분" />
+</kr.co.vividnext.sodalive.v2.creator.channel.ui.CreatorChannelDonationCardView>
diff --git a/app/src/main/res/layout/item_creator_channel_donation_ranking.xml b/app/src/main/res/layout/item_creator_channel_donation_ranking.xml
new file mode 100644
index 00000000..94037ff2
--- /dev/null
+++ b/app/src/main/res/layout/item_creator_channel_donation_ranking.xml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_marginHorizontal="@dimen/spacing_14"
+    android:background="@drawable/bg_creator_channel_donation_card"
+    android:orientation="vertical"
+    android:padding="@dimen/spacing_14">
+
+    <TextView
+        android:id="@+id/tv_creator_channel_donation_ranking_title"
+        style="@style/Typography.Heading3"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:includeFontPadding="false"
+        android:text="@string/creator_channel_donation_ranking_title"
+        android:textColor="@color/white" />
+
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/rv_creator_channel_donation_ranking_members"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/spacing_14"
+        android:nestedScrollingEnabled="false"
+        android:overScrollMode="never"
+        tools:itemCount="8"
+        tools:listitem="@layout/item_creator_channel_donation_ranking_member" />
+
+    <TextView
+        android:id="@+id/btn_creator_channel_donation_ranking_all"
+        style="@style/Typography.Body5"
+        android:layout_width="match_parent"
+        android:layout_height="36dp"
+        android:layout_marginTop="@dimen/spacing_14"
+        android:background="@drawable/bg_creator_channel_donation_ranking_all"
+        android:gravity="center"
+        android:text="@string/creator_channel_donation_ranking_all"
+        android:textColor="@color/white" />
+</LinearLayout>
diff --git a/app/src/main/res/layout/item_creator_channel_donation_ranking_member.xml b/app/src/main/res/layout/item_creator_channel_donation_ranking_member.xml
new file mode 100644
index 00000000..082e4e70
--- /dev/null
+++ b/app/src/main/res/layout/item_creator_channel_donation_ranking_member.xml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:gravity="center_horizontal"
+    android:orientation="vertical"
+    android:paddingBottom="@dimen/spacing_14">
+
+    <FrameLayout
+        android:layout_width="75dp"
+        android:layout_height="75dp">
+
+        <ImageView
+            android:id="@+id/iv_creator_channel_donation_ranking_profile"
+            android:layout_width="75dp"
+            android:layout_height="75dp"
+            android:contentDescription="@null"
+            android:scaleType="centerCrop"
+            android:src="@drawable/ic_placeholder_profile"
+            tools:src="@drawable/ic_placeholder_profile" />
+
+        <TextView
+            android:id="@+id/tv_creator_channel_donation_ranking_rank"
+            style="@style/Typography.Heading1"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_gravity="bottom"
+            android:gravity="center"
+            android:includeFontPadding="false"
+            android:textColor="@color/gray_50"
+            android:textSize="28sp"
+            tools:text="1" />
+    </FrameLayout>
+
+    <TextView
+        android:id="@+id/tv_creator_channel_donation_ranking_nickname"
+        style="@style/Typography.Body5"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/spacing_8"
+        android:ellipsize="end"
+        android:gravity="center"
+        android:includeFontPadding="false"
+        android:maxLines="1"
+        android:textColor="@color/white"
+        tools:text="팬 이름" />
+</LinearLayout>