diff --git a/_config.yml b/_config.yml
index 52c904c..c921f06 100644
--- a/_config.yml
+++ b/_config.yml
@@ -37,6 +37,10 @@ exclude:
   - node_modules/
   - workspace.code-workspace
 
+# Include Files
+include:
+  - assets/
+
 # General Information
 title: Xaymar
 email: info@xaymar.com
diff --git a/_includes/blocks/_base.liquid b/_includes/blocks/_base.liquid
index 011ec59..207b8b2 100644
--- a/_includes/blocks/_base.liquid
+++ b/_includes/blocks/_base.liquid
@@ -1,3 +1,3 @@
-<div class="block block-{{ include.type }} {% if include.float %}float-{{ include.float }}{% endif %}">
+<div class="block block-{{ include.type }} {% if include.float %}float float-{{ include.float }}{% else %}float-clear{% endif %}">
 	{{ include.content }}
 </div>
diff --git a/_includes/blocks/column.liquid b/_includes/blocks/column.liquid
new file mode 100644
index 0000000..a410d32
--- /dev/null
+++ b/_includes/blocks/column.liquid
@@ -0,0 +1,6 @@
+{% capture content %}
+<div class="content">
+	{{ include.content }}
+</div>
+{% endcapture %}
+{% include blocks/_base.liquid type="column" content=content %}
diff --git a/_includes/blocks/columns.liquid b/_includes/blocks/columns.liquid
new file mode 100644
index 0000000..7739a92
--- /dev/null
+++ b/_includes/blocks/columns.liquid
@@ -0,0 +1,6 @@
+{% capture content %}
+<div class="content {% if include.valign %}valign-{{include.valign}}{% else %}valign-stretch{% endif %} {% if include.halign %}halign-{{include.halign}}{% else %}halign-stretch{% endif %}" style="grid-template-columns: repeat({{ include.columns | default: 1 }}, 1fr);">
+	{{ include.content }}
+</div>
+{% endcapture %}
+{% include blocks/_base.liquid type="columns" content=content %}
diff --git a/_includes/blocks/heading.liquid b/_includes/blocks/heading.liquid
index 51c1f0c..77f4381 100644
--- a/_includes/blocks/heading.liquid
+++ b/_includes/blocks/heading.liquid
@@ -3,4 +3,4 @@
 	{{ include.content }}
 </p>
 {% endcapture %}
-{% include blocks/_base.liquid type=heading content=content %}
+{% include blocks/_base.liquid type="heading" content=content %}
diff --git a/_includes/blocks/list.liquid b/_includes/blocks/list.liquid
index 1d65112..d6bee23 100644
--- a/_includes/blocks/list.liquid
+++ b/_includes/blocks/list.liquid
@@ -11,4 +11,4 @@
 </ul>
 {% endif %}
 {% endcapture %}
-{% include blocks/_base.liquid type=list content=content %}
+{% include blocks/_base.liquid type="list" content=content %}
diff --git a/_includes/blocks/paragraph.liquid b/_includes/blocks/paragraph.liquid
index 00fa125..89823a2 100644
--- a/_includes/blocks/paragraph.liquid
+++ b/_includes/blocks/paragraph.liquid
@@ -3,4 +3,4 @@
 	{{ include.content }}
 </p>
 {% endcapture %}
-{% include blocks/_base.liquid type=paragraph content=content %}
+{% include blocks/_base.liquid type="paragraph" content=content %}
diff --git a/_includes/header.liquid b/_includes/header.liquid
index 3df04d0..b322707 100644
--- a/_includes/header.liquid
+++ b/_includes/header.liquid
@@ -6,7 +6,8 @@
 			<figcaption>{{ site.title }}</figcaption>
 		</div>
 	</a>
-	<nav class="navigation" role="navigation">
+	<a id="navigation-toggle">≡</a>
+	<nav id="navigation" class="navigation" role="navigation">
 {% include navigation.liquid data=site.data.navigation %}
 	</nav>
 </div>
diff --git a/_includes/navigation.liquid b/_includes/navigation.liquid
index d09b9d2..7e1f14b 100644
--- a/_includes/navigation.liquid
+++ b/_includes/navigation.liquid
@@ -2,11 +2,15 @@
 {% for entry in include.data %}
 	<li id="{{ entry[0] }}" class="entry {% if entry[1].entries != nil %}has-menu {% endif %}">
 	{% if entry[1].url != nil %}
-		<a href="{{ entry[1].url | absolute_url }}" {% if entry[1].blank %}target="_blank"{% endif %}>
+		<a class="item" href="{{ entry[1].url | absolute_url }}" {% if entry[1].blank %}target="_blank"{% endif %}>
+	{% else %}
+		<span class="item">
 	{% endif %}
 		{{ entry[1].name }}
 	{% if entry[1].url != nil %}
 		</a>
