diff --git a/src/constants/code/Components/counterCode.ts b/src/constants/code/Components/counterCode.ts
index 8f1fe16..4e51994 100644
--- a/src/constants/code/Components/counterCode.ts
+++ b/src/constants/code/Components/counterCode.ts
@@ -1,5 +1,5 @@
-import code from '@content/Components/Counter/Counter.vue?raw'
-import { createCodeObject } from '../../../types/code'
+import code from '@content/Components/Counter/Counter.vue?raw';
+import { createCodeObject } from '../../../types/code';
 
 export const counter = createCodeObject(code, 'Components/Counter', {
   installation: `npm i motion-v`,
@@ -13,5 +13,5 @@ export const counter = createCodeObject(code, 'Components/Counter', {
   :gap="10"
   textColor="white"
   :fontWeight="900"
-/>`,
-})
\ No newline at end of file
+/>`
+});
diff --git a/src/content/Components/RollingGallery/RollingGallery.vue b/src/content/Components/RollingGallery/RollingGallery.vue
index ab020f7..0a9bcd7 100644
--- a/src/content/Components/RollingGallery/RollingGallery.vue
+++ b/src/content/Components/RollingGallery/RollingGallery.vue
@@ -50,17 +50,17 @@ const props = withDefaults(defineProps<RollingGalleryProps>(), {
 });
 
 const DEFAULT_IMAGES = shallowRef([
-  "https://images.unsplash.com/photo-1528181304800-259b08848526?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1506665531195-3566af2b4dfa?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?q=80&w=3456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1495103033382-fe343886b671?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1506781961370-37a89d6b3095?q=80&w=3264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1599576838688-8a6c11263108?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1494094892896-7f14a4433b7a?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://plus.unsplash.com/premium_photo-1664910706524-e783eed89e71?q=80&w=3869&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1503788311183-fa3bf9c4bc32?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-  "https://images.unsplash.com/photo-1585970480901-90d6bb2a48b5?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-])
+  'https://images.unsplash.com/photo-1528181304800-259b08848526?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1506665531195-3566af2b4dfa?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?q=80&w=3456&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1495103033382-fe343886b671?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1506781961370-37a89d6b3095?q=80&w=3264&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1599576838688-8a6c11263108?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1494094892896-7f14a4433b7a?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://plus.unsplash.com/premium_photo-1664910706524-e783eed89e71?q=80&w=3869&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1503788311183-fa3bf9c4bc32?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+  'https://images.unsplash.com/photo-1585970480901-90d6bb2a48b5?q=80&w=3774&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+]);
 
 const isScreenSizeSm = ref(false);
 const rotateYValue = ref(0);
diff --git a/src/demo/Components/CounterDemo.vue b/src/demo/Components/CounterDemo.vue
index 02c624d..4942cbc 100644
--- a/src/demo/Components/CounterDemo.vue
+++ b/src/demo/Components/CounterDemo.vue
@@ -17,13 +17,13 @@
 
         <div class="flex gap-4 bottom-4 justify-center mt-4 absolute left-1/2 transform -translate-x-1/2">
           <button
-            class="bg-[#170D27] rounded-[10px] border border-[#271E37] hover:bg-[#271E37] text-white h-10 w-10 transition-colors"
+            class="cursor-pointer bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-10 w-10 transition-colors"
             @click="value > 0 && value--"
           >
             -
           </button>
           <button
-            class="bg-[#170D27] rounded-[10px] border border-[#271E37] hover:bg-[#271E37] text-white h-10 w-10 transition-colors"
+            class="cursor-pointer bg-[#0b0b0b] rounded-[10px] border border-[#333] hover:bg-[#222] text-white h-10 w-10 transition-colors"
             @click="value < 999 && value++"
           >
             +
@@ -32,29 +32,11 @@
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Value"
-          v-model="value"
-          :min="0"
-          :max="999"
-          :step="1"
-        />
+        <PreviewSlider title="Value" v-model="value" :min="0" :max="999" :step="1" />
 
-        <PreviewSlider
-          title="Gap"
-          v-model="gap"
-          :min="0"
-          :max="50"
-          :step="5"
-        />
+        <PreviewSlider title="Gap" v-model="gap" :min="0" :max="50" :step="5" />
 
-        <PreviewSlider
-          title="Font Size"
-          v-model="fontSize"
-          :min="40"
-          :max="200"
-          :step="10"
-        />
+        <PreviewSlider title="Font Size" v-model="fontSize" :min="40" :max="200" :step="10" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -72,124 +54,124 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '../../components/common/TabbedLayout.vue'
-import Customize from '../../components/common/Customize.vue'
-import PreviewSlider from '../../components/common/PreviewSlider.vue'
-import PropTable from '../../components/common/PropTable.vue'
-import CodeExample from '../../components/code/CodeExample.vue'
-import CliInstallation from '../../components/code/CliInstallation.vue'
-import Dependencies from '../../components/code/Dependencies.vue'
+import { ref } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
 
-import Counter from '../../content/Components/Counter/Counter.vue'
-import { counter } from '../../constants/code/Components/counterCode'
+import Counter from '../../content/Components/Counter/Counter.vue';
+import { counter } from '../../constants/code/Components/counterCode';
 
-const value = ref(123)
-const fontSize = ref(80)
-const gap = ref(10)
+const value = ref(123);
+const fontSize = ref(80);
+const gap = ref(10);
 
 const propData = [
   {
-    name: "value",
-    type: "number",
-    default: "N/A (required)",
-    description: "The numeric value to display in the counter."
+    name: 'value',
+    type: 'number',
+    default: 'N/A (required)',
+    description: 'The numeric value to display in the counter.'
   },
   {
-    name: "fontSize",
-    type: "number",
-    default: "100",
-    description: "The base font size used for the counter digits."
+    name: 'fontSize',
+    type: 'number',
+    default: '100',
+    description: 'The base font size used for the counter digits.'
   },
   {
-    name: "padding",
-    type: "number",
-    default: "0",
-    description: "Additional padding added to the digit height."
+    name: 'padding',
+    type: 'number',
+    default: '0',
+    description: 'Additional padding added to the digit height.'
   },
   {
-    name: "places",
-    type: "number[]",
-    default: "[100, 10, 1]",
-    description: "An array of place values to determine which digits to display."
+    name: 'places',
+    type: 'number[]',
+    default: '[100, 10, 1]',
+    description: 'An array of place values to determine which digits to display.'
   },
   {
-    name: "gap",
-    type: "number",
-    default: "8",
-    description: "The gap (in pixels) between each digit."
+    name: 'gap',
+    type: 'number',
+    default: '8',
+    description: 'The gap (in pixels) between each digit.'
   },
   {
-    name: "borderRadius",
-    type: "number",
-    default: "4",
-    description: "The border radius (in pixels) for the counter container."
+    name: 'borderRadius',
+    type: 'number',
+    default: '4',
+    description: 'The border radius (in pixels) for the counter container.'
   },
   {
-    name: "horizontalPadding",
-    type: "number",
-    default: "8",
-    description: "The horizontal padding (in pixels) for the counter container."
+    name: 'horizontalPadding',
+    type: 'number',
+    default: '8',
+    description: 'The horizontal padding (in pixels) for the counter container.'
   },
   {
-    name: "textColor",
-    type: "string",
+    name: 'textColor',
+    type: 'string',
     default: "'white'",
-    description: "The text color for the counter digits."
+    description: 'The text color for the counter digits.'
   },
   {
-    name: "fontWeight",
-    type: "string | number",
+    name: 'fontWeight',
+    type: 'string | number',
     default: "'bold'",
-    description: "The font weight of the counter digits."
+    description: 'The font weight of the counter digits.'
   },
   {
-    name: "containerStyle",
-    type: "CSSProperties",
-    default: "{}",
-    description: "Custom inline styles for the outer container."
+    name: 'containerStyle',
+    type: 'CSSProperties',
+    default: '{}',
+    description: 'Custom inline styles for the outer container.'
   },
   {
-    name: "counterStyle",
-    type: "CSSProperties",
-    default: "{}",
-    description: "Custom inline styles for the counter element."
+    name: 'counterStyle',
+    type: 'CSSProperties',
+    default: '{}',
+    description: 'Custom inline styles for the counter element.'
   },
   {
-    name: "digitStyle",
-    type: "CSSProperties",
-    default: "{}",
-    description: "Custom inline styles for each digit container."
+    name: 'digitStyle',
+    type: 'CSSProperties',
+    default: '{}',
+    description: 'Custom inline styles for each digit container.'
   },
   {
-    name: "gradientHeight",
-    type: "number",
-    default: "16",
-    description: "The height (in pixels) of the gradient overlays."
+    name: 'gradientHeight',
+    type: 'number',
+    default: '16',
+    description: 'The height (in pixels) of the gradient overlays.'
   },
   {
-    name: "gradientFrom",
-    type: "string",
+    name: 'gradientFrom',
+    type: 'string',
     default: "'black'",
-    description: "The starting color for the gradient overlays."
+    description: 'The starting color for the gradient overlays.'
   },
   {
-    name: "gradientTo",
-    type: "string",
+    name: 'gradientTo',
+    type: 'string',
     default: "'transparent'",
-    description: "The ending color for the gradient overlays."
+    description: 'The ending color for the gradient overlays.'
   },
   {
-    name: "topGradientStyle",
-    type: "CSSProperties",
-    default: "undefined",
-    description: "Custom inline styles for the top gradient overlay."
+    name: 'topGradientStyle',
+    type: 'CSSProperties',
+    default: 'undefined',
+    description: 'Custom inline styles for the top gradient overlay.'
   },
   {
-    name: "bottomGradientStyle",
-    type: "CSSProperties",
-    default: "undefined",
-    description: "Custom inline styles for the bottom gradient overlay."
-  },
-]
+    name: 'bottomGradientStyle',
+    type: 'CSSProperties',
+    default: 'undefined',
+    description: 'Custom inline styles for the bottom gradient overlay.'
+  }
+];
 </script>
diff --git a/src/demo/Components/RollingGalleryDemo.vue b/src/demo/Components/RollingGalleryDemo.vue
index 93e2d11..b3690a6 100644
--- a/src/demo/Components/RollingGalleryDemo.vue
+++ b/src/demo/Components/RollingGalleryDemo.vue
@@ -17,15 +17,9 @@
       </div>
 
       <Customize>
-        <PreviewSwitch
-          title="Autoplay"
-          v-model="autoplay"
-        />
+        <PreviewSwitch title="Autoplay" v-model="autoplay" />
 
-        <PreviewSwitch
-          title="Pause on Hover"
-          v-model="pauseOnHover"
-        />
+        <PreviewSwitch title="Pause on Hover" v-model="pauseOnHover" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -43,39 +37,39 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import TabbedLayout from '@/components/common/TabbedLayout.vue'
-import PropTable from '@/components/common/PropTable.vue'
-import Dependencies from '@/components/code/Dependencies.vue'
-import CliInstallation from '@/components/code/CliInstallation.vue'
-import CodeExample from '@/components/code/CodeExample.vue'
-import Customize from '@/components/common/Customize.vue'
-import PreviewSwitch from '@/components/common/PreviewSwitch.vue'
-import RollingGallery from '@/content/Components/RollingGallery/RollingGallery.vue'
-import { rollingGallery } from '@/constants/code/Components/rollingGalleryCode'
+import { ref } from 'vue';
+import TabbedLayout from '@/components/common/TabbedLayout.vue';
+import PropTable from '@/components/common/PropTable.vue';
+import Dependencies from '@/components/code/Dependencies.vue';
+import CliInstallation from '@/components/code/CliInstallation.vue';
+import CodeExample from '@/components/code/CodeExample.vue';
+import Customize from '@/components/common/Customize.vue';
+import PreviewSwitch from '@/components/common/PreviewSwitch.vue';
+import RollingGallery from '@/content/Components/RollingGallery/RollingGallery.vue';
+import { rollingGallery } from '@/constants/code/Components/rollingGalleryCode';
 
-const autoplay = ref(true)
-const pauseOnHover = ref(true)
-const customImages = ref<string[]>([])
+const autoplay = ref(true);
+const pauseOnHover = ref(true);
+const customImages = ref<string[]>([]);
 
 const propData = [
   {
     name: 'autoplay',
     type: 'boolean',
     default: 'false',
-    description: 'Controls the autoplay toggle of the carousel. When turned on, it rotates and loops infinitely.',
+    description: 'Controls the autoplay toggle of the carousel. When turned on, it rotates and loops infinitely.'
   },
   {
     name: 'pauseOnHover',
     type: 'boolean',
     default: 'false',
-    description: 'Allows the carousel to be paused on hover when autoplay is turned on.',
+    description: 'Allows the carousel to be paused on hover when autoplay is turned on.'
   },
   {
     name: 'images',
     type: 'string[]',
     default: '[]',
-    description: 'Array of image URLs to display in the gallery.',
-  },
-]
+    description: 'Array of image URLs to display in the gallery.'
+  }
+];
 </script>