diff --git a/app/src/main/java/kr/co/vividnext/sodalive/chat/ChatFragment.kt b/app/src/main/java/kr/co/vividnext/sodalive/chat/ChatFragment.kt
index d6436e23..5bd72fe3 100644
--- a/app/src/main/java/kr/co/vividnext/sodalive/chat/ChatFragment.kt
+++ b/app/src/main/java/kr/co/vividnext/sodalive/chat/ChatFragment.kt
@@ -1,18 +1,96 @@
 package kr.co.vividnext.sodalive.chat
 
+import android.content.Intent
 import android.os.Bundle
 import android.view.View
+import com.google.android.material.tabs.TabLayout
+import kr.co.vividnext.sodalive.R
 import kr.co.vividnext.sodalive.base.BaseFragment
+import kr.co.vividnext.sodalive.chat.character.CharacterTabFragment
+import kr.co.vividnext.sodalive.chat.talk.TalkTabFragment
+import kr.co.vividnext.sodalive.common.SharedPreferenceManager
 import kr.co.vividnext.sodalive.databinding.FragmentChatBinding
+import kr.co.vividnext.sodalive.mypage.can.charge.CanChargeActivity
+import kr.co.vividnext.sodalive.search.SearchActivity
 
 class ChatFragment : BaseFragment<FragmentChatBinding>(FragmentChatBinding::inflate) {
 
+    private var currentTab = 0
+
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
-        initView()
+        setupToolbar()
+        setupTabs()
     }
 
-    private fun initView() {
-        // 채팅 화면 초기화 로직
+    private fun setupToolbar() {
+        if (SharedPreferenceManager.token.isNotBlank()) {
+            binding.llShortIcon.visibility = View.VISIBLE
+
+            binding.ivSearch.setOnClickListener {
+                startActivity(
+                    Intent(
+                        requireContext(),
+                        SearchActivity::class.java
+                    )
+                )
+            }
+
+            binding.ivCharge.setOnClickListener {
+                startActivity(
+                    Intent(
+                        requireContext(),
+                        CanChargeActivity::class.java
+                    )
+                )
+            }
+        } else {
+            binding.llShortIcon.visibility = View.GONE
+        }
+    }
+
+    private fun setupTabs() {
+        // 탭 추가
+        binding.tabLayout.addTab(binding.tabLayout.newTab().setText("캐릭터"))
+        binding.tabLayout.addTab(binding.tabLayout.newTab().setText("톡"))
+
+        // 탭 선택 리스너 설정
+        binding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
+            override fun onTabSelected(tab: TabLayout.Tab) {
+                currentTab = tab.position
+                showTabContent(currentTab)
+            }
+
+            override fun onTabUnselected(tab: TabLayout.Tab) {
+                // 필요한 경우 구현
+            }
+
+            override fun onTabReselected(tab: TabLayout.Tab) {
+                // 필요한 경우 구현
+            }
+        })
+
+        // 초기 탭 선택
+        showTabContent(currentTab)
+    }
+
+    private fun showTabContent(position: Int) {
+        val fragmentManager = childFragmentManager
+        val fragmentTransaction = fragmentManager.beginTransaction()
+
+        // 기존 프래그먼트 제거
+        fragmentManager.fragments.forEach {
+            fragmentTransaction.remove(it)
+        }
+
+        // 선택된 탭에 따라 프래그먼트 표시
+        val fragment = when (position) {
+            0 -> CharacterTabFragment()
+            1 -> TalkTabFragment()
+            else -> CharacterTabFragment()
+        }
+
+        fragmentTransaction.add(R.id.fl_container, fragment)
+        fragmentTransaction.commit()
     }
 }
