diff --git a/client/index.html b/client/index.html
index 1ef8a5c..49b4fd0 100644
--- a/client/index.html
+++ b/client/index.html
@@ -35,7 +35,7 @@
       </style>
     
       <div class="centered">
-        <img class="logo" src="/api/static/assets/logo.svg" alt="logo">
+        <img class="logo" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo - if you can read this your connection is really slow">
         <h1>Solid Scribe</h1>
         <h3>Loading...</h3>
       </div>
diff --git a/client/src/assets/semantic-helper.css b/client/src/assets/semantic-helper.css
index 359dffe..17e416c 100644
--- a/client/src/assets/semantic-helper.css
+++ b/client/src/assets/semantic-helper.css
@@ -22,9 +22,13 @@
 	--outline_color: rgba(34,36,38,.15);
 	--border_color: rgba(34,36,38,.20);
 
-	/*Global purple menu styles */
+	/* Global purple menu styles */
 	--menu-border: #534c68;
 	--menu-background: #221f2b;
+
+	/* edit menu styles, text, accent */
+	--menu-text: #5e6268;
+	--menu-accent: #cecece;
 }
 
 html {
@@ -229,7 +233,7 @@ a:hover {
 		border: none;
 		/*height: calc(100% - 69px);*/
 
-		min-height: calc(100% - 0px);
+		min-height: 500px;
 		background-color: rgba(255,200,0,0.0);
 		/*margin-bottom: 15px;*/
 
@@ -238,7 +242,7 @@ a:hover {
 		/*background: transparent;*/
 		overflow-x: scroll; 
 		font-size: 1.2em;
-		line-height: 1.5em;
+		line-height: 1.8em;
 		word-wrap: break-word;
 		/*border-bottom: 1px solid #ccc;*/
 		scrollbar-width: none;
@@ -274,6 +278,7 @@ a:hover {
 	.note-card-text p,
 	.squire-box p {
 		margin-bottom: 0;
+		line-height: 1.5em;
 	}
 	.note-card-text blockquote, 
 	.squire-box blockquote {
@@ -427,4 +432,384 @@ a:hover {
 		transform: translateZ(0);
 		opacity: 1;
 	}
+}
+
+/*Fomantic Tooltips*/
+/* Content */
+[data-tooltip] {
+  position: relative;
+}
+
+/* Arrow */
+[data-tooltip]:before {
+  pointer-events: none;
+  position: absolute;
+  content: '';
+  font-size: 1rem;
+  width: 0.71428571em;
+  height: 0.71428571em;
+  background: #FFFFFF;
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+  z-index: 1901;
+  -webkit-box-shadow: 1px 1px 0 0 #bababc;
+          box-shadow: 1px 1px 0 0 #bababc;
+}
+
+/* Popup */
+[data-tooltip]:after {
+  pointer-events: none;
+  content: attr(data-tooltip);
+  position: absolute;
+  text-transform: none;
+  text-align: left;
+  white-space: nowrap;
+  font-size: 1rem;
+  border: 1px solid #D4D4D5;
+  line-height: 1.4285em;
+  max-width: none;
+  background: #FFFFFF;
+  padding: 0.833em 1em;
+  font-weight: normal;
+  font-style: normal;
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 0.28571429rem;
+  -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+          box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+  z-index: 1900;
+}
+
+/* Default Position (Top Center) */
+[data-tooltip]:not([data-position]):before {
+  top: auto;
+  right: auto;
+  bottom: 100%;
+  left: 50%;
+  background: #FFFFFF;
+  margin-left: -0.07142857rem;
+  margin-bottom: 0.14285714rem;
+}
+[data-tooltip]:not([data-position]):after {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  bottom: 100%;
+  margin-bottom: 0.5em;
+}
+
+/* Animation */
+[data-tooltip]:before,
+[data-tooltip]:after {
+  pointer-events: none;
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: opacity 0.1s ease, -webkit-transform 0.1s ease;
+  transition: opacity 0.1s ease, -webkit-transform 0.1s ease;
+  transition: transform 0.1s ease, opacity 0.1s ease;
+  transition: transform 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease;
+}
+[data-tooltip]:before {
+  -webkit-transform: rotate(45deg) scale(0) !important;
+          transform: rotate(45deg) scale(0) !important;
+  -webkit-transform-origin: center top;
+          transform-origin: center top;
+}
+[data-tooltip]:after {
+  -webkit-transform-origin: center bottom;
+          transform-origin: center bottom;
+}
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after {
+  visibility: visible;
+  pointer-events: auto;
+  opacity: 1;
+}
+[data-tooltip]:hover:before {
+  -webkit-transform: rotate(45deg) scale(1) !important;
+          transform: rotate(45deg) scale(1) !important;
+}
+
+/* Animation Position */
+[data-tooltip]:after,
+[data-tooltip][data-position="top center"]:after,
+[data-tooltip][data-position="bottom center"]:after {
+  -webkit-transform: translateX(-50%) scale(0) !important;
+          transform: translateX(-50%) scale(0) !important;
+}
+[data-tooltip]:hover:after,
+[data-tooltip][data-position="bottom center"]:hover:after {
+  -webkit-transform: translateX(-50%) scale(1) !important;
+          transform: translateX(-50%) scale(1) !important;
+}
+[data-tooltip][data-position="left center"]:after,
+[data-tooltip][data-position="right center"]:after {
+  -webkit-transform: translateY(-50%) scale(0) !important;
+          transform: translateY(-50%) scale(0) !important;
+}
+[data-tooltip][data-position="left center"]:hover:after,
+[data-tooltip][data-position="right center"]:hover:after {
+  -webkit-transform: translateY(-50%) scale(1) !important;
+          transform: translateY(-50%) scale(1) !important;
+}
+[data-tooltip][data-position="top left"]:after,
+[data-tooltip][data-position="top right"]:after,
+[data-tooltip][data-position="bottom left"]:after,
+[data-tooltip][data-position="bottom right"]:after {
+  -webkit-transform: scale(0) !important;
+          transform: scale(0) !important;
+}
+[data-tooltip][data-position="top left"]:hover:after,
+[data-tooltip][data-position="top right"]:hover:after,
+[data-tooltip][data-position="bottom left"]:hover:after,
+[data-tooltip][data-position="bottom right"]:hover:after {
+  -webkit-transform: scale(1) !important;
+          transform: scale(1) !important;
+}
+[data-tooltip][data-variation~="fixed"]:after {
+  white-space: normal;
+  width: 250px;
+}
+[data-tooltip][data-variation*="wide fixed"]:after {
+  width: 350px;
+}
+[data-tooltip][data-variation*="very wide fixed"]:after {
+  width: 550px;
+}
+@media only screen and (max-width: 767.98px) {
+  [data-tooltip][data-variation~="fixed"]:after {
+    width: 250px;
+  }
+}
+
+/*--------------
+        Inverted
+    ---------------*/
+
+
+/* Arrow */
+[data-tooltip][data-inverted]:before {
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+}
+
+/* Arrow Position */
+[data-tooltip][data-inverted]:before {
+  background: #1B1C1D;
+}
+
+/* Popup  */
+[data-tooltip][data-inverted]:after {
+  background: #1B1C1D;
+  color: #FFFFFF;
+  border: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+[data-tooltip][data-inverted]:after .header {
+  background: none;
+  color: #FFFFFF;
+}
+
+/*--------------
+        Position
+    ---------------*/
+
+[data-position~="top"][data-tooltip]:before {
+  background: #FFFFFF;
+}
+
+/* Top Center */
+[data-position="top center"][data-tooltip]:after {
+  top: auto;
+  right: auto;
+  left: 50%;
+  bottom: 100%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  margin-bottom: 0.5em;
+}
+[data-position="top center"][data-tooltip]:before {
+  top: auto;
+  right: auto;
+  bottom: 100%;
+  left: 50%;
+  background: #FFFFFF;
+  margin-left: -0.07142857rem;
+  margin-bottom: 0.14285714rem;
+}
+
+/* Top Left */
+[data-position="top left"][data-tooltip]:after {
+  top: auto;
+  right: auto;
+  left: 0;
+  bottom: 100%;
+  margin-bottom: 0.5em;
+}
+[data-position="top left"][data-tooltip]:before {
+  top: auto;
+  right: auto;
+  bottom: 100%;
+  left: 1em;
+  margin-left: -0.07142857rem;
+  margin-bottom: 0.14285714rem;
+}
+
+/* Top Right */
+[data-position="top right"][data-tooltip]:after {
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 0.5em;
+}
+[data-position="top right"][data-tooltip]:before {
+  top: auto;
+  left: auto;
+  bottom: 100%;
+  right: 1em;
+  margin-left: -0.07142857rem;
+  margin-bottom: 0.14285714rem;
+}
+[data-position~="bottom"][data-tooltip]:before {
+  background: #FFFFFF;
+  -webkit-box-shadow: -1px -1px 0 0 #bababc;
+          box-shadow: -1px -1px 0 0 #bababc;
+}
+
+/* Bottom Center */
+[data-position="bottom center"][data-tooltip]:after {
+  bottom: auto;
+  right: auto;
+  left: 50%;
+  top: 100%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  margin-top: 0.5em;
+}
+[data-position="bottom center"][data-tooltip]:before {
+  bottom: auto;
+  right: auto;
+  top: 100%;
+  left: 50%;
+  margin-left: -0.07142857rem;
+  margin-top: 0.14285714rem;
+}
+
+/* Bottom Left */
+[data-position="bottom left"][data-tooltip]:after {
+  left: 0;
+  top: 100%;
+  margin-top: 0.5em;
+}
+[data-position="bottom left"][data-tooltip]:before {
+  bottom: auto;
+  right: auto;
+  top: 100%;
+  left: 1em;
+  margin-left: -0.07142857rem;
+  margin-top: 0.14285714rem;
+}
+
+/* Bottom Right */
+[data-position="bottom right"][data-tooltip]:after {
+  right: 0;
+  top: 100%;
+  margin-top: 0.5em;
+}
+[data-position="bottom right"][data-tooltip]:before {
+  bottom: auto;
+  left: auto;
+  top: 100%;
+  right: 1em;
+  margin-left: -0.14285714rem;
+  margin-top: 0.07142857rem;
+}
+
+/* Left Center */
+[data-position="left center"][data-tooltip]:after {
+  right: 100%;
+  top: 50%;
+  margin-right: 0.5em;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+[data-position="left center"][data-tooltip]:before {
+  right: 100%;
+  top: 50%;
+  margin-top: -0.14285714rem;
+  margin-right: -0.07142857rem;
+  background: #FFFFFF;
+  -webkit-box-shadow: 1px -1px 0 0 #bababc;
+          box-shadow: 1px -1px 0 0 #bababc;
+}
+
+/* Right Center */
+[data-position="right center"][data-tooltip]:after {
+  left: 100%;
+  top: 50%;
+  margin-left: 0.5em;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+[data-position="right center"][data-tooltip]:before {
+  left: 100%;
+  top: 50%;
+  margin-top: -0.07142857rem;
+  margin-left: 0.14285714rem;
+  background: #FFFFFF;
+  -webkit-box-shadow: -1px 1px 0 0 #bababc;
+          box-shadow: -1px 1px 0 0 #bababc;
+}
+
+/* Inverted Arrow Color */
+[data-inverted][data-position~="bottom"][data-tooltip]:before {
+  background: #1B1C1D;
+  -webkit-box-shadow: -1px -1px 0 0 #bababc;
+          box-shadow: -1px -1px 0 0 #bababc;
+}
+[data-inverted][data-position="left center"][data-tooltip]:before {
+  background: #1B1C1D;
+  -webkit-box-shadow: 1px -1px 0 0 #bababc;
+          box-shadow: 1px -1px 0 0 #bababc;
+}
+[data-inverted][data-position="right center"][data-tooltip]:before {
+  background: #1B1C1D;
+  -webkit-box-shadow: -1px 1px 0 0 #bababc;
+          box-shadow: -1px 1px 0 0 #bababc;
+}
+[data-inverted][data-position~="top"][data-tooltip]:before {
+  background: #1B1C1D;
+}
+[data-position~="bottom"][data-tooltip]:before {
+  -webkit-transform-origin: center bottom;
+          transform-origin: center bottom;
+}
+[data-position~="bottom"][data-tooltip]:after {
+  -webkit-transform-origin: center top;
+          transform-origin: center top;
+}
+[data-position="left center"][data-tooltip]:before {
+  -webkit-transform-origin: top center;
+          transform-origin: top center;
+}
+[data-position="left center"][data-tooltip]:after {
+  -webkit-transform-origin: right center;
+          transform-origin: right center;
+}
+[data-position="right center"][data-tooltip]:before {
+  -webkit-transform-origin: right center;
+          transform-origin: right center;
+}
+[data-position="right center"][data-tooltip]:after {
+  -webkit-transform-origin: left center;
+          transform-origin: left center;
+}
+
+/*--------------
+        Basic
+    ---------------*/
+
+[data-tooltip][data-variation~="basic"]:before {
+  display: none;
 }
\ No newline at end of file
diff --git a/client/src/components/FileUploadButton.vue b/client/src/components/FileUploadButton.vue
index 2021798..3495e6f 100644
--- a/client/src/components/FileUploadButton.vue
+++ b/client/src/components/FileUploadButton.vue
@@ -9,7 +9,8 @@
 <template>
 	<form data-tooltip="Upload File" data-inverted>
 		<label :for="`upfile-${noteId}`" class="clickable">
-			<nm-button icon="upload" :text="uploadStatusText"/>
+			<!-- <nm-button icon="upload" :text="uploadStatusText"/> -->
+			<i class="file upload icon"></i>
 		</label>
 		<input class="hidden-up" type="file" :id="`upfile-${noteId}`" ref="file" v-on:change="handleFileUpload()" />
 		<!-- <button v-if="file" v-on:click="uploadFileToServer()">Submit</button> -->
diff --git a/client/src/components/GlobalSiteMenu.vue b/client/src/components/GlobalSiteMenu.vue
index 9677ab0..9dcf79c 100644
--- a/client/src/components/GlobalSiteMenu.vue
+++ b/client/src/components/GlobalSiteMenu.vue
@@ -257,7 +257,7 @@
 		},
 		data: function(){ 
 			return {
-				version: '1.0.4',
+				version: '1.0.5',
 				username: '',
 				collapsed: false,
 				mobile: false,
diff --git a/client/src/components/NoteInputPanel.vue b/client/src/components/NoteInputPanel.vue
index 432ece3..17aecfe 100644
--- a/client/src/components/NoteInputPanel.vue
+++ b/client/src/components/NoteInputPanel.vue
@@ -4,196 +4,194 @@
 		id="InputNotes" 
 		class="master-note-edit" 
 		@keyup.esc="close()" 
-		:class="[{ 'size-down':(sizeDown == true), 'full-focus':(fullFocusEditor) },  'position-'+position ]" 
-		:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
+		:class="[{ 'full-focus':(fullFocusEditor) },  'position-'+position ]" 
 	>
 
-	<div class="input-container-wrapper">
+		<!-- Main Menu  -->
+		<div class="edit-menu" :class="{ 'slide-out-top':(sizeDown == true) }">
 
-		<!-- Loading indicator  -->
-		<div v-if="loading" class="loading-note">
-			<div class="ui active dimmer">
-				<div class="ui text loader">{{loadingMessage}}</div>
-			</div>
-		</div>
-
-		<div class="note-menu">
-
-			<nm-button tip="Close" bottom-tip="true" v-on:click.native="close()" icon="close" />
-
-			<nm-button tip="Text Color" bottom-tip="true" icon="palette icon" v-on:click.native="colorpicker = true" />
 			
-			<nm-button tip="Bold" bottom-tip="true" v-on:click.native="toggleBold()" icon="bold" />
-			
-			<nm-button tip="Quote" bottom-tip="true" v-on:click.native="toggleItalic()" icon="quote left" />
 
-			<nm-button tip="Big Text" bottom-tip="true" v-on:click.native="modifyFont('1.4em')" icon="text height" />
+			<div class="edit-spacer"></div>
 
-			<nm-button tip="Indent" bottom-tip="true" v-on:click.native="editor.increaseQuoteLevel()" icon="indent" />
+			<div class="menu-top-half">
+				<div class="edit-button" v-on:click="close()" data-tooltip="Close" data-position="bottom center" data-inverted>
+					<i class="close icon"></i>
+				</div>
 
-			<nm-button tip="Outdent" bottom-tip="true" v-on:click.native="editor.decreaseQuoteLevel()" icon="outdent" />
+				<div class="edit-divide"></div>
 
-			<nm-button tip="Remove Formatting" bottom-tip="true" v-on:click.native="removeFormatting()" icon="remove format icon" />
+				<div class="edit-button" v-on:click="toggleList('ul')" data-tooltip="Task List" data-position="bottom center" data-inverted>
+					<i class="tasks icon"></i>
+				</div>
+				<div class="edit-button" v-on:click="toggleList('ol')" data-tooltip="Numbered List" data-position="bottom center" data-inverted>
+					<i class="list ol icon"></i>
+				</div>
 
-			<nm-button v-on:click.native="undoCustom()" icon="undo" bottom-tip="true" tip="Undo" />
+				<div class="edit-button" v-on:click="colorpicker = true" data-tooltip="Text Color" data-position="bottom center" data-inverted>
+					<i class="palette icon"></i>
+				</div>
 
-			<nm-button tip="Users on Note" bottom-tip="true" v-if="usersOnNote > 1" icon="green user circle" />
+				<div class="edit-button" v-on:click="toggleBold()" data-tooltip="Bold" data-position="bottom center" data-inverted>
+					<i class="bold icon"></i>
+				</div>
 
-		</div>
-
-		<!-- Squire box grows -->
-		<div class="note-wrapper">
-
-			<textarea 
-				ref="titleTextarea"
-				v-on:keyup="titleResize"
-				v-on:keydown="titleResize"
-				@keydown.enter.exact.prevent="editor.focus(); editor.moveCursorToEnd()"
-				rows="1"
-				:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
-				v-on:blur="save" type="text" v-model="noteTitle" placeholder="Title" class="stealth-input">
-			</textarea>
-
-			<div v-show="isDecrypted" id="squire-id" class="squire-box" ref="squirebox" placeholder="Note Text"></div>
-
-			<!-- Decrypt note prompt  -->
-			<div v-if="isEncrypted && !isDecrypted" class="ui basic padded segment">
-				<div class="ui raised segment">
-					<h3 class="ui center aligned icon header">
-						<i class="green lock alternate icon"></i>
-
-						<span v-if="!lockedOut">
-							This note is encrypted and requires a password to be opened.
-						</span>
-
-						<!-- note is locked for 5 minutes  -->
-						<span v-if="lockedOut">
-							To many unlock attempts. Note is locked for 5 minutes.
-						</span>
-					</h3>
-					<!-- Decrypt note  -->
-					<div class="ui form" v-if="!lockedOut">
-						<h5 class="ui horizontal divider header" v-if="passwordHint && passwordHint.length > 0">
-							Hint: {{ passwordHint }}
-						</h5>
-						<div class="field">
-							<input :name="`randomThing-${noteid}`" :id="`yupper-${noteid}`"type="password" v-model="password" placeholder="Note Password" v-on:keyup.enter="decryptNote" autofocus ref="decryptNotePrompt">
-						</div>
-						<div class="field">
-							<div v-on:click="decryptNote"  class="ui green fluid button" v-if="password.length >= 3">
-								Unlock Note
-							</div>
-							<div class="ui disabled fluid button" v-if="password.length < 3">
-								Unlock Note
-							</div>
-						</div>
-					</div>
-					
+				<div class="edit-button" v-on:click="toggleItalic()" data-tooltip="Quote" data-position="bottom center" data-inverted>
+					<i class="quote left icon"></i>
+				</div>
+				<div class="edit-button" v-on:click="modifyFont('1.4em')" data-tooltip="Title" data-position="bottom center" data-inverted>
+					<i class="text height icon"></i>
+				</div>
+				<div class="edit-button" v-on:click="editor.increaseQuoteLevel()" data-tooltip="Indent" data-position="bottom center" data-inverted>
+					<i class="indent icon"></i>
+				</div>
+				<div class="edit-button" v-on:click="editor.decreaseQuoteLevel()" data-tooltip="Outdent" data-position="bottom center" data-inverted>
+					<i class="outdent icon"></i>
+				</div>
+				<div class="edit-button" v-on:click="removeFormatting()" data-tooltip="Remove Formatting" data-position="bottom center" data-inverted>
+					<i class="remove format icon"></i>
 				</div>
 			</div>
 
+			<div class="menu-bottom-half">
+				<div class="edit-divide"></div>
 
-			<!-- bottom stats -->
-			<div class="ui basic segment">
-				<div class="ui grid compact">
-
-					<div class="four wide column">
-						<button class="ui compact basic fluid icon button shrinking" v-if="!isEncrypted" 
-						v-on:click="$router.push(`/notes/open/${noteid}/menu/passwordprotect`)" data-tooltip="Add Password">
-							<i class="shield alternate icon"></i>
-							Protect
-						</button>
-						<button class="ui compact basic fluid icon button shrinking" v-if="isEncrypted && isDecrypted" v-on:click="disableEncryption" data-tooltip="Remove Password Protection">
-							<i class="unlock icon"></i>
-							Un-protect
-						</button>
-					</div>
-					<div class="four wide column">
-						<!-- Archive Button  -->
-						<button class="ui compact basic fluid icon button shrinking" v-on:click="onToggleArchived" :data-tooltip="archived == 1?'Move to main list':'Move to Archive'">
-							<span v-if="archived == 1"><i class="green archive icon"></i> Archived</span>
-							<span v-if="archived != 1"><i class="archive icon"></i> Archive</span>
-						</button>
-					</div>
-					<div class="four wide column">
-						<!-- Pin button -->
-						<button class="ui compact basic fluid icon button shrinking" v-on:click="onTogglePinned" :data-tooltip="pinned == 1?'Un-pin from top':'Pin to top'">
-							<span v-if="pinned == 1"><i class="green pin icon"></i> Pinned</span>
-							<span v-if="pinned != 1"><i class="pin icon"></i> Pin</span>
-						</button></div>
-					<div class="four wide column">
-						<!-- files button -->
-						<button class="ui compact basic fluid icon button shrinking" v-on:click="openEditAttachment" data-tooltip="Files on note">
-							<i class="folder icon"></i> Files
-						</button>
-					</div>
-
-					<div class="one wide column"></div>
-					<div class="eight wide middle aligned column">
-						<span :data-tooltip="`Created: ${$helpers.timeAgo(created)}`">
-							Edited: {{ $helpers.timeAgo(updated) }} 
-						</span>
-					</div>
-					<div class="one wide column"></div>
+				
+				<div class="edit-button" v-on:click="undoCustom()" data-tooltip="Undo" data-position="bottom center" data-inverted>
+					<i class="undo icon"></i>
 				</div>
-			</div>
 
-			
-		</div>
+				<div class="edit-divide"></div>
 
-		<!-- && this.$store.getters.getIsUserOnMobile -->
-		<span class="note-status-indicator" v-on:click="save()" v-if="statusText != 'Saved' && $store.getters.getIsUserOnMobile">
-			<div class="ui green button">{{statusText}}</div>
-		</span>
+				<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/colors`)" data-tooltip="Note Color" data-position="bottom center" data-inverted>
+					<i class="paint brush icon"></i>
+				</div>
+				<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/tags`)" data-tooltip="Tags" data-position="bottom center" data-inverted>
+					<i class="tags icon"></i>
+				</div>
+				<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/images`)" data-tooltip="Images" data-position="bottom center" data-inverted>
+					<i class="image icon"></i>
+				</div>
 
-		<!-- Note options on the bottom of note -->
-		<div class="all-settings">
-
-			<div class="note-menu shrink-icons-on-mobile">
-
-				<nm-button tip="Task List" v-on:click.native="toggleList('ul')" icon="tasks" text="Check" />
-
-				<nm-button tip="Numbered List" v-on:click.native="toggleList('ol')" icon="list ol" text="List"/>
-	
-				<!-- colors button -->
-				<nm-button
-					v-on:click.native="$router.push(`/notes/open/${noteid}/menu/colors`)"
-					icon="paint brush"
-					text="Color"
-					tip="Note Color"
-				></nm-button>
-
-				<!-- Tags  -->
-				<nm-button
-					v-on:click.native="$router.push(`/notes/open/${noteid}/menu/tags`)"
-					icon="tags"
-					text="Tags"
-					tip="Tags"
-				></nm-button>
-
-				<!-- add images panel -->
-				<nm-button
-					v-on:click.native="$router.push(`/notes/open/${noteid}/menu/images`)"
-					icon="image"
-					text="Images"
-					tip="Images"
-				></nm-button>
-
-				<!-- file upload button  -->
 				<file-upload-button 
-					class="nm-button" 
+					data-tooltip="Upload File" data-position="bottom center" data-inverted
+					class="edit-button" 
 					:noteId="noteid" />
 
-				<nm-button 
-					icon="ellipsis horizontal" 
-					text="Options"
-					tip="More Options"
-					v-on:click.native="$router.push(`/notes/open/${noteid}/menu/options`)" />
+				<div class="edit-divide"></div>
 
+				<div class="edit-button" v-on:click="$router.push(`/notes/open/${noteid}/menu/options`)" data-tooltip="More Options" data-position="bottom center" data-inverted>
+					<i class="tools icon"></i>
+				</div>
+
+				<div class="edit-divide"></div>
+
+				<!-- protect -->
+				<div class="edit-button" v-if="!isEncrypted" 
+					v-on:click="$router.push(`/notes/open/${noteid}/menu/passwordprotect`)" data-tooltip="Password Protect" data-position="bottom center" data-inverted>
+					<i class="shield alternate icon"></i>
+				</div>
+
+				<!-- data-tooltip="Remove Password Protection" -->
+				<div class="edit-button" v-if="isEncrypted && isDecrypted" v-on:click="disableEncryption()" data-tooltip="Close" data-position="bottom center" data-inverted>
+					<i class="unlock icon"></i>
+				</div>
+
+				<div class="edit-button" v-on:click="onToggleArchived()" :data-tooltip="archived == 1?'Move to main list':'Move to Archive'" data-position="bottom center" data-inverted>
+					<span v-if="archived == 1"><i class="green archive icon"></i></span>
+					<span v-if="archived != 1"><i class="archive icon"></i></span>
+				</div>
+
+				<div class="edit-button" v-on:click="onTogglePinned" :data-tooltip="pinned == 1?'Un-pin from top':'Pin to top'" data-position="bottom center" data-inverted>
+					<span v-if="pinned == 1"><i class="green pin icon"></i></span>
+					<span v-if="pinned != 1"><i class="pin icon"></i></span>
+				</div>
+
+				<!-- data-tooltip="Files on note" -->
+				<div class="edit-button" v-on:click="openEditAttachment" data-tooltip="Files" data-position="bottom center" data-inverted>
+					<i class="folder icon"></i>
+				</div>
+				
 			</div>
+
+			<!-- 		<span :data-tooltip="`Created: ${$helpers.timeAgo(created)}`">
+				Edited: {{ $helpers.timeAgo(updated) }} 
+			</span> -->
 		</div>
 
-	</div>
+		<div class="bottom-edit-menu"></div>
+
+		<div class="input-container-wrapper" :class="{ 'size-down':(sizeDown == true)}" >
+
+			<!-- Loading indicator  -->
+			<div v-if="loading" class="loading-note">
+				<div class="ui active dimmer">
+					<div class="ui text loader">{{loadingMessage}}</div>
+				</div>
+			</div>
+
+			<!-- Squire box grows -->
+			<div class="note-wrapper" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">
+
+				<!-- Title input area  -->
+				<textarea 
+					ref="titleTextarea"
+					v-on:keyup="titleResize"
+					v-on:keydown="titleResize"
+					@keydown.enter.exact.prevent="editor.focus(); editor.moveCursorToEnd()"
+					rows="1"
+					:style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}"
+					v-on:blur="save" type="text" v-model="noteTitle" placeholder="Title" class="stealth-input">
+				</textarea>
+
+				<!-- Squire Box - only appears if decrypted  -->
+				<div v-show="isDecrypted" id="squire-id" class="squire-box" ref="squirebox" placeholder="Note Text"></div>
+
+				<!-- Decrypt note prompt  -->
+				<div v-if="isEncrypted && !isDecrypted" class="ui basic padded segment">
+					<div class="ui raised segment">
+						<h3 class="ui center aligned icon header">
+							<i class="green lock alternate icon"></i>
+
+							<span v-if="!lockedOut">
+								This note is encrypted and requires a password to be opened.
+							</span>
+
+							<!-- note is locked for 5 minutes  -->
+							<span v-if="lockedOut">
+								To many unlock attempts. Note is locked for 5 minutes.
+							</span>
+						</h3>
+						<!-- Decrypt note  -->
+						<div class="ui form" v-if="!lockedOut">
+							<h5 class="ui horizontal divider header" v-if="passwordHint && passwordHint.length > 0">
+								Hint: {{ passwordHint }}
+							</h5>
+							<div class="field">
+								<input :name="`randomThing-${noteid}`" :id="`yupper-${noteid}`"type="password" v-model="password" placeholder="Note Password" v-on:keyup.enter="decryptNote" autofocus ref="decryptNotePrompt">
+							</div>
+							<div class="field">
+								<div v-on:click="decryptNote"  class="ui green fluid button" v-if="password.length >= 3">
+									Unlock Note
+								</div>
+								<div class="ui disabled fluid button" v-if="password.length < 3">
+									Unlock Note
+								</div>
+							</div>
+						</div>
+						
+					</div>
+				</div>
+
+				
+			</div>
+
+			<!-- && this.$store.getters.getIsUserOnMobile -->
+			<span class="note-status-indicator" v-on:click="save()" v-if="statusText != 'Saved' && $store.getters.getIsUserOnMobile">
+				<div class="ui green button">{{statusText}}</div>
+			</span>
+
+		</div>
 
 		<!-- color picker -->
 		<color-tooltip 
@@ -203,7 +201,6 @@
 		/>
 
 		<!-- Side slide menus for colors, tags, images and other options -->
-	
 		<side-slide-menu v-show="colors" v-on:close="colors = false" name="colors">
 			<color-picker
 				@changeColor="onChangeColor"
@@ -319,7 +316,13 @@
 			</div>
 		</side-slide-menu>
 
-		<!-- <div class="full-focus-shade"></div> -->
+		<!-- Show side shades if user is on desktop only -->
+		<div class="full-focus-shade shade1"
+			:class="{ 'slide-out-left':(sizeDown == true) }"
+			v-on:click="close()"></div>
+		<div class="full-focus-shade shade2" 
+			:class="{ 'slide-out-right':(sizeDown == true) }"
+			v-on:click="close()"></div>
 
 	</div>
 </template>
@@ -460,7 +463,7 @@
 			this.hashedPass = ''
 			clearTimeout(this.autoLockTimeout)
 
-			this.$io.emit('leave_room', this.rawTextId)
+			// this.$io.emit('leave_room', this.rawTextId)
 
 			this.$bus.$off('new_file_upload')
 
@@ -1263,6 +1266,9 @@
 				})
 			},
 			setupWebSockets(){
+
+				return
+
 				//Tell server to push this note into a room
 				this.$io.emit('join_room', this.rawTextId)
 
@@ -1354,33 +1360,98 @@
 
 <style type="text/css" scoped>
 
+	.full-focus-shade {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: var(--menu-accent);
+		z-index: 999;
+		cursor: pointer;
+		opacity: 0.8;
+	}
+	.shade1 {
+		left: 50%;
+	}
+	.shade2 {
+		right: 50%;
+	}
+
 	/* squire styles */
 	.input-container-wrapper {
-
-		display: block;
-		height: 100%;
-		width: 100%;
-		margin: 0;
-		padding: 0;
-		overflow: hidden;
-
-		display: flex;
-		flex-direction: column;
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 15%;
+		right: 15%;
+		z-index: 1005;
+		overflow-x: scroll;
+		scrollbar-width: none;
 	}
-	/*Three main elements nested in panel */
-		.note-menu {
-			/*position: absolute;*/
-			top: 0;/*
+	.note-wrapper {
+		background-color: var(--background_color);
+		border: 1px solid var(--menu-accent);;
+		margin: 45px 0 45px 0;
+	}
+
+	/*
+	
+	Edit Menu Styles START
+	
+	*/
+		.edit-menu {
+			position: fixed;
+			top: 0;
 			left: 0;
-			right: 0;*/
-
-			flex-grow: 0;
+			right: 0;
+			width: 100%;
+			display: block;
+			background-color: var(--background_color);
+			z-index: 1019;
+			padding: 3px 5px;
+			border: none;
+			border-bottom: 1px solid var(--menu-accent);
 		}
-		.note-wrapper {
-			flex-grow: 1;
-			overflow: scroll;
+		.menu-top-half, .menu-bottom-half {
+			display: inline-block;
 		}
-
+		.edit-spacer {
+			width: calc(15% - 10px);
+			display: inline-block;
+			height: 10px;
+			opacity: 0;
+		}
+		.edit-button {
+			background-color: var(--background_color);
+			color: var(--menu-text);
+			display: inline-block;
+			font-size: 1.4em;
+			padding: 4px 1px 5px 4px;
+			border-radius: 3px;
+			cursor: pointer;
+		}
+		.edit-button:hover {
+			background-color: var(--menu-accent);
+		}
+		.edit-divide {
+			display: inline-block;
+			background-color: var(--menu-accent);
+			height: 15px;
+			width: 1px;
+			margin: 0 3px;
+			padding: 0;
+		}
+		@media only screen and (max-width: 740px) {
+			.edit-spacer {
+				display: none;
+			}
+		}
+	/*
+	
+	Edit Menu Styles END
+	
+	*/
 
 	.stealth-input {
 		width: 100%;
@@ -1388,29 +1459,17 @@
 		background-color: rgba(255,255,255,0.1);
 		border: none;
 		font-size: 1.7em;
-		/*line-height: 1.7em;*/
 		color: var(--text_color);
 		resize: none;
 		overflow: hidden;
+		margin: 0;
 
 	}
 
 	/*Settings manager styles */
 	.all-settings {
-		/*border-top: 1px solid #534c68;*/
 		background: #221f2b;
-		/*position: absolute;*/
-		/*bottom: 40px;*/
-		/*right: 0;*/
-		/*left: 0;*/
 		z-index: 99;
-		/*border: 1px solid;*/
-		/*background-color: var(--background_color);*/
-		/*border-color: var(--border_color);*/
-		/*box-sizing: border-box;*/
-		/*border-radius: 7px;*/
-		/*box-shadow: 0px 3px 7px 0px rgba(140,140,140,1);*/
-		/*padding: 1.2em 0 0;*/
 		flex-grow: 0;
 	}
 	/*End Settings manager styles */
@@ -1421,12 +1480,8 @@
 	.master-note-edit {
 		position: fixed;
 		bottom: 0;
-		background: var(--background_color);
-		/*color: var(--text_color);*/
 		height: 100vh;
-		box-shadow: 0px 0px 5px 2px rgba(140,140,140,1);
 		z-index: 1001;
-		/*overflow-x: scroll;*/
 
 		overflow-y: scroll;
 		overflow-x: hidden;
@@ -1443,12 +1498,49 @@
 		left: 50%;
 		right: 0;
 	}
+	.master-note-edit.full-focus {
+		left: 15%;
+		right: 15%;
+	}
 	@media only screen and (max-width: 740px) {
-		.master-note-edit.position-0 {
+		.input-container-wrapper {
 			left: 0;
 			right: 0;
-			top: 0;
+			top: 35px;
+			bottom: 40px;
+			background-color: var(--background_color);
+		}
+		.note-wrapper {
+			margin: 0;
+			border: none;
+		}
+		.shade1, .shade2 {
+			right: 150%;
+		}
+		/*menu overwrites */
+		.bottom-edit-menu {
+			position: fixed;
 			bottom: 0;
+			left: 0;
+			right: 0;
+			width: 100%;
+			display: block;
+			background-color: var(--background_color);
+			z-index: 1012;
+			border: none;
+			border-top: 1px solid var(--menu-accent);
+			min-height: 40px;
+		}
+		.edit-menu {
+			text-align: center;
+		}
+		.menu-bottom-half {
+			z-index: 1005;
+			position: fixed;
+			bottom: 4px;
+			left: 0;
+			right: 0;
+			text-align: center;
 		}
 	}
 
@@ -1457,10 +1549,9 @@
 		left: 50%;
 		right: 0%;
 	}
-/*	.master-note-edit.position-1.full-focus {
-		left: 20%;
-		right: 20%;
-	}*/
+	
+	
+
 	.master-note-edit.position-2 {
 		left: 0%;
 		right: 50%;
@@ -1474,17 +1565,59 @@
 		box-shadow: none;
 	}
 
-	.size-down {
-		animation: size-down 0.5s ease;
-	}
+	/* animations START */
 
-	@keyframes size-down {
-		0% {
-			top: 0;
+		.slide-out-top {
+			animation: slide-out-top 0.5s ease;
 		}
-		100% {
-			top: 150vh;
+
+		@keyframes slide-out-top {
+			0% {
+				top: 0;
+			}
+			100% {
+				top: -100px;
+			}
 		}
-	}
+
+		.size-down {
+			animation: size-down 0.5s ease;
+		}
+
+		@keyframes size-down {
+			0% {
+				top: 0;
+			}
+			100% {
+				top: 150vh;
+			}
+		}
+
+		.slide-out-left {
+			animation: slide-out-left 0.5s ease;
+		}
+
+		@keyframes slide-out-left {
+			0% {
+				left: 85%;
+			}
+			100% {
+				left: 150%;
+			}
+		}
+
+		.slide-out-right {
+			animation: slide-out-right 0.5s ease;
+		}
+
+		@keyframes slide-out-right {
+			0% {
+				right: 85%;
+			}
+			100% {
+				right: 150%;
+			}
+		}
+	/* animations END */
 
 </style>
\ No newline at end of file
diff --git a/client/src/components/SideSlideMenuComponent.vue b/client/src/components/SideSlideMenuComponent.vue
index 6bfe344..7e5707c 100644
--- a/client/src/components/SideSlideMenuComponent.vue
+++ b/client/src/components/SideSlideMenuComponent.vue
@@ -5,7 +5,7 @@
 		left: 0;
 		right: 55%;
 		bottom: 0;
-		z-index: 400;
+		z-index: 1020;
 		overflow: hidden;
 		height: 100%;
 
@@ -24,14 +24,14 @@
 		position: fixed;
 		top: 0;
 		left: 0;
-		right: 50%;
+		right: 0;
 		bottom: 0;
 		color: red;
-		background-color: rgba(0,0,0,0.5);
+		/*background-color: rgba(0,0,0,0.5);*/
 		/*background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 55%);*/
-		z-index: 399;
+		z-index: 1019;
 		overflow: hidden;
-		cursor: pointer;
+		/*cursor: pointer;*/
 	}
 	
 	.slide-shadow.full-shadow {
diff --git a/client/src/components/TextColorTooltipComponent.vue b/client/src/components/TextColorTooltipComponent.vue
index 2ab97d6..9323c36 100644
--- a/client/src/components/TextColorTooltipComponent.vue
+++ b/client/src/components/TextColorTooltipComponent.vue
@@ -1,7 +1,7 @@
 <style type="text/css" scoped>
 	.colors {
 		position: absolute;
-		z-index: 1005;
+		z-index: 1023;
 		top: 42px;
 		/*height: 100px;*/
 		/*width: 415px;*/
@@ -25,7 +25,7 @@
 		left: 0;
 		right: 0;
 		bottom: 0;
-		z-index: 1004;
+		z-index: 1022;
 		background-color: transparent;
 		width: 100vw;
 		height: 100vh;
diff --git a/client/src/main.js b/client/src/main.js
index b9bf09d..aceaeb5 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -10,7 +10,26 @@ import store from './stores/mainStore';
 import App from './App'
 import router from './router'
 
-import 'fomantic-ui-css/semantic.css';
+//Include entire fomantic ui library
+// import 'fomantic-ui-css/semantic.css';
+
+//Required site and reset CSS
+import 'fomantic-ui-css/components/reset.css'
+import 'fomantic-ui-css/components/site.css' //modified to remove included LATO fonts
+
+//Only include parts that are used
+import 'fomantic-ui-css/components/button.css'
+import 'fomantic-ui-css/components/container.css'
+import 'fomantic-ui-css/components/form.css'
+import 'fomantic-ui-css/components/grid.css'
+import 'fomantic-ui-css/components/header.css'
+import 'fomantic-ui-css/components/icon.css'
+import 'fomantic-ui-css/components/input.css'
+import 'fomantic-ui-css/components/segment.css'
+import 'fomantic-ui-css/components/label.css'
+
+
+
 require('./assets/semantic-helper.css')
 // Fonts 
 require('./assets/roboto-latin.woff2')
@@ -46,7 +65,6 @@ import Helpers from './Helpers'
 Vue.use(Vuex)
 Vue.config.productionTip = false
 
-
 new Vue({
   el: '#app',
   router,
diff --git a/client/src/pages/NotesPage.vue b/client/src/pages/NotesPage.vue
index c2e9ff8..bcbce2a 100644
--- a/client/src/pages/NotesPage.vue
+++ b/client/src/pages/NotesPage.vue
@@ -1,14 +1,15 @@
 <template>
 	<div class="ui basic segment no-fluf-segment">
 		
-		<div class="ui grid" :class="{ 'mush-it-up':showOneColumn() }" ref="content">
+		<div class="ui grid" ref="content">
 
 			<div class="sixteen wide column">
 				<!-- :class="{ 'sixteen wide column':showOneColumn(), 'sixteen wide column':!showOneColumn() }" -->
 				
 				<div class="ui stackable grid">
 					
-					<div class="ten wide column" :class="{ 'sixteen wide column':$store.getters.getIsUserOnMobile }">
+					<div class="ten wide column" 
+						:class="{ 'sixteen wide column':$store.getters.getIsUserOnMobile }">
 
 						<div class="ui basic button shrinking" 
 						v-on:click="updateFastFilters(3)" 
@@ -75,10 +76,7 @@
 				</h3>
 
 				<!-- Go to one wide column, do not do this on mobile interface -->
-				<div :class="{'one-column':( 
-						(activeNoteId1 != null || activeNoteId2 != null) &&
-						!$store.getters.getIsUserOnMobile
-					)}">
+				<div :class="{'one-column':( showOneColumn() )}">
 
 					<!-- render each section based on notes in set  -->
 					<div v-for="section,index in noteSections" v-if="section.length > 0" class="note-card-section">
@@ -136,7 +134,9 @@
 	export default {
 	name: 'SearchBar',
 		components: {
-			'input-notes': require('@/components/NoteInputPanel.vue').default,
+
+			'input-notes': () => import(/* webpackChunkName: "NoteInputPanel" */ '@/components/NoteInputPanel.vue'),
+
 			'note-title-display-card': require('@/components/NoteTitleDisplayCard.vue').default,
 			'fast-filters': require('@/components/FastFilters.vue').default,
 			'search-input': require('@/components/SearchInput.vue').default,
@@ -308,6 +308,9 @@
 		},
 		methods: {
 			showOneColumn(){
+
+				return this.$store.getters.getIsUserOnMobile
+
 				//If note 1 or 2 is open, show one column. Or if the user is on mobile
 				return (this.activeNoteId1 != null || this.activeNoteId2 != null) &&
 						!this.$store.getters.getIsUserOnMobile
@@ -729,9 +732,7 @@
 	}
 </script>
 <style type="text/css" scoped>
-	.mush-it-up {
-		width: calc(50% - 130px);
-	}
+
 	.detail {
 		float: right;
 	}
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 8eb9b54..a4bb26b 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -2,22 +2,14 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 //Breaking components into function sections allows webpack to load them dynamically
-//import HomePage from '@/pages/HomePage'
-const HomePage = () => import('@/pages/HomePage')
 
-// import LoginPage from '@/pages/LoginPage'
-const LoginPage = () => import('@/pages/LoginPage')
-
-// import HelpPage from '@/pages/HelpPage'
-const HelpPage = () => import('@/pages/HelpPage')
-
-// import SharePage from '@/pages/SharePage'
-const SharePage = () => import('@/pages/SharePage')
-
-//These guys can all be loaded as a chunk
-import NotesPage from '@/pages/NotesPage'
-import QuickPage from '@/pages/QuickPage'
-import AttachmentsPage from '@/pages/AttachmentsPage'
+const HomePage = () => import(/* webpackChunkName: "HomePage" */ '@/pages/HomePage')
+const LoginPage = () => import(/* webpackChunkName: "LoginPage" */ '@/pages/LoginPage')
+const HelpPage = () => import(/* webpackChunkName: "HelpPage" */ '@/pages/HelpPage')
+const SharePage = () => import(/* webpackChunkName: "SharePage" */ '@/pages/SharePage')
+const NotesPage = () => import(/* webpackChunkName: "NotesPage" */ '@/pages/NotesPage')
+const QuickPage = () => import(/* webpackChunkName: "QuickPage" */ '@/pages/QuickPage')
+const AttachmentsPage = () => import(/* webpackChunkName: "AttachmentsPage" */ '@/pages/AttachmentsPage')
 
 Vue.use(Router)
 
diff --git a/client/src/stores/mainStore.js b/client/src/stores/mainStore.js
index 50a916d..57ea220 100644
--- a/client/src/stores/mainStore.js
+++ b/client/src/stores/mainStore.js
@@ -53,6 +53,8 @@ export default new Vuex.Store({
 				'text_color': '#3d3d3d',
 				'outline_color': 'rgba(34,36,38,0.15)',
 				'border_color': 'rgba(34,36,38,0.20)',
+				'menu-accent': '#cecece',
+				'menu-text': '#5e6268',
 			}
 			//Night mode colors
 			if(state.nightMode){
@@ -61,6 +63,9 @@ export default new Vuex.Store({
 					'text_color': '#a98457',
 					'outline_color': '#a98457',
 					'border_color': 'rgba(255, 255, 255, 0.31)',
+					
+					'menu-accent': '#626262',
+					'menu-text': '#d9d9d9',
 				}
 			}