diff --git a/app.vue b/app.vue
index 2dba4ed..732f492 100644
--- a/app.vue
+++ b/app.vue
@@ -6,7 +6,9 @@
       <!-- MlButton: This button can be used for various actions like form submissions or dialog openings. Customize its appearance using the :pt prop. -->
       <MlButton
         :pt="{
-          root: { class: 'flex justify-center items-center disabled:opacity-60' },
+          root: {
+            class: 'flex justify-center items-center disabled:opacity-60',
+          },
           outer: {
             class:
               'bg-gradient-to-r from-green-300 to-red-400 p-[2px] w-full focus:outline-none rounded-3xl',
@@ -29,13 +31,12 @@
         :pt="{
           root: {
             class:
-              'flex space-x-1 bg-white/85 dark:bg-BgDark/85 shadow-custom-lrb items-center px-3 py-2 rounded-full dark:text-white',
+              'w-auto flex space-x-1 bg-white/85 shadow-2xl items-center px-3 py-2 rounded-full text-black',
           },
-          paginator: { class: 'bg-red-500' },
-          activePaginator: { class: 'bg-accent2 dark:bg-accent1' },
+          paginator: { class: '' },
+          activePaginator: { class: 'bg-green-500' },
         }"
       />
-
       <!-- MlDropDown: A customizable dropdown menu component for selecting options. 
        Use the :pt prop to define styles for the root, dropdown, title, and arrow sections.
        The dropdown supports multiple items which can be styled individually using the :pt prop for each MlDropDownItem. -->
@@ -44,12 +45,11 @@
         title="Dropdown"
         :title="''"
         :pt="{
-          root: { class: 'w-10 h-10 text-left absolute left-0 z-0' },
+          root: { class: 'w-[100px] h-10 text-left relative' },
           dropdown: {
-            class:
-              'w-[150px] right-[-50px] absolute mt-4 shadow-custom-lrb dark:shadow-custom-drb block',
+            class: 'w-[150px] right-[-50px] absolute mt-4 block',
           },
-          title: { class: 'w-[30px] h-10' },
+          title: { class: 'w-[100px] h-10 bg-white shadow-2xl' },
           arrow: { class: 'hidden' },
         }"
       >
diff --git a/modules/module.ts b/modules/module.ts
index 54a0a78..934e873 100644
--- a/modules/module.ts
+++ b/modules/module.ts
@@ -25,6 +25,37 @@ const components = [
     name: "MlDropDownItem",
     path: "../src/components/Ml/DropDown/MlDropDownItem.vue",
   },
+  {
+    name: "MlDropDownItem",
+    path: "../src/components/Ml/DropDown/MlDropDownItem.vue",
+  },
+  {
+    name: "MlSlider",
+    path: "../src/components/Ml/Slider/MlSlider.vue",
+  },
+  {
+    name: "MlSliderPoint",
+    path: "../src/components/Ml/MlSliderPoint/MlSliderPoint.vue",
+  },
+];
+
+const composables = [
+  {
+    name: "useRipple",
+    path: "../src/composables/useRipple.ts",
+  },
+  {
+    name: "useMergeClasses",
+    path: "../src/composables/useMergeClasses.ts",
+  },
+  {
+    name: "useBounce",
+    path: "../src/composables/useBounce.ts",
+  },
+  {
+    name: "useTailwindConf",
+    path: "../src/composables/useTailwindConf.ts",
+  },
 ];
 export default defineNuxtModule<ModuleOptions>({
   meta: {
@@ -42,11 +73,13 @@ export default defineNuxtModule<ModuleOptions>({
       });
     }
 
-    addImports([
-      {
-        name: "useRipple",
-        from: resolver.resolve("../src/composables/useRipple.ts"),
-      },
-    ]);
+    for (let item of composables) {
+      addImports([
+        {
+          name: item.name,
+          from: resolver.resolve(item.path),
+        },
+      ]);
+    }
   },
 });