+	{% else %}
+		</span>
 	{% endif %}
 	{% if entry[1].entries != nil %}
 		{% assign data=entry[1].entries %}
diff --git a/_includes/page_end.liquid b/_includes/page_end.liquid
index faf65ca..9e18ef4 100644
--- a/_includes/page_end.liquid
+++ b/_includes/page_end.liquid
@@ -1,3 +1,4 @@
 		</div>
 	</body>
+	<script src="{{ site.xaymar.data.js | absolute_url }}"></script>
 </html>
diff --git a/_includes/page_start.liquid b/_includes/page_start.liquid
index 9d61336..74c296d 100644
--- a/_includes/page_start.liquid
+++ b/_includes/page_start.liquid
@@ -44,6 +44,7 @@
 		<meta property="og:video" content="{{ page.video }}" />
 {% endif %}
 		<meta property="article:published_time" content="{{ page.date | default: site.time | date_to_xmlschema }}" />
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel="icon" href="{{ site.xaymar.data.logo | absolute_url }}">
 		<link rel="stylesheet" href="{{ site.xaymar.data.css | absolute_url }}">
 		<link rel="alternate" type="application/rss+xml" href="{{ site.xaymar.data.rss | absolute_url }}">
diff --git a/_posts/1993/1993-07-21-lorem-ipsum.html b/_posts/1993/1993-07-21-lorem-ipsum.html
new file mode 100644
index 0000000..75ff30f
--- /dev/null
+++ b/_posts/1993/1993-07-21-lorem-ipsum.html
@@ -0,0 +1,34 @@
+---
+title: Lorem Ipsum Dolor Sit Amet
+category: Test
+tags: [Test]
+---
+
+{% capture content %}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consequat mauris lorem, in auctor sapien tristique et. Quisque vestibulum in nisl sit amet dictum. Nulla eu neque sit amet ante ullamcorper tempus. Vestibulum molestie lorem tempus ex consequat, ac mattis leo pulvinar. Maecenas id sapien vel felis volutpat congue. Donec et massa ex. Integer rutrum libero dui, at pulvinar magna hendrerit et. Fusce vel mauris porta nunc elementum eleifend. Mauris posuere placerat condimentum.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
+
+{% capture content %}
+Mauris ac efficitur massa, sit amet molestie felis. Proin eget efficitur elit, eget feugiat tortor. Suspendisse faucibus rhoncus aliquet. Maecenas in libero auctor, pretium felis non, placerat quam. Praesent quam ligula, tristique commodo justo non, eleifend blandit sem. Aenean quis augue ac dui elementum condimentum ut auctor mauris. Sed eu aliquet arcu. Ut at nunc lacinia, efficitur ligula ac, consequat elit. Cras ante nibh, elementum non euismod id, rutrum imperdiet dui. Cras mattis velit nec pretium ullamcorper. Quisque eu bibendum mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris elementum erat eget sem condimentum, vel laoreet libero convallis. Sed gravida tortor fermentum ipsum lacinia, ut faucibus lectus porta. Nunc mattis dignissim felis nec vehicula.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
+
+{% capture columns %}
+{% capture column %}
+{% capture content %}
+Vestibulum euismod egestas dapibus. Sed ut mollis purus. Sed scelerisque vulputate nisl, eget fringilla magna aliquam non. Nam id arcu rhoncus, hendrerit felis cursus, suscipit metus. Fusce pretium tortor eget tellus convallis sodales. Aenean at aliquet urna, et pulvinar tortor. Nulla malesuada vel tellus vel feugiat.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
+{% endcapture %}{% include blocks/column.liquid content=column %}
+{% capture column %}
+{% capture content %}
+Vestibulum euismod egestas dapibus. Sed ut mollis purus. Sed scelerisque vulputate nisl, eget fringilla magna aliquam non. Nam id arcu rhoncus, hendrerit felis cursus, suscipit metus. Fusce pretium tortor eget tellus convallis sodales. Aenean at aliquet urna, et pulvinar tortor. Nulla malesuada vel tellus vel feugiat.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
+{% endcapture %}{% include blocks/column.liquid content=column %}
+{% endcapture %}{% include blocks/columns.liquid content=columns columns=2 %}
+
+{% capture content %}
+Morbi in pulvinar mi. Nam dignissim ut augue sed placerat. Vestibulum ipsum odio, fringilla et molestie at, laoreet tristique ipsum. Proin lacinia lectus est, ut gravida ipsum aliquam sit amet. Donec pulvinar rutrum risus, eget posuere ipsum tempor id. Nullam quis nisi nec mauris interdum bibendum non eget magna. Pellentesque accumsan egestas cursus. Donec vestibulum pulvinar est. Etiam eleifend in quam non hendrerit. Cras felis sem, eleifend at luctus id, iaculis vulputate elit. Vivamus porttitor rutrum metus. Proin turpis ante, ultrices consequat libero id, placerat pellentesque ante. Vestibulum eget luctus elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tempus suscipit felis, ut egestas erat varius at.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
+
+{% capture content %}
+Etiam tellus dolor, pretium eu metus vel, venenatis dictum justo. Mauris urna nunc, euismod eget mattis ac, posuere sit amet nunc. Donec sollicitudin enim et ligula commodo, at tempor lacus rhoncus. Suspendisse rhoncus metus ut metus pellentesque sagittis. Phasellus commodo tortor metus, sed rutrum leo eleifend vitae. Curabitur convallis sollicitudin nisl eget malesuada. Fusce dapibus felis nec ipsum rutrum, sit amet sagittis sem ornare. Nulla quam lorem, vestibulum sed sapien id, cursus dapibus dolor. Nullam interdum massa et tellus varius, vel placerat quam eleifend.
+{% endcapture %}{% include blocks/paragraph.liquid content=content %}
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 32c5100..18d09f5 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -6,7 +6,7 @@ $theme-content-color: hsl($theme-hue, 0%, 90%);
 $theme-header-logo-height: 90px;
 $theme-header-background: hsl($theme-hue, 0%, 7.5%);
 $theme-header-color: hsl($theme-hue, 100%, 99%);
-$theme-menu-background: $theme-header-background;
+$theme-menu-background: hsl($theme-hue, 0%, 6.5%);
 $theme-menu-color: hsl($theme-hue, 0%, 85%);
 $theme-menu-color-active: hsl($theme-hue, 0%, 100%);
 $theme-article-background: hsl($theme-hue, 50%, 10%);
@@ -35,8 +35,7 @@ $theme-breadcrumbs-link-color-active: hsl($theme-hue, 100%, 85%);
 }
 
 html {
-	// Font
-	font-size: 1.05rem;
+	font-size: 16pt;
 }
 
 body {
@@ -45,6 +44,7 @@ body {
 	background: $theme-content-background;
 
 	// Font
+	font-size: 1.0em;
 	font-family: "Roboto", sans-serif;
     text-rendering: optimizelegibility;
 	color: $theme-content-color;
diff --git a/_sass/_block-columns.scss b/_sass/_block-columns.scss
new file mode 100644
index 0000000..0e232b3
--- /dev/null
+++ b/_sass/_block-columns.scss
@@ -0,0 +1,69 @@
+// --------------------------------------------------------------------------------
+// Columns
+// --------------------------------------------------------------------------------
+.block-columns {
+}
+.block-columns > .content {
+	display: grid;
+}
+
+// Columns: Horizontal Alignment
+.block-columns > .content.halign-start,
+.block-columns > .content.halign-left {
+	align-items: start;
+}
+
+.block-columns > .content.halign-end,
+.block-columns > .content.halign-right {
+	align-items: end;
+}
+
+.block-columns > .content.halign-center,
+.block-columns > .content.halign-middle {
+	align-items: center;
+}
+
+.block-columns > .content.halign-baseline,
+.block-columns > .content.halign-text {
+	align-items: baseline;
+}
+
+.block-columns > .content.halign-stretch,
+.block-columns > .content.halign-fill {
+	align-items: stretch;
+}
+
+.block-columns > .content.valign-start,
+.block-columns > .content.valign-left {
+	justify-items: start;
+}
+
+.block-columns > .content.valign-end,
+.block-columns > .content.valign-right {
+	justify-items: end;
+}
+
+.block-columns > .content.valign-center,
+.block-columns > .content.valign-middle {
+	justify-items: center;
+}
+
+.block-columns > .content.valign-baseline,
+.block-columns > .content.valign-text {
+	justify-items: baseline;
+}
+
+.block-columns > .content.valign-stretch,
+.block-columns > .content.valign-fill {
+	justify-items: stretch;
+}
+
+// --------------------------------------------------------------------------------
+// Individual Column
+// --------------------------------------------------------------------------------
+.block-column {
+}
+
+.block-column ~ .block-column {
+	margin-top: 0;
+}
diff --git a/_sass/_blocks.scss b/_sass/_blocks.scss
index 53f1b24..b6c90f4 100644
--- a/_sass/_blocks.scss
+++ b/_sass/_blocks.scss
@@ -1,42 +1,32 @@
 .block {
 	padding: 0;
 	margin: 0;
+	overflow: auto;
 }
 
 .block ~ .block {
 	margin-top: 1.25em;
 }
 
+.block.float {
+	margin-top: 0;
+}
+
 .block > .content {
 	padding: 0;
 	margin: 0;
 }
 
+.float {}
 .float-left {
 	float: left;
 }
-
 .float-right {
 	float: right;
 }
 
-.clear-left {
-	clear: left;
-}
-
-.clear-right {
-	clear: right;
-}
-
-.clear {
+.float-clear {
 	clear: both;
 }
 
-
-.block-columns {
-	display: grid;
-}
-
-.block-columns > .block-column {
-
-}
+@import "_block-columns.scss";
diff --git a/_sass/_content.scss b/_sass/_content.scss
index 52db822..b101688 100644
--- a/_sass/_content.scss
+++ b/_sass/_content.scss
@@ -1,10 +1,8 @@
 body > .content {
-	$pad-h: 1rem;
 	max-width: $theme-width;
 	margin-left: auto;
 	margin-right: auto;
-	padding: 0 $pad-h;
-	width: calc(100% - #{$pad-h} * 2);
+	padding: 0;
 }
 
 @import "_breadcrumbs.scss";
diff --git a/_sass/_header.scss b/_sass/_header.scss
index 7fd9480..a28b458 100644
--- a/_sass/_header.scss
+++ b/_sass/_header.scss
@@ -25,28 +25,34 @@
 	}
 }
 
-body > .header {
+// --------------------------------------------------------------------------------
+// Header
+// --------------------------------------------------------------------------------
+#header {
 	padding: 5px;
 	background: $theme-header-background;
 	color: $theme-header-color;
 }
 
-body > .header > .content {
+#header > .content {
 	display: grid;
-	grid-template-columns: auto 1fr;
+	grid-template-columns: min-content auto;
 	max-width: $theme-width;
 	margin-left: auto;
 	margin-right: auto;
 }
 
-body > .header > .content .logo {
+// --------------------------------------------------------------------------------
+// Header > Logo
+// --------------------------------------------------------------------------------
+#header > .content .logo {
 	display: grid;
 	grid-template-columns: auto 1fr;
-	margin: 0 2em 0 0;
+	margin: 0 20px 0 0;
 	padding: 0;
 }
 
-body > .header > .content .logo > .icon {
+#header > .content .logo > .icon {
 	justify-self: stretch;
 	align-self: stretch;
 	height: 90px;
@@ -54,7 +60,7 @@ body > .header > .content .logo > .icon {
 	padding: 0;
 }
 
-body > .header > .content .logo > figcaption {
+#header > .content .logo > figcaption {
 	justify-self: left;
 	align-self: center;
 	margin: 0;
@@ -66,82 +72,140 @@ body > .header > .content .logo > figcaption {
 	letter-spacing: .25ch;
 }
 
-body > .header > .content .navigation {
-	justify-self: left;
-	align-self: center;
-	font-size: 0.9rem;
+// --------------------------------------------------------------------------------
+// Header > Navigation
+// --------------------------------------------------------------------------------
+#navigation-toggle {
+	display: none;
+}
+
+#navigation {
+	font-size: 1.0rem;
 	color: $theme-menu-color;
 }
 
-body > .header > .content .navigation > .menu {
+#navigation .menu {
 	list-style: none inside;
-	text-transform: uppercase;
-	padding: 0px;
-	margin: 0;
 }
 
-body > .header > .content .navigation > .menu > li {
-	display: inline-block;
-	padding: 0px .5em 0px 0px;
-	margin: 0;
+#navigation .menu > .entry > .item {
+	color: $theme-menu-color;
 }
-
-body > .header > .content .navigation > .menu > li > .menu {
-	display: block;
-	position: absolute;
-	padding: 0px .5em;
-	margin: 0;
-	cursor: auto;
-	list-style: none inside;
-	background: $theme-menu-background;
-	box-shadow: 2px 2px 5px 0px black;
-}
-
-body > .header > .content .navigation > .menu > li > .menu > li {
-	display: block;
-	padding: 0 .5em;
-	margin: 0;
-}
-
-body > .header > .content .navigation .menu > li > a {
-	display: block;
-	padding: .5em 0;
-}
-
-body > .header > .content .navigation .menu li {
-	color: hsl(0, 0%, 75%);
-}
-
-body > .header > .content .navigation .menu li.has-menu {
-	cursor: pointer;
-}
-
-body > .header > .content .navigation .menu li.has-menu > .menu {
-	position: absolute;
-	pointer-events: none;
-	display: block;
-	animation-name: menu_hide;
-	animation-duration: 100ms;
-	animation-fill-mode: both;
-	animation-direction: reverse;
-}
-
-body > .header > .content .navigation .menu li.has-menu:hover > .menu,
-body > .header > .content .navigation .menu li.has-menu > .menu:hover,
-body > .header > .content .navigation .menu li.has-menu:focus > .menu,
-body > .header > .content .navigation .menu li.has-menu > .menu:focus,
-body > .header > .content .navigation .menu li.has-menu:active > .menu,
-body > .header > .content .navigation .menu li.has-menu > .menu:active {
-	display: block;
-	pointer-events: auto;
-	animation-name: menu_show;
-	animation-duration: 100ms;
-	animation-fill-mode: both;
-	animation-direction: normal;
-}
-
-body > .header > .content .navigation .menu li:hover,
-body > .header > .content .navigation .menu li:active,
-body > .header > .content .navigation .menu li:focus {
+#navigation .menu > .entry > .item:hover,
+#navigation .menu > .entry > .item:active,
+#navigation .menu > .entry > .item:focus {
 	color: $theme-menu-color-active;
 }
+
+// Responsive Layout
+@media (pointer: coarse), (max-width: 767px) {
+	#navigation-toggle {
+		justify-self: stretch;
+		align-self: center;
+		display: block;
+		margin: 0;
+		padding: 0rem 2.5rem;
+		text-align: right;
+		font-size: 3.0rem;
+		color: $theme-menu-color;
+	}
+
+	#navigation {
+		grid-column-start: span 2;
+	}
+
+	// Show/Hide menu
+	#navigation {
+		display: none;
+	}
+	#navigation.open {
+		display: block;
+	}
+
+	#navigation .menu {
+		margin: 0;
+		padding: 0;
+		background: transparent;
+	}
+
+	#navigation .menu .menu {
+		padding-left: 1.5rem;
+		background: $theme-menu-background;
+		box-shadow: 2px 2px 5px 0px black;
+	}
+
+	#navigation .item {
+		display: block;
+		padding: .5rem .5rem;
+		//border: 1px solid $theme-menu-background;
+		transition: color 250ms linear;
+	}
+}
+
+@media (pointer: fine) and (min-width: 768px) {
+	#navigation {
+		justify-self: stretch;
+		align-self: center;
+	}
+
+	#navigation > .menu {
+		text-transform: uppercase;
+		padding: 0px;
+		margin: 0;
+	}
+
+	#navigation > .menu > li {
+		display: inline-block;
+		padding: 0px .5em 0px 0px;
+		margin: 0;
+	}
+
+	#navigation > .menu > li > .menu {
+		display: block;
+		position: absolute;
+		padding: 0px .5em;
+		margin: 0;
+		cursor: auto;
+		background: $theme-menu-background;
+		box-shadow: 2px 2px 5px 0px black;
+	}
+
+	#navigation > .menu > li > .menu > li {
+		display: block;
+		padding: 0 .5em;
+		margin: 0;
+	}
+
+	#navigation .menu > li > a {
+		display: block;
+		padding: .5em 0;
+	}
+
+	#navigation .menu li.has-menu {
+		cursor: pointer;
+	}
+
+	#navigation .menu li.has-menu > .menu {
+		position: absolute;
+		pointer-events: none;
+		display: block;
+		animation-name: menu_hide;
+		animation-duration: 100ms;
+		animation-fill-mode: both;
+		animation-direction: reverse;
+	}
+
+	#navigation .menu li.has-menu:hover > .menu,
+	#navigation .menu li.has-menu > .menu:hover,
+	#navigation .menu li.has-menu:focus > .menu,
+	#navigation .menu li.has-menu > .menu:focus,
+	#navigation .menu li.has-menu:active > .menu,
+	#navigation .menu li.has-menu > .menu:active {
+		display: block;
+		pointer-events: auto;
+		animation-name: menu_show;
+		animation-duration: 100ms;
+		animation-fill-mode: both;
+		animation-direction: normal;
+	}
+}
diff --git a/assets/site.js b/assets/site.js
index acb4599..bf3a8ef 100644
--- a/assets/site.js
+++ b/assets/site.js
@@ -1,3 +1,9 @@
----
-# Ensure Jekyll converts this file.
----
+(function() {
+    'use strict';
+
+	// Support for Mobile Devices
+	document.querySelector("#navigation-toggle").addEventListener("click", (ev) => {
+		document.querySelector("#header #navigation").classList.toggle("open");
+	});
+
+})();