diff --git a/src/ttfrog/themes/default/base.html b/src/ttfrog/themes/default/base.html
index 0178389..d52ecc4 100644
--- a/src/ttfrog/themes/default/base.html
+++ b/src/ttfrog/themes/default/base.html
@@ -1,36 +1,23 @@
 <!DOCTYPE html>
 <html>
 <head>
-    {% block head %}
     <meta charset="utf-8">
     <title>{% block title %}TTFROG{% endblock %}</title>
-    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css' ) }}">
     {% block styles %}
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css' ) }}">
-    {% endblock %}
     {% endblock %}
 </head>
 <body>
-    <nav>
-        {% for uri, name in breadcrumbs %}
-        <span>&nbsp; / <a href="{{ app.config.VIEW_URI }}{{ uri }}">{{ name }}</a></span>
-        {% endfor %}
-    </nav>
-    {% if session['user_id'] == 1 %}
-    Welcome, {{ user['name'] }}. [ <a href="{{ url_for('login') }}">LOGIN</a> ]
-    {% else %}
-    Welcome, <a href="{{ url_for('view', path='User/' + user['name']) }}">{{ user['name'] }}</a>.
-    {% endif %}
-    <nav>
-        Menu: 
-        <ul>
-            {% block menu %}{% endblock %}
-        </ul>
-    </nav>
-    Last Edited By: {{ page.author.name }}
-    <br>
+    <form id='data_form' method='POST'>
+        <input type="hidden" id="data_form__id" name="uid" value="{{ page.uid }}">
+        <input name='title' id="data_form__title" type='text' value="{{ page.title }}">
+        <textarea name="body" id="data_form__body">{{ page.body }}</textarea>
+    </form>
+    <main class='page'>
+        {% block nav %}
+        {% include "nav.html" %}
+        {% endblock %}
 
-    <main>
         {% for message in g.messages %}
         <div class="alert">
             {{ message }}
@@ -38,6 +25,7 @@
         {% endfor %}
         {% block content %}{% endblock %}
     </main>
+
 <footer>
     {% block footer %}
     {% endblock %}
diff --git a/src/ttfrog/themes/default/breadcrumbs.html b/src/ttfrog/themes/default/breadcrumbs.html
index e69de29..f3644c1 100644
--- a/src/ttfrog/themes/default/breadcrumbs.html
+++ b/src/ttfrog/themes/default/breadcrumbs.html
@@ -0,0 +1,3 @@
+<div class='breadcrumbs'>
+<a href="{{ url_for('index') }}">Home</a>{% for (uri, name) in breadcrumbs %}.<a href="{{ uri }}">{{ name }}</a>{% endfor %}
+</div>
diff --git a/src/ttfrog/themes/default/login.html b/src/ttfrog/themes/default/login.html
new file mode 100644
index 0000000..48cfd48
--- /dev/null
+++ b/src/ttfrog/themes/default/login.html
@@ -0,0 +1,12 @@
+
+{% extends "base.html" %}
+{% block content %}
+    <form method='POST'>
+        <h1>Login</h1>
+        Username: <input type="text" name="username">
+        <br>
+        Password: <input type="password" name="password">
+        <br>
+        <input type="submit">
+    </form>
+{% endblock %}
diff --git a/src/ttfrog/themes/default/nav.html b/src/ttfrog/themes/default/nav.html
new file mode 100644
index 0000000..f970e09
--- /dev/null
+++ b/src/ttfrog/themes/default/nav.html
@@ -0,0 +1,45 @@
+<nav>
+    <ul class="container">
+        <li><a href='{{ root.uri }}'>Home</a></li>
+    {% for subpage in root.members %}
+        {% if user.can_read(subpage) %}
+        <li><a href="{{ url_for('view', path=subpage.uri) }}">{{ subpage.name }}</a></li>
+        {% endif %}
+    {% endfor %}
+    <li class='user'>
+        {% if user.name == 'guest' %}
+        Welcome, {{ user.name }}. [ <a href="{{ url_for('login') }}">Login</a> ]
+        {% else %}
+        Welcome, <a href="{{ url_for('view', path=user.uri) }}">{{ user.name }}</a>.
+        [<a href="{{ url_for('logout') }}">Logout</a>]
+        {% endif %}
+    </li>
+    <!--
+    <li class='dropdown'>
+      <a href='#'>Pages <i class="fa fa-angle-down"></i></a>
+      <div class='mega-menu'>
+      	<div class="container">
+          <div class="item">
+              <h3>Home Page</h3>
+              <ul>
+                <li><a href='#'>Home Page No #1</a></li>
+                <li><a href='#'>Home Page No #2</a></li>
+                <li><a href='#'>Home Page No #3</a></li>
+                <li><a href='#'>Home Page No #4</a></li>
+
+              </ul>
+          </div>
+        <</div>
+    </li>
+    -->
+    </ul>
+</nav>
+<menu>
+    <ul class="container">
+    {% for member in page.members %}
+        {% if user.can_read(member) %}
+        <li><a href="{{ app.config.VIEW_URI }}{{ member.uri }}">{{ member.name }}</a></li>
+        {% endif %}
+    {% endfor %}
+    </ul>
+</menu>
diff --git a/src/ttfrog/themes/default/page.html b/src/ttfrog/themes/default/page.html
index cd42749..a70cf41 100644
--- a/src/ttfrog/themes/default/page.html
+++ b/src/ttfrog/themes/default/page.html
@@ -1,26 +1,34 @@
 {% extends "base.html" %}
 
