diff --git a/public/assets/img/do.svg b/public/assets/img/do.svg
new file mode 100644
index 0000000..0865d20
--- /dev/null
+++ b/public/assets/img/do.svg
@@ -0,0 +1 @@
+<svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.5887 29V23.3845C20.5836 23.3845 25.1924 17.4935 22.9053 11.2235C22.0737 8.91529 20.2024 7.05495 17.8807 6.22814C11.5739 3.9544 5.64836 8.57078 5.64836 14.4963H0C0 5.02237 9.21757 -2.38452 19.1975 0.716039C23.5637 2.05961 27.029 5.53912 28.4151 9.8799C31.5338 19.8361 24.1182 29 14.5887 29Z" fill="#0069FF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.5881 23.419H8.97437V17.838H14.5881V23.419Z" fill="#0069FF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.9739 27.7253H4.64233V23.419H8.9739V27.7253Z" fill="#0069FF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.64438 23.419H1.00586V19.8361H4.60972V23.419H4.64438Z" fill="#0069FF"/></svg>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 26d597a..5b5cd8b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,6 +19,20 @@
 	</head>
 	<body ng-app="NginxConfigIoApp" ng-controller="NginxConfigIoController" ng-csp ng-class="['layout-' + layout]">
 		<header>
+			<div ng-if="toggleLayoutVisible()" class="layout-toggle" ng-cloak>
+				<button class="btn btn-sm btn-secondary" ng-click="toggleLayout()">Layout: {{ layout }}</button>
+			</div>
+			<div ng-if="layout === 'do'" ng-cloak>
+				<nav class="do" ng-include="'partials/nav-do.html'"></nav>
+				<div class="container">
+					<div class="row">
+						<div class="col-lg-8 offset-lg-2">
+							<h1>NGINX Config</h1>
+							<h2>The easiest way to configure a performant, secure,<wbr> and stable nginx server.</h2>
+						</div>
+					</div>
+				</div>
+			</div>
 			<div class="container">
 				<div class="loader" ng-if="!masonryInit">
 					<div class="spinner">
@@ -27,7 +41,7 @@
 					</div>
 				</div>
 
-				<img src="assets/img/logo-light.svg" class="logo" alt="nginxconfig.io">
+				<img ng-if="layout === 'default'" src="assets/img/logo-light.svg" class="logo" alt="nginxconfig.io">
 
 				<div class="sites">
 					<div class="title">Sites:</div>
@@ -40,93 +54,20 @@
 					</div>
 				</div>
 
-				<div class="presets">
+				<div class="presets" ng-if="layout === 'default'">
 					<div class="title">Presets:</div>
-					<div class="group">
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-light"
-							ng-click="setPreset('frontend')"
-							ng-class="{ 'active': !isPHP() && !isPython() && !isProxy() && isIndexHTML() && isFallbackHTML() }"
-							tooltips
-							tooltip-template="• disabled PHP<br>• index.html fallback routing"
-							tooltip-side="bottom"
-						>Frontend <span ng-include="'assets/img/brands/angular.svg'"></span> <span ng-include="'assets/img/brands/react.svg'"></span> <span ng-include="'assets/img/brands/vuejs.svg'"></span></button>
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-light"
-							ng-click="setPreset('backend')"
-							ng-class="{ 'active': isPHP() && isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && !isMagento() }"
-							tooltips
-							tooltip-template="• enabled PHP<br>• index.php fallback routing"
-							tooltip-side="bottom"
-						>PHP <span ng-include="'assets/img/brands/php.svg'"></span> <span ng-include="'assets/img/brands/laravel.svg'"></span> <span ng-include="'assets/img/brands/symfony.svg'"></span> <span ng-include="'assets/img/brands/codeigniter.svg'""></span></button>
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-light"
-							ng-click="setPreset('django')"
-							ng-class="{ 'active': isPython() && isDjango() && !isRoot() }"
-							tooltips
-							tooltip-template="• enabled Python<br>• Django rules<br>• <code>root</code> disabled"
-							tooltip-side="bottom"
-						>Django <span ng-include="'assets/img/brands/python.svg'"></span><span ng-include="'assets/img/brands/django.svg'"></span></button>
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-light"
-							ng-class="{ 'active': isProxy() && !isRoot() }"
-							ng-click="setPreset('nodejs')"
-							tooltips
-							tooltip-template="• enabled reverse proxy"
-							tooltip-side="bottom"
-						>Node.js <span ng-include="'assets/img/brands/nodejs.svg'"></span></button>
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-light"
-							ng-class="{ 'active': isPHP() && isIndexHTML() && isFallbackHTML() }"
-							ng-click="setPreset('spa')"
-							tooltips
-							tooltip-template="• enabled PHP<br>• index.html fallback routing<br>• index.php API routing"
-							tooltip-side="bottom"
-						>Single-page application</button>
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-light"
-							ng-click="setPreset('wordpress')"
-							ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && isWordPress() && !isDrupal() && !isMagento() }"
-							tooltips
-							tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules"
-							tooltip-side="bottom"
-						><span ng-include="'assets/img/brands/wordpress.svg'"></span> WordPress</button>
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-light"
-							ng-click="setPreset('drupal')"
-							ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && isDrupal() && !isMagento() }"
-							tooltips
-							tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Drupal security rules"
-							tooltip-side="bottom"
-						><span ng-include="'assets/img/brands/drupal.svg'"></span> Drupal</button>
-						<button
-							type="button"
-							class="btn btn-sm btn-outline-light"
-							ng-click="setPreset('magento')"
-							ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && isMagento() }"
-							tooltips
-							tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Magento security rules"
-							tooltip-side="bottom"
-						><span ng-include="'assets/img/brands/magento.svg'"></span> Magento</button>
-					</div>
+					<div class="group" ng-include="'partials/presets.html'"></div>
 				</div>
 			</div>
 		</header>
 		<section class="tabs">
 			<div class="container">
 				<div class="row">
