diff --git a/src/main/resources/templates/content/left-sidebar.html b/src/main/resources/templates/content/left-sidebar.html
index ca509c8..af0dd9b 100644
--- a/src/main/resources/templates/content/left-sidebar.html
+++ b/src/main/resources/templates/content/left-sidebar.html
@@ -1,214 +1,100 @@
-<!DOCTYPE HTML>
-<!--
-	Arcana by HTML5 UP
-	html5up.net | @ajlkn
-	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
--->
-<html>
-	<head>
-		<title>Left Sidebar - Arcana by HTML5 UP</title>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-		<link rel="stylesheet" href="assets/css/main.css" />
-	</head>
-	<body class="is-preload">
-		<div id="page-wrapper">
+<!DOCTYPE html>
+<html
+		xmlns:th="http://www.thymeleaf.org"
+		xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+		layout:decorate="~{layout/default_layout}">
+<th:block layout:fragment="head">
+	<script type="text/javascript" th:src="@{/js/blog.js}"></script>
+	<link th:href="@{/css/blog.css}" rel="stylesheet" />
+	<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
+	<script type="text/javascript" th:src="@{/js/test.js}"></script>
+	<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
+	<script th:inline="javascript">
+		document.addEventListener("DOMContentLoaded", onLoaded);
+		function goToViewer(item) {
+			let uploadUrl = getMainPath() + "/blog/viewer/"+item.attributes['data'].value;
+			location.href = uploadUrl
+		}
+	</script>
+</th:block>
+<th:block layout:fragment="content" id="content">
 
-			<!-- Header -->
-				<div id="header">
+	<!-- Main -->
+	<section class="wrapper style1">
+		<div class="container">
+			<div class="row gtr-200">
+				<div class="col-4 col-12-narrower">
+					<div id="sidebar">
 
-					<!-- Logo -->
-						<h1><a href="index.html" id="logo">Arcana <em>by HTML5 UP</em></a></h1>
+						<!-- Sidebar -->
 
-					<!-- Nav -->
-						<nav id="nav">
-							<ul>
-								<li><a href="index.html">Home</a></li>
-								<li>
-									<a href="#">Dropdown</a>
-									<ul>
-										<li><a href="#">Lorem dolor</a></li>
-										<li><a href="#">Magna phasellus</a></li>
-										<li><a href="#">Etiam sed tempus</a></li>
-										<li>
-											<a href="#">Submenu</a>
-											<ul>
-												<li><a href="#">Lorem dolor</a></li>
-												<li><a href="#">Phasellus magna</a></li>
-												<li><a href="#">Magna phasellus</a></li>
-												<li><a href="#">Etiam nisl</a></li>
-												<li><a href="#">Veroeros feugiat</a></li>
-											</ul>
-										</li>
-										<li><a href="#">Veroeros feugiat</a></li>
-									</ul>
-								</li>
-								<li class="current"><a href="left-sidebar">Left Sidebar</a></li>
-								<li><a href="right-sidebar">Right Sidebar</a></li>
-								<li><a href="two-sidebar">Two Sidebar</a></li>
-								<li><a href="no-sidebar">No Sidebar</a></li>
+						<section>
+							<h3>Just a Subheading</h3>
+							<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
+								Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
+								Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis et nisi etiam.</p>
+							<footer>
+								<a href="#" class="button">Continue Reading</a>
+							</footer>
+						</section>
+
+						<section>
+							<h3>Another Subheading</h3>
+							<ul class="links">
+								<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
+								<li><a href="#">Ornare in hendrerit in lectus</a></li>
+								<li><a href="#">Semper mod quis eget mi dolore</a></li>
+								<li><a href="#">Consequat etiam lorem phasellus</a></li>
+								<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
+								<li><a href="#">Semper mod quisturpis nisi</a></li>
 							</ul>
-						</nav>
+							<footer>
+								<a href="#" class="button">More Random Links</a>
+							</footer>
+						</section>
 