-{% block menu %}
-    {% for member in page.members %}
-    <li><a href="{{ app.config.VIEW_URI }}{{ member.uri }}">{{ member.name }}</a></li>
-    {% endfor %}
+{% block styles %}
+  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
 {% endblock %}
+
 {% block content %}
-    <form method='POST'>
-        <input type="hidden" name="uid" value="{{ page.uid }}">
-        <h1>{{ page.doc_id }}: <input name='title' type='text' value="{{ page.title }}"></h1>
-            <h3>{{ app.config.VIEW_URI }}{{ page.parent.uri if page.parent else "/" }} <input name='stub' type='text' value='{{ page.stub }}'></h3>
-        <textarea name='body'>{{ page.body }}</textarea>
-        <input type=submit>
-    </form>
+<form id="editor_form">
 
-    <pre>
-    {{ page }}
-    </pre>
-    
-    <pre>
-    {{ app.web.config }}
-    </pre>
+ <h1><input name='title' type='text' value="{{ page.title }}"></h1>
+{% include "breadcrumbs.html" %}
 
+<div id='page_body'></div>
+
+</form>
 {% endblock %}
 
+
+
+{% block scripts %}
+  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
+  <script>
+
+    const editor = new toastui.Editor({
+        el: document.querySelector('#page_body'),
+        initialEditType: 'wysiwyg',
+        initialValue: document.getElementById("data_form__body").value,
+        previewStyle: 'tab',
+        usageStatistics: false
+    });
+    editor.getMarkdown();
+    console.log(editor);
+  </script>
+{% endblock %}
diff --git a/src/ttfrog/themes/default/static/site.css b/src/ttfrog/themes/default/static/site.css
new file mode 100644
index 0000000..3fc4a25
--- /dev/null
+++ b/src/ttfrog/themes/default/static/site.css
@@ -0,0 +1,142 @@
+html {
+    height:100%;
+    padding: 0px;
+    margin: 0px; 
+}
+
+body {
+    display: block;
+	margin: 0px 20px;
+    font-family: sans-serif;
+    width: calc(100%; - 20px);
+    height: 100%;
+}
+
+a {text-decoration: none;}
+
+.container {
+	margin: auto;
+	width: 100%;
+}
+
+ul {
+	padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+	list-style: none;
+}
+
+nav {
+	background: #0ca0d6;
+	font-size: 0;
+	position: relative;
+    
+}
+
+nav > ul > li {
+	display: inline-block;
+  	font-size: 14px;
+  	padding: 0 15px;
+  	position: relative;
+}
+
+nav > ul > li > a {
+	color: #fff;
+  	display: inline-block;
+  	padding: 20px 0;
+  	border-bottom: 3px solid transparent;
+    transition: all .3s ease;
+}
+nav > ul > li:hover > a {
+	color: #444; 
+  	border-bottom: 3px solid #444;
+}
+
+.mega-menu {
+	background: #eee;
+  	visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s, opacity 0.5s linear;
+  	position: absolute;
+  	left: 0;
+  	width: 100%;
+    padding-bottom: 20px;
+}
+.mega-menu h3 {color: #444;}
+
+.mega-menu .container {
+    display: flex;
+}
+.mega-menu .item {
+	flex-grow: 1;
+    margin: 0 10px;
+}
+.mega-menu .item img {
+    width: 100%;
+}
+.mega-menu a {
+	border-bottom: 1px solid #ddd;
+  	color: #4ea3d8;
+  	display: block;
+  	padding: 10px 0;
+}
+.mega-menu a:hover {color: #2d6a91;}
+
+
+.dropdown {position: static;}
+
+.dropdown:hover .mega-menu {
+    visibility: visible;
+    opacity: 1;
+}
+
+
+.breadcrumbs  {
+  	font-size: 14px;
+    margin-bottom: 10px;
+}
+
+main {
+    display: table;
+    width: 100%;
+    height: 100%;
+}
+
+#data_form {
+    display: none;
+}
+
+main h1 {
+    padding: 0px;
+    margin: 0px;
+}
+main h1 > input {
+    border: none;
+    font-size: inherit;
+    font-weight: inherit;
+    width: 100%;
+    border-bottom: 1px dotted #000;
+    margin-bottom: 0px;
+}
+
+#editor_form {
+    display: table;
+    width: 100%;
+}
+
+#page_body {
+    display: inline;
+}
+
+
+.toastui-editor-main-container {
+    display: contents;
+}
+
+.toastui-editor-defaultUI, 
+.toastui-editor-contents {
+    border: 0px !important;
+    padding: 0px !important;
+    margin: 0px !important;
+}
+
