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..3d5fcf0 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,21 @@
 
 .skill_name {
   text-align: center;
+}
+
+@media screen and (min-width: 796px) {
+  .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%;
+}
 }
\ 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..1dd0a0d
--- /dev/null
+++ b/src/components/NavBar.css
@@ -0,0 +1,52 @@
+nav {
+  font-size: 100%;
+  text-align: center;
+  align-items: center;
+  display: grid;
+  gap: 5px;
+  grid-template-areas: 
+    'nav-button1 nav-button1 nav-button1 nav-button1 nav-button1 nav-button1 nav-button1 nav-button1 nav-button1 . nav-button0'
+    'nav-button2 nav-button2 nav-button2 nav-button2 nav-button2 nav-button2 nav-button2 nav-button2 nav-button2 . nav-button0'
+    'nav-button3 nav-button3 nav-button3 nav-button3 nav-button3 nav-button3 nav-button3 nav-button3 nav-button3 . nav-button0'
+    'nav-button4 nav-button4 nav-button4 nav-button4 nav-button4 nav-button4 nav-button4 nav-button4 nav-button4 . nav-button0'
+    'nav-button5 nav-button5 nav-button5 nav-button5 nav-button5 nav-button5 nav-button5 nav-button5 nav-button5 . nav-button0'
+    ;
+}
+
+.nav-button0 {
+  grid-area: nav-button0;
+  justify-self: center;
+}
+
+.nav-button1 {
+  grid-area: nav-button1;
+  border-radius: 5%;
+}
+
+.nav-button2 {
+  grid-area: nav-button2;
+}
+
+.nav-button3 {
+  grid-area: nav-button3;
+}
+
+.nav-button4 {
+  grid-area: nav-button4;
+}
+
+.nav-button5 {
+  grid-area: nav-button5;
+}
+
+@media screen and (min-width: 736px) {
+  nav {
+    font-size: 36px;
+    text-align: center;
+    display: grid;
+    grid-template-areas: 
+      'nav-button0 . nav-button1 nav-button1 nav-button2 nav-button2 nav-button3 nav-button3 nav-button4 nav-button4 nav-button5 nav-button5 nav-button5'
+      '. . nav-button1 nav-button1 nav-button2 nav-button2 nav-button3 nav-button3 nav-button4 nav-button4 nav-button5 nav-button5 nav-button5'
+      ;
+  }
+}
\ No newline at end of file
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index b2ec108..92f3e9c 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -4,7 +4,8 @@ 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 './NavBar.css';
 import { motion } from 'framer-motion';
 
 const NavBar = () => {
@@ -60,30 +61,30 @@ const NavBar = () => {
   };
 
   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'}}>
+    <motion.nav variants={skillVariantMain} animate="visible" initial="hidden" className="text-cream bg-light-blue" >
+      <motion.img className='nav-button0' 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-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-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'}}>
+      <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-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'}}>
+      <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-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'}}>
+      <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-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'}}>
+      <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, x: -50 }} whileTap={{ scale: 0.8, rotate: -3 }} transition={{ stiffness: 500, type: 'just'}}>
         Contato
       </motion.div>
       </Link>
diff --git a/src/components/SoftSkills.css b/src/components/SoftSkills.css
index f93b7f1..17cc0d5 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,21 @@
 
 .skill_name {
   text-align: center;
+}
+
+@media screen and (min-width: 796px) {
+  .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%;
+  }
 }
\ No newline at end of file
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/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..91994b0 100644
--- a/src/pages/MainPage.css
+++ b/src/pages/MainPage.css
@@ -1,19 +1,86 @@
-/* .text_content_container {
-  width: fit-content
-};
+#profile-pic {
+  grid-area: profile;
+  width: 140px;
+  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;
+}
 
-.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: 3.75rem;
+    height: 100px;
+  }
+  .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>