diff --git a/.gitignore b/.gitignore
index 4d29575d..4655bfb9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 # dependencies
 /node_modules
 /.pnp
+.env
 .pnp.js
 
 # testing
diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx
index 3a487e1d..690ec74e 100644
--- a/src/components/LoginForm/LoginForm.jsx
+++ b/src/components/LoginForm/LoginForm.jsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import styles from './LoginForm.module.css'
+import './loginform.css'
 import * as authService from '../../services/authService'
 
 const LoginForm = props => {
@@ -30,36 +30,44 @@ const LoginForm = props => {
     <form
       autoComplete="off"
       onSubmit={handleSubmit}
-      className={styles.container}
+      className="signin-form-container"
     >
-      <div className={styles.inputContainer}>
-        <label htmlFor="email" className={styles.label}>Email</label>
+      {/* email field */}
+      <div className="signin-input-container">
+        <label htmlFor="email"></label>
         <input
           type="text"
           autoComplete="off"
           id="email"
           value={formData.email}
           name="email"
+          placeholder='Email'
           onChange={handleChange}
+          className="sign-in-input"
         />
       </div>
-      <div className={styles.inputContainer}>
-        <label htmlFor="password" className={styles.label}>Password</label>
+      {/* sign in field */}
+      <div className="signin-input-container">
+        <label htmlFor="password"></label>
         <input
           type="password"
           autoComplete="off"
           id="password"
           value={formData.pw}
           name="pw"
+          placeholder='Password'
           onChange={handleChange}
+          className="sign-in-input"
         />
       </div>
+      {/* forget password */}
+      <Link to="/"><p className="forgot-password">Forgot Password?</p></Link>
+      {/* sign in button */}
       <div>
-        <button className={styles.button}>Log In</button>
-        <Link to="/">
-          <button>Cancel</button>
-        </Link>
+        <button className="signin-button">Sign In</button>
       </div>
+      {/* link to make an account */}
+      <p className="need-account">Don't have an account? <Link to="/signup">Sign Up</Link></p>
     </form>
   )
 }
