diff --git a/src/common/components/GoogleButton.jsx b/src/common/components/GoogleButton.jsx
index c1758b7a..95793400 100644
--- a/src/common/components/GoogleButton.jsx
+++ b/src/common/components/GoogleButton.jsx
@@ -54,6 +54,10 @@ const Divider = styled.div`
     padding: 0 12px;
     color: #666;
     font-size: 14px;
+
+    @media screen and (max-width: 768px) {
+      font-size: 12px;
+    }
   }
 `;
 
diff --git a/src/common/components/form/Form.js b/src/common/components/form/Form.js
index 183455a2..6e1cf001 100644
--- a/src/common/components/form/Form.js
+++ b/src/common/components/form/Form.js
@@ -8,6 +8,12 @@ export const Form = styled.form`
   text-align: flex-start;
   box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.25);
   background-color: #ffffff;
+
+  @media screen and (max-width: 768px) {
+    height: 100%;
+    padding: 40px;
+    box-shadow: none;
+  }
 `;
 
 export const FormTitle = styled.h2`
@@ -15,4 +21,8 @@ export const FormTitle = styled.h2`
   font-size: 1.8rem;
   margin-bottom: 6px;
   font-family: 'PoppinsBold';
+
+  @media screen and (max-width: 768px) {
+    font-size: 1.4rem;
+  }
 `;
diff --git a/src/common/components/form/styles.js b/src/common/components/form/styles.js
index db80a893..36341d07 100644
--- a/src/common/components/form/styles.js
+++ b/src/common/components/form/styles.js
@@ -10,6 +10,11 @@ export const InputName = styled.h3`
   font-weight: normal;
   font-size: 1rem;
   margin-bottom: 4px;
+
+  @media screen and (max-width: 768px) {
+    font-size: 0.8rem;
+    margin-bottom: 2px;
+  }
 `;
 export const InputTitle = styled.span`
   margin-right: 2px;
@@ -36,6 +41,11 @@ export const StyledInput = styled.input`
   &::placeholder {
     color: #aaa;
   }
+
+  @media screen and (max-width: 768px) {
+    font-size: 0.8rem;
+    padding: 4px 0;
+  }
 `;
 
 export const StyledTextArea = styled.textarea`
@@ -85,6 +95,11 @@ export const IconContainer = styled.div`
   top: 8px;
   background-color: var(--white);
   cursor: pointer;
+
+  @media screen and (max-width: 768px) {
+    top: 0;
+    height: 80%;
+  }
 `;
 
 export const StyledButton = styled(Button.Primary)`
@@ -107,6 +122,15 @@ export const StyledButton = styled(Button.Primary)`
     justify-content: center;
     gap: 8px;
     min-height: 40px; // Add this to prevent button size changes
+
+    @media screen and (max-width: 768px) {
+      min-height: 30px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    font-size: 0.8rem;
+    margin-top: 10px;
   }
 `;
 
diff --git a/src/pages/account/styles.js b/src/pages/account/styles.js
index ea3d04c5..d1ff1a3f 100644
--- a/src/pages/account/styles.js
+++ b/src/pages/account/styles.js
@@ -15,6 +15,11 @@ export const StyledForm = styled.div`
   margin-top: 50px;
   background-color: #ffffff;
   font-family: 'PoppinsLight';
+
+  @media screen and (max-width: 768px) {
+    width: 100%;
+    margin: 0;
+    height: 100%;
 `;
 
 export const StyledInput = styled.input`
@@ -47,6 +52,10 @@ export const StyledPage = styled.div`
   font-family: 'PoppinsLight';
   padding-top: 25px;
   padding-bottom: 100px;
+
+  @media screen and (max-width: 768px) {
+    padding: 0;
+  }
 `;
 
 export const StyledButton = styled(Button.Primary)`
@@ -70,6 +79,11 @@ export const StyledLink = styled(Link)`
   &:hover {
     text-decoration: underline;
   }
+
+  @media screen and (max-width: 768px) {
+    font-size: 0.7rem;
+    margin-top: 0.5rem;
+  }
 `;
 
 export const StyledLinkCenter = styled(Link)`
@@ -84,4 +98,9 @@ export const StyledLinkCenter = styled(Link)`
   &:hover {
     text-decoration: underline;
   }
+
+  @media screen and (max-width: 768px) {
+    font-size: 0.7rem;
+    margin-top: 0.5rem;
+  }
 `;