diff --git a/frontend/src/App.js b/frontend/src/App.js
index 7d4b277..c06471c 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -33,6 +33,10 @@ const App = () => {
         </Helmet>
         <Router>
           <Landing path="/" />
+          <Login path="login" />
+          <Register path="register" />
+          <Stories path="stories" />
+          <AddStory path="addstory" />
         </Router>
       </HelmetProvider>
     </AuthContainer>
diff --git a/frontend/src/components/Card.js b/frontend/src/components/Card.js
index 7191659..bc08582 100644
--- a/frontend/src/components/Card.js
+++ b/frontend/src/components/Card.js
@@ -52,11 +52,11 @@ export default function UserStoryCard(props) {
       <CardHeader
         avatar={
           <Avatar aria-label="recipe" className={classes.avatar}>
-            {props.user.lastInitial}
+            {props.user.firstName}
           </Avatar>
         }
         title={props.title}
-        subheader={props.user.firstName}
+        subheader={props.user.lastInitial}
       />
       <CardMedia
         className={classes.media}
diff --git a/frontend/src/hooks/register.js b/frontend/src/hooks/register.js
index dfa9433..f910e0a 100644
--- a/frontend/src/hooks/register.js
+++ b/frontend/src/hooks/register.js
@@ -3,9 +3,15 @@ import styled from "styled-components";
 import { useAuthStore } from "../contexts/auth";
 
 const Wrapper = styled.div`
+  display: flex;
   padding: 20px;
 `;
 
+const StyledInput = styled.input`
+  padding: 10px;
+  height: 50px;
+`;
+
 export const Register = () => {
   const [formData, setFormData] = useState({
     firstName: "",
@@ -32,31 +38,28 @@ export const Register = () => {
 
   return (
     <Wrapper>
-      <h1>Register Form</h1>
-      {state.isAuthenticated}
       <form onSubmit={(e) => handleSubmit(e)}>
-        <input
+        <StyledInput
           type="text"
           name="firstName"
-          className="form-control"
-          placeholder="John"
+          placeholder="First Name"
           id="firstName"
           value={firstName}
           onChange={(e) => onChange(e)}
           required
         />
-        <input
+        <StyledInput
           type="text"
           name="lastInitial"
           id="lastInitial"
-          placeholder="D"
+          placeholder="Last Name Initial"
           value={lastInitial}
           onChange={(e) => onChange(e)}
           required
           autoComplete="false"
         />
-        <input
-          type="text"
+        <StyledInput
+          type="email"
           name="email"
           id="email"
           placeholder="Email"
@@ -64,7 +67,7 @@ export const Register = () => {
           onChange={(e) => onChange(e)}
           autoComplete="false"
         />
-        <input
+        <StyledInput
           type="password"
           name="password"
           id="password"
@@ -75,7 +78,7 @@ export const Register = () => {
           placeholder="Password"
         />
 
-        <input
+        <StyledInput
           type="text"
           name="phone"
           id="phone"
@@ -84,7 +87,7 @@ export const Register = () => {
           placeholder="Phone (optional)"
         />
         <br />
-        <input type="submit" value="Submit" />
+        <StyledInput type="submit" value="Submit" />
       </form>
     </Wrapper>
   );
diff --git a/frontend/src/hooks/stories.js b/frontend/src/hooks/stories.js
index 468a716..b490be8 100644
--- a/frontend/src/hooks/stories.js
+++ b/frontend/src/hooks/stories.js
@@ -78,7 +78,7 @@ export const Stories = (props) => {
           Interaction Design.org
         </a>
       </p>
-      <Link to="/add-story">Add Story</Link>
+      <Link to="/addstory">Add Story</Link>
       <Container>
         <ul>
           {stories !== null &&