diff --git a/src/assets/Background.png b/src/assets/Background.png
new file mode 100644
index 0000000..90c8b44
Binary files /dev/null and b/src/assets/Background.png differ
diff --git a/src/assets/LogIn.png b/src/assets/LogIn.png
new file mode 100644
index 0000000..3b78a87
Binary files /dev/null and b/src/assets/LogIn.png differ
diff --git a/src/components/button/Button.jsx b/src/components/button/Button.jsx
index 3dcf125..c17d099 100644
--- a/src/components/button/Button.jsx
+++ b/src/components/button/Button.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-export function Button({ style }) {
+export function Button({ style,label }) {
   return (
     <button type="button" className={style}>
-      Button
+      {label}
     </button>
   );
 }
diff --git a/src/components/button/Button.stories.jsx b/src/components/button/Button.stories.jsx
index b65a997..1a893cf 100644
--- a/src/components/button/Button.stories.jsx
+++ b/src/components/button/Button.stories.jsx
@@ -3,18 +3,18 @@ import '../../stylesheets/button.scss';
 import { Button } from './Button';
 
 export default {
-  title: 'Button',
+  title: 'Components/Button',
   component: Button
 };
 
-export const Primary = () => <Button style="kit-button"/>;
-export const PrimaryMedium = () => <Button style="kit-button -medium"/>;
-export const PrimarySmall = () => <Button style="kit-button -small"/>;
-export const Alt = () => <Button style="kit-button -alt"/>;
-export const AltMedium = () => <Button style="kit-button -alt -medium"/>;
-export const AltSmall = () => <Button style="kit-button -alt -small"/>;
-export const Disabled = () => <Button style="kit-button -disabled"/>;
-export const Line = () => <Button style="kit-button -line"/>;
-export const Light = () => <Button style="kit-button -light"/>;
-export const LightAlt = () => <Button style="kit-button -lightalt"/>;
-export const LightLine = () => <Button style="kit-button -lightline"/>;
+export const Primary = () => <Button style="kit-button" label="Button"/>;
+export const PrimaryMedium = () => <Button style="kit-button -medium" label="Button"/>;
+export const PrimarySmall = () => <Button style="kit-button -small" label="Button"/>;
+export const Alt = () => <Button style="kit-button -alt" label="Button"/>;
+export const AltMedium = () => <Button style="kit-button -alt -medium" label="Button"/>;
+export const AltSmall = () => <Button style="kit-button -alt -small" label="Button"/>;
+export const Disabled = () => <Button style="kit-button -disabled" label="Button"/>;
+export const Line = () => <Button style="kit-button -line" label="Button"/>;
+export const Light = () => <Button style="kit-button -light" label="Button"/>;
+export const LightAlt = () => <Button style="kit-button -lightalt" label="Button"/>;
+export const LightLine = () => <Button style="kit-button -lightline" label="Button"/>;
diff --git a/src/components/button/DropDown.stories.jsx b/src/components/button/DropDown.stories.jsx
index 3224c01..9b5fe4c 100644
--- a/src/components/button/DropDown.stories.jsx
+++ b/src/components/button/DropDown.stories.jsx
@@ -3,7 +3,7 @@ import '../../stylesheets/dropdown.scss';
 import { DropDown } from './DropDown';
 
 export default {
-  title: 'Drop Down',
+  title: 'Components/Drop Down',
   component: DropDown
 };
 
diff --git a/src/components/button/Footer.stories.jsx b/src/components/button/Footer.stories.jsx
index fa82f3c..c230b10 100644
--- a/src/components/button/Footer.stories.jsx
+++ b/src/components/button/Footer.stories.jsx
@@ -4,7 +4,7 @@ import { Footer } from './Footer';
 import { FooterAlt } from './FooterAlt';
 
 export default {
-  title: 'Footer',
+  title: 'Components/Footer',
   component: Footer
 };
 
diff --git a/src/components/button/LoginPage.jsx b/src/components/button/LoginPage.jsx
new file mode 100644
index 0000000..e2207d2
--- /dev/null
+++ b/src/components/button/LoginPage.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { TextBox } from "./TextBox";
+import { Button } from "./Button";
+import MonogramWhite from "../../assets/MonogramWhite.svg";
+import LogIn from "../../assets/LogIn.png";
+
+export function LoginPage({ mode, textbox, button }) {
+  return (
+    <div class={mode}>
+      <img class="illustration" src={LogIn}></img>
+      <div class="background">
+        <div class="gradient"></div>
+        <div class="image"></div>
+      </div>
+      <div class="container">
+        <img class="monogram -primary" src={MonogramWhite} alt="logo" />
+        <div class="title">Sign in to your account</div>
+        <div class="subtitle">
+          <span>Or start your</span> <a href="#"> 7-day trial!</a>
+        </div>
+        <div class="login-container">
+          <TextBox style={textbox} input="Email Address" type="text" />
+          <TextBox style={textbox} input="Password" type="password" />
+          <div class="actions">
+            <label>
+              <input type="checkbox" id="remember" value="off" />
+              <span>Remember Me</span>
+            </label>
+            <a class="forgot" href="#">
+              {" "}
+              Forgot your password?
+            </a>
+          </div>
+        </div>
+        <Button style={button} label="Log in" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/button/LoginPage.stories.jsx b/src/components/button/LoginPage.stories.jsx
new file mode 100644
index 0000000..c6cddd5
--- /dev/null
+++ b/src/components/button/LoginPage.stories.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import '../../stylesheets/login.scss';
+import '../../stylesheets/textbox.scss';
+import '../../stylesheets/button.scss';
+import { LoginPage } from './LoginPage';
+
+
+
+export default {
+  title: 'Templates/Log In',
+  component: LoginPage
+};
+
+const Template = (args) => <LoginPage {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  mode: "log-in",
+  textbox: "kit-textbox",
+  button: "kit-button -login",
+};
diff --git a/src/components/button/ProductItem.stories.jsx b/src/components/button/ProductItem.stories.jsx
index e8558d6..a5810f0 100644
--- a/src/components/button/ProductItem.stories.jsx
+++ b/src/components/button/ProductItem.stories.jsx
@@ -3,7 +3,7 @@ import '../../stylesheets/product-item.scss';
 import { ProductItem } from './ProductItem';
 
 export default {
-  title: 'Product Item',
+  title: 'Components/Product Item',
   component: ProductItem
 };
 
diff --git a/src/components/button/SideNavbar.stories.jsx b/src/components/button/SideNavbar.stories.jsx
index bdad15a..4feb728 100644
--- a/src/components/button/SideNavbar.stories.jsx
+++ b/src/components/button/SideNavbar.stories.jsx
@@ -3,7 +3,7 @@ import '../../stylesheets/navbar.scss';
 import { SideNavbar } from './SideNavbar';
 
 export default {
-  title: 'Side Navbar',
+  title: 'Components/Side Navbar',
   component: SideNavbar
 };
 
diff --git a/src/components/button/SignupPage.jsx b/src/components/button/SignupPage.jsx
new file mode 100644
index 0000000..437350e
--- /dev/null
+++ b/src/components/button/SignupPage.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { TextBox } from "./TextBox";
+import { Button } from "./Button";
+import MonogramWhite from "../../assets/MonogramWhite.svg";
+
+export function SignupPage({ mode, textbox, button }) {
+  return (
+    <div class={mode}>
+      <div class="background">
+        <div class="gradient"></div>
+        <div class="image"></div>
+      </div>
+      <div class="container">
+        <img class="monogram -primary" src={MonogramWhite} alt="logo" />
+        <div class="title">Create New Account</div>
+        <div class="subtitle">
+          <span>Already registered?</span>
+          <a href="#"> Log In</a>
+        </div>
+        <div class="signup-container">
+          <div class="row">
+            <TextBox style={textbox} input="Email Address" type="text" />
+          </div>
+          <div class="row">
+            <TextBox style={textbox} input="First Name" type="text" />
+            <TextBox style={textbox} input="Last Name" type="text" />
+          </div>
+          <div class="row">
+            <TextBox style={textbox} input="Password" type="password" />
+            <TextBox style={textbox} input="Re-Enter Password" type="password"/>
+          </div>
+          <div class="row">
+            <Button style={button} label="Create Account" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/button/SignupPage.stories.jsx b/src/components/button/SignupPage.stories.jsx
new file mode 100644
index 0000000..1172119
--- /dev/null
+++ b/src/components/button/SignupPage.stories.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import '../../stylesheets/signup.scss';
+import '../../stylesheets/textbox.scss';
+import '../../stylesheets/button.scss';
+import { SignupPage } from './SignupPage';
+
+
+export default {
+  title: 'Templates/Sign Up',
+  component: SignupPage
+};
+
+const Template = (args) => <SignupPage {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  mode: "sign-up",
+  textbox: "kit-textbox -signup",
+  button: "kit-button -signup",
+};
\ No newline at end of file
diff --git a/src/components/button/TextBox.jsx b/src/components/button/TextBox.jsx
index 05bae55..e54af09 100644
--- a/src/components/button/TextBox.jsx
+++ b/src/components/button/TextBox.jsx
@@ -4,11 +4,11 @@ import { solid, regular, brands } from '@fortawesome/fontawesome-svg-core/import
 
 console.log(FontAwesomeIcon)
 
-export function TextBox({ style }) {
+export function TextBox({ style, input, type }) {
   return (
     <div class={style}> 
       <span><FontAwesomeIcon icon={solid('magnifying-glass')} color=''/></span>
-		  <input type="text" placeholder="Input text here"></input>
+		  <input type={type} placeholder={input}></input>
     </div>
   );
 }
diff --git a/src/components/button/TextBox.stories.jsx b/src/components/button/TextBox.stories.jsx
index fc4610c..d1dd7b4 100644
--- a/src/components/button/TextBox.stories.jsx
+++ b/src/components/button/TextBox.stories.jsx
@@ -3,13 +3,15 @@ import '../../stylesheets/textbox.scss';
 import { TextBox } from './TextBox';
 
 export default {
-  title: 'Textbox',
+  title: 'Components/Textbox',
   component: TextBox
 };
 
-export const Primary = () => <TextBox style="kit-textbox"/>;
-export const PrimaryLight = () => <TextBox style="kit-textbox -light"/>;
-export const PrimarySearch = () => <TextBox style="kit-textbox -search"/>;
-export const PrimarySearchLight = () => <TextBox style="kit-textbox -search -light"/>;
-export const Disabled = () => <TextBox style="kit-textbox -disabled"/>;
-export const Error = () => <TextBox style="kit-textbox -error"/>;
+export const Primary = () => <TextBox style="kit-textbox" input="Input placeholder text here" type="text" />;
+export const PrimaryLight = () => <TextBox style="kit-textbox -light" input="Input placeholder text here" type="text"/>;
+export const PrimarySearch = () => <TextBox style="kit-textbox -search" input="Input placeholder text here" type="text"/>;
+export const PrimarySearchLight = () => <TextBox style="kit-textbox -search -light" input="Input placeholder text here" type="text"/>;
+export const Disabled = () => <TextBox style="kit-textbox -disabled" input="Input placeholder text here" type="text"/>;
+export const Error = () => <TextBox style="kit-textbox -error" input="Input placeholder text here" type="text"/>;
+export const PrimaryPassword = () => <TextBox style="kit-textbox -password" input="Input placeholder text here" type="password"/>;
+
diff --git a/src/components/button/TopNavbar.stories.jsx b/src/components/button/TopNavbar.stories.jsx
index 3af51b4..f706f1f 100644
--- a/src/components/button/TopNavbar.stories.jsx
+++ b/src/components/button/TopNavbar.stories.jsx
@@ -3,7 +3,7 @@ import '../../stylesheets/navbar.scss';
 import { TopNavbar } from './TopNavbar';
 
 export default {
-  title: 'Top Navbar',
+  title: 'Components/Top Navbar',
   component: TopNavbar
 };
 
diff --git a/src/stylesheets/button.scss b/src/stylesheets/button.scss
index efe511c..ac7d6b7 100644
--- a/src/stylesheets/button.scss
+++ b/src/stylesheets/button.scss
@@ -39,10 +39,9 @@
   justify-content: center;
   background-color: $primary;
   border-radius: 4px;
-  font-size: $button-text;
-  text-transform: uppercase;
-  letter-spacing: 4px;
+  font-size: $body;
   cursor: pointer;
+  color: $text;
 
   &:hover {
     opacity: 0.5;
diff --git a/src/stylesheets/login.scss b/src/stylesheets/login.scss
new file mode 100644
index 0000000..c47b9f5
--- /dev/null
+++ b/src/stylesheets/login.scss
@@ -0,0 +1,123 @@
+@import "./variables";
+
+.log-in {
+  display: flex;
+  color: $text;
+  width: 100%;
+  height: 100vh;
+  align-items: center;
+  overflow: hidden;
+  margin: 0;
+  justify-content: center;
+
+  > .illustration {
+    position: absolute;
+    z-index: 4;
+    height: 32%;
+    bottom: 0;
+  }
+
+  > .background {
+    display: flex;
+    align-items: center;
+  }
+
+  > .background > * {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  > .background > .gradient {
+    background: $color-gradient;
+    z-index: 1;
+  }
+
+  > .background > .image {
+    z-index: 2;
+    background-image: url("../assets/Background.png");
+    opacity: 0.3;
+  }
+
+  > .container {
+    display: flex;
+    height: 200vh;
+    width: 100vw;
+    min-width: 560px;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background-color: $bg1;
+    position: relative;
+    clip-path: polygon(25% 0%, 100% 0%, 75.89% 116.36%, -4.62% 116.5%);
+    z-index: 3;
+    margin-top: -234px;
+    padding: 32px;
+    box-sizing: content-box;
+  }
+
+  > .container > .monogram {
+    width: 64px;
+    margin-bottom: 16px;
+  }
+
+  > .container > .title {
+    font-size: $h5;
+  }
+
+  > .container > .subtitle {
+    font-size: $h6;
+    margin-bottom: 48px;
+  }
+
+  > .container > .subtitle > a {
+    color: $primary;
+  }
+
+  @media only screen and (min-width: 832px) {
+    justify-content: normal;
+    
+
+    > .illustration {
+      right: 24px;
+      height: 60vh;
+      margin-top: 0;
+      bottom: auto;
+    }
+
+    > .container {
+      height: 100vh;
+      width: 75vw;
+      left: -5%;
+      clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
+      margin-top: 0;
+      padding: 0;
+    }
+
+    > .container > .title {
+      font-size: $h4;
+    }
+  }
+}
+
+.login-container {
+  width: 400px;
+  margin-bottom: 32px;
+
+  > .actions {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  > .actions > a {
+    color: $primary;
+  }
+
+  @media only screen and (min-width: 832px) {
+    min-width: 200px;
+  }
+}
+
+.kit-button.-login {
+  width: 400px;
+}
diff --git a/src/stylesheets/signup.scss b/src/stylesheets/signup.scss
new file mode 100644
index 0000000..534d7b6
--- /dev/null
+++ b/src/stylesheets/signup.scss
@@ -0,0 +1,129 @@
+@import "./variables";
+
+.sign-up {
+  display: flex;
+  color: $text;
+  width: 100%;
+  height: 100vh;
+  align-items: center;
+  overflow: hidden;
+  margin: 0;
+  justify-content: center;
+
+  > .background {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+    margin: 0;
+    position: absolute;
+  }
+
+  > .background > * {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  > .background > .gradient {
+    background: $color-gradient;
+    z-index: 1;
+  }
+
+  > .background > .image {
+    z-index: 2;
+    background-image: url("../assets/Background.png");
+    opacity: 0.3;
+  }
+
+  > .container {
+    display: flex;
+    height: 80vh;
+    width: 100%;
+    min-width: 560px;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background-color: $bg1;
+    position: absolute;
+    z-index: 3;
+    box-sizing: content-box;
+    padding: 40px 0;
+  }
+
+  > .container > .monogram {
+    width: 64px;
+    margin-bottom: 16px;
+  }
+
+  > .container > .title {
+    font-size: $h4;
+  }
+
+  > .container > .subtitle {
+    font-size: $h6;
+    font-weight: 400;
+    margin-bottom: 32px;
+  }
+
+  > .container > .subtitle > a {
+    color: $primary;
+  }
+
+  @media only screen and (min-width: 832px) {
+    > .container {
+      padding: 0;
+    }
+  }
+}
+
+.signup-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  > .row {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 8px;
+    min-width: 75vw;
+    box-sizing: content-box;
+  }
+
+  > .row > * {
+    margin-bottom: 8px;
+  }
+
+  > .row > *:nth-child(2) {
+      margin-top: 8px;
+    }
+
+  @media only screen and (min-width: 832px) {
+    > .row {
+      flex-direction: row;
+      min-width: 50vw;
+    }
+
+    > .row > *:nth-child(2) {
+      margin-left: 24px;
+      margin-top: 0;
+    }
+  }
+}
+
+.kit-button.-signup {
+  min-width: 240px;
+  width: 75vw;
+  padding: 24px 0;
+  margin-top: 24px;
+
+    @media only screen and (min-width: 832px) {
+      width: auto;
+    }
+}
+
+.kit-textbox.-signup {
+  width: 100%;
+}
diff --git a/src/stylesheets/textbox.scss b/src/stylesheets/textbox.scss
index c75e9ec..0b9d6b2 100644
--- a/src/stylesheets/textbox.scss
+++ b/src/stylesheets/textbox.scss
@@ -11,14 +11,11 @@
 	margin-bottom: 16px;
 	background: none;
 
-  > img.icon {
-    display: none;
-    visibility: none;
-  }
-
 	> span {
 		font-size: $body;
 		margin-right: 8px;
+    display: none;
+    visibility: none;
 	}
 	> input {
 		background: none;
@@ -76,7 +73,7 @@
      filter: invert(100%);
   }
 
-  &.-search > img.icon {
+  &.-search > span {
      display: block;
     visibility: visible;
   }
diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
index a0cb9d4..03fda60 100644
--- a/src/stylesheets/variables.scss
+++ b/src/stylesheets/variables.scss
@@ -39,6 +39,7 @@ $text2-l: #ffffff;
 
 /*-----Shadows or Glow----*/
 $gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+$color-gradient: linear-gradient(135deg, #40a492 0% , #3c6dce 50%, #733cce 100%);
 $shadow: 0 0 16px rgb(29 8 42 / 0.3);
 $glow: 0 0 16px rgb(19 151 135 / 0.7);
 $border-glow: inset 0 0 16px rgb(19 151 135 / 0.7);