-					<div class="col-lg-9">
+					<div class="col-lg-9" ng-class="{ 'col-lg-12': layout === 'do' }">
 						<div class="sites" ng-include="'partials/config-site.html'"></div>
 						<div class="common" ng-include="'partials/config-global.html'"></div>
 					</div>
-					<div class="col-lg-3">
+					<div ng-if="layout !== 'do'" class="col-lg-3" ng-cloak>
 						<aside class="sidebar">
 							<div class="github">
 								<div class="github-cover">
@@ -287,6 +228,9 @@
 			gtag('js', new Date());
 			gtag('config', 'UA-3084378-31');
 		</script>
+		<script>
+			var LAYOUT = 'do';
+		</script>
 		<script src="assets/js/vendor.min.js?v=COMMIT_HASH"></script>
 		<script src="assets/js/app.min.js?v=COMMIT_HASH"></script>
 		<script async defer src="https://buttons.github.io/buttons.js"></script>
diff --git a/public/partials/nav-do.html b/public/partials/nav-do.html
new file mode 100644
index 0000000..fd6fe26
--- /dev/null
+++ b/public/partials/nav-do.html
@@ -0,0 +1,11 @@
+<div class="announcement">
+	<div class="container">
+		<span class="badge">NEW</span>
+		<a href="https://blog.digitalocean.com/introducing-memory-optimized-droplets/" target="_blank">Now available: Memory-Optimized Droplets ❯</a>
+	</div>
+</div>
+<div class="menu">
+	<div class="container">
+		<div class="logo" ng-include="'assets/img/do.svg'"></div>
+	</div>
+</div>
diff --git a/public/partials/presets.html b/public/partials/presets.html
new file mode 100644
index 0000000..25cba6a
--- /dev/null
+++ b/public/partials/presets.html
@@ -0,0 +1,72 @@
+<button
+	type="button"
+	class="btn btn-sm btn-outline-light"
+	ng-click="setPreset('frontend')"
+	ng-class="{ 'active': !isPHP() && !isPython() && !isProxy() && isIndexHTML() && isFallbackHTML() }"
+	tooltips
+	tooltip-template="• disabled PHP<br>• index.html fallback routing"
+	tooltip-side="bottom"
+>Frontend <span ng-include="'assets/img/brands/angular.svg'"></span> <span ng-include="'assets/img/brands/react.svg'"></span> <span ng-include="'assets/img/brands/vuejs.svg'"></span></button>
+<button
+	type="button"
+	class="btn btn-sm btn-outline-light"
+	ng-click="setPreset('backend')"
+	ng-class="{ 'active': isPHP() && isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && !isMagento() }"
+	tooltips
+	tooltip-template="• enabled PHP<br>• index.php fallback routing"
+	tooltip-side="bottom"
+>PHP <span ng-include="'assets/img/brands/php.svg'"></span> <span ng-include="'assets/img/brands/laravel.svg'"></span> <span ng-include="'assets/img/brands/symfony.svg'"></span> <span ng-include="'assets/img/brands/codeigniter.svg'""></span></button>
+<button
+	type="button"
+	class="btn btn-sm btn-outline-light"
+	ng-click="setPreset('django')"
+	ng-class="{ 'active': isPython() && isDjango() && !isRoot() }"
+	tooltips
+	tooltip-template="• enabled Python<br>• Django rules<br>• <code>root</code> disabled"
+	tooltip-side="bottom"
+>Django <span ng-include="'assets/img/brands/python.svg'"></span><span ng-include="'assets/img/brands/django.svg'"></span></button>
+<button
+	type="button"
+	class="btn btn-sm btn-outline-light"
+	ng-class="{ 'active': isProxy() && !isRoot() }"
+	ng-click="setPreset('nodejs')"
+	tooltips
+	tooltip-template="• enabled reverse proxy"
+	tooltip-side="bottom"
+>Node.js <span ng-include="'assets/img/brands/nodejs.svg'"></span></button>
+<button
+	type="button"
+	class="btn btn-sm btn-outline-light"
+	ng-class="{ 'active': isPHP() && isIndexHTML() && isFallbackHTML() }"
+	ng-click="setPreset('spa')"
+	tooltips
+	tooltip-template="• enabled PHP<br>• index.html fallback routing<br>• index.php API routing"
+	tooltip-side="bottom"
+>Single-page application</button>
+<button
+	type="button"
+	class="btn btn-sm btn-outline-light"
+	ng-click="setPreset('wordpress')"
+	ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && isWordPress() && !isDrupal() && !isMagento() }"
+	tooltips
+	tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules"
+	tooltip-side="bottom"
+><span ng-include="'assets/img/brands/wordpress.svg'"></span> WordPress</button>
+<button
+	type="button"
+	class="btn btn-sm btn-outline-light"
+	ng-click="setPreset('drupal')"
+	ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && isDrupal() && !isMagento() }"
+	tooltips
+	tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Drupal security rules"
+	tooltip-side="bottom"
+><span ng-include="'assets/img/brands/drupal.svg'"></span> Drupal</button>
+<button
+	type="button"
+	class="btn btn-sm btn-outline-light"
+	ng-click="setPreset('magento')"
+	ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && isMagento() }"
+	tooltips
+	tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Magento security rules"
+	tooltip-side="bottom"
+><span ng-include="'assets/img/brands/magento.svg'"></span> Magento</button>
diff --git a/resources/js/app.js b/resources/js/app.js
index 6489bca..91743cb 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -701,6 +701,14 @@
 			}
 		};
 