-				</div>
-
-			<!-- Main -->
-				<section class="wrapper style1">
-					<div class="container">
-						<div class="row gtr-200">
-							<div class="col-4 col-12-narrower">
-								<div id="sidebar">
-
-									<!-- Sidebar -->
-
-										<section>
-											<h3>Just a Subheading</h3>
-											<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
-											Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
-											Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis et nisi etiam.</p>
-											<footer>
-												<a href="#" class="button">Continue Reading</a>
-											</footer>
-										</section>
-
-										<section>
-											<h3>Another Subheading</h3>
-											<ul class="links">
-												<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
-												<li><a href="#">Ornare in hendrerit in lectus</a></li>
-												<li><a href="#">Semper mod quis eget mi dolore</a></li>
-												<li><a href="#">Consequat etiam lorem phasellus</a></li>
-												<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
-												<li><a href="#">Semper mod quisturpis nisi</a></li>
-											</ul>
-											<footer>
-												<a href="#" class="button">More Random Links</a>
-											</footer>
-										</section>
-
-								</div>
-							</div>
-							<div class="col-8  col-12-narrower imp-narrower">
-								<div id="content">
-
-									<!-- Content -->
-
-										<article>
-											<header>
-												<h2>Left Sidebar</h2>
-												<p>Sidebar on the left, content on the right.</p>
-											</header>
-
-											<span class="image featured"><img src="images/banner.jpg" alt="" /></span>
-
-											<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
-											Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
-											Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis nisi
-											consequat etiam lorem ipsum dolor sit amet nullam.</p>
-
-											<h3>And Yet Another Subheading</h3>
-											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam risus, at tempus
-											justo. Sed dictum rutrum massa eu volutpat. Quisque vitae hendrerit sem. Pellentesque lorem felis,
-											ultricies a bibendum id, bibendum sit amet nisl. Mauris et lorem quam. Maecenas rutrum imperdiet
-											vulputate. Nulla quis nibh ipsum, sed egestas justo. Morbi ut ante mattis orci convallis tempor.
-											Etiam a lacus a lacus pharetra porttitor quis accumsan odio. Sed vel euismod nisi. Etiam convallis
-											rhoncus dui quis euismod. Maecenas lorem tellus, congue et condimentum ac, ullamcorper non sapien.
-											Donec sagittis massa et leo semper a scelerisque metus faucibus. Morbi congue mattis mi.
-											Phasellus sed nisl vitae risus tristique volutpat. Cras rutrum commodo luctus.</p>
-
-											<p>Phasellus odio risus, faucibus et viverra vitae, eleifend ac purus. Praesent mattis, enim
-											quis hendrerit porttitor, sapien tortor viverra magna, sit amet rhoncus nisl lacus nec arcu.
-											Suspendisse laoreet metus ut metus imperdiet interdum aliquam justo tincidunt. Mauris dolor urna,
-											fringilla vel malesuada ac, dignissim eu mi. Praesent mollis massa ac nulla pretium pretium.
-											Maecenas tortor mauris, consectetur pellentesque dapibus eget, tincidunt vitae arcu.
-											Vestibulum purus augue, tincidunt sit amet iaculis id, porta eu purus.</p>
-										</article>
-
-								</div>
-							</div>
-						</div>
 					</div>
-				</section>
-
-			<!-- Footer -->
-				<div id="footer">
-					<div class="container">
-						<div class="row">
-							<section class="col-3 col-6-narrower col-12-mobilep">
-								<h3>Links to Stuff</h3>
-								<ul class="links">
-									<li><a href="#">Mattis et quis rutrum</a></li>
-									<li><a href="#">Suspendisse amet varius</a></li>
-									<li><a href="#">Sed et dapibus quis</a></li>
-									<li><a href="#">Rutrum accumsan dolor</a></li>
-									<li><a href="#">Mattis rutrum accumsan</a></li>
-									<li><a href="#">Suspendisse varius nibh</a></li>
-									<li><a href="#">Sed et dapibus mattis</a></li>
-								</ul>
-							</section>
-							<section class="col-3 col-6-narrower col-12-mobilep">
-								<h3>More Links to Stuff</h3>
-								<ul class="links">
-									<li><a href="#">Duis neque nisi dapibus</a></li>
-									<li><a href="#">Sed et dapibus quis</a></li>
-									<li><a href="#">Rutrum accumsan sed</a></li>
-									<li><a href="#">Mattis et sed accumsan</a></li>
-									<li><a href="#">Duis neque nisi sed</a></li>
-									<li><a href="#">Sed et dapibus quis</a></li>
-									<li><a href="#">Rutrum amet varius</a></li>
-								</ul>
-							</section>
-							<section class="col-6 col-12-narrower">
-								<h3>Get In Touch</h3>
-								<form>
-									<div class="row gtr-50">
-										<div class="col-6 col-12-mobilep">
-											<input type="text" name="name" id="name" placeholder="Name" />
-										</div>
-										<div class="col-6 col-12-mobilep">
-											<input type="email" name="email" id="email" placeholder="Email" />
-										</div>
-										<div class="col-12">
-											<textarea name="message" id="message" placeholder="Message" rows="5"></textarea>
-										</div>
-										<div class="col-12">
-											<ul class="actions">
-												<li><input type="submit" class="button alt" value="Send Message" /></li>
-											</ul>
-										</div>
-									</div>
-								</form>
-							</section>
-						</div>
-					</div>
-
-					<!-- Icons -->
-						<ul class="icons">
-							<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
-							<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
-							<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
-							<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
-							<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
-						</ul>
-
-					<!-- Copyright -->
-						<div class="copyright">
-							<ul class="menu">
-								<li>&copy; Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
-							</ul>
-						</div>
-
 				</div>
+				<div class="col-8  col-12-narrower imp-narrower">
+					<div id="content">
 
