diff --git a/.eslintcache b/.eslintcache
new file mode 100644
index 0000000..8dc0242
--- /dev/null
+++ b/.eslintcache
@@ -0,0 +1 @@
+[{"/Users/nicolas/Desktop/loopcommerce/src/components/Signup/Signup.styles.js":"1","/Users/nicolas/Desktop/loopcommerce/src/components/Login/Login.styles.js":"2","/Users/nicolas/Desktop/loopcommerce/src/components/Header/Header.styles.js":"3","/Users/nicolas/Desktop/loopcommerce/src/components/ServiceCard/ServiceCard.styles.js":"4"},{"size":1204,"mtime":1606834976334,"results":"5","hashOfConfig":"6"},{"size":1219,"mtime":1606834957022,"results":"7","hashOfConfig":"6"},{"size":1976,"mtime":1606835127674,"results":"8","hashOfConfig":"6"},{"size":950,"mtime":1606835297105,"results":"9","hashOfConfig":"6"},{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"tmtx83",{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/nicolas/Desktop/loopcommerce/src/components/Signup/Signup.styles.js",[],"/Users/nicolas/Desktop/loopcommerce/src/components/Login/Login.styles.js",[],"/Users/nicolas/Desktop/loopcommerce/src/components/Header/Header.styles.js",[],"/Users/nicolas/Desktop/loopcommerce/src/components/ServiceCard/ServiceCard.styles.js",[]]
\ No newline at end of file
diff --git a/src/App.styles.js b/src/App.styles.js
index 922d75f..ed34fc9 100644
--- a/src/App.styles.js
+++ b/src/App.styles.js
@@ -9,6 +9,10 @@ export const globalStyles = ({ theme }) => css`
     padding: 0;
   }
 
+  html {
+    font-size: 62.5%;
+  }
+
   body {
     background-color: ${theme.colors.scaleGray1};
     margin: 0 auto;
@@ -21,7 +25,8 @@ export const globalStyles = ({ theme }) => css`
     margin: 0 auto;
     display: flex;
     flex-direction: column;
-    a footer,
+
+    footer,
     header {
       flex-shrink: 0;
     }
@@ -30,4 +35,11 @@ export const globalStyles = ({ theme }) => css`
       flex-grow: 1;
     }
   }
+
+  @media screen and (min-width: ${({ theme: { breakpoints } }) =>
+      breakpoints.md}) {
+    html {
+      font-size: 100%;
+    }
+  }
 `;
diff --git a/src/components/Banner/Banner.styles.js b/src/components/Banner/Banner.styles.js
index 72f1431..aabb0f3 100644
--- a/src/components/Banner/Banner.styles.js
+++ b/src/components/Banner/Banner.styles.js
@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 
 export const Container = styled.div`
-  height: 240px;
+  height: 24rem;
   margin: 0 auto;
   max-width: 90%;
 `;
diff --git a/src/components/Cart/Cart.styles.js b/src/components/Cart/Cart.styles.js
index 7b1bdc2..d25906a 100644
--- a/src/components/Cart/Cart.styles.js
+++ b/src/components/Cart/Cart.styles.js
@@ -23,25 +23,27 @@ export const StyledTable = styled.table`
 `;
 
 export const TableCell = styled.td`
-  border-bottom: 1px solid ${({ theme: { colors } }) => colors.scaleGray3};
-  height: 30px;
-  padding: 15px;
+  border-bottom: 0.1rem solid ${({ theme: { colors } }) => colors.scaleGray3};
+  font-size: 1.2rem;
+  height: 3rem;
+  padding: 1.5rem;
   text-align: center;
 `;
 
 export const TableHead = styled(TableCell.withComponent("th"))`
+  font-size: 1.5rem;
   text-transform: uppercase;
 `;
 
 export const TotalPrice = styled.span`
   align-self: flex-end;
   color: ${({ theme: { colors } }) => colors.scaleGray4};
-  font-size: 20px;
-  padding: 30px;
+  font-size: 2rem;
+  padding: 3rem;
 `;
 
 export const Checkout = styled.div`
-  margin: 30px;
+  margin: 3rem;
   position: absolute;
   bottom: 0;
 `;
diff --git a/src/components/ErrorBoundary/ErrorBoundary.styles.js b/src/components/ErrorBoundary/ErrorBoundary.styles.js
index 4c29801..f4fb15a 100644
--- a/src/components/ErrorBoundary/ErrorBoundary.styles.js
+++ b/src/components/ErrorBoundary/ErrorBoundary.styles.js
@@ -13,10 +13,10 @@ export const Message = styled.p`
   background-color: ${({ theme: { colors } }) => colors.scaleRed};
   border-radius: ${({ theme: { border } }) => border.radius.xs};
   color: ${({ theme: { colors } }) => colors.lightRed};
-  padding: 30px;
+  padding: 3rem;
 `;
 
 export const Error = styled.p`
-  padding: 30px;
+  padding: 3rem;
   width: 80%;
 `;
diff --git a/src/components/Footer/Footer.styles.js b/src/components/Footer/Footer.styles.js
index cb806bd..8354eea 100644
--- a/src/components/Footer/Footer.styles.js
+++ b/src/components/Footer/Footer.styles.js
@@ -6,9 +6,9 @@ export const Container = styled.footer`
   flex-direction: column;
   align-items: center;
   flex-wrap: wrap;
-  font-size: 15px;
-  padding-top: 30px;
-  min-height: 300px;
+  font-size: 1.5rem;
+  padding-top: 2em;
+  min-height: 20em;
 `;
 
 export const ColumnsContainer = styled.div`
@@ -32,18 +32,18 @@ export const LinksContainer = styled.div`
 `;
 
 export const Link = styled.div`
-  margin-top: 10px;
+  margin-top: 1rem;
 `;
 
 export const Information = styled.div`
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
-  min-height: 30px;
-  padding: 30px;
+  min-height: 3rem;
+  padding: 3rem;
   width: 90%;
 `;
 
 export const Text = styled.p`
-  margin: 10px;
+  margin: 1rem;
 `;
diff --git a/src/components/Form/Form.styles.js b/src/components/Form/Form.styles.js
index 019869e..6a5d82b 100644
--- a/src/components/Form/Form.styles.js
+++ b/src/components/Form/Form.styles.js
@@ -10,7 +10,7 @@ const StyledButton = styled.button`
   border: none;
   border-radius: ${({ theme: { border } }) => border.radius.xs};
   font-family: ${({ theme: { fontFamily } }) => fontFamily.inter};
-  padding: 10px;
+  padding: 1rem;
 
   &:disabled {
     opacity: 0.5;
@@ -19,30 +19,30 @@ const StyledButton = styled.button`
 
 export const PrimaryButton = styled(StyledButton)`
   background-color: ${({ theme: { colors } }) => colors.scaleSkyBlue1};
-  border: 1px solid ${({ theme: { colors } }) => colors.scaleSkyBlue1};
+  border: 0.1rem solid ${({ theme: { colors } }) => colors.scaleSkyBlue1};
   color: ${({ theme: { colors } }) => colors.scaleWhite};
 `;
 
 export const SecondaryButton = styled(StyledButton)`
-  border: 1px solid ${({ theme: { colors } }) => colors.scaleSkyBlue1};
+  border: 0.1rem solid ${({ theme: { colors } }) => colors.scaleSkyBlue1};
   color: ${({ theme: { colors } }) => colors.scaleSkyBlue1};
 `;
 
 export const SecondaryBlackButton = styled(StyledButton)`
-  border: 1px solid ${({ theme: { colors } }) => colors.lightBlack};
+  border: 0.1rem solid ${({ theme: { colors } }) => colors.lightBlack};
   color: ${({ theme: { colors } }) => colors.lightBlack};
 `;
 
 export const StyledInput = styled.input`
   background-color: ${({ hasError, theme: { colors } }) =>
     hasError ? colors.lightRed : colors.transparentGray};
-  border: 1px solid
+  border: 0.1rem solid
     ${({ hasError, theme: { colors } }) =>
       hasError ? colors.scaleRed : colors.scaleGray2};
   border-radius: ${({ theme: { border } }) => border.radius.xs};
-  height: 40px;
-  padding: 10px 16px;
-  width: 270px;
+  height: 4rem;
+  padding: 1em 1.6em;
+  width: 27rem;
 
   &::placeholder {
     color: ${({ hasError, theme: { colors } }) =>
@@ -52,8 +52,8 @@ export const StyledInput = styled.input`
 
 export const InputError = styled.p`
   color: ${({ theme: { colors } }) => colors.scaleRed};
-  font-size: 12px;
-  margin-top: 5px;
+  font-size: 1.2rem;
+  margin-top: 0.5rem;
 `;
 
 export const Label = styled.label`
@@ -63,9 +63,9 @@ export const Label = styled.label`
 
 export const RequiredText = styled.span`
   color: ${({ theme: { colors } }) => colors.scaleGray4};
-  font-size: 14px;
+  font-size: 1.4rem;
   font-style: italic;
-  margin-left: 5px;
+  margin-left: 0.5rem;
 `;
 
 export const StyledSelect = styled.select`
@@ -74,7 +74,7 @@ export const StyledSelect = styled.select`
   background: url("../../assets/images/arrow-select.svg")
     ${({ hasError, theme: { colors } }) =>
       hasError ? colors.lightRed : colors.transparentGray}
-    no-repeat calc(100% - 10px) !important;
+    no-repeat calc(100% - 1rem) !important;
 
   border: 1px solid
     ${({ hasError, theme: { colors } }) =>
@@ -82,7 +82,7 @@ export const StyledSelect = styled.select`
   border-radius: ${({ theme: { border } }) => border.radius.xs};
   color: ${({ hasError, theme: { colors } }) =>
     hasError ? colors.scaleRed : colors.transparentBlue};
-  height: 40px;
-  padding: 10px 16px;
+  height: 4rem;
+  padding: 1em 1.6em;
   width: 100%;
 `;
diff --git a/src/components/Header/Header.styles.js b/src/components/Header/Header.styles.js
index 40d374c..b905668 100644
--- a/src/components/Header/Header.styles.js
+++ b/src/components/Header/Header.styles.js
@@ -6,8 +6,8 @@ import { Button } from "../Form";
 export const Container = styled.header`
   background-color: ${({ theme: { colors } }) => colors.scaleWhite};
   display: flex;
-  padding: 5px;
-  height: 86px;
+  padding: 0.5rem;
+  height: 8.6rem;
   width: 100%;
 `;
 
@@ -27,38 +27,39 @@ export const ButtonsGroup = styled.div`
 
   & > button,
   & > div {
-    margin-right: 10px;
+    margin-right: 1rem;
   }
 `;
 
 export const UserContainer = styled.div`
   color: ${({ theme: { colors } }) => colors.scaleGreyishBrown0};
+  font-size: 1.6rem;
   position: relative;
 `;
 
 export const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
-  margin-right: 8px;
+  margin-right: 0.8rem;
 `;
 
 export const OptionsDrop = styled.div`
   background-color: ${({ theme: { colors } }) => colors.scaleWhite};
   border-radius: ${({ theme: { border } }) => border.radius.xs};
-  box-shadow: 0 0 6px 0 ${({ theme: { colors } }) => colors.transparentBlack};
+  box-shadow: 0 0 0.6rem 0 ${({ theme: { colors } }) => colors.transparentBlack};
   position: absolute;
-  top: 30px;
-  right: 5px;
-  width: 150px;
+  top: 3rem;
+  right: 0.5rem;
+  width: 15rem;
   z-index: 2;
 
   &:after {
     border-style: solid;
-    border-width: 0 10px 10px 10px;
+    border-width: 0 1rem 1rem 1rem;
     border-color: transparent transparent
       ${({ theme: { colors } }) => colors.scaleWhite} transparent;
     content: "";
     height: 0;
     position: absolute;
-    right: 10px;
+    right: 1rem;
     top: -25%;
     width: 0;
     z-index: 2;
@@ -74,7 +75,7 @@ export const StyledButton = styled(Button)`
   text-align: right;
 
   &:nth-child(odd) {
-    border-bottom: 1px solid ${({ theme: { colors } }) => colors.scaleGray3};
+    border-bottom: 0.1rem solid ${({ theme: { colors } }) => colors.scaleGray3};
     border-radius: 0;
   }
 `;
@@ -82,7 +83,7 @@ export const StyledButton = styled(Button)`
 export const CartContainer = styled.div`
   display: flex;
   justify-content: space-between;
-  font-size: 14px;
+  font-size: 1.4rem;
   font-weight: 600;
-  width: 25px;
+  width: 2.5rem;
 `;
diff --git a/src/components/Home/Home.styles.js b/src/components/Home/Home.styles.js
index 0df69a3..169dcd1 100644
--- a/src/components/Home/Home.styles.js
+++ b/src/components/Home/Home.styles.js
@@ -10,7 +10,7 @@ export const Container = styled.main`
 `;
 
 export const BannerContainer = styled.div`
-  margin: 20px 0px;
+  margin: 2rem 0rem;
   width: 100%;
 `;
 
@@ -27,10 +27,10 @@ export const ServiceContainer = styled.div`
 
 export const NewArrivalsTitle = styled.h2`
   color: ${({ theme: { colors } }) => colors.scaleBlack};
-  font-size: 28px;
+  font-size: 2.8rem;
   font-weight: 200;
-  letter-spacing: 0.2px;
-  padding: 5px;
+  letter-spacing: 0.02em;
+  padding: 0.5rem;
   margin-left: 5.5%;
 `;
 
@@ -40,7 +40,7 @@ export const Products = styled.div`
   justify-content: center;
 
   & > div {
-    margin: 10px;
+    margin: 1rem;
   }
 `;
 
@@ -48,7 +48,7 @@ export const PaginationContainer = styled.div`
   align-self: center;
   display: flex;
   justify-content: center;
-  margin: 40px;
+  margin: 4rem;
   max-width: ${({ theme: { breakpoints } }) => breakpoints.xl};
   width: 90%;
 
@@ -60,19 +60,19 @@ export const PaginationContainer = styled.div`
   }
 
   & > div > button {
-    border-radius: 0px;
-    border-right: 0px;
-    padding: 5px 8px;
+    border-radius: 0rem;
+    border-right: 0rem;
+    padding: 0.5rem 0.8rem;
   }
 
   & > div > button:first-child {
-    border-radius: ${({ theme: { border } }) => border.radius.xs} 0px 0px
+    border-radius: ${({ theme: { border } }) => border.radius.xs} 0rem 0rem
       ${({ theme: { border } }) => border.radius.xs};
   }
 
   & > div > button:last-child {
-    border-right: 1px solid;
-    border-radius: 0px ${({ theme: { border } }) => border.radius.xs}
-      ${({ theme: { border } }) => border.radius.xs} 0px;
+    border-right: 0.1rem solid;
+    border-radius: 0rem ${({ theme: { border } }) => border.radius.xs}
+      ${({ theme: { border } }) => border.radius.xs} 0rem;
   }
 `;
diff --git a/src/components/Loader/Loader.styles.js b/src/components/Loader/Loader.styles.js
index e39d1dc..64cffe6 100644
--- a/src/components/Loader/Loader.styles.js
+++ b/src/components/Loader/Loader.styles.js
@@ -9,11 +9,11 @@ export const Wrapper = styled.div`
 `;
 
 export const StyledLoader = styled.div`
-  border: 16px solid ${({ theme: { colors } }) => colors.scaleGray1};
-  border-top: 16px solid ${({ theme: { colors } }) => colors.scaleSkyBlue1};
+  border: 1.6rem solid ${({ theme: { colors } }) => colors.scaleGray1};
+  border-top: 1.6rem solid ${({ theme: { colors } }) => colors.scaleSkyBlue1};
   border-radius: 50%;
-  width: 120px;
-  height: 120px;
+  width: 12rem;
+  height: 12rem;
   animation: spin 1s linear infinite;
 
   @keyframes spin {
diff --git a/src/components/Login/Login.styles.js b/src/components/Login/Login.styles.js
index a3df948..212b7a1 100644
--- a/src/components/Login/Login.styles.js
+++ b/src/components/Login/Login.styles.js
@@ -6,7 +6,7 @@ export const Container = styled.main`
   justify-content: center;
   flex-direction: column;
   min-height: 100vh;
-  padding-top: 30px;
+  padding-top: 3rem;
 `;
 
 export const FormContainer = styled.div`
@@ -15,23 +15,24 @@ export const FormContainer = styled.div`
   display: flex;
   align-items: flex-start;
   justify-content: center;
+  font-size: 1.6rem;
   height: 100%;
-  max-width: 330px;
-  padding: 0 30px 30px 30px;
+  max-width: 33rem;
+  padding: 0rem 3rem 3rem 3rem;
   width: 90%;
 
   & label {
     display: block;
-    margin-top: 14px;
+    margin-top: 1.4rem;
   }
 
   & input,
   & select {
-    margin: 5px 0px 0px 0px;
+    margin: 0.5rem 0rem 0rem 0rem;
   }
 
   & button {
-    margin-top: 15px;
+    margin-top: 1.5rem;
     text-transform: uppercase;
     width: 100%;
   }
@@ -41,20 +42,21 @@ export const LogoContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 120px;
+  height: 12rem;
   width: 100%;
 `;
 
 export const ServerErrorContainer = styled.div`
-  margin-top: 15px;
+  margin-top: 1.5rem;
 `;
 
 export const AccountMessage = styled.div`
-  margin: 10px 0px;
+  font-size: 1.6rem;
+  margin: 1rem 0rem;
 
   & > a {
     color: ${({ theme: { colors } }) => colors.scaleSkyBlue1};
-    margin-left: 5px;
+    margin-left: 0.5rem;
     text-decoration: none;
   }
 `;
diff --git a/src/components/Product/Product.styles.js b/src/components/Product/Product.styles.js
index 9bee714..760e7fb 100644
--- a/src/components/Product/Product.styles.js
+++ b/src/components/Product/Product.styles.js
@@ -2,14 +2,14 @@ import styled from "@emotion/styled";
 
 export const ProductContainer = styled.div`
   background-color: ${({ theme: { colors } }) => colors.scaleWhite};
-  border-radius: 6px;
+  border-radius: 0.6rem;
   font-family: ${({ theme: { fontFamily } }) => fontFamily.inter};
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  width: 240px;
-  height: 340px;
+  width: 24rem;
+  height: 34rem;
 
   & > button {
     text-transform: uppercase;
@@ -18,7 +18,7 @@ export const ProductContainer = styled.div`
 
 export const ImageContainer = styled.div`
   object-fit: contain;
-  width: 186px;
+  width: 18.6rem;
 
   & > img {
     width: 100%;
@@ -26,19 +26,19 @@ export const ImageContainer = styled.div`
 `;
 
 export const Description = styled.div`
-  border-top: 2px solid ${({ theme: { colors } }) => colors.scaleGray1};
+  border-top: 0.2rem solid ${({ theme: { colors } }) => colors.scaleGray1};
   display: flex;
   align-items: flex-start;
   flex-direction: column;
-  padding: 5px;
+  padding: 0.5rem;
   width: 80%;
 `;
 
 export const Name = styled.p`
   color: ${({ theme: { colors } }) => colors.scaleGreyishBrow1};
-  font-size: 15px;
+  font-size: 1.5rem;
 `;
 
 export const Price = styled.span`
-  font-size: 22px;
+  font-size: 2.2rem;
 `;
diff --git a/src/components/ProductDetail/ProductDetail.styles.js b/src/components/ProductDetail/ProductDetail.styles.js
index f67c34c..0e14992 100644
--- a/src/components/ProductDetail/ProductDetail.styles.js
+++ b/src/components/ProductDetail/ProductDetail.styles.js
@@ -14,8 +14,8 @@ export const ProductContainer = styled.div`
   align-items: center;
   justify-content: space-between;
   max-width: 70%;
-  margin-top: 30px;
-  padding: 30px;
+  margin-top: 3rem;
+  padding: 3rem;
   width: 100%;
 
   @media screen and (max-width: ${({ theme: { breakpoints } }) =>
@@ -26,8 +26,8 @@ export const ProductContainer = styled.div`
 `;
 
 export const ImageContainer = styled.div`
-  height: 370px;
-  width: 370px;
+  height: 37rem;
+  width: 37rem;
 
   & > img {
     height: 100%;
@@ -47,8 +47,8 @@ export const Wrapper = styled.div`
   align-items: flex-start;
   flex-direction: column;
   justify-content: space-between;
-  padding: 0px 30px;
-  height: 370px;
+  padding: 0rem 3rem;
+  height: 37rem;
 `;
 
 export const Info = styled.div`
@@ -63,26 +63,26 @@ export const Info = styled.div`
 `;
 
 export const Name = styled.h3`
-  font-size: 34px;
+  font-size: 3.4rem;
   height: 60px;
   word-wrap: break-word;
 `;
 
 export const PriceContainer = styled.div`
   color: ${({ theme: { colors } }) => colors.scaleGray3};
-  font-size: 18px;
+  font-size: 1.8rem;
 `;
 
 export const Price = styled.div`
   color: ${({ theme: { colors } }) => colors.scaleBlack};
-  font-size: 24px;
+  font-size: 2.4rem;
 `;
 
 export const Description = styled.div`
   color: ${({ theme: { colors } }) => colors.scaleGray3};
-  font-size: 16px;
+  font-size: 1.6rem;
   text-overflow: ellipsis;
-  margin-top: 15px;
+  margin-top: 1.5rem;
 `;
 
 export const QuantityActionsContainer = styled.div`
@@ -90,39 +90,39 @@ export const QuantityActionsContainer = styled.div`
   flex-direction: column;
 
   & > button {
-    border-radius: 0px;
-    border-right: 0px;
-    padding: 5px 8px;
-    margin-top: 5px;
+    border-radius: 0rem;
+    border-right: 0rem;
+    padding: 0.5rem 0.8rem;
+    margin-top: 0.5rem;
   }
 
   & > button:first-child {
-    border-radius: ${({ theme: { border } }) => border.radius.xs} 0px 0px
+    border-radius: ${({ theme: { border } }) => border.radius.xs} 0rem 0rem
       $radius;
   }
 
   & > button:last-child {
-    border-right: 1px solid;
-    border-radius: 0px ${({ theme: { border } }) => border.radius.xs}
-      ${({ theme: { border } }) => border.radius.xs} 0px;
+    border-right: 0.1rem solid;
+    border-radius: 0rem ${({ theme: { border } }) => border.radius.xs}
+      ${({ theme: { border } }) => border.radius.xs} 0rem;
   }
 `;
 
 export const Amount = styled.span`
-  border: 1px solid ${({ theme: { colors } }) => colors.lightBlack};
-  border-radius: 0px;
-  border-right: 0px;
+  border: 0.1rem solid ${({ theme: { colors } }) => colors.lightBlack};
+  border-radius: 0rem;
+  border-right: 0rem;
   color: ${({ theme: { colors } }) => colors.lightBlack};
   font-family: ${({ theme: { fontFamily } }) => fontFamily.inter};
-  font-size: 12px;
-  padding: 5.5px 8px;
-  margin-top: 5px;
+  font-size: 1.2rem;
+  padding: 0.55rem 0.8rem;
+  margin-top: 0.5rem;
 `;
 
 export const ProductActionsContainer = styled.div`
   & > button {
     text-transform: uppercase;
-    margin: 5px;
+    margin: 0.5rem;
   }
 
   @media screen and (max-width: ${({ theme: { breakpoints } }) =>
@@ -136,5 +136,5 @@ export const ProductActionsContainer = styled.div`
 `;
 
 export const IconContainer = styled.span`
-  margin-left: 4px;
+  margin-left: 0.4rem;
 `;
diff --git a/src/components/Search/Search.styles.js b/src/components/Search/Search.styles.js
index 58e39e6..f36f181 100644
--- a/src/components/Search/Search.styles.js
+++ b/src/components/Search/Search.styles.js
@@ -1,9 +1,9 @@
 import styled from "@emotion/styled";
 
 export const SearchContainer = styled.div`
-  height: 36px;
+  height: 3.6rem;
   position: relative;
-  width: 336px;
+  width: 33.6rem;
 
   & > form {
     display: flex;
@@ -12,31 +12,32 @@ export const SearchContainer = styled.div`
   }
 
   & > form > input {
-    border: 1px solid ${({ theme: { colors } }) => colors.scaleGray3};
-    border-radius: ${({ theme: { border } }) => border.radius.xs} 0 0
+    border: 0.1rem solid ${({ theme: { colors } }) => colors.scaleGray3};
+    border-radius: ${({ theme: { border } }) => border.radius.xs} 0rem 0rem
       ${({ theme: { border } }) => border.radius.xs};
-    padding: 10px;
+    padding: 1rem;
     width: 100%;
     height: 100%;
   }
 
   & > form > input:focus {
     outline: none;
-    border: 2px solid ${({ theme: { colors } }) => colors.scaleSkyBlue1};
-    border-radius: ${({ theme: { border } }) => border.radius.xs} 0 0
+    border: 0.2rem solid ${({ theme: { colors } }) => colors.scaleSkyBlue1};
+    border-radius: ${({ theme: { border } }) => border.radius.xs} 0rem 0rem
       ${({ theme: { border } }) => border.radius.xs};
   }
 `;
 
 export const IconContainer = styled.span`
   background-color: ${({ theme: { colors } }) => colors.scaleSkyBlue1};
-  border: 1px solid ${({ theme: { colors } }) => colors.scaleSkyBlue1};
-  border-radius: 0 ${({ theme: { border } }) => border.radius.xs}
-    ${({ theme: { border } }) => border.radius.xs} 0;
+  border: 0.1rem solid ${({ theme: { colors } }) => colors.scaleSkyBlue1};
+  border-radius: 0rem ${({ theme: { border } }) => border.radius.xs}
+    ${({ theme: { border } }) => border.radius.xs} 0rem;
   color: ${({ theme: { colors } }) => colors.scaleWhite};
   font-family: ${({ theme: { fontFamily } }) => fontFamily.inter};
+  font-size: 1.6rem;
   height: 100%;
-  padding: 8px 6px;
+  padding: 0.8rem 0.6rem;
 `;
 
 export const LiveSearchContainer = styled.div`
@@ -44,17 +45,17 @@ export const LiveSearchContainer = styled.div`
   border-radius: ${({ theme: { border } }) => border.radius.xs};
   display: flex;
   flex-direction: column;
-  min-height: 30px;
-  padding: 5px;
+  min-height: 3rem;
+  padding: 0.5rem;
   position: absolute;
-  top: 40px;
+  top: 4rem;
   width: 100%;
 `;
 
 export const ProductContainer = styled.span`
   border-radius: ${({ theme: { border } }) => border.radius.xs};
   color: ${({ theme: { colors } }) => colors.scaleWhite};
-  padding: 5px;
+  padding: 0.5rem;
   width: 100%;
 
   &:hover {
diff --git a/src/components/ServerError/ServerError.styles.js b/src/components/ServerError/ServerError.styles.js
index 632d860..f3f9fca 100644
--- a/src/components/ServerError/ServerError.styles.js
+++ b/src/components/ServerError/ServerError.styles.js
@@ -2,20 +2,20 @@ import styled from "@emotion/styled";
 
 export const Container = styled.div`
   background-color: ${({ theme: { colors } }) => colors.lightRed};
-  border: 1px solid ${({ theme: { colors } }) => colors.scaleRed};
+  border: 0.1rem solid ${({ theme: { colors } }) => colors.scaleRed};
   border-radius: ${({ theme: { border } }) => border.radius.xs};
   color: ${({ theme: { colors } }) => colors.scaleRed};
   display: flex;
   align-items: baseline;
   justify-content: center;
-  min-width: 274px;
-  padding: 10px;
+  min-width: 27.4rem;
+  padding: 1rem;
 `;
 
 export const IconContainer = styled.div`
   background-color: ${({ theme: { colors } }) => colors.scaleRed};
   border-radius: 50%;
   color: ${({ theme: { colors } }) => colors.lightRed};
-  font-size: 12px;
-  padding: 5px 8px;
+  font-size: 1.2rem;
+  padding: 0.5rem 0.8rem;
 `;
diff --git a/src/components/ServiceCard/ServiceCard.styles.js b/src/components/ServiceCard/ServiceCard.styles.js
index 4ca9245..52c2553 100644
--- a/src/components/ServiceCard/ServiceCard.styles.js
+++ b/src/components/ServiceCard/ServiceCard.styles.js
@@ -5,24 +5,25 @@ export const Container = styled.div`
   display: flex;
   align-items: baseline;
   justify-content: center;
-  height: 130px;
-  width: 330px;
+  height: 13rem;
+  width: 33rem;
 `;
 
 export const Title = styled.h3`
   color: ${({ theme: { colors } }) => colors.scaleBlack};
   font-family: ${({ theme: { fontFamily } }) => fontFamily.inter};
-  font-size: 15px;
+  font-size: 1.5rem;
 `;
 
 export const Description = styled.p`
   color: ${({ theme: { colors } }) => colors.scaleGreyishBrown1};
+  font-size: 1.6rem;
 `;
 
 export const IconContainer = styled.div`
   border-radius: 50%;
-  font-size: 14px;
-  padding: 14px;
+  font-size: 1.4rem;
+  padding: 1.4em;
   background-color: ${({ iconBackgroundColor, theme: { colors } }) =>
     colors[iconBackgroundColor]};
   color: ${({ iconColor, theme: { colors } }) => colors[iconColor]};
diff --git a/src/components/Signup/Signup.styles.js b/src/components/Signup/Signup.styles.js
index 9b17a92..9e6ffe0 100644
--- a/src/components/Signup/Signup.styles.js
+++ b/src/components/Signup/Signup.styles.js
@@ -6,7 +6,7 @@ export const Container = styled.main`
   justify-content: center;
   flex-direction: column;
   min-height: 100vh;
-  padding-top: 30px;
+  padding-top: 3rem;
 `;
 
 export const FormContainer = styled.div`
@@ -15,23 +15,24 @@ export const FormContainer = styled.div`
   display: flex;
   align-items: flex-start;
   justify-content: center;
+  font-size: 1.6rem;
   height: 100%;
-  max-width: 330px;
-  padding: 0 30px 30px 30px;
+  max-width: 33rem;
+  padding: 0 3rem 3rem 3rem;
   width: 90%;
 
   label {
     display: block;
-    margin-top: 14px;
+    margin-top: 1.4rem;
   }
 
   input,
   select {
-    margin: 5px 0px 0px 0px;
+    margin: 0.5rem 0rem 0rem 0rem;
   }
 
   button {
-    margin-top: 15px;
+    margin-top: 1.5rem;
     text-transform: uppercase;
     width: 100%;
   }
@@ -41,20 +42,21 @@ export const LogoContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 120px;
+  height: 12rem;
   width: 100%;
 `;
 
 export const ServerErrorContainer = styled.div`
-  margin-top: 15px;
+  margin-top: 1.5rem;
 `;
 
 export const AccountMessage = styled.div`
-  margin: 10px 0px;
+  font-size: 1.6rem;
+  margin: 1rem 0rem;
 
   a {
     color: ${({ theme: { colors } }) => colors.scaleSkyBlue1};
-    margin-left: 5px;
+    margin-left: 0.5rem;
     text-decoration: none;
   }
 `;
diff --git a/src/components/ThankYou/ThankYou.styles.js b/src/components/ThankYou/ThankYou.styles.js
index d4653d6..bb4b325 100644
--- a/src/components/ThankYou/ThankYou.styles.js
+++ b/src/components/ThankYou/ThankYou.styles.js
@@ -6,13 +6,13 @@ export const Container = styled.main`
   align-content: center;
   flex-wrap: wrap;
   height: 100%;
-  margin-top: 30px;
-  padding: 30px;
+  margin-top: 3rem;
+  padding: 3rem;
 `;
 
 export const ImageContainer = styled.div`
-  margin: 30px;
-  min-width: 320px;
+  margin: 3rem;
+  min-width: 32rem;
   max-width: 40%;
 
   img {
@@ -27,17 +27,17 @@ export const TextContainer = styled.div`
 
   h3 {
     color: ${({ theme: { colors } }) => colors.scaleGreyishBrown1};
-    font-size: 34px;
-    letter-spacing: 1.2px;
+    font-size: 3.4rem;
+    letter-spacing: 0.12rem;
   }
 
   p {
     color: ${({ theme: { colors } }) => colors.scaleGreyishBrown0};
-    letter-spacing: 0.4px;
-    margin-top: 20px;
+    letter-spacing: 0.04rem;
+    margin-top: 2rem;
   }
 `;
 
 export const ActionsContainer = styled.div`
-  margin: 10px 0;
+  margin: 1rem 0;
 `;