diff --git a/src/components/socialicons/style.css b/src/components/socialicons/style.css
index 05357f8..7c30147 100644
--- a/src/components/socialicons/style.css
+++ b/src/components/socialicons/style.css
@@ -1,86 +1,101 @@
 .stick_follow_icon {
-    top: 50%;
-    left: 30px;
-    width: 20px;
-    height: 200px;
-    position: fixed;
-    margin-top: -100px;
+  top: 50%;
+  left: 30px;
+  width: 20px;
+  height: 200px;
+  position: fixed;
+  margin-top: -100px;
+  z-index: 10;
+}
+
+@media (max-width: 1200px) {
+  .stick_follow_icon {
+    left: 15px;
+  }
+}
+
+@media (max-width: 1100px) {
+  .stick_follow_icon {
+    left: 10px;
+  }
 }
 
 .stick_follow_icon ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
 .stick_follow_icon svg {
-    width: 1.3em;
-    height: 1.3em;
-    fill: var(--text-color)
+  width: 1.3em;
+  height: 1.3em;
+  fill: var(--text-color);
 }
 
 .stick_follow_icon p {
-    top: 70px;
-    left: -24px;
-    width: 68px;
-    height: 20px;
-    color: var(--text-color);
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 1.2;
-    white-space: nowrap;
-    position: relative;
-    transform: rotate( -90deg);
+  top: 70px;
+  left: -24px;
+  width: 68px;
+  height: 20px;
+  color: var(--text-color);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+  position: relative;
+  transform: rotate(-90deg);
 }
 
 .stick_follow_icon ul li {
-    display: block;
-    font-size: 12px;
-    text-align: center;
-    margin-bottom: 10px;
-    transition: all .3s;
+  display: block;
+  font-size: 12px;
+  text-align: center;
+  margin-bottom: 10px;
+  transition: all 0.3s;
 }
 
 .stick_follow_icon p:after {
-    top: 9px;
-    right: -48px;
-    width: 40px;
-    height: 1px;
-    content: "";
-    display: block;
-    position: absolute;
-    background-color: var(--text-color);
+  top: 9px;
+  right: -48px;
+  width: 40px;
+  height: 1px;
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: var(--text-color);
 }
 
 @media only screen and (max-width: 991px) {
-    .stick_follow_icon {
-        width: unset;
-        height: unset;
-        position: static;
-        margin-top: unset;
-        display: flex;
-        flex-direction: row-reverse;
-        justify-content: center;
-        padding: 40px 0;
-        align-items: center;
-    }
-    .stick_follow_icon p {
-        top: unset;
-        left: unset;
-        width: unset;
-        height: unset;
-        white-space: nowrap;
-        position: relative;
-        transform: unset;
-        font-size: 17px;
-        margin-right: 65px;
-    }
-    .stick_follow_icon ul {
-        margin-bottom: 20px;
-    }
-    .stick_follow_icon ul li {
-        display: inline;
-        margin-bottom: 29px;
-        margin-right: 10px;
-    }
+  .stick_follow_icon {
+    width: 100%;
+    height: auto;
+    position: static;
+    margin-top: 40px;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    padding: 20px 0;
+    align-items: center;
+    background: var(--background-color);
+    z-index: 1;
+  }
+  .stick_follow_icon p {
+    top: unset;
+    left: unset;
+    width: unset;
+    height: unset;
+    white-space: nowrap;
+    position: relative;
+    transform: unset;
+    font-size: 17px;
+    margin-right: 65px;
+  }
+  .stick_follow_icon ul {
+    margin-bottom: 20px;
+  }
+  .stick_follow_icon ul li {
+    display: inline;
+    margin-bottom: 29px;
+    margin-right: 10px;
+  }
 }
