Serene — Free Spa & Wellness Website Template
Serene is a free, one-page Bootstrap 5 template for spas, salons and wellness studios, built with zero jQuery. Instead of the usual sage-green cliche it uses a calm blue-slate and greige palette lit by a single gilded amber accent, and ships complete with a tabbed treatment menu, a working booking form, a gallery lightbox and a therapists row.
Key features
- Blue-slate and greige palette with one gilded amber accent, Fraunces serif display
- Filterable treatment menu with dotted price leaders and category tabs
- Validated booking form with service picker, date/time and today-minimum guard
- Vanilla-JS testimonial slider with dots, arrows, autoplay and pause-on-hover
- Accessible gallery lightbox: keyboard-openable, Escape to close, focus return
- Signature arch-shaped image frames across hero, about, gallery and team
- Opening-hours card auto-highlights the current day, plus a CSS map placeholder
- Scroll-reveal, sticky blur-on-scroll header, full prefers-reduced-motion support
- Zero jQuery, no paid plugins, only Bootstrap 5 self-hosted
Best for
- Independent spas and day spas
- Hair and beauty salons
- Massage and wellness studios
- Solo therapists taking client work
- Boutique brands wanting a one-page site
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Calm, boutique spa — blue-slate + greige with gilded amber, Fraunces serif display
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Serene really free to use commercially?
Yes. Serene is free for personal and commercial projects, including paid client work, at no cost. You can use it for a real spa, salon or wellness studio without buying a license. A credit link back to uiCookies is appreciated but not required.
Do I need a build tool or framework to edit it?
No build step or framework is required. Serene is plain HTML, CSS and vanilla JavaScript, so you can open the files in any code editor, change the text, and refresh the browser to see your edits. There is no npm install, Sass compile or bundler to run.
How do I change the colours and fonts?
The palette is defined as CSS custom properties in the :root block at the top of the stylesheet, so changing the blue-slate, greige and gilded amber values in one place updates them site-wide. The Fraunces serif display font loads from a font link in the page head, so swapping it means editing that link and the font-family value. No preprocessor needed.
How do I edit the treatments and prices?
Each treatment is a plain block of HTML in the services section with a name, price, description and tags. Edit the text directly, or duplicate a block to add a new service. Set the block's category with the data-cat attribute (Massage, Facials, Body Rituals or Wellness) so the filter tabs pick it up automatically.
Is it mobile-responsive, and which browsers does it support?
Yes. The layout is fully responsive and built on Bootstrap 5's grid, with a dedicated vanilla-JS mobile navigation. It works in all current versions of Chrome, Firefox, Safari and Edge. Because it avoids jQuery and heavy plugins, there are no legacy dependencies to worry about.
Can I connect the booking form to a real scheduler?
Out of the box the booking form validates on the front end and shows a confirmation message, but it does not send email or store bookings on its own since it is a static front-end. Point the form's action at your own endpoint, a form service, or a scheduler like Calendly, and it will submit real bookings. There is no payment processing or backend included.
Does it use jQuery or any paid plugins, and is it fast?
Serene uses zero jQuery. Every interaction, from the mobile nav and menu filter to the testimonial slider, form validation and gallery lightbox, is hand-written vanilla JavaScript, and the only bundled library is Bootstrap 5, self-hosted. That keeps the page light; just compress your own gallery and hero photos before launch for the best performance.
What's included, and what makes the design stand out?
You get a complete one-page site: hero, about, a tabbed treatment menu, booking form, image gallery with lightbox, a therapists row, testimonials and an opening-hours card with a CSS-built map placeholder. Signature arch-shaped image frames, evoking a hammam doorway, tie the hero, about, gallery and team sections together. Accessibility is built in with a skip link, semantic landmarks, visible focus styles and prefers-reduced-motion support.