diff --git a/app/src/main/java/kr/co/vividnext/sodalive/chat/character/CharacterTabFragment.kt b/app/src/main/java/kr/co/vividnext/sodalive/chat/character/CharacterTabFragment.kt
new file mode 100644
index 00000000..afd279bc
--- /dev/null
+++ b/app/src/main/java/kr/co/vividnext/sodalive/chat/character/CharacterTabFragment.kt
@@ -0,0 +1,16 @@
+package kr.co.vividnext.sodalive.chat.character
+
+import android.os.Bundle
+import android.view.View
+import kr.co.vividnext.sodalive.base.BaseFragment
+import kr.co.vividnext.sodalive.databinding.FragmentCharacterTabBinding
+
+// 캐릭터 탭 프래그먼트
+class CharacterTabFragment : BaseFragment<FragmentCharacterTabBinding>(
+    FragmentCharacterTabBinding::inflate
+) {
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        // 캐릭터 탭 초기화 로직
+    }
+}
diff --git a/app/src/main/java/kr/co/vividnext/sodalive/chat/talk/TalkTabFragment.kt b/app/src/main/java/kr/co/vividnext/sodalive/chat/talk/TalkTabFragment.kt
new file mode 100644
index 00000000..b65f5f0e
--- /dev/null
+++ b/app/src/main/java/kr/co/vividnext/sodalive/chat/talk/TalkTabFragment.kt
@@ -0,0 +1,15 @@
+package kr.co.vividnext.sodalive.chat.talk
+
+import android.os.Bundle
+import android.view.View
+import kr.co.vividnext.sodalive.base.BaseFragment
+import kr.co.vividnext.sodalive.databinding.FragmentTalkTabBinding
+
+class TalkTabFragment : BaseFragment<FragmentTalkTabBinding>(
+    FragmentTalkTabBinding::inflate
+) {
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        // 톡 탭 초기화 로직
+    }
+}
diff --git a/app/src/main/res/layout/fragment_character_tab.xml b/app/src/main/res/layout/fragment_character_tab.xml
new file mode 100644
index 00000000..81b23f62
--- /dev/null
+++ b/app/src/main/res/layout/fragment_character_tab.xml
@@ -0,0 +1,19 @@
+<?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"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/black">
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="캐릭터 탭"
+        android:textColor="@color/white"
+        android:textSize="20sp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/fragment_chat.xml b/app/src/main/res/layout/fragment_chat.xml
index ed064a1c..61b5e985 100644
--- a/app/src/main/res/layout/fragment_chat.xml
+++ b/app/src/main/res/layout/fragment_chat.xml
@@ -3,17 +3,67 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/black">
+    android:background="@color/color_131313">
 
-    <TextView
-        android:layout_width="wrap_content"
+    <RelativeLayout
+        android:id="@+id/main_toolbar"
+        android:layout_width="match_parent"
+        android:layout_height="?attr/actionBarSize"
+        android:paddingHorizontal="24dp"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <ImageView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_alignParentStart="true"
+            android:layout_centerVertical="true"
+            android:contentDescription="@null"
+            android:src="@drawable/img_text_logo" />
+
+        <LinearLayout
+            android:id="@+id/ll_short_icon"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_alignParentEnd="true"
+            android:layout_centerVertical="true"
+            android:orientation="horizontal"
+            android:visibility="gone">
+
+            <ImageView
+                android:id="@+id/iv_search"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:contentDescription="@null"
+                android:src="@drawable/ic_search_white" />
+
+            <ImageView
+                android:id="@+id/iv_charge"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="24dp"
+                android:contentDescription="@null"
+                android:src="@drawable/ic_can" />
+        </LinearLayout>
+    </RelativeLayout>
+
+    <com.google.android.material.tabs.TabLayout
+        android:id="@+id/tab_layout"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:text="채팅"
-        android:textColor="@color/white"
-        android:textSize="20sp"
+        android:background="@color/color_131313"
+        app:layout_constraintTop_toBottomOf="@id/main_toolbar"
+        app:tabIndicatorColor="@color/color_3bb9f1"
+        app:tabIndicatorFullWidth="true"
+        app:tabIndicatorHeight="4dp"
+        app:tabSelectedTextColor="@color/color_3bb9f1"
+        app:tabTextAppearance="@style/tabText"
+        app:tabTextColor="@color/color_b0bec5" />
+
+    <FrameLayout
+        android:id="@+id/fl_container"
+        android:layout_width="match_parent"
+        android:layout_height="0dp"
         app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toBottomOf="@id/tab_layout" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/layout/fragment_talk_tab.xml b/app/src/main/res/layout/fragment_talk_tab.xml
new file mode 100644
index 00000000..68bef76e
--- /dev/null
+++ b/app/src/main/res/layout/fragment_talk_tab.xml
@@ -0,0 +1,19 @@
+<?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"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@color/black">
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:text="톡 탭"
+        android:textColor="@color/white"
+        android:textSize="20sp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 14817e39..c5748ebb 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -132,4 +132,5 @@
     <color name="color_ec3aa6">#EC3AA6</color>
     <color name="color_7849bc">#7849BC</color>
     <color name="color_607d8b">#607D8B</color>
+    <color name="color_b0bec5">#B0BEC5</color>
 </resources>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index ae82149d..f81f6fbb 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -24,7 +24,8 @@
     </style>
 
     <style name="tabText" parent="@android:style/TextAppearance.Widget.TabWidget">
-        <item name="android:fontFamily">@font/gmarket_sans_medium</item>
+        <item name="android:fontFamily">@font/pretendard_bold</item>
+        <item name="android:textSize">18sp</item>
     </style>
 
     <style name="ContentMainTabText" parent="@android:style/TextAppearance.Widget.TabWidget">