diff --git a/src/hooks/AnimatedCursor.js b/src/hooks/AnimatedCursor.js
index 67defe8..d00a78b 100644
--- a/src/hooks/AnimatedCursor.js
+++ b/src/hooks/AnimatedCursor.js
@@ -2,12 +2,12 @@ import React, {useEffect,useRef,useState,useCallback} from "react"
 
 const IsDevice = (() => {
     if (typeof navigator == 'undefined') return
-  
+
     let ua = navigator.userAgent
-  
+
     return {
       info: ua,
-  
+
       Android() {
         return ua.match(/Android/i)
       },
@@ -30,7 +30,7 @@ const IsDevice = (() => {
       OperaMini() {
         return ua.match(/Opera Mini/i)
       },
-  
+
       /**
        * Any Device
        */
@@ -50,25 +50,25 @@ const IsDevice = (() => {
 
 function useEventListener(eventName, handler, element = document) {
     const savedHandler = useRef()
-  
+
     useEffect(() => {
       savedHandler.current = handler
     }, [handler])
-  
+
     useEffect(() => {
       const isSupported = element && element.addEventListener
       if (!isSupported) return
-  
+
       const eventListener = (event) => savedHandler.current(event)
-  
+
       element.addEventListener(eventName, eventListener)
-  
+
       return () => {
         element.removeEventListener(eventName, eventListener)
       }
     }, [eventName, element])
   }
-  
+
   /**
  * Cursor Core
  * Replaces the native cursor with a custom animated cursor, consisting
@@ -121,7 +121,7 @@ function CursorCore({
     const [isActiveClickable, setIsActiveClickable] = useState(false)
     let endX = useRef(0)
     let endY = useRef(0)
-  
+
     /**
      * Primary Mouse move event
      * @param {number} clientX - MouseEvent.clientx
@@ -134,7 +134,7 @@ function CursorCore({
       endX.current = clientX
       endY.current = clientY
     }, [])
-  
+
     // Outer Cursor Animation Delay
     const animateOuterCursor = useCallback(
       (time) => {
@@ -149,25 +149,25 @@ function CursorCore({
       },
       [requestRef] // eslint-disable-line
     )
-  
+
     // RAF for animateOuterCursor
     useEffect(() => {
       requestRef.current = requestAnimationFrame(animateOuterCursor)
       return () => cancelAnimationFrame(requestRef.current)
     }, [animateOuterCursor])
-  
+
     // Mouse Events State updates
     const onMouseDown = useCallback(() => setIsActive(true), [])
     const onMouseUp = useCallback(() => setIsActive(false), [])
     const onMouseEnterViewport = useCallback(() => setIsVisible(true), [])
     const onMouseLeaveViewport = useCallback(() => setIsVisible(false), [])
-  
+
     useEventListener('mousemove', onMouseMove)
     useEventListener('mousedown', onMouseDown)
     useEventListener('mouseup', onMouseUp)
     useEventListener('mouseover', onMouseEnterViewport)
     useEventListener('mouseout', onMouseLeaveViewport)
-  
+
     // Cursors Hover/Active State
     useEffect(() => {
       if (isActive) {
@@ -178,7 +178,7 @@ function CursorCore({
         cursorOuterRef.current.style.transform = 'translate(-50%, -50%) scale(1)'
       }
     }, [innerScale, outerScale, isActive])
-  
+
     // Cursors Click States
     useEffect(() => {
       if (isActiveClickable) {
@@ -190,7 +190,7 @@ function CursorCore({
         })`
       }
     }, [innerScale, outerScale, isActiveClickable])
-  
+
     // Cursor Visibility State
     useEffect(() => {
       if (isVisible) {
@@ -201,13 +201,13 @@ function CursorCore({
         cursorOuterRef.current.style.opacity = 0
       }
     }, [isVisible])
-  
+
     useEffect(() => {
       const clickableEls = document.querySelectorAll(clickables.join(','))
-  
+
       clickableEls.forEach((el) => {
         el.style.cursor = 'none'
-  
+
         el.addEventListener('mouseover', () => {
           setIsActive(true)
         })
@@ -226,7 +226,7 @@ function CursorCore({
           setIsActiveClickable(false)
         })
       })
-  
+
       return () => {
         clickableEls.forEach((el) => {
           el.removeEventListener('mouseover', () => {
@@ -249,7 +249,7 @@ function CursorCore({
         })
       }
     }, [isActive, clickables])
-  
+
     // Cursor Styles
     const styles = {
       cursorInner: {
@@ -278,10 +278,12 @@ function CursorCore({
         ...(outerStyle && outerStyle)
       }
     }
-  
-    // Hide / Show global cursor
-    document.body.style.cursor = 'none'
-  
+
+    // Hide native cursor only on non-mobile devices
+    if (!IsDevice.any()) {
+      document.body.style.cursor = 'none'
+    }
+
     return (
       <React.Fragment>
         <div ref={cursorOuterRef} style={styles.cursorOuter} />
@@ -289,7 +291,7 @@ function CursorCore({
       </React.Fragment>
     )
   }
-  
+
   /**
    * AnimatedCursor
    * Calls and passes props to CursorCore if not a touch/mobile device.
@@ -324,6 +326,6 @@ function CursorCore({
       />
     )
   }
-  
- 
+
+
 export default AnimatedCursor
diff --git a/src/index.css b/src/index.css
index d1c24f0..590f802 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,6 +7,7 @@
   --text-color-3: rgb(204, 0, 0);
   --overlay-color: rgb(8 8 8 / 63%);
   --image-container-bg: #060606;
+  --card-border: rgba(255, 255, 255, 0.2);
 }
 
 [data-theme="light"] {
@@ -18,6 +19,7 @@
   --text-color-3: rgb(204, 0, 0);
   --overlay-color: rgb(227 218 201 / 70%);
   --image-container-bg: #d8c9b2;
+  --card-border: rgba(0, 0, 0, 0.2);
 }
 
 html,
@@ -27,9 +29,9 @@ body {
 
 body {
   margin: 0;
-  height: 100%;
+  height: 100vh;
   overflow-x: hidden;
-  overflow-y: visible;
+  overflow-y: hidden;
   background-color: var(--bg-color);
   color: var(--text-color);
   font-family: "Raleway", sans-serif;
@@ -40,6 +42,14 @@ body {
   border-right: 10px solid var(--primary-color);
 }
 
+@media (max-width: 768px) {
+  body {
+    overflow-y: auto;
+    height: auto;
+    min-height: 100vh;
+  }
+}
+
 ul {
   list-style: none;
 }
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
index 9478775..8008ab7 100644
--- a/src/pages/home/index.js
+++ b/src/pages/home/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import "./style.css";
 import { Helmet, HelmetProvider } from "react-helmet-async";
 import Typewriter from "typewriter-effect";
@@ -6,6 +6,36 @@ import { introdata, meta } from "../../content_option";
 import { Link } from "react-router-dom";
 
 export const Home = () => {
+  const [needsScroll, setNeedsScroll] = useState(false);
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      const body = document.body;
+      const html = document.documentElement;
+      const documentHeight = Math.max(
+        body.scrollHeight,
+        body.offsetHeight,
+        html.clientHeight,
+        html.scrollHeight,
+        html.offsetHeight
+      );
+      const windowHeight = window.innerHeight;
+      setNeedsScroll(documentHeight > windowHeight);
+    };
+
+    // Initial check
+    checkOverflow();
+
+    // Add resize listener
+    window.addEventListener('resize', checkOverflow);
+
+    // Cleanup
+    return () => window.removeEventListener('resize', checkOverflow);
+  }, []);
+
+  useEffect(() => {
+    document.body.style.overflowY = needsScroll ? 'auto' : 'hidden';
+  }, [needsScroll]);
   return (
     <HelmetProvider>
       <section id="home" className="home">
diff --git a/src/pages/home/style.css b/src/pages/home/style.css
index 891ad52..a2d0d8d 100644
--- a/src/pages/home/style.css
+++ b/src/pages/home/style.css
@@ -34,13 +34,64 @@ section {
   height: calc(100vh - 60px);
   min-height: 700px;
   height: 100vh;
-  margin-top: -60px;
+  margin-top: 0;
 }
 
+/* Mobile-first responsive styles */
 @media (max-width: 991.98px) {
   .intro_sec {
-    display: block;
+    display: flex;
+    flex-direction: column;
     height: auto !important;
+    padding: 20px 0;
+    margin-top: 40px;
+  }
+
+  .intro_sec .text,
+  .intro_sec .h_bg-image {
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  .intro_sec .text h1 {
+    font-size: 24px;
+    margin-bottom: 20px;
+    padding-top: 10px;
+    padding-bottom: 20px;
+  }
+
+  .intro_sec .text h3 {
+    font-size: 14px;
+  }
+
+  .intro_sec > .h_bg-image {
+    min-height: 400px;
+    margin-top: 10px !important;
+    margin-bottom: 30px !important;
+  }
+
+  .ac_btn {
+    padding: 12px 24px;
+    margin: 10px 0;
+    width: 100%;
+    text-align: center;
+  }
+}
+
+/* Extra small devices (phones, 600px and down) */
+@media (max-width: 600px) {
+  .intro_sec .text h1 {
+    font-size: 22px;
+  }
+
+  .intro_sec .h_bg-image {
+    min-height: 300px;
+  }
+
+  .btn-portfolio,
+  .btn-about {
+    font-size: 14px;
+    padding: 10px 20px;
   }
 }
 
diff --git a/src/pages/portfolio/style.css b/src/pages/portfolio/style.css
index 98230ba..d2c6ea6 100644
--- a/src/pages/portfolio/style.css
+++ b/src/pages/portfolio/style.css
@@ -1,8 +1,12 @@
 .project_items_ho {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  margin-top: 2rem;
 }
 
 .project_item {
@@ -10,16 +14,25 @@
   text-align: center;
   margin: 0.5rem;
   position: relative;
-  background: var(--image-container-bg);
-  padding: 6px;
-  border: 1px solid var(--image-container-bg);
-  transition: 0.3s ease;
+  background: var(--card-bg, var(--background));
+  padding: 1rem;
+  border: 0.5px solid var(--card-border, var(--foreground));
+  border-radius: 8px;
+  outline: 3px solid var(--card-outline-color, var(--primary));
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   font-size: 0;
   min-height: 300px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
+}
+
+.project_item:hover {
+  transform: translateY(-2px);
+  border-color: var(--card-outline-hover, var(--primary));
 }
 
 @media (max-width: 768px) {
@@ -50,10 +63,11 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background: var(--overlay-color);
+  background: var(--overlay-bg, rgba(var(--background-rgb), 0.9));
+  backdrop-filter: blur(4px);
   opacity: 0;
-  transition: opacity 0.3s ease-in-out;
-  padding: 10px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 1.5rem;
   box-sizing: border-box;
 }
 
@@ -62,21 +76,29 @@
 }
 
 .project_item .content p {
-  color: var(--text-color);
-  font-size: 1rem;
-  margin-bottom: 10px;
+  color: var(--foreground);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin-bottom: 1rem;
+  text-align: center;
+  max-width: 90%;
 }
 
 .project_item .content a {
-  background: var(--bg-color);
-  border: solid 1px var(--text-color);
-  padding: 4px 8px;
+  background: var(--button-bg, var(--background));
+  border: 1px solid var(--button-border, var(--border));
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
   text-align: center;
-  font-size: 1rem;
-  color: var(--text-color);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--foreground);
   text-decoration: none;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .project_item .content a:hover {
-  text-decoration: none;
+  background: var(--button-hover-bg, var(--muted));
+  transform: translateY(-1px);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }