diff --git a/src/components/common/BackToTop.jsx b/src/components/common/BackToTop.jsx
deleted file mode 100644
index d9c51a7..0000000
--- a/src/components/common/BackToTop.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { BsFillArrowUpCircleFill } from 'react-icons/bs'
-
-export default function BackToTop() {
-    const [backToTop,setBackToTop]=useState(false)
-    useEffect(()=>{
-        window.addEventListener('scroll',()=>{
-            if(window.scrollY>100){
-                setBackToTop(true)
-
-            }else{
-                setBackToTop(false)
-            }
-        })
-    },[])
-    const scrollUp=()=>{
-        window.scrollTo({
-            top:0,
-            behavior:'smooth',
-        })
-    }
-  return (
-    <>
-    
-    {backToTop && (
-        <a href="#" className="to-top" style={{
-            color: 'blue',
-            position: 'fixed',
-            bottom: '10px',
-            right: '65px',
-            width: '55px',
-            height: '50px',
-            borderRadius: '50%',
-            border: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontSize: '47px',
-            opacity: '1',
-            transition: 'all .4s'}}>
-        <BsFillArrowUpCircleFill/>
-      </a>
-
-    )}
-    </>
-  )
-}
diff --git a/src/components/layout/DashboardLayout.jsx b/src/components/layout/DashboardLayout.jsx
index 760dfdd..6bb7905 100644
--- a/src/components/layout/DashboardLayout.jsx
+++ b/src/components/layout/DashboardLayout.jsx
@@ -8,15 +8,11 @@ import {
   useNavigate,
 } from "react-router-dom";
 import Login from "../../pages/auth/Login";
-import {BsFillArrowUpCircleFill} from 'react-icons/bs'
-
 
 import "../../styles/argon.css";
 import "../../styles/style.css";
-import BackToTop from "../common/BackToTop";
 
 const DashboardLayout = () => {
-  
   const navigate = useNavigate();
 
   const logout = () => {
@@ -46,7 +42,6 @@ const DashboardLayout = () => {
         </Container>
       </Navbar>
       <Outlet />
-     <BackToTop/>
     </React.Fragment>
   );
 };
diff --git a/src/components/layout/HomeLayout.jsx b/src/components/layout/HomeLayout.jsx
index e5bdef9..f0b97e5 100644
--- a/src/components/layout/HomeLayout.jsx
+++ b/src/components/layout/HomeLayout.jsx
@@ -7,7 +7,6 @@ import { Link, Outlet } from "react-router-dom";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "../../styles/argon.css";
 import "../../styles/style.css";
-import BackToTop from "../common/BackToTop";
 
 const HomeLayout = () => {
  
@@ -118,11 +117,7 @@ const HomeLayout = () => {
             </Col>
           </Row>
         </Container>
-      </footer>
-      
-
-      <BackToTop/>
-      
+      </footer>      
     </React.Fragment>
   );
 };
diff --git a/src/pages/portfolio/template/common/BackToTop.jsx b/src/pages/portfolio/template/common/BackToTop.jsx
new file mode 100644
index 0000000..1ed0607
--- /dev/null
+++ b/src/pages/portfolio/template/common/BackToTop.jsx
@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+import { FaChevronUp } from "react-icons/fa";
+
+const BackToTop = () => {
+  const [backToTop, setBackToTop] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener("scroll", () => {
+      if (window.scrollY > 150) {
+        setBackToTop(true);
+      } else {
+        setBackToTop(false);
+      }
+    });
+  }, []);
+
+  const scrollUp = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <>
+      {backToTop && (
+        <div className="back-to-top-div">
+          <FaChevronUp onClick={() => scrollUp()} size={24} />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default BackToTop;
diff --git a/src/pages/portfolio/template/common/Footer.jsx b/src/pages/portfolio/template/common/Footer.jsx
index f80ca95..c9180ea 100644
--- a/src/pages/portfolio/template/common/Footer.jsx
+++ b/src/pages/portfolio/template/common/Footer.jsx
@@ -6,7 +6,7 @@ const Footer = ({ portfolioDetails }) => {
     <footer>
       <Container className="bg-tranparent py-4">
         <div className="text-center">
-          <p className="mb-0">Copyrights © 2022 {portfolioDetails?.name}</p>
+          <p className="mb-0">Copyrights © 2023 {portfolioDetails?.name}</p>
         </div>
       </Container>
     </footer>
diff --git a/src/pages/portfolio/template/template1/Template1.jsx b/src/pages/portfolio/template/template1/Template1.jsx
index 4b8e1c5..3c53cc3 100644
--- a/src/pages/portfolio/template/template1/Template1.jsx
+++ b/src/pages/portfolio/template/template1/Template1.jsx
@@ -4,13 +4,14 @@ import Projects from "./components/Projects";
 import Skills from "./components/Skills";
 import Works from "./components/Works";
 import Toggle from "../common/Toggle";
+import BackToTop from "../common/BackToTop";
+
 import { useParams } from "react-router";
 import { apiCommon } from "../../../../services/models/CommonModel";
 
 import { PageLoader } from "../../../../components/common/CustomLoaders";
 
 import "./styles/style.css";
-import BackToTop from "../../../../components/common/BackToTop";
 
 const Portfolio = () => {
   const [isLoading, setLoading] = useState(true);
@@ -28,6 +29,7 @@ const Portfolio = () => {
         });
         setLoading(false);
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.log(error);
       }
     };
@@ -42,7 +44,8 @@ const Portfolio = () => {
       ) : (
         <React.Fragment>
           <div className={`text-${portfolioDetails.font} template1`}>
-            <Toggle  style={{bottom:'30px'}}/>
+            <Toggle style={{ bottom: "30px" }} />
+            <BackToTop />
             <Intro portfolioDetails={portfolioDetails} />
             <Projects portfolioDetails={portfolioDetails} />
             <Skills portfolioDetails={portfolioDetails} />
@@ -50,7 +53,6 @@ const Portfolio = () => {
           </div>
         </React.Fragment>
       )}
-      <BackToTop/>
     </React.Fragment>
   );
 };
