diff --git a/packages/docs/docs/.vitepress/configs/components.mts b/packages/docs/docs/.vitepress/configs/components.mts
index dbd97df9db..8493f45d8b 100644
--- a/packages/docs/docs/.vitepress/configs/components.mts
+++ b/packages/docs/docs/.vitepress/configs/components.mts
@@ -49,6 +49,7 @@ export const components = {
         { text: 'MazGallery', link: '/components/maz-gallery' },
         { text: 'MazIcon', link: '/components/maz-icon' },
         { text: 'MazLazyImg', link: '/components/maz-lazy-img' },
+        { text: 'MazLoadingBar', link: '/components/maz-loading-bar' },
         { text: 'MazPullToRefresh', link: '/components/maz-pull-to-refresh' },
         { text: 'MazStepper', link: '/components/maz-stepper' },
         { text: 'MazSpinner', link: '/components/maz-spinner' },
diff --git a/packages/docs/docs/components/maz-loading-bar.md b/packages/docs/docs/components/maz-loading-bar.md
new file mode 100644
index 0000000000..a1ca0a0a14
--- /dev/null
+++ b/packages/docs/docs/components/maz-loading-bar.md
@@ -0,0 +1,26 @@
+---
+title: MazLoadingBar
+description: MazLoadingBar is a standalone component
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Basic usage
+
+<MazLoadingBar color="secondary" />
+
+```vue
+<template>
+  <MazLoadingBar color="secondary" />
+</template>
+
+<script lang="ts" setup>
+  import MazLoadingBar from 'maz-ui/components/MazLoadingBar'
+</script>
+```
+
+<!--@include: ./../.vitepress/generated-docs/maz-loading-bar.doc.md-->
diff --git a/packages/lib/components/MazLoadingBar.vue b/packages/lib/components/MazLoadingBar.vue
index ebedde5e55..d63e301ae9 100644
--- a/packages/lib/components/MazLoadingBar.vue
+++ b/packages/lib/components/MazLoadingBar.vue
@@ -26,8 +26,9 @@
 
 <style lang="postcss" scoped>
   .m-loading-bar {
-    @apply maz-relative maz-block maz-h-0.5 maz-w-full maz-overflow-hidden maz-bg-primary-alpha-20;
+    @apply maz-relative maz-block maz-w-full maz-overflow-hidden;
 
+    height: v-bind('height');
     background-color: v-bind('colorCSVariables.alpha');
     overflow: hidden;
 
diff --git a/packages/lib/tests/specs/components/__snapshots__/maz-loading-bar.spec.ts.snap b/packages/lib/tests/specs/components/__snapshots__/maz-loading-bar.spec.ts.snap
new file mode 100644
index 0000000000..c639de9093
--- /dev/null
+++ b/packages/lib/tests/specs/components/__snapshots__/maz-loading-bar.spec.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MazLoadingBar > renders correct HTML structure 1`] = `
+"<div data-v-744a78bd="" class="m-loading-bar">
+  <div data-v-744a78bd=""></div>
+</div>"
+`;
diff --git a/packages/lib/tests/specs/components/__snapshots__/maz-table.spec.ts.snap b/packages/lib/tests/specs/components/__snapshots__/maz-table.spec.ts.snap
new file mode 100644
index 0000000000..fb813e89dc
--- /dev/null
+++ b/packages/lib/tests/specs/components/__snapshots__/maz-table.spec.ts.snap
@@ -0,0 +1,35 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MazTable > should render the component 1`] = `
+"<div data-v-ac035b54="" class="m-table">
+  <!--v-if-->
+  <table data-v-ac035b54="" class="">
+    <!--v-if-->
+    <thead data-v-ac035b54="">
+      <!--
+          @slot thead - content in thead element
+        -->
+      <maztablerow data-v-ac035b54="" no-hoverable="">
+        <!--v-if-->
+        <!--v-if-->
+      </maztablerow>
+    </thead>
+    <!--v-if-->
+    <tbody data-v-ac035b54="" class="">
+      <maztablerow data-v-ac035b54="">
+        <maztablecell data-v-ac035b54="" colspan="0">
+          <!--
+                  @slot no-results - replace no results
+                -->
+          <p data-v-ac035b54="" class="maz-text-center maz-text-muted">
+            <!--
+                      @slot no-results-text - replace no results test only
+                    --> No results
+          </p>
+        </maztablecell>
+      </maztablerow>
+    </tbody>
+  </table>
+  <!--v-if-->
+</div>"
+`;
diff --git a/packages/lib/tests/specs/components/maz-btn.spec.ts b/packages/lib/tests/specs/components/maz-btn.spec.ts
index 4ef59ceea8..d7ee5334a8 100644
--- a/packages/lib/tests/specs/components/maz-btn.spec.ts
+++ b/packages/lib/tests/specs/components/maz-btn.spec.ts
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils'
 
 describe('MazBtn', () => {
   test('renders the component elements and classes correctly', () => {
-    const wrapper = shallowMount(MazBtn)
+    const wrapper = shallowMount(MazBtn, { slots: { default: 'Button Text' } })
 
     expect(wrapper.find('button').exists()).toBe(true)
     expect(wrapper.find('.m-btn__icon-left').exists()).toBe(false)
diff --git a/packages/lib/tests/specs/components/maz-loading-bar.spec.ts b/packages/lib/tests/specs/components/maz-loading-bar.spec.ts
new file mode 100644
index 0000000000..0c70caf4df
--- /dev/null
+++ b/packages/lib/tests/specs/components/maz-loading-bar.spec.ts
@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils'
+import MazLoadingBar from '@components/MazLoadingBar.vue'
+
+describe('MazLoadingBar', () => {
+  test('renders default color correctly', () => {
+    const wrapper = mount(MazLoadingBar)
+    expect(wrapper.vm.colorCSVariables.alpha).toBe('var(--maz-color-primary-alpha-20)')
+    expect(wrapper.vm.colorCSVariables.main).toBe('var(--maz-color-primary)')
+  })
+})