diff --git a/lib/core/router.dart b/lib/core/router.dart
index b2a1558..f4306e7 100644
--- a/lib/core/router.dart
+++ b/lib/core/router.dart
@@ -80,6 +80,10 @@ final router = GoRouter(
 
     // Rute untuk halaman-halaman utama
     GoRoute(path: '/home', builder: (context, state) => HomeScreen()),
+    GoRoute(
+      path: '/notifikasi',
+      builder: (context, state) => NotificationScreen(),
+    ),
     GoRoute(path: '/chatlist', builder: (context, state) => ChatListScreen()),
     // Router config
     GoRoute(
diff --git a/lib/core/utils/navigation.dart b/lib/core/utils/navigation.dart
index c59483a..c4ecb8c 100644
--- a/lib/core/utils/navigation.dart
+++ b/lib/core/utils/navigation.dart
@@ -3,7 +3,6 @@ import 'package:iconsax_flutter/iconsax_flutter.dart';
 import 'package:rijig_mobile/core/utils/guide.dart';
 import 'package:rijig_mobile/core/router.dart';
 import 'package:rijig_mobile/features/activity/presentation/screen/activity_screen.dart';
-// import 'package:rijig_mobile/features/cart/presentation/screens/cart_screen.dart';
 import 'package:rijig_mobile/features/cart/presentation/screens/cart_test_screen.dart';
 import 'package:rijig_mobile/features/home/presentation/screen/home_screen.dart';
 import 'package:rijig_mobile/features/profil/presentation/screen/profil_screen.dart';
@@ -60,15 +59,21 @@ class _NavigationPageState extends State<NavigationPage>
 
   void _onItemTapped(int index) {
     if (index == 2) {
-      router.push("/requestpickup");
+      router.push("/trashview");
     } else {
       setState(() => _selectedIndex = index);
       _saveSelectedIndex(index);
     }
   }
 
+  void _onCenterButtonTapped() {
+    router.push("/trashview");
+  }
+
   @override
   Widget build(BuildContext context) {
+    final Size size = MediaQuery.of(context).size;
+
     return Container(
       color: Theme.of(context).scaffoldBackgroundColor,
       child: SlideTransition(
@@ -77,116 +82,382 @@ class _NavigationPageState extends State<NavigationPage>
           resizeToAvoidBottomInset: false,
           extendBody: true,
           backgroundColor: whiteColor,
-          body: IndexedStack(
-            index: _selectedIndex,
-            children: const [
-              HomeScreen(),
-              ActivityScreen(),
-              Text(""),
-              // CartScreen(),
-              OrderSummaryScreen(),
-              ProfilScreen(),
+          body: Stack(
+            children: [
+              IndexedStack(
+                index: _selectedIndex,
+                children: const [
+                  HomeScreen(),
+                  ActivityScreen(),
+                  Text(""),
+                  OrderSummaryScreen(),
+                  ProfilScreen(),
+                ],
+              ),
+
+              Positioned(
+                bottom: 0,
+                left: 0,
+                child: SizedBox(
+                  width: size.width,
+                  height: 65,
+                  child: Stack(
+                    clipBehavior: Clip.none,
+                    children: [
+                      CustomPaint(
+                        size: Size(size.width, 65),
+                        painter: CustomBottomNavPainter(
+                          backgroundColor: primaryColor,
+                        ),
+                      ),
+
+                      Center(
+                        heightFactor: 0.5,
+                        child: GestureDetector(
+                          onTap: _onCenterButtonTapped,
+                          child: Container(
+                            width: 65,
+                            height: 65,
+                            decoration: BoxDecoration(
+                              shape: BoxShape.circle,
+                              gradient: LinearGradient(
+                                colors: [secondaryColor, primaryColor],
+                                begin: Alignment.topCenter,
+                                end: Alignment.bottomCenter,
+                              ),
+                            ),
+                            child: Column(
+                              mainAxisAlignment: MainAxisAlignment.center,
+                              children: [
+                                Icon(
+                                  Iconsax.archive_2,
+                                  color: whiteColor,
+                                  size: 26,
+                                ),
+                                const SizedBox(height: 2),
+                                Text(
+                                  "Mulai",
+                                  style: TextStyle(
+                                    color: whiteColor,
+                                    fontSize: 14,
+                                    fontWeight: FontWeight.w600,
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                        ),
+                      ),
+
+                      SizedBox(
+                        width: size.width,
+                        height: 65,
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                          children: [
+                            _buildNavItem(
+                              icon: Iconsax.home_2,
+                              label: 'Beranda',
+                              index: 0,
+                            ),
+                            _buildNavItem(
+                              icon: Iconsax.note_favorite,
+                              label: 'Aktivitas',
+                              index: 1,
+                            ),
+
+                            SizedBox(width: size.width * 0.20),
+                            _buildNavItem(
+                              icon: Iconsax.shopping_cart,
+                              label: 'Keranjang',
+                              index: 3,
+                            ),
+                            _buildNavItem(
+                              icon: Iconsax.user,
+                              label: 'Profil',
+                              index: 4,
+                            ),
+                          ],
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
             ],
           ),
-          bottomNavigationBar: Visibility(
-            visible: _selectedIndex != 2,
-            child: BottomAppBar(
-              shape: const CircularNotchedRectangle(),
-              padding: PaddingCustom().paddingHorizontal(2),
-              elevation: 0,
-              height: 67,
-              color: primaryColor,
-              clipBehavior: Clip.antiAlias,
-              notchMargin: 3.0,
-              child: BottomNavigationBar(
-                type: BottomNavigationBarType.fixed,
-                backgroundColor: Colors.transparent,
-                elevation: 0,
-                showSelectedLabels: true,
-                showUnselectedLabels: true,
-                selectedItemColor: secondaryColor,
-                unselectedItemColor: whiteColor,
-                currentIndex: _selectedIndex,
-                onTap: _onItemTapped,
-                items: [
-                  BottomNavigationBarItem(
-                    icon: Icon(Iconsax.home_2),
-                    activeIcon: Icon(Iconsax.home_2, size: 26),
-                    label: 'Beranda',
-                  ),
-                  BottomNavigationBarItem(
-                    icon: Icon(Iconsax.note_favorite),
-                    activeIcon: Icon(Iconsax.note_favorite, size: 26),
-                    label: 'Aktivitas',
-                  ),
-                  const BottomNavigationBarItem(
-                    icon: SizedBox.shrink(),
-                    label: '',
-                  ),
-                  BottomNavigationBarItem(
-                    icon: Icon(Iconsax.shopping_cart),
-                    activeIcon: Icon(Iconsax.shopping_cart, size: 26),
-                    label: 'Keranjang',
-                  ),
-                  BottomNavigationBarItem(
-                    icon: Icon(Iconsax.user),
-                    activeIcon: Icon(Iconsax.user, size: 26),
-                    label: 'Profil',
-                  ),
-                ],
-                selectedLabelStyle: Tulisan.customText(
-                  color: secondaryColor,
-                  fontsize: 14,
-                  fontWeight: FontWeight.w600,
-                ),
-                unselectedLabelStyle: Tulisan.customText(
-                  color: whiteColor,
-                  fontsize: 12,
-                  fontWeight: FontWeight.w400,
+        ),
+      ),
+    );
+  }
+
+  Widget _buildNavItem({
+    required IconData icon,
+    required String label,
+    required int index,
+  }) {
+    final isSelected = _selectedIndex == index;
+
+    return Expanded(
+      child: GestureDetector(
+        onTap: () => _onItemTapped(index),
+        behavior: HitTestBehavior.opaque,
+        child: Container(
+          padding: const EdgeInsets.only(top: 8, bottom: 6),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(
+                icon,
+                size: isSelected ? 26 : 24,
+                color: isSelected ? secondaryColor : whiteColor,
+              ),
+              const SizedBox(height: 3),
+              Text(
+                label,
+                style: TextStyle(
+                  color: isSelected ? secondaryColor : whiteColor,
+                  fontSize: isSelected ? 14 : 12,
+                  fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
                 ),
               ),
-            ),
-          ),
-          floatingActionButtonLocation:
-              FloatingActionButtonLocation.centerDocked,
-          floatingActionButton: Container(
-            width: 78,
-            height: 78,
-            decoration: BoxDecoration(
-              shape: BoxShape.circle,
-              gradient: LinearGradient(
-                colors: [secondaryColor, primaryColor],
-                begin: Alignment.topCenter,
-                end: Alignment.bottomCenter,
-              ),
-              border: Border.all(color: whiteColor, width: 4),
-            ),
-            child: RawMaterialButton(
-              disabledElevation: 0,
-              autofocus: false,
-              focusElevation: 0,
-              onPressed: () => router.push("/trashview"),
-              // onPressed: () => router.push("/requestpickup"),
-              shape: const CircleBorder(),
-              elevation: 0,
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Icon(Iconsax.archive_2, color: whiteColor, size: 30),
-                  Text(
-                    "Mulai",
-                    style: Tulisan.customText(
-                      color: whiteColor,
-                      fontsize: 14,
-                      fontWeight: FontWeight.w600,
-                    ),
-                  ),
-                ],
-              ),
-            ),
+            ],
           ),
         ),
       ),
     );
   }
 }
+
+class CustomBottomNavPainter extends CustomPainter {
+  final Color backgroundColor;
+
+  CustomBottomNavPainter({required this.backgroundColor});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    Paint paint =
+        Paint()
+          ..color = backgroundColor
+          ..style = PaintingStyle.fill;
+
+    Path path = Path();
+
+    path.moveTo(0, 0);
+    path.lineTo(size.width * 0.35, 0);
+
+    path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 15);
+
+    path.arcToPoint(
+      Offset(size.width * 0.60, 15),
+      radius: const Radius.circular(17.0),
+      clockwise: false,
+    );
+
+    path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.65, 0);
+    path.lineTo(size.width, 0);
+    path.lineTo(size.width, size.height);
+    path.lineTo(0, size.height);
+    path.lineTo(0, 0);
+
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) {
+    return false;
+  }
+}
+
+class SimpleNavigationPage extends StatefulWidget {
+  final dynamic data;
+  const SimpleNavigationPage({super.key, this.data});
+
+  @override
+  State<SimpleNavigationPage> createState() => _SimpleNavigationPageState();
+}
+
+class _SimpleNavigationPageState extends State<SimpleNavigationPage> {
+  int _selectedIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    final Size size = MediaQuery.of(context).size;
+
+    return Scaffold(
+      extendBody: true,
+      backgroundColor: whiteColor,
+      body: Stack(
+        children: [
+          IndexedStack(
+            index: _selectedIndex,
+            children: const [
+              HomeScreen(),
+              ActivityScreen(),
+              OrderSummaryScreen(),
+              ProfilScreen(),
+            ],
+          ),
+
+          Positioned(
+            bottom: 0,
+            left: 0,
+            child: SizedBox(
+              width: size.width,
+              height: 60,
+              child: Stack(
+                clipBehavior: Clip.none,
+                children: [
+                  CustomPaint(
+                    size: Size(size.width, 60),
+                    painter: PreciseBottomNavPainter(
+                      backgroundColor: primaryColor,
+                    ),
+                  ),
+
+                  Center(
+                    heightFactor: 0.7,
+                    child: GestureDetector(
+                      onTap: () => router.push("/trashview"),
+                      child: Container(
+                        width: 60,
+                        height: 60,
+                        decoration: BoxDecoration(
+                          shape: BoxShape.circle,
+                          gradient: LinearGradient(
+                            colors: [secondaryColor, primaryColor],
+                            begin: Alignment.topCenter,
+                            end: Alignment.bottomCenter,
+                          ),
+                        ),
+                        child: Column(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            Icon(
+                              Iconsax.archive_2,
+                              color: whiteColor,
+                              size: 22,
+                            ),
+                            Text(
+                              "Mulai",
+                              style: TextStyle(
+                                color: whiteColor,
+                                fontSize: 9,
+                                fontWeight: FontWeight.w600,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ),
+
+                  SizedBox(
+                    width: size.width,
+                    height: 60,
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                      children: [
+                        _simpleNavItem(Iconsax.home_2, 'Beranda', 0),
+                        _simpleNavItem(Iconsax.note_favorite, 'Aktivitas', 1),
+                        SizedBox(width: size.width * 0.15),
+                        _simpleNavItem(Iconsax.shopping_cart, 'Keranjang', 2),
+                        _simpleNavItem(Iconsax.user, 'Profil', 3),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _simpleNavItem(IconData icon, String label, int index) {
+    final isSelected = _selectedIndex == index;
+    return Expanded(
+      child: GestureDetector(
+        onTap: () => setState(() => _selectedIndex = index),
+        behavior: HitTestBehavior.opaque,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              icon,
+              size: isSelected ? 22 : 18,
+              color: isSelected ? secondaryColor : whiteColor,
+            ),
+            const SizedBox(height: 2),
+            Text(
+              label,
+              style: TextStyle(
+                color: isSelected ? secondaryColor : whiteColor,
+                fontSize: 9,
+                fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class PreciseBottomNavPainter extends CustomPainter {
+  final Color backgroundColor;
+
+  PreciseBottomNavPainter({required this.backgroundColor});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    Paint paint =
+        Paint()
+          ..color = backgroundColor
+          ..style = PaintingStyle.fill;
+
+    Path path = Path();
+
+    final double centerX = size.width * 0.5;
+    final double notchRadius = 30.0;
+    final double notchMargin = 4.0;
+
+    path.moveTo(0, 15);
+
+    path.quadraticBezierTo(size.width * 0.15, 0, size.width * 0.35, 0);
+
+    path.quadraticBezierTo(
+      centerX - notchRadius - notchMargin,
+      0,
+      centerX - notchRadius - notchMargin,
+      12,
+    );
+
+    path.arcToPoint(
+      Offset(centerX + notchRadius + notchMargin, 12),
+      radius: Radius.circular(notchRadius + notchMargin),
+      clockwise: false,
+    );
+
+    path.quadraticBezierTo(
+      centerX + notchRadius + notchMargin,
+      0,
+      size.width * 0.65,
+      0,
+    );
+
+    path.quadraticBezierTo(size.width * 0.85, 0, size.width, 15);
+
+    path.lineTo(size.width, size.height);
+    path.lineTo(0, size.height);
+    path.lineTo(0, 15);
+
+    canvas.drawPath(path, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) {
+    return false;
+  }
+}