diff --git a/.changeset/cold-months-sing.md b/.changeset/cold-months-sing.md
deleted file mode 100644
index 1cc09114ae..0000000000
--- a/.changeset/cold-months-sing.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-
----
-
-Add Playwright configuration and visual regression tests
diff --git a/.changeset/dry-rice-march.md b/.changeset/dry-rice-march.md
deleted file mode 100644
index 38c3de2eb2..0000000000
--- a/.changeset/dry-rice-march.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fix overflow of `label` in a `floating-input`
diff --git a/.changeset/famous-items-tap.md b/.changeset/famous-items-tap.md
deleted file mode 100644
index 67a83f4db3..0000000000
--- a/.changeset/famous-items-tap.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": minor
----
-
-Enable `scrollSpy` in `countup` module
diff --git a/.changeset/gorgeous-mugs-admire.md b/.changeset/gorgeous-mugs-admire.md
deleted file mode 100644
index 8ec28b6634..0000000000
--- a/.changeset/gorgeous-mugs-admire.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Refactor SCSS files to replace divide function with calc
diff --git a/.changeset/grumpy-flowers-act.md b/.changeset/grumpy-flowers-act.md
deleted file mode 100644
index 61157fd0be..0000000000
--- a/.changeset/grumpy-flowers-act.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": minor
----
-
-Add segmented control component
diff --git a/.changeset/itchy-ligers-repair.md b/.changeset/itchy-ligers-repair.md
deleted file mode 100644
index b65ac6727f..0000000000
--- a/.changeset/itchy-ligers-repair.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": minor
----
-
-Add new text features page with mentions: user, color and app.
diff --git a/.changeset/long-falcons-fetch.md b/.changeset/long-falcons-fetch.md
deleted file mode 100644
index 7fd4413c7c..0000000000
--- a/.changeset/long-falcons-fetch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": minor
----
-
-Add Scroll Spy page
diff --git a/.changeset/metal-carrots-battle.md b/.changeset/metal-carrots-battle.md
deleted file mode 100644
index 95fdb837d0..0000000000
--- a/.changeset/metal-carrots-battle.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
----
-
-Refactor bundlewatch workflow to use Turbo 
diff --git a/.changeset/moody-items-peel.md b/.changeset/moody-items-peel.md
deleted file mode 100644
index 605ca8b061..0000000000
--- a/.changeset/moody-items-peel.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Update border radius variables for consistency across components
diff --git a/.changeset/nice-jeans-tie.md b/.changeset/nice-jeans-tie.md
deleted file mode 100644
index 265092ceea..0000000000
--- a/.changeset/nice-jeans-tie.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fix size of `apexcharts` tooltip marker
diff --git a/.changeset/odd-boats-hear.md b/.changeset/odd-boats-hear.md
deleted file mode 100644
index 30862c0770..0000000000
--- a/.changeset/odd-boats-hear.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-
----
-
-Fix apexcharts heatmap example in docs
diff --git a/.changeset/orange-moose-run.md b/.changeset/orange-moose-run.md
deleted file mode 100644
index f8847e4866..0000000000
--- a/.changeset/orange-moose-run.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": minor
----
-
-Update color utility classes and replace background colors in pricing table
diff --git a/.changeset/red-pens-punch.md b/.changeset/red-pens-punch.md
deleted file mode 100644
index 47aa4db783..0000000000
--- a/.changeset/red-pens-punch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fix negative margins in `.navbar-bordered` variant
diff --git a/.changeset/short-rocks-battle.md b/.changeset/short-rocks-battle.md
deleted file mode 100644
index ed08934c79..0000000000
--- a/.changeset/short-rocks-battle.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": minor
----
-
-Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.
diff --git a/.changeset/short-wombats-rhyme.md b/.changeset/short-wombats-rhyme.md
deleted file mode 100644
index 54902576d8..0000000000
--- a/.changeset/short-wombats-rhyme.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Use the full license agreement for illustrations in docs
diff --git a/.changeset/silly-lobsters-move.md b/.changeset/silly-lobsters-move.md
deleted file mode 100644
index 53d3f3dda2..0000000000
--- a/.changeset/silly-lobsters-move.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-
----
-
-Improve documentation for buttons
diff --git a/.changeset/smart-fans-pump.md b/.changeset/smart-fans-pump.md
deleted file mode 100644
index a01fd09739..0000000000
--- a/.changeset/smart-fans-pump.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fix vertical alignment in single page and error layouts
diff --git a/.changeset/soft-cougars-hope.md b/.changeset/soft-cougars-hope.md
deleted file mode 100644
index 7f06ebbd1f..0000000000
--- a/.changeset/soft-cougars-hope.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-
----
-
-Fix spelling and improve grammar in the documentation
diff --git a/.changeset/stale-pianos-crash.md b/.changeset/stale-pianos-crash.md
deleted file mode 100644
index 27ed52e2e0..0000000000
--- a/.changeset/stale-pianos-crash.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": "minor"
----
-
-Add documentation for segmented control component
diff --git a/.changeset/swift-dots-complain.md b/.changeset/swift-dots-complain.md
deleted file mode 100644
index ba2c21e67d..0000000000
--- a/.changeset/swift-dots-complain.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": minor
----
-
-Add new payment provider (Troy)
diff --git a/.changeset/swift-feet-think.md b/.changeset/swift-feet-think.md
deleted file mode 100644
index 51cd27c11b..0000000000
--- a/.changeset/swift-feet-think.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": minor
----
-
-Add selectable table functionality with active background color
diff --git a/.changeset/tall-apples-remember.md b/.changeset/tall-apples-remember.md
deleted file mode 100644
index 411530ec94..0000000000
--- a/.changeset/tall-apples-remember.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-
----
-
-Fixed missing image in the README and Getting Started page
diff --git a/.changeset/ten-houses-punch.md b/.changeset/ten-houses-punch.md
deleted file mode 100644
index bcbceec2b7..0000000000
--- a/.changeset/ten-houses-punch.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fix `.avatar-upload` double borders 
diff --git a/.changeset/thick-kids-glow.md b/.changeset/thick-kids-glow.md
deleted file mode 100644
index c5221f0ddf..0000000000
--- a/.changeset/thick-kids-glow.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Fixes navbar styles with new hover effects and color variables
diff --git a/.changeset/thin-clouds-glow.md b/.changeset/thin-clouds-glow.md
deleted file mode 100644
index b6290a565f..0000000000
--- a/.changeset/thin-clouds-glow.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
----
-
-Update `robots.txt` handling and improve sitemap URL generation
diff --git a/.changeset/twelve-garlics-battle.md b/.changeset/twelve-garlics-battle.md
deleted file mode 100644
index 757fe3813c..0000000000
--- a/.changeset/twelve-garlics-battle.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@tabler/core": patch
----
-
-Refactor badge styles, remove Bootstrap styles
diff --git a/.changeset/unlucky-sloths-tie.md b/.changeset/unlucky-sloths-tie.md
deleted file mode 100644
index 6c4bc98dcf..0000000000
--- a/.changeset/unlucky-sloths-tie.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
----
-
-Add section comments and format HTML for improved readability
diff --git a/.changeset/warm-planets-look.md b/.changeset/warm-planets-look.md
deleted file mode 100644
index fed61979b7..0000000000
--- a/.changeset/warm-planets-look.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-
----
-
-Fix instruction for CDN icons version
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
new file mode 100644
index 0000000000..4874c55687
--- /dev/null
+++ b/core/CHANGELOG.md
@@ -0,0 +1,28 @@
+# @tabler/core
+
+## 1.1.0
+
+### Minor Changes
+
+- d3ae77c: Enable `scrollSpy` in `countup` module
+- cb278c7: Add segmented control component
+- b47725d: Add new text features page with mentions: user, color and app.
+- b4b4d1a: Add Scroll Spy page
+- f95f250: Update color utility classes and replace background colors in pricing table
+- eaa7f81: Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.
+- ea14462: Add documentation for segmented control component
+- 1edaff4: Add new payment provider (Troy)
+- edbaa1e: Add selectable table functionality with active background color
+
+### Patch Changes
+
+- 687267d: Fix overflow of `label` in a `floating-input`
+- bd3d959: Refactor SCSS files to replace divide function with calc
+- 9cd5327: Update border radius variables for consistency across components
+- 06b1dec: Fix size of `apexcharts` tooltip marker
+- 78383ef: Fix negative margins in `.navbar-bordered` variant
+- 11f4487: Use the full license agreement for illustrations in docs
+- b28ce9f: Fix vertical alignment in single page and error layouts
+- 24b944c: Fix `.avatar-upload` double borders
+- ca4ba14: Fixes navbar styles with new hover effects and color variables
+- 378fba8: Refactor badge styles, remove Bootstrap styles
diff --git a/core/package.json b/core/package.json
index 7712c1e9c1..ab9d473479 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
diff --git a/preview/package.json b/preview/package.json
index cbae03ea09..dda1b98785 100644
--- a/preview/package.json
+++ b/preview/package.json
@@ -16,7 +16,7 @@
     "js-compile": "rollup --config build/rollup.config.mjs --sourcemap",
     "js-minify": "pnpm run js-minify-demo && pnpm run js-minify-theme",
     "js-minify-demo": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/preview/js/demo.js.map,includeSources,url=demo.min.js.map\" --output dist/preview/js/demo.min.js dist/preview/js/demo.js",
