diff --git a/.eslintrc.json b/.eslintrc.json
index 4a87c8ea..5f7a672f 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -22,6 +22,7 @@
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "double", "avoid-escape"],
     "semi": ["error", "always"],
+    "vue/multi-word-component-names": "off",
     "vue/order-in-components": [
       "error",
       {
diff --git a/.npmignore b/.npmignore
index 5d0c303a..bd9bde3e 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,5 +1,2 @@
-# ignore test files
-src/**/__test__/
-
 # ignore design system app files
 src/web/
diff --git a/package.json b/package.json
index 705c4a40..f3b3f632 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
     "src/BIMDataDirectives",
     "src/BIMDataSmartComponents",
     "design-system.png",
-    "index.js",
     "vue3-plugin.js"
   ],
   "scripts": {
@@ -41,4 +40,4 @@
     "vue-router": "^4.2.2",
     "vue3-clipboard": "^1.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/BIMDataComponents/BIMDataBigSpinner/BIMDataBigSpinner.vue b/src/BIMDataComponents/BIMDataBigSpinner/BIMDataBigSpinner.vue
index 0a94680e..96798b7d 100644
--- a/src/BIMDataComponents/BIMDataBigSpinner/BIMDataBigSpinner.vue
+++ b/src/BIMDataComponents/BIMDataBigSpinner/BIMDataBigSpinner.vue
@@ -40,7 +40,4 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import "./_keyframes.scss";
-@import "./_BIMDataBigSpinner.scss";
-</style>
+<style scoped lang="scss" src="./_BIMDataBigSpinner.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataBigSpinner/_BIMDataBigSpinner.scss b/src/BIMDataComponents/BIMDataBigSpinner/_BIMDataBigSpinner.scss
index 41a051d9..39c8a464 100644
--- a/src/BIMDataComponents/BIMDataBigSpinner/_BIMDataBigSpinner.scss
+++ b/src/BIMDataComponents/BIMDataBigSpinner/_BIMDataBigSpinner.scss
@@ -1,3 +1,5 @@
+@import "./_keyframes.scss";
+
 .animate-draw {
   opacity: 1;
   animation: 0.5s ease-in-out 0s infinite alternate fadeInOut;
diff --git a/src/BIMDataComponents/BIMDataBreadcrumb/BIMDataBreadcrumb.vue b/src/BIMDataComponents/BIMDataBreadcrumb/BIMDataBreadcrumb.vue
index 127992b5..3f90afd8 100644
--- a/src/BIMDataComponents/BIMDataBreadcrumb/BIMDataBreadcrumb.vue
+++ b/src/BIMDataComponents/BIMDataBreadcrumb/BIMDataBreadcrumb.vue
@@ -100,7 +100,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .bimdata-breadcrumb {
   display: flex;
   align-items: center;
diff --git a/src/BIMDataComponents/BIMDataBurgerMenu/BIMDataBurgerMenu.vue b/src/BIMDataComponents/BIMDataBurgerMenu/BIMDataBurgerMenu.vue
deleted file mode 100644
index f3855613..00000000
--- a/src/BIMDataComponents/BIMDataBurgerMenu/BIMDataBurgerMenu.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <BIMDataIcon name="burgerMenu" size="xxs" />
-</template>
-
-<script>
-/* import BIMData ICONS */
-import BIMDataIcon from "../BIMDataIcon/BIMDataIcon.vue";
-
-export default {
-  components: {
-    BIMDataIcon,
-  },
-};
-</script>
diff --git a/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue b/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue
index 9656f5c1..0b172048 100644
--- a/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue
+++ b/src/BIMDataComponents/BIMDataButton/BIMDataButton.vue
@@ -91,9 +91,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../assets/css/variables.css";
-@import "../../assets/css/utilities/_text.css";
-</style>
-
-<style lang="scss" src="./_BIMDataButton.scss"></style>
+<style scoped lang="scss" src="./_BIMDataButton.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataButton/_BIMDataButton.scss b/src/BIMDataComponents/BIMDataButton/_BIMDataButton.scss
index 586eea18..f37f65b5 100644
--- a/src/BIMDataComponents/BIMDataButton/_BIMDataButton.scss
+++ b/src/BIMDataComponents/BIMDataButton/_BIMDataButton.scss
@@ -1,4 +1,5 @@
 @import "../../assets/scss/mixins/_font-size.scss";
+
 .bimdata-btn {
   padding: 0 var(--spacing-unit);
   height: fit-content;
diff --git a/src/BIMDataComponents/BIMDataButton/__tests__/BIMDataButton.test.js b/src/BIMDataComponents/BIMDataButton/__tests__/BIMDataButton.test.js
deleted file mode 100644
index 9ad78a45..00000000
--- a/src/BIMDataComponents/BIMDataButton/__tests__/BIMDataButton.test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import BIMDataButton from "../BIMDataButton.vue";
-
-describe("BIMDataButton", () => {
-  it("should render component and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataButton);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render a button with a slot and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataButton, {
-      slots: {
-        default: "<span>test</span>",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render a button with a custom width and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataButton, {
-      propsData: {
-        width: "50px",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render a button with a custom height and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataButton, {
-      propsData: {
-        height: "50px",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should emit a click event", () => {
-    const onClick = jest.fn();
-    const wrapper = shallowMount(BIMDataButton, {
-      listeners: {
-        click: onClick,
-      },
-    });
-    wrapper.trigger("click");
-    expect(onClick).toHaveBeenCalled();
-  });
-});
diff --git a/src/BIMDataComponents/BIMDataButton/__tests__/__snapshots__/BIMDataButton.test.js.snap b/src/BIMDataComponents/BIMDataButton/__tests__/__snapshots__/BIMDataButton.test.js.snap
deleted file mode 100644
index d859c4f5..00000000
--- a/src/BIMDataComponents/BIMDataButton/__tests__/__snapshots__/BIMDataButton.test.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BIMDataButton should render a button with a custom height and match snapshot 1`] = `"<button color=\\"default\\" type=\\"button\\" class=\\"bimdata-btn\\" style=\\"min-width: 32px; min-height: 50px;\\"></button>"`;
-
-exports[`BIMDataButton should render a button with a custom width and match snapshot 1`] = `"<button color=\\"default\\" type=\\"button\\" class=\\"bimdata-btn\\" style=\\"min-width: 50px; min-height: 32px;\\"></button>"`;
-
-exports[`BIMDataButton should render a button with a slot and match snapshot 1`] = `"<button color=\\"default\\" type=\\"button\\" class=\\"bimdata-btn\\" style=\\"min-width: 32px; min-height: 32px;\\"><span>test</span></button>"`;
-
-exports[`BIMDataButton should render component and match snapshot 1`] = `"<button color=\\"default\\" type=\\"button\\" class=\\"bimdata-btn\\" style=\\"min-width: 32px; min-height: 32px;\\"></button>"`;
diff --git a/src/BIMDataComponents/BIMDataCard/BIMDataCard.vue b/src/BIMDataComponents/BIMDataCard/BIMDataCard.vue
index 1de4ba20..5e5a0cbf 100644
--- a/src/BIMDataComponents/BIMDataCard/BIMDataCard.vue
+++ b/src/BIMDataComponents/BIMDataCard/BIMDataCard.vue
@@ -73,9 +73,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../assets/css/variables.css";
-@import "../../assets/css/utilities/_text.css";
-</style>
-
-<style lang="scss" src="./_BIMDataCard.scss"></style>
+<style scoped lang="scss" src="./_BIMDataCard.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataCard/BIMDataCardBand.vue b/src/BIMDataComponents/BIMDataCard/BIMDataCardBand.vue
index a26d43ea..99e1a4af 100644
--- a/src/BIMDataComponents/BIMDataCard/BIMDataCardBand.vue
+++ b/src/BIMDataComponents/BIMDataCard/BIMDataCardBand.vue
@@ -18,6 +18,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped src="../../assets/css/variables.css"></style>
-
-<style lang="scss" src="./_BIMDataCardBrand.scss"></style>
+<style scoped lang="scss" src="./_BIMDataCardBrand.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataCard/_BIMDataCard.scss b/src/BIMDataComponents/BIMDataCard/_BIMDataCard.scss
index 56772581..46b69421 100644
--- a/src/BIMDataComponents/BIMDataCard/_BIMDataCard.scss
+++ b/src/BIMDataComponents/BIMDataCard/_BIMDataCard.scss
@@ -1,4 +1,5 @@
 @import "../../assets/scss/mixins/_font-size.scss";
+
 .bimdata-card {
   background-color: var(--color-white);
   box-shadow: var(--box-shadow);
diff --git a/src/BIMDataComponents/BIMDataCard/__tests__/BIMDataCard.test.js b/src/BIMDataComponents/BIMDataCard/__tests__/BIMDataCard.test.js
deleted file mode 100644
index d3d6c113..00000000
--- a/src/BIMDataComponents/BIMDataCard/__tests__/BIMDataCard.test.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import BIMDataCard from "../BIMDataCard.vue";
-
-describe("BIMDataCard", () => {
-  it("should render component and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataCard);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with title header", () => {
-    const wrapper = shallowMount(BIMDataCard, {
-      propsData: {
-        titleHeader: "Hearder title card",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with submenu text", () => {
-    const wrapper = shallowMount(BIMDataCard, {
-      propsData: {
-        submenuText: "Submenu text card",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with a custom width", () => {
-    const wrapper = shallowMount(BIMDataCard, {
-      propsData: {
-        width: "350px",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render a card with a headerIcons slot and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataCard, {
-      slots: {
-        headerIcons: "<span>header icons slot</span>",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render a card with a left slot and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataCard, {
-      slots: {
-        left: "<span>left slot</span>",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render a card with a left slot and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataCard, {
-      slots: {
-        right: "<span>right slot</span>",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render a card with a content slot and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataCard, {
-      slots: {
-        content: "<span>content slot</span>",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render a card with a footer slot and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataCard, {
-      slots: {
-        footer: "<span>footer slot</span>",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-});
diff --git a/src/BIMDataComponents/BIMDataCard/__tests__/__snapshots__/BIMDataCard.test.js.snap b/src/BIMDataComponents/BIMDataCard/__tests__/__snapshots__/BIMDataCard.test.js.snap
deleted file mode 100644
index ca32652a..00000000
--- a/src/BIMDataComponents/BIMDataCard/__tests__/__snapshots__/BIMDataCard.test.js.snap
+++ /dev/null
@@ -1,82 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BIMDataCard should render a card with a content slot and match snapshot 1`] = `
-"<div class=\\"bimdata-card bimdata-card__default\\" style=\\"min-width: 215px; border-radius: 0px;\\">
-  <!---->
-  <!---->
-  <div class=\\"bimdata-card__content\\"><span>content slot</span></div>
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataCard should render a card with a footer slot and match snapshot 1`] = `
-"<div class=\\"bimdata-card bimdata-card__default\\" style=\\"min-width: 215px; border-radius: 0px;\\">
-  <!---->
-  <!---->
-  <!---->
-  <footer class=\\"bimdata-card__footer\\"><span>footer slot</span></footer>
-</div>"
-`;
-
-exports[`BIMDataCard should render a card with a headerIcons slot and match snapshot 1`] = `
-"<div class=\\"bimdata-card bimdata-card__default\\" style=\\"min-width: 215px; border-radius: 0px;\\">
-  <bimdatacardband-stub class=\\"bimdata-card__header\\"></bimdatacardband-stub>
-  <!---->
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataCard should render a card with a left slot and match snapshot 1`] = `
-"<div class=\\"bimdata-card bimdata-card__default\\" style=\\"min-width: 215px; border-radius: 0px;\\">
-  <!---->
-  <bimdatacardband-stub class=\\"bimdata-card__submenu\\"></bimdatacardband-stub>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataCard should render a card with a left slot and match snapshot 2`] = `
-"<div class=\\"bimdata-card bimdata-card__default\\" style=\\"min-width: 215px; border-radius: 0px;\\">
-  <!---->
-  <bimdatacardband-stub class=\\"bimdata-card__submenu\\"></bimdatacardband-stub>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataCard should render component and match snapshot 1`] = `
-"<div class=\\"bimdata-card bimdata-card__default\\" style=\\"min-width: 215px; border-radius: 0px;\\">
-  <!---->
-  <!---->
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataCard should render component with a custom width 1`] = `
-"<div class=\\"bimdata-card bimdata-card__default\\" style=\\"min-width: 350px; border-radius: 0px;\\">
-  <!---->
-  <!---->
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataCard should render component with submenu text 1`] = `
-"<div class=\\"bimdata-card bimdata-card__default\\" style=\\"min-width: 215px; border-radius: 0px;\\">
-  <!---->
-  <bimdatacardband-stub text=\\"Submenu text card\\" class=\\"bimdata-card__submenu\\"></bimdatacardband-stub>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataCard should render component with title header 1`] = `
-"<div class=\\"bimdata-card bimdata-card__default\\" style=\\"min-width: 215px; border-radius: 0px;\\">
-  <bimdatacardband-stub text=\\"Hearder title card\\" class=\\"bimdata-card__header\\"></bimdatacardband-stub>
-  <!---->
-  <!---->
-  <!---->
-</div>"
-`;
diff --git a/src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue b/src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue
index 91ce5ca8..0735917a 100644
--- a/src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue
+++ b/src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue
@@ -65,9 +65,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../assets/css/variables.css";
-@import "../../assets/css/utilities/_text.css";
-</style>
-
-<style lang="scss" src="./_BIMDataCheckbox.scss"></style>
+<style scoped lang="scss" src="./_BIMDataCheckbox.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataCheckbox/_BIMDataCheckbox.scss b/src/BIMDataComponents/BIMDataCheckbox/_BIMDataCheckbox.scss
index 300ace41..18863f73 100644
--- a/src/BIMDataComponents/BIMDataCheckbox/_BIMDataCheckbox.scss
+++ b/src/BIMDataComponents/BIMDataCheckbox/_BIMDataCheckbox.scss
@@ -1,5 +1,5 @@
-// import BIMDATA MIXINS
 @import "../../assets/scss/mixins/_font-size.scss";
+
 //custom LABEL
 .bimdata-checkbox {
   position: relative;
diff --git a/src/BIMDataComponents/BIMDataCheckbox/__tests__/BIMDataCheckbox.test.js b/src/BIMDataComponents/BIMDataCheckbox/__tests__/BIMDataCheckbox.test.js
deleted file mode 100644
index 1358f56d..00000000
--- a/src/BIMDataComponents/BIMDataCheckbox/__tests__/BIMDataCheckbox.test.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import BIMDataCheckbox from "../BIMDataCheckbox.vue";
-
-describe("BIMDataCheckbox", () => {
-  it("should render component and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataCheckbox, {
-      propsData: {
-        modelValue: false,
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with text and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataCheckbox, {
-      propsData: {
-        modelValue: false,
-        text: "text checkbox",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should contain 'bimdata-checkbox' class when state false", () => {
-    const wrapper = shallowMount(BIMDataCheckbox, {
-      propsData: {
-        modelValue: false,
-      },
-    });
-
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should contain 'bimdata-chekbox' and 'checked' class when state true", () => {
-    const wrapper = shallowMount(BIMDataCheckbox, {
-      propsData: {
-        modelValue: true,
-      },
-    });
-
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should contain 'bimdata-chekbox', 'checked' and 'indeterminate' class when state null", () => {
-    const wrapper = shallowMount(BIMDataCheckbox, {
-      propsData: {
-        modelValue: null,
-      },
-    });
-
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should emit change with true if state is false", () => {
-    const onClick = jest.fn();
-    const wrapper = shallowMount(BIMDataCheckbox, {
-      propsData: {
-        modelValue: false,
-      },
-      listeners: {
-        "update:modelValue": onClick,
-      },
-    });
-    wrapper.trigger("click");
-    expect(onClick).toHaveBeenCalledWith(true);
-  });
-
-  it("should emit change with false if state is true", () => {
-    const onClick = jest.fn();
-    const wrapper = shallowMount(BIMDataCheckbox, {
-      propsData: {
-        modelValue: true,
-      },
-      listeners: {
-        "update:modelValue": onClick,
-      },
-    });
-    wrapper.trigger("click");
-    expect(onClick).toHaveBeenCalledWith(false);
-  });
-
-  it("should emit change with false if state is null", () => {
-    const onClick = jest.fn();
-    const wrapper = shallowMount(BIMDataCheckbox, {
-      propsData: {
-        modelValue: null,
-      },
-      listeners: {
-        "update:modelValue": onClick,
-      },
-    });
-    wrapper.trigger("click");
-    expect(onClick).toHaveBeenCalledWith(false);
-  });
-});
diff --git a/src/BIMDataComponents/BIMDataCheckbox/__tests__/__snapshots__/BIMDataCheckbox.test.js.snap b/src/BIMDataComponents/BIMDataCheckbox/__tests__/__snapshots__/BIMDataCheckbox.test.js.snap
deleted file mode 100644
index 8a49d16f..00000000
--- a/src/BIMDataComponents/BIMDataCheckbox/__tests__/__snapshots__/BIMDataCheckbox.test.js.snap
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BIMDataCheckbox should contain 'bimdata-checkbox' class when state false 1`] = `
-"<div class=\\"bimdata-checkbox\\" style=\\"margin: 0px;\\"><span class=\\"bimdata-checkbox__mark\\"></span>
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataCheckbox should contain 'bimdata-chekbox' and 'checked' class when state true 1`] = `
-"<div class=\\"bimdata-checkbox checked\\" style=\\"margin: 0px;\\"><span class=\\"bimdata-checkbox__mark\\"></span>
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataCheckbox should contain 'bimdata-chekbox', 'checked' and 'indeterminate' class when state null 1`] = `
-"<div class=\\"bimdata-checkbox indeterminate checked\\" style=\\"margin: 0px;\\"><span class=\\"bimdata-checkbox__mark\\"></span>
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataCheckbox should render component and match snapshot 1`] = `
-"<div class=\\"bimdata-checkbox\\" style=\\"margin: 0px;\\"><span class=\\"bimdata-checkbox__mark\\"></span>
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataCheckbox should render component with text and match snapshot 1`] = `"<div class=\\"bimdata-checkbox\\" style=\\"margin: 0px;\\"><span class=\\"bimdata-checkbox__mark\\"></span> <span class=\\"bimdata-checkbox__text\\">text checkbox</span></div>"`;
diff --git a/src/BIMDataComponents/BIMDataDatePicker/BIMDataDatePicker.vue b/src/BIMDataComponents/BIMDataDatePicker/BIMDataDatePicker.vue
index 37177c99..2f33f3bb 100644
--- a/src/BIMDataComponents/BIMDataDatePicker/BIMDataDatePicker.vue
+++ b/src/BIMDataComponents/BIMDataDatePicker/BIMDataDatePicker.vue
@@ -877,10 +877,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../assets/css/variables.css";
-</style>
-
-<style lang="scss" src="">
-@import "./_BIMDataDatePicker.scss";
-</style>
+<style scoped lang="scss" src="./_BIMDataDatePicker.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataDatePicker/_BIMDataDatePicker.scss b/src/BIMDataComponents/BIMDataDatePicker/_BIMDataDatePicker.scss
index 7ba41895..30fa94d5 100644
--- a/src/BIMDataComponents/BIMDataDatePicker/_BIMDataDatePicker.scss
+++ b/src/BIMDataComponents/BIMDataDatePicker/_BIMDataDatePicker.scss
@@ -1,4 +1,3 @@
-@import "../../assets/css/transitions.css";
 .bimdata-datepicker {
   position: relative;
   text-align: left;
diff --git a/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue b/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue
index 64f4c90c..5bb9e7a5 100644
--- a/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue
+++ b/src/BIMDataComponents/BIMDataDropdownList/BIMDataDropdownList.vue
@@ -142,6 +142,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped src="../../assets/css/variables.css"></style>
-
-<style lang="scss" src="./_BIMDataDropdownList.scss"></style>
+<style scoped lang="scss" src="./_BIMDataDropdownList.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataDropdownList/_BIMDataDropdownList.scss b/src/BIMDataComponents/BIMDataDropdownList/_BIMDataDropdownList.scss
index 7f8d05db..f063bef1 100644
--- a/src/BIMDataComponents/BIMDataDropdownList/_BIMDataDropdownList.scss
+++ b/src/BIMDataComponents/BIMDataDropdownList/_BIMDataDropdownList.scss
@@ -1,6 +1,3 @@
-@import "../../assets/css/transitions.css";
-@import "../../assets/css/elements/_submenu.css";
-
 .bimdata-dropdown-list {
   height: 42px;
   position: relative;
diff --git a/src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue b/src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue
index 4041d8cc..92acc4cc 100644
--- a/src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue
+++ b/src/BIMDataComponents/BIMDataDropdownMenu/BIMDataDropdownMenu.vue
@@ -200,10 +200,4 @@ export default {
 };
 </script>
 
-<style
-  lang="scss"
-  scoped
-  src="../../assets/css/variables.css"
-></style>
-
-<style lang="scss" src="./_BIMDataDropdownMenu.scss"></style>
+<style scoped lang="scss" src="./_BIMDataDropdownMenu.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataDropdownMenu/_BIMDataDropdownMenu.scss b/src/BIMDataComponents/BIMDataDropdownMenu/_BIMDataDropdownMenu.scss
index 01e510f1..afd933b0 100644
--- a/src/BIMDataComponents/BIMDataDropdownMenu/_BIMDataDropdownMenu.scss
+++ b/src/BIMDataComponents/BIMDataDropdownMenu/_BIMDataDropdownMenu.scss
@@ -1,6 +1,3 @@
-// import BIMDATA VARIABLES
-@import "../../assets/css/transitions.css";
-@import "../../assets/css/elements/_submenu.css";
 .bimdata-dropdown {
   height: 42px;
   position: relative;
diff --git a/src/BIMDataComponents/BIMDataIcon/BIMDataIcon.vue b/src/BIMDataComponents/BIMDataIcon/BIMDataIcon.vue
index e4646eef..1d58ece0 100644
--- a/src/BIMDataComponents/BIMDataIcon/BIMDataIcon.vue
+++ b/src/BIMDataComponents/BIMDataIcon/BIMDataIcon.vue
@@ -116,6 +116,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped src="../../assets/css/variables.css"></style>
-
-<style lang="scss" src="./_BIMDataIcon.scss"></style>
+<style scoped lang="scss" src="./_BIMDataIcon.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconChevron.vue b/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconChevron.vue
index 11d75e8d..50ad4a14 100644
--- a/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconChevron.vue
+++ b/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconChevron.vue
@@ -19,6 +19,4 @@ import makeIcon from "./iconFactory.js";
 export default makeIcon("Chevron", Chevron);
 </script>
 
-<style lang="scss" scoped src="../../../assets/css/variables.css"></style>
-
-<style lang="scss" src="../_BIMDataIcon.scss"></style>
+<style scoped lang="scss" src="../_BIMDataIcon.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconClose.vue b/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconClose.vue
index b0186221..72118e2a 100644
--- a/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconClose.vue
+++ b/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconClose.vue
@@ -19,6 +19,4 @@ import makeIcon from "./iconFactory.js";
 export default makeIcon("Close", Close);
 </script>
 
-<style lang="scss" scoped src="../../../assets/css/variables.css"></style>
-
-<style lang="scss" src="../_BIMDataIcon.scss"></style>
+<style scoped lang="scss" src="../_BIMDataIcon.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconDoubleChevron.vue b/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconDoubleChevron.vue
index 46234d43..f76f53c7 100644
--- a/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconDoubleChevron.vue
+++ b/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconDoubleChevron.vue
@@ -19,6 +19,4 @@ import makeIcon from "./iconFactory.js";
 export default makeIcon("DoubleChevron", DoubleChevron);
 </script>
 
-<style lang="scss" scoped src="../../../assets/css/variables.css"></style>
-
-<style lang="scss" src="../_BIMDataIcon.scss"></style>
+<style scoped lang="scss" src="../_BIMDataIcon.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconSearch.vue b/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconSearch.vue
index a0ab31ce..b1e19b30 100644
--- a/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconSearch.vue
+++ b/src/BIMDataComponents/BIMDataIcon/BIMDataIconStandalone/BIMDataIconSearch.vue
@@ -19,6 +19,4 @@ import makeIcon from "./iconFactory.js";
 export default makeIcon("Search", Search);
 </script>
 
-<style lang="scss" scoped src="../../../assets/css/variables.css"></style>
-
-<style lang="scss" src="../_BIMDataIcon.scss"></style>
+<style scoped lang="scss" src="../_BIMDataIcon.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataIllustration/BIMDataIllustration.vue b/src/BIMDataComponents/BIMDataIllustration/BIMDataIllustration.vue
index 68a41c34..be00cff5 100644
--- a/src/BIMDataComponents/BIMDataIllustration/BIMDataIllustration.vue
+++ b/src/BIMDataComponents/BIMDataIllustration/BIMDataIllustration.vue
@@ -73,9 +73,3 @@ function formatIconComponentsNames(illustrations = {}) {
   return illustrationsCopy;
 }
 </script>
-
-<style
-  lang="scss"
-  scoped
-  src="../../assets/css/variables.css"
-></style>
diff --git a/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue b/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue
index 5879ffac..1df5fdf2 100644
--- a/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue
+++ b/src/BIMDataComponents/BIMDataInput/BIMDataInput.vue
@@ -113,9 +113,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../assets/css/variables.css";
-@import "../../assets/css/utilities/_text.css";
-</style>
-
-<style lang="scss" src="./_BIMDataInput.scss"></style>
+<style scoped lang="scss" src="./_BIMDataInput.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataInput/_BIMDataInput.scss b/src/BIMDataComponents/BIMDataInput/_BIMDataInput.scss
index c2fd16f6..d4bdec62 100644
--- a/src/BIMDataComponents/BIMDataInput/_BIMDataInput.scss
+++ b/src/BIMDataComponents/BIMDataInput/_BIMDataInput.scss
@@ -1,7 +1,6 @@
-// import BIMDATA MIXINS
 @import "../../assets/scss/mixins/_font-size.scss";
-// import COMPONENT STYLE
 @import "./_keyframes.scss";
+
 input:-webkit-autofill {
   box-shadow: 0 0 0px 1000px var(--color-white) inset;
 }
diff --git a/src/BIMDataComponents/BIMDataInput/__tests__/BIMDataInput.test.js b/src/BIMDataComponents/BIMDataInput/__tests__/BIMDataInput.test.js
deleted file mode 100644
index 8371c8d3..00000000
--- a/src/BIMDataComponents/BIMDataInput/__tests__/BIMDataInput.test.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import BIMDataInput from "../BIMDataInput.vue";
-
-describe("BIMDataInput", () => {
-  it("should render component and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataInput);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with placeholder and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataInput, {
-      propsData: {
-        placeholder: "input placeholder",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with error message and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataInput, {
-      propsData: {
-        error: true,
-        errorMessage: "error message",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with success message and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataInput, {
-      propsData: {
-        success: true,
-        successMessage: "success message",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render loading component and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataInput, {
-      propsData: {
-        loading: true,
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render disabled component and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataInput, {
-      propsData: {
-        disabled: true,
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with 'not empty' class and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataInput, {
-      propsData: {
-        modelValue: "text message",
-      },
-    });
-    expect(wrapper.classes("not-empty")).toBe(true);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should work with v-model binding", async () => {
-    const onInput = jest.fn();
-    const wrapper = shallowMount(BIMDataInput, {
-      listeners: {
-        "update:modelValue": onInput,
-      },
-    });
-    expect(wrapper.find("input").element.value).toBe("");
-
-    wrapper.find("input").setValue("x");
-    expect(onInput).toHaveBeenCalledWith("x");
-
-    wrapper.setProps({ modelValue: "message" });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.find("input").element.value).toBe("message");
-  });
-
-  it("should render a button with a slot and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataInput, {
-      slots: {
-        inputIcon: "test icon slot",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-});
diff --git a/src/BIMDataComponents/BIMDataInput/__tests__/__snapshots__/BIMDataInput.test.js.snap b/src/BIMDataComponents/BIMDataInput/__tests__/__snapshots__/BIMDataInput.test.js.snap
deleted file mode 100644
index 892793b1..00000000
--- a/src/BIMDataComponents/BIMDataInput/__tests__/__snapshots__/BIMDataInput.test.js.snap
+++ /dev/null
@@ -1,63 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BIMDataInput should render a button with a slot and match snapshot 1`] = `
-"<div class=\\"bimdata-input\\" style=\\"margin: 12px 0px;\\"><input id=\\"bimdata-input-8\\" autocomplete=\\"off\\">
-  <div class=\\"bimdata-input__icon\\">test icon slot</div> <label for=\\"bimdata-input-8\\"></label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataInput should render component and match snapshot 1`] = `
-"<div class=\\"bimdata-input\\" style=\\"margin: 12px 0px;\\"><input id=\\"bimdata-input-0\\" autocomplete=\\"off\\">
-  <div class=\\"bimdata-input__icon\\"></div> <label for=\\"bimdata-input-0\\"></label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataInput should render component with 'not empty' class and match snapshot 1`] = `
-"<div class=\\"bimdata-input not-empty\\" style=\\"margin: 12px 0px;\\"><input id=\\"bimdata-input-6\\" autocomplete=\\"off\\">
-  <div class=\\"bimdata-input__icon\\"></div> <label for=\\"bimdata-input-6\\"></label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataInput should render component with error message and match snapshot 1`] = `
-"<div class=\\"bimdata-input error\\" style=\\"margin: 12px 0px;\\"><input id=\\"bimdata-input-2\\" autocomplete=\\"off\\">
-  <div class=\\"bimdata-input__icon\\"></div> <label for=\\"bimdata-input-2\\"></label> <span class=\\"bar\\"></span> <span class=\\"error\\">error message</span>
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataInput should render component with placeholder and match snapshot 1`] = `
-"<div class=\\"bimdata-input\\" style=\\"margin: 12px 0px;\\"><input id=\\"bimdata-input-1\\" autocomplete=\\"off\\">
-  <div class=\\"bimdata-input__icon\\"></div> <label for=\\"bimdata-input-1\\">input placeholder</label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataInput should render component with success message and match snapshot 1`] = `
-"<div class=\\"bimdata-input success\\" style=\\"margin: 12px 0px;\\"><input id=\\"bimdata-input-3\\" autocomplete=\\"off\\">
-  <div class=\\"bimdata-input__icon\\"></div> <label for=\\"bimdata-input-3\\"></label> <span class=\\"bar\\"></span>
-  <!----> <span class=\\"success\\">success message</span>
-</div>"
-`;
-
-exports[`BIMDataInput should render disabled component and match snapshot 1`] = `
-"<div class=\\"bimdata-input disabled\\" style=\\"margin: 12px 0px;\\"><input id=\\"bimdata-input-5\\" disabled=\\"disabled\\" autocomplete=\\"off\\">
-  <div class=\\"bimdata-input__icon\\"></div> <label for=\\"bimdata-input-5\\"></label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataInput should render loading component and match snapshot 1`] = `
-"<div class=\\"bimdata-input loading\\" style=\\"margin: 12px 0px;\\"><input id=\\"bimdata-input-4\\" autocomplete=\\"off\\">
-  <div class=\\"bimdata-input__icon\\"></div> <label for=\\"bimdata-input-4\\"></label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
diff --git a/src/BIMDataComponents/BIMDataLoading/BIMDataLoading.vue b/src/BIMDataComponents/BIMDataLoading/BIMDataLoading.vue
index 820047d0..9570d1aa 100644
--- a/src/BIMDataComponents/BIMDataLoading/BIMDataLoading.vue
+++ b/src/BIMDataComponents/BIMDataLoading/BIMDataLoading.vue
@@ -27,6 +27,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped src="../../assets/css/variables.css"></style>
-
-<style lang="scss" src="./_BIMDataLoading.scss"></style>
+<style scoped lang="scss" src="./_BIMDataLoading.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataLoading/_BIMDataLoading.scss b/src/BIMDataComponents/BIMDataLoading/_BIMDataLoading.scss
index 3a88150f..e1f1d5ca 100644
--- a/src/BIMDataComponents/BIMDataLoading/_BIMDataLoading.scss
+++ b/src/BIMDataComponents/BIMDataLoading/_BIMDataLoading.scss
@@ -1,4 +1,5 @@
 @import "./_keyframes.scss";
+
 .bimdata-loading {
   width: 100%;
   height: 100%;
diff --git a/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue b/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
index 6735eee0..a8b9f862 100644
--- a/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
+++ b/src/BIMDataComponents/BIMDataMenu/BIMDataMenu.vue
@@ -151,4 +151,4 @@ export default {
 };
 </script>
 
-<style lang="scss" src="./_BIMDataMenu.scss"></style>
+<style scoped lang="scss" src="./_BIMDataMenu.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataMenuInline/BIMDataMenuInline.vue b/src/BIMDataComponents/BIMDataMenuInline/BIMDataMenuInline.vue
index 5dda3231..d9185f12 100644
--- a/src/BIMDataComponents/BIMDataMenuInline/BIMDataMenuInline.vue
+++ b/src/BIMDataComponents/BIMDataMenuInline/BIMDataMenuInline.vue
@@ -104,4 +104,4 @@ export default {
 };
 </script>
 
-<style lang="scss" src="./_BIMDataMenuInline.scss"></style>
+<style scoped lang="scss" src="./_BIMDataMenuInline.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue b/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue
index aa6af470..1765294b 100644
--- a/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue
+++ b/src/BIMDataComponents/BIMDataNavigation/BIMDataNavigation.vue
@@ -119,9 +119,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../assets/css/variables.css";
-@import "../../assets/css/utilities/_list.css";
-</style>
-
 <style scoped lang="scss" src="./_BIMDataNavigation.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataNavigation/__tests__/BIMDataNavigation.test.js b/src/BIMDataComponents/BIMDataNavigation/__tests__/BIMDataNavigation.test.js
deleted file mode 100644
index 4dd31c8f..00000000
--- a/src/BIMDataComponents/BIMDataNavigation/__tests__/BIMDataNavigation.test.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import BIMDataNavigation from "../BIMDataNavigation.vue";
-import BIMDataButton from "../../BIMDataButton/BIMDataButton.vue";
-
-describe("BIMDataNavigation", () => {
-  it("should render component and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataNavigation);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render a navigation with a left slot and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataNavigation, {
-      slots: {
-        left: "<span>left slot</span>",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render a navigation with a right slot and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataNavigation, {
-      slots: {
-        right: "<span>right slot</span>",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render li tag", () => {
-    const wrapper = shallowMount(BIMDataNavigation);
-    expect(wrapper.find(".bimdata-navigation__item").element).toBeTruthy();
-  });
-
-  it("should not render BIMDataButton", () => {
-    const wrapper = shallowMount(BIMDataNavigation, {
-      propsData: {
-        first: false,
-        last: false,
-        previous: false,
-        next: false,
-      },
-    });
-    expect(wrapper.findComponent(BIMDataButton).exists()).toBe(false);
-  });
-
-  it("should render BIMDataButton disabled", () => {
-    const wrapper = shallowMount(BIMDataNavigation, {
-      propsData: {
-        firstDisabled: true,
-        previousDisabled: true,
-        nextDisabled: true,
-        lastDisabled: true,
-      },
-    });
-    expect(wrapper.findComponent(BIMDataButton).classes("disabled")).toBe(true);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should emit first event", async () => {
-    const wrapper = shallowMount(BIMDataNavigation);
-    wrapper.vm.$emit("first");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("first")).toBeTruthy();
-  });
-
-  it("should emit previous event", async () => {
-    const wrapper = shallowMount(BIMDataNavigation);
-    wrapper.vm.$emit("previous");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("previous")).toBeTruthy();
-  });
-
-  it("should emit next event", async () => {
-    const wrapper = shallowMount(BIMDataNavigation);
-    wrapper.vm.$emit("next");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("next")).toBeTruthy();
-  });
-
-  it("should emit last event", async () => {
-    const wrapper = shallowMount(BIMDataNavigation);
-    wrapper.vm.$emit("last");
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted("last")).toBeTruthy();
-  });
-});
diff --git a/src/BIMDataComponents/BIMDataNavigation/__tests__/__snapshots__/BIMDataNavigation.test.js.snap b/src/BIMDataComponents/BIMDataNavigation/__tests__/__snapshots__/BIMDataNavigation.test.js.snap
deleted file mode 100644
index 31c45e93..00000000
--- a/src/BIMDataComponents/BIMDataNavigation/__tests__/__snapshots__/BIMDataNavigation.test.js.snap
+++ /dev/null
@@ -1,113 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BIMDataNavigation should render BIMDataButton disabled 1`] = `
-"<ul class=\\"bimdata-list bimdata-navigation\\">
-  <li class=\\"bimdata-navigation__left m-r-6\\"></li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" disabled=\\"true\\" class=\\"disabled\\">
-      <bimdataicondoublechevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"180\\" margin=\\"0px\\"></bimdataicondoublechevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" disabled=\\"true\\" class=\\"disabled\\">
-      <bimdataiconchevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"180\\" margin=\\"0px\\"></bimdataiconchevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li></li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" disabled=\\"true\\" class=\\"disabled\\">
-      <bimdataiconchevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"0\\" margin=\\"0px\\"></bimdataiconchevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" disabled=\\"true\\" class=\\"disabled\\">
-      <bimdataicondoublechevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"0\\" margin=\\"0px\\"></bimdataicondoublechevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li class=\\"bimdata-navigation__right\\"></li>
-</ul>"
-`;
-
-exports[`BIMDataNavigation should render a navigation with a left slot and match snapshot 1`] = `
-"<ul class=\\"bimdata-list bimdata-navigation\\">
-  <li class=\\"bimdata-navigation__left m-r-6\\"><span>left slot</span></li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" class=\\"\\">
-      <bimdataicondoublechevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"180\\" margin=\\"0px\\"></bimdataicondoublechevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" class=\\"\\">
-      <bimdataiconchevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"180\\" margin=\\"0px\\"></bimdataiconchevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li></li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" class=\\"\\">
-      <bimdataiconchevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"0\\" margin=\\"0px\\"></bimdataiconchevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" class=\\"\\">
-      <bimdataicondoublechevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"0\\" margin=\\"0px\\"></bimdataicondoublechevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li class=\\"bimdata-navigation__right\\"></li>
-</ul>"
-`;
-
-exports[`BIMDataNavigation should render a navigation with a right slot and match snapshot 1`] = `
-"<ul class=\\"bimdata-list bimdata-navigation\\">
-  <li class=\\"bimdata-navigation__left m-r-6\\"></li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" class=\\"\\">
-      <bimdataicondoublechevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"180\\" margin=\\"0px\\"></bimdataicondoublechevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" class=\\"\\">
-      <bimdataiconchevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"180\\" margin=\\"0px\\"></bimdataiconchevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li></li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" class=\\"\\">
-      <bimdataiconchevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"0\\" margin=\\"0px\\"></bimdataiconchevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" class=\\"\\">
-      <bimdataicondoublechevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"0\\" margin=\\"0px\\"></bimdataicondoublechevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li class=\\"bimdata-navigation__right\\"><span>right slot</span></li>
-</ul>"
-`;
-
-exports[`BIMDataNavigation should render component and match snapshot 1`] = `
-"<ul class=\\"bimdata-list bimdata-navigation\\">
-  <li class=\\"bimdata-navigation__left m-r-6\\"></li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" class=\\"\\">
-      <bimdataicondoublechevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"180\\" margin=\\"0px\\"></bimdataicondoublechevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" class=\\"\\">
-      <bimdataiconchevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"180\\" margin=\\"0px\\"></bimdataiconchevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li></li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" class=\\"\\">
-      <bimdataiconchevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"0\\" margin=\\"0px\\"></bimdataiconchevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li class=\\"bimdata-navigation__item\\">
-    <bimdatabutton-stub width=\\"21px\\" height=\\"21px\\" ghost=\\"true\\" color=\\"default\\" class=\\"\\">
-      <bimdataicondoublechevron-stub color=\\"default\\" fillcolor=\\"currentColor\\" size=\\"xxxs\\" rotate=\\"0\\" margin=\\"0px\\"></bimdataicondoublechevron-stub>
-    </bimdatabutton-stub>
-  </li>
-  <li class=\\"bimdata-navigation__right\\"></li>
-</ul>"
-`;
diff --git a/src/BIMDataComponents/BIMDataPDFViewer/BIMDataPDFViewer.vue b/src/BIMDataComponents/BIMDataPDFViewer/BIMDataPDFViewer.vue
index 4de8449e..56980bea 100644
--- a/src/BIMDataComponents/BIMDataPDFViewer/BIMDataPDFViewer.vue
+++ b/src/BIMDataComponents/BIMDataPDFViewer/BIMDataPDFViewer.vue
@@ -82,9 +82,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// import BIMDATA VARIABLES
-@import "../../assets/css/variables.css";
-
 .pdf-viewer {
   width: 100%;
   height: 100%;
diff --git a/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue b/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue
index 3d13648d..fb2d91f9 100644
--- a/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue
+++ b/src/BIMDataComponents/BIMDataPaginatedList/BIMDataPaginatedList.vue
@@ -156,9 +156,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../assets/css/variables.css";
-@import "../../assets/css/utilities/_list.css";
-</style>
-
 <style scoped lang="scss" src="./_BIMDataPaginatedList.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue b/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue
index 30a422bd..28ba2eb5 100644
--- a/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue
+++ b/src/BIMDataComponents/BIMDataPagination/BIMDataPagination.vue
@@ -92,6 +92,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped src="../../assets/css/variables.css"></style>
-
 <style scoped lang="scss" src="./_BIMDataPagination.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataPieSpinner/BIMDataPieSpinner.vue b/src/BIMDataComponents/BIMDataPieSpinner/BIMDataPieSpinner.vue
index d59f5976..5fb40215 100644
--- a/src/BIMDataComponents/BIMDataPieSpinner/BIMDataPieSpinner.vue
+++ b/src/BIMDataComponents/BIMDataPieSpinner/BIMDataPieSpinner.vue
@@ -75,6 +75,4 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import "./_BIMDataPieSpinner.scss";
-</style>
+<style scoped lang="scss" src="./_BIMDataPieSpinner.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataRadio/BIMDataRadio.vue b/src/BIMDataComponents/BIMDataRadio/BIMDataRadio.vue
index 96e7ca8e..a115ccb2 100644
--- a/src/BIMDataComponents/BIMDataRadio/BIMDataRadio.vue
+++ b/src/BIMDataComponents/BIMDataRadio/BIMDataRadio.vue
@@ -55,9 +55,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../assets/css/variables.css";
-@import "../../assets/css/utilities/_text.css";
-</style>
-
-<style lang="scss" src="./_BIMDataRadio.scss"></style>
+<style scoped lang="scss" src="./_BIMDataRadio.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataRadio/_BIMDataRadio.scss b/src/BIMDataComponents/BIMDataRadio/_BIMDataRadio.scss
index e0f17cfd..658f67b9 100644
--- a/src/BIMDataComponents/BIMDataRadio/_BIMDataRadio.scss
+++ b/src/BIMDataComponents/BIMDataRadio/_BIMDataRadio.scss
@@ -1,4 +1,5 @@
 @import "../../assets/scss/mixins/_font-size.scss";
+
 .bimdata-radio {
   position: relative;
   color: var(--color-primary);
diff --git a/src/BIMDataComponents/BIMDataSearch/BIMDataSearch.vue b/src/BIMDataComponents/BIMDataSearch/BIMDataSearch.vue
index faf3a1b3..ae8cf1b3 100644
--- a/src/BIMDataComponents/BIMDataSearch/BIMDataSearch.vue
+++ b/src/BIMDataComponents/BIMDataSearch/BIMDataSearch.vue
@@ -134,9 +134,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../assets/css/variables.css";
-@import "../../assets/css/utilities/_text.css";
-</style>
-
-<style lang="scss" src="./_BIMDataSearch.scss"></style>
+<style scoped lang="scss" src="./_BIMDataSearch.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataSearch/_BIMDataSearch.scss b/src/BIMDataComponents/BIMDataSearch/_BIMDataSearch.scss
index f7bfdb0a..b19cc243 100644
--- a/src/BIMDataComponents/BIMDataSearch/_BIMDataSearch.scss
+++ b/src/BIMDataComponents/BIMDataSearch/_BIMDataSearch.scss
@@ -1,4 +1,5 @@
 @import "../../assets/scss/mixins/_font-size.scss";
+
 .bimdata-search-bar {
   display: flex;
   align-items: center;
diff --git a/src/BIMDataComponents/BIMDataSearchAutocomplete/BIMDataSearchAutocomplete.vue b/src/BIMDataComponents/BIMDataSearchAutocomplete/BIMDataSearchAutocomplete.vue
index fa70ddcf..de7d9fb1 100644
--- a/src/BIMDataComponents/BIMDataSearchAutocomplete/BIMDataSearchAutocomplete.vue
+++ b/src/BIMDataComponents/BIMDataSearchAutocomplete/BIMDataSearchAutocomplete.vue
@@ -206,4 +206,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped src="./_BIMDataSearchAutocomplete.scss"></style>
+<style scoped lang="scss" src="./_BIMDataSearchAutocomplete.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.scss b/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.scss
index 1874dd56..5b84b8ca 100644
--- a/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.scss
+++ b/src/BIMDataComponents/BIMDataSelect/BIMDataSelect.scss
@@ -1,4 +1,3 @@
-@import "../../assets/css/variables.css";
 @import "../../assets/scss/mixins/_font-size.scss";
 
 .bimdata-select {
diff --git a/src/BIMDataComponents/BIMDataSpinner/BIMDataSpinner.vue b/src/BIMDataComponents/BIMDataSpinner/BIMDataSpinner.vue
index 849ddf3b..98b3546a 100644
--- a/src/BIMDataComponents/BIMDataSpinner/BIMDataSpinner.vue
+++ b/src/BIMDataComponents/BIMDataSpinner/BIMDataSpinner.vue
@@ -21,6 +21,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped src="../../assets/css/variables.css"></style>
-
-<style lang="scss" src="./_BIMDataSpinner.scss"></style>
+<style scoped lang="scss" src="./_BIMDataSpinner.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataSpinner/_BIMDataSpinner.scss b/src/BIMDataComponents/BIMDataSpinner/_BIMDataSpinner.scss
index 16675c17..deacb86a 100644
--- a/src/BIMDataComponents/BIMDataSpinner/_BIMDataSpinner.scss
+++ b/src/BIMDataComponents/BIMDataSpinner/_BIMDataSpinner.scss
@@ -1,4 +1,5 @@
 @import "./_keyframes.scss";
+
 .bimdata-spinner {
   display: flex;
   &--square {
diff --git a/src/BIMDataComponents/BIMDataTable/_BIMDataTable.scss b/src/BIMDataComponents/BIMDataTable/_BIMDataTable.scss
index e3230fab..67f1648e 100644
--- a/src/BIMDataComponents/BIMDataTable/_BIMDataTable.scss
+++ b/src/BIMDataComponents/BIMDataTable/_BIMDataTable.scss
@@ -1,5 +1,3 @@
-@import "../../assets/css/variables.css";
-
 .bimdata-table {
   width: 100%;
   font-size: 0.9rem;
diff --git a/src/BIMDataComponents/BIMDataTabs/BIMDataTabs.vue b/src/BIMDataComponents/BIMDataTabs/BIMDataTabs.vue
index fa520225..d3396291 100644
--- a/src/BIMDataComponents/BIMDataTabs/BIMDataTabs.vue
+++ b/src/BIMDataComponents/BIMDataTabs/BIMDataTabs.vue
@@ -162,7 +162,4 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-@import "../../assets/css/variables.css";
-@import "./_BIMDataTabs.scss";
-</style>
+<style scoped lang="scss" src="./_BIMDataTabs.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataTextarea/BIMDataTextarea.vue b/src/BIMDataComponents/BIMDataTextarea/BIMDataTextarea.vue
index 5e182d29..f3072cef 100644
--- a/src/BIMDataComponents/BIMDataTextarea/BIMDataTextarea.vue
+++ b/src/BIMDataComponents/BIMDataTextarea/BIMDataTextarea.vue
@@ -120,9 +120,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../assets/css/variables.css";
-@import "../../assets/css/utilities/_text.css";
-</style>
-
-<style lang="scss" src="./_BIMDataTextarea.scss"></style>
+<style scoped lang="scss" src="./_BIMDataTextarea.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataTextarea/_BIMDataTextarea.scss b/src/BIMDataComponents/BIMDataTextarea/_BIMDataTextarea.scss
index f887837f..28085b69 100644
--- a/src/BIMDataComponents/BIMDataTextarea/_BIMDataTextarea.scss
+++ b/src/BIMDataComponents/BIMDataTextarea/_BIMDataTextarea.scss
@@ -1,4 +1,3 @@
-// import BIMDATA MIXINS
 @import "../../assets/scss/mixins/_font-size.scss";
 
 textarea:-webkit-autofill {
diff --git a/src/BIMDataComponents/BIMDataTextarea/__tests__/BIMDataTextarea.test.js b/src/BIMDataComponents/BIMDataTextarea/__tests__/BIMDataTextarea.test.js
deleted file mode 100644
index 0519bc46..00000000
--- a/src/BIMDataComponents/BIMDataTextarea/__tests__/BIMDataTextarea.test.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import BIMDataTextarea from "../BIMDataTextarea.vue";
-
-describe("BIMDataTextarea", () => {
-  it("should render component and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataTextarea);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with custom name, match with id and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataTextarea, {
-      propsData: {
-        name: "placeholderName",
-      },
-    });
-    expect(wrapper.find("textarea").element.name).toBe("placeholderName");
-    expect(wrapper.find("textarea").element.id).toBe("placeholderName");
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with message and 'not-empty' class", async () => {
-    const onInput = jest.fn();
-    const wrapper = shallowMount(BIMDataTextarea, {
-      propsData: {
-        modelValue: null,
-      },
-      listeners: {
-        "update:modelValue": onInput,
-      },
-    });
-    expect(wrapper.find("textarea").element.value).toBe("");
-
-    wrapper.find("textarea").setValue("x");
-    expect(onInput).toHaveBeenCalledWith("x");
-
-    wrapper.setProps({ modelValue: "message" });
-    await wrapper.vm.$nextTick();
-    expect(wrapper.classes("not-empty")).toBe(true);
-    expect(wrapper.find("textarea").element.value).toBe("message");
-  });
-
-  it("should render component with custom placeholder, contains 'not-empty' class and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataTextarea, {
-      propsData: {
-        placeholder: "textarea placeholder",
-      },
-    });
-    expect(wrapper.classes("not-empty")).toBe(true);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with custom label and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataTextarea, {
-      propsData: {
-        label: "textarea label",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with a custom width and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataTextarea, {
-      propsData: {
-        width: "50px",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render component with a custom height and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataTextarea, {
-      propsData: {
-        height: "50px",
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should render a disabled component and match snapshot", () => {
-    const wrapper = shallowMount(BIMDataTextarea, {
-      propsData: {
-        disabled: true,
-      },
-    });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-});
diff --git a/src/BIMDataComponents/BIMDataTextarea/__tests__/__snapshots__/BIMDataTextarea.test.js.snap b/src/BIMDataComponents/BIMDataTextarea/__tests__/__snapshots__/BIMDataTextarea.test.js.snap
deleted file mode 100644
index 09e7c3dc..00000000
--- a/src/BIMDataComponents/BIMDataTextarea/__tests__/__snapshots__/BIMDataTextarea.test.js.snap
+++ /dev/null
@@ -1,50 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BIMDataTextarea should render a disabled component and match snapshot 1`] = `
-"<div class=\\"bimdata-textarea\\" style=\\"min-width: 150px; min-height: 32px;\\" disabled=\\"disabled\\"><textarea name=\\"\\" id=\\"\\" disabled=\\"disabled\\"></textarea> <label for=\\"\\"></label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataTextarea should render component and match snapshot 1`] = `
-"<div class=\\"bimdata-textarea\\" style=\\"min-width: 150px; min-height: 32px;\\"><textarea name=\\"\\" id=\\"\\"></textarea> <label for=\\"\\"></label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataTextarea should render component with a custom height and match snapshot 1`] = `
-"<div class=\\"bimdata-textarea\\" style=\\"min-width: 150px; min-height: 50px;\\"><textarea name=\\"\\" id=\\"\\"></textarea> <label for=\\"\\"></label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataTextarea should render component with a custom width and match snapshot 1`] = `
-"<div class=\\"bimdata-textarea\\" style=\\"min-width: 50px; min-height: 32px;\\"><textarea name=\\"\\" id=\\"\\"></textarea> <label for=\\"\\"></label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataTextarea should render component with custom label and match snapshot 1`] = `
-"<div class=\\"bimdata-textarea\\" style=\\"min-width: 150px; min-height: 32px;\\"><textarea name=\\"\\" id=\\"\\"></textarea> <label for=\\"\\">textarea label</label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataTextarea should render component with custom name, match with id and match snapshot 1`] = `
-"<div class=\\"bimdata-textarea\\" style=\\"min-width: 150px; min-height: 32px;\\"><textarea name=\\"placeholderName\\" id=\\"placeholderName\\"></textarea> <label for=\\"placeholderName\\"></label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
-
-exports[`BIMDataTextarea should render component with custom placeholder, contains 'not-empty' class and match snapshot 1`] = `
-"<div class=\\"bimdata-textarea not-empty\\" style=\\"min-width: 150px; min-height: 32px;\\"><textarea name=\\"\\" id=\\"\\" placeholder=\\"textarea placeholder\\"></textarea> <label for=\\"\\"></label> <span class=\\"bar\\"></span>
-  <!---->
-  <!---->
-</div>"
-`;
diff --git a/src/BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue b/src/BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue
index 00d52a0e..9cde1329 100644
--- a/src/BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue
+++ b/src/BIMDataComponents/BIMDataTextbox/BIMDataTextbox.vue
@@ -129,7 +129,4 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-@import "../../assets/css/variables.css";
-@import "./BIMDataTextbox.scss";
-</style>
+<style scoped lang="scss" src="./BIMDataTextbox.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataToggle/BIMDataToggle.vue b/src/BIMDataComponents/BIMDataToggle/BIMDataToggle.vue
index 75f36a26..64b69763 100644
--- a/src/BIMDataComponents/BIMDataToggle/BIMDataToggle.vue
+++ b/src/BIMDataComponents/BIMDataToggle/BIMDataToggle.vue
@@ -55,6 +55,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped src="../../assets/css/variables.css"></style>
-
-<style lang="scss" src="./_BIMDataToggle.scss"></style>
+<style scoped lang="scss" src="./_BIMDataToggle.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataTooltip/BIMDataTooltip.vue b/src/BIMDataComponents/BIMDataTooltip/BIMDataTooltip.vue
index 410d9a56..cdb023f4 100644
--- a/src/BIMDataComponents/BIMDataTooltip/BIMDataTooltip.vue
+++ b/src/BIMDataComponents/BIMDataTooltip/BIMDataTooltip.vue
@@ -96,4 +96,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped src="./_BIMDataTooltip.scss"></style>
+<style scoped lang="scss" src="./_BIMDataTooltip.scss"></style>
diff --git a/src/BIMDataComponents/BIMDataTooltip/_BIMDataTooltip.scss b/src/BIMDataComponents/BIMDataTooltip/_BIMDataTooltip.scss
index 6bbb0f2a..708d4860 100644
--- a/src/BIMDataComponents/BIMDataTooltip/_BIMDataTooltip.scss
+++ b/src/BIMDataComponents/BIMDataTooltip/_BIMDataTooltip.scss
@@ -1,5 +1,3 @@
-@import "../../assets/css/variables.css";
-@import "../../assets/css/utilities/_text.css";
 @import "../../assets/scss/mixins/_font-size.scss";
 
 .bimdata-tooltip {
diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.scss b/src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.scss
index 25b4b1fe..b3483095 100644
--- a/src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.scss
+++ b/src/BIMDataSmartComponents/BIMDataFileManager/BIMDataFileManager.scss
@@ -1,5 +1,3 @@
-@import "../../assets/css/variables.css";
-
 .bimdata-file-manager {
   width: 100%;
 
diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard.vue b/src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard.vue
index f4ae2cc4..582f639c 100644
--- a/src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard.vue
+++ b/src/BIMDataSmartComponents/BIMDataFileManager/components/FileCard.vue
@@ -325,8 +325,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../../../assets/css/variables.css";
-
 .file-card {
   height: 192px;
   display: flex;
diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/MultiLineTextBox/MultiLineTextBox.vue b/src/BIMDataSmartComponents/BIMDataFileManager/components/MultiLineTextBox/MultiLineTextBox.vue
index 42f785ba..644beb03 100644
--- a/src/BIMDataSmartComponents/BIMDataFileManager/components/MultiLineTextBox/MultiLineTextBox.vue
+++ b/src/BIMDataSmartComponents/BIMDataFileManager/components/MultiLineTextBox/MultiLineTextBox.vue
@@ -19,9 +19,7 @@
           <div class="multi-line-text-box__content__tail__text">
             <span>{{ text }} </span>
           </div>
-          <div class="multi-line-text-box__content__tail__ellipsis">
-            ...
-          </div>
+          <div class="multi-line-text-box__content__tail__ellipsis">...</div>
         </div>
       </template>
       <span class="multi-line-text-box__content__full" v-else>
@@ -98,7 +96,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .multi-line-text-box {
   position: relative;
   line-height: var(--textbox-line-height, 14px);
diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/MultiLineTextBox/Tooltip.vue b/src/BIMDataSmartComponents/BIMDataFileManager/components/MultiLineTextBox/Tooltip.vue
index 2d00a619..47e1b2d2 100644
--- a/src/BIMDataSmartComponents/BIMDataFileManager/components/MultiLineTextBox/Tooltip.vue
+++ b/src/BIMDataSmartComponents/BIMDataFileManager/components/MultiLineTextBox/Tooltip.vue
@@ -16,7 +16,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .multi-line-textbox-tooltip {
   width: 100%;
   &__content {
diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/PieProgressSpinner.vue b/src/BIMDataSmartComponents/BIMDataFileManager/components/PieProgressSpinner.vue
index 68d2bc74..7384d830 100644
--- a/src/BIMDataSmartComponents/BIMDataFileManager/components/PieProgressSpinner.vue
+++ b/src/BIMDataSmartComponents/BIMDataFileManager/components/PieProgressSpinner.vue
@@ -6,7 +6,7 @@
       fill="transparent"
       :width="width"
       :height="width"
-      style="transform: rotate(-90deg);"
+      style="transform: rotate(-90deg)"
     >
       <circle
         class="bimdata-pie-progress-spinner__path--back"
@@ -58,7 +58,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 .bimdata-pie-progress-spinner {
   &__path {
     &--back {
diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/DeleteModal.vue b/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/DeleteModal.vue
index 7bf6d58b..c543cc03 100644
--- a/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/DeleteModal.vue
+++ b/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/DeleteModal.vue
@@ -126,9 +126,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// import BIMDATA VARIABLES
-@import "../../../../assets/css/variables.css";
-
 .delete-modal {
   background-color: var(--color-white);
 
diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/RenameModal.vue b/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/RenameModal.vue
index 1fb03bb4..bc03c72b 100644
--- a/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/RenameModal.vue
+++ b/src/BIMDataSmartComponents/BIMDataFileManager/components/modals/RenameModal.vue
@@ -141,9 +141,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// import BIMDATA VARIABLES
-@import "../../../../assets/css/variables.css";
-
 .rename-modal {
   background-color: var(--color-white);
 
diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/newFolder/NewFolderButton.vue b/src/BIMDataSmartComponents/BIMDataFileManager/components/newFolder/NewFolderButton.vue
index 79ee7c02..89d39e15 100644
--- a/src/BIMDataSmartComponents/BIMDataFileManager/components/newFolder/NewFolderButton.vue
+++ b/src/BIMDataSmartComponents/BIMDataFileManager/components/newFolder/NewFolderButton.vue
@@ -101,9 +101,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// import BIMDATA VARIABLES
-@import "../../../../assets/css/variables.css";
-
 .folder-creation-button {
   position: relative;
   min-width: 25%;
diff --git a/src/BIMDataSmartComponents/BIMDataFileManager/components/newFolder/NewFolderForm.vue b/src/BIMDataSmartComponents/BIMDataFileManager/components/newFolder/NewFolderForm.vue
index 0ef65fc6..d7dd7c49 100644
--- a/src/BIMDataSmartComponents/BIMDataFileManager/components/newFolder/NewFolderForm.vue
+++ b/src/BIMDataSmartComponents/BIMDataFileManager/components/newFolder/NewFolderForm.vue
@@ -129,9 +129,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-// import BIMDATA VARIABLES
-@import "../../../../assets/css/variables.css";
-
 .folder-creation-form {
   padding: var(--spacing-unit);
   background-color: var(--color-white);
diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css
index 9c8ae13f..03415ad4 100644
--- a/src/assets/css/fonts.css
+++ b/src/assets/css/fonts.css
@@ -1,7 +1,7 @@
 @font-face {
   font-family: "roboto";
   src: url("../fonts/roboto-bold-webfont.woff2") format("woff2"),
-    url("../fonts/roboto-bold-webfont.woff2") format("woff");
+    url("../fonts/roboto-bold-webfont.woff") format("woff");
   font-weight: 600 700;
   font-style: bold;
   font-display: fallback;
diff --git a/src/assets/scss/mixins/_font-size.scss b/src/assets/scss/mixins/_font-size.scss
index 29127739..b9c00760 100644
--- a/src/assets/scss/mixins/_font-size.scss
+++ b/src/assets/scss/mixins/_font-size.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 $browser-context: 14;
 
 @function calculateEm($pixels, $context: $browser-context) {
@@ -9,5 +11,5 @@ $browser-context: 14;
     $context: $context * 1px;
   }
 
-  @return #{$pixels/$context}em;
+  @return #{math.div($pixels, $context)}em;
 }
diff --git a/src/web/App.vue b/src/web/App.vue
index 4d2c67e7..6c2befe5 100644
--- a/src/web/App.vue
+++ b/src/web/App.vue
@@ -32,13 +32,4 @@ export default {
 };
 </script>
 
-<style lang="scss">
-// import PRISMJS THEME
-@import "../../node_modules/prismjs/themes/prism-tomorrow.css";
-
-// import BIMDATA STYLE
-@import "../assets/css/design-system.css";
-
-// import DESIGN SYSTEM STYLE
-@import "./_DesignSystem-global.scss";
-</style>
+<style lang="scss" src="./_DesignSystem-global.scss"></style>
diff --git a/src/web/_DesignSystem-global.scss b/src/web/_DesignSystem-global.scss
index 5556eade..e70282ac 100644
--- a/src/web/_DesignSystem-global.scss
+++ b/src/web/_DesignSystem-global.scss
@@ -1,3 +1,6 @@
+@import "../../node_modules/prismjs/themes/prism-tomorrow.css";
+@import "../assets/css/design-system.css";
+
 html,
 body,
 #app {
@@ -48,7 +51,7 @@ pre[class*="language-"] {
       line-height: 18px;
       transition: all 0.25s ease-in;
       &:hover {
-        background-color: hsl(45, 94.5, 57.5 * 0.8);
+        background-color: hsl(45deg, 94.5%, 46%);
         transition: all 0.25s ease-in;
       }
     }
diff --git a/src/web/views/Components/Card/Card.vue b/src/web/views/Components/Card/Card.vue
index 1d9fe171..9bb37fd2 100644
--- a/src/web/views/Components/Card/Card.vue
+++ b/src/web/views/Components/Card/Card.vue
@@ -17,7 +17,7 @@
               {{ getHeaderIcons() }}
             </template>
             <template #left v-if="submenuLeft">
-              <BIMDataBurgerMenu />
+              <BIMDataIcon name="burgerMenu" size="xxs" />
             </template>
             <template #right v-if="submenuIcons">
               {{ getSubmenuIcons() }}
@@ -159,7 +159,6 @@
 import propsData from "./props-data.js";
 import slotsData from "./slots-data.js";
 
-import BIMDataBurgerMenu from "../../../../../src/BIMDataComponents/BIMDataBurgerMenu/BIMDataBurgerMenu.vue";
 import BIMDataCard from "../../../../../src/BIMDataComponents/BIMDataCard/BIMDataCard.vue";
 import BIMDataCheckbox from "../../../../../src/BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue";
 import BIMDataInput from "../../../../../src/BIMDataComponents/BIMDataInput/BIMDataInput.vue";
@@ -171,7 +170,6 @@ import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
 export default {
   components: {
     ComponentCode,
-    BIMDataBurgerMenu,
     BIMDataCard,
     BIMDataCheckbox,
     BIMDataInput,
@@ -210,7 +208,7 @@ export default {
     },
     getSubmenuLeft() {
       if (this.submenuLeft) {
-        return "<BIMDataBurgerMenu />";
+        return '<BIMDataIcon name="burgerMenu" size="xxs" />';
       }
     },
     getSubmenuText() {
diff --git a/src/web/views/Components/DatePicker/DatePicker.vue b/src/web/views/Components/DatePicker/DatePicker.vue
index 7e07fa2c..e2dcdaf6 100644
--- a/src/web/views/Components/DatePicker/DatePicker.vue
+++ b/src/web/views/Components/DatePicker/DatePicker.vue
@@ -202,7 +202,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .bimdata-ds__demo__module {
   span {
     font-size: 12px;
diff --git a/src/web/views/Components/Icons/Icons.vue b/src/web/views/Components/Icons/Icons.vue
index 75adea27..b51292ae 100644
--- a/src/web/views/Components/Icons/Icons.vue
+++ b/src/web/views/Components/Icons/Icons.vue
@@ -290,13 +290,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-// import BIMDATA COMPONENT VARIABLES
-@import "../../../../assets/css/variables.css";
-
-// import BIMDATA COMPONENT MIXINS
-@import "../../../../assets/scss/mixins/_font-size.scss";
-
-// import COMPONENT STYLE
-@import "./_Icons.scss";
-</style>
+<style scoped lang="scss" src="./_Icons.scss"></style>
diff --git a/src/web/views/Components/Icons/_Icons.scss b/src/web/views/Components/Icons/_Icons.scss
index fcadf652..72d4214f 100644
--- a/src/web/views/Components/Icons/_Icons.scss
+++ b/src/web/views/Components/Icons/_Icons.scss
@@ -1,3 +1,5 @@
+@import "../../../../assets/scss/mixins/_font-size.scss";
+
 .article-icons {
   img {
     width: 71px;
@@ -7,7 +9,7 @@
     margin: 0 0 var(--spacing-unit);
   }
   .bimdata-ds__demo {
-    ::v-deep .bimdata-ds__demo__module {
+    :deep(.bimdata-ds__demo__module) {
       align-items: flex-start;
       justify-content: flex-start;
     }
diff --git a/src/web/views/Components/Illustrations/Illustrations.vue b/src/web/views/Components/Illustrations/Illustrations.vue
index a8bf3af9..c5127742 100644
--- a/src/web/views/Components/Illustrations/Illustrations.vue
+++ b/src/web/views/Components/Illustrations/Illustrations.vue
@@ -102,7 +102,4 @@ export default {
 };
 </script>
 
-<style lang="scss">
-// import COMPONENT STYLE
-@import "./_Illustrations.scss";
-</style>
+<style scoped lang="scss" src="./_Illustrations.scss"></style>
diff --git a/src/web/views/Components/Loaders/Loaders.vue b/src/web/views/Components/Loaders/Loaders.vue
index f438236d..e4c058e9 100644
--- a/src/web/views/Components/Loaders/Loaders.vue
+++ b/src/web/views/Components/Loaders/Loaders.vue
@@ -173,7 +173,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-// import COMPONENT STYLE
-@import "./_Loaders.scss";
-</style>
+<style scoped lang="scss" src="./_Loaders.scss"></style>
diff --git a/src/web/views/Components/Loaders/_Loaders.scss b/src/web/views/Components/Loaders/_Loaders.scss
index d317512b..d9482169 100644
--- a/src/web/views/Components/Loaders/_Loaders.scss
+++ b/src/web/views/Components/Loaders/_Loaders.scss
@@ -1,6 +1,6 @@
 .article-loader {
-  ::v-deep .bimdata-ds__demo {
-    &__module {
+  :deep(.bimdata-ds__demo) {
+    .bimdata-ds__demo__module {
       height: 200px;
     }
   }
diff --git a/src/web/views/Components/Menu/Menus.vue b/src/web/views/Components/Menu/Menus.vue
index 2fdae55b..e7e15e77 100644
--- a/src/web/views/Components/Menu/Menus.vue
+++ b/src/web/views/Components/Menu/Menus.vue
@@ -77,5 +77,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/web/views/Components/Pagination/Pagination.vue b/src/web/views/Components/Pagination/Pagination.vue
index f2327206..84776565 100644
--- a/src/web/views/Components/Pagination/Pagination.vue
+++ b/src/web/views/Components/Pagination/Pagination.vue
@@ -1,9 +1,9 @@
 <template>
   <main class="article article-pagination">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
       <ComponentCode :componentTitle="$route.name" language="javascript">
         <template #module>
           <BIMDataPaginatedList
diff --git a/src/web/views/Components/ResponsiveGrid/ResponsiveGrid.vue b/src/web/views/Components/ResponsiveGrid/ResponsiveGrid.vue
index bd773363..3bc70d9e 100644
--- a/src/web/views/Components/ResponsiveGrid/ResponsiveGrid.vue
+++ b/src/web/views/Components/ResponsiveGrid/ResponsiveGrid.vue
@@ -1,9 +1,9 @@
 <template>
   <main class="article article-card">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
       <ComponentCode :componentTitle="$route.name" language="javascript">
         <template #module>
           <BIMDataResponsiveGrid
@@ -124,6 +124,4 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
-@import "./_ResponsiveGrid.scss";
-</style>
+<style scoped lang="scss" src="./_ResponsiveGrid.scss"></style>
diff --git a/src/web/views/Components/ResponsiveGrid/_ResponsiveGrid.scss b/src/web/views/Components/ResponsiveGrid/_ResponsiveGrid.scss
index bc24c4d2..dc33fff5 100644
--- a/src/web/views/Components/ResponsiveGrid/_ResponsiveGrid.scss
+++ b/src/web/views/Components/ResponsiveGrid/_ResponsiveGrid.scss
@@ -1,5 +1,3 @@
-@import "../../../../assets/css/variables.css";
-
 .demo-grid {
   width: 100%;
   height: 100%;
diff --git a/src/web/views/Components/SafeZoneInline/SafeZoneInline.vue b/src/web/views/Components/SafeZoneInline/SafeZoneInline.vue
index b012dd85..dd684ad0 100644
--- a/src/web/views/Components/SafeZoneInline/SafeZoneInline.vue
+++ b/src/web/views/Components/SafeZoneInline/SafeZoneInline.vue
@@ -112,4 +112,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped src="./_SafeZoneInline.scss"></style>
+<style scoped lang="scss" src="./_SafeZoneInline.scss"></style>
diff --git a/src/web/views/Components/SafeZoneModal/SafeZoneModal.vue b/src/web/views/Components/SafeZoneModal/SafeZoneModal.vue
index 52219c83..1e1c005e 100644
--- a/src/web/views/Components/SafeZoneModal/SafeZoneModal.vue
+++ b/src/web/views/Components/SafeZoneModal/SafeZoneModal.vue
@@ -157,4 +157,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped src="./_SafeZoneModal.scss"></style>
+<style scoped lang="scss" src="./_SafeZoneModal.scss"></style>
diff --git a/src/web/views/Components/SafeZoneModal/_SafeZoneModal.scss b/src/web/views/Components/SafeZoneModal/_SafeZoneModal.scss
index 62d7ad4b..4fd357b4 100644
--- a/src/web/views/Components/SafeZoneModal/_SafeZoneModal.scss
+++ b/src/web/views/Components/SafeZoneModal/_SafeZoneModal.scss
@@ -1,5 +1,5 @@
 .safe-zone-modal {
-  ::v-deep.bimdata-ds__demo__module {
+  :deep(.bimdata-ds__demo__module) {
     min-height: 400px;
   }
 }
diff --git a/src/web/views/Components/Text/Text.vue b/src/web/views/Components/Text/Text.vue
index 3958fbe7..1cee9730 100644
--- a/src/web/views/Components/Text/Text.vue
+++ b/src/web/views/Components/Text/Text.vue
@@ -1,9 +1,9 @@
 <template>
   <main class="article article-textarea">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
       <ComponentCode
         :componentTitle="$route.name"
         language="javascript"
@@ -350,13 +350,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-// import BIMDATA COMPONENT VARIABLES
-@import "../../../../assets/css/variables.css";
-
-// import BIMDATA COMPONENT MIXINS
-@import "../../../../assets/scss/mixins/_font-size.scss";
-
-// import COMPONENT STYLE
-@import "./_Text.scss";
-</style>
+<style scoped lang="scss" src="./_Text.scss"></style>
diff --git a/src/web/views/Components/Text/_Text.scss b/src/web/views/Components/Text/_Text.scss
index 09eb8c3d..cba57736 100644
--- a/src/web/views/Components/Text/_Text.scss
+++ b/src/web/views/Components/Text/_Text.scss
@@ -1,6 +1,6 @@
 .article-text {
   &__component {
-    ::v-deep.bimdata-input {
+    :deep(.bimdata-input) {
       margin-top: 30px;
       label {
         top: -34px;
diff --git a/src/web/views/Components/Textarea/Textarea.vue b/src/web/views/Components/Textarea/Textarea.vue
index 7ef2eff9..6e3531b6 100644
--- a/src/web/views/Components/Textarea/Textarea.vue
+++ b/src/web/views/Components/Textarea/Textarea.vue
@@ -1,9 +1,9 @@
 <template>
   <main class="article article-textarea">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
       <ComponentCode
         :componentTitle="$route.name"
         language="javascript"
diff --git a/src/web/views/Components/Toggle/Toggle.vue b/src/web/views/Components/Toggle/Toggle.vue
index 3ac43d2c..97b71452 100644
--- a/src/web/views/Components/Toggle/Toggle.vue
+++ b/src/web/views/Components/Toggle/Toggle.vue
@@ -1,9 +1,9 @@
 <template>
   <main class="article toggle">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
       <ComponentCode :componentTitle="$route.name" language="javascript">
         <template #module>
           <BIMDataToggle v-model="toggled" :disabled="checkboxDisabledChecked">
diff --git a/src/web/views/Elements/Alerts/Alerts.vue b/src/web/views/Elements/Alerts/Alerts.vue
index c969f964..bed4d40b 100644
--- a/src/web/views/Elements/Alerts/Alerts.vue
+++ b/src/web/views/Elements/Alerts/Alerts.vue
@@ -14,22 +14,17 @@
 
 <script>
 export default {
-  data() {
-    return {
-      alertType: null,
-    };
-  },
   props: {
     message: {
       type: String,
     },
   },
+  data() {
+    return {
+      alertType: null,
+    };
+  },
 };
 </script>
 
-<style lang="scss" scoped>
-// import BIMDATA COMPONENT VARIABLES
-@import "../../../../assets/css/variables.css";
-
-@import "./_Alerts.scss";
-</style>
+<style scoped lang="scss" src="./_Alerts.scss"></style>
diff --git a/src/web/views/Elements/AnchorLink/AnchorLink.vue b/src/web/views/Elements/AnchorLink/AnchorLink.vue
index b0f6cb8a..b83e887f 100644
--- a/src/web/views/Elements/AnchorLink/AnchorLink.vue
+++ b/src/web/views/Elements/AnchorLink/AnchorLink.vue
@@ -30,15 +30,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-// import BIMDATA COMPONENT VARIABLES
-@import "../../../../assets/css/variables.css";
-@import "./_AnchorLink.scss";
-.anchor-link {
-  margin-right: 12px;
-  cursor: pointer;
-  &:focus {
-    outline: none;
-  }
-}
-</style>
+<style scoped lang="scss" src="./_AnchorLink.scss"></style>
diff --git a/src/web/views/Elements/AnchorLink/_AnchorLink.scss b/src/web/views/Elements/AnchorLink/_AnchorLink.scss
index 7f6cf38f..d42b6bf4 100644
--- a/src/web/views/Elements/AnchorLink/_AnchorLink.scss
+++ b/src/web/views/Elements/AnchorLink/_AnchorLink.scss
@@ -12,3 +12,11 @@
   display: flex;
   align-items: center;
 }
+
+.anchor-link {
+  margin-right: 12px;
+  cursor: pointer;
+  &:focus {
+    outline: none;
+  }
+}
diff --git a/src/web/views/Elements/Code/Code.vue b/src/web/views/Elements/Code/Code.vue
index 8b957701..3587e788 100644
--- a/src/web/views/Elements/Code/Code.vue
+++ b/src/web/views/Elements/Code/Code.vue
@@ -19,12 +19,9 @@ export default {
   components: {
     Alerts,
   },
-  data() {
-    return {
-      alerts: false,
-      alertType: null,
-      message: "",
-    };
+  directives: {
+    highlight,
+    copy,
   },
   props: {
     language: {
@@ -32,6 +29,13 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      alerts: false,
+      alertType: null,
+      message: "",
+    };
+  },
   methods: {
     onCopy() {
       this.alerts = true;
@@ -42,14 +46,7 @@ export default {
       }, 3000);
     },
   },
-  directives: { highlight, copy },
 };
 </script>
 
-<style lang="scss" scoped>
-// import BIMDATA COMPONENT VARIABLES
-@import "../../../../assets/css/variables.css";
-
-// import COMPONENT STYLE
-@import "./_Code.scss";
-</style>
+<style scoped lang="scss" src="./_Code.scss"></style>
diff --git a/src/web/views/GettingStarted/Designers.vue b/src/web/views/GettingStarted/Designers.vue
index e0b0db32..ee7ebaab 100644
--- a/src/web/views/GettingStarted/Designers.vue
+++ b/src/web/views/GettingStarted/Designers.vue
@@ -43,6 +43,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "./_GettingStarted.scss";
-</style>
+<style scoped lang="scss" src="./_GettingStarted.scss"></style>
diff --git a/src/web/views/GettingStarted/Developpers.vue b/src/web/views/GettingStarted/Developpers.vue
index bb07c206..5519f399 100644
--- a/src/web/views/GettingStarted/Developpers.vue
+++ b/src/web/views/GettingStarted/Developpers.vue
@@ -1,9 +1,9 @@
 <template>
   <main class="article developpers">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
       <BIMDataText margin="5px 0" lineHeight="24px"
         >How to get started with BIMData's vuejs component library</BIMDataText
       >
@@ -196,12 +196,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "./_GettingStarted.scss";
-.bimdata-ds__code {
-  &:nth-child(5),
-  &:last-child {
-    margin: 0;
-  }
-}
-</style>
+<style scoped lang="scss" src="./_GettingStarted.scss"></style>
diff --git a/src/web/views/GettingStarted/InternalDoc.vue b/src/web/views/GettingStarted/InternalDoc.vue
index c1c56794..04ae4bbc 100644
--- a/src/web/views/GettingStarted/InternalDoc.vue
+++ b/src/web/views/GettingStarted/InternalDoc.vue
@@ -1,9 +1,9 @@
 <template>
   <main class="article internal-doc">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
       <BIMDataText margin="5px 0 10px" lineHeight="24px"
         >All the design system resources are in the directory:
         <code class="code-highlight">src/web/views</code>. The following
@@ -119,6 +119,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "./_GettingStarted.scss";
-</style>
+<style scoped lang="scss" src="./_GettingStarted.scss"></style>
diff --git a/src/web/views/GettingStarted/Releases.vue b/src/web/views/GettingStarted/Releases.vue
deleted file mode 100644
index 274303be..00000000
--- a/src/web/views/GettingStarted/Releases.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <main class="article article-releases">
-    <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
-    </div>
-  </main>
-</template>
-
-<script>
-import BIMDataText from "../../../../../src/BIMDataComponents/BIMDataText/BIMDataText.vue";
-
-export default {
-  components: {
-    BIMDataText,
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/web/views/GettingStarted/_GettingStarted.scss b/src/web/views/GettingStarted/_GettingStarted.scss
index e1d93279..e7d20475 100644
--- a/src/web/views/GettingStarted/_GettingStarted.scss
+++ b/src/web/views/GettingStarted/_GettingStarted.scss
@@ -1,4 +1,3 @@
-@import "../../../assets/css/variables.css";
 .designers,
 .developpers,
 .internal-doc {
@@ -38,3 +37,10 @@
     }
   }
 }
+
+.bimdata-ds__code {
+  &:nth-child(5),
+  &:last-child {
+    margin: 0;
+  }
+}
diff --git a/src/web/views/Guidelines/Colors/ColorImplementing/ColorsImplementingContent.vue b/src/web/views/Guidelines/Colors/ColorImplementing/ColorsImplementingContent.vue
index bfe3bebc..560a7066 100644
--- a/src/web/views/Guidelines/Colors/ColorImplementing/ColorsImplementingContent.vue
+++ b/src/web/views/Guidelines/Colors/ColorImplementing/ColorsImplementingContent.vue
@@ -164,9 +164,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-@import "../../../../../assets/css/variables.css";
-@import "../../../../../assets/scss/mixins/_font-size.scss";
-@import "./_ColorsImplementingContent.scss";
-</style>
diff --git a/src/web/views/Guidelines/Colors/ColorImplementing/_ColorsImplementingContent.scss b/src/web/views/Guidelines/Colors/ColorImplementing/_ColorsImplementingContent.scss
deleted file mode 100644
index 65479414..00000000
--- a/src/web/views/Guidelines/Colors/ColorImplementing/_ColorsImplementingContent.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-.colors-implementing-container {
-}
diff --git a/src/web/views/Guidelines/Colors/ColorPalette/ColorsPaletteContent.vue b/src/web/views/Guidelines/Colors/ColorPalette/ColorsPaletteContent.vue
index b2485311..37842273 100644
--- a/src/web/views/Guidelines/Colors/ColorPalette/ColorsPaletteContent.vue
+++ b/src/web/views/Guidelines/Colors/ColorPalette/ColorsPaletteContent.vue
@@ -165,8 +165,4 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import "../../../../../assets/css/variables.css";
-@import "../../../../../assets/scss/mixins/_font-size.scss";
-@import "./_ColorsPaletteContent.scss";
-</style>
+<style scoped lang="scss" src="./_ColorsPaletteContent.scss"></style>
diff --git a/src/web/views/Guidelines/Colors/ColorPalette/_ColorsPaletteContent.scss b/src/web/views/Guidelines/Colors/ColorPalette/_ColorsPaletteContent.scss
index 55cea979..83d73b42 100644
--- a/src/web/views/Guidelines/Colors/ColorPalette/_ColorsPaletteContent.scss
+++ b/src/web/views/Guidelines/Colors/ColorPalette/_ColorsPaletteContent.scss
@@ -1,3 +1,5 @@
+@import "../../../../../assets/scss/mixins/_font-size.scss";
+
 .colors-container {
   .color-swatches {
     display: flex;
diff --git a/src/web/views/Guidelines/Colors/Colors.vue b/src/web/views/Guidelines/Colors/Colors.vue
index ad40f920..b40f1cad 100644
--- a/src/web/views/Guidelines/Colors/Colors.vue
+++ b/src/web/views/Guidelines/Colors/Colors.vue
@@ -1,14 +1,9 @@
 <template>
   <main class="article colors">
     <div class="article-wrapper">
-      <!-- <div class="colors-animations">
-        <div class="colors-animations__box colors-animations__box1"></div>
-        <div class="colors-animations__box colors-animations__box2"></div>
-        <div class="colors-animations__box colors-animations__box3"></div>
-      </div> -->
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
       <AnchorLink class="m-y-12" :navElements="elements" />
       <BIMDataText margin="10px 0 15px">
         For maintainability, please use these instead of hardcoding color
@@ -59,12 +54,11 @@ export default {
 };
 </script>
 
-<style lang="scss">
-// import ALERT COMPONENT STYLE
-@import "../../../../web/views/Elements/Alerts/_Alerts.scss";
-
-// import COMPONENT STYLE
-@import "./_colors-keyframes.scss";
-@import "./_colors-animations.scss";
-@import "./_Colors.scss";
+<style scoped lang="scss">
+.colors {
+  #colors,
+  #implementing {
+    padding-top: 40px;
+  }
+}
 </style>
diff --git a/src/web/views/Guidelines/Colors/GenericComponents/ColorPalette.vue b/src/web/views/Guidelines/Colors/GenericComponents/ColorPalette.vue
index a9b59792..0db91bb7 100644
--- a/src/web/views/Guidelines/Colors/GenericComponents/ColorPalette.vue
+++ b/src/web/views/Guidelines/Colors/GenericComponents/ColorPalette.vue
@@ -76,7 +76,4 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import "../../../../../assets/scss/mixins/_font-size.scss";
-@import "./_ColorPalette.scss";
-</style>
+<style scoped lang="scss" src="./_ColorPalette.scss"></style>
diff --git a/src/web/views/Guidelines/Colors/GenericComponents/ColorSwatche.vue b/src/web/views/Guidelines/Colors/GenericComponents/ColorSwatche.vue
index 23183d6f..87a15a8b 100644
--- a/src/web/views/Guidelines/Colors/GenericComponents/ColorSwatche.vue
+++ b/src/web/views/Guidelines/Colors/GenericComponents/ColorSwatche.vue
@@ -147,6 +147,7 @@
 
 <script>
 import BIMDataButton from "../../../../../../src/BIMDataComponents/BIMDataButton/BIMDataButton.vue";
+
 export default {
   components: {
     BIMDataButton,
@@ -185,7 +186,4 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import "../../../../../assets/scss/mixins/_font-size.scss";
-@import "./_ColorSwatche.scss";
-</style>
+<style scoped lang="scss" src="./_ColorSwatche.scss"></style>
diff --git a/src/web/views/Guidelines/Colors/GenericComponents/_ColorPalette.scss b/src/web/views/Guidelines/Colors/GenericComponents/_ColorPalette.scss
index aec672bd..be7af28d 100644
--- a/src/web/views/Guidelines/Colors/GenericComponents/_ColorPalette.scss
+++ b/src/web/views/Guidelines/Colors/GenericComponents/_ColorPalette.scss
@@ -1,3 +1,5 @@
+@import "../../../../../assets/scss/mixins/_font-size.scss";
+
 .color-palettes {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
diff --git a/src/web/views/Guidelines/Colors/GenericComponents/_ColorSwatche.scss b/src/web/views/Guidelines/Colors/GenericComponents/_ColorSwatche.scss
index 2561d8fc..0eec4de1 100644
--- a/src/web/views/Guidelines/Colors/GenericComponents/_ColorSwatche.scss
+++ b/src/web/views/Guidelines/Colors/GenericComponents/_ColorSwatche.scss
@@ -1,3 +1,5 @@
+@import "../../../../../assets/scss/mixins/_font-size.scss";
+
 .color-swatches {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/web/views/Guidelines/Colors/_Colors.scss b/src/web/views/Guidelines/Colors/_Colors.scss
deleted file mode 100644
index 34f99298..00000000
--- a/src/web/views/Guidelines/Colors/_Colors.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.colors {
-  #colors,
-  #implementing {
-    padding-top: 40px;
-  }
-}
diff --git a/src/web/views/Guidelines/Colors/_colors-animations.scss b/src/web/views/Guidelines/Colors/_colors-animations.scss
deleted file mode 100644
index 7503a43a..00000000
--- a/src/web/views/Guidelines/Colors/_colors-animations.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.colors-animations {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-image: radial-gradient(
-      closest-side,
-      rgba(255, 255, 255, 0.94),
-      rgba(255, 255, 255, 0.94),
-      rgba(255, 255, 255, 1)
-    ),
-    url("../../../assets/img/grid.svg");
-  background-repeat: no-repeat, repeat;
-  background-size: auto, 75px 44px;
-  position: fixed;
-  top: 55%;
-  left: 65%;
-  right: 0;
-  width: 994px;
-  height: 720px;
-  z-index: -1;
-  &__box {
-    width: 140px;
-    height: 140px;
-    position: absolute;
-    transform: rotateX(55deg) rotateZ(45deg);
-    &::after {
-      content: "";
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-  }
-  &__box1 {
-    &::after {
-      top: 0;
-      left: 0;
-      animation: transform1 4s ease, color1 4s ease;
-      box-shadow: 1px 1px 0 var(--color-primary-dark),
-        2px 2px 0 var(--color-primary-dark), 3px 3px 0 var(--color-primary-dark),
-        4px 4px 0 var(--color-primary-dark), 5px 5px 0 var(--color-primary-dark);
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-    }
-  }
-  &__box2 {
-    &::after {
-      top: -10%;
-      left: -10%;
-      animation: transform2 4s ease, color2 4s ease;
-      box-shadow: 1px 1px 0 var(--color-secondary-dark),
-        2px 2px 0 var(--color-secondary-dark),
-        3px 3px 0 var(--color-secondary-dark),
-        4px 4px 0 var(--color-secondary-dark),
-        5px 5px 0 var(--color-secondary-dark);
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-    }
-  }
-  &__box3 {
-    &::after {
-      top: -20%;
-      left: -20%;
-      animation: transform3 4s ease, color3 4s ease;
-      box-shadow: 1px 1px 0 var(--color-silver-dark),
-        2px 2px 0 var(--color-silver-dark), 3px 3px 0 var(--color-silver-dark),
-        4px 4px 0 var(--color-silver-dark), 5px 5px 0 var(--color-silver-dark);
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-    }
-  }
-}
diff --git a/src/web/views/Guidelines/Colors/_colors-keyframes.scss b/src/web/views/Guidelines/Colors/_colors-keyframes.scss
deleted file mode 100644
index 610c86c8..00000000
--- a/src/web/views/Guidelines/Colors/_colors-keyframes.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@keyframes transform1 {
-  0% {
-    transform: translate(0px, 0px);
-  }
-  100% {
-    transform: translate(-50px, -50px);
-  }
-}
-@keyframes transform2 {
-  0% {
-    transform: translate(10px, 10px);
-  }
-  100% {
-    transform: translate(-65px, -65px);
-  }
-}
-@keyframes transform3 {
-  0% {
-    transform: translate(20px, 20px);
-  }
-  100% {
-    transform: translate(-80px, -80px);
-  }
-}
-@keyframes color1 {
-  0% {
-    background-color: var(--color-primary);
-  }
-  100% {
-    background-color: var(--color-primary-light);
-  }
-}
-@keyframes color2 {
-  0% {
-    background-color: var(--color-secondary);
-  }
-  100% {
-    background-color: var(--color-secondary-light);
-  }
-}
-@keyframes color3 {
-  0% {
-    background-color: var(--color-silver);
-  }
-  100% {
-    background-color: var(--color-silver-dark);
-  }
-}
diff --git a/src/web/views/Guidelines/Grid/Grid.scss b/src/web/views/Guidelines/Grid/Grid.scss
deleted file mode 100644
index ec9795d7..00000000
--- a/src/web/views/Guidelines/Grid/Grid.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.layout {
-  .grid {
-    margin: initial;
-    max-width: initial;
-  }
-}
diff --git a/src/web/views/Guidelines/Grid/Grid.vue b/src/web/views/Guidelines/Grid/Grid.vue
index ab860bc7..76e341e6 100644
--- a/src/web/views/Guidelines/Grid/Grid.vue
+++ b/src/web/views/Guidelines/Grid/Grid.vue
@@ -1,9 +1,9 @@
 <template>
   <main class="article article-grid">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
     </div>
     <div class="article-content"></div>
   </main>
@@ -11,6 +11,7 @@
 
 <script>
 import BIMDataText from "../../../../../src/BIMDataComponents/BIMDataText/BIMDataText.vue";
+
 export default {
   components: {
     BIMDataText,
@@ -18,6 +19,11 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "./Grid.scss";
+<style scoped lang="scss">
+.layout {
+  .grid {
+    margin: initial;
+    max-width: initial;
+  }
+}
 </style>
diff --git a/src/web/views/Guidelines/List/List.vue b/src/web/views/Guidelines/List/List.vue
index c1d66a53..50b524a4 100644
--- a/src/web/views/Guidelines/List/List.vue
+++ b/src/web/views/Guidelines/List/List.vue
@@ -39,13 +39,15 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-// import BIMDATA COMPONENT VARIABLES
-@import "../../../../assets/css/variables.css";
-
-// import COMPONENT STYLE
-@import "./_List.scss";
+<style scoped lang="scss">
 .utilities-list {
+  ul {
+    outline: 2px dotted var(--color-granite);
+    li {
+      outline: 1px dotted var(--color-silver);
+    }
+  }
+
   .bimdata-ds__code {
     margin: 0;
     border-bottom: 0.5px solid var(--color-silver-light);
diff --git a/src/web/views/Guidelines/List/_List.scss b/src/web/views/Guidelines/List/_List.scss
deleted file mode 100644
index 5142c163..00000000
--- a/src/web/views/Guidelines/List/_List.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.utilities-list {
-  ul {
-    outline: 2px dotted var(--color-granite);
-    li {
-      outline: 1px dotted var(--color-silver);
-    }
-  }
-}
diff --git a/src/web/views/Guidelines/Spacing/Margin/Margin.vue b/src/web/views/Guidelines/Spacing/Margin/Margin.vue
index f482b723..b420e046 100644
--- a/src/web/views/Guidelines/Spacing/Margin/Margin.vue
+++ b/src/web/views/Guidelines/Spacing/Margin/Margin.vue
@@ -568,13 +568,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-// import BIMDATA COMPONENT VARIABLES
-@import "../../../../../assets/css/variables.css";
-
-// import BIMDATA UTILITIES
-@import "../../../../../assets/css/utilities/_flex.css";
-
-// import COMPONENT STYLE
-@import "./_Margin.scss";
-</style>
+<style scoped lang="scss" src="./_Margin.scss"></style>
diff --git a/src/web/views/Guidelines/Spacing/Margin/_Margin.scss b/src/web/views/Guidelines/Spacing/Margin/_Margin.scss
index 42be99e7..b8593b24 100644
--- a/src/web/views/Guidelines/Spacing/Margin/_Margin.scss
+++ b/src/web/views/Guidelines/Spacing/Margin/_Margin.scss
@@ -1,8 +1,8 @@
 .spacing-system__margin {
-  ::v-deep .bimdata-ds__demo__module {
+  :deep(.bimdata-ds__demo__module) {
     grid-column: 1 / 2;
   }
-  ::v-deep .bimdata-ds__demo__parameters {
+  :deep(.bimdata-ds__demo__parameters) {
     grid-column: 2 / 4;
     .grid {
       grid-template-columns: 1fr 1fr 1fr 1fr;
@@ -29,7 +29,7 @@
       flex: 1;
     }
   }
-  ::v-deep .bimdata-table {
+  :deep(.bimdata-table) {
     tr {
       th,
       td {
diff --git a/src/web/views/Guidelines/Spacing/Padding/Padding.vue b/src/web/views/Guidelines/Spacing/Padding/Padding.vue
index e9926b9d..2c08a7b5 100644
--- a/src/web/views/Guidelines/Spacing/Padding/Padding.vue
+++ b/src/web/views/Guidelines/Spacing/Padding/Padding.vue
@@ -533,13 +533,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-// import BIMDATA COMPONENT VARIABLES
-@import "../../../../../assets/css/variables.css";
-
-// import BIMDATA UTILITIES
-@import "../../../../../assets/css/utilities/_flex.css";
-
-// import COMPONENT STYLE
-@import "./_Padding.scss";
-</style>
+<style scoped lang="scss" src="./_Padding.scss"></style>
diff --git a/src/web/views/Guidelines/Spacing/Padding/_Padding.scss b/src/web/views/Guidelines/Spacing/Padding/_Padding.scss
index a8ec4cf1..8a714597 100644
--- a/src/web/views/Guidelines/Spacing/Padding/_Padding.scss
+++ b/src/web/views/Guidelines/Spacing/Padding/_Padding.scss
@@ -1,8 +1,8 @@
 .spacing-system__padding {
-  ::v-deep .bimdata-ds__demo__module {
+  :deep(.bimdata-ds__demo__module) {
     grid-column: 1 / 2;
   }
-  ::v-deep .bimdata-ds__demo__parameters {
+  :deep(.bimdata-ds__demo__parameters) {
     grid-column: 2 / 4;
     .grid {
       grid-template-columns: 1fr 1fr 1fr 1fr;
@@ -30,7 +30,7 @@
       flex: 1;
     }
   }
-  ::v-deep .bimdata-table {
+  :deep(.bimdata-table) {
     tr {
       th,
       td {
diff --git a/src/web/views/Guidelines/Spacing/Spacing.vue b/src/web/views/Guidelines/Spacing/Spacing.vue
index 69d59102..7591de22 100644
--- a/src/web/views/Guidelines/Spacing/Spacing.vue
+++ b/src/web/views/Guidelines/Spacing/Spacing.vue
@@ -1,9 +1,9 @@
 <template>
   <main class="article article-spacing">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
       <AnchorLink :navElements="elements" />
       <div class="spacing-system" id="spacing-system">
         <div>
@@ -62,11 +62,23 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-// import BIMDATA VARIABLES
-@import "../../../../assets/css/variables.css";
-@import "../../../../assets/css/utilities/_flex.css";
-
-// import COMPONENT STYLE
-@import "./_Spacing.scss";
+<style scoped lang="scss">
+.article-spacing {
+  &__code {
+    display: flex;
+    justify-content: space-between;
+    &__item {
+      margin-right: var(--spacing-unit);
+      flex: 1;
+      pre {
+        margin-bottom: 0;
+      }
+    }
+  }
+  #spacing-system,
+  #margin,
+  #padding {
+    padding-top: 40px;
+  }
+}
 </style>
diff --git a/src/web/views/Guidelines/Spacing/_Spacing.scss b/src/web/views/Guidelines/Spacing/_Spacing.scss
deleted file mode 100644
index 941fb2b3..00000000
--- a/src/web/views/Guidelines/Spacing/_Spacing.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.article-spacing {
-  &__code {
-    display: flex;
-    justify-content: space-between;
-    &__item {
-      margin-right: var(--spacing-unit);
-      flex: 1;
-      pre {
-        margin-bottom: 0;
-      }
-    }
-  }
-  #spacing-system,
-  #margin,
-  #padding {
-    padding-top: 40px;
-  }
-}
diff --git a/src/web/views/Guidelines/Typography/Typography.vue b/src/web/views/Guidelines/Typography/Typography.vue
index 4dd42eb9..009ad8b4 100644
--- a/src/web/views/Guidelines/Typography/Typography.vue
+++ b/src/web/views/Guidelines/Typography/Typography.vue
@@ -1,9 +1,9 @@
 <template>
   <main class="article typography">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
       <div class="typography-size m-y-12">
         <BIMDataText component="h3" color="color-primary" margin="15px 0 10px"
           >Font size</BIMDataText
@@ -103,8 +103,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../../../assets/css/variables.css";
-
-@import "./_Typography.scss";
-</style>
+<style scoped lang="scss" src="./_Typography.scss"></style>
diff --git a/src/web/views/Guidelines/Utilities/Utilities.vue b/src/web/views/Guidelines/Utilities/Utilities.vue
index 8a1a7369..a80966de 100644
--- a/src/web/views/Guidelines/Utilities/Utilities.vue
+++ b/src/web/views/Guidelines/Utilities/Utilities.vue
@@ -1,9 +1,9 @@
 <template>
   <main class="article variables">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary" margin="0 0 20px">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary" margin="0 0 20px">
+        {{ $route.name }}
+      </BIMDataText>
       <AnchorLink :navElements="navElements" />
       <div id="colors">
         <BIMDataText component="h3" color="color-primary" margin="40px 0 20px"
diff --git a/src/web/views/Guidelines/Variables/Variables.vue b/src/web/views/Guidelines/Variables/Variables.vue
index f75b25cf..75641e21 100644
--- a/src/web/views/Guidelines/Variables/Variables.vue
+++ b/src/web/views/Guidelines/Variables/Variables.vue
@@ -1,9 +1,9 @@
 <template>
   <main class="article variables">
     <div class="article-wrapper">
-      <BIMDataText component="h1" color="color-primary">{{
-        $route.name
-      }}</BIMDataText>
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
       <BIMDataText margin="10px 0 15px"
         >To be able to use all these variables listed below, please import this
         code into your project:</BIMDataText
@@ -148,9 +148,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-@import "../../../../assets/css/variables.css";
-
-@import "../../../../assets/css/utilities/_colors.css";
-</style>
diff --git a/src/web/views/Home/Home.vue b/src/web/views/Home/Home.vue
index f5e1e3d9..0d9fe111 100644
--- a/src/web/views/Home/Home.vue
+++ b/src/web/views/Home/Home.vue
@@ -67,9 +67,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../../assets/css/variables.css";
-
-@import "./_keyframes.scss";
-@import "./_Home.scss";
-</style>
+<style scoped lang="scss" src="./_Home.scss"></style>
diff --git a/src/web/views/Home/SearchResults.vue b/src/web/views/Home/SearchResults.vue
deleted file mode 100644
index 3bcd9f09..00000000
--- a/src/web/views/Home/SearchResults.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    results
-  </div>
-</template>
diff --git a/src/web/views/Home/_Home.scss b/src/web/views/Home/_Home.scss
index bbfcfcb7..f2e1f678 100644
--- a/src/web/views/Home/_Home.scss
+++ b/src/web/views/Home/_Home.scss
@@ -1,3 +1,5 @@
+@import "./_keyframes.scss";
+
 .home {
   margin-top: 60px;
   height: calc(100vh - 60px);
diff --git a/src/web/views/Layout/Aside.vue b/src/web/views/Layout/Aside.vue
index 9f92d356..526bb872 100644
--- a/src/web/views/Layout/Aside.vue
+++ b/src/web/views/Layout/Aside.vue
@@ -51,6 +51,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "./_DesignSystem-aside.scss";
-</style>
+<style scoped lang="scss" src="./_DesignSystem-aside.scss"></style>
diff --git a/src/web/views/Layout/Content.vue b/src/web/views/Layout/Content.vue
index 523d7010..65c47bd5 100644
--- a/src/web/views/Layout/Content.vue
+++ b/src/web/views/Layout/Content.vue
@@ -98,7 +98,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-// import COMPONENT STYLE
-@import "./_DesignSystem-content.scss";
-</style>
+<style scoped lang="scss" src="./_DesignSystem-content.scss"></style>
diff --git a/src/web/views/Layout/_DesignSystem-aside.scss b/src/web/views/Layout/_DesignSystem-aside.scss
index 0b33ecbc..8be4d7cf 100644
--- a/src/web/views/Layout/_DesignSystem-aside.scss
+++ b/src/web/views/Layout/_DesignSystem-aside.scss
@@ -31,7 +31,7 @@
         &.router-link-exact-active {
           &:hover {
             &::before {
-              background-color: hsl(222, 22.3, 23.7 * 0.8);
+              background-color: hsl(222deg, 22.3%, 21.84%);
             }
           }
           &::before {
@@ -40,7 +40,7 @@
         }
         &:hover {
           &::before {
-            background-color: hsl(222, 22.3, 23.7 * 0.8);
+            background-color: hsl(222deg, 22.3%, 21.84%);
           }
         }
         &::before {
diff --git a/src/web/views/Layout/_DesignSystem-content.scss b/src/web/views/Layout/_DesignSystem-content.scss
index 68895b8f..a995c0ec 100644
--- a/src/web/views/Layout/_DesignSystem-content.scss
+++ b/src/web/views/Layout/_DesignSystem-content.scss
@@ -10,7 +10,7 @@
       flex: 0;
       box-shadow: var(--box-shadow);
       transition: all ease 0.1s;
-      ::v-deep &__content {
+      :deep(.bimdata-card__content) {
         width: 100%;
         a {
           height: 100%;
diff --git a/src/web/views/Navigation/Navigation.vue b/src/web/views/Navigation/Navigation.vue
index 6a617ea8..8df2f48e 100644
--- a/src/web/views/Navigation/Navigation.vue
+++ b/src/web/views/Navigation/Navigation.vue
@@ -25,6 +25,7 @@
 <script>
 import pkg from "../../../../package.json";
 import store from "../../store.js";
+
 export default {
   version: pkg.version,
   props: {
@@ -62,10 +63,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-@import "../../../assets/css/variables.css";
-@import "../../../assets/css/utilities/_list.css";
-@import "../../../assets/scss/mixins/_font-size.scss";
-
-@import "./_DesignSystem-navigation.scss";
-</style>
+<style scoped lang="scss" src="./_DesignSystem-navigation.scss"></style>
diff --git a/src/web/views/Navigation/_DesignSystem-navigation.scss b/src/web/views/Navigation/_DesignSystem-navigation.scss
index ce2501d0..81380b61 100644
--- a/src/web/views/Navigation/_DesignSystem-navigation.scss
+++ b/src/web/views/Navigation/_DesignSystem-navigation.scss
@@ -1,3 +1,5 @@
+@import "../../../assets/scss/mixins/_font-size.scss";
+
 .bimdata-ds {
   &__header {
     width: 100%;
diff --git a/src/web/views/SmartComponents/FileTree/FileTree.vue b/src/web/views/SmartComponents/FileTree/FileTree.vue
deleted file mode 100644
index aee73754..00000000
--- a/src/web/views/SmartComponents/FileTree/FileTree.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div class="main-container">
-    <BIMDataSmartFileTree
-      :spaceId="515"
-      :projectId="756"
-      apiUrl="https://api-staging.bimdata.io"
-      accessToken="fc83e49ca9444d3ea41d212599f39040"
-    />
-  </div>
-</template>
-
-<script>
-import BIMDataSmartFileTree from "../../../../SmartComponents/BIMDataSmartFileTree/BIMDataSmartFileTree.js";
-
-export default {
-  components: {
-    BIMDataSmartFileTree,
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.main-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>