diff --git a/lib/app/const/colors/app_colors.dart b/lib/app/const/colors/app_colors.dart
index 203044e..398a4d3 100644
--- a/lib/app/const/colors/app_colors.dart
+++ b/lib/app/const/colors/app_colors.dart
@@ -5,6 +5,7 @@ class AppColors {
   static const Color darkText = Color(0xFF172B4D);
   static const Color softGrayText = Color(0xFF6B778C);
   static const Color background = Color(0xFFFAFBFC);
+  static const Color background2 = Color(0xFFF9FAFB);
 
   static const Color borderLight = Color(0xFFE1E4E8);
   static const Color accentBlue = Color(0xFFD6E4FF);
diff --git a/lib/feature/history/view/history_view.dart b/lib/feature/history/view/history_view.dart
index cd41db1..8e45d24 100644
--- a/lib/feature/history/view/history_view.dart
+++ b/lib/feature/history/view/history_view.dart
@@ -62,62 +62,102 @@ class HistoryView extends GetView<HistoryController> {
   }
 
   Widget _buildHistoryCard(QuizHistory item) {
+    final scorePercentage = item.totalCorrect / item.totalQuestion;
+    final scoreColor = scorePercentage >= 0.7 ? AppColors.primaryBlue : AppColors.scorePoor;
+
     return GestureDetector(
       onTap: () => controller.goToDetailHistory(item.answerId),
       child: Container(
-        margin: const EdgeInsets.only(bottom: 16),
-        padding: const EdgeInsets.all(16),
+        margin: const EdgeInsets.only(bottom: 12),
+        padding: const EdgeInsets.all(14),
         decoration: BoxDecoration(
-          color: Colors.white,
-          borderRadius: BorderRadius.circular(16),
-          boxShadow: const [
+          color: AppColors.background,
+          borderRadius: BorderRadius.circular(12),
+          border: Border.all(color: AppColors.borderLight),
+          boxShadow: [
             BoxShadow(
-              color: Colors.black12,
-              blurRadius: 4,
-              offset: Offset(0, 2),
-            )
+              color: Colors.black.withValues(alpha: 0.03),
+              blurRadius: 8,
+              offset: const Offset(0, 2),
+            ),
           ],
         ),
         child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Container(
-              width: 48,
-              height: 48,
-              decoration: BoxDecoration(
-                color: Colors.blue.shade100,
-                shape: BoxShape.circle,
-              ),
-              child: const Icon(Icons.history, color: Colors.blue),
-            ),
+            _buildIconBox(scoreColor),
             const SizedBox(width: 12),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(item.title, style: AppTextStyles.statValue),
-                  const SizedBox(height: 4),
-                  Text(item.date, style: AppTextStyles.caption),
-                  const SizedBox(height: 8),
-                  Row(
-                    children: [
-                      const Icon(Icons.check_circle, size: 14, color: Colors.green),
-                      const SizedBox(width: 4),
-                      Text(
-                        tr('score_label', namedArgs: {'correct': item.totalCorrect.toString(), 'total': item.totalQuestion.toString()}),
-                        style: AppTextStyles.caption,
-                      ),
-                      const SizedBox(width: 16),
-                      const Icon(Icons.timer, size: 14, color: Colors.grey),
-                      const SizedBox(width: 4),
-                      Text(tr("duration_minutes", namedArgs: {"minute": "3"}), style: AppTextStyles.caption),
-                    ],
-                  ),
-                ],
-              ),
-            )
+            Expanded(child: _buildHistoryInfo(item, scorePercentage)),
           ],
         ),
       ),
     );
   }