-    "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/preview/js/demo-theme.js.map,includeSources,url=demo-theme.min.js.map\" --output dist/preview/js/demo-theme.min.js dist/preview/js/demo-theme.js", 
+    "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/preview/js/demo-theme.js.map,includeSources,url=demo-theme.min.js.map\" --output dist/preview/js/demo-theme.min.js dist/preview/js/demo-theme.js",
     "clean": "shx rm -rf dist demo",
     "html": "pnpm run html-build && pnpm run html-prettify",
     "html-build": "eleventy",
diff --git a/preview/pages/_data/layouts.json b/preview/pages/_data/layouts.json
index 2854c044a1..2d63e0a7c3 100644
--- a/preview/pages/_data/layouts.json
+++ b/preview/pages/_data/layouts.json
@@ -74,5 +74,14 @@
       "sidebar": true,
       "sidebar-dark": true
     }
+  },
+  {
+    "title": "Flat",
+    "page": "layout-flat.html",
+    "new": true,
+    "config": {
+      "sidebar": true,
+      "sidebar-dark": true
+    }
   }
 ]
\ No newline at end of file
diff --git a/preview/pages/_data/menu.json b/preview/pages/_data/menu.json
index 03cb436e30..17869b12f2 100644
--- a/preview/pages/_data/menu.json
+++ b/preview/pages/_data/menu.json
@@ -362,6 +362,11 @@
       "vertical-transparent": {
         "url": "layout-vertical-transparent.html",
         "title": "Vertical transparent"
+      },
+      "flat": {
+        "url": "layout-flat.html",
+        "title": "Flat",
+        "badge": "New"
       }
     }
   },