diff --git a/src/pages/portfolio/template/template1/styles/style.css b/src/pages/portfolio/template/template1/styles/style.css
index 1ccee4f..b811106 100644
--- a/src/pages/portfolio/template/template1/styles/style.css
+++ b/src/pages/portfolio/template/template1/styles/style.css
@@ -34,7 +34,7 @@
 
 .img-align {
   justify-content: left;
-  margin-left: -50px;
+  margin-left: -80px;
 }
 @media only screen and (max-width: 770px) {
   .img-align {
@@ -113,23 +113,6 @@ li.timeline-item::before {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
-.toggle-div {
-  position: fixed;
-  width: 52px;
-  height: 50px;
-  bottom: 10px;
-  right: 10px;
-  background-color: #fff;
-  border-radius: 50%;
-  text-align: center;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-
 .template1 .btn-resume-1 {
   background-color: transparent;
   border: 1px solid #fff;
diff --git a/src/pages/portfolio/template/template1/styles/style.css.map b/src/pages/portfolio/template/template1/styles/style.css.map
index 49d9e5c..632b489 100644
--- a/src/pages/portfolio/template/template1/styles/style.css.map
+++ b/src/pages/portfolio/template/template1/styles/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAMA;EACE,kBAAA;ACLF;;ADQA;EACE,yBAAA;ACLF;;ADQA;EACE,6CAfmB;EAgBnB,mDAhBmB;ACWrB;;ADQA;EACE,6CAjBkB;EAkBlB,mDAlBkB;ACapB;;ADQA;EACE,2CAAA;ACLF;;ADQA;EACE,qCAAA;EACA,oBAAA;KAAA,iBAAA;ACLF;;ADQA;EACE,qCAAA;EACA,oBAAA;KAAA,iBAAA;ACLF;;ADQA;EACE,qBAAA;EACA,kBAAA;ACLF;ADME;EAHF;IAII,uBAAA;ECHF;AACF;;ADMA;EACE,oCAAA;EACA,cAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;EACA,qCAAA;ACHF;;ADMA;EACE,oCAAA;EACA,cAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;EACA,qCAAA;ACHF;;ADMA;EACE,mBAAA;ACHF;;ADMA,oBAAA;AACA;EACE,qBAAA;EACA,kBAAA;EACA,oBAAA;ACHF;;ADMA,2BAAA;AACA;EACE,YAAA;EACA,gBAAA;EACA,qBAAA;EACA,kBAAA;EACA,UAAA;EACA,UAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;ACHF;;ADMA;EACE,cAAA;ACHF;;ADMA,wBAAA;AACA;EACE,oCAAA;EACA,+BAAA;EACA,uCAAA;EACA,cAAA;EACA,kBAAA;EACA,UAAA;ACHF;;ADMA,gCAAA;AACA;EACE,YAAA;EACA,gBAAA;EACA,qBAAA;EACA,kBAAA;EACA,kBAAA;EACA,sBAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,sCAAA;ACHF;;ADMA;EACE,eAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,WAAA;EACA,sBAAA;EACA,mBAAA;EACA,kBAAA;EACA,sCAAA;EACA,WAAA;ACHF;ADIE;EACE,gBAAA;ACFJ;;ADMA;EACE,6BAAA;EACA,sBAAA;EACA,kBAAA;EACA,0BAAA;ACHF","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAMA;EACE,kBAAA;ACLF;;ADQA;EACE,yBAAA;ACLF;;ADQA;EACE,6CAfmB;EAgBnB,mDAhBmB;ACWrB;;ADQA;EACE,6CAjBkB;EAkBlB,mDAlBkB;ACapB;;ADQA;EACE,2CAAA;ACLF;;ADQA;EACE,qCAAA;EACA,oBAAA;KAAA,iBAAA;ACLF;;ADQA;EACE,qCAAA;EACA,oBAAA;KAAA,iBAAA;ACLF;;ADQA;EACE,qBAAA;EACA,kBAAA;ACLF;ADME;EAHF;IAII,uBAAA;ECHF;AACF;;ADMA;EACE,oCAAA;EACA,cAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;EACA,qCAAA;ACHF;;ADMA;EACE,oCAAA;EACA,cAAA;EACA,gBAAA;EACA,kBAAA;EACA,UAAA;EACA,qCAAA;ACHF;;ADMA;EACE,mBAAA;ACHF;;ADMA,oBAAA;AACA;EACE,qBAAA;EACA,kBAAA;EACA,oBAAA;ACHF;;ADMA,2BAAA;AACA;EACE,YAAA;EACA,gBAAA;EACA,qBAAA;EACA,kBAAA;EACA,UAAA;EACA,UAAA;EACA,YAAA;EACA,YAAA;EACA,mBAAA;ACHF;;ADMA;EACE,cAAA;ACHF;;ADMA,wBAAA;AACA;EACE,oCAAA;EACA,+BAAA;EACA,uCAAA;EACA,cAAA;EACA,kBAAA;EACA,UAAA;ACHF;;ADMA,gCAAA;AACA;EACE,YAAA;EACA,gBAAA;EACA,qBAAA;EACA,kBAAA;EACA,kBAAA;EACA,sBAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,YAAA;EACA,sCAAA;ACHF;;ADMA;EACE,6BAAA;EACA,sBAAA;EACA,kBAAA;EACA,0BAAA;ACHF","file":"style.css"}
\ No newline at end of file
diff --git a/src/pages/portfolio/template/template1/styles/style.scss b/src/pages/portfolio/template/template1/styles/style.scss
index 1bc83a2..339f402 100644
--- a/src/pages/portfolio/template/template1/styles/style.scss
+++ b/src/pages/portfolio/template/template1/styles/style.scss
@@ -115,22 +115,6 @@ li.timeline-item::before {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
 
-.toggle-div {
-  position: fixed;
-  width: 60px;
-  height: 60px;
-  bottom: 70px;
-  right: 10px;
-  background-color: #fff;
-  border-radius: 50px;
-  text-align: center;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-  z-index: 10;
-  svg {
-    margin-top: 18px;
-  }
-}
-
 .template1 .btn-resume-1 {
   background-color: transparent;
   border: 1px solid #fff;
diff --git a/src/pages/portfolio/template/template2/Template2.jsx b/src/pages/portfolio/template/template2/Template2.jsx
index 9b5d86f..746f920 100644
--- a/src/pages/portfolio/template/template2/Template2.jsx
+++ b/src/pages/portfolio/template/template2/Template2.jsx
@@ -8,11 +8,11 @@ import Gallery from "./components/Gallery";
 import Footer from "../common/Footer";
 
 import Toggle from "../common/Toggle";
+import BackToTop from "../common/BackToTop";
 
 import { PageLoader } from "../../../../components/common/CustomLoaders";
 
 import "./styles/style.css";
-import BackToTop from "../../../../components/common/BackToTop";
 
 const Portfolio = () => {
   const [isLoading, setLoading] = useState(true);
@@ -33,6 +33,7 @@ const Portfolio = () => {
         });
         setLoading(false);
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.log(error);
       }
     };
@@ -47,6 +48,7 @@ const Portfolio = () => {
       ) : (
         <React.Fragment>
           <Toggle />
+          <BackToTop />
           <div className={`text-${portfolioDetails.font} ${className}`}>
             <Intro portfolioDetails={portfolioDetails} />
             <Gallery portfolioDetails={portfolioDetails} />
@@ -54,7 +56,6 @@ const Portfolio = () => {
           </div>
         </React.Fragment>
       )}
-      <BackToTop/>
     </React.Fragment>
   );
 };
diff --git a/src/pages/portfolio/template/template2/styles/style.css b/src/pages/portfolio/template/template2/styles/style.css
index f387558..6f79683 100644
--- a/src/pages/portfolio/template/template2/styles/style.css
+++ b/src/pages/portfolio/template/template2/styles/style.css
@@ -14,21 +14,31 @@
 .name::before {
   content: "";
   display: block;
-  width: 11%;
+  width: 200px;
   height: 2px;
   left: 0;
   top: 50%;
   position: absolute;
 }
+@media only screen and (max-width: 700px) {
+  .name::before {
+    width: 50px;
+  }
+}
 .name::after {
   content: "";
   display: block;
-  width: 11%;
+  width: 200px;
   height: 2px;
   right: 0;
   top: 50%;
   position: absolute;
 }
+@media only screen and (max-width: 700px) {
+  .name::after {
+    width: 50px;
+  }
+}
 
 .gallery .col-md-3 {
   padding: 0.35rem;
@@ -39,4 +49,4 @@
 
 .bg-dark {
   background-color: #212121 !important;
-} /*# sourceMappingURL=style.css.map */
+}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/src/pages/portfolio/template/template2/styles/style.css.map b/src/pages/portfolio/template/template2/styles/style.css.map
index bddec1c..286974f 100644
--- a/src/pages/portfolio/template/template2/styles/style.css.map
+++ b/src/pages/portfolio/template/template2/styles/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,iBAAA;ACCF;;ADCA;EACE,iBAAA;ACEF;;ADAA;EACE,kBAAA;ACGF;ADDE;EACE,WAAA;EACA,cAAA;EACA,YAAA;EACA,WAAA;EAEA,OAAA;EACA,QAAA;EACA,kBAAA;ACEJ;ADAE;EACE,WAAA;EACA,cAAA;EACA,YAAA;EACA,WAAA;EAEA,QAAA;EACA,QAAA;EACA,kBAAA;ACCJ;;ADIE;EACE,gBAAA;ACDJ;ADEI;EACE,kBAAA;ACAN;;ADKA;EACE,oCAAA;ACFF","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAEA;;EAEE,iBAAA;ACDF;;ADGA;;EAEE,iBAAA;ACAF;;ADGA;EACE,kBAAA;ACAF;ADEE;EACE,WAAA;EACA,cAAA;EACA,YAAA;EACA,WAAA;EAEA,OAAA;EACA,QAAA;EACA,kBAAA;ACDJ;ADGI;EAVF;IAWI,WAAA;ECAJ;AACF;ADGE;EACE,WAAA;EACA,cAAA;EACA,YAAA;EACA,WAAA;EAEA,QAAA;EACA,QAAA;EACA,kBAAA;ACFJ;ADII;EAVF;IAWI,WAAA;ECDJ;AACF;;ADME;EACE,gBAAA;ACHJ;ADII;EACE,kBAAA;ACFN;;ADOA;EACE,oCAAA;ACJF","file":"style.css"}
\ No newline at end of file
diff --git a/src/pages/portfolio/template/template2/styles/style.scss b/src/pages/portfolio/template/template2/styles/style.scss
index 4158041..d852e8d 100644
--- a/src/pages/portfolio/template/template2/styles/style.scss
+++ b/src/pages/portfolio/template/template2/styles/style.scss
@@ -1,31 +1,45 @@
-.ba1::before,.ba1::after{
+$tab-device: 700px;
+
+.ba1::before,
+.ba1::after {
   background: white;
 }
-.ba2::before,.ba2::after{
+.ba2::before,
+.ba2::after {
   background: black;
 }
+
 .name {
   position: relative;
 
   &::before {
     content: "";
     display: block;
-    width: 120px;
+    width: 200px;
     height: 2px;
-    
+
     left: 0;
     top: 50%;
     position: absolute;
+
+    @media only screen and (max-width: $tab-device) {
+      width: 50px;
+    }
   }
+
   &::after {
     content: "";
     display: block;
-    width: 120px;
+    width: 200px;
     height: 2px;
-    
+
     right: 0;
     top: 50%;
     position: absolute;
+
+    @media only screen and (max-width: $tab-device) {
+      width: 50px;
+    }
   }
 }
 
diff --git a/src/pages/portfolio/template/template3/Template3.jsx b/src/pages/portfolio/template/template3/Template3.jsx
index 7d2c58b..20e150f 100644
--- a/src/pages/portfolio/template/template3/Template3.jsx
+++ b/src/pages/portfolio/template/template3/Template3.jsx
@@ -13,7 +13,7 @@ import { PageLoader } from "../../../../components/common/CustomLoaders";
 import Behance from "./components/Behance";
 import Medium from "./components/Medium";
 import Footer from "../common/Footer";
-import BackToTop from "../../../../components/common/BackToTop";
+import BackToTop from "../common/BackToTop";
 
 import Grad1 from "../../../../assets/gradients/gradient-1.svg";
 import Grad2 from "../../../../assets/gradients/gradient-2.svg";
@@ -67,14 +67,21 @@ const Portfolio = () => {
         <PageLoader />
       ) : (
         <React.Fragment>
-          <img src={Grad1} alt="" style={{ position: "absolute" }} />
+          <img
+            src={Grad1}
+            alt=""
+            style={{ position: "absolute", maxWidth: "100%" }}
+          />
           <img
             src={Grad2}
             alt=""
-            style={{ position: "absolute", top: "150vh" }}
+            style={{ position: "absolute", top: "150vh", maxWidth: "100%" }}
           />
           <Toggle />
-          <div className={`text-${portfolioDetails.font} ${className}`}>
+          <BackToTop />
+          <div
+            className={`text-${portfolioDetails.font} ${className} template3`}
+          >
             <Topbar portfolioDetails={portfolioDetails} />
             <Intro portfolioDetails={portfolioDetails} />
             {checkFields("behanceRssLink") && (
@@ -87,7 +94,6 @@ const Portfolio = () => {
           </div>
         </React.Fragment>
       )}
-      <BackToTop/>
     </React.Fragment>
   );
 };
diff --git a/src/pages/portfolio/template/template3/components/Topbar.jsx b/src/pages/portfolio/template/template3/components/Topbar.jsx
index 1b0fb51..d993de6 100644
--- a/src/pages/portfolio/template/template3/components/Topbar.jsx
+++ b/src/pages/portfolio/template/template3/components/Topbar.jsx
@@ -14,7 +14,7 @@ const Topbar = ({ portfolioDetails }) => {
   return (
     <React.Fragment>
       <Row className="pt-4 px-4">
-        <Col md="4">
+        <Col md="4" className="menu">
           {portfolioDetails?.behanceRssLink && (
             <a href="#behance" className={`${textTheme} me-3`}>
               Behance
@@ -26,12 +26,12 @@ const Topbar = ({ portfolioDetails }) => {
             </a>
           )}
         </Col>
-        <Col md="4" className="text-center">
+        <Col md="4" className="text-center user-name">
           <h1 className={`text-uppercase fs-6 fw-lighter ${textTheme}`}>
             {portfolioDetails?.name}
           </h1>
         </Col>
-        <Col md="4" className="text-end">
+        <Col md="4" className="socials">
           {portfolioDetails?.socialLinks?.map((social) => (
             <OverlayTrigger
               placement="top"
diff --git a/src/pages/portfolio/template/template3/styles/style.css b/src/pages/portfolio/template/template3/styles/style.css
index b9b9803..0b6ef51 100644
--- a/src/pages/portfolio/template/template3/styles/style.css
+++ b/src/pages/portfolio/template/template3/styles/style.css
@@ -12,24 +12,15 @@
 .icon--dark-3:hover {
   border-radius: 50ex;
   box-shadow: 0 0 0 1em rgba(255, 255, 255, 0);
-  -webkit-animation: pulse 1s;
-          animation: pulse 1s;
+  animation: pulse 1s;
 }
 
 .icon--light-3:hover {
-  -webkit-animation: pulse-light-icon 1s;
-          animation: pulse-light-icon 1s;
+  animation: pulse-light-icon 1s;
 }
 
 .icon--dark-3:hover {
-  -webkit-animation: pulse-dark-icon 1s;
-          animation: pulse-dark-icon 1s;
-}
-
-@-webkit-keyframes pulse-light-icon {
-  0% {
-    box-shadow: 0 0 0 0 rgb(200, 200, 200);
-  }
+  animation: pulse-dark-icon 1s;
 }
 
 @keyframes pulse-light-icon {
@@ -37,11 +28,6 @@
     box-shadow: 0 0 0 0 rgb(200, 200, 200);
   }
 }
-@-webkit-keyframes pulse-dark-icon {
-  0% {
-    box-shadow: 0 0 0 0 white;
-  }
-}
 @keyframes pulse-dark-icon {
   0% {
     box-shadow: 0 0 0 0 white;
@@ -60,4 +46,18 @@
 }
 .behance-cards .project-card:hover {
   transform: scale(1.05) translateZ(0);
+}
+
+@media only screen and (max-width: 400px) {
+  .template3 .user-name {
+    margin-top: 50px;
+  }
+}
+.template3 .socials {
+  text-align: right;
+}
+@media only screen and (max-width: 400px) {
+  .template3 .socials {
+    text-align: center;
+  }
 }/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/src/pages/portfolio/template/template3/styles/style.css.map b/src/pages/portfolio/template/template3/styles/style.css.map
index be26b6d..4852ae7 100644
--- a/src/pages/portfolio/template/template3/styles/style.css.map
+++ b/src/pages/portfolio/template/template3/styles/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACE,yBAAA;ACCF;;ADIA;;EAEE,WAAA;EACA,iBAAA;EACA,eAAA;ACDF;ADEE;;EACE,mBAAA;EACA,4CAAA;EACA,2BAAA;UAAA,mBAAA;ACCJ;;ADIE;EACE,sCAAA;UAAA,8BAAA;ACDJ;;ADKE;EACE,qCAAA;UAAA,6BAAA;ACFJ;;ADMA;EACE;IACE,sCAAA;ECHF;AACF;;ADAA;EACE;IACE,sCAAA;ECHF;AACF;ADMA;EACE;IACE,yBAAA;ECJF;AACF;ADCA;EACE;IACE,yBAAA;ECJF;AACF;ADWI;EACE,2DAAA;ACTN;ADYE;EACE,eAAA;EACA,yBAAA;EACA,mCAAA;UAAA,2BAAA;EACA,8BAAA;EACA,mCAAA;ACVJ;ADWI;EACE,oCAAA;ACTN","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAEA;EACE,yBAAA;ACDF;;ADMA;;EAEE,WAAA;EACA,iBAAA;EACA,eAAA;ACHF;ADIE;;EACE,mBAAA;EACA,4CAAA;EACA,mBAAA;ACDJ;;ADME;EACE,8BAAA;ACHJ;;ADOE;EACE,6BAAA;ACJJ;;ADQA;EACE;IACE,sCAAA;ECLF;AACF;ADQA;EACE;IACE,yBAAA;ECNF;AACF;ADaI;EACE,2DAAA;ACXN;ADcE;EACE,eAAA;EACA,yBAAA;EACA,mCAAA;UAAA,2BAAA;EACA,8BAAA;EACA,mCAAA;ACZJ;ADaI;EACE,oCAAA;ACXN;;ADkBI;EADF;IAEI,gBAAA;ECdJ;AACF;ADiBE;EACE,iBAAA;ACfJ;ADgBI;EAFF;IAGI,kBAAA;ECbJ;AACF","file":"style.css"}
\ No newline at end of file
diff --git a/src/pages/portfolio/template/template3/styles/style.scss b/src/pages/portfolio/template/template3/styles/style.scss
index 92c9270..2e8ff4a 100644
--- a/src/pages/portfolio/template/template3/styles/style.scss
+++ b/src/pages/portfolio/template/template3/styles/style.scss
@@ -1,3 +1,5 @@
+$mobile-device: 400px;
+
 .bg-dark-3 {
   background-color: #111111;
 }
@@ -58,3 +60,18 @@
     }
   }
 }
+
+.template3 {
+  .user-name {
+    @media only screen and (max-width: $mobile-device) {
+      margin-top: 50px;
+    }
+  }
+
+  .socials {
+    text-align: right;
+    @media only screen and (max-width: $mobile-device) {
+      text-align: center;
+    }
+  }
+}
diff --git a/src/styles/components/_breakpoints.scss b/src/styles/components/_breakpoints.scss
new file mode 100644
index 0000000..e3c0f2d
--- /dev/null
+++ b/src/styles/components/_breakpoints.scss
@@ -0,0 +1 @@
+$mobile-device: 400px;
diff --git a/src/styles/style.css b/src/styles/style.css
index 52b461a..c9388a8 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -493,7 +493,46 @@ input:checked + .toggle .star--6 {
 
 .carousel-caption {
   background-color: rgba(0, 0, 0, 0.3);
-}/*# sourceMappingURL=style.css.map */
-
+}
 
+.toggle-div {
+  position: fixed;
+  width: 60px;
+  height: 60px;
+  bottom: 70px;
+  right: 10px;
+  background-color: #fff;
+  border-radius: 50px;
+  text-align: center;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+}
+.toggle-div svg {
+  margin-top: 18px;
+}
+@media only screen and (max-width: 400px) {
+  .toggle-div {
+    right: 30px;
+  }
+}
 
+.back-to-top-div {
+  position: fixed;
+  width: 60px;
+  height: 60px;
+  bottom: 70px;
+  right: 80px;
+  background-color: #fff;
+  border-radius: 50px;
+  text-align: center;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+}
+.back-to-top-div svg {
+  margin-top: 18px;
+}
+@media only screen and (max-width: 400px) {
+  .back-to-top-div {
+    right: 95px;
+  }
+}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/src/styles/style.css.map b/src/styles/style.css.map
index 0f79e7d..7410c7d 100644
--- a/src/styles/style.css.map
+++ b/src/styles/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["components/_helper.scss","style.css","components/_toggle.scss","components/_dropzone.scss","components/_tooltip.scss","components/_typography.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["components/_helper.scss","style.css","components/_toggle.scss","components/_dropzone.scss","components/_tooltip.scss","components/_typography.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 3b79ad2..351f950 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -2,8 +2,9 @@
 @import "./components/toggle";
 @import "./components/dropzone";
 @import "./components/tooltip";
+@import "./components/breakpoints";
 @import "./components/typography";
-// @import"./components/scrolltotop";
+
 * {
   font-family: "Poppins", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
     "Lucida Sans", Arial, sans-serif;
@@ -27,3 +28,43 @@
 .carousel-caption {
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+$mobile-device: 400px;
+
+.toggle-div {
+  position: fixed;
+  width: 60px;
+  height: 60px;
+  bottom: 70px;
+  right: 10px;
+  background-color: #fff;
+  border-radius: 50px;
+  text-align: center;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+  svg {
+    margin-top: 18px;
+  }
+  @media only screen and (max-width: $mobile-device) {
+    right: 30px;
+  }
+}
+
+.back-to-top-div {
+  position: fixed;
+  width: 60px;
+  height: 60px;
+  bottom: 70px;
+  right: 80px;
+  background-color: #fff;
+  border-radius: 50px;
+  text-align: center;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+  svg {
+    margin-top: 18px;
+  }
+  @media only screen and (max-width: $mobile-device) {
+    right: 95px;
+  }
+}