+						<!-- Content -->
+
+						<article>
+							<header>
+								<h2>Left Sidebar</h2>
+								<p>Sidebar on the left, content on the right.</p>
+							</header>
+
+							<span class="image featured"><img src="images/banner.jpg" alt="" /></span>
+
+							<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
+								Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
+								Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis nisi
+								consequat etiam lorem ipsum dolor sit amet nullam.</p>
+
+							<h3>And Yet Another Subheading</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam risus, at tempus
+								justo. Sed dictum rutrum massa eu volutpat. Quisque vitae hendrerit sem. Pellentesque lorem felis,
+								ultricies a bibendum id, bibendum sit amet nisl. Mauris et lorem quam. Maecenas rutrum imperdiet
+								vulputate. Nulla quis nibh ipsum, sed egestas justo. Morbi ut ante mattis orci convallis tempor.
+								Etiam a lacus a lacus pharetra porttitor quis accumsan odio. Sed vel euismod nisi. Etiam convallis
+								rhoncus dui quis euismod. Maecenas lorem tellus, congue et condimentum ac, ullamcorper non sapien.
+								Donec sagittis massa et leo semper a scelerisque metus faucibus. Morbi congue mattis mi.
+								Phasellus sed nisl vitae risus tristique volutpat. Cras rutrum commodo luctus.</p>
+
+							<p>Phasellus odio risus, faucibus et viverra vitae, eleifend ac purus. Praesent mattis, enim
+								quis hendrerit porttitor, sapien tortor viverra magna, sit amet rhoncus nisl lacus nec arcu.
+								Suspendisse laoreet metus ut metus imperdiet interdum aliquam justo tincidunt. Mauris dolor urna,
+								fringilla vel malesuada ac, dignissim eu mi. Praesent mollis massa ac nulla pretium pretium.
+								Maecenas tortor mauris, consectetur pellentesque dapibus eget, tincidunt vitae arcu.
+								Vestibulum purus augue, tincidunt sit amet iaculis id, porta eu purus.</p>
+						</article>
+
+					</div>
+				</div>
+			</div>
 		</div>
-
-		<!-- Scripts -->
-			<script src="assets/js/jquery.min.js"></script>
-			<script src="assets/js/jquery.dropotron.min.js"></script>
-			<script src="assets/js/browser.min.js"></script>
-			<script src="assets/js/breakpoints.min.js"></script>
-			<script src="assets/js/util.js"></script>
-			<script src="assets/js/main.js"></script>
-
-	</body>
-</html>
\ No newline at end of file
+	</section>
+</th:block>
+</html>
diff --git a/src/main/resources/templates/content/no-sidebar.html b/src/main/resources/templates/content/no-sidebar.html
index 34d05b8..87d0285 100644
--- a/src/main/resources/templates/content/no-sidebar.html
+++ b/src/main/resources/templates/content/no-sidebar.html
@@ -1,57 +1,23 @@
-<!DOCTYPE HTML>
-<!--
-	Arcana by HTML5 UP
-	html5up.net | @ajlkn
-	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
--->
-<html>
-	<head>
-		<title>No Sidebar - Arcana by HTML5 UP</title>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-		<link rel="stylesheet" href="assets/css/main.css" />
-	</head>
-	<body class="is-preload">
-		<div id="page-wrapper">
-
-			<!-- Header -->
-				<div id="header">
-
-					<!-- Logo -->
-						<h1><a href="index.html" id="logo">Arcana <em>by HTML5 UP</em></a></h1>
-
-					<!-- Nav -->
-						<nav id="nav">
-							<ul>
-								<li><a href="index.html">Home</a></li>
-								<li>
-									<a href="#">Dropdown</a>
-									<ul>
-										<li><a href="#">Lorem dolor</a></li>
-										<li><a href="#">Magna phasellus</a></li>
-										<li><a href="#">Etiam sed tempus</a></li>
-										<li>
-											<a href="#">Submenu</a>
-											<ul>
-												<li><a href="#">Lorem dolor</a></li>
-												<li><a href="#">Phasellus magna</a></li>
-												<li><a href="#">Magna phasellus</a></li>
-												<li><a href="#">Etiam nisl</a></li>
-												<li><a href="#">Veroeros feugiat</a></li>
-											</ul>
-										</li>
-										<li><a href="#">Veroeros feugiat</a></li>
-									</ul>
-								</li>
-								<li><a href="left-sidebar">Left Sidebar</a></li>
-								<li><a href="right-sidebar">Right Sidebar</a></li>
-								<li><a href="two-sidebar">Two Sidebar</a></li>
-								<li class="current"><a href="no-sidebar">No Sidebar</a></li>
-							</ul>
-						</nav>
-
-				</div>
-
+<!DOCTYPE html>
+<html
+		xmlns:th="http://www.thymeleaf.org"
+		xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+		layout:decorate="~{layout/default_layout}">
+<th:block layout:fragment="head">
+	<script type="text/javascript" th:src="@{/js/blog.js}"></script>
+	<link th:href="@{/css/blog.css}" rel="stylesheet" />
+	<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
+	<script type="text/javascript" th:src="@{/js/test.js}"></script>
+	<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
+	<script th:inline="javascript">
+		document.addEventListener("DOMContentLoaded", onLoaded);
+		function goToViewer(item) {
+			let uploadUrl = getMainPath() + "/blog/viewer/"+item.attributes['data'].value;
+			location.href = uploadUrl
+		}
+	</script>
+</th:block>
+<th:block layout:fragment="content" id="content">
 			<!-- Main -->
 				<section class="wrapper style1">
 					<div class="container">
@@ -93,86 +59,5 @@
 						</div>
 					</div>
 				</section>
-
-			<!-- Footer -->
-				<div id="footer">
-					<div class="container">
-						<div class="row">
-							<section class="col-3 col-6-narrower col-12-mobilep">
-								<h3>Links to Stuff</h3>
-								<ul class="links">
-									<li><a href="#">Mattis et quis rutrum</a></li>
-									<li><a href="#">Suspendisse amet varius</a></li>
-									<li><a href="#">Sed et dapibus quis</a></li>
-									<li><a href="#">Rutrum accumsan dolor</a></li>
-									<li><a href="#">Mattis rutrum accumsan</a></li>
-									<li><a href="#">Suspendisse varius nibh</a></li>
-									<li><a href="#">Sed et dapibus mattis</a></li>
-								</ul>
-							</section>
-							<section class="col-3 col-6-narrower col-12-mobilep">
-								<h3>More Links to Stuff</h3>
-								<ul class="links">
-									<li><a href="#">Duis neque nisi dapibus</a></li>
-									<li><a href="#">Sed et dapibus quis</a></li>
-									<li><a href="#">Rutrum accumsan sed</a></li>
-									<li><a href="#">Mattis et sed accumsan</a></li>
-									<li><a href="#">Duis neque nisi sed</a></li>
-									<li><a href="#">Sed et dapibus quis</a></li>
-									<li><a href="#">Rutrum amet varius</a></li>
-								</ul>
-							</section>
-							<section class="col-6 col-12-narrower">
-								<h3>Get In Touch</h3>
-								<form>
-									<div class="row gtr-50">
-										<div class="col-6 col-12-mobilep">
-											<input type="text" name="name" id="name" placeholder="Name" />
-										</div>
-										<div class="col-6 col-12-mobilep">
-											<input type="email" name="email" id="email" placeholder="Email" />
-										</div>
-										<div class="col-12">
-											<textarea name="message" id="message" placeholder="Message" rows="5"></textarea>
-										</div>
-										<div class="col-12">
-											<ul class="actions">
-												<li><input type="submit" class="button alt" value="Send Message" /></li>
-											</ul>
-										</div>
-									</div>
-								</form>
-							</section>
-						</div>
-					</div>
-
-					<!-- Icons -->
-						<ul class="icons">
-							<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
-							<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
-							<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
-							<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
-							<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
-						</ul>
-
-					<!-- Copyright -->
-						<div class="copyright">
-							<ul class="menu">
-								<li>&copy; Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
-							</ul>
-						</div>
-
-				</div>
-
-		</div>
-
-		<!-- Scripts -->
-			<script src="assets/js/jquery.min.js"></script>
-			<script src="assets/js/jquery.dropotron.min.js"></script>
-			<script src="assets/js/browser.min.js"></script>
-			<script src="assets/js/breakpoints.min.js"></script>
-			<script src="assets/js/util.js"></script>
-			<script src="assets/js/main.js"></script>
-
-	</body>
-</html>
\ No newline at end of file
+			</th:block>
+</html>
diff --git a/src/main/resources/templates/content/right-sidebar.html b/src/main/resources/templates/content/right-sidebar.html
index 655c0fd..a56da74 100644
--- a/src/main/resources/templates/content/right-sidebar.html
+++ b/src/main/resources/templates/content/right-sidebar.html
@@ -1,56 +1,23 @@
-<!DOCTYPE HTML>
-<!--
-	Arcana by HTML5 UP
-	html5up.net | @ajlkn
-	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
--->
-<html>
-	<head>
-		<title>Right Sidebar - Arcana by HTML5 UP</title>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-		<link rel="stylesheet" href="assets/css/main.css" />
-	</head>
-	<body class="is-preload">
-		<div id="page-wrapper">
-
-			<!-- Header -->
-				<div id="header">
-
-					<!-- Logo -->
-						<h1><a href="index.html" id="logo">Arcana <em>by HTML5 UP</em></a></h1>
-
-					<!-- Nav -->
-						<nav id="nav">
-							<ul>
-								<li><a href="index.html">Home</a></li>
-								<li>
-									<a href="#">Dropdown</a>
-									<ul>
-										<li><a href="#">Lorem dolor</a></li>
-										<li><a href="#">Magna phasellus</a></li>
-										<li><a href="#">Etiam sed tempus</a></li>
-										<li>
-											<a href="#">Submenu</a>
-											<ul>
-												<li><a href="#">Lorem dolor</a></li>
-												<li><a href="#">Phasellus magna</a></li>
-												<li><a href="#">Magna phasellus</a></li>
-												<li><a href="#">Etiam nisl</a></li>
-												<li><a href="#">Veroeros feugiat</a></li>
-											</ul>
-										</li>
-										<li><a href="#">Veroeros feugiat</a></li>
-									</ul>
-								</li>
-								<li><a href="left-sidebar">Left Sidebar</a></li>
-								<li class="current"><a href="right-sidebar">Right Sidebar</a></li>
-								<li><a href="two-sidebar">Two Sidebar</a></li>
-								<li><a href="no-sidebar">No Sidebar</a></li>
-							</ul>
-						</nav>
-
-				</div>
+<!DOCTYPE html>
+<html
+		xmlns:th="http://www.thymeleaf.org"
+		xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+		layout:decorate="~{layout/default_layout}">
+<th:block layout:fragment="head">
+	<script type="text/javascript" th:src="@{/js/blog.js}"></script>
+	<link th:href="@{/css/blog.css}" rel="stylesheet" />
+	<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
+	<script type="text/javascript" th:src="@{/js/test.js}"></script>
+	<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
+	<script th:inline="javascript">
+		document.addEventListener("DOMContentLoaded", onLoaded);
+		function goToViewer(item) {
+			let uploadUrl = getMainPath() + "/blog/viewer/"+item.attributes['data'].value;
+			location.href = uploadUrl
+		}
+	</script>
+</th:block>
+<th:block layout:fragment="content" id="content">-->
 
 			<!-- Main -->
 				<section class="wrapper style1">
@@ -129,86 +96,5 @@
 						</div>
 					</div>
 				</section>
-
-			<!-- Footer -->
-				<div id="footer">
-					<div class="container">
-						<div class="row">
-							<section class="col-3 col-6-narrower col-12-mobilep">
-								<h3>Links to Stuff</h3>
-								<ul class="links">
-									<li><a href="#">Mattis et quis rutrum</a></li>
-									<li><a href="#">Suspendisse amet varius</a></li>
-									<li><a href="#">Sed et dapibus quis</a></li>
-									<li><a href="#">Rutrum accumsan dolor</a></li>
-									<li><a href="#">Mattis rutrum accumsan</a></li>
-									<li><a href="#">Suspendisse varius nibh</a></li>
-									<li><a href="#">Sed et dapibus mattis</a></li>
-								</ul>
-							</section>
-							<section class="col-3 col-6-narrower col-12-mobilep">
-								<h3>More Links to Stuff</h3>
-								<ul class="links">
-									<li><a href="#">Duis neque nisi dapibus</a></li>
-									<li><a href="#">Sed et dapibus quis</a></li>
-									<li><a href="#">Rutrum accumsan sed</a></li>
-									<li><a href="#">Mattis et sed accumsan</a></li>
-									<li><a href="#">Duis neque nisi sed</a></li>
-									<li><a href="#">Sed et dapibus quis</a></li>
-									<li><a href="#">Rutrum amet varius</a></li>
-								</ul>
-							</section>
-							<section class="col-6 col-12-narrower">
-								<h3>Get In Touch</h3>
-								<form>
-									<div class="row gtr-50">
-										<div class="col-6 col-12-mobilep">
-											<input type="text" name="name" id="name" placeholder="Name" />
-										</div>
-										<div class="col-6 col-12-mobilep">
-											<input type="email" name="email" id="email" placeholder="Email" />
-										</div>
-										<div class="col-12">
-											<textarea name="message" id="message" placeholder="Message" rows="5"></textarea>
-										</div>
-										<div class="col-12">
-											<ul class="actions">
-												<li><input type="submit" class="button alt" value="Send Message" /></li>
-											</ul>
-										</div>
-									</div>
-								</form>
-							</section>
-						</div>
-					</div>
-
-					<!-- Icons -->
-						<ul class="icons">
-							<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
-							<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
-							<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
-							<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
-							<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
-						</ul>
-
-					<!-- Copyright -->
-						<div class="copyright">
-							<ul class="menu">
-								<li>&copy; Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
-							</ul>
-						</div>
-
-				</div>
-
-		</div>
-
-		<!-- Scripts -->
-			<script src="assets/js/jquery.min.js"></script>
-			<script src="assets/js/jquery.dropotron.min.js"></script>
-			<script src="assets/js/browser.min.js"></script>
-			<script src="assets/js/breakpoints.min.js"></script>
-			<script src="assets/js/util.js"></script>
-			<script src="assets/js/main.js"></script>
-
-	</body>
-</html>
\ No newline at end of file
+			</th:block>
+</html>
diff --git a/src/main/resources/templates/content/two-sidebar.html b/src/main/resources/templates/content/two-sidebar.html
index 8b4a232..a413978 100644
--- a/src/main/resources/templates/content/two-sidebar.html
+++ b/src/main/resources/templates/content/two-sidebar.html
@@ -1,242 +1,129 @@
-<!DOCTYPE HTML>
-<!--
-	Arcana by HTML5 UP
-	html5up.net | @ajlkn
-	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
--->
-<html>
-	<head>
-		<title>Two Sidebar - Arcana by HTML5 UP</title>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-		<link rel="stylesheet" href="assets/css/main.css" />
-	</head>
-	<body class="is-preload">
-		<div id="page-wrapper">
+<!DOCTYPE html>
+<html
+		xmlns:th="http://www.thymeleaf.org"
+		xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+		layout:decorate="~{layout/default_layout}">
+<th:block layout:fragment="head">
+	<script type="text/javascript" th:src="@{/js/blog.js}"></script>
+	<link th:href="@{/css/blog.css}" rel="stylesheet" />
+	<script type="text/javascript" th:src="@{/js/toast-ui-view.js}"></script>
+	<script type="text/javascript" th:src="@{/js/test.js}"></script>
+	<link th:href="@{/css/toast-ui-dark.css}" rel="stylesheet" />
+	<script th:inline="javascript">
+		document.addEventListener("DOMContentLoaded", onLoaded);
+		function goToViewer(item) {
+			let uploadUrl = getMainPath() + "/blog/viewer/"+item.attributes['data'].value;
+			location.href = uploadUrl
+		}
+	</script>
+</th:block>
+<th:block layout:fragment="content" id="content">
 