diff --git a/preview/pages/_layouts/flat.html b/preview/pages/_layouts/flat.html
new file mode 100644
index 0000000000..3c232727b5
--- /dev/null
+++ b/preview/pages/_layouts/flat.html
@@ -0,0 +1,425 @@
+---
+title: Dashboard Flat
+<!--layout: default-->
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Dashboard Flat</title>
+
+    <!-- Tabler CSS -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0/dist/css/tabler.min.css"
+    />
+    <!-- Tabler Icons -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css"
+    />
+
+    <style>
+      /* Keep hover style for anchors */
+      a:hover {
+        text-decoration: none;
+      }
+
+      /* CSS Variables for configuration */
+      :root {
+        --header-height: 60px;
+        --sidebar-width: 250px;
+        --bg-color: #f8f9fa;
+        --primary-bg: #fff;
+        --border-color: #e5e7eb;
+        --text-color: #111827;
+        --transition-speed: 0.3s; /* for smooth sidebar toggling */
+      }
+
+      /* Reset & Base Styles */
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        overflow-x: hidden;
+        background-color: var(--bg-color);
+        color: var(--text-color);
+        height: 100%;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Helvetica, Arial, sans-serif;
+      }
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
+
+      /* Fixed Header */
+      header.header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: var(--header-height);
+        background-color: var(--primary-bg);
+        border-bottom: 1px solid var(--border-color);
+        display: flex;
+        align-items: center;
+        padding: 0 1rem;
+        z-index: 1000;
+      }
+      header .left,
+      header .right {
+        display: flex;
+        align-items: center;
+      }
+      header .right {
+        margin-left: auto;
+      }
+
+      /* Updated Separator */
+      .separator {
+        /* Make this look like a continued border rather than a separate line */
+        border-left: 1px solid var(--border-color);
+        align-self: stretch;      /* So it fills the entire header height */
+        margin: 0 4.3rem;         /* Slight horizontal spacing */
+      }
+
+      /* Make this container flex so we can center the search */
+      .items-center {
+        display: flex;
+        flex: 1; /* Let it fill remaining space */
+        justify-content: center; /* Center horizontally */
+        align-items: center;     /* Keep items aligned vertically */
+      }
+
+      /* Fixed Sidebar Navigation */
+      nav.sidebar {
+        position: fixed;
+        top: var(--header-height);
+        left: 0;
+        bottom: 0;
+        width: var(--sidebar-width);
+        background-color: var(--primary-bg);
+        border-right: 1px solid var(--border-color);
+        overflow-y: auto;
+        padding-bottom: 80px;
+        transition: transform var(--transition-speed) ease, width var(--transition-speed) ease;
+      }
+      /* Collapsed Sidebar State: show only icons */
+      nav.sidebar.collapsed {
+        transform: none !important;
+        width: 60px; /* Narrower sidebar */
+      }
+
+      nav.sidebar .list-group-item {
+        padding: 0.75rem 1rem;
+        border: none;
+        color: var(--text-color);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+      }
+      nav.sidebar .list-group-item:hover {
+        background-color: #f0f0f0;
+      }
+      nav.sidebar .list-group-item.active {
+        background-color: var(--border-color);
+      }
+
+      /* Hide the text when collapsed, keep the icon */
+      nav.sidebar.collapsed .list-group-item i {
+        margin-right: 0;
+      }
+      nav.sidebar.collapsed .list-group-item:not(.active) span {
+        display: none;
+      }
+      nav.sidebar.collapsed .list-group-item.active span {
+        display: none;
+      }
+
+      /* Submenu Styles */
+      .submenu-toggle {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+      }
+      .submenu {
+        display: none;
+        flex-direction: column;
+        margin-left: 1.5rem; /* Indentation to indicate submenu */
+      }
+      .submenu.show {
+        display: flex;
+      }
+      .submenu-item {
+        padding: 0.5rem 0;
+        display: flex;
+        align-items: center;
+      }
+      .submenu-item span {
+        margin-left: 1.5rem;
+      }
+
+      /* Hide submenus entirely if sidebar is collapsed */
+      nav.sidebar.collapsed .submenu {
+        display: none !important;
+      }
+
+      /* Sidebar Bottom User Dropdown */
+      .sidebar-bottom {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        border-top: 1px solid var(--border-color);
+        padding: 0.75rem 1rem;
+        background-color: var(--primary-bg);
+      }
+      .sidebar-bottom .dropdown-menu {
+        width: 100%;
+        left: 0 !important;
+        right: auto !important;
+        box-sizing: border-box;
+      }
+      nav.sidebar.collapsed .sidebar-bottom .ms-2 {
+        display: none;
+      }
+
+      /* Main Content Area */
+      main.main {
+        margin-top: var(--header-height);
+        margin-left: var(--sidebar-width);
+        padding: 1rem;
+        transition: margin-left var(--transition-speed) ease;
+      }
+      main.main.full-width {
+        margin-left: 60px;
+      }
+
+      /* Minimal button style (kept from original code) */
+      .btn-none {
+        background: none;
+        border: none;
+        cursor: pointer;
+      }
+
+      /* Make search box wider */
+      @media (min-width: 992px) {
+        .items-center form {
+          max-width: 500px; /* Wider than before */
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Fixed Header -->
+    <header class="header">
+      <div class="left">
+        <div class="dropdown">
+          <button
+            class="btn btn-ghost"
+            data-bs-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >
+            <a href="#" class="navbar-brand me-3"><img src="{{ page | relative }}/favicon.ico" style="height: 20px" alt="logo"></a>
+            <i class="ti ti-users"></i> Switch Team
+          </button>
+          <div class="dropdown-menu">
+            <a href="#" class="dropdown-item">Team Alpha</a>
+            <a href="#" class="dropdown-item">Team Beta</a>
+            <div class="dropdown-divider"></div>
+            <a href="#" class="dropdown-item">Create New Team</a>
+          </div>
+        </div>
+      </div>
+
+      <!-- Aligned Separator -->
+      <div class="separator" aria-hidden="true"></div>
+
+      <!-- Toggle Sidebar Button -->
+      <button
+        class="btn btn-none me-3"
+        aria-label="Toggle Sidebar"
+        onclick="toggleSidebar()"
+      >
+        <i class="ti ti-menu-2"></i>
+      </button>
+
+      <!-- Centered Search -->
+      <div class="items-center">
+        <form class="d-none d-lg-flex w-100" style="max-width: 500px;">
+          <div class="input-icon w-100">
+            <span class="input-icon-addon">
+              <i class="ti ti-search"></i>
+            </span>
+            <input
+              type="search"
+              class="form-control"
+              placeholder="Search..."
+              aria-label="Search"
+            />
+          </div>
+        </form>
+      </div>
+
+      <div class="right">
+        <!-- Buttons with text on header -->
+        <button class="btn btn-ghost me-2" aria-label="Pick a date">
+          <i class="ti ti-calendar-event"></i>
+          <span class="ms-1">Calendar</span>
+        </button>
+        <button class="btn btn-ghost me-2" aria-label="Share">
+          <i class="ti ti-share"></i>
+          <span class="ms-1">Share</span>
+        </button>
+        <button class="btn btn-ghost" aria-label="Download">
+          <i class="ti ti-download"></i>
+          <span class="ms-1">Download</span>
+        </button>
+        <div class="dropdown ms-3">
+          <a
+            href="#"
+            class="d-flex align-items-center"
+            data-bs-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >
+            <span
+              class="avatar avatar-sm"
+              style="background-image: url('https://placehold.co/40x40'); width: 40px; height: 40px;"
+              aria-hidden="true"
+            ></span>
+            <span class="ms-2">Admin</span>
+          </a>
+          <div class="dropdown-menu dropdown-menu-end">
+            <a href="#" class="dropdown-item">Profile</a>
+            <a href="#" class="dropdown-item">Settings</a>
+            <div class="dropdown-divider"></div>
+            <a href="#" class="dropdown-item">Logout</a>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Fixed Sidebar Navigation -->
+    <nav class="sidebar py-2" aria-label="Sidebar Navigation">
+      <span class="text-muted p-3"><small>Navbar</small></Span>
+      <div class="list-group">
+        <a href="#" class="list-group-item active">
+          <i class="ti ti-layout-dashboard me-2"></i>
+          <span>Dashboard</span>
+        </a>
+
+        <a href="#" class="list-group-item">
+          <i class="ti ti-shopping-cart me-2"></i>
+          <span>Orders</span>
+        </a>
+
+        <a href="#" class="list-group-item">
+          <i class="ti ti-user me-2"></i>
+          <span>Customers</span>
+        </a>
+
+        <!-- Submenu Toggle -->
+        <div class="list-group-item submenu-toggle">
+          <div>
+            <i class="ti ti-briefcase me-2"></i>
+            <span>Projects</span>
+          </div>
+          <button class="btn-none" onclick="toggleSubmenu('projectsSubmenu')">
+            <i class="ti ti-chevron-right" id="projectsArrow"></i>
+          </button>
+        </div>
+        <!-- Submenu -->
+        <div id="projectsSubmenu" class="submenu">
+          <a href="#" class="submenu-item">
+            <i class="ti ti-circle-plus"></i>
+            <span>Project A</span>
+          </a>
+          <a href="#" class="submenu-item">
+            <i class="ti ti-circle-plus"></i>
+            <span>Project B</span>
+          </a>
+        </div>
+
+        <a href="#" class="list-group-item">
+          <i class="ti ti-folder me-2"></i>
+          <span>Files</span>
+        </a>
+        <a href="#" class="list-group-item">
+          <i class="ti ti-users me-2"></i>
+          <span>Reports</span>
+        </a>
+      </div>
+
+      <!-- Sidebar Bottom User Dropdown -->
+      <div class="sidebar-bottom">
+        <div class="dropdown">
+          <a
+            href="#"
+            class="d-flex align-items-center"
+            data-bs-toggle="dropdown"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >
+            <span
+              class="avatar avatar-sm"
+              style="background-image: url('https://placehold.co/40x40'); width: 40px; height: 40px;"
+              aria-hidden="true"
+            ></span>
+            <span class="ms-2">Admin</span>
+          </a>
+          <div class="dropdown-menu">
+            <a href="#" class="dropdown-item">Profile</a>
+            <a href="#" class="dropdown-item">Settings</a>
+            <div class="dropdown-divider"></div>
+            <a href="#" class="dropdown-item">Logout</a>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Main Content Area (Empty for Navigation/Header Focus) -->
+    <main class="main" aria-label="Main Content">
+      <p>Content goes here...</p>
+    </main>
+
+    <!-- Tabler JS (Optional) -->
+    <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0/dist/js/tabler.min.js"></script>
+
+    <!-- Sidebar & Submenu Toggle Script -->
+    <script>
+      function toggleSidebar() {
+        const sidebar = document.querySelector('.sidebar');
+        const main = document.querySelector('.main');
+        // Toggle the "collapsed" class on the sidebar
+        sidebar.classList.toggle('collapsed');
+        // Toggle the "full-width" class on the main content
+        main.classList.toggle('full-width');
+      }
+
+      function toggleSubmenu(submenuId) {
+        const submenu = document.getElementById(submenuId);
+        const arrow = document.getElementById('projectsArrow');
+        // Toggle 'show' class on the submenu
+        submenu.classList.toggle('show');
+        // Toggle arrow icon
+        if (submenu.classList.contains('show')) {
+          arrow.classList.remove('ti-chevron-right');
+          arrow.classList.add('ti-chevron-down');
+        } else {
+          arrow.classList.remove('ti-chevron-down');
+          arrow.classList.add('ti-chevron-right');
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/preview/pages/layout-flat.html b/preview/pages/layout-flat.html
new file mode 100644
index 0000000000..e26a3d6630
--- /dev/null
+++ b/preview/pages/layout-flat.html
@@ -0,0 +1,7 @@
+---
+page-header: Flat layout
+page-menu: layout.flat
+body-class: layout-flat
+layout: flat
+permalink: layout-flat.html
+---