diff --git a/resources/views/layouts/user.blade.php b/resources/views/layouts/user.blade.php
new file mode 100644
index 0000000..1e67d70
--- /dev/null
+++ b/resources/views/layouts/user.blade.php
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>@yield('title', 'Flo.do | Florist & Self Photo Studio Nganjuk')</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css">
+
+    <link href="{{ asset('vendors/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
+    <link href="{{ asset('vendors/bootstrap-icons/font/bootstrap-icons.min.css') }}" rel="stylesheet">
+    <link href="{{ asset('vendors/glightbox/glightbox.min.css') }}" rel="stylesheet">
+    <link href="{{ asset('vendors/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
+    <link href="{{ asset('vendors/aos/aos.css') }}" rel="stylesheet">
+    <link href="{{ asset('css/user/main.css') }}" rel="stylesheet">
+
+    <script>
+        (function() {
+            const storedTheme = localStorage.getItem('theme') || 'light';
+            document.documentElement.setAttribute('data-bs-theme', storedTheme);
+        })();
+    </script>
+</head>
+
+<body>
+    <div class="site-wrap">
+
+        <header class="fbs__net-navbar navbar navbar-expand-lg dark" aria-label="freebootstrap.net navbar">
+            <div class="container d-flex align-items-center justify-content-between">
+
+                <a class="navbar-brand w-auto" href="#">
+                    <img class="img-fluid" src="{{ asset('img/logo.png') }}" style="max-height: 60px; width: auto;"
+                        alt="Logo">
+                </a>
+
+                <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="offcanvas"
+                    data-bs-target="#fbs__net-navbars" aria-controls="fbs__net-navbars" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span> </button>
+
+                <div class="offcanvas offcanvas-start w-75" id="fbs__net-navbars" tabindex="-1"
+                    aria-labelledby="fbs__net-navbarsLabel">
+
+                    <div class="offcanvas-header">
+                        <div class="offcanvas-header-logo">
+                            <a class="logo-link" href="#">
+                                <img class="img-fluid" src="{{ asset('img/logo.png') }}" style="max-height: 50px;"
+                                    alt="Logo Mobile">
+                            </a>
+                        </div>
+                        <button class="btn-close btn-close-black" type="button" data-bs-dismiss="offcanvas"
+                            aria-label="Close"></button>
+                    </div>
+
+                    <div class="offcanvas-body align-items-lg-center">
+                        <ul class="navbar-nav nav ms-auto mb-2 mb-lg-0">
+                            <li class="nav-item"><a
+                                    class="nav-link scroll-link {{ request()->routeIs('beranda') ? 'active' : '' }}"
+                                    aria-current="page" href="{{ route('beranda') }}">Beranda</a></li>
+                            <li class="nav-item"><a
+                                    class="nav-link scroll-link {{ request()->routeIs('pesan.buket', 'detail.buket', 'formulir.buket') ? 'active' : '' }}"
+                                    href="{{ route('pesan.buket') }}">Pesan
+                                    Buket</a></li>
+                            <li class="nav-item"><a
+                                    class="nav-link scroll-link  {{ request()->routeIs('booking.foto', 'detail.foto', 'formulir.foto') ? 'active' : '' }}"
+                                    href="{{ route('booking.foto') }}">Booking Foto</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <main>
+            @yield('content')
+        </main>
+        <footer class="footer pt-5">
+            <div class="container pb-5">
+                <div class="row justify-content-between align-items-center">
+
+                    <div class="col-lg-4 mb-4 mb-lg-0 text-center text-lg-start">
+                        <a href="#" class="d-inline-block mb-3">
+                            <img src="{{ asset('img/logo.png') }}" alt="Logo Flo.do" class="img-fluid"
+                                style="max-height: 60px;">
+                        </a>
+                        <p class="d-block" style="color: black;"> Florist dan Self Photo Studio Nganjuk
+                        </p>
+                    </div>
+
+                    <div class="col-lg-4 mb-4 mb-lg-0 text-center text-lg-center">
+                        <ul class="list-unstyled footer-menu mb-0">
+                            <li><a href="{{ route('beranda') }}">Beranda</a></li>
+                            <li><a href="{{ route('pesan.buket') }}">Pesan Bunga</a></li>
+                            <li><a href="{{ route('booking.foto') }}">Booking Foto</a></li>
+                        </ul>
+                    </div>
+
+                    <div class="col-lg-4 text-center text-lg-end">
+                        <h6 class="mb-3 text-dark">Temukan Kami di:</h6>
+
+                        <div class="social-links d-flex justify-content-center justify-content-lg-end gap-3">
+                            <a href="#" class="social-icon"><i class="bi bi-instagram"></i></a>
+                            <a href="#" class="social-icon"><i class="bi bi-whatsapp"></i></a>
+                            <a href="#" class="social-icon"><i class="bi bi-tiktok"></i></a>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="copyright-bar py-3 text-center text-white">
+                <div class="container">
+                    <small>&copy; 2025 Flo.do All Right Reserved</small>
+                </div>
+            </div>
+        </footer>
+        <a href="#" id="back-to-top" class="back-to-top d-flex align-items-center justify-content-center">
+            <i class="bi bi-arrow-up-short"></i>
+        </a>
+    </div>
+
+    <script src="{{ asset('vendors/bootstrap/bootstrap.bundle.min.js') }}"></script>
+    <script src="{{ asset('vendors/aos/aos.js') }}"></script>
+    <script src="{{ asset('js/custom.js') }}"></script>
+    <script>
+        AOS.init();
+    </script>
+    <script>
+        let backtotop = document.querySelector('.back-to-top');
+
+        if (backtotop) {
+            const toggleBacktotop = () => {
+                if (window.scrollY > 100) {
+                    backtotop.classList.add('active');
+                } else {
+                    backtotop.classList.remove('active');
+                }
+            }
+
+            window.addEventListener('load', toggleBacktotop);
+            document.addEventListener('scroll', toggleBacktotop);
+
+            backtotop.addEventListener('click', (e) => {
+                e.preventDefault();
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            });
+        }
+    </script>
+</body>
+
+</html>