-			<!-- Header -->
-				<div id="header">
+	<!-- Main -->
+	<section class="wrapper style1">
+		<div class="container">
+			<div class="row gtr-200">
+				<div class="col-3 col-12-narrower">
+					<div id="sidebar1">
 
-					<!-- Logo -->
-						<h1><a href="index.html" id="logo">Arcana <em>by HTML5 UP</em></a></h1>
+						<!-- Sidebar 1 -->
 
-					<!-- Nav -->
-						<nav id="nav">
-							<ul>
-								<li><a href="index.html">Home</a></li>
-								<li>
-									<a href="#">Dropdown</a>
-									<ul>
-										<li><a href="#">Lorem dolor</a></li>
-										<li><a href="#">Magna phasellus</a></li>
-										<li><a href="#">Etiam sed tempus</a></li>
-										<li>
-											<a href="#">Submenu</a>
-											<ul>
-												<li><a href="#">Lorem dolor</a></li>
-												<li><a href="#">Phasellus magna</a></li>
-												<li><a href="#">Magna phasellus</a></li>
-												<li><a href="#">Etiam nisl</a></li>
-												<li><a href="#">Veroeros feugiat</a></li>
-											</ul>
-										</li>
-										<li><a href="#">Veroeros feugiat</a></li>
-									</ul>
-								</li>
-								<li><a href="left-sidebar">Left Sidebar</a></li>
-								<li><a href="right-sidebar">Right Sidebar</a></li>
-								<li class="current"><a href="two-sidebar">Two Sidebar</a></li>
-								<li><a href="no-sidebar">No Sidebar</a></li>
+						<section>
+							<h3>Just a Subheading</h3>
+							<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
+								Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
+								Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis et nisi etiam.</p>
+							<footer>
+								<a href="#" class="button">Continue Reading</a>
+							</footer>
+						</section>
+
+						<section>
+							<h3>Another Subheading</h3>
+							<ul class="links">
+								<li><a href="#">Amet turpis, feugiat sit amet</a></li>
+								<li><a href="#">Ornare in hendrerit lectus</a></li>
+								<li><a href="#">Semper mod quis eget dolore</a></li>
+								<li><a href="#">Consequat lorem phasellus</a></li>
+								<li><a href="#">Amet turpis feugiat amet</a></li>
+								<li><a href="#">Semper mod quisturpis nisi</a></li>
 							</ul>
-						</nav>
+							<footer>
+								<a href="#" class="button">More Random Links</a>
+							</footer>
+						</section>
 
+					</div>
 				</div>
+				<div class="col-6 col-12-narrower imp-narrower">
+					<div id="content">
 
-			<!-- Main -->
-				<section class="wrapper style1">
-					<div class="container">
-						<div class="row gtr-200">
-							<div class="col-3 col-12-narrower">
-								<div id="sidebar1">
+						<!-- Content -->
 
-									<!-- Sidebar 1 -->
+						<article>
+							<header>
+								<h2>Two Sidebar</h2>
+								<p>Yup. Two sidebars at the same time.</p>
+							</header>
 