diff --git a/src/components/LoginForm/LoginForm.module.css b/src/components/LoginForm/LoginForm.module.css
deleted file mode 100644
index 71c713c0..00000000
--- a/src/components/LoginForm/LoginForm.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.container {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 50px;
-}
-
-.label,
-.button {
-  margin-right: 0.5rem;
-}
-
-.inputContainer {
-  margin-bottom: 1rem;
-}
diff --git a/src/components/LoginForm/loginform.css b/src/components/LoginForm/loginform.css
new file mode 100644
index 00000000..e5236225
--- /dev/null
+++ b/src/components/LoginForm/loginform.css
@@ -0,0 +1,41 @@
+.sign-in-input{
+    background-color: #EEEEEE;
+    border-radius: 10px;
+    border: 5px solid #EEEEEE;
+    color: black;
+    padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+    margin-left: 10%;
+    margin-right: 10%;
+    width: 75%;
+}
+
+.forgot-password {
+    margin-top: 5%;
+    margin-bottom: 5%;
+    margin-left: 10%;
+    font-size: 10px;
+}
+
+.signin-button {
+    background-color: #0050A3;
+    color: white;
+    font-weight: bold;
+    border: 0px;
+    border-radius: 15px;
+    padding-left: 10px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    margin-bottom: 80%;
+    margin-left: 10%;
+    margin-right: 10%;
+    width: 80%;
+}
+
+.need-account {
+    font-size: 10px;
+    text-align: center;
+    padding-bottom: 10%;
+}
\ No newline at end of file
diff --git a/src/components/SignupForm/SignupForm.jsx b/src/components/SignupForm/SignupForm.jsx
index 1b91ad15..334f7cfd 100644
--- a/src/components/SignupForm/SignupForm.jsx
+++ b/src/components/SignupForm/SignupForm.jsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import styles from './SignupForm.module.css'
+import './signupform.css'
 import * as authService from '../../services/authService'
 
 const SignupForm = props => {
@@ -41,10 +41,11 @@ const SignupForm = props => {
     <form
       autoComplete="off"
       onSubmit={handleSubmit}
-      className={styles.container}
+      className="sign-up-form-container"
     >
-      <div className={styles.inputContainer}>
-        <label htmlFor="name" className={styles.label}>Name</label>
+      {/* name field */}
+      <div className="sign-up-input-container">
+        <label htmlFor="name"></label>
         <input
           type="text"
           autoComplete="off"
@@ -52,10 +53,13 @@ const SignupForm = props => {
           value={name}
           name="name"
           onChange={handleChange}
+          placeholder="Name"
+          className="sign-up-input"
         />
       </div>
-      <div className={styles.inputContainer}>
-        <label htmlFor="email" className={styles.label}>Email</label>
+      {/* email field */}
+      <div className="sign-up-input-container">
+        <label htmlFor="email"></label>
         <input
           type="text"
           autoComplete="off"
@@ -63,10 +67,13 @@ const SignupForm = props => {
           value={email}
           name="email"
           onChange={handleChange}
+          placeholder="Email"
+          className="sign-up-input"
         />
       </div>
-      <div className={styles.inputContainer}>
-        <label htmlFor="password" className={styles.label}>Password</label>
+      {/* password field */}
+      <div className="sign-up-input-container">
+        <label htmlFor="password"></label>
         <input
           type="password"
           autoComplete="off"
@@ -74,12 +81,13 @@ const SignupForm = props => {
           value={password}
           name="password"
           onChange={handleChange}
+          placeholder="Password"
+          className="sign-up-input"
         />
       </div>
-      <div className={styles.inputContainer}>
-        <label htmlFor="confirm" className={styles.label}>
-          Confirm Password
-        </label>
+      {/* password confirm field */}
+      <div className="sign-up-input-container">
+        <label htmlFor="confirm"></label>
         <input
           type="password"
           autoComplete="off"
@@ -87,16 +95,17 @@ const SignupForm = props => {
           value={passwordConf}
           name="passwordConf"
           onChange={handleChange}
+          placeholder="Confirm Password"
+          className="sign-up-input"
         />
       </div>
-      <div className={styles.inputContainer}>
-        <button disabled={isFormInvalid()} className={styles.button}>
-          Sign Up
+      <div className="sign-up-button-container">
+        <button disabled={isFormInvalid()} className="sign-up-button">
+          Create account
         </button>
-        <Link to="/">
-          <button>Cancel</button>
-        </Link>
       </div>
+      {/* link to make an account */}
+      <p className="have-account">Already have an account?<Link to="/login">Sign In</Link></p>
     </form>
   )
 }
diff --git a/src/components/SignupForm/SignupForm.module.css b/src/components/SignupForm/SignupForm.module.css
deleted file mode 100644
index 8ec144c6..00000000
--- a/src/components/SignupForm/SignupForm.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.container {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 50px;
-}
-
-.label,
-.button {
-  margin-right: .5rem;
-}
-
-.inputContainer {
-  margin-bottom: 1rem;
-}
diff --git a/src/components/SignupForm/signupform.css b/src/components/SignupForm/signupform.css
new file mode 100644
index 00000000..d44d04ea
--- /dev/null
+++ b/src/components/SignupForm/signupform.css
@@ -0,0 +1,39 @@
+.sign-up-input-container {
+    margin-bottom: 1rem;
+    width:100%;
+}
+
+.sign-up-input {
+    background-color: #EEEEEE;
+    border-radius: 10px;
+    border: 5px solid #EEEEEE;
+    color: black;
+    padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-left: 10%;
+    margin-right: 10%;
+    width: 75%;
+}
+
+.sign-up-button {
+    background-color: #0050A3;
+    color: white;
+    font-weight: bold;
+    border: 0px;
+    border-radius: 15px;
+    padding-left: 10px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    margin-bottom: 50%;
+    margin-left: 10%;
+    margin-right: 10%;
+    margin-top: 50px;
+    width: 80%;
+}
+
+.have-account {
+    font-size: 10px;
+    text-align: center;
+    padding-bottom: 10%;
+}
\ No newline at end of file
diff --git a/src/pages/JobForm/JobForm.jsx b/src/pages/JobForm/JobForm.jsx
index 8d0b4108..88e097b0 100644
--- a/src/pages/JobForm/JobForm.jsx
+++ b/src/pages/JobForm/JobForm.jsx
@@ -18,13 +18,14 @@ const defaultFormFieds = {
 
 
 const JobForm = () => {
-
-
-
+  //use states
   const [form, setForm] = useState(defaultFormFieds)
+  const [isOpen, setIsOpen] = useState(false);
 
-  const { companyName, jobTitle, fullTime, city, state, contact, description, compensation, datePosted, address, companyWebsite } = form
+  //variables
+  const { companyName, jobTitle, fullTime, city, state, contact, description, compensation, address, companyWebsite } = form
 
+  //handle functions
   const handleSubmit = (event) => {
     event.preventDefault()
 
@@ -37,43 +38,57 @@ const JobForm = () => {
     setForm({...form, [name]: value})
   }
 
+  //toggle popup function
+  const togglePopup = () => {
+    setIsOpen(!isOpen);
+  }
+
   return (
-    <>
-      <form onSubmit={handleSubmit} style={{display: "flex", flexDirection: "column", width:"300px", margin: "0 auto"}}>
-        <h1>Job Form</h1>
+    <div className="form-full-div">
+      <h1 className="form-h1">Post a Job</h1>
+      <form onSubmit={handleSubmit} className="job-form" style={{display: "flex", flexDirection: "column", width:"100%", margin: "0 auto"}}>
+        <h3 className="job-form-sub-title">Job Form</h3>
+        <p className="job-form-sub-statement">Fill out the fields below to post a job!</p>
         
-        <label htmlFor="company-name">Company Name:</label>
+        {/* company name */}
+        <label htmlFor="company-name"></label>
         <input 
           value={companyName}
           onChange={handleChange}
-          placeholder="Company name"
+          placeholder="Company Name"
           required
           name="companyName"
           type='text'
+          className="job-input"
         />
 
-        <label htmlFor="position">Job title:</label>
+        {/* position */}
+        <label htmlFor="position"></label>
         <input
           value={jobTitle}
           onChange={handleChange}
-          placeholder="Job title"
+          placeholder="Job Title"
           required
           name="jobTitle"
           type='text'
+          className="job-input"
         >
         </input>
 
-        <label htmlFor="status">Status:</label>
+        {/* status */}
+        <label htmlFor="status"></label>
         <input
           type="text"
           value={fullTime}
           onChange={handleChange}
-          placeholder="Full time"
+          placeholder="Full-time / Part-time"
           name="fullTime"
+          className="job-input"
           >
         </input>
 
-        <label htmlFor="city">City:</label>
+        {/* city */}
+        <label htmlFor="city"></label>
         <input
           type="text"
           value={city}
@@ -81,8 +96,11 @@ const JobForm = () => {
           placeholder="City"
           required
           name="city"
+          className="job-input"
         ></input>
-        <label htmlFor="state">State:</label>
+
+        {/* state */}
+        <label htmlFor="state"></label>
         <input
           type="text"
           value={state}
@@ -90,67 +108,86 @@ const JobForm = () => {
           placeholder="State"
           required
           name="state"
-// 
+          className="job-input"
         ></input>
-        <label htmlFor="contact">Contact:</label>
+
+        {/* contact */}
+        <label htmlFor="contact"></label>
         <input 
-        
         type="text"
           value={contact}
           onChange={handleChange}
-          placeholder="contact"
+          placeholder="Contact"
           required
           name="contact"
+          className="job-input"
         ></input>
-        <label htmlFor="description">Description:</label>
-        <input 
         
-        type="text"
-          value={description}
-          onChange={handleChange}
-          placeholder="Description"
-          name="description"></input>
-        
-        <label htmlFor="company-website">Compensation</label>
+        {/* compensation */}
+        <label htmlFor="compensation"></label>
         <input 
         type="text"
           value={compensation}
           onChange={handleChange}
           required
           placeholder="Compensation"
-          name="compensation">
-        </input>
+          name="compensation"
+          className="job-input"
+          ></input>
 
-        <label htmlFor="date-posted">Date Posted:</label>
-        <input 
-        // 
-        type="text"
-          value={datePosted}
-          onChange={handleChange}
-          placeholder="Date Posted"
-          name="datePosted"></input>
-        
-        <label htmlFor="address">Address:</label>
+        {/* address */}
+        <label htmlFor="address"></label>
         <input 
-
-        type="text"
+          type="text"
           value={address}
           onChange={handleChange}
           placeholder="Address"
-          name="address"></input>
-        <label htmlFor="company-website">Company Website:</label>
+          name="address"
+          className="job-input"
+          ></input>
+
+        {/* company website */}
+        <label htmlFor="company-website"></label>
         <input 
         type="text"
           value={companyWebsite}
           onChange={handleChange}
           placeholder="Company Website"
-          name="companyWebsite">
-        </input>
+          name="companyWebsite"
+          className="job-input"
+          ></input>
+
+        {/* job description box */}
+        <label htmlFor="description"></label>
+        <textarea 
+        wrap="hard"
+        className="job-description-box"
+        type="text"
+          value={description}
+          onChange={handleChange}
+          placeholder="Job Description"
+          name="description"></textarea>
 
-        <input type="submit" value="submit"/>
+        <input type="submit" value="Submit" className="job-form-submit" onClick={togglePopup}/>
       </form>
-    </>
+      {isOpen && <Popup content={<>
+        <b>You submitted a job!</b>
+      </>} handleClose={togglePopup}/>}
+    </div>
   )
 }
 
-export default JobForm
\ No newline at end of file
+export default JobForm
+
+
+//popup component
+const Popup = props => {
+  return (
+    <div className='popup-box'>
+      <div className='box'>
+        <span className='close-icon' onClick={props.handleClose}>X</span>
+        {props.content}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/JobForm/JobForm.styles.css b/src/pages/JobForm/JobForm.styles.css
index e69de29b..6e20a723 100644
--- a/src/pages/JobForm/JobForm.styles.css
+++ b/src/pages/JobForm/JobForm.styles.css
@@ -0,0 +1,121 @@
+.form-full-div {
+    background-color: #FFCC00;
+    color: white;
+}
+
+.form-h1 {
+    padding-top: 20px; 
+    padding-left: 25px;
+    padding-bottom: 20px;
+}
+
+.job-form {
+    border-radius: 15px 15px 0px 0px;
+    background: white;
+    color: #373D3F;
+    padding-left: auto;
+    padding-right: auto;
+}
+
+.job-form-sub-title {
+    padding-top: 10%;
+    padding-left: 10%;
+    padding-bottom: 2%;
+    color: #727D83;
+}
+
+.job-form-sub-statement {
+    padding-bottom: 5%;
+    padding-left: 10%;
+    font-size: 10px;
+}
+
+.job-input {
+    background-color: #EEEEEE;
+    border-radius: 10px;
+    border: 5px solid #EEEEEE;
+    color: black;
+    padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+    margin-left: 10%;
+    margin-right: 10%;
+}
+
+.job-description-box {
+    background-color: #EEEEEE;
+    border-radius: 10px;
+    border: 5px solid #EEEEEE;
+    color: black;
+    padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+    margin-left: 10%;
+    margin-right: 10%;
+    height: 100px;
+    font-family:Arial, Helvetica, sans-serif;
+}
+
+.job-form-submit {
+    background-color: #0050A3;
+    color: white;
+    font-weight: bold;
+    border: 0px;
+    padding-left: 10px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+    margin-left: 10%;
+    margin-right: 10%;
+    border-radius: 15px;
+}
+
+/* Popup style */
+.popup-box {
+    position: fixed;
+    background: #00000050;
+    width: 100%;
+    height: 100vh;
+    top: 0;
+    left: 0;
+  }
+   
+  .box {
+    position: relative;
+    width: 70%;
+    margin: 0 auto;
+    height: auto;
+    max-height: 70vh;
+    margin-top: calc(100vh - 85vh - 20px);
+    background: #fff;
+    border-radius: 4px;
+    padding: 20px;
+    border: 1px solid #999;
+    overflow: auto;
+  }
+   
+  .close-icon {
+    content: 'x';
+    cursor: pointer;
+    position: fixed;
+    right: calc(15% - 30px);
+    top: calc(100vh - 85vh - 33px);
+    background: #ededed;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    line-height: 20px;
+    text-align: center;
+    border: 1px solid #999;
+    font-size: 20px;
+  }
+
+  b {
+      color: black;
+  }
+
+  .close-icon {
+      color: black;
+  }
\ No newline at end of file
diff --git a/src/pages/Login/Login.jsx b/src/pages/Login/Login.jsx
index e2edcd1d..517d4200 100644
--- a/src/pages/Login/Login.jsx
+++ b/src/pages/Login/Login.jsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import LoginForm from '../../components/LoginForm/LoginForm'
-import styles from './Login.module.css'
+import './login.css'
 
 const LoginPage = props => {
   const [message, setMessage] = useState([''])
@@ -10,15 +10,21 @@ const LoginPage = props => {
   }
 
   return (
-    <main className={styles.container}>
-      <h1>Log In</h1>
-      <p>{message}</p>
-      <LoginForm
-        handleSignupOrLogin={props.handleSignupOrLogin}
-        updateMessage={updateMessage}
-      />
+    <main className="sign-in-container">
+      <div className="signin-header-box">
+        <h1 className="signin-header-text">Sign In</h1>
+      </div>
+      <div className="sign-form-area">
+        <h3 className='sign-in-salutation'>Welcome Back</h3>
+        <p className='sign-in-salutation-subtitle'>Hello, sign in to continue!</p>
+        <p>{message}</p>
+        <LoginForm
+          handleSignupOrLogin={props.handleSignupOrLogin}
+          updateMessage={updateMessage}
+        />
+      </div>
     </main>
   )
 }
 
-export default LoginPage
+export default LoginPage
\ No newline at end of file
diff --git a/src/pages/Login/Login.module.css b/src/pages/Login/Login.module.css
deleted file mode 100644
index ceb753fa..00000000
--- a/src/pages/Login/Login.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
diff --git a/src/pages/Login/login.css b/src/pages/Login/login.css
new file mode 100644
index 00000000..fce467e5
--- /dev/null
+++ b/src/pages/Login/login.css
@@ -0,0 +1,31 @@
+.sign-in-container {
+    background-color: #FFCC00;
+    color: white;
+}
+
+.signin-header-text {
+    padding-top: 20px; 
+    padding-left: 25px;
+    padding-bottom: 20px;
+}
+
+.sign-form-area {
+border-radius: 15px 15px 0px 0px;
+background: white;
+color: #373D3F;
+padding-left: auto;
+padding-right: auto;
+}
+
+.sign-in-salutation {
+    padding-top: 10%;
+    padding-left: 10%;
+    padding-bottom: 1%;
+    color: black;
+}
+
+.sign-in-salutation-subtitle{
+    padding-bottom: 5%;
+    padding-left: 10%;
+    font-size: 10px;
+}
\ No newline at end of file
diff --git a/src/pages/Signup/Signup.jsx b/src/pages/Signup/Signup.jsx
index b463f9f5..2c8411ad 100644
--- a/src/pages/Signup/Signup.jsx
+++ b/src/pages/Signup/Signup.jsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import SignupForm from '../../components/SignupForm/SignupForm'
-import styles from './Signup.module.css'
+import './signup.css'
 
 const Signup = props => {
   const [message, setMessage] = useState([''])
@@ -10,10 +10,15 @@ const Signup = props => {
   }
 
   return (
-    <main className={styles.container}>
-      <h1>Sign Up</h1>
+    <main className="create-account-container">
+      <h1 className='create-account-title'>Create an account</h1>
       <p>{message}</p>
-      <SignupForm {...props} updateMessage={updateMessage} />
+      <div className="create-account-area">
+        <h3 className='create-account-salutation'>Welcome</h3>
+        <p className='create-account-salutation-subtitle'>Hello, create an account to continue!</p>
+        <p>{message}</p>
+        <SignupForm {...props} updateMessage={updateMessage} />
+      </div>
     </main>
   )
 }
diff --git a/src/pages/Signup/Signup.module.css b/src/pages/Signup/Signup.module.css
deleted file mode 100644
index ceb753fa..00000000
--- a/src/pages/Signup/Signup.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
diff --git a/src/pages/Signup/signup.css b/src/pages/Signup/signup.css
new file mode 100644
index 00000000..bf2432e4
--- /dev/null
+++ b/src/pages/Signup/signup.css
@@ -0,0 +1,35 @@
+.create-account-container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    background-color: #FFCC00;
+}
+  
+.create-account-title{
+    color: white;
+    padding-top: 20px; 
+    padding-bottom: 20px;
+}
+
+.create-account-area {
+    border-radius: 15px 15px 0px 0px;
+    background: white;
+    color: #373D3F;
+    padding-left: auto;
+    padding-right: auto;
+    width: 100%;
+    height: 100%;
+    }
+    
+.create-account-salutation {
+    padding-top: 10%;
+    padding-left: 10%;
+    padding-bottom: 1%;
+    color: black;
+}
+
+.create-account-salutation-subtitle{
+    padding-bottom: 5%;
+    padding-left: 10%;
+    font-size: 10px;
+}
\ No newline at end of file