diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 036f52cf4..73671abbb 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -1,65 +1,339 @@
 @import "naturalcrit/styles/colors.less";
+
 @navbarHeight : 28px;
+
 @keyframes pinkColoring {
-  0%   {color : pink;}
-  50%  {color : pink;}
-  75%  {color : red;}
-  100% {color : pink;}
+	0% { color : pink; }
+	50% { color : pink; }
+	75% { color : red; }
+	100% { color : pink; }
 }
-.homebrew nav {
-	.homebrewLogo {
-		.animate(color);
-		font-family : CodeBold;
-		font-size   : 12px;
-		color       : white;
-		div {
-			margin-top    : 2px;
-			margin-bottom : -2px;
-		}
-		&:hover {
-			color : @blue;
-		}
+
+@keyframes glideDropDown {
+	0% {
+		background-color : #333333;
+		opacity          : 0;
+		transform        : translate(0px, -100%);
 	}
-	.editTitle.navItem {
-		padding : 2px 12px;
-		input {
-			font-family      : "Open Sans", sans-serif;
-			font-size        : 12px;
-			font-weight      : 800;
-			width            : 250px;
-			margin           : 0;
-			padding          : 2px;
-			text-align       : center;
-			color            : white;
-			border           : 1px solid @blue;
-			outline          : none;
-			background-color : transparent;
-		}
-		.charCount {
-			display        : inline-block;
-			margin-left    : 8px;
-			text-align     : right;
-			vertical-align : bottom;
-			color          : #666;
-			&.max {
-				color : @red;
+	100% {
+		background-color : #333333;
+		opacity          : 1;
+		transform        : translate(0px, 0px);
+	}
+}
+
+.homebrew nav {
+	background-color : #333333;
+	.navContent {
+		position        : relative;
+		z-index         : 2;
+		display         : flex;
+		justify-content : space-between;
+		.navSection {
+			display     : flex;
+			align-items : center;
+			// "NaturalCrit" logo
+			.navLogo {
+				display         : block;
+				margin-top      : 0px;
+				margin-right    : 8px;
+				margin-left     : 8px;
+				color           : white;
+				text-decoration : none;
+				&:hover {
+					.name { color : @orange; }
+					svg { fill : @orange; }
+				}
+				svg {
+					height       : 13px;
+					margin-right : 0.2em;
+					cursor       : pointer;
+					fill         : white;
+				}
+				span.name {
+					font-family : 'CodeLight';
+					font-size   : 15px;
+					span.crit { font-family : 'CodeBold'; }
+					small {
+						font-family    : 'Open Sans';
+						font-size      : 0.3em;
+						font-weight    : 800;
+						text-transform : uppercase;
+					}
+				}
+			}
+			&:last-child .navItem { border-left : 1px solid #666666; }
+			.navItem {
+				#backgroundColorsHover;
+				.animate(background-color);
+				padding          : 8px 12px;
+				font-size        : 10px;
+				font-weight      : 800;
+				line-height      : 13px;
+				color            : white;
+				text-decoration  : none;
+				text-transform   : uppercase;
+				cursor           : pointer;
+				background-color : #333333;
+				i {
+					float       : right;
+					margin-left : 5px;
+					font-size   : 13px;
+				}
+				&.patreon {
+					border-right : 1px solid #666666;
+					border-left  : 1px solid #666666;
+					&:hover i { color : red; }
+					i {
+						color              : pink;
+						.animate(color);
+						animation-name     : pinkColoring;
+						animation-duration : 2s;
+					}
+				}
+				&.editTitle {  // this is not needed at all currently - you used to be able to edit the title via the navbar.
+					padding : 2px 12px;
+					input {
+						width            : 250px;
+						padding          : 2px;
+						margin           : 0;
+						font-family      : 'Open Sans', sans-serif;
+						font-size        : 12px;
+						font-weight      : 800;
+						color            : white;
+						text-align       : center;
+						background-color : transparent;
+						border           : 1px solid @blue;
+						outline          : none;
+					}
+					.charCount {
+						display        : inline-block;
+						margin-left    : 8px;
+						color          : #666666;
+						text-align     : right;
+						vertical-align : bottom;
+						&.max { color : @red; }
+					}
+				}
+				&.brewTitle {
+					flex-grow        : 1;
+					font-size        : 12px;
+					font-weight      : 800;
+					color            : white;
+					text-align       : center;
+					text-transform   : initial;
+					background-color : transparent;
+				}
+				// "The Homebrewery" logo
+				&.homebrewLogo {
+					.animate(color);
+					font-family : 'CodeBold';
+					font-size   : 12px;
+					color       : white;
+					div {
+						margin-top    : 2px;
+						margin-bottom : -2px;
+					}
+					&:hover { color : @blue; }
+				}
+				&.metadata {
+					position    : relative;
+					display     : flex;
+					flex-grow   : 1;
+					align-items : center;
+					height      : 100%;
+					padding     : 0;
+					i { margin-right : 10px;}
+					.window {
+						position         : absolute;
+						bottom           : 0;
+						left             : 50%;
+						z-index          : -1;
+						display          : flex;
+						flex-flow        : row wrap;
+						align-content    : baseline;
+						justify-content  : flex-start;
+						width            : 440px;
+						max-height       : ~"calc(100vh - 28px)";
+						padding          : 0 10px 5px;
+						margin           : 0 auto;
+						background-color : #333333;
+						border           : 3px solid #444444;
+						border-top       : unset;
+						border-radius    : 0 0 5px 5px;
+						box-shadow       : inset 0 7px 9px -7px #111111;
+						transition       : transform 0.4s, opacity 0.4s;
+						&.active {
+							opacity   : 1;
+							transform : translateX(-50%) translateY(100%);
+						}
+						&.inactive {
+							opacity   : 0;
+							transform : translateX(-50%) translateY(0%);
+						}
+						.row {
+							display   : flex;
+							flex-flow : row wrap;
+							width     : 100%;
+							h4 {
+								box-sizing : border-box;
+								display    : block;
+								flex-basis : 20%;
+								flex-grow  : 1;
+								min-width  : 76px;
+								padding    : 5px 0;
+								color      : #BBBBBB;
+								text-align : center;
+							}
+							p {
+								flex-basis     : 80%;
+								flex-grow      : 1;
+								padding        : 5px 0;
+								font-family    : 'Open Sans', sans-serif;
+								font-size      : 10px;
+								font-weight    : normal;
+								text-transform : initial;
+								.tag {
+									display          : inline-block;
+									padding          : 2px;
+									margin           : 2px 2px;
+									background-color : #444444;
+									border           : 2px solid grey;
+									border-radius    : 5px;
+								}
+								a.userPageLink {
+									color           : white;
+									text-decoration : none;
+									&:hover { text-decoration : underline; }
+								}
+							}
+							&:nth-of-type(even) { background-color : #555555; }
+						}
+					}
+				}
+				&.warning {
+					position         : relative;
+					color            : white;
+					background-color : @orange;
+					&:hover > .dropdown { visibility : visible; }
+					.dropdown {
+						position         : absolute;
+						top              : 28px;
+						left             : 0;
+						z-index          : 10000;
+						box-sizing       : border-box;
+						display          : block;
+						width            : 100%;
+						padding          : 13px 5px;
+						text-align       : center;
+						visibility       : hidden;
+						background-color : #333333;
+					}
+				}
+				&.account {
+					min-width : 100px;
+					&.username { text-transform : none;}
+				}
+			}
+			.navDropdownContainer {
+				position : relative;
+				.navDropdown {
+					position   : absolute;
+					top        : 28px;
+					left       : 0px;
+					z-index    : 10000;
+					width      : 100%;
+					max-height : calc(100vh - 28px);
+					overflow   : hidden auto;
+					.navItem {
+						position           : relative;
+						display            : block;
+						width              : 100%;
+						padding            : 8px 5px;
+						border             : 1px solid #888888;
+						border-bottom      : 0;
+						animation-name     : glideDropDown;
+						animation-duration : 0.4s;
+					}
+				}
+				&.recent {
+					position : relative;
+					.navDropdown .navItem {
+						#backgroundColorsHover;
+						.animate(background-color);
+						position         : relative;
+						box-sizing       : border-box;
+						display          : block;
+						max-height       : ~"calc(100vh - 28px)";  // I don't think is correct syntax, but leaving it in for now... (Gazook89)
+						padding          : 8px 5px 13px;
+						overflow         : hidden auto;
+						color            : white;
+						text-decoration  : none;
+						background-color : #333333;
+						border-top       : 1px solid #888888;
+						scrollbar-color  : #666666 #333333;
+						scrollbar-width  : thin;
+						.clear {
+							position         : absolute;
+							top              : 50%;
+							right            : 0;
+							display          : none;
+							width            : 20px;
+							height           : 100%;
+							background-color : #333333;
+							border-radius    : 3px;
+							opacity          : 70%;
+							transform        : translateY(-50%);
+							&:hover { opacity : 100%; }
+							i {
+								width      : 100%;
+								height     : 100%;
+								margin     : 0;
+								font-size  : 10px;
+								text-align : center;
+							}
+						}
+						&:hover {
+							background-color : @blue;
+							.clear {
+								display       : grid;
+								place-content : center;
+							}
+						}
+						.title {
+							display       : inline-block;
+							width         : 100%;
+							overflow      : hidden auto;
+							text-overflow : ellipsis;
+							white-space   : nowrap;
+						}
+						.time {
+							position  : absolute;
+							right     : 2px;
+							bottom    : 2px;
+							font-size : 0.7em;
+							color     : #888888;
+						}
+						&.header {
+							box-sizing       : border-box;
+							display          : block;
+							padding          : 5px 0;
+							color            : #BBBBBB;
+							text-align       : center;
+							background-color : #333333;
+							border-top       : 1px solid #888888;
+							&:nth-of-type(1) { background-color : darken(@teal, 20%); }
+							&:nth-of-type(2) { background-color : darken(@purple, 30%); }
+						}
+					}
+				}
 			}
 		}
 	}
-	.brewTitle.navItem {
-		font-size        : 12px;
-		font-weight      : 800;
-		height           : 100%;
-		text-align       : center;
-		text-transform   : initial;
-		color            : white;
-		background-color : transparent;
-		flex-grow        : 1;
-	}
+
+	// this should likely be refactored into .navDropdownContainer
 	.save-menu {
-		.dropdown {
-			z-index : 1000;
-		}
+		.dropdown { z-index : 1000; }
 		.navItem i.fa-power-off {
 			color : red;
 			&.active {
@@ -68,205 +342,9 @@
 			}
 		}
 	}
-	.patreon.navItem {
-		border-right : 1px solid #666;
-		border-left  : 1px solid #666;
-		&:hover i {
-			color : red;
-		}
-		i {
-			.animate(color);
-			animation-name     : pinkColoring;
-			animation-duration : 2s;
-			color              : pink;
-		}
-	}
-	.recent.navDropdownContainer {
-		position : relative;
-		.navDropdown .navItem {
-			overflow        : hidden auto;
-			max-height      : ~"calc(100vh - 28px)";
-			scrollbar-color : #666 #333;
-			scrollbar-width : thin;
-			
 
-			#backgroundColorsHover;
-			.animate(background-color);
-			position         : relative;
-			display          : block;
-			overflow         : clip;
-			box-sizing       : border-box;
-			padding          : 8px 5px 13px;
-			text-decoration  : none;
-			color            : white;
-			border-top       : 1px solid #888;
-			background-color : #333;
-			.clear {
-				position         : absolute;
-				top              : 50%;
-				right            : 0;
-				display          : none;
-				width            : 20px;
-				height           : 100%;
-				transform        : translateY(-50%);
-				opacity          : 70%;
-				border-radius    : 3px;
-				background-color : #333;
-				&:hover {
-					opacity : 100%;
-				}
-				i {
-					font-size  : 10px;
-					width      : 100%;
-					height     : 100%;
-					margin     : 0;
-					text-align : center;
-				}
-			}
-			&:hover {
-				background-color : @blue;
-				.clear {
-					display       : grid;
-					place-content : center;
-				}
-			}
-			.title {
-				display       : inline-block;
-				overflow      : hidden;
-				width         : 100%;
-				white-space   : nowrap;
-				text-overflow : ellipsis;
-			}
-			.time {
-				font-size : 0.7em;
-				position  : absolute;
-				right     : 2px;
-				bottom    : 2px;
-				color     : #888;
-			}
-			&.header {
-				display          : block;
-				box-sizing       : border-box;
-				padding          : 5px 0;
-				text-align       : center;
-				color            : #BBB;
-				border-top       : 1px solid #888;
-				background-color : #333;
-				&:nth-of-type(1) {
-					background-color : darken(@teal, 20%);
-				}
-				&:nth-of-type(2) {
-					background-color : darken(@purple, 30%);
-				}
-			}
-		}
-	}
-	.metadata.navItem {
-		position    : relative;
-		display     : flex;
-		align-items : center;
-		height      : 100%;
-		padding     : 0;
-		flex-grow   : 1;
-		i {
-			margin-right : 10px;
-		}
-		.window {
-			position         : absolute;
-			z-index          : -1;
-			bottom           : 0;
-			left             : 50%;
-			display          : flex;
-			justify-content  : flex-start;
-			width            : 440px;
-			max-height       : ~"calc(100vh - 28px)";
-			margin           : 0 auto;
-			padding          : 0 10px 5px;
-			transition       : transform 0.4s, opacity 0.4s;
-			border           : 3px solid #444;
-			border-top       : unset;
-			border-radius    : 0 0 5px 5px;
-			background-color : #333;
-			box-shadow       : inset 0 7px 9px -7px #111;
-			flex-flow        : row wrap;
-			align-content    : baseline;
-			&.active {
-				transform : translateX(-50%) translateY(100%);
-				opacity   : 1;
-			}
-			&.inactive {
-				transform : translateX(-50%) translateY(0%);
-				opacity   : 0;
-			}
-			.row {
-				display   : flex;
-				width     : 100%;
-				flex-flow : row wrap;
-				h4 {
-					display    : block;
-					box-sizing : border-box;
-					min-width  : 76px;
-					padding    : 5px 0;
-					text-align : center;
-					color      : #BBB;
-					flex-basis : 20%;
-					flex-grow  : 1;
-				}
-				p {
-					font-family    : "Open Sans", sans-serif;
-					font-size      : 10px;
-					font-weight    : normal;
-					padding        : 5px 0;
-					text-transform : initial;
-					flex-basis     : 80%;
-					flex-grow      : 1;
-					.tag {
-						display          : inline-block;
-						margin           : 2px 2px;
-						padding          : 2px;
-						border           : 2px solid grey;
-						border-radius    : 5px;
-						background-color : #444;
-					}
-					a.userPageLink {
-						text-decoration : none;
-						color           : white;
-						&:hover {
-							text-decoration : underline;
-						}
-					}
-				}
-				&:nth-of-type(even) {
-					background-color : #555;
-				}
-			}
-		}
-	}
-	.warning.navItem {
-		position         : relative;
-		color            : white;
-		background-color : @orange;
-		&:hover > .dropdown {
-			visibility : visible;
-		}
-		.dropdown {
-			position         : absolute;
-			z-index          : 10000;
-			top              : 28px;
-			left             : 0;
-			display          : block;
-			visibility       : hidden;
-			box-sizing       : border-box;
-			width            : 100%;
-			padding          : 13px 5px;
-			text-align       : center;
-			background-color : #333;
-		}
-	}
-	.account.navItem {
-		min-width : 100px;
-	}
-	.account.username.navItem {
-		text-transform : none;
-	}
+
+	
+	
+
 }
diff --git a/shared/naturalcrit/nav/nav.jsx b/shared/naturalcrit/nav/nav.jsx
index 3c7fd7c5e..04b7037dd 100644
--- a/shared/naturalcrit/nav/nav.jsx
+++ b/shared/naturalcrit/nav/nav.jsx
@@ -1,4 +1,4 @@
-require('./nav.less');
+require('client/homebrew/navbar/navbar.less');
 const React = require('react');
 const { useState, useRef, useEffect } = React;
 const createClass = require('create-react-class');
diff --git a/shared/naturalcrit/nav/nav.less b/shared/naturalcrit/nav/nav.less
deleted file mode 100644
index e3a58a33a..000000000
--- a/shared/naturalcrit/nav/nav.less
+++ /dev/null
@@ -1,97 +0,0 @@
-@import '../styles/colors';
-@keyframes glideDropDown {
-	0%   {transform : translate(0px, -100%);
-				opacity   : 0;
-			  background-color: #333;}
-	100% {transform : translate(0px, 0px);
-				opacity   : 1;
-			  background-color: #333;}
-}
-nav{
-	background-color : #333;
-	.navContent{
-		position			  : relative;
-		display         : flex;
-		justify-content : space-between;
-		z-index         : 2;
-	}
-	.navSection{
-		display     : flex;
-		align-items : center;
-	}
-	.navLogo{
-		display         : block;
-		margin-top      : 0px;
-		margin-right    : 8px;
-		margin-left     : 8px;
-		color           : white;
-		text-decoration : none;
-		&:hover{
-			.name{ color : @orange; }
-			svg{ fill : @orange }
-		}
-		svg{
-			height       : 13px;
-			margin-right : 0.2em;
-			cursor       : pointer;
-			fill         : white;
-		}
-		span.name{
-			font-family : 'CodeLight';
-			font-size   : 15px;
-			span.crit{
-				font-family : 'CodeBold';
-			}
-			small{
-				font-family    : 'Open Sans';
-				font-size      : 0.3em;
-				font-weight    : 800;
-				text-transform : uppercase;
-			}
-		}
-	}
-	.navItem{
-		#backgroundColorsHover;
-		.animate(background-color);
-		padding          : 8px 12px;
-		cursor           : pointer;
-		background-color : #333;
-		font-size        : 10px;
-		font-weight      : 800;
-		color            : white;
-		text-decoration  : none;
-		text-transform   : uppercase;
-		line-height      : 13px;
-		i{
-			margin-left : 5px;
-			font-size   : 13px;
-			float       : right;
-		}
-	}
-	.navSection:last-child .navItem{
-		border-left : 1px solid #666;
-	}
-	.navDropdownContainer{
-		position: relative;
-		.navDropdown {
-			position : absolute;
-			top      : 28px;
-			left     : 0px;
-			z-index  : 10000;
-			width    : 100%;
-			overflow : hidden auto;
-			max-height : calc(100vh - 28px);
-			.navItem{
-				animation-name: glideDropDown;
-				animation-duration: 0.4s;
-				position         : relative;
-				display          : block;
-				width            : 100%;
-				vertical-align   : middle;
-				padding          : 8px 5px;
-				border           : 1px solid #888;
-				border-bottom    : 0;
-			}
-		}
-	}
-}