diff --git a/WebContent/html/css/stylesheet.css b/WebContent/html/css/stylesheet.css
index a88812a..96e4450 100644
--- a/WebContent/html/css/stylesheet.css
+++ b/WebContent/html/css/stylesheet.css
@@ -35,7 +35,7 @@ div.profileContainer{
     width: 100%;
     height: 100%;
     overflow: scroll;
-    left: 300px;
+    left: 200px;
     top: 70px;
 }
 
@@ -76,7 +76,7 @@ input[type=text]{
 
 
 span.close{
-    color: #aaa;
+    color: black;
     float: right;
     font-size: 28px;
     font-weight: bold;
diff --git a/WebContent/html/javascript/profileSettings.js b/WebContent/html/javascript/profileSettings.js
new file mode 100644
index 0000000..cbdb7e9
--- /dev/null
+++ b/WebContent/html/javascript/profileSettings.js
@@ -0,0 +1,86 @@
+//event listener on the apply changes button
+document.getElementById('apply').addEventListener('click',applyChanges);
+document.getElementById('inputName').addEventListener('keyup',checkEmpty);
+document.getElementById('inputSSO').addEventListener('keyup',checkEmpty);
+document.getElementById('closeBttn').addEventListener('click',function(){document.getElementById('missingcontent').style.display = "none";});
+
+var typeTimer;
+var doneTypingInterval = 2000 //ms
+
+$('#inputSSO').keyup(function(){clearTimeout(typeTimer); typeTimer = setTimeout(querySSO,doneTypingInterval);});
+
+var flag = 0;
+var name;
+var SSO;
+var telephone;
+var email;
+
+//populates the fields
+populate();
+
+//sends applied changes to DB
+function applyChanges(){
+	if(flag == 0){
+	name = $('#inputName').val();
+	SSO = $('#inputSSO').val();
+	telephone = $('#inputTelephone').val();
+	email = $('#inputEmail').val();
+
+	//send these values to DB for updates to be made
+	//EX
+		//if(name != "")
+			//send to database
+	}
+
+	else
+		$('#missingcontent').css('display','block');
+}
+
+//populates form fields if info exists in db already
+function populate(){
+	//get values from database
+
+	//$('#inputName').val(name);
+	//$('#inputSSO').val(SSO);
+	//$('#inputTelephone').val(telephone);
+	//$('#inputEmail').val(email);
+}
+
+function checkEmpty(){
+	var id = this.getAttribute('id');
+	if($('#' + id).val() == ""){
+		$('#' + id).parent().attr('class','form-group has-error');
+		$('#' + id).siblings('span').text(warningtext(id))
+	}
+	else{
+		$('#' + id).parent().attr('class','form-group');
+		$('#' + id).siblings('span').text('')
+	}
+
+}
+
+function warningtext(id){
+	if(id == "inputName")
+		return "This is a required field.";
+	else if (id == "inputSSO")
+		return "Invalid SSO.";
+}
+
+function querySSO(){
+	//query to see if SSO is in database already
+
+	//if so... && val() != ""
+	//$('#' + id).parent().attr('class','form-group has-error');
+	//$('#inputSSO').siblings('span').text('SSO is currently in use.');
+	//flag = 1;
+
+	//if not... && val() != ""
+	//$('#' + id).parent().attr('class','form-group');
+	//$('#' + id).siblings('span').text('');
+}
+
+window.onclick = function(event) {
+	var modal = document.getElementById('missingcontent');
+	if(event.target == modal)
+    	modal.style.display = "none";
+}
\ No newline at end of file
diff --git a/WebContent/html/webpages/profileSettings.html b/WebContent/html/webpages/profileSettings.html
index c6c8798..5ff5ede 100644
--- a/WebContent/html/webpages/profileSettings.html
+++ b/WebContent/html/webpages/profileSettings.html
@@ -25,6 +25,33 @@
             background-color: white;
             padding: 10px;
         }
+
+        div.sidebar{
+            width: 200px;
+        }
+
+        form.infobar{
+            display: inline-block; 
+            vertical-align: top;
+            border: 5px solid;
+            background-color: white;
+            padding: 10px;
+            padding-top: 0px;
+            margin-left: 15px;
+            width: 400px;
+        }
+
+        div.inputelement{
+            padding: 5px;
+        }
+
+        div.inputelement input{
+            border-width: solid;
+        }
+
+        body, html{
+            overflow: hidden;
+        }
     </style>
 
 </head>
@@ -37,22 +64,56 @@
         <h4>User Profile Settings</h4>
         <li class = "option" id = "os"><a href="#">Profile Settings</a></li>
         <li class = "option" id = "ds"><a href="#">Location Settings</a></li>
-    </ul>
-</div>
+      </ul>
+    </div>
+
+    <div class = "modal" id = "missingcontent">
+        <div class = "modal-content">
+            <div class = "modal-head">
+                <span id="closeBttn" class="close">&times;</span>
+            </div>
+            <div class = "modal-body">
+                You need to edit some fields still.
+            </div>
+        </div>
+    </div>
 
-<div class = "profileContainer">
-    <div class = "profileImageContainer">
-        <div class = "imageContainer">
-            <img id = "profimg">
+    <div class = "profileContainer">
+        <div style = "display: inline-block;">
+            <div class = "imageContainer">
+                <img id = "profimg">
+            </div>
+            <br>
+            <p style = "display: inline-block;">Change profile image:</p>
+            <div id="my-icon-select" style = "display: inline-block;"></div>
         </div>
-        <br>
-        <p style = "display: inline-block;">Change profile image:</p>
-        <div id="my-icon-select" style = "display: inline-block;"></div>
+        <form class = "infobar">
+            <h2>Profile Settings</h2>
+            <div class = "form-group">
+                <label for="inputName">Full Name *</label>
+                <input style = "width: 350px;" type = "name" class="form-control" id="inputName" placeholder="Name" required = "true">
+                <span class = "help-block"></span>
+            </div>
+            <div class = "form-group">
+                <label for="inputSSO">SSO Number *</label>
+                <input style = "width: 100px;" type = "id" class="form-control" id="inputSSO" placeholder="SSO #" required = "true">
+                <span class = "help-block"></span>
+            </div>
+            <div class = "form-group">
+                <label for="inputTelephone">Telephone Number</label>
+                <input style = "width: 120px;" type = "tel" class="form-control" id="inputTelephone" placeholder="Telephone #">
+            </div>
+            <div class = "form-group">
+                <label for="inputEmail">Email</label>
+                <input style = "width: 350px;" type = "email" class="form-control" id="inputEmail" placeholder="Email">
+            </div>
+            <button type="submit" class="btn btn-primary" id = "apply">Apply Changes</button>
+        </form>
     </div>
-</div>
 
-<script src = "../javascript/navbar.js"></script>
-<script src = "../javascript/profileIcon.js"></script>
+    <script src = "../javascript/navbar.js"></script>
+    <script src = "../javascript/profileIcon.js"></script>
+    <script src = "../javascript/profileSettings.js"></script>
 </body>
 
 </html>
\ No newline at end of file