-										<section>
-											<h3>Just a Subheading</h3>
-											<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
-											Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
-											Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis et nisi etiam.</p>
-											<footer>
-												<a href="#" class="button">Continue Reading</a>
-											</footer>
-										</section>
+							<span class="image featured"><img src="images/banner.jpg" alt="" /></span>
 
-										<section>
-											<h3>Another Subheading</h3>
-											<ul class="links">
-												<li><a href="#">Amet turpis, feugiat sit amet</a></li>
-												<li><a href="#">Ornare in hendrerit lectus</a></li>
-												<li><a href="#">Semper mod quis eget dolore</a></li>
-												<li><a href="#">Consequat lorem phasellus</a></li>
-												<li><a href="#">Amet turpis feugiat amet</a></li>
-												<li><a href="#">Semper mod quisturpis nisi</a></li>
-											</ul>
-											<footer>
-												<a href="#" class="button">More Random Links</a>
-											</footer>
-										</section>
+							<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
+								Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
+								Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis nisi
+								consequat etiam lorem ipsum dolor sit amet nullam.</p>
 
-								</div>
-							</div>
-							<div class="col-6 col-12-narrower imp-narrower">
-								<div id="content">
+							<h3>And Yet Another Subheading</h3>
+							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam risus, at tempus
+								justo. Sed dictum rutrum massa eu volutpat. Quisque vitae hendrerit sem. Pellentesque lorem felis,
+								ultricies a bibendum id, bibendum sit amet nisl. Mauris et lorem quam. Maecenas rutrum imperdiet
+								rhoncus dui quis euismod. Maecenas lorem tellus, congue et condimentum ac, ullamcorper non sapien.
+								Donec sagittis massa et leo semper a scelerisque metus faucibus. Morbi congue mattis mi.
+								Phasellus sed nisl vitae risus tristique volutpat. Cras rutrum commodo luctus.</p>
 
-									<!-- Content -->
+							<p>Phasellus odio risus, faucibus et viverra vitae, eleifend ac purus. Praesent mattis, enim
+								quis hendrerit porttitor, sapien tortor viverra magna, sit amet rhoncus nisl lacus nec arcu.
+								Maecenas tortor mauris, consectetur pellentesque dapibus eget, tincidunt vitae arcu.
+								Vestibulum purus augue, tincidunt sit amet iaculis id, porta eu purus.</p>
+						</article>
 
-										<article>
-											<header>
-												<h2>Two Sidebar</h2>
-												<p>Yup. Two sidebars at the same time.</p>
-											</header>
-
-											<span class="image featured"><img src="images/banner.jpg" alt="" /></span>
-
-											<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
-											Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
-											Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis nisi
-											consequat etiam lorem ipsum dolor sit amet nullam.</p>
-
-											<h3>And Yet Another Subheading</h3>
-											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac quam risus, at tempus
-											justo. Sed dictum rutrum massa eu volutpat. Quisque vitae hendrerit sem. Pellentesque lorem felis,
-											ultricies a bibendum id, bibendum sit amet nisl. Mauris et lorem quam. Maecenas rutrum imperdiet
-											rhoncus dui quis euismod. Maecenas lorem tellus, congue et condimentum ac, ullamcorper non sapien.
-											Donec sagittis massa et leo semper a scelerisque metus faucibus. Morbi congue mattis mi.
-											Phasellus sed nisl vitae risus tristique volutpat. Cras rutrum commodo luctus.</p>
-
-											<p>Phasellus odio risus, faucibus et viverra vitae, eleifend ac purus. Praesent mattis, enim
-											quis hendrerit porttitor, sapien tortor viverra magna, sit amet rhoncus nisl lacus nec arcu.
-											Maecenas tortor mauris, consectetur pellentesque dapibus eget, tincidunt vitae arcu.
-											Vestibulum purus augue, tincidunt sit amet iaculis id, porta eu purus.</p>
-										</article>
-
-								</div>
-							</div>
-							<div class="col-3 col-12-narrower">
-								<div id="sidebar2">
-
-									<!-- Sidebar 2 -->
-
-										<section>
-											<h3>Another Subheading</h3>
-											<ul class="links">
-												<li><a href="#">Amet turpis, feugiat sit amet</a></li>
-												<li><a href="#">Ornare in hendrerit lectus</a></li>
-												<li><a href="#">Semper mod quis eget dolore</a></li>
-												<li><a href="#">Consequat lorem phasellus</a></li>
-												<li><a href="#">Amet turpis feugiat amet</a></li>
-												<li><a href="#">Semper mod quisturpis nisi</a></li>
-											</ul>
-											<footer>
-												<a href="#" class="button">More Random Links</a>
-											</footer>
-										</section>
-
-										<section>
-											<h3>Just a Subheading</h3>
-											<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
-											Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
-											Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis et nisi etiam.</p>
-											<footer>
-												<a href="#" class="button">Continue Reading</a>
-											</footer>
-										</section>
-
-								</div>
-							</div>
-						</div>
 					</div>
