diff --git a/src/components/design/Marquee.vue b/src/components/design/Marquee.vue
index 81f9547..f310344 100644
--- a/src/components/design/Marquee.vue
+++ b/src/components/design/Marquee.vue
@@ -1,5 +1,4 @@
 <template>
-  isSmallScreen: {{ isSmallScreen }}
   <section
     v-if="!isSmallScreen"
     id="marquee-section"
diff --git a/src/components/design/index.ts b/src/components/design/index.ts
index 4fd3b14..aef3b0c 100644
--- a/src/components/design/index.ts
+++ b/src/components/design/index.ts
@@ -1,13 +1,14 @@
-import Circles from './Circles.vue';
-import MyName from './MyName.vue';
-import Star from './Star.vue';
-import LoadingScreen from './LoadingScreen.vue';
-import SamsungError from './SamsungError.vue';
-import Marquee from './Marquee.vue';
-import Slider from './Slider.vue';
-import Footer from './Footer.vue';
+import { defineAsyncComponent } from 'vue';
 
-import Cursor from './Cursor.vue';
+const Circles = defineAsyncComponent(() => import('./Circles.vue'));
+const MyName = defineAsyncComponent(() => import('./MyName.vue'));
+const Star = defineAsyncComponent(() => import('./Star.vue'));
+const LoadingScreen = defineAsyncComponent(() => import('./LoadingScreen.vue'));
+const SamsungError = defineAsyncComponent(() => import('./SamsungError.vue'));
+const Marquee = defineAsyncComponent(() => import('./Marquee.vue'));
+const Slider = defineAsyncComponent(() => import('./Slider.vue'));
+const Footer = defineAsyncComponent(() => import('./Footer.vue'));
+const Cursor = defineAsyncComponent(() => import('./Cursor.vue'));
 
 export {
   Circles,
diff --git a/src/components/sections/People.vue b/src/components/sections/People.vue
index fe4b972..dd728d7 100644
--- a/src/components/sections/People.vue
+++ b/src/components/sections/People.vue
@@ -2,7 +2,7 @@
   <!-- common-padding  -->
   <section
     id="testimonials-section"
-    class="common-padding relative mx-auto min-h-svh overflow-y-clip py-0 will-change-transform"
+    class="common-padding relative mx-auto min-h-svh overflow-y-clip py-0 will-change-auto"
   >
     <div
       class="grid w-full grid-cols-12 border-b-[1px] border-flax-smoke-300 pb-[clamp(2.25rem,2.1786rem_+_0.3571vi,2.5rem)]"
diff --git a/src/components/sections/aboutMe.vue b/src/components/sections/aboutMe.vue
index a8f087d..ba2672f 100644
--- a/src/components/sections/aboutMe.vue
+++ b/src/components/sections/aboutMe.vue
@@ -1,7 +1,7 @@
 <template>
   <section
     id="about-me-section"
-    class="common-padding relative z-10 overflow-y-clip rounded-b-3xl bg-[#0B0B0A] text-flax-smoke-200 shadow-2xl will-change-transform sm:mt-0"
+    class="common-padding relative z-10 overflow-y-clip rounded-b-3xl bg-[#0B0B0A] text-flax-smoke-200 shadow-2xl will-change-auto sm:mt-0"
   >
     <div class="md:column-gap grid grid-cols-12">
       <div class="hide-on-mobile overflow-hidden md:col-span-4">
diff --git a/src/components/sections/index.ts b/src/components/sections/index.ts
index 1e23220..6a3165e 100644
--- a/src/components/sections/index.ts
+++ b/src/components/sections/index.ts
@@ -1,11 +1,12 @@
 import { defineAsyncComponent } from 'vue';
 
 import Hero from './Hero.vue';
+import Contact from './Contact.vue';
 
 const Services = defineAsyncComponent(() => import('./Services.vue'));
 const Works = defineAsyncComponent(() => import('./Works.vue'));
 const aboutMe = defineAsyncComponent(() => import('./aboutMe.vue'));
 const People = defineAsyncComponent(() => import('./People.vue'));
-const Contact = defineAsyncComponent(() => import('./Contact.vue'));
+// const Contact = defineAsyncComponent(() => import('./Contact.vue'));
 
 export { Hero, Services, Works, aboutMe, People, Contact };