diff --git a/expat-journal/package-lock.json b/expat-journal/package-lock.json
index b9996a5..9446f48 100644
--- a/expat-journal/package-lock.json
+++ b/expat-journal/package-lock.json
@@ -1202,6 +1202,15 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
     },
+    "@semantic-ui-react/event-stack": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.0.tgz",
+      "integrity": "sha512-WHtU9wutZByZtFZxzj4BVEk+rvWldZpZhRcyv6d84+XLSolm83zLHYJLTACGuSl6Xa/xpgVXquvm9GyMudkJYg==",
+      "requires": {
+        "exenv": "^1.2.2",
+        "prop-types": "^15.6.2"
+      }
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@@ -1985,21 +1994,6 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
-    "attr-accept": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-1.1.3.tgz",
-      "integrity": "sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==",
-      "requires": {
-        "core-js": "^2.5.0"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
-          "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
-        }
-      }
-    },
     "autoprefixer": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.1.tgz",
@@ -5153,6 +5147,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -5505,14 +5504,6 @@
         "schema-utils": "^1.0.0"
       }
     },
-    "file-selector": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.12.tgz",
-      "integrity": "sha512-Kx7RTzxyQipHuiqyZGf+Nz4vY9R1XGxuQl/hLoJwq+J4avk/9wxxgZyHKtbyIPJmbD4A66DWGYfyykWNpcYutQ==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -8018,6 +8009,11 @@
         "object.assign": "^4.1.0"
       }
     },
+    "keyboard-key": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.0.4.tgz",
+      "integrity": "sha512-my04dE6BCwPpwoe4KYKfPxWiwgDYQOHrVmtzn1CfzmoEsGG/ef4oZGaXCzi1+iFhG7CN5JkOuxmei5OABY8/ag=="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -12487,6 +12483,11 @@
         "ts-pnp": "^1.1.2"
       }
     },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
     "portfinder": {
       "version": "1.0.23",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.23.tgz",
@@ -13673,16 +13674,6 @@
         "scheduler": "^0.15.0"
       }
     },
-    "react-dropzone": {
-      "version": "10.1.7",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-10.1.7.tgz",
-      "integrity": "sha512-PT4DHJCQrY/2vVljupveqnlwzVRQGK7U6mhoO0ox6kSJV0EK6W1ZmZpRyHMA1S6/KUOzN+1pASUMSqV/4uAIXg==",
-      "requires": {
-        "attr-accept": "^1.1.3",
-        "file-selector": "^0.1.11",
-        "prop-types": "^15.7.2"
-      }
-    },
     "react-error-overlay": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.1.tgz",
@@ -13698,6 +13689,30 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
       "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw=="
     },
+    "react-popper": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.4.tgz",
+      "integrity": "sha512-9AcQB29V+WrBKk6X7p0eojd1f25/oJajVdMZkywIoAV6Ag7hzE1Mhyeup2Q1QnvFRtGQFQvtqfhlEoDAPfKAVA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "create-react-context": "^0.3.0",
+        "popper.js": "^1.14.4",
+        "prop-types": "^15.6.1",
+        "typed-styles": "^0.0.7",
+        "warning": "^4.0.2"
+      },
+      "dependencies": {
+        "create-react-context": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
+          "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
+          "requires": {
+            "gud": "^1.0.0",
+            "warning": "^4.0.3"
+          }
+        }
+      }
+    },
     "react-router": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz",
@@ -14405,6 +14420,22 @@
         "node-forge": "0.7.5"
       }
     },