-				</section>
+				</div>
+				<div class="col-3 col-12-narrower">
+					<div id="sidebar2">
 
-			<!-- Footer -->
-				<div id="footer">
-					<div class="container">
-						<div class="row">
-							<section class="col-3 col-6-narrower col-12-mobilep">
-								<h3>Links to Stuff</h3>
-								<ul class="links">
-									<li><a href="#">Mattis et quis rutrum</a></li>
-									<li><a href="#">Suspendisse amet varius</a></li>
-									<li><a href="#">Sed et dapibus quis</a></li>
-									<li><a href="#">Rutrum accumsan dolor</a></li>
-									<li><a href="#">Mattis rutrum accumsan</a></li>
-									<li><a href="#">Suspendisse varius nibh</a></li>
-									<li><a href="#">Sed et dapibus mattis</a></li>
-								</ul>
-							</section>
-							<section class="col-3 col-6-narrower col-12-mobilep">
-								<h3>More Links to Stuff</h3>
-								<ul class="links">
-									<li><a href="#">Duis neque nisi dapibus</a></li>
-									<li><a href="#">Sed et dapibus quis</a></li>
-									<li><a href="#">Rutrum accumsan sed</a></li>
-									<li><a href="#">Mattis et sed accumsan</a></li>
-									<li><a href="#">Duis neque nisi sed</a></li>
-									<li><a href="#">Sed et dapibus quis</a></li>
-									<li><a href="#">Rutrum amet varius</a></li>
-								</ul>
-							</section>
-							<section class="col-6 col-12-narrower">
-								<h3>Get In Touch</h3>
-								<form>
-									<div class="row gtr-50">
-										<div class="col-6 col-12-mobilep">
-											<input type="text" name="name" id="name" placeholder="Name" />
-										</div>
-										<div class="col-6 col-12-mobilep">
-											<input type="email" name="email" id="email" placeholder="Email" />
-										</div>
-										<div class="col-12">
-											<textarea name="message" id="message" placeholder="Message" rows="5"></textarea>
-										</div>
-										<div class="col-12">
-											<ul class="actions">
-												<li><input type="submit" class="button alt" value="Send Message" /></li>
-											</ul>
-										</div>
-									</div>
-								</form>
-							</section>
-						</div>
-					</div>
+						<!-- Sidebar 2 -->
 
-					<!-- Icons -->
-						<ul class="icons">
-							<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
-							<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
-							<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
-							<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
-							<li><a href="#" class="icon brands fa-google-plus-g"><span class="label">Google+</span></a></li>
-						</ul>
-
-					<!-- Copyright -->
-						<div class="copyright">
-							<ul class="menu">
-								<li>&copy; Untitled. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
+						<section>
+							<h3>Another Subheading</h3>
+							<ul class="links">
+								<li><a href="#">Amet turpis, feugiat sit amet</a></li>
+								<li><a href="#">Ornare in hendrerit lectus</a></li>
+								<li><a href="#">Semper mod quis eget dolore</a></li>
+								<li><a href="#">Consequat lorem phasellus</a></li>
+								<li><a href="#">Amet turpis feugiat amet</a></li>
+								<li><a href="#">Semper mod quisturpis nisi</a></li>
 							</ul>
-						</div>
+							<footer>
+								<a href="#" class="button">More Random Links</a>
+							</footer>
+						</section>
 
+						<section>
+							<h3>Just a Subheading</h3>
+							<p>Phasellus quam turpis, feugiat sit amet ornare in, hendrerit in lectus.
+								Praesent semper mod quis eget mi. Etiam eu ante risus. Aliquam erat volutpat.
+								Aliquam luctus et mattis lectus sit amet pulvinar. Nam turpis et nisi etiam.</p>
+							<footer>
+								<a href="#" class="button">Continue Reading</a>
+							</footer>
+						</section>
+
+					</div>
 				</div>
-
+			</div>
 		</div>
+	</section>
 
-		<!-- Scripts -->
-			<script src="assets/js/jquery.min.js"></script>
-			<script src="assets/js/jquery.dropotron.min.js"></script>
-			<script src="assets/js/browser.min.js"></script>
-			<script src="assets/js/breakpoints.min.js"></script>
-			<script src="assets/js/util.js"></script>
-			<script src="assets/js/main.js"></script>
-
-	</body>
-</html>
\ No newline at end of file
+</th:block>
+</html>
diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html
index 32a73b3..290ae89 100644
--- a/src/main/resources/templates/fragments/footer.html
+++ b/src/main/resources/templates/fragments/footer.html
@@ -64,7 +64,7 @@
       <!-- Copyright -->
       <div class="copyright">
         <ul class="menu">
-          <li>&copy;lunaticbum. All rights reserved</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
+          <li>&copy;lunaticbum  All rights reserved</li><li>Origin Design from:<a href="http://html5up.net">HTML5 UP</a></li>
         </ul>
       </div>
     </div>
