diff --git a/src/App.tsx b/src/App.tsx
index 0e325226..79c846f7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,8 +6,8 @@ import { Helmet } from 'react-helmet';
 import 'antd/dist/antd.css';
 import './App.less';
 import Home from './containers/home/Home';
-import Signup from './containers/signup/Signup';
 import Login from './containers/login/Login';
+import Signup from './containers/signup/Signup';
 import BlockTemplate from './containers/template-1-col-block/Template';
 import GridTemplate from './containers/template-24-col-grid/Template';
 
@@ -34,6 +34,8 @@ const App: React.FC = () => {
             <div className="content-inner-container">
               <Switch>
                 <Route path="/" exact component={Home} />
+                <Route path="/login" exact component={Login} />
+                <Route path="/signup" exact component={Signup} />
                 <Route path="/block-template" exact component={BlockTemplate} />
                 <Route path="/grid-template" exact component={GridTemplate} />
                 <Route path="/login" exact component={Login} />
diff --git a/src/SFTTicon.png b/src/SFTTicon.png
new file mode 100644
index 00000000..e5deb5cc
Binary files /dev/null and b/src/SFTTicon.png differ
diff --git a/src/containers/login/Login.tsx b/src/containers/login/Login.tsx
index c25701e4..3bfc427b 100644
--- a/src/containers/login/Login.tsx
+++ b/src/containers/login/Login.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
 import './login.less';
-import { Button, Form, Input, Typography } from 'antd';
+import { Button, Col, Form, Input, Row, Typography } from 'antd';
 import { login } from '../../auth/authAPI';
 import { Link } from 'react-router-dom';
-const { Title, Paragraph } = Typography;
+import { Helmet } from 'react-helmet';
 
 const Login: React.FC = () => {
   const onFinish = (values: any) => {
@@ -17,47 +16,84 @@ const Login: React.FC = () => {
         <title>Login</title>
         <meta name="description" content="Description goes here." />
       </Helmet>
-      <div className="content-container">
-        <Title>Login</Title>
-        <Form name="basic" onFinish={onFinish}>
-          <Form.Item
-            label="Username"
-            name="username"
-            rules={[{ required: true, message: 'Please input your username!' }]}
-          >
-            <Input />
-          </Form.Item>
+      <div className="body-content-container">
+        <Row>
+          <Col span={10} className="input-container">
+            <h1>Log In</h1>
+            <hr />
+            <Form
+              name="basic"
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+            >
+              <Row id="inputs">
+                <Col className="leftInput">
+                  <Form.Item
+                    name="username"
+                    rules={[
+                      {
+                        required: true,
+                        message: 'Please input your username!',
+                      },
+                    ]}
+                  >
+                    <Input placeholder="Username" />
+                  </Form.Item>
+                </Col>
+                <Col>
+                  <Form.Item
+                    name="password"
+                    rules={[
+                      {
+                        required: true,
+                        message: 'Please input your password!',
+                      },
+                    ]}
+                  >
+                    <Input.Password placeholder="Password" />
+                  </Form.Item>
+                </Col>
+              </Row>
+
+              <Form.Item id={'loginButton'} style={{ marginBottom: '10px' }}>
+                <Button
+                  type="primary"
+                  htmlType="submit"
+                  size={'large'}
+                  style={{ backgroundColor: '#9AC356', borderColor: '#9AC356' }}
+                >
+                  Log In
+                </Button>
+              </Form.Item>
+            </Form>
 
-          <Form.Item
-            label="Password"
-            name="password"
-            rules={[{ required: true, message: 'Please input your password!' }]}
-          >
-            <Input.Password />
-          </Form.Item>
+            <p id="forgotPassword">
+              <Link to="/" component={Typography.Link} className="Link">
+                Forgot Password?
+              </Link>
+            </p>
 
-          <Paragraph>
-            Need an account? Sign up{' '}
-            <Link to="/signup" component={Typography.Link}>
-              here
-            </Link>
-            !
-          </Paragraph>
+            <p>New to speak for the trees?</p>
+            <p>
+              Sign up{' '}
+              <Link className="Link" to="/signup" component={Typography.Link}>
+                here!
+              </Link>
+            </p>
+          </Col>
 
-          <Paragraph>
-            Forgot your password? Click{' '}
-            <Link to="/" component={Typography.Link}>
-              here
-            </Link>{' '}
-            to reset it.
-          </Paragraph>
+          <Col span={2}></Col>
 
-          <Form.Item>
-            <Button type="primary" htmlType="submit">
-              Submit
-            </Button>
-          </Form.Item>
-        </Form>
+          <Col span={12} className="info-container">
+            <h1>Welcome Back!</h1>
+            <p>
+              Dreamcatcher kogi taiyaki keytar. Swag typewriter craft beer
+              cronut pok pok gentrify flannel salvia deep v pork belly
+              pitchfork. Swag fashion axe fam. Occupy biodiesel jean shorts
+              affogato PBR&B freegan bushwick vegan four loko pickled.
+            </p>
+          </Col>
+        </Row>
       </div>
     </>
   );
diff --git a/src/containers/login/login.less b/src/containers/login/login.less
index e69de29b..1e437bf3 100644
--- a/src/containers/login/login.less
+++ b/src/containers/login/login.less
@@ -0,0 +1,78 @@
+.body-content-container {
+  font-family: Circular, 'Circular', sans-serif;
+  position: fixed;
+  padding: 8%;
+  height: 100%;
+  width: 100%;
+  background: white;
+  overflow: auto;
+}
+
+.Link {
+  color: #3a681a;
+}
+
+hr {
+  display: block;
+  width: 100%;
+  margin-top: 5%;
+  border-top: 1.58px solid white;
+}
+
+.input-container {
+  height: 481px;
+  padding: 30px 20px 20px 50px;
+  background: #e5e5e5;
+  box-shadow: 1.58105px 3.16211px 6.32421px rgba(0, 0, 0, 0.09);
+  border-radius: 6.32421px;
+  min-width: 500px;
+}
+
+.input-container h1 {
+  font-size: 30px;
+  line-height: 36px;
+}
+
+.input-container p {
+  font-family: Roboto;
+  text-transform: uppercase;
+  margin-bottom: 0px;
+  font-size: 10px;
+  color: #afaeae;
+}
+
+#inputs {
+  margin-top: 80px;
+}
+
+.leftInput {
+  margin-right: 25px;
+  margin-bottom: 35px;
+}
+
+.info-container {
+  padding: 70px 70px 20px;
+  height: 481px;
+  background: url('../../SFTTicon.png') no-repeat bottom right #d4edaa;
+  box-shadow: 1.58105px 3.16211px 6.32421px rgba(0, 0, 0, 0.09);
+  border-radius: 6.32421px;
+  min-width: 500px;
+}
+
+.info-container h1 {
+  font-weight: bold;
+  font-size: 44px;
+  line-height: 76px;
+  margin-bottom: 5px;
+}
+
+.info-container p {
+  font-size: 13px;
+  line-height: 28px;
+  color: #000000;
+  width: 380px;
+}
+
+#forgotPassword {
+  margin-bottom: 12%;
+}
diff --git a/src/containers/signup/Signup.tsx b/src/containers/signup/Signup.tsx
index 4f05e000..4a08c880 100644
--- a/src/containers/signup/Signup.tsx
+++ b/src/containers/signup/Signup.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
 import './signup.less';
-import { Button, Form, Input, Typography } from 'antd';
+import { Button, Col, Form, Input, Row, Typography } from 'antd';
 import { signup } from '../../auth/authAPI';
 import { Link } from 'react-router-dom';
-const { Title, Paragraph } = Typography;
+import { Helmet } from 'react-helmet';
+
+const hSpan = 8;
+const fSpan = 17;
 
 const Signup: React.FC = () => {
   const onFinish = (values: any) => {
@@ -24,74 +26,131 @@ const Signup: React.FC = () => {
         <title>Sign Up</title>
         <meta name="description" content="Description goes here." />
       </Helmet>
-      <div className="content-container">
-        {/*
-          Place relevant components in here
-        */}
-        <Title>Sign Up</Title>
-        <Form name="basic" onFinish={onFinish}>
-          <Form.Item
-            label="First Name"
-            name="firstName"
-            rules={[{ required: true, message: 'Required' }]}
-          >
-            <Input />
-          </Form.Item>
-
-          <Form.Item
-            label="Last Name"
-            name="lastName"
-            rules={[{ required: true, message: 'Required' }]}
-          >
-            <Input />
-          </Form.Item>
-
-          <Form.Item
-            label="Email"
-            name="email"
-            rules={[{ required: true, message: 'Required' }]}
-          >
-            <Input />
-          </Form.Item>
+      <div className="body-content-container">
+        <Row>
+          <Col span={10} className="input-container">
+            <h1>Sign Up</h1>
+            <hr />
+            <Form
+              name="basic"
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+            >
+              <Row>
+                <Col className="leftInput" span={hSpan}>
+                  <Form.Item
+                    name="fname"
+                    rules={[
+                      {
+                        required: true,
+                        message: 'Please input your first name!',
+                      },
+                    ]}
+                  >
+                    <Input placeholder="First Name" />
+                  </Form.Item>
+                </Col>
+                <Col span={hSpan}>
+                  <Form.Item
+                    name="lname"
+                    rules={[
+                      {
+                        required: true,
+                        message: 'Please input your last name!',
+                      },
+                    ]}
+                  >
+                    <Input placeholder="Last Name" />
+                  </Form.Item>
+                </Col>
+              </Row>
 
-          <Form.Item
-            label="Username"
-            name="username"
-            rules={[{ required: true, message: 'Required' }]}
-          >
-            <Input />
-          </Form.Item>
+              <Row>
+                <Col span={fSpan}>
+                  <Form.Item
+                    name="email"
+                    rules={[
+                      { required: true, message: 'Please input your email!' },
+                    ]}
+                  >
+                    <Input placeholder="Email" />
+                  </Form.Item>
+                </Col>
+              </Row>
 
-          <Form.Item
-            label="Password"
-            name="password"
-            rules={[{ required: true, message: 'Required' }]}
-          >
-            <Input.Password />
-          </Form.Item>
+              <Row>
+                <Col span={fSpan}>
+                  <Form.Item
+                    name="password"
+                    rules={[
+                      { required: true, message: 'Please enter a password!' },
+                    ]}
+                  >
+                    <Input.Password placeholder="Password" />
+                  </Form.Item>
+                </Col>
+              </Row>
+              <Row>
+                <Col span={fSpan}>
+                  <Form.Item
+                    name="cpassword"
+                    rules={[
+                      {
+                        required: true,
+                        message: 'Please confirm your password!',
+                      },
+                    ]}
+                  >
+                    <Input.Password placeholder="Confirm Password" />
+                  </Form.Item>
+                </Col>
+              </Row>
 
-          <Form.Item
-            label="Confirm Password"
-            name="confirmPassword"
-            rules={[{ required: true, message: 'Required' }]}
-          >
-            <Input.Password />
-          </Form.Item>
+              <Row style={{ marginTop: '15px' }}>
+                <Col style={{ marginRight: '15px' }}>
+                  <Form.Item id={'loginButton'}>
+                    <Button
+                      type="primary"
+                      htmlType="submit"
+                      size={'large'}
+                      style={{
+                        backgroundColor: '#9AC356',
+                        borderColor: '#9AC356',
+                      }}
+                    >
+                      Log In
+                    </Button>
+                  </Form.Item>
+                </Col>
+                <Col style={{ paddingTop: '5px' }}>
+                  <p>Already have an account?</p>
+                  <p>
+                    Log in{' '}
+                    <Link
+                      to="/login"
+                      component={Typography.Link}
+                      className="Link"
+                    >
+                      here!
+                    </Link>
+                  </p>
+                </Col>
+              </Row>
+            </Form>
+          </Col>
 
-          <Paragraph>
-            Already have an account? Log in{' '}
-            <Link to="/login" component={Typography.Link}>
-              here
-            </Link>
-            !
-          </Paragraph>
+          <Col span={2}></Col>
 
-          <Form.Item>
-            <Button type="primary" htmlType="submit">
-              Submit
-            </Button>
-          </Form.Item>
-        </Form>
+          <Col span={12} className="info-container">
+            <h1>Nice to meet you!</h1>
+            <p>
+              Dreamcatcher kogi taiyaki keytar. Swag typewriter craft beer
+              cronut pok pok gentrify flannel salvia deep v pork belly
+              pitchfork. Swag fashion axe fam. Occupy biodiesel jean shorts
+              affogato PBR&B freegan bushwick vegan four loko pickled.
+            </p>
+          </Col>
+        </Row>
       </div>
     </>
   );
diff --git a/src/containers/signup/signup.less b/src/containers/signup/signup.less
index e69de29b..362b3801 100644
--- a/src/containers/signup/signup.less
+++ b/src/containers/signup/signup.less
@@ -0,0 +1,54 @@
+.body-content-container {
+  font-family: Circular, 'Circular', sans-serif;
+  position: fixed;
+  padding: 8%;
+  height: 100%;
+  width: 100%;
+  background: white;
+  overflow: auto;
+}
+
+.body-content-container .Link {
+  color: #3a681a;
+}
+
+hr {
+  display: block;
+  width: 100%;
+  margin-top: 5%;
+  margin-bottom: 7%;
+  border-top: 1.58px solid white;
+}
+
+.input-container h1 {
+  font-size: 30px;
+  line-height: 36px;
+}
+
+.input-container p {
+  font-family: Roboto;
+  font-size: 10px;
+  text-transform: uppercase;
+  color: #afaeae;
+  margin-bottom: 0px;
+}
+
+.leftInput {
+  margin-top: 0px;
+  margin-right: 25px;
+  margin-bottom: -10px;
+}
+
+.info-container h1 {
+  font-weight: bold;
+  font-size: 44px;
+  line-height: 76px;
+}
+
+.info-container p {
+  font-size: 13px;
+  line-height: 28px;
+  color: #000000;
+  width: 380px;
+  margin-right: 500px;
+}