+
+  Widget _buildIconBox(Color scoreColor) {
+    return Container(
+      width: 50,
+      height: 50,
+      decoration: BoxDecoration(
+        color: scoreColor,
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: const Icon(
+        Icons.assignment_turned_in,
+        color: Colors.white,
+        size: 28,
+      ),
+    );
+  }
+
+  Widget _buildHistoryInfo(QuizHistory item, double scorePercentage) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          item.title,
+          style: const TextStyle(
+            fontSize: 16,
+            fontWeight: FontWeight.bold,
+            color: AppColors.darkText,
+          ),
+          maxLines: 2,
+          overflow: TextOverflow.ellipsis,
+        ),
+        const SizedBox(height: 4),
+        Text(
+          'Completed on ${item.date}',
+          style: const TextStyle(
+            fontSize: 12,
+            color: AppColors.softGrayText,
+          ),
+        ),
+        const SizedBox(height: 8),
+        Row(
+          children: [
+            const Icon(Icons.check_circle_outline, size: 14, color: AppColors.softGrayText),
+            const SizedBox(width: 4),
+            Text(
+              '${item.totalCorrect}/${item.totalQuestion} Correct',
+              style: const TextStyle(fontSize: 12, color: AppColors.softGrayText),
+            ),
+            const SizedBox(width: 12),
+            const Icon(Icons.access_time, size: 14, color: AppColors.softGrayText),
+            const SizedBox(width: 4),
+            Text(
+              tr("duration_minutes", namedArgs: {"minute": "3"}),
+              style: const TextStyle(fontSize: 12, color: AppColors.softGrayText),
+            ),
+            const SizedBox(width: 12),
+            const Icon(Icons.percent, size: 14, color: AppColors.softGrayText),
+            const SizedBox(width: 4),
+            Text(
+              '${(scorePercentage * 100).toInt()}%',
+              style: const TextStyle(fontSize: 12, color: AppColors.softGrayText),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
 }
diff --git a/lib/feature/navigation/views/navbar_view.dart b/lib/feature/navigation/views/navbar_view.dart
index 2f0f781..7551ee5 100644
--- a/lib/feature/navigation/views/navbar_view.dart
+++ b/lib/feature/navigation/views/navbar_view.dart
@@ -1,6 +1,7 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:quiz_app/app/const/colors/app_colors.dart';
 import 'package:quiz_app/feature/history/view/history_view.dart';
 import 'package:quiz_app/feature/home/view/home_page.dart';
 import 'package:quiz_app/feature/library/view/library_view.dart';
@@ -14,6 +15,7 @@ class NavbarView extends GetView<NavigationController> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      backgroundColor: AppColors.background,
       body: Obx(() {
         switch (controller.selectedIndex.value) {
           case 0:
@@ -32,6 +34,8 @@ class NavbarView extends GetView<NavigationController> {
       }),
       bottomNavigationBar: Obx(
         () => BottomNavigationBar(
+          fixedColor: AppColors.primaryBlue,
+          backgroundColor: AppColors.background2,
           type: BottomNavigationBarType.fixed,
           currentIndex: controller.selectedIndex.value,
           onTap: controller.changePage,
diff --git a/lib/feature/room_maker/view/room_maker_view.dart b/lib/feature/room_maker/view/room_maker_view.dart
index 2dd72b1..9c26e92 100644
--- a/lib/feature/room_maker/view/room_maker_view.dart
+++ b/lib/feature/room_maker/view/room_maker_view.dart
@@ -1,134 +1,348 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:quiz_app/app/const/colors/app_colors.dart';
-import 'package:quiz_app/app/const/text/text_style.dart';
-import 'package:quiz_app/component/global_button.dart';
 import 'package:quiz_app/component/global_text_field.dart';
-import 'package:quiz_app/component/label_text_field.dart';
 import 'package:quiz_app/component/quiz_container_component.dart';
 import 'package:quiz_app/feature/room_maker/controller/room_maker_controller.dart';
 
 class RoomMakerView extends GetView<RoomMakerController> {
+  const RoomMakerView({super.key});
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: AppColors.background,
-      appBar: AppBar(title: Text("Buat Room Quiz")),
-      body: Padding(
-        padding: const EdgeInsets.all(16.0),
+      backgroundColor: const Color(0xFFF9FAFB),
+      body: SafeArea(
         child: Column(
           children: [
-            LabelTextField(
-              label: "Room Name",
-            ),
-            GlobalTextField(
-              controller: controller.nameTC,
-            ),
-            SizedBox(
-              height: 10,
-            ),
-            LabelTextField(label: "Jumlah Maksimal Pemain"),
-            GlobalTextField(
-              controller: controller.maxPlayerTC,
-              textInputType: TextInputType.number,
-            ),
-            const SizedBox(height: 10),
-            quizMeta(),
-            SizedBox(
-              height: 10,
-            ),
-            _buildModeSelector(),
-            SizedBox(
-              height: 10,
-            ),
+            _buildCustomAppBar(context),
             Expanded(
-              child: Container(
-                child: Obx(() => ListView.builder(
-                      controller: controller.scrollController,
-                      itemCount: controller.availableQuizzes.length + (controller.isLoading ? 1 : 0),
-                      itemBuilder: (context, index) {
-                        if (index < controller.availableQuizzes.length) {
-                          return QuizContainerComponent(
-                            data: controller.availableQuizzes[index],
-                            onTap: controller.onQuizChoosen,
-                          );
-                        } else {
-                          // Loading Indicator di Bawah
-                          return Padding(
-                            padding: const EdgeInsets.all(16.0),
-                            child: Center(
-                              child: CircularProgressIndicator(),
-                            ),
-                          );
-                        }
-                      },
-                    )),
+              child: SingleChildScrollView(
+                padding: const EdgeInsets.all(16.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    _buildRoomSettingsCard(),
+                    const SizedBox(height: 20),
+                    _buildQuizMetaCard(),
+                    const SizedBox(height: 20),
+                    _buildModeSelector(),
+                    const SizedBox(height: 20),
+                    _buildQuizListSection(),
+                    const SizedBox(height: 80),
+                  ],
+                ),
               ),
             ),
-            SizedBox(
-              height: 10,
-            ),
-            GlobalButton(text: "Buat Room", onPressed: controller.onCreateRoom)
           ],
         ),
       ),
+      floatingActionButton: _buildCreateRoomButton(),
+      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
+    );
+  }
+
+  Widget _buildCustomAppBar(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.05),
+            blurRadius: 10,
+            offset: const Offset(0, 2),
+          ),
+        ],
+      ),
+      child: Row(
+        children: [
+          IconButton(
+            onPressed: () => Get.back(),
+            icon: const Icon(Icons.arrow_back_ios, color: Colors.black87),
+          ),
+          const SizedBox(width: 8),
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              const Text(
+                "Buat Room Quiz",
+                style: TextStyle(
+                  color: Colors.black,
+                  fontWeight: FontWeight.bold,
+                  fontSize: 20,
+                ),
+              ),
+              Text(
+                "Siapkan room untuk bermain bersama",
+                style: TextStyle(
+                  color: Colors.grey[600],
+                  fontSize: 14,
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
     );
   }
 
-  Widget quizMeta() {
-    return Obx(() {
-      final quiz = controller.selectedQuiz.value;
-      if (quiz == null) return SizedBox.shrink();
+  Widget _buildRoomSettingsCard() {
+    return AnimatedContainer(
+      duration: const Duration(milliseconds: 300),
+      padding: const EdgeInsets.all(20),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(16),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.05),
+            blurRadius: 15,
+            offset: const Offset(0, 5),
+          ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              Container(
+                padding: const EdgeInsets.all(8),
+                decoration: BoxDecoration(
+                  color: AppColors.primaryBlue.withValues(alpha: 0.1),
+                  borderRadius: BorderRadius.circular(12),
+                ),
+                child: Icon(
+                  Icons.settings,
+                  color: AppColors.primaryBlue,
+                  size: 24,
+                ),
+              ),
+              const SizedBox(width: 12),
+              const Text(
+                "Pengaturan Room",
+                style: TextStyle(
+                  fontSize: 20,
+                  fontWeight: FontWeight.bold,
+                  color: Colors.black87,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 20),
+          _buildInputSection(
+            "Nama Room",
+            "Masukkan nama room",
+            Icons.meeting_room,
+            controller.nameTC,
+          ),
+          const SizedBox(height: 16),
+          _buildInputSection(
+            "Maksimal Pemain",
+            "Berapa banyak pemain yang bisa bergabung?",
+            Icons.group,
+            controller.maxPlayerTC,
+            isNumber: true,
+          ),
+        ],
+      ),
+    );
+  }
 
-      return Container(
-        width: double.infinity,
-        padding: const EdgeInsets.all(16),
-        margin: const EdgeInsets.only(top: 16),
-        decoration: BoxDecoration(
-          color: Colors.white,
-          borderRadius: BorderRadius.circular(16),
-          boxShadow: [
-            BoxShadow(
-              color: Colors.black.withValues(alpha: 0.05),
-              blurRadius: 8,
-              offset: Offset(0, 4),
-            ),
-          ],
-        ),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
+  Widget _buildInputSection(String label, String hint, IconData icon, TextEditingController textController, {bool isNumber = false}) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
           children: [
+            Icon(
+              icon,
+              size: 20,
+              color: AppColors.primaryBlue,
+            ),
+            const SizedBox(width: 8),
             Text(
-              "Kuis yang Dipilih",
-              style: TextStyle(
+              label,
+              style: const TextStyle(
                 fontSize: 16,
-                fontWeight: FontWeight.bold,
+                fontWeight: FontWeight.w600,
                 color: Colors.black87,
               ),
             ),
-            const SizedBox(height: 12),
-            _buildMetaRow("Judul", quiz.title),
-            _buildMetaRow("Deskripsi", quiz.description),
-            _buildMetaRow("Jumlah Soal", quiz.totalQuiz.toString()),
-            _buildMetaRow("Durasi", "${quiz.duration ~/ 60} menit"),
           ],
         ),
+        const SizedBox(height: 8),
+        Text(
+          hint,
+          style: TextStyle(
+            fontSize: 14,
+            color: Colors.grey[600],
+          ),
+        ),
+        const SizedBox(height: 12),
+        GlobalTextField(
+          controller: textController,
+          textInputType: isNumber ? TextInputType.number : TextInputType.text,
+        ),
+      ],
+    );
+  }
+
+  Widget _buildQuizMetaCard() {
+    return Obx(() {
+      final quiz = controller.selectedQuiz.value;
+
+      return AnimatedContainer(
+        duration: const Duration(milliseconds: 400),
+        padding: const EdgeInsets.all(20),
+        decoration: BoxDecoration(
+          color: quiz == null ? Colors.grey[50] : Colors.white,
+          borderRadius: BorderRadius.circular(16),
+          border: quiz == null ? Border.all(color: Colors.grey[300]!, style: BorderStyle.solid, width: 2) : null,
+          boxShadow: quiz == null
+              ? null
+              : [
+                  BoxShadow(
+                    color: Colors.black.withValues(alpha: 0.05),
+                    blurRadius: 15,
+                    offset: const Offset(0, 5),
+                  ),
+                ],
+        ),
+        child: quiz == null ? _buildNoQuizSelected() : _buildSelectedQuizInfo(quiz),
       );
     });
   }
 
+  Widget _buildNoQuizSelected() {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Container(
+            padding: const EdgeInsets.all(12),
+            decoration: BoxDecoration(
+              color: Colors.grey[200],
+              shape: BoxShape.circle,
+            ),
+            child: Icon(
+              Icons.quiz_outlined,
+              size: 32,
+              color: Colors.grey[500],
+            ),
+          ),
+          const SizedBox(height: 12),
+          Text(
+            "Pilih kuis untuk dimainkan",
+            style: TextStyle(
+              fontSize: 16,
+              fontWeight: FontWeight.w600,
+              color: Colors.grey[600],
+            ),
+          ),
+          Text(
+            "Scroll ke bawah untuk memilih kuis",
+            style: TextStyle(
+              fontSize: 14,
+              color: Colors.grey[500],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildSelectedQuizInfo(dynamic quiz) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            Container(
+              padding: const EdgeInsets.all(8),
+              decoration: BoxDecoration(
+                color: Colors.green.withValues(alpha: 0.1),
+                borderRadius: BorderRadius.circular(12),
+              ),
+              child: const Icon(
+                Icons.check_circle,
+                color: Colors.green,
+                size: 24,
+              ),
+            ),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const Text(
+                    "Kuis Terpilih",
+                    style: TextStyle(
+                      fontSize: 16,
+                      fontWeight: FontWeight.bold,
+                      color: Colors.green,
+                    ),
+                  ),
+                  Text(
+                    "Siap untuk dimainkan!",
+                    style: TextStyle(
+                      fontSize: 14,
+                      color: Colors.grey[600],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: 20),
+        Container(
+          padding: const EdgeInsets.all(16),
+          decoration: BoxDecoration(
+            color: AppColors.primaryBlue.withValues(alpha: 0.05),
+            borderRadius: BorderRadius.circular(12),
+            border: Border.all(
+              color: AppColors.primaryBlue.withValues(alpha: 0.2),
+            ),
+          ),
+          child: Column(
+            children: [
+              _buildMetaRow("Judul", quiz.title),
+              _buildMetaRow("Deskripsi", quiz.description),
+              _buildMetaRow("Jumlah Soal", "${quiz.totalQuiz} soal"),
+              _buildMetaRow("Durasi", "${quiz.duration ~/ 60} menit"),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
   Widget _buildMetaRow(String label, String value) {
     return Padding(
-      padding: const EdgeInsets.only(bottom: 8.0),
+      padding: const EdgeInsets.only(bottom: 12.0),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Text("$label: ", style: AppTextStyles.subtitle),
+          Text(
+            label,
+            style: const TextStyle(
+              fontSize: 14,
+              fontWeight: FontWeight.w600,
+              color: Colors.black87,
+            ),
+          ),
+          const SizedBox(width: 8),
           Expanded(
             child: Text(
               value,
-              style: AppTextStyles.subtitle,
+              style: TextStyle(
+                fontSize: 14,
+                color: Colors.grey[700],
+              ),
               overflow: TextOverflow.ellipsis,
+              maxLines: 2,
             ),
           ),
         ],
@@ -137,51 +351,289 @@ class RoomMakerView extends GetView<RoomMakerController> {
   }
 
   Widget _buildModeSelector() {
-    return Container(
-      decoration: BoxDecoration(
-        color: AppColors.background,
-        borderRadius: BorderRadius.circular(12),
-        border: Border.all(color: AppColors.borderLight),
-      ),
-      child: Row(
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            Icon(
+              Icons.source,
+              size: 20,
+              color: AppColors.primaryBlue,
+            ),
+            const SizedBox(width: 8),
+            const Text(
+              "Sumber Kuis",
+              style: TextStyle(
+                fontSize: 18,
+                fontWeight: FontWeight.bold,
+                color: Colors.black87,
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: 12),
+        Container(
+          decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(16),
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withValues(alpha: 0.05),
+                blurRadius: 10,
+                offset: const Offset(0, 2),
+              ),
+            ],
+          ),
+          child: Row(
+            children: [
+              _buildModeButton('Kuisku', controller.isOnwQuiz, true, Icons.person),
+              _buildModeButton('Rekomendasi', controller.isOnwQuiz, false, Icons.recommend),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildModeButton(String label, RxBool isSelected, bool base, IconData icon) {
+    return Expanded(
+      child: Obx(() {
+        final selected = isSelected.value == base;
+        return AnimatedContainer(
+          duration: const Duration(milliseconds: 200),
+          child: Material(
+            color: Colors.transparent,
+            child: InkWell(
+              borderRadius: base
+                  ? const BorderRadius.only(
+                      topLeft: Radius.circular(16),
+                      bottomLeft: Radius.circular(16),
+                    )
+                  : const BorderRadius.only(
+                      topRight: Radius.circular(16),
+                      bottomRight: Radius.circular(16),
+                    ),
+              onTap: () => controller.onQuizSourceChange(base),
+              child: Container(
+                padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 12),
+                decoration: BoxDecoration(
+                  color: selected ? AppColors.primaryBlue : Colors.transparent,
+                  borderRadius: base
+                      ? const BorderRadius.only(
+                          topLeft: Radius.circular(16),
+                          bottomLeft: Radius.circular(16),
+                        )
+                      : const BorderRadius.only(
+                          topRight: Radius.circular(16),
+                          bottomRight: Radius.circular(16),
+                        ),
+                ),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Icon(
+                      icon,
+                      size: 20,
+                      color: selected ? Colors.white : Colors.grey[600],
+                    ),
+                    const SizedBox(width: 8),
+                    Text(
+                      label,
+                      style: TextStyle(
+                        color: selected ? Colors.white : Colors.grey[600],
+                        fontWeight: FontWeight.w600,
+                        fontSize: 16,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        );
+      }),
+    );
+  }
+
+  Widget _buildQuizListSection() {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            Icon(
+              Icons.list,
+              size: 20,
+              color: AppColors.primaryBlue,
+            ),
+            const SizedBox(width: 8),
+            const Text(
+              "Pilih Kuis",
+              style: TextStyle(
+                fontSize: 18,
+                fontWeight: FontWeight.bold,
+                color: Colors.black87,
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: 12),
+        Container(
+          height: 400,
+          decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(16),
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withValues(alpha: 0.05),
+                blurRadius: 15,
+                offset: const Offset(0, 5),
+              ),
+            ],
+          ),
+          child: Obx(() => controller.availableQuizzes.isEmpty && !controller.isLoading
+              ? _buildEmptyQuizList()
+              : ListView.builder(
+                  controller: controller.scrollController,
+                  padding: const EdgeInsets.all(16),
+                  itemCount: controller.availableQuizzes.length + (controller.isLoading ? 1 : 0),
+                  itemBuilder: (context, index) {
+                    if (index < controller.availableQuizzes.length) {
+                      return AnimatedContainer(
+                        duration: Duration(milliseconds: 200 + (index * 50)),
+                        margin: const EdgeInsets.only(bottom: 12),
+                        child: QuizContainerComponent(
+                          data: controller.availableQuizzes[index],
+                          onTap: controller.onQuizChoosen,
+                        ),
+                      );
+                    } else {
+                      return _buildLoadingIndicator();
+                    }
+                  },
+                )),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildEmptyQuizList() {
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          _buildModeButton('kuismu', controller.isOnwQuiz, true),
-          _buildModeButton('Rekomendasi', controller.isOnwQuiz, false),
+          Container(
+            padding: const EdgeInsets.all(20),
+            decoration: BoxDecoration(
+              color: Colors.grey[100],
+              shape: BoxShape.circle,
+            ),
+            child: Icon(
+              Icons.quiz_outlined,
+              size: 48,
+              color: Colors.grey[400],
+            ),
+          ),
+          const SizedBox(height: 16),
+          Text(
+            "Belum ada kuis tersedia",
+            style: TextStyle(
+              fontSize: 18,
+              fontWeight: FontWeight.w600,
+              color: Colors.grey[600],
+            ),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            "Coba ganti sumber kuis atau buat kuis baru",
+            style: TextStyle(
+              fontSize: 14,
+              color: Colors.grey[500],
+            ),
+            textAlign: TextAlign.center,
+          ),
         ],
       ),
     );
   }
 
-  Widget _buildModeButton(String label, RxBool isSelected, bool base) {
-    return Expanded(
-      child: InkWell(
-        onTap: () => controller.onQuizSourceChange(base),
-        child: Obx(
-          () => Container(
-            padding: const EdgeInsets.symmetric(vertical: 14),
-            decoration: BoxDecoration(
-              color: isSelected.value == base ? AppColors.primaryBlue : Colors.transparent,
-              borderRadius: base
-                  ? BorderRadius.only(
-                      topLeft: Radius.circular(10),
-                      bottomLeft: Radius.circular(10),
-                    )
-                  : BorderRadius.only(
-                      topRight: Radius.circular(10),
-                      bottomRight: Radius.circular(10),
-                    ),
-            ),
-            alignment: Alignment.center,
-            child: Text(
-              label,
-              style: TextStyle(
-                color: isSelected.value == base ? Colors.white : AppColors.softGrayText,
-                fontWeight: FontWeight.w600,
+  Widget _buildLoadingIndicator() {
+    return Padding(
+      padding: const EdgeInsets.all(16.0),
+      child: Center(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              width: 20,
+              height: 20,
+              child: CircularProgressIndicator(
+                strokeWidth: 2,
+                valueColor: AlwaysStoppedAnimation<Color>(AppColors.primaryBlue),
               ),
             ),
-          ),
+            const SizedBox(width: 12),
+            Text(
+              "Memuat kuis lainnya...",
+              style: TextStyle(
+                color: Colors.grey[600],
+                fontSize: 14,
+              ),
+            ),
+          ],
         ),
       ),
     );
   }
+
+  Widget _buildCreateRoomButton() {
+    return Obx(() {
+      final canCreate = controller.selectedQuiz.value != null && controller.nameTC.text.isNotEmpty && controller.maxPlayerTC.text.isNotEmpty;
+
+      return AnimatedContainer(
+        duration: const Duration(milliseconds: 300),
+        width: MediaQuery.of(Get.context!).size.width - 32,
+        height: 56,
+        child: Material(
+          elevation: canCreate ? 8 : 2,
+          borderRadius: BorderRadius.circular(16),
+          child: InkWell(
+            borderRadius: BorderRadius.circular(16),
+            onTap: canCreate ? controller.onCreateRoom : null,
+            child: Container(
+              decoration: BoxDecoration(
+                gradient: canCreate
+                    ? LinearGradient(
+                        colors: [AppColors.primaryBlue, AppColors.primaryBlue.withValues(alpha: 0.8)],
+                      )
+                    : null,
+                color: !canCreate ? Colors.grey[300] : null,
+                borderRadius: BorderRadius.circular(16),
+              ),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Icon(
+                    Icons.add_circle,
+                    color: canCreate ? Colors.white : Colors.grey[500],
+                    size: 24,
+                  ),
+                  const SizedBox(width: 12),
+                  Text(
+                    "Buat Room Sekarang",
+                    style: TextStyle(
+                      fontSize: 18,
+                      fontWeight: FontWeight.bold,
+                      color: canCreate ? Colors.white : Colors.grey[500],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      );
+    });
+  }
 }
diff --git a/lib/feature/search/view/search_view.dart b/lib/feature/search/view/search_view.dart
index ba4856d..4252442 100644
--- a/lib/feature/search/view/search_view.dart
+++ b/lib/feature/search/view/search_view.dart
@@ -1,6 +1,7 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:quiz_app/app/const/colors/app_colors.dart';
 import 'package:quiz_app/app/const/enums/listing_type.dart';
 import 'package:quiz_app/component/quiz_container_component.dart';
 import 'package:quiz_app/component/widget/recomendation_component.dart';
@@ -13,7 +14,7 @@ class SearchView extends GetView<SearchQuizController> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: const Color(0xFFF8F9FB),
+      backgroundColor: AppColors.background2,
       body: SafeArea(
         child: Padding(
           padding: const EdgeInsets.all(16),