diff --git a/package.json b/package.json
index 9537cc1..1e13a45 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "deploy": "gh-pages -d build"
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -b main -d build"
   },
   "eslintConfig": {
     "extends": [
diff --git a/src/components/Carousel.css b/src/components/Carousel.css
new file mode 100644
index 0000000..6b85625
--- /dev/null
+++ b/src/components/Carousel.css
@@ -0,0 +1,47 @@
+.carousel {
+  margin-top: 5%;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  grid-template-areas:
+    'arrowL image image image image image arrowR'
+  ;
+}
+
+.main_content_container3 {
+
+}
+
+.arrowL {
+  grid-area: arrowL;
+  width: fit-content;
+}
+
+.arrowR {
+  grid-area: arrowR;
+  width: fit-content;
+
+}
+
+.arrImg1 {
+  width: 45px;
+}
+
+.arrImg2 {
+  width: 45px;
+}
+
+.image_container {
+  grid-area: image;
+}
+
+.proj_title {
+  text-align: center;
+  font-weight: bold;
+}
+
+@media screen and (min-width: 736px) {
+  .proj_title {
+    font-size: 28px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
index 20cbe55..793945e 100644
--- a/src/components/Carousel.jsx
+++ b/src/components/Carousel.jsx
@@ -5,6 +5,7 @@ import project1 from '../images/recipesApp.gif';
 import project2 from '../images/recipesApp2.gif';
 import project3 from '../images/recipesApp3.gif';
 import { motion } from 'framer-motion';
+import './Carousel.css';
 
 const arrOfProjects = [{project: project1, alt: 'Project1', link: 'https://github.com/RaphaelTaglialegna/Recipes-App/tree/main' },
  {project: project2, alt: 'Project2', link: 'https://github.com/RaphaelTaglialegna/Recipes-App/tree/main' },
@@ -28,15 +29,15 @@ const Carousel = () => {
   }, [current]);
 
   return (
-    <div className='flex justify-center'>
-      <motion.button whileHover={{scale: 1.1}} onClick={ previousProj } className="w-20 bg-opacity-50 bg-cream">
-        <img src={ leftArrow } alt="leftArrow" className="w-20"/>
+    <div className='carousel'>
+      <motion.button whileHover={{scale: 1.1}} onClick={ previousProj } className="arrowL bg-opacity-50 bg-cream">
+        <img src={ leftArrow } alt="leftArrow" className="arrImg1"/>
       </motion.button>
-      <a href={arrOfProjects[current].link} target="_blank" rel='noreferrer' className='images_container w-11/12 justify-evenly p-5 flex bg-opacity-50 bg-cream'>
-        <img src={arrOfProjects[current].project} alt={arrOfProjects[current].alt} className="rounded-md" />
+      <a href={arrOfProjects[current].link} target="_blank" rel='noreferrer' className='images_container justify-evenly p-5 flex bg-opacity-50 bg-cream'>
+        <img src={arrOfProjects[current].project} alt={arrOfProjects[current].alt} className="rounded-md " />
       </a>
-      <motion.button whileHover={{scale: 1.1}} onClick={ nextProj } className="w-20 bg-opacity-50 bg-cream">
-        <img src={ rightArrow } alt="rightArrow" className="w-20"/>
+      <motion.button whileHover={{scale: 1.1}} onClick={ nextProj } className="arrowR bg-opacity-50 bg-cream">
+        <img src={ rightArrow } alt="rightArrow" className="arrImg2 rounded-md"/>
       </motion.button>
     </div>
   )
diff --git a/src/components/HardSkills.css b/src/components/HardSkills.css
index b04705b..5c7aeed 100644
--- a/src/components/HardSkills.css
+++ b/src/components/HardSkills.css
@@ -1,14 +1,26 @@
 .hard_skills_container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1/2fr 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-template-areas: 
-  'hard_skills_title hard_skills_title hard_skills_title hard_skills_title hard_skills_title hard_skills_title'
-  "icon_container0h icon_container1h icon_container2h icon_container3h icon_container4h icon_container5h"
-  "icon_container6h icon_container7h icon_container8h icon_container9h icon_container10h icon_container11h";
+  'hard_skills_title hard_skills_title'
+  "icon_container0h icon_container1h" "icon_container2h icon_container3h" "icon_container4h icon_container5h"
+  "icon_container6h icon_container7h" "icon_container8h icon_container9h" "icon_container10h icon_container11h";
   gap: 5%;
   justify-items: center;
   margin-top: 10%;
-  margin-left: 10%;
+  /* 
+  margin-left: 10px;
   margin-right: 10%;
-  margin-bottom: 0%;
+  margin-bottom: 0%; */
+}
+
+.main_content_container4 {
+  display: flex;
+  justify-content: center;
+  /* flex-wrap: wrap; */
+  flex-direction: column;
+  height: auto;
 }
 
 .hard_skills_title {
@@ -64,4 +76,49 @@
 
 .skill_name {
   text-align: center;
+}
+
+@media screen and (min-width: 706px) {
+  .hard_skills_container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1/2fr 1fr 1fr;
+    grid-template-areas: 
+    'hard_skills_title hard_skills_title hard_skills_title hard_skills_title'
+    "icon_container0h icon_container1h icon_container2h icon_container3h"
+    "icon_container4h icon_container5h icon_container6h icon_container7h"
+    "icon_container8h icon_container9h icon_container10h icon_container11h";
+    gap: 5%;
+    margin-top: 10%;
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-bottom: 0%;
+    justify-items: center;
+  }
+
+  .hard_skills_title {
+    width: 48%;
+  };
+}
+
+@media screen and (min-width: 1124px) {
+  .hard_skills_container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1/2fr 1fr 1fr;
+    grid-template-areas: 
+    'hard_skills_title hard_skills_title hard_skills_title hard_skills_title hard_skills_title hard_skills_title'
+    "icon_container0h icon_container1h icon_container2h icon_container3h icon_container4h icon_container5h"
+    "icon_container6h icon_container7h icon_container8h icon_container9h icon_container10h icon_container11h";
+    gap: 5%;
+    margin-top: 10%;
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-bottom: 0%;
+    justify-items: center;
+  }
+
+  .hard_skills_title {
+    width: 48%;
+  };
 }
\ No newline at end of file
diff --git a/src/components/HardSkills.jsx b/src/components/HardSkills.jsx
index fbd5a15..21b2c2e 100644
--- a/src/components/HardSkills.jsx
+++ b/src/components/HardSkills.jsx
@@ -16,11 +16,9 @@ const HardSkills = ({icons}) => {
 
   const skillVariantMain = {
     hidden: {
-      y: -50,
       opacity: 0,
     },
     visible: {
-      y: 0,
       opacity: 1,
       transition: {
         delay: 0.3,
@@ -30,7 +28,7 @@ const HardSkills = ({icons}) => {
   };
 
   return (
-    <motion.div variants={skillVariantMain} animate="visible" initial="hidden" className='hard_skills_container grid'>
+    <motion.div variants={skillVariantMain} animate="visible" initial="hidden" className='hard_skills_container'>
         <h2 className='bg-dark-blue text-cream hard_skills_title font-bold text-3xl text-center rounded-xl w-full'>Hard Skills</h2>
     {icons.map((icon, index) => {
       return (
diff --git a/src/components/NavBar.css b/src/components/NavBar.css
new file mode 100644
index 0000000..8c22346
--- /dev/null
+++ b/src/components/NavBar.css
@@ -0,0 +1,119 @@
+.navBar {
+  display: flex;
+  justify-content:space-between;
+}
+
+.navLinks {
+  font-size: 20px;
+  text-align: center;
+  align-items: center;
+  display: none;
+  gap: 5px;
+  grid-template-areas: 
+    'nav-button1'
+    'nav-button2'
+    'nav-button3'
+    'nav-button4'
+    'nav-button5'
+    ;
+}
+
+.navLinks.show {
+  display: grid;
+}
+
+.menuIcon {
+  display: block;
+  margin-left: 10px;
+}
+
+.nav-button0 {
+  grid-area: nav-button0;
+  justify-self: center;
+  height: 60px;
+  margin-inline: 10px;
+}
+
+.nav-button0.show {
+  grid-area: nav-button0;
+  justify-self: center;
+  height: 160px;
+}
+
+.nav-button1 {
+  grid-area: nav-button1;
+  border-radius: 5%;
+  width: 120px;
+}
+
+.pageRoute {
+  font-weight: bold;
+  align-self: center;
+  font-size: 20px;
+}
+
+.pageRoute.hide {
+  display: none;
+}
+
+.nav-button2 {
+  grid-area: nav-button2;
+  width: 120px;
+}
+
+.nav-button3 {
+  grid-area: nav-button3;
+  width: 120px;
+}
+
+.nav-button4 {
+  grid-area: nav-button4;
+  width: 120px;
+}
+
+.nav-button5 {
+  grid-area: nav-button5;
+  width: 120px;
+}
+
+.menuIcon {
+  grid-area: menuIcon;
+}
+
+@media screen and (min-width: 870px) {
+  .navLinks {
+    font-size: 20px;
+    text-align: center;
+    align-self: center;
+    grid-area: navLinks;
+    display: grid;
+    gap: 10px;
+    grid-template-areas: 
+      'nav-button1 nav-button1 nav-button2 nav-button2 nav-button3 nav-button3 nav-button4 nav-button4 nav-button5 nav-button5 nav-button5'
+      ;
+  }
+
+  .navBar {
+    display: grid;
+    grid-template-areas: 
+      'nav-button0 navLinks navLinks navLinks';
+  }
+
+  .nav-button0 {
+    justify-self: center;
+    height: 130px;
+  }
+
+  .pageRoute {
+    display: none;
+  }
+
+  .menuIcon {
+    display: none;
+  }
+
+  nav div{
+    height: 40px;
+    padding-top: 5px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index b2ec108..02543c3 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -4,28 +4,36 @@ import HomePageIcon from '../images/wavyLirik.gif';
 import AboutPageIcon from '../images/meLirik.png'; 
 import ProjectsPageIcon from '../images/Hackermans.gif'; 
 import SkillsPageIcon from '../images/tiLirik.png'; 
-import ContactPageIcon from '../images/lirikHullo.png'; 
+import ContactPageIcon from '../images/lirikHullo.png';
+import MenuIcon from '../images/MenuIcon.svg';
+import './NavBar.css';
 import { motion } from 'framer-motion';
 
 const NavBar = () => {
   const location = useLocation();
   const [pageIcon, setPageIcon] = useState();
+  const [pageName, setPageName] = useState('');
   useEffect(() => {
     switch (location.pathname) {
       case '/':
         setPageIcon(HomePageIcon);
+        setPageName('Home')
         break;
       case '/about':
         setPageIcon(AboutPageIcon);
+        setPageName('Sobre Mim')
         break;
       case '/projects':
         setPageIcon(ProjectsPageIcon);
+        setPageName('Projetos')
         break;
       case '/skills':
         setPageIcon(SkillsPageIcon);
+        setPageName('Habilidades')
         break;
       case '/contact':
         setPageIcon(ContactPageIcon);
+        setPageName('Contato')
         break;
             
       default:
@@ -59,34 +67,48 @@ const NavBar = () => {
     }
   };
 
+  function toggleMenu () {
+    const navLinks = document.getElementById('navLinks');
+    const menuEmote = document.getElementById('menuEmote');
+    const pageRoute = document.getElementById('pageRoute');
+    navLinks.classList.toggle('show');
+    menuEmote.classList.toggle('show');
+    pageRoute.classList.toggle('hide');
+  }
+
   return (
-    <motion.nav variants={skillVariantMain} animate="visible" initial="hidden" className="flex justify-around text-4xl items-center text-center w-full mb-20 text-cream bg-light-blue" >
-      <motion.img whileHover={{ scale: 1.2 }} transition={{ type: 'spring', stiffness: 500}} whileTap={{ scale: 0.8, rotate: -3 }} alt="Emote regarding page" src={ pageIcon } aria-label="pageEmote" />
-      <Link variants={skillVariant} animate="visible" initial="hidden" to="/" className='nav-button font-bold' data-testid="Home_b">
-      <motion.div className='bg-dark-blue h-20 rounded-2xl w-56' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
-        Home
-      </motion.div>
-      </Link>
-      <Link variants={skillVariant} animate="visible" initial="hidden" to="/about" className='nav-button font-bold' data-testid="About_b">
-      <motion.div className='bg-dark-blue h-20 rounded-2xl w-56' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
-        Sobre
-      </motion.div>
-      </Link>
-      <Link variants={skillVariant} animate="visible" initial="hidden" to="/projects" className='nav-button font-bold' data-testid="Projects_b">
-      <motion.div className='bg-dark-blue h-20 rounded-2xl w-56' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
-        Projetos
-      </motion.div>
-      </Link>
-      <Link variants={skillVariant} animate="visible" initial="hidden" to="/skills" className='nav-button font-bold' data-testid="Skills_b">
-      <motion.div className='bg-dark-blue h-20 rounded-2xl w-56' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
-        Habilidades
-      </motion.div>
-      </Link>
-      <Link variants={skillVariant} animate="visible" initial="hidden" to="/contact" className='nav-button font-bold' data-testid="Contact_b">
-      <motion.div className='bg-dark-blue h-20 rounded-2xl w-56 ' whileHover={{ scale: 1.1, rotate: 3, x: -50 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'just'}}>
-        Contato
-      </motion.div>
-      </Link>
+    <motion.nav variants={skillVariantMain} animate="visible" initial="hidden" className="navBar text-cream bg-light-blue bg-opacity-75" >
+      <button onClick={() => toggleMenu()} className="menuIcon" id="menuIcon"><img src={MenuIcon} alt="Menu Icon" /></button>
+      <div className="pageRoute text-dark-blue" id="pageRoute">{pageName}</div>
+      <div className='navLinks' id='navLinks'>
+        <Link variants={skillVariant} animate="visible" initial="hidden" to="/" className='nav-button1' data-testid="Home_b">
+        <motion.div className=' rounded-md bg-dark-blue shadow-2xl' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
+          Home
+        </motion.div>
+        </Link>
+        <Link variants={skillVariant} animate="visible" initial="hidden" to="/about" className='nav-button2' data-testid="About_b">
+        <motion.div className=' rounded-md bg-dark-blue shadow-2xl' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
+          Sobre
+        </motion.div>
+        </Link>
+        <Link variants={skillVariant} animate="visible" initial="hidden" to="/projects" className='nav-button3' data-testid="Projects_b">
+        <motion.div className=' rounded-md bg-dark-blue shadow-2xl' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
+          Projetos
+        </motion.div>
+        </Link>
+        <Link variants={skillVariant} animate="visible" initial="hidden" to="/skills" className='nav-button4' data-testid="Skills_b">
+        <motion.div className=' rounded-md bg-dark-blue shadow-2xl' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
+          Habilidades
+        </motion.div>
+        </Link>
+        <Link variants={skillVariant} animate="visible" initial="hidden" to="/contact" className='nav-button5' data-testid="Contact_b">
+        <motion.div className=' rounded-md bg-dark-blue shadow-2xl' whileHover={{ scale: 1.1, rotate: 3 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'spring'}}>
+          Contato
+        </motion.div>
+        </Link>
+
+      </div>
+      <motion.img className='nav-button0' id='menuEmote' whileHover={{ scale: 1.2 }} transition={{ type: 'spring', stiffness: 500}} whileTap={{ scale: 0.8, rotate: -3 }} alt="Emote regarding page" src={ pageIcon } aria-label="pageEmote" />
   </motion.nav>
   )
 }
diff --git a/src/components/SoftSkills.css b/src/components/SoftSkills.css
index f93b7f1..71640d2 100644
--- a/src/components/SoftSkills.css
+++ b/src/components/SoftSkills.css
@@ -1,13 +1,18 @@
 .soft_skills_container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1/2fr 1fr 1fr 1fr;
   grid-template-areas: 
-  'soft_skills_title soft_skills_title soft_skills_title soft_skills_title soft_skills_title soft_skills_title'
-  "icon_container0s icon_container1s icon_container2s icon_container3s icon_container4s icon_container5s";
+  'soft_skills_title soft_skills_title'
+  "icon_container0s icon_container1s"
+  "icon_container2s icon_container3s"
+  "icon_container4s icon_container5s";
   gap: 5%;
-  justify-items: center;
-  margin-top: 5%;
-  margin-left: 10%;
+  margin-top: 340px;
+  /* 
   margin-right: 10%;
-  margin-bottom: 10%;
+  margin-bottom: 10%; */
+  justify-items: center;
 }
 
 .soft_skills_title {
@@ -40,4 +45,46 @@
 
 .skill_name {
   text-align: center;
-}
\ No newline at end of file
+}
+
+@media screen and (min-width: 706px) {
+  .soft_skills_container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1/2fr 1fr 1fr;
+    grid-template-areas: 
+    'soft_skills_title soft_skills_title soft_skills_title soft_skills_title'
+    "icon_container0s icon_container1s icon_container2s icon_container3s"
+    "icon_container4s icon_container5s . .";
+    gap: 5%;
+    justify-items: center;
+    margin-top: 15%;
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-bottom: 10%;
+  }
+  .soft_skills_title {
+    width: 48%;
+  };
+}
+
+@media screen and (min-width: 1124px) {
+  .soft_skills_container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1/2fr 1fr;
+    grid-template-areas: 
+    'soft_skills_title soft_skills_title soft_skills_title soft_skills_title soft_skills_title soft_skills_title'
+    "icon_container0s icon_container1s icon_container2s icon_container3s icon_container4s icon_container5s";
+    gap: 5%;
+    justify-items: center;
+    margin-top: 5%;
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-bottom: 10%;
+  }
+
+  .soft_skills_title {
+    width: 48%;
+  };
+}
diff --git a/src/components/SoftSkils.jsx b/src/components/SoftSkils.jsx
index 825a584..a35d082 100644
--- a/src/components/SoftSkils.jsx
+++ b/src/components/SoftSkils.jsx
@@ -16,11 +16,10 @@ const SoftSkils = ({iconsSoft}) => {
 
   const skillVariantMain = {
     hidden: {
-      y: -50,
       opacity: 0,
     },
     visible: {
-      y: 0,
+      
       opacity: 1,
       transition: {
         delay: 0.4,
@@ -29,7 +28,7 @@ const SoftSkils = ({iconsSoft}) => {
     }
   };
   return (
-    <motion.div variants={skillVariantMain} animate="visible" initial="hidden" className="soft_skills_container grid">
+    <motion.div variants={skillVariantMain} animate="visible" initial="hidden" className="soft_skills_container">
     <h2 className='bg-dark-blue text-cream soft_skills_title text-center text-3xl font-bold  w-full rounded-xl'>Soft Skills</h2>
     {iconsSoft.map((icon, index) => {
       return (
diff --git a/src/images/MenuIcon.svg b/src/images/MenuIcon.svg
new file mode 100644
index 0000000..9f75976
--- /dev/null
+++ b/src/images/MenuIcon.svg
@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 30 30" width="30px" height="30px"><path d="M 3 7 A 1.0001 1.0001 0 1 0 3 9 L 27 9 A 1.0001 1.0001 0 1 0 27 7 L 3 7 z M 3 14 A 1.0001 1.0001 0 1 0 3 16 L 27 16 A 1.0001 1.0001 0 1 0 27 14 L 3 14 z M 3 21 A 1.0001 1.0001 0 1 0 3 23 L 27 23 A 1.0001 1.0001 0 1 0 27 21 L 3 21 z"/></svg>
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index cdffbd9..29139ce 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,3 +5,10 @@
 @tailwind utilities;
 
 @import-normalize;
+
+.main_content_container {
+  min-width: 375px;
+}
+
+@media screen and (min-width: 736px) {
+}
diff --git a/src/pages/About.css b/src/pages/About.css
new file mode 100644
index 0000000..ba5f211
--- /dev/null
+++ b/src/pages/About.css
@@ -0,0 +1,109 @@
+.content1 {
+  display: flex;
+  margin-top: 15%;
+  gap: 5px;
+  justify-content: center;
+}
+.content2 {
+  display: flex;
+  margin-top: 15%;
+  gap: 5px;
+  justify-content: center;
+}
+.content3 {
+  display: flex;
+  margin-top: 15%;
+  gap: 5px;
+  justify-content: center;
+}
+
+.elA {
+  font-size: 11px;
+  width: 200px;
+}
+.elB {
+  height: 200px;
+  object-fit: cover;
+}
+.elC {
+  height: 200px;
+  /* margin-left: 10px; */
+  object-fit: cover;
+}
+.elD {
+  font-size: 11px;
+  height: 200px;
+  width: 200px;
+}
+.elE {
+  font-size: 11px;
+  height: 200px;
+  width: 290px;
+}
+.elF {
+  width: 110px;
+  object-fit: cover;
+}
+
+@media screen and (min-width: 736px) {
+  .content1 {
+    display: flex;
+    margin-top: 15%;
+    gap: 15px;
+    align-content: center;
+    justify-content: center;
+  }
+  .content2 {
+    display: flex;
+    margin-top: 15%;
+    gap: 15px;
+    justify-content: center;
+    align-content: center;
+  }
+  .content3 {
+    display: flex;
+    margin-top: 15%;
+    gap: 15px;
+    align-content: center;
+    justify-content: center;
+  }
+  
+  .elA {
+    font-size: 20px;
+    align-self: center;
+    justify-self: center;
+    width: 300px;
+    width: 45%;
+  }
+  .elB {
+    height: 500px;
+    object-fit: cover;
+    width: 45%;
+  }
+  .elC {
+    height: 700px;
+    /* margin-left: 10px; */
+    /* width: 45%; */
+  }
+  .elD {
+    font-size: 20px;
+    align-self: center;
+    justify-self: center;
+    height: fit-content;
+    
+    width: 350px;
+    width: 45%;
+  }
+  .elE {
+    font-size: 20px;
+    align-self: center;
+    height: fit-content;
+    width: 300px;
+    width: 45%;
+  }
+  .elF {
+    width: 300px;
+    object-fit: cover;
+    width: 45%;
+  }
+}
diff --git a/src/pages/About.js b/src/pages/About.js
index 88aa672..415db4b 100644
--- a/src/pages/About.js
+++ b/src/pages/About.js
@@ -5,6 +5,7 @@ import FunPic from '../images/meDoingPullUps.gif';
 import OldPic from '../images/before.png';
 import RecentPic from '../images/nowCropped.jpg';
 import { motion } from 'framer-motion';
+import './About.css';
 
 const About = () => {
   return (
@@ -12,9 +13,9 @@ const About = () => {
     <div className="bg-deep-purple bg-opacity-50">
 
     <NavBar />
-    <div className='main_content_container w-11/12 text-dark-blue m-24 p-10'>
-      <div className='flex my-5 p-5'>
-        <motion.p whileInView={{scale: 1.2}} transition={{duration: 1}} id='description' data-testid="brief_description1" className='bg-light-blue self-center p-5 mr-56 rounded-md'>
+    <div className='main_content_container2 w-11/12 text-dark-blue p-1'>
+      <div className='content1'>
+        <motion.p whileInView={{scale: 1.05}} transition={{duration: 1}} id='description' data-testid="brief_description1" className='elA bg-light-blue self-center p-1 rounded-md'>
           Born in <em>Sao Paulo City, Brazil,</em> Arthur is a person with a lot of determination
           and is trying to be the change in the world doing what he can with his knowledge
           and physical capabilities. Always updating himself with information from cutting
@@ -22,11 +23,11 @@ const About = () => {
           <strong>developer</strong> after graduting in chemical engineering and not finding a job that would
           make him feel fulfilled.
         </motion.p>
-        <motion.img whileHover={{scale: 1.1, rotate: 4}} whileTap={{scale: 0.9, rotate: -4}} animate={{opacity: 1}} initial={{opacity: 0.1}} src={ FunPic } alt='Me doing pull ups' className=' rounded-md h-picsize' data-testid="first_pic" />
+        <motion.img whileHover={{scale: 1.1, rotate: 4}} whileTap={{scale: 0.9, rotate: -4}} animate={{opacity: 1}} initial={{opacity: 0.1}} src={ FunPic } alt='Me doing pull ups' className='elB rounded-md' data-testid="first_pic" />
       </div>
-      <div className='flex my-5 p-5'>
-        <motion.img whileHover={{scale: 1.1, rotate: -4}} whileTap={{scale: 0.9, rotate: 4}} animate={{opacity: 1}} initial={{opacity: 0.5}} src={ OldPic } alt='before and after of myself' className=' h-picsize rounded-md' data-testid="second_pic" />
-        <motion.p whileInView={{scale: 1.2}} transition={{duration: 1}} id='description' className='bg-light-blue self-center p-5 ml-56 rounded-md' data-testid="brief_description2" >
+      <div className='content2'>
+        <motion.img whileHover={{scale: 1.1, rotate: -4}} whileTap={{scale: 0.9, rotate: 4}} animate={{opacity: 1}} initial={{opacity: 0.5}} src={ OldPic } alt='before and after of myself' className='elC rounded-md' data-testid="second_pic" />
+        <motion.p whileInView={{scale: 1.05}} transition={{duration: 1}} id='description' className='elD bg-light-blue self-center p-1 rounded-md' data-testid="brief_description2" >
           Born in <em>Sao Paulo City, Brazil,</em> Arthur is a person with a lot of determination
           and is trying to be the change in the world doing what he can with his knowledge
           and physical capabilities. Always updating himself with information from cutting
@@ -35,8 +36,8 @@ const About = () => {
           make him feel fulfilled.
         </motion.p>
       </div>
-      <div className='flex my-5 p-5'>
-        <motion.p whileInView={{scale: 1.1}} transition={{duration: 1}} id='description' data-testid="brief_description3" className='bg-light-blue self-center p-5 mr-20 rounded-md'>
+      <div className='content3'>
+        <motion.p whileInView={{scale: 1.05}} transition={{duration: 1}} id='description' data-testid="brief_description3" className='elE bg-light-blue self-center p-1 mr-20 rounded-md'>
           Born in <em>Sao Paulo City, Brazil,</em> Arthur is a person with a lot of determination
           and is trying to be the change in the world doing what he can with his knowledge
           and physical capabilities. Always updating himself with information from cutting
@@ -44,7 +45,7 @@ const About = () => {
           <strong>developer</strong> after graduting in chemical engineering and not finding a job that would
           make him feel fulfilled.
         </motion.p>
-        <motion.img whileHover={{scale: 1.1, rotate: 4}} whileTap={{scale: 0.9, rotate: -4}} animate={{opacity: 1}} initial={{opacity: 0.5}} src={ RecentPic } alt='me smiling in front of a computer' className=' h-picsize2 rounded-md' data-testid="third_pic" />
+        <motion.img whileHover={{scale: 1.1, rotate: 4}} whileTap={{scale: 0.9, rotate: -4}} animate={{opacity: 1}} initial={{opacity: 0.5}} src={ RecentPic } alt='me smiling in front of a computer' className='elF rounded-md' data-testid="third_pic" />
       </div>
     </div>
     <MadeByMeSeal />
diff --git a/src/pages/Contact.css b/src/pages/Contact.css
index 9121f7a..86967b0 100644
--- a/src/pages/Contact.css
+++ b/src/pages/Contact.css
@@ -1,4 +1,64 @@
-.main_content_container {
-  margin-left: 50%;
-  transform: translateX(-50%);
-};
\ No newline at end of file
+.main_content_container5 {
+  margin-top: 15%;
+};
+
+#message {
+  width: 300px;
+};
+
+.name {
+  height: 40px;
+  width: 250px;
+}
+
+#email {
+  width: 300px;
+}
+
+.link_button {
+  width: 120px;
+  font-weight: bold;
+  justify-content: space-evenly;
+}
+
+.link_button img {
+  height: 30px;
+}
+
+.send {
+  height: 40px;
+}
+
+@media screen and (min-width: 736px) {
+  #email {
+    margin-top: -30px;
+    width: 350px;
+    height: 40px;
+    font-size: 16px;
+  }
+  #message {
+    width: 500px;
+    margin-top: -30px;
+    height: 100px;
+    font-size: 16px;
+  };
+  .name {
+    width: 250px;
+    height: 40px;
+    font-size: 50px;
+  }
+  .main_content_container5 {
+    margin-left: 50%;
+    transform: translateX(-50%);
+    margin-top: 5%;
+    height: 600px;
+    width:fit-content;
+  };
+  .link_button img {
+    height: 50px;
+  }
+  .send {
+    height: 50px;
+    font-size: 20px;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
index c008ffe..4fd4675 100644
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -24,20 +24,20 @@ const Contact = () => {
     <div className="bg-deep-purple bg-opacity-50">
 
     <NavBar />
-    <motion.div variants={skillVariantMain} animate="visible" initial="hidden" className='main_content_container grid gap-5 p-3 w-50perc justify-items-center text-2xl bg-light-blue rounded-md'>
+    <motion.div variants={skillVariantMain} animate="visible" initial="hidden" className='main_content_container5 grid gap-5 p-3 justify-items-center bg-light-blue rounded-md'>
       <motion.h2 animate={{opacity: 1}} initial={{opacity: 0}} data-testid="ContactMe" className='text-dark-blue font-bold text-4xl'>Entre em Contato</motion.h2>
-      <motion.input animate={{opacity: 1}} initial={{opacity: 0}} type="text" aria-label='Name' placeholder='Nome Completo' className='bg-dark-blue text-cream rounded-md p-2'/>
-      <motion.input animate={{opacity: 1}} initial={{opacity: 0}} type="email" aria-label="Email" placeholder='E-Mail' id="email" className='bg-dark-blue w-2/4 text-cream rounded-md p-2'/>
-      <motion.textarea animate={{opacity: 1}} initial={{opacity: 0}} aria-label="Message" id="message" placeholder='Mensagem' cols="60" rows="5" className='resize-none bg-dark-blue text-cream rounded-md p-2'></motion.textarea>
-      <motion.button onClick={() => alert("Não implementado ainda. Fale comigo pelas redes sociais abaixo.")} animate={{opacity: 1}} initial={{opacity: 0}} whileHover={{ scale: 1.1, rotate: -3}} transition={{ type: "spring", stiffness: 2000}} whileTap={{ scale: 0.9, rotate: 3}} aria-label='Send_It' className='text-beige-green bg-dark-blue w-40 rounded-md font-bold'>Enviar</motion.button>
+      <motion.input animate={{opacity: 1}} initial={{opacity: 0}} type="text" aria-label='Name' placeholder='Nome Completo' className='bg-dark-blue text-cream h-10 rounded-md p-2 name'/>
+      <motion.input animate={{opacity: 1}} initial={{opacity: 0}} type="email" aria-label="Email" placeholder='E-Mail' id="email" className='bg-dark-blue text-cream rounded-md p-2'/>
+      <motion.textarea animate={{opacity: 1}} initial={{opacity: 0}} cols="45" rows="4" aria-label="Message" id="message" placeholder='Mensagem' className='resize-none bg-dark-blue text-cream rounded-md p-2 messagearea' />
+      <motion.button onClick={() => alert("Não implementado ainda. Fale comigo pelas redes sociais abaixo.")} animate={{opacity: 1}} initial={{opacity: 0}} whileHover={{ scale: 1.1, rotate: -3}} transition={{ type: "spring", stiffness: 2000}} whileTap={{ scale: 0.9, rotate: 3}} aria-label='Send_It' className='text-beige-green bg-dark-blue w-40 rounded-md font-bold send'>Enviar</motion.button>
       <div className="flex gap-5">
-        <motion.a animate={{opacity: 1}} initial={{opacity: 0}} whileHover={{ scale: 1.1, rotate: 1}} transition={{ type: "spring", stiffness: 500}} whileTap={{ scale: 0.9, rotate: -1}} href='https://github.com/ArTrok' target="_blank" rel='noreferrer' aria-label='GitHub_L' className='flex items-center border-2 border-cream shadow-xl p-1 rounded-md'>
+        <motion.a animate={{opacity: 1}} initial={{opacity: 0}} whileHover={{ scale: 1.1, rotate: 1}} transition={{ type: "spring", stiffness: 500}} whileTap={{ scale: 0.9, rotate: -1}} href='https://github.com/ArTrok' target="_blank" rel='noreferrer' aria-label='GitHub_L' className='flex items-center border-2 border-cream shadow-xl p-1 rounded-md link_button'>
         GitHub
-          <img src={ GitHubIcon } alt="GitHub_Icon" className="w-24 ml-5" />
+          <img src={ GitHubIcon } alt="GitHub_Icon" className="ml-3" />
         </motion.a>
-        <motion.a animate={{opacity: 1}} initial={{opacity: 0}} whileHover={{ scale: 1.1, rotate: 1}} transition={{ type: "spring", stiffness: 500}} whileTap={{ scale: 0.9, rotate: -1}} href='https://www.linkedin.com/in/arthur-teixeira-santos/' target="_blank" rel='noreferrer' aria-label='LinkedIn_L' className='flex items-center border-2 border-cream shadow-xl p-1 rounded-md'>
+        <motion.a animate={{opacity: 1}} initial={{opacity: 0}} whileHover={{ scale: 1.1, rotate: 1}} transition={{ type: "spring", stiffness: 500}} whileTap={{ scale: 0.9, rotate: -1}} href='https://www.linkedin.com/in/arthur-teixeira-santos/' target="_blank" rel='noreferrer' aria-label='LinkedIn_L' className='flex items-center border-2 border-cream shadow-xl p-1 rounded-md link_button'>
         LinkedIn
-          <img src={ LinkedInIcon } alt="LinkedIn_Icon" className="w-24 ml-5" />
+          <img src={ LinkedInIcon } alt="LinkedIn_Icon" className="ml-3" />
         </motion.a>
       </div>
     </motion.div>
diff --git a/src/pages/MainPage.css b/src/pages/MainPage.css
index d3dd158..f115ba1 100644
--- a/src/pages/MainPage.css
+++ b/src/pages/MainPage.css
@@ -1,19 +1,89 @@
-/* .text_content_container {
-  width: fit-content
-};
+#profile-pic {
+  grid-area: profile;
+  height: 200px;
+  margin-top: 0.75rem;
+}
 
-.name {
-  width: fit-content;
-};
+#iconLink1 {
+  margin-inline: 10px;
+  grid-area: link1;
+}
+#iconLink2 {
+  margin-inline: 10px;
+  grid-area: link2;
+}
+.iconLink {
+  font-size: 1.25rem/* 20px */;
+  width: 3rem;
+}
 
-.link1 {
-  width: fit-content;
-};
+.linkContainer {
+  width: 300px;
+  height: 50px;
+}
 
-.link2 {
-  width: fit-content;
-};
+#title {
+  grid-area: name;
+  margin-inline: 20px;
+  font-size: 20px;
+}
 
-.picture {
-  width: 200px;
-}; */
\ No newline at end of file
+#description {
+  grid-area: desc;
+  margin-inline: 10px;
+}
+
+.main_content_container {
+  display: grid;
+  gap: 5px;
+  grid-template-areas: 
+    'name name name name name'
+    'name name name name name'
+    'desc profile profile profile profile'
+    'desc profile profile profile profile'
+    'desc profile profile profile profile'
+    'desc profile profile profile profile'
+    'link1 link1 link1 . .'
+    'link2 link2 link2 . .'
+  ;
+}
+
+@media screen and (min-width: 736px) {
+  #title {
+    font-size: 3rem;
+    height: 100px;
+    width: 500px;
+    justify-self: center;
+  }
+  .iconLink {
+    width: 6rem;
+    height: 60px;
+  }
+  #profile-pic {
+    width: fit-content;
+    height: 700px;
+    justify-self: center;
+  }
+  .description {
+    font-size: 28px;
+  }
+  .linkContainer {
+    width: 400px;
+    height: 65px;
+    font-size: 20px;
+    justify-self: center;
+  }
+
+  .main_content_container {
+    display: grid;
+    gap: 5px;
+    width: fit-content;
+    grid-template-areas:
+      '. name name .'
+      '. desc desc .'
+      '. desc desc .'
+      'profile profile profile profile'
+      'link1 link1 link2 link2'
+    ;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/MainPage.js b/src/pages/MainPage.js
index 242afcb..1918ef8 100644
--- a/src/pages/MainPage.js
+++ b/src/pages/MainPage.js
@@ -9,30 +9,31 @@ import './MainPage.css';
 
 export default function MainPage() {
   return (
-    <div className='bg-deep-purple bg-planets w-auto'>
+    <div className='bg-planets'>
+    <div className='bg-deep-purple bg-opacity-50'>
       <div className="bg-deep-purple bg-opacity-50">
       <NavBar />
-        <motion.div animate={{opacity: 1}} initial={{opacity: 0}} transition={{ duration: 1 }} className='main_content_container w-full flex text-xl'>
-          <div className='text_content_container flex items-center justify-evenly flex-col mx-20'>
-            <motion.h1 whileHover={{ scale: 1.1, rotate: 1}} transition={{ type: "spring", stiffness: 500}} whileTap={{ scale: 0.9, rotate: -1}} id="title" className="text-dark-blue shadow-2xl bg-light-blue text-5xl rounded-md my-3 text-center px-48">Arthur Teixeira Santos</motion.h1>
-            <motion.p id='description' data-testid="brief_description" whileHover={{ scale: 1.1, rotate: -1}} transition={{ type: "spring", stiffness: 500}} whileTap={{ scale: 0.9, rotate: 1}} className="description text-dark-blue shadow-2xl bg-light-blue text-3xl rounded-md my-3 text-left px-48">
+        <motion.div animate={{opacity: 1}} initial={{opacity: 0}} transition={{ duration: 1 }} className='main_content_container grid'>
+
+            <motion.h1 whileHover={{ scale: 1.1, rotate: 1}} transition={{ type: "spring", stiffness: 500}} whileTap={{ scale: 0.9, rotate: -1}} id="title" className="text-dark-blue shadow-2xl bg-light-blue rounded-md my-3 text-center p-4">Arthur Teixeira Santos</motion.h1>
+            <motion.p id='description' data-testid="brief_description" whileHover={{ scale: 1.1, rotate: -1}} transition={{ type: "spring", stiffness: 500}} whileTap={{ scale: 0.9, rotate: 1}} className="description text-dark-blue shadow-2xl bg-light-blue rounded-md my-3 p-3">
               Olá, meu nome é Arthur e estou buscando ser reconhecido como desenvolvedor
               através de minhas ações. Na jornada para a realização de um sonho.
             </motion.p>
-            <motion.a whileHover={{ scale: 1.1, rotate: 1}} transition={{ type: "spring", stiffness: 500}} whileTap={{ scale: 0.9, rotate: -1}} href='https://github.com/ArTrok' target="_blank" rel='noreferrer' aria-label='GitHub_L' className='justify-around shadow-2xl w-40perc text-2xl h-24 flex items-center rounded-md my-3 text-dark-blue bg-light-blue p-3'>
+            <motion.a id='iconLink1' whileHover={{ scale: 1.1, rotate: 1}} transition={{ type: "spring", stiffness: 500}} whileTap={{ scale: 0.9, rotate: -1}} href='https://github.com/ArTrok' target="_blank" rel='noreferrer' aria-label='GitHub_L' className='linkContainer justify-around shadow-2xl flex items-center rounded-md my-3 text-dark-blue bg-light-blue p-3'>
               <p>Conheça o meu GitHub</p>
-              <img src={ GitHubIcon } alt="GitHub_Icon" className="w-24" />
+              <img src={ GitHubIcon } alt="GitHub_Icon" className="iconLink" />
             </motion.a>
-            <motion.a whileHover={{ scale: 1.1, rotate: -1}} transition={{ type: "spring", stiffness: 500}} whileTap={{ scale: 0.9, rotate: 1}} href='https://www.linkedin.com/in/arthur-teixeira-santos/' target="_blank" rel='noreferrer' aria-label='LinkedIn_L' className=' h-24 shadow-2xl justify-around w-40perc text-2xl flex items-center rounded-md my-3 text-dark-blue bg-light-blue p-3'>
+            <motion.a id='iconLink2' whileHover={{ scale: 1.1, rotate: -1}} transition={{ type: "spring", stiffness: 500}} whileTap={{ scale: 0.9, rotate: 1}} href='https://www.linkedin.com/in/arthur-teixeira-santos/' target="_blank" rel='noreferrer' aria-label='LinkedIn_L' className='linkContainer shadow-2xl justify-around flex items-center rounded-md my-3 text-dark-blue bg-light-blue p-3'>
             <p>Conheça o meu LinkedIn</p>
-              <img src={ LinkedInIcon } alt="LinkedIn_Icon" className="w-24" />
+              <img src={ LinkedInIcon } alt="LinkedIn_Icon" className="iconLink" />
             </motion.a>
+            <motion.img whileHover={{ scale: 1.1, rotate: 5 }} transition={{ type: "just", stiffness: 500}} whileTap={{ scale: 0.8, rotate: -5
+            }} src={ ProfilePicture } alt="Arthur T. Santos's face" id='profile-pic' className="rounded-md mr-5" data-testid="profile_pic" />
+        </motion.div>
           </div>
-          <motion.img whileHover={{ scale: 1.1, rotate: 5, x: -100 }} transition={{ type: "just", stiffness: 500}} whileTap={{ scale: 0.8, rotate: -5
-          }} src={ ProfilePicture } alt="Arthur T. Santos's face" id='profile-pic' className="h-picsize rounded-md mr-5" data-testid="profile_pic" />
-          </motion.div>
         <MadeByMeSeal />
       </div>
-    </div>
+      </div>
   )
 }
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
index 48392ca..62b37df 100644
--- a/src/pages/Projects.jsx
+++ b/src/pages/Projects.jsx
@@ -9,9 +9,10 @@ const Projects = () => {
     <div className="bg-planets">
     <div className="bg-deep-purple bg-opacity-50">
       <NavBar />
-      <motion.div animate={{opacity: 1}} initial={{opacity: 0}} transition={{ duration: 0.4 }} className='main_content_container'>
+      <motion.div animate={{opacity: 1}} initial={{opacity: 0}} transition={{ duration: 0.4 }} className='main_content_container3'>
       <Carousel />
       </motion.div>
+      <h1 className='proj_title text-cream bg-deep-purple'>Recipes App</h1>
       <MadeByMeSeal />
     </div>
     </div>
diff --git a/src/pages/Skills.jsx b/src/pages/Skills.jsx
index a22f875..7a7893f 100644
--- a/src/pages/Skills.jsx
+++ b/src/pages/Skills.jsx
@@ -38,7 +38,7 @@ const Skills = () => {
     <div className="bg-deep-purple bg-opacity-50">
 
     <NavBar />
-    <div className='main_content_container w-11/12'>
+    <div className='main_content_container4'>
       <HardSkills icons={ icons } />
       <SoftSkils iconsSoft={ iconsSoft }/>
     </div>