diff --git a/libs/ui/package.json b/libs/ui/package.json
index cd489c6ae7..66449e23a6 100644
--- a/libs/ui/package.json
+++ b/libs/ui/package.json
@@ -22,6 +22,8 @@
     "vite": "^4.5.0"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
     "@google/model-viewer": "^3.3.0",
     "@vueuse/core": "^9.13.0",
     "bulma": "0.9.4",
diff --git a/libs/ui/src/components/NeoLoading/NeoLoading.scss b/libs/ui/src/components/NeoLoading/NeoLoading.scss
index ccd948fb36..77ec705f8e 100644
--- a/libs/ui/src/components/NeoLoading/NeoLoading.scss
+++ b/libs/ui/src/components/NeoLoading/NeoLoading.scss
@@ -1,13 +1,8 @@
-@import '../../scss/theme';
 @import '@oruga-ui/oruga-next/src/scss/utilities/expressions.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/variables.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/animations.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/helpers.scss';
-@import '../../scss/variable.scss';
 
+$loading-overlay: rgb(0 0 0 / 0.5);
 
 @import '@oruga-ui/oruga-next/src/scss/components/loading.scss';
-
-.o-load__overlay {
-  background-color: rgba(0, 0, 0, 0.5);
-}
diff --git a/libs/ui/src/components/NeoLoading/NeoLoading.story.vue b/libs/ui/src/components/NeoLoading/NeoLoading.story.vue
index e3cccac322..f875fe5215 100644
--- a/libs/ui/src/components/NeoLoading/NeoLoading.story.vue
+++ b/libs/ui/src/components/NeoLoading/NeoLoading.story.vue
@@ -1,7 +1,7 @@
 <template>
   <Story title="NeoLoading" :layout="{ type: 'grid', width: '200px' }">
     <Variant title="Loading">
-      <NeoLoading> Neo Loader</NeoLoading>
+      <NeoLoading :active="true" />
     </Variant>
   </Story>
 </template>
diff --git a/libs/ui/src/components/NeoLoading/NeoLoading.vue b/libs/ui/src/components/NeoLoading/NeoLoading.vue
index b0f791a4af..8bc75d0dd3 100644
--- a/libs/ui/src/components/NeoLoading/NeoLoading.vue
+++ b/libs/ui/src/components/NeoLoading/NeoLoading.vue
@@ -1,7 +1,7 @@
 <template>
   <OLoading v-bind="$attrs">
     <slot>
-      <NeoIcon icon="spinner-third" spin size="large" class="has-text-white" />
+      <NeoIcon icon="spinner-third" spin size="large" class="text-white" />
     </slot>
   </OLoading>
 </template>
diff --git a/libs/ui/src/histoire.setup.ts b/libs/ui/src/histoire.setup.ts
index 630885e02e..ce74f6fc83 100644
--- a/libs/ui/src/histoire.setup.ts
+++ b/libs/ui/src/histoire.setup.ts
@@ -1 +1,28 @@
 import './histoire.scss'
+
+import { defineSetupVue3 } from '@histoire/plugin-vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { Neo } from './'
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+  const script = document.createElement('script')
+  script.src = 'https://kit.fontawesome.com/54f29b7997.js'
+  script.crossOrigin = 'anonymous'
+  script.async = true
+
+  document.body.appendChild(script)
+
+  app.component('FontAwesomeIcon', FontAwesomeIcon).use(Neo, {
+    customIconPacks: {
+      fass: {
+        iconPrefix: 'fa-fw fa-',
+      },
+      fasr: {
+        iconPrefix: 'fa-fw fa-',
+      },
+      fab: {
+        iconPrefix: 'fa-fw fa-',
+      },
+    },
+  })
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd89005502..d3e5100229 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -384,6 +384,12 @@ importers:
 
   libs/ui:
     dependencies:
+      '@fortawesome/fontawesome-svg-core':
+        specifier: ^6.4.2
+        version: 6.4.2
+      '@fortawesome/vue-fontawesome':
+        specifier: ^3.0.5
+        version: 3.0.5(@fortawesome/fontawesome-svg-core@6.4.2)(vue@3.3.9)
       '@google/model-viewer':
         specifier: ^3.3.0
         version: 3.3.0(three@0.158.0)