+    "semantic-ui-react": {
+      "version": "0.88.0",
+      "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.88.0.tgz",
+      "integrity": "sha512-+rr4bKAkJIK4fYdJVY/IcL2waPUHLShUmveQNqsQoT7EOKDEo+cNKkiQMjBQBv2q5OaVlrQAitkXkw5sejncNQ==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "@semantic-ui-react/event-stack": "^3.1.0",
+        "classnames": "^2.2.6",
+        "keyboard-key": "^1.0.4",
+        "lodash": "^4.17.15",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.6",
+        "react-popper": "^1.3.3",
+        "shallowequal": "^1.1.0"
+      }
+    },
     "semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -14594,6 +14625,11 @@
         }
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -15594,6 +15630,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed-styles": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz",
+      "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -15925,6 +15966,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/expat-journal/src/App.css b/expat-journal/src/App.css
index 1c6e66b..6500926 100644
--- a/expat-journal/src/App.css
+++ b/expat-journal/src/App.css
@@ -265,6 +265,10 @@
   cursor: pointer;
 }
 
+.headertxt{
+  margin-left: 5rem;
+}
+
 .dashboard-header {
   align-items: center;
   margin-top: 10px;
diff --git a/expat-journal/src/components/LogIn.js b/expat-journal/src/components/LogIn.js
index 1f1dd80..ff37b5b 100644
--- a/expat-journal/src/components/LogIn.js
+++ b/expat-journal/src/components/LogIn.js
@@ -4,14 +4,18 @@ import * as Yup from "yup";
 import { axiosWithAuth } from "../utils/axiosWithAuth";
 import { withFormik, Form, Field } from "formik";
 import HamburgerNav from "./HamburgerNav";
+import './Login.css';
 
 const LogIn = ({ values, handleChange, errors, touched, status }) => {
   return (
     <div>
       <HamburgerNav />
-      <div className="signup-wrapper">
-        <h4>Log In</h4>
-        <Form className="sign-up-form">
+      <div>
+        <h1 className='wb'>Welcome Back!</h1>
+        <h4 className='login'>Log In</h4>
+      </div>
+      <div className="login-wrapper">
+        <Form className="log-in-form">
           <div className="form-group">
             {touched.username && errors.username && <p>{errors.username}</p>}
             <label className="label">Username</label>
@@ -34,9 +38,10 @@ const LogIn = ({ values, handleChange, errors, touched, status }) => {
             />
           </div>
 
-          <button type="submit" className="btn">
-            Submit &rarr;
-          </button>
+            <button type="submit" className="btn">
+              Submit &rarr;
+            </button>
+
         </Form>
       </div>
     </div>
diff --git a/expat-journal/src/components/Login.css b/expat-journal/src/components/Login.css
new file mode 100644
index 0000000..03a57ee
--- /dev/null
+++ b/expat-journal/src/components/Login.css
@@ -0,0 +1,26 @@
+.btn{
+    display: flex;
+    justify-content: center;
+}
+
+.wb{
+    color: #389738;
+    display: flex;
+    justify-content: center;
+}
+
+.login{
+    display: flex;
+    justify-content: center;
+}
+
+.text{
+    display: flex;
+    flex-direction: row;
+    padding-left: 2rem;
+}
+
+.login-wrapper{
+    display: flex;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/expat-journal/src/components/DragNDrop.css b/expat-journal/src/components/NewPost.css
similarity index 58%
rename from expat-journal/src/components/DragNDrop.css
rename to expat-journal/src/components/NewPost.css
index 03de3a3..ea03aeb 100644
--- a/expat-journal/src/components/DragNDrop.css
+++ b/expat-journal/src/components/NewPost.css
@@ -1,3 +1,21 @@
+* {
+    font-family: 'Poppins, sans-serif;'
+}
+
+.btncontainer{
+    margin-right: 17rem;
+}
+
+.backbtn{
+    display: flex;
+    margin: 0 auto;
+    justify-content: center;
+    height: 2rem;
+    width: 3rem;
+    border-radius: 20px;
+    background-color: #D6D6D6;
+}
+
 .pageContainer{
     height: 40rem;
 }
@@ -25,6 +43,7 @@
 .imgInput{
     width: 10rem;;
     border-radius: 25px;
+    margin-bottom: 1rem;
 }
 
 .dragNDrop{
@@ -62,14 +81,43 @@
 
 }
 
-.l
 
 .form-group{
     margin-top: 3rem;
 }
 
+.cancelbtn{
+    display: none;
+}
+
 .btnContainer{  
     display: flex;
     justify-content: center;
 }
 
+@media only screen and (max-width: 600px){
+
+    .btncontainer{
+        margin-right: 5rem;
+    }
+
+    .centerContainer{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .forms{
+        padding-top: 0rem;
+    }
+
+    .cancelbtn {
+        display: flex;
+        margin-right: 4rem;
+        text-decoration: none;
+        color: black;
+    }
+
+}
+
diff --git a/expat-journal/src/components/NewPost.js b/expat-journal/src/components/NewPost.js
index 1071390..8110718 100644
--- a/expat-journal/src/components/NewPost.js
+++ b/expat-journal/src/components/NewPost.js
@@ -1,6 +1,8 @@
 import React, { useCallback, useContext, useState } from "react";
 import { UserContext } from "../contexts/UserContext";
-import "./DragNDrop.css";
+import { Link } from 'react-router-dom';
+import "./NewPost.css";
+import { Icon } from 'semantic-ui-react'
 
 export default function ImageUpload() {
   const [newPost, setNewPost] = useState({
@@ -15,6 +17,7 @@ export default function ImageUpload() {
     ]
   });
 
+
   const { addPost } = useContext(UserContext);
 
   const changeHandler = e => {
@@ -24,6 +27,7 @@ export default function ImageUpload() {
 
   const handleMediaChange = e => {
     setNewPost({ ...newPost, media: [{ url: e.target.value }] });
+
   };
 
 //   const captionhandleMediaChange = e => {
@@ -42,7 +46,11 @@ export default function ImageUpload() {
 
   return (
     <div className='pageContainer'>
+
         <div className='pageText'>
+            <div className='btncontainer'>
+               <Link to='/profile'><button className='backbtn'>Back</button></Link>
+            </div>
             <h2>Upload an Image</h2>
     </div>
     <section className='centerContainer'>
@@ -53,7 +61,6 @@ export default function ImageUpload() {
                 src="images/uploadButton.png" 
                 alt="This is an Upload Button"/> 
             <label className='imgLabel'>Image Url
-                Image Url
                 <input
                 className='imgInput'
                 type="text"
@@ -107,10 +114,14 @@ export default function ImageUpload() {
                 </section>
     </section>
       <div className="btnContainer">
-        <button onClick={handleSubmit} type="submit" className="btn">
-          Submit
-        </button>
-      </div>
+        <Link className='cancelbtn' to='/profile'><p className='cancelBtn'>Cancel</p></Link>
+            <button 
+            className="btn"
+            onClick={handleSubmit} 
+            type="cancel" 
+            >
+            Submit</button>
+        </div>
     </div>
   );
 }
diff --git a/expat-journal/src/components/ProfilePage.js b/expat-journal/src/components/ProfilePage.js
index 9c0c8fe..486889c 100644
--- a/expat-journal/src/components/ProfilePage.js
+++ b/expat-journal/src/components/ProfilePage.js
@@ -34,7 +34,9 @@ const ProfilePage = props => {
           </Link>
         </button>
       </div>
-      <h3>My Posts</h3>
+      <div className='headertxt'>
+        <h3>My Posts</h3>
+      </div>
       <div className="post-container">
         {userPosts.map(post => (
           <ProfileCard
diff --git a/expat-journal/src/components/SignUp.css b/expat-journal/src/components/SignUp.css
new file mode 100644
index 0000000..324684d
--- /dev/null
+++ b/expat-journal/src/components/SignUp.css
@@ -0,0 +1,7 @@
+.centerContainer{
+    display: flex;
+    justify-content: center;
+    align-content: center;
+}
+
+
diff --git a/expat-journal/src/components/SignUp.js b/expat-journal/src/components/SignUp.js
index 634881a..f1a17b2 100644
--- a/expat-journal/src/components/SignUp.js
+++ b/expat-journal/src/components/SignUp.js
@@ -3,6 +3,7 @@ import axios from "axios";
 import * as Yup from "yup";
 import { axiosWithAuth } from "../utils/axiosWithAuth";
 import { withFormik, Form, Field } from "formik";
+import './SignUp.css';
 import HamburgerNav from "./HamburgerNav";
 
 const SignUp = ({ values, handleChange, errors, touched, status }) => {
@@ -11,63 +12,65 @@ const SignUp = ({ values, handleChange, errors, touched, status }) => {
       <HamburgerNav />
       <div className="signup-wrapper">
         <h4>Sign Up to Expat's Journal</h4>
-        <Form className="sign-up-form">
-          <div className="form-group">
-            {touched.name && errors.name && <p>{errors.name}</p>}
-            <label className="label">Name</label>
-            <Field
-              className="input"
-              name="name"
-              type="text"
-              placeholder="What's your name?"
-            />
-          </div>
-          <div className="form-group">
-            {touched.email && errors.email && <p>{errors.email}</p>}
-            <label className="label">Email</label>
-            <Field
-              className="input"
-              name="email"
-              type="text"
-              placeholder="What's your email?"
-            />
-          </div>
-          <div className="form-group">
-            {touched.username && errors.username && <p>{errors.username}</p>}
-            <label className="label">Username</label>
-            <Field
-              className="input"
-              name="username"
-              type="text"
-              placeholder="Pick a username!"
-            />
-          </div>
-          <div className="form-group">
-            {touched.password && errors.password && <p>{errors.password}</p>}
-            <label className="label">Password</label>
-            <Field
-              className="input"
-              name="password"
-              type="password"
-              placeholder="Enter a password"
-            />
-          </div>
-          <div className="form-group">
-            {touched.passwordConfirm && errors.passwordConfirm && (
-              <p>{errors.passwordConfirm}</p>
-            )}
-            <label className="label">Password Confirmation</label>
-            <Field
-              className="input"
-              name="passwordConfirm"
-              type="password"
-              placeholder="Confirm your password"
-            />
-          </div>
-          <button type="submit" className="btn">
-            Submit &rarr;
-          </button>
-        </Form>
+        <section className='centerContainer'>
+          <Form className="sign-up-form">
+            <div className="form-group">
+              {touched.name && errors.name && <p>{errors.name}</p>}
+              <label className="label">Name</label>
+              <Field
+                className="input"
+                name="name"
+                type="text"
+                placeholder="What's your name?"
+              />
+            </div>
+            <div className="form-group">
+              {touched.email && errors.email && <p>{errors.email}</p>}
+              <label className="label">Email</label>
+              <Field
+                className="input"
+                name="email"
+                type="text"
+                placeholder="What's your email?"
+              />
+            </div>
+            <div className="form-group">
+              {touched.username && errors.username && <p>{errors.username}</p>}
+              <label className="label">Username</label>
+              <Field
+                className="input"
+                name="username"
+                type="text"
+                placeholder="Pick a username!"
+              />
+            </div>
+            <div className="form-group">
+              {touched.password && errors.password && <p>{errors.password}</p>}
+              <label className="label">Password</label>
+              <Field
+                className="input"
+                name="password"
+                type="password"
+                placeholder="Enter a password"
+              />
+            </div>
+            <div className="form-group">
+              {touched.passwordConfirm && errors.passwordConfirm && (
+                <p>{errors.passwordConfirm}</p>
+              )}
+              <label className="label">Password Confirmation</label>
+              <Field
+                className="input"
+                name="passwordConfirm"
+                type="password"
+                placeholder="Confirm your password"
+              />
+            </div>
+            <div className='btnContainer' >
+              <button type="submit" className="btn">Submit &rarr;</button>
+            </div>
+          </Form>
+        </section>
       </div>
     </div>
   );