diff --git a/package-lock.json b/package-lock.json
index 0d1b6b7..310e8a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "framer-motion": "^5.3.0",
         "graphql": "^16.0.1",
         "invoices": "^2.0.2",
+        "lodash.debounce": "^4.0.8",
         "lodash.throttle": "^4.1.1",
         "prisma": "3.5.0",
         "react": "^17.0.2",
@@ -19885,6 +19886,7 @@
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
     "node_modules/lodash.get": {
@@ -68360,6 +68362,7 @@
     },
     "lodash.debounce": {
       "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
     "lodash.get": {
diff --git a/package.json b/package.json
index bc3a264..27f5434 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "framer-motion": "^5.3.0",
     "graphql": "^16.0.1",
     "invoices": "^2.0.2",
+    "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "prisma": "3.5.0",
     "react": "^17.0.2",
diff --git a/src/Components/ExplorePage/ProjectsRow/ProjectsRow.tsx b/src/Components/ExplorePage/ProjectsRow/ProjectsRow.tsx
index e924070..0dd8314 100644
--- a/src/Components/ExplorePage/ProjectsRow/ProjectsRow.tsx
+++ b/src/Components/ExplorePage/ProjectsRow/ProjectsRow.tsx
@@ -41,7 +41,7 @@ export default function ProjectsRow({ title, categoryId, projects }: Props) {
     useEffect(() => {
         const listener = _throttle(() => {
             setCarouselItmsCnt(calcNumItems());
-        }, 1000);
+        }, 250);
 
         window.addEventListener('resize', listener)
         return () => {
diff --git a/src/Components/Project/ProjectCard.tsx b/src/Components/Project/ProjectCard.tsx
index 02a6960..41942bb 100644
--- a/src/Components/Project/ProjectCard.tsx
+++ b/src/Components/Project/ProjectCard.tsx
@@ -87,7 +87,7 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
             initial='initial'
             animate="animate"
             exit='exit'
-            className="modal-card max-w-[710px] max-h-[80vh]"
+            className="modal-card max-w-[710px]"
 
         >
             <div className="relative h-[80px] lg:h-[152px]">
@@ -131,16 +131,16 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
                     <h3 className="text-h5 font-bold mb-16">Screenshots</h3>
                     <div className="grid grid-cols-2 gap-12 justify-items-center md:gap-24">
                         <div className="w-full relative pt-[56%]">
-                            <div className="absolute inset-0 object-cover bg-gray-300 rounded-xl"></div>
+                            <div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl"></div>
                         </div>
                         <div className="w-full relative pt-[56%]">
-                            <div className="absolute inset-0 object-cover bg-gray-300 rounded-xl"></div>
+                            <div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl"></div>
                         </div>
                         <div className="w-full relative pt-[56%]">
-                            <div className="absolute inset-0 object-cover bg-gray-300 rounded-xl"></div>
+                            <div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl"></div>
                         </div>
                         <div className="w-full relative pt-[56%]">
-                            <div className="absolute inset-0 object-cover bg-gray-300 rounded-xl"></div>
+                            <div className="absolute top-0 left-0 w-full h-full object-cover bg-gray-300 rounded-xl"></div>
                         </div>
                     </div>
                 </div>
diff --git a/src/Components/Shared/Modal/Modal.tsx b/src/Components/Shared/Modal/Modal.tsx
index 4689b97..3a23a77 100644
--- a/src/Components/Shared/Modal/Modal.tsx
+++ b/src/Components/Shared/Modal/Modal.tsx
@@ -16,14 +16,19 @@ export default function Modal({ onClose, children, ...props }: Props) {
             initial={false}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className='w-screen h-full fixed inset-0 py-32 px-16 md:py-64 flex flex-col justify-center items-center overflow-x-hidden overflow-y-hidden no-scrollbar'
+            className='fixed w-screen h-screen items-center overflow-x-hidden no-scrollbar'
             {...props}
         >
             <div
-                className="w-screen h-full bg-gray-300 bg-opacity-50 absolute inset-0"
-                onClick={onClose}
-            ></div>
-            {children}
+                className='w-screen min-h-screen relative flex flex-col justify-center items-center py-32 px-16 md:py-64 overflow-x-hidden no-scrollbar'
+            >
+
+                <div
+                    className="absolute w-full h-full top-0 left-0 bg-gray-300 bg-opacity-50 "
+                    onClick={onClose}
+                ></div>
+                {children}
+            </div>
         </motion.div>
     )
 }
diff --git a/src/Components/Shared/ModalsContainer/ModalsContainer.tsx b/src/Components/Shared/ModalsContainer/ModalsContainer.tsx
index 3446c36..18fd6fd 100644
--- a/src/Components/Shared/ModalsContainer/ModalsContainer.tsx
+++ b/src/Components/Shared/ModalsContainer/ModalsContainer.tsx
@@ -101,7 +101,7 @@ export default function ModalsContainer() {
             <AnimatePresence exitBeforeEnter>
                 {isOpen &&
                     <motion.div
-                        className="w-screen h-scree fixed inset-0"
+                        className="w-screen fixed inset-0 overflow-x-hidden"
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
                         exit={{
diff --git a/src/index.css b/src/index.css
index 7c5ca54..bf1c78b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -36,7 +36,7 @@
   }
 
   .modal-card {
-    @apply rounded-[40px] bg-gray-50 overflow-y-scroll w-full max-w-[600px] shadow-2xl z-10;
+    @apply rounded-[40px] bg-gray-50 overflow-hidden w-full max-w-[600px] shadow-2xl z-10;
   }
 }
 
@@ -50,7 +50,14 @@ svg {
 
 /* width */
 ::-webkit-scrollbar {
-  width: 12px;
+  width: 4px;
+}
+
+@media screen and (min-width: 668px) {
+  /* width */
+  ::-webkit-scrollbar {
+    width: 12px;
+  }
 }
 
 /* Track */