+		$scope.toggleLayoutVisible = function() {
+			return $window.location.hostname !== 'nginxconfig.io';
+		};
+
+		$scope.toggleLayout = function() {
+			$scope.layout = ($scope.layout === 'default' ? 'do' : 'default');
+		};
+
 
 
 		///////////////////////////
diff --git a/resources/scss/_header.scss b/resources/scss/_header.scss
index e53171b..6587a2b 100644
--- a/resources/scss/_header.scss
+++ b/resources/scss/_header.scss
@@ -7,6 +7,7 @@
 }
 
 header {
+	position: relative;
 	background-color: #000;
 	padding: 0.5rem 0;
 	text-align: center;
@@ -14,6 +15,13 @@ header {
 	color: #fff;
 	font-size: 2.2rem;
 
+	.layout-toggle {
+		position: absolute;
+		right: 10px;
+		top: 0;
+		z-index: 100;
+	}
+
 	.container {
 		position: relative;
 	}
diff --git a/resources/scss/app.scss b/resources/scss/app.scss
index 5c8c3d0..999ae90 100644
--- a/resources/scss/app.scss
+++ b/resources/scss/app.scss
@@ -16,3 +16,4 @@
 
 @import 'utilities';
 
+@import 'layout/do';
diff --git a/resources/scss/layout/_do.scss b/resources/scss/layout/_do.scss
new file mode 100644
index 0000000..5794393
--- /dev/null
+++ b/resources/scss/layout/_do.scss
@@ -0,0 +1,56 @@
+body.layout-do {
+	header {
+		padding: 0;
+		background-color: #031b4e;
+
+		nav {
+			background-color: #fff;
+			color: #5b6987;
+			text-align: left;
+
+			.announcement {
+				font-size: 0.875rem;
+				padding: 10px 0;
+				border-bottom: 1px solid #e5e8ed;
+
+				.badge {
+					background-color: #00d7d2;
+					border-radius: 3px;
+					color: #fff;
+					padding: 3px 6px;
+					margin-right: 10px;
+				}
+
+				a {
+					color: inherit;
+				}
+			}
+
+			.menu {
+				padding: 10px 0;
+
+				.logo {
+					background-color: #e5e5e5;
+					border-radius: 3px;
+					width: 47px;
+					height: 47px;
+					position: relative;
+					margin-right: 20px;
+
+					svg {
+						position: absolute;
+						top: 50%;
+						left: 50%;
+						transform: translate(-45%, -50%);
+					}
+				}
+			}
+		}
+	}
+
+	section.tabs {
+		.tab-content {
+			background-color: #fafafa;
+		}
+	}
+}
