diff --git a/admin/admin.go b/admin/admin.go
index d507d40..d636a12 100644
--- a/admin/admin.go
+++ b/admin/admin.go
@@ -223,6 +223,42 @@ func (a Admin) Admin(c *gin.Context) {
 	})
 }
 
+func (a Admin) AdminDashboard(c *gin.Context) {
+	c.HTML(http.StatusOK, "admin_dashboard.html", gin.H{
+		"posts":     a.b.GetPosts(true),
+		"logged_in": a.auth.IsLoggedIn(c),
+		"is_admin":  a.auth.IsAdmin(c),
+		"version":   a.version,
+	})
+}
+
+func (a Admin) AdminPosts(c *gin.Context) {
+	c.HTML(http.StatusOK, "admin_all_posts.html", gin.H{
+		"posts":     a.b.GetPosts(true),
+		"logged_in": a.auth.IsLoggedIn(c),
+		"is_admin":  a.auth.IsAdmin(c),
+		"version":   a.version,
+	})
+}
+
+func (a Admin) AdminNewPost(c *gin.Context) {
+	c.HTML(http.StatusOK, "admin_new_post.html", gin.H{
+		"posts":     a.b.GetPosts(true),
+		"logged_in": a.auth.IsLoggedIn(c),
+		"is_admin":  a.auth.IsAdmin(c),
+		"version":   a.version,
+	})
+}
+
+func (a Admin) AdminSettings(c *gin.Context) {
+	c.HTML(http.StatusOK, "admin_settings.html", gin.H{
+		"posts":     a.b.GetPosts(true),
+		"logged_in": a.auth.IsLoggedIn(c),
+		"is_admin":  a.auth.IsAdmin(c),
+		"version":   a.version,
+	})
+}
+
 func (a Admin) Post(c *gin.Context) {
 	if !a.auth.IsAdmin(c) {
 		log.Println("IS ADMIN RETURNED FALSE")
diff --git a/admin/admin_test.go b/admin/admin_test.go
index fc6be5c..1783ee4 100644
--- a/admin/admin_test.go
+++ b/admin/admin_test.go
@@ -55,7 +55,12 @@ func TestCreatePost(t *testing.T) {
 	router.PATCH("/api/v1/posts", ad.UpdatePost)
 	router.DELETE("/api/v1/posts", ad.DeletePost)
 	router.POST("/api/v1/upload", ad.UploadFile)
+
 	router.GET("/admin", ad.Admin)
+	router.GET("/admin/dashboard", ad.AdminDashboard)
+	router.GET("/admin/posts", ad.AdminPosts)
+	router.GET("/admin/newpost", ad.AdminNewPost)
+	router.GET("/admin/settings", ad.AdminSettings)
 
 	//improper content-type
 	testPost := blog.Post{
diff --git a/goblog.go b/goblog.go
index 7f1b439..7f5194c 100644
--- a/goblog.go
+++ b/goblog.go
@@ -70,7 +70,7 @@ func main() {
 		setup_wizard()
 		err := godotenv.Load(".env")
 		if err != nil {
-			log.Println("Failed to read the .env file after the wizard, can't procced")
+			log.Println("Failed to read the .env file after the wizard, can't proceed")
 			return
 		}
 	}
@@ -174,6 +174,10 @@ func main() {
 	router.Use(static.Serve("/wp-content", static.LocalFile("www", false)))
 
 	router.GET("/admin", _admin.Admin)
+	router.GET("/admin/dashboard", _admin.AdminDashboard)
+	router.GET("/admin/posts", _admin.AdminPosts)
+	router.GET("/admin/newpost", _admin.AdminNewPost)
+	router.GET("/admin/settings", _admin.AdminSettings)
 
 	router.NoRoute(_blog.NoRoute)
 
diff --git a/templates/admin.html b/templates/admin.html
index 8ebf704..7cf2ddb 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -38,6 +38,16 @@
   </script>
 
   <div class="container">
+    <div class="nav-scroller bg-body shadow-sm">
+
+      <!-- https://getbootstrap.com/docs/5.0/examples/offcanvas-navbar/ -->
+      <nav class="nav nav-underline" aria-label="Secondary navigation">
+        <a class="nav-link" href="/admin/dashboard">Dashboard</a>
+        <a class="nav-link active" aria-current="page" href="/admin/posts">All Posts</a>
+        <a class="nav-link" href="/admin/newpost">New Post</a>
+        <a class="nav-link" href="/admin/settings">Settings</a>
+      </nav>
+    </div>
     <h1>All Posts</h1>
     <!-- <ul class="admin-posts"> -->
     <table>
diff --git a/templates/admin_all_posts.html b/templates/admin_all_posts.html
new file mode 100644
index 0000000..6958a8c
--- /dev/null
+++ b/templates/admin_all_posts.html
@@ -0,0 +1,103 @@
+{{ template "header.html" .}}
+<script type="text/javascript">
+
+    function createPost(publish) {
+        var tags = $("#tags").val().split(',')
+        for (var i = 0; i < tags.length; i++) {
+            tags[i] = {"name": tags[i].trim()}
+        }
+
+        var time = $("#created_at").val();
+        var vtime = moment.utc(time)
+
+        var post = {
+            "title": $("#title").val(),
+            "created_at": vtime,
+            "content": simplemde.value(),
+            "tags": tags,
+            "draft": !publish,
+        }
+        console.log("POST: " + JSON.stringify(post));
+
+        $.ajax({
+            url: "/api/v1/posts",
+            type: "post",
+            dataType: "json",
+            contentType: "application/json",
+            success: function(json) {
+                var time = moment(json.created_at);
+                var slug = json.slug;
+                window.location.href="/posts/" + time.format("YYYY/MM/DD") + "/" + slug;
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                alert("ERROR: " + textStatus + " " + errorThrown);
+            },
+            data: JSON.stringify(post)
+        });
+    }
+</script>
+
+<div class="container">
+    <div class="nav-scroller bg-body shadow-sm">
+
+        <!-- https://getbootstrap.com/docs/5.0/examples/offcanvas-navbar/ -->
+        <nav class="nav nav-underline" aria-label="Secondary navigation">
+            <a class="nav-link" href="/admin/dashboard">Dashboard</a>
+            <a class="nav-link active" aria-current="page" href="/admin/posts">All Posts</a>
+            <a class="nav-link" href="/admin/newpost">New Post</a>
+            <a class="nav-link" href="/admin/settings">Settings</a>
+        </nav>
+    </div>
+    <h1>All Posts</h1>
+    <!-- <ul class="admin-posts"> -->
+    <table>
+        {{ range .posts }}
+        <tr class="striped--light-gray">
+            <!-- <li> -->
+            <td><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a></td>
+            <td>{{ .CreatedAt.Format "01/02/06" }}</td>
+            <td>{{ range .Tags }}
+                <a href="{{ .Permalink }}" title="{{ .Name}}">#{{ .Name }}</a>
+                {{ end }}
+            </td>
+            <!-- </li> -->
+        </tr>
+        {{ end }}
+    </table>
+    <!--</ul>-->
+
+</div> <!-- / container -->
+
+<script>
+    var simplemde = new SimpleMDE({ element: $("#content")[0] });
+
+    //https://github.com/sparksuite/simplemde-markdown-editor/issues/328
+    inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
+        uploadUrl: "/api/v1/upload",
+        onFileUploadResponse: function(xhr) {
+            var result = JSON.parse(xhr.responseText);
+            console.log(result);
+            filename = result[this.settings.jsonFieldName];
+            console.log(filename);
+            console.log(this.filenameTag);
+            if (result && filename) {
+                var newValue;
+                if (typeof this.settings.urlText === 'function') {
+                    newValue = this.settings.urlText.call(this, filename, result);
+                } else {
+                    newValue = this.settings.urlText.replace(this.filenameTag, filename);
+                }
+                var text = this.editor.getValue().replace(this.lastValue, newValue);
+                this.editor.setValue(text);
+                this.settings.onFileUploaded.call(this, filename);
+            }
+            return false;
+        }
+    });
+
+    $(function () {
+        $('#datetimepicker1').datetimepicker({timezone: "UTC"});
+    });
+</script>
+
+{{ template "footer.html" .}}
diff --git a/templates/admin_dashboard.html b/templates/admin_dashboard.html
new file mode 100644
index 0000000..866a435
--- /dev/null
+++ b/templates/admin_dashboard.html
@@ -0,0 +1,56 @@
+{{ template "header.html" .}}
+<script type="text/javascript">
+
+    function createPost(publish) {
+        var tags = $("#tags").val().split(',')
+        for (var i = 0; i < tags.length; i++) {
+            tags[i] = {"name": tags[i].trim()}
+        }
+
+        var time = $("#created_at").val();
+        var vtime = moment.utc(time)
+
+        var post = {
+            "title": $("#title").val(),
+            "created_at": vtime,
+            "content": simplemde.value(),
+            "tags": tags,
+            "draft": !publish,
+        }
+        console.log("POST: " + JSON.stringify(post));
+
+        $.ajax({
+            url: "/api/v1/posts",
+            type: "post",
+            dataType: "json",
+            contentType: "application/json",
+            success: function(json) {
+                var time = moment(json.created_at);
+                var slug = json.slug;
+                window.location.href="/posts/" + time.format("YYYY/MM/DD") + "/" + slug;
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                alert("ERROR: " + textStatus + " " + errorThrown);
+            },
+            data: JSON.stringify(post)
+        });
+    }
+</script>
+
+<div class="container">
+    <div class="nav-scroller bg-body shadow-sm">
+
+        <!-- https://getbootstrap.com/docs/5.0/examples/offcanvas-navbar/ -->
+        <nav class="nav nav-underline" aria-label="Secondary navigation">
+            <a class="nav-link active" aria-current="page" href="/admin/dashboard">Dashboard</a>
+            <a class="nav-link" href="/admin/posts">All Posts</a>
+            <a class="nav-link" href="/admin/newpost">New Post</a>
+            <a class="nav-link" href="/admin/settings">Settings</a>
+        </nav>
+    </div>
+    <h1>Dashboard</h1>
+    <p>Welcome to the admin dashboard.</p>
+
+</div> <!-- / container -->
+
+{{ template "footer.html" .}}
diff --git a/templates/admin_new_post.html b/templates/admin_new_post.html
new file mode 100644
index 0000000..f424482
--- /dev/null
+++ b/templates/admin_new_post.html
@@ -0,0 +1,130 @@
+{{ template "header.html" .}}
+<script type="text/javascript">
+
+    function createPost(publish) {
+        var tags = $("#tags").val().split(',')
+        for (var i = 0; i < tags.length; i++) {
+            tags[i] = {"name": tags[i].trim()}
+        }
+
+        var time = $("#created_at").val();
+        var vtime = moment.utc(time)
+
+        var post = {
+            "title": $("#title").val(),
+            "created_at": vtime,
+            "content": simplemde.value(),
+            "tags": tags,
+            "draft": !publish,
+        }
+        console.log("POST: " + JSON.stringify(post));
+
+        $.ajax({
+            url: "/api/v1/posts",
+            type: "post",
+            dataType: "json",
+            contentType: "application/json",
+            success: function(json) {
+                var time = moment(json.created_at);
+                var slug = json.slug;
+                window.location.href="/posts/" + time.format("YYYY/MM/DD") + "/" + slug;
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                alert("ERROR: " + textStatus + " " + errorThrown);
+            },
+            data: JSON.stringify(post)
+        });
+    }
+</script>
+
+<div class="container">
+    <div class="nav-scroller bg-body shadow-sm">
+        <!-- https://getbootstrap.com/docs/5.0/examples/offcanvas-navbar/ -->
+        <nav class="nav nav-underline" aria-label="Secondary navigation">
+            <a class="nav-link" href="/admin/dashboard">Dashboard</a>
+            <a class="nav-link" href="/admin/posts">All Posts</a>
+            <a class="nav-link active" aria-current="page" href="/admin/newpost">New Post</a>
+            <a class="nav-link" href="/admin/settings">Settings</a>
+        </nav>
+    </div>
+
+    <h1>Create post</h1>
+
+    <div class="form-group">
+        <label for="title">Title <span class="require">*</span></label>
+        <input type="text" class="form-control" name="title" id="title"/>
+    </div>
+
+    <div class="form-group">
+        <label for="slug">Tags <small>(comma-separated)</small></label>
+        <input type="text" class="form-control" name="tags" id="tags"/>
+    </div>
+
+    <div class="form-group">
+        <label for="created_at">Date Created</label>
+        <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
+            <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" id="created_at" name="created_at" value="{{ .post.CreatedAt.Format "01/02/2006 15:04:05 PM" }}"/>
+            <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
+                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <label for="content">Content <span class="require">*</span></label>
+        <div class="text-left">
+            <textarea rows="5" class="form-control" name="content" id="content"></textarea>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <p><span class="require">*</span> - required fields</p>
+    </div>
+
+    <div class="form-group">
+        <button class="btn btn-primary" onclick="createPost(false);">
+            Draft
+        </button>
+        <button class="btn btn-primary" onclick="createPost(true);">
+            Publish
+        </button>
+        <button class="btn btn-default" onClick="window.location.reload();">
+            Cancel
+        </button>
+    </div>
+
+    </div> <!-- / container -->
+
+    <script>
+        var simplemde = new SimpleMDE({ element: $("#content")[0] });
+
+        //https://github.com/sparksuite/simplemde-markdown-editor/issues/328
+        inlineAttachment.editors.codemirror4.attach(simplemde.codemirror, {
+            uploadUrl: "/api/v1/upload",
+            onFileUploadResponse: function(xhr) {
+                var result = JSON.parse(xhr.responseText);
+                console.log(result);
+                filename = result[this.settings.jsonFieldName];
+                console.log(filename);
+                console.log(this.filenameTag);
+                if (result && filename) {
+                    var newValue;
+                    if (typeof this.settings.urlText === 'function') {
+                        newValue = this.settings.urlText.call(this, filename, result);
+                    } else {
+                        newValue = this.settings.urlText.replace(this.filenameTag, filename);
+                    }
+                    var text = this.editor.getValue().replace(this.lastValue, newValue);
+                    this.editor.setValue(text);
+                    this.settings.onFileUploaded.call(this, filename);
+                }
+                return false;
+            }
+        });
+
+        $(function () {
+            $('#datetimepicker1').datetimepicker({timezone: "UTC"});
+        });
+    </script>
+
+{{ template "footer.html" .}}
\ No newline at end of file
diff --git a/templates/admin_settings.html b/templates/admin_settings.html
new file mode 100644
index 0000000..fae41dd
--- /dev/null
+++ b/templates/admin_settings.html
@@ -0,0 +1,56 @@
+{{ template "header.html" .}}
+<script type="text/javascript">
+
+    function createPost(publish) {
+        var tags = $("#tags").val().split(',')
+        for (var i = 0; i < tags.length; i++) {
+            tags[i] = {"name": tags[i].trim()}
+        }
+
+        var time = $("#created_at").val();
+        var vtime = moment.utc(time)
+
+        var post = {
+            "title": $("#title").val(),
+            "created_at": vtime,
+            "content": simplemde.value(),
+            "tags": tags,
+            "draft": !publish,
+        }
+        console.log("POST: " + JSON.stringify(post));
+
+        $.ajax({
+            url: "/api/v1/posts",
+            type: "post",
+            dataType: "json",
+            contentType: "application/json",
+            success: function(json) {
+                var time = moment(json.created_at);
+                var slug = json.slug;
+                window.location.href="/posts/" + time.format("YYYY/MM/DD") + "/" + slug;
+            },
+            error: function(jqXHR, textStatus, errorThrown) {
+                alert("ERROR: " + textStatus + " " + errorThrown);
+            },
+            data: JSON.stringify(post)
+        });
+    }
+</script>
+
+<div class="container">
+    <div class="nav-scroller bg-body shadow-sm">
+
+        <!-- https://getbootstrap.com/docs/5.0/examples/offcanvas-navbar/ -->
+        <nav class="nav nav-underline" aria-label="Secondary navigation">
+            <a class="nav-link" href="/admin/dashboard">Dashboard</a>
+            <a class="nav-link" href="/admin/posts">All Posts</a>
+            <a class="nav-link" href="/admin/newpost">New Post</a>
+            <a class="nav-link active" aria-current="page" href="/admin/settings">Settings</a>
+        </nav>
+    </div>
+    <h1>Settings</h1>
+    <p>TODO</p>
+
+</div> <!-- / container -->
+
+{{ template "footer.html" .}}