diff --git a/app.js b/app.js
index 2ecc9f2220..3042717e51 100644
--- a/app.js
+++ b/app.js
@@ -28,6 +28,8 @@ app.locals.title = `${capitalized(projectName)}- Generated with Ironlauncher`;
 const index = require('./routes/index');
 app.use('/', index);
 
+app.use('/', require("./routes/auth.routes"));
+
 // ❗ To handle errors. Routes that don't exist or errors that you handle in specific routes
 require('./error-handling')(app);
 
diff --git a/models/User.model.js b/models/User.model.js
index 9cdd3a3ce4..baaa11d74d 100644
--- a/models/User.model.js
+++ b/models/User.model.js
@@ -4,11 +4,14 @@ const { Schema, model } = require("mongoose");
 const userSchema = new Schema({
   username: {
     type: String,
-    unique: true
+    unique: true,
+    required: true
   },
-  password: String
+  password: {
+    type: String, 
+    required: true, 
+    unique: true
+  }
 });
 
-const User = model("User", userSchema);
-
-module.exports = User;
+module.exports = model("User", userSchema);;
diff --git a/package.json b/package.json
index 19489d9695..76f9de9da4 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "dev": "nodemon server.js"
   },
   "dependencies": {
+    "bcryptjs": "^2.4.3",
     "cookie-parser": "^1.4.5",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 9453385b99..d01ac07ebc 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -1,8 +1,47 @@
 body {
-  padding: 50px;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  margin:0px;
 }
 
-a {
-  color: #00B7FF;
+a{
+  font-size: 18px;
+  background-color: white;
+  color: black;
+  text-decoration: none;
+  padding: 10px;
+  border-radius: 20px;
 }
+
+nav{
+  background-color: lightblue;
+  padding: 30px;
+}
+
+#title{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 100px;
+}
+
+h1{
+  text-align: center;
+  margin: 50px;
+}
+
+#form{
+  margin: 100px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 40px;
+  font-size: 20px;
+}
+
+#form button{
+  font-size: 18px;
+  background-color: lightblue;
+  border: 1px solid lightblue;
+  border-radius: 20px;
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/routes/auth.routes.js b/routes/auth.routes.js
new file mode 100644
index 0000000000..3614d44a5f
--- /dev/null
+++ b/routes/auth.routes.js
@@ -0,0 +1,35 @@
+const router = require("express").Router();
+const bcryptjs = require("bcryptjs");
+const User = require("../models/User.model");
+
+router.get(("/signup"), (req, res, next)=>{
+    res.render("auth/sign-up")
+});
+
+router.post(("/signup"), (req, res, next)=>{
+    const saltRounds = 10;
+    const {username, password} = req.body;
+
+    bcryptjs
+    .genSalt(saltRounds)
+    .then((salt)=>{
+        return bcryptjs.hash(password, salt);
+    })
+    .then((hashedPassword)=>{
+        return User.create({username, password: hashedPassword});
+    })
+    .then((user)=>{
+        console.log("User was added:", user);
+        res.redirect("/");
+    })
+    .catch((err)=>{
+        next(err);
+    })
+});
+
+
+
+module.exports = router;
+
+
+
diff --git a/views/auth/sign-up.hbs b/views/auth/sign-up.hbs
new file mode 100644
index 0000000000..35157a4f19
--- /dev/null
+++ b/views/auth/sign-up.hbs
@@ -0,0 +1,16 @@
+<h1>Sign Up</h1>
+
+
+<form action="/signup" method="post" id="form">
+    <div>
+        <label>Username</label>
+        <input type="text" name="username" required>
+    </div>
+
+    <div>
+        <label>Password</label>
+        <input type="password" name="password" required>
+    </div>
+
+    <button type="submit">Sign Up</button>
+</form>
\ No newline at end of file
diff --git a/views/index.hbs b/views/index.hbs
index 1f308fdb35..f96503d9f2 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -1,2 +1,6 @@
-<h1>{{title}}</h1>
-<p>Welcome to {{title}}</p>
+<div id="title">
+    <h1>{{title}}</h1>
+    <p>Welcome to {{title}}</p>
+</div>
+
+
diff --git a/views/layout.hbs b/views/layout.hbs
index 73199c166b..bad6dbf771 100644
--- a/views/layout.hbs
+++ b/views/layout.hbs
@@ -10,6 +10,9 @@
   </head>
 
   <body>
+    <nav>
+      <a href="/signup" id="sign-up-btn">Sign Up</a>
+    </nav>
 
     {{{body}}}