diff --git a/.gitignore b/.gitignore
index f650bce..43bbf53 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
-venv
-*.egg-info
+venv
+*.egg-info
diff --git a/LICENSE b/LICENSE
index 5b715ef..876ea42 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2018 coding&&community
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2018 coding&&community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 99fa83e..2b7fbe7 100644
--- a/README.md
+++ b/README.md
@@ -1,29 +1,29 @@
-# Launchpad 
-The website for students to access coding&&community curriculums online.
-
-## Setup
-Setup the virtual environment.
-```
-python3 -m venv venv
-```
-Every time you work on the project, start up venv:
-```
-. venv/bin/activate
-```
-Install Flask:
-```
-pip install Flask
-```
-Windows instructions at http://flask.pocoo.org/docs/1.0/installation/#installation
-
-## Running for the first time
-```
-export FLASK_APP=launchpad
-pip install -e .
-flask run
-```
-Then go to your web browser, and navigate to http://localhost:5000
-
-Instructions may be different on Windows.
-
-
+# Launchpad 
+The website for students to access coding&&community curriculums online.
+
+## Setup
+Setup the virtual environment.
+```
+python3 -m venv venv
+```
+Every time you work on the project, start up venv:
+```
+. venv/bin/activate
+```
+Install Flask:
+```
+pip install Flask
+```
+Windows instructions at http://flask.pocoo.org/docs/1.0/installation/#installation
+
+## Running for the first time
+```
+export FLASK_APP=launchpad
+pip install -e .
+flask run
+```
+Then go to your web browser, and navigate to http://localhost:5000
+
+Instructions may be different on Windows.
+
+
diff --git a/launchpad/__init__.py b/launchpad/__init__.py
index 320e9b3..33de093 100644
--- a/launchpad/__init__.py
+++ b/launchpad/__init__.py
@@ -1,7 +1,7 @@
-from flask import Flask
-from launchpad.api import launchpad_api
-from launchpad.explorer import explorer
-
-app = Flask(__name__)
-app.register_blueprint(launchpad_api, url_prefix='/api')
-app.register_blueprint(explorer)
+from flask import Flask
+from launchpad.api import launchpad_api
+from launchpad.explorer import explorer
+
+app = Flask(__name__)
+app.register_blueprint(launchpad_api, url_prefix='/api')
+app.register_blueprint(explorer)
diff --git a/launchpad/api.py b/launchpad/api.py
index 12dcebf..f3dfee2 100644
--- a/launchpad/api.py
+++ b/launchpad/api.py
@@ -1,7 +1,7 @@
-from flask import Blueprint
-
-launchpad_api = Blueprint('launchpad_api', __name__, template_folder='templates')
-
-@launchpad_api.route('/test')
-def test():
-    return 'API test'
+from flask import Blueprint
+
+launchpad_api = Blueprint('launchpad_api', __name__, template_folder='templates')
+
+@launchpad_api.route('/test')
+def test():
+    return 'API test'
diff --git a/launchpad/explorer.py b/launchpad/explorer.py
index d953349..7e5b99b 100644
--- a/launchpad/explorer.py
+++ b/launchpad/explorer.py
@@ -1,11 +1,11 @@
-from flask import Blueprint
-
-explorer = Blueprint('explorer', __name__, template_folder='templates')
-
-@explorer.route('/')
-def index():
-    return 'Explorer index'
-
-@explorer.route('/test')
-def test():
-    return 'Explorer test'
+from flask import Blueprint
+
+explorer = Blueprint('explorer', __name__, template_folder='templates')
+
+@explorer.route('/')
+def index():
+    return 'Explorer index'
+
+@explorer.route('/test')
+def test():
+    return 'Explorer test'
diff --git a/launchpad/static/Projects.json b/launchpad/static/Projects.json
new file mode 100644
index 0000000..fc45419
--- /dev/null
+++ b/launchpad/static/Projects.json
@@ -0,0 +1,28 @@
+{
+  "projects": [
+                {
+                  "lang": "python",
+                  "level": 1,
+                  "description": "Get started with this beginner Python project!"
+                },
+                {
+                  "lang": "java",
+                  "level": 2,
+                  "description": "Try this fun Java project!"
+                },
+                {
+                  "lang": "c++",
+                  "level": 2,
+                  "description": "Try your skills with this great C++ project!"
+                },
+                {
+                  "lang": "reactjs",
+                  "level": 3,
+                  "description": "Challenge yourself with this level 3 JavaScript library!"
+                }
+
+  ],
+
+  "dataTitle": "Projects",
+  "version": 1.0
+}
diff --git a/launchpad/static/Style.css b/launchpad/static/Style.css
new file mode 100644
index 0000000..13a939c
--- /dev/null
+++ b/launchpad/static/Style.css
@@ -0,0 +1,9 @@
+.container{
+    margin-left: 8%;
+}
+
+.card:hover{
+    -webkit-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);
+    -moz-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75);
+    box-shadow: -1px 9px 40px -12px rgba(0, 0, 0, 0.75);
+}
diff --git a/launchpad/static/main.css b/launchpad/static/main.css
new file mode 100644
index 0000000..e321ab1
--- /dev/null
+++ b/launchpad/static/main.css
@@ -0,0 +1,80 @@
+body {
+  background: #fafafa;
+  color: #333333;
+  margin-top: 5rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: #444444;
+}
+
+.bg-steel {
+  background-color: #5f788a;
+}
+
+.site-header .navbar-nav .nav-link {
+  color: #cbd5db;
+}
+
+.site-header .navbar-nav .nav-link:hover {
+  color: #ffffff;
+}
+
+.site-header .navbar-nav .nav-link.active {
+  font-weight: 500;
+}
+
+.content-section {
+  background: #ffffff;
+  padding: 10px 20px;
+  border: 1px solid #dddddd;
+  border-radius: 3px;
+  margin-bottom: 20px;
+}
+
+.article-title {
+  color: #444444;
+}
+
+a.article-title:hover {
+  color: #428bca;
+  text-decoration: none;
+}
+
+.article-content {
+  white-space: pre-line;
+}
+
+.article-img {
+  height: 65px;
+  width: 65px;
+  margin-right: 16px;
+}
+
+.article-metadata {
+  padding-bottom: 1px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid #e3e3e3
+}
+
+.article-metadata a:hover {
+  color: #333;
+  text-decoration: none;
+}
+
+.article-svg {
+  width: 25px;
+  height: 25px;
+  vertical-align: middle;
+}
+
+.account-img {
+  height: 125px;
+  width: 125px;
+  margin-right: 20px;
+  margin-bottom: 16px;
+}
+
+.account-heading {
+  font-size: 2.5rem;
+}
\ No newline at end of file
diff --git a/launchpad/templates/about.html b/launchpad/templates/about.html
new file mode 100644
index 0000000..36ae6e6
--- /dev/null
+++ b/launchpad/templates/about.html
@@ -0,0 +1,4 @@
+{% extends "layout.html" %}
+{% block content %}
+	<h1>About Page</h1>
+{% endblock content%}
\ No newline at end of file
diff --git a/launchpad/templates/home.html b/launchpad/templates/home.html
new file mode 100644
index 0000000..e51cf9d
--- /dev/null
+++ b/launchpad/templates/home.html
@@ -0,0 +1,15 @@
+{% extends "layout.html" %}
+{% block content %}
+	{% for post in posts %}
+		<article class="media content-section">
+		  <div class="media-body">
+			<div class="article-metadata">
+			  <a class="mr-2" href="#">{{ post.author }}</a>
+			  <small class="text-muted">{{ post.date_posted }}</small>
+			</div>
+			<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
+			<p class="article-content">{{ post.content }}</p>
+		  </div>
+		</article>
+	{% endfor %}
+{% endblock content%}
diff --git a/launchpad/templates/layout.html b/launchpad/templates/layout.html
new file mode 100644
index 0000000..1ec5b21
--- /dev/null
+++ b/launchpad/templates/layout.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="../static/Style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename ='main.css')}}">
+
+	{% if title %}
+		<title>coding&&community - {{ title }}</title>
+	{% else %}
+		<title>coding&&community</title>
+	{% endif %}
+</head>
+<body>
+
+	<header class="site-header">
+	  <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
+		<div class="container">
+		  <a class="navbar-brand mr-4" href="/">coding&&community</a>
+		  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		  </button>
+		  <div class="collapse navbar-collapse" id="navbarToggle">
+			<div class="navbar-nav mr-auto">
+			  <a class="nav-item nav-link" href="/">Home</a>
+			  <a class="nav-item nav-link" href="/about">About</a>
+        <a class="nav-item nav-link" href="/myprojects">My Projects</a>
+			</div>
+			<!-- Navbar Right Side -->
+
+			<div class="navbar-nav">
+			  <a class="nav-item nav-link" href="/login">Login</a>
+			  <a class="nav-item nav-link" href="/register">Register</a>
+			</div>
+		  </div>
+		</div>
+	  </nav>
+	</header>
+
+	<main role="main" class="container">
+	  <div class="row">
+		<div class="col-md-8">
+		  {%with messages = get_flashed_messages(with_categories=true) %}
+		    {% if messages %}
+			  {% for category, message in messages %}
+			    <div class ="alert alert-{{ category }}">
+				  {{message}}
+			    </div>
+			  {% endfor %}
+		    {% endif%}
+		  {% endwith %}
+    </div>
+  </div>
+		  {% block content %}{% endblock %}
+
+	</main>
+
+
+
+	<!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/launchpad/templates/login.html b/launchpad/templates/login.html
new file mode 100644
index 0000000..e69de29
diff --git a/launchpad/templates/myprojects.html b/launchpad/templates/myprojects.html
new file mode 100644
index 0000000..be9e3f3
--- /dev/null
+++ b/launchpad/templates/myprojects.html
@@ -0,0 +1,50 @@
+{% extends "layout.html" %}
+{% block content %}
+	<h1>My Projects</h1>
+	<br />
+	<div class="container">
+        <div id="cardspot" class="row">
+
+        </div>
+    </div>
+
+<script>
+    $(document).ready(function(){
+
+				$.getJSON("static/Projects.json",function(result){
+						$.each(result.projects, function(key,value){
+							$("#cardspot").append("<div class='col-4-lg'> \
+	                <!-- Bootstrap Card --> \
+									<div class='col-md-4'> \
+	                <div class='card' style='width:18rem;'> \
+	                    <div class='card-body'> \
+	                        <h5 class='card-title'>" + value.lang.toUpperCase() + " - Level " + value.level + "</h5> \
+	                        <p class='card-text'> \
+	                           " + value.description +" \
+	                        </p>\
+	                        <a href='#' class='btn btn-primary'>Read...</a>\
+	                    </div>\
+	                </div>\
+	            </div>\
+							</div>");
+					})
+				});
+
+        $('.col-4-lg').hover(
+            // trigger when mouse hover
+            function(){
+                $(this).animate({
+                    marginTop: "-=1%",
+                },50);
+            },
+
+            // trigger when mouse out
+            function(){
+                $(this).animate({
+                    marginTop: "0%"
+                },50);
+            }
+        );
+    });
+</script>
+{% endblock content%}
diff --git a/launchpad/templates/project_layout.html b/launchpad/templates/project_layout.html
new file mode 100644
index 0000000..affb845
--- /dev/null
+++ b/launchpad/templates/project_layout.html
@@ -0,0 +1,5 @@
+{% extends "layout.html" %}
+{% block content %}
+
+
+{% endblock content%}
diff --git a/launchpad/templates/register.html b/launchpad/templates/register.html
new file mode 100644
index 0000000..a52ec6e
--- /dev/null
+++ b/launchpad/templates/register.html
@@ -0,0 +1,34 @@
+{% extends "layout.html" %}
+{% block content %}
+	<div class="content-section">
+		<form method="POST" action = "">
+			{{ form.hidden_tag() }}
+			<fieldset class="form-group>
+				<legend class="border-bottom mb-4"Join Today</legend>
+				<div class="form-group">
+					{{ form.username.label(class="form-control-label") }}
+					{{ form.username(class="form-control form-control-lg") }}
+				</div>
+				<div class="form-group">
+					{{ form.email.label(class="form-control-label") }}
+					{{ form.email(class="form-control form-control-lg") }}
+				</div>
+				<div class="form-group">
+					{{ form.password.label(class="form-control-label") }}
+					{{ form.password(class="form-control form-control-lg") }}
+				</div>
+				<div class="form-group">
+					{{ form.confirm_password.label(class="form-control-label") }}
+					{{ form.confirm_password(class="form-control form-control-lg") }}
+				</div>
+			</fieldset>
+			<div class="form-group">
+				{{ form.submit(class="btn btn-outline-info") }}
+			</div>
+		</form>
+	</div>
+	<div class="border-top pt-3">
+		<small class="text-muted">
+			Already Have An Account? <a class="ml-2" href="{{ url_for('login') }}">Sign In</a>
+		</small>
+{% endblock content%}
\ No newline at end of file
diff --git a/setup.py b/setup.py
index cc2be7c..6321db3 100644
--- a/setup.py
+++ b/setup.py
@@ -1,10 +1,10 @@
-from setuptools import setup
-
-setup(
-    name='launchpad',
-    packages=['launchpad'],
-    include_package_data=True,
-    install_requires=[
-        'flask',
-    ],
-)
+from setuptools import setup
+
+setup(
+    name='launchpad',
+    packages=['launchpad'],
+    include_package_data=True,
+    install_requires=[
+        'flask',
+    ],
+)