diff --git a/web/package-lock.json b/web/package-lock.json
index 0db28fe..fa95f94 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,7 +8,9 @@
 			"name": "qnote",
 			"version": "0.0.1",
 			"dependencies": {
-				"marked": "^15.0.7"
+				"highlight.js": "^11.11.1",
+				"marked": "^15.0.7",
+				"marked-highlight": "^2.2.1"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^4.0.0",
@@ -1552,6 +1554,15 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/highlight.js": {
+			"version": "11.11.1",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+			"integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/import-meta-resolve": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
@@ -1882,6 +1893,15 @@
 				"node": ">= 18"
 			}
 		},
+		"node_modules/marked-highlight": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/marked-highlight/-/marked-highlight-2.2.1.tgz",
+			"integrity": "sha512-SiCIeEiQbs9TxGwle9/OwbOejHCZsohQRaNTY2u8euEXYt2rYUFoiImUirThU3Gd/o6Q1gHGtH9qloHlbJpNIA==",
+			"license": "MIT",
+			"peerDependencies": {
+				"marked": ">=4 <16"
+			}
+		},
 		"node_modules/mini-svg-data-uri": {
 			"version": "1.4.4",
 			"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
diff --git a/web/package.json b/web/package.json
index f343cde..6c5c9d1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -32,6 +32,8 @@
 		"vite": "^6.0.0"
 	},
 	"dependencies": {
-		"marked": "^15.0.7"
+		"highlight.js": "^11.11.1",
+		"marked": "^15.0.7",
+		"marked-highlight": "^2.2.1"
 	}
 }
diff --git a/web/src/app.css b/web/src/app.css
index 64c3164..70ac8dd 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -37,7 +37,6 @@
 
 @layer base {
 	body {
-		/* @apply bg-[var(--light-background)] text-[var(--light-text)] transition-colors duration-200; */
 		@apply bg-[var(--light-background)] text-[var(--light-text)];
 	}
 
@@ -74,7 +73,7 @@
 	input,
 	textarea,
 	select {
-		@apply rounded-lg border border-[var(--light-text)]/20 bg-[var(--light-foreground)] px-3 py-2 text-[var(--light-text)] transition-colors duration-200;
+		@apply rounded-lg border px-3 py-2 transition-colors duration-200;
 	}
 
 	input:focus,
@@ -82,449 +81,25 @@
 		@apply ring-2 ring-[var(--light-accent)] outline-none;
 	}
 
-	.dark input,
-	.dark textarea,
-	.dark select {
-		@apply border-[var(--dark-text)]/20 bg-[var(--dark-foreground)] text-[var(--dark-text)];
-	}
-
 	.dark input:focus,
 	.dark select:focus {
 		@apply ring-[var(--dark-accent)];
 	}
 
 	button {
-		@apply cursor-pointer rounded-md bg-[var(--light-accent)] px-4 py-2 text-[var(--light-background)] transition-all duration-200 hover:bg-[var(--light-accent)]/80 focus:ring-2 focus:ring-[var(--light-accent)]/50 focus:outline-none disabled:opacity-50;
+		@apply cursor-pointer rounded-md bg-[var(--light-accent)] px-4 py-2 text-[var(--light-background)] transition-all duration-200 hover:bg-[var(--light-accent)]/80 focus:outline-none disabled:opacity-50;
 	}
 
 	.dark button {
-		@apply bg-[var(--dark-accent)] text-[var(--dark-background)] hover:bg-[var(--dark-accent)]/80 focus:ring-[var(--dark-accent)]/50;
+		@apply bg-[var(--dark-accent)] text-[var(--dark-background)] hover:bg-[var(--dark-accent)]/80;
 	}
 }
 
-/* Reusable component classes */
 @layer components {
-	.card {
-		@apply rounded-lg bg-[var(--light-foreground)] p-6 shadow-md transition-colors duration-200;
-	}
+	/* * * * * * * * * * * * */
+	/*   Loading animation   */
+	/* * * * * * * * * * * * */
 
-	.dark .card {
-		@apply bg-[var(--dark-foreground)];
-	}
-
-	.form-group {
-		@apply mb-4 space-y-2;
-	}
-
-	.form-label {
-		@apply block text-sm font-medium text-[var(--light-text)];
-	}
-
-	.dark .form-label {
-		@apply text-[var(--dark-text)];
-	}
-
-	/* Error messages */
-	.error {
-		@apply flex items-center justify-between rounded-lg bg-[var(--light-error-background)] p-3 text-sm text-[var(--light-error-text)];
-	}
-
-	.dark .error {
-		@apply bg-[var(--dark-error-background)] text-[var(--dark-error-text)];
-	}
-
-	/* Success messages */
-	.success {
-		@apply flex items-center justify-between rounded-lg bg-[var(--light-success-background)] p-3 text-sm text-[var(--light-success-text)];
-	}
-
-	.dark .success {
-		@apply bg-[var(--dark-success-background)] text-[var(--dark-success-text)];
-	}
-
-	.btn-primary {
-		@apply rounded-lg bg-[var(--light-accent)] text-[var(--light-background)];
-	}
-
-	.dark .btn-primary {
-		@apply bg-[var(--dark-accent)] text-[var(--dark-background)];
-	}
-
-	.btn-secondary {
-		@apply rounded-lg border border-[var(--light-text)]/20 bg-[var(--light-foreground)] text-[var(--light-text)];
-	}
-
-	.dark .btn-secondary {
-		@apply border-[var(--dark-text)]/20 bg-[var(--dark-foreground)] text-[var(--dark-text)];
-	}
-
-	.container-page {
-		@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
-	}
-
-	/* Sidebar */
-	@media (max-width: 768px) {
-		.sidebar {
-			@apply w-full max-w-full;
-		}
-
-		body.sidebar-open {
-			@apply overflow-hidden;
-		}
-	}
-
-	@media (min-width: 768px) {
-		.sidebar {
-			@apply w-64;
-		}
-	}
-
-	.sidebar {
-		@apply fixed z-10 flex h-full flex-col overflow-hidden border-r border-[var(--light-foreground)] bg-[var(--light-foreground)] transition-all duration-300;
-	}
-
-	.dark .sidebar {
-		@apply border-[var(--dark-foreground)] bg-[var(--dark-foreground)];
-	}
-
-	.sidebar-header,
-	.sidebar-footer {
-		/* Height should align with the navbar height for visual consistency */
-		@apply flex h-20 items-center justify-center border-b border-[var(--light-text)]/20 p-2;
-	}
-
-	.dark .sidebar-header,
-	.dark .sidebar-footer {
-		@apply border-[var(--dark-text)]/20;
-	}
-
-	.sidebar-footer {
-		@apply border-t;
-	}
-
-	.sidebar-item {
-		@apply cursor-pointer p-3 transition-colors hover:bg-[var(--light-background)];
-	}
-
-	.dark .sidebar-item {
-		@apply hover:bg-[var(--dark-background)];
-	}
-
-	.sidebar-item-active {
-		@apply bg-[var(--light-background)];
-	}
-
-	.dark .sidebar-item-active {
-		@apply bg-[var(--dark-background)];
-	}
-
-	.sidebar-item-content {
-		@apply flex flex-col;
-	}
-
-	.sidebar-item-bottom-row {
-		@apply mt-1 flex items-center justify-between;
-	}
-
-	.sidebar-item-text {
-		@apply text-xs text-[var(--light-text)]/60;
-	}
-
-	.dark .sidebar-item-text {
-		@apply text-[var(--dark-text)]/60;
-	}
-
-	.sidebar-item-delete {
-		@apply flex h-6.5 w-6.5 items-center justify-center rounded-lg border-1 border-[var(--light-accent)]/20 bg-transparent p-1 text-[var(--light-accent)]/50 hover:text-[var(--light-accent)];
-	}
-
-	.dark .sidebar-item-delete {
-		@apply border-[var(--dark-accent)]/20 text-[var(--dark-accent)]/50 hover:text-[var(--dark-accent)];
-	}
-
-	.sidebar-divider {
-		@apply divide-y divide-[var(--light-text)]/20;
-	}
-
-	.dark .sidebar-divider {
-		@apply divide-[var(--dark-text)]/20;
-	}
-
-	.search-bar {
-		@apply w-full rounded-lg py-2.5 pr-4 pl-11;
-	}
-
-	.search-bar-icon {
-		@apply absolute top-3 left-8 h-5 w-5 text-[var(--light-text)]/60;
-	}
-
-	.dark .search-bar-icon {
-		@apply text-[var(--dark-text)]/60;
-	}
-
-	.general-sidebar-icon {
-		@apply h-4 w-4 text-[var(--light-text)]/60;
-	}
-
-	.dark .general-sidebar-icon {
-		@apply text-[var(--dark-text)]/60;
-	}
-
-	/* Versions dropdown */
-	.versions-dropdown {
-		@apply absolute right-0 z-10 mt-2 w-52 origin-top-right space-y-0.5 rounded-md bg-[var(--light-foreground)] shadow-lg ring-1 ring-[var(--light-foreground)]/10 focus:outline-none;
-	}
-
-	.dark .versions-dropdown {
-		@apply bg-[var(--dark-foreground)] ring-[var(--dark-foreground)]/10;
-	}
-
-	.versions-dropdown-item {
-		@apply w-full bg-[var(--light-foreground)] p-3 transition-colors hover:bg-[var(--light-background)];
-	}
-
-	.dark .versions-dropdown-item {
-		@apply bg-[var(--dark-foreground)] hover:bg-[var(--dark-background)];
-	}
-
-	.versions-dropdown-item-active {
-		@apply bg-[var(--light-accent)]/20;
-	}
-
-	.dark .versions-dropdown-item-active {
-		@apply bg-[var(--dark-accent)]/20;
-	}
-
-	.versions-dropdown-item-text {
-		@apply text-xs text-[var(--light-text)]/60;
-	}
-
-	.dark .versions-dropdown-item-text {
-		@apply text-[var(--dark-text)]/60;
-	}
-
-	.versions-dropdown-divider {
-		@apply divide-y divide-[var(--light-text)]/20;
-	}
-
-	.dark .versions-dropdown-divider {
-		@apply divide-[var(--dark-text)]/20;
-	}
-
-	/* Note editor */
-	.note-title-container {
-		@apply mb-4;
-	}
-
-	.note-title-input {
-		@apply w-full rounded-2xl border-b border-[var(--light-text)]/20 bg-transparent pb-2 text-2xl font-bold focus:border-[var(--light-accent)];
-	}
-
-	.dark .note-title-input {
-		@apply border-[var(--dark-text)]/20 focus:border-[var(--dark-accent)];
-	}
-
-	.note-char-count {
-		@apply mt-2 text-xs text-[var(--light-text)]/60;
-	}
-
-	.dark .note-char-count {
-		@apply text-[var(--dark-text)]/60;
-	}
-
-	.note-editor-container {
-		@apply flex min-h-0 flex-1 flex-col overflow-auto;
-	}
-
-	.note-editor-wrapper {
-		@apply flex h-full flex-col;
-	}
-
-	.note-editor-content {
-		@apply flex h-full flex-col;
-	}
-
-	.note-textarea {
-		@apply h-full max-h-full min-h-1/2 w-full resize-none rounded-2xl bg-transparent p-3.5 font-mono outline-none focus:border-4 focus:border-[var(--light-accent)]/60;
-	}
-
-	.dark .note-textarea {
-		@apply focus:border-[var(--dark-accent)]/60;
-	}
-
-	.note-save-button {
-		@apply fixed right-10 bottom-10 z-10;
-	}
-
-	/* Markdown preview */
-	.markdown-preview h1 {
-		@apply mt-6 mb-4 border-b border-[var(--light-foreground)] pb-3 text-3xl;
-	}
-
-	.dark .markdown-preview h1 {
-		@apply border-[var(--dark-foreground)];
-	}
-
-	.markdown-preview h2 {
-		@apply mt-6 mb-4 text-2xl;
-	}
-
-	.markdown-preview h3 {
-		@apply mt-5 mb-3 text-xl;
-	}
-
-	.markdown-preview p {
-		@apply my-4;
-	}
-
-	.markdown-preview ul,
-	.markdown-preview ol {
-		@apply my-4 pl-5;
-	}
-
-	.markdown-preview ul {
-		@apply list-disc;
-	}
-
-	.markdown-preview ol {
-		@apply list-decimal;
-	}
-
-	.markdown-preview li > ul,
-	.markdown-preview li > ol,
-	.markdown-preview ul > ul,
-	.markdown-preview ul > ol,
-	.markdown-preview ol > ol,
-	.markdown-preview ol > ul {
-		@apply my-1; /* Reduced vertical spacing for nested lists */
-	}
-
-	.markdown-preview ul ul:has(> li > input[type="checkbox"]) {
-		@apply pl-11;
-	}
-
-	.markdown-preview ul ul ul:has(> li > input[type="checkbox"]) {
-		@apply pl-11;
-	}
-
-	.markdown-preview li span {
-		@apply ml-1.5;
-	}
-
-	.markdown-preview li:has(> input[type="checkbox"]) {
-		/* Bullet removal */
-		@apply -ml-4.5 list-none;
-	}
-
-	.markdown-preview input[type="checkbox"] {
-		/* Actual checkbox styling */
-		@apply mr-1 h-4 w-4 appearance-none rounded-full border-[var(--light-text)]/30 bg-[var(--light-foreground)] p-0 align-middle;
-	}
-
-	.dark .markdown-preview input[type="checkbox"] {
-		@apply border-[var(--dark-text)]/30 bg-[var(--dark-foreground)];
-	}
-
-	.markdown-preview input[type="checkbox"]:checked {
-		@apply border-[var(--light-accent)] bg-[var(--light-accent)];
-	}
-
-	.dark .markdown-preview input[type="checkbox"]:checked {
-		@apply border-[var(--dark-accent)] bg-[var(--dark-accent)];
-	}
-
-	.markdown-preview hr {
-		@apply border-[var(--light-text)]/20;
-	}
-
-	.dark .markdown-preview hr {
-		@apply border-[var(--dark-text)]/20;
-	}
-
-	.markdown-preview code {
-		@apply rounded bg-[var(--light-foreground)] px-1 py-0.5 font-mono;
-	}
-
-	.dark .markdown-preview code {
-		@apply bg-[var(--dark-foreground)];
-	}
-
-	.markdown-preview pre {
-		@apply overflow-x-auto rounded-2xl bg-[var(--light-foreground)] p-3;
-	}
-
-	.dark .markdown-preview pre {
-		@apply bg-[var(--dark-foreground)];
-	}
-
-	.markdown-preview blockquote {
-		@apply my-4 border-l-4 border-[var(--light-accent)] pl-4 text-[var(--light-text)] opacity-70;
-	}
-
-	.dark .markdown-preview blockquote {
-		@apply border-[var(--dark-accent)] text-[var(--dark-text)];
-	}
-
-	.markdown-preview a {
-		@apply text-[var(--light-accent)] underline;
-	}
-
-	.dark .markdown-preview a {
-		@apply text-[var(--dark-accent)];
-	}
-
-	.markdown-preview table {
-		@apply my-4 w-full border-collapse;
-	}
-
-	.markdown-preview th,
-	.markdown-preview td {
-		@apply border border-[var(--light-text)]/20 p-2 text-left;
-	}
-
-	.dark .markdown-preview th,
-	.dark .markdown-preview td {
-		@apply border-[var(--dark-text)]/20;
-	}
-
-	.markdown-preview th {
-		@apply bg-[var(--light-foreground)];
-	}
-
-	.dark .markdown-preview th {
-		@apply bg-[var(--dark-foreground)];
-	}
-
-	/* Settings modal */
-	.modal-backdrop {
-		@apply fixed inset-0 z-40 flex items-center justify-center backdrop-blur-xs;
-	}
-
-	.modal-content {
-		@apply mx-4 max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg border-2 border-[var(--light-accent)]/10 bg-[var(--light-background)] shadow-lg;
-	}
-
-	.dark .modal-content {
-		@apply border-[var(--dark-accent)]/10 bg-[var(--dark-background)];
-	}
-
-	.modal-section {
-		@apply border-b border-[var(--light-text)]/20 p-4;
-	}
-
-	.dark .modal-section {
-		@apply border-[var(--dark-text)]/20;
-	}
-
-	.modal-close-button {
-		@apply h-8 w-8 items-center justify-center rounded-md border-1 border-[var(--light-accent)]/20 bg-transparent p-1 text-[var(--light-accent)]/50 hover:text-[var(--light-accent)];
-	}
-
-	.dark .modal-close-button {
-		@apply border-[var(--dark-accent)]/20 text-[var(--dark-accent)]/50 hover:text-[var(--dark-accent)];
-	}
-
-	/* Loading spinner */
 	.loading-container {
 		@apply pointer-events-none flex h-screen w-full items-center justify-center;
 	}
@@ -567,7 +142,54 @@
 		}
 	}
 
-	/* Main layout */
+	/* * * * * * * * * * * * * */
+	/*   Authentication view   */
+	/* * * * * * * * * * * * * */
+
+	.auth-card {
+		@apply rounded-lg bg-[var(--light-foreground)] p-6 shadow-md transition-colors duration-200;
+	}
+
+	.auth-input-field {
+		@apply w-full rounded-lg border border-[var(--light-accent)]/20 bg-transparent;
+	}
+
+	.dark .auth-input-field {
+		@apply border-[var(--dark-accent)]/20;
+	}
+
+	.auth-button {
+		@apply w-full rounded-lg border border-[var(--light-accent)]/20 bg-[var(--light-accent)]/70 text-[var(--light-background)];
+	}
+
+	.dark .auth-button {
+		@apply border-[var(--dark-accent)]/20 bg-[var(--dark-accent)]/70 text-[var(--dark-background)];
+	}
+
+	.dark .auth-card {
+		@apply bg-[var(--dark-foreground)];
+	}
+
+	/* * * * * * */
+	/*   Forms   */
+	/* * * * * * */
+
+	.form-group {
+		@apply mb-4 space-y-2;
+	}
+
+	.form-label {
+		@apply block text-sm font-medium text-[var(--light-text)];
+	}
+
+	.dark .form-label {
+		@apply text-[var(--dark-text)];
+	}
+
+	/* * * * * * * * * * * * * */
+	/*   Primary view layout   */
+	/* * * * * * * * * * * * * */
+
 	.main-layout-container {
 		@apply flex h-screen w-full bg-[var(--light-background)];
 	}
@@ -576,20 +198,9 @@
 		@apply bg-[var(--dark-background)];
 	}
 
-	.content-wrapper {
-		@apply flex h-screen flex-1 flex-col overflow-hidden;
-	}
-
-	.note-content-fixed-width {
-		@apply mx-auto flex w-full max-w-[800px] flex-col px-8 py-0;
-		height: calc(100% - 5rem);
-	}
-
-	@media (max-width: 768px) {
-		.note-content-fixed-width {
-			@apply max-w-full px-4 py-0;
-		}
-	}
+	/* * * * * * * * * * */
+	/*   Notifications   */
+	/* * * * * * * * * * */
 
 	.main-info-popup {
 		/* Z-value should be set so that this is on top of the modal's background blur */
@@ -600,18 +211,225 @@
 		@apply ml-2 h-4 w-4 items-center justify-center rounded-md bg-transparent p-0 text-inherit;
 	}
 
-	.main-header {
-		/* 
-            Should have higher z-value than the contents, but still less than the sidebar
-            (otherwise the navbar and the sidebar shadows will seem uneven).
-        */
-		@apply z-5 flex h-20 items-center justify-between bg-[var(--light-foreground)] p-4 shadow-sm;
+	/* Error notifications */
+
+	.error {
+		@apply flex items-center justify-between rounded-lg bg-[var(--light-error-background)] p-3 text-sm text-[var(--light-error-text)];
 	}
 
-	.dark .main-header {
-		@apply bg-[var(--dark-foreground)];
+	.dark .error {
+		@apply bg-[var(--dark-error-background)] text-[var(--dark-error-text)];
 	}
 
+	/* Success notifications */
+
+	.success {
+		@apply flex items-center justify-between rounded-lg bg-[var(--light-success-background)] p-3 text-sm text-[var(--light-success-text)];
+	}
+
+	.dark .success {
+		@apply bg-[var(--dark-success-background)] text-[var(--dark-success-text)];
+	}
+
+	/* * * * * * * */
+	/*   Buttons   */
+	/* * * * * * * */
+
+	.btn-primary {
+		@apply rounded-lg bg-[var(--light-accent)] text-[var(--light-background)];
+	}
+
+	.dark .btn-primary {
+		@apply bg-[var(--dark-accent)] text-[var(--dark-background)];
+	}
+
+	.btn-secondary {
+		@apply rounded-lg border border-[var(--light-text)]/20 bg-[var(--light-foreground)] text-[var(--light-text)];
+	}
+
+	.dark .btn-secondary {
+		@apply border-[var(--dark-text)]/20 bg-[var(--dark-foreground)] text-[var(--dark-text)];
+	}
+
+	/* * * * * * * * * * * * */
+	/*   Content container   */
+	/* * * * * * * * * * * * */
+
+	.container-page {
+		@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+	}
+
+	/* * * * * * * * * */
+	/*     Sidebar     */
+	/* * * * * * * * * */
+
+	.mini-sidebar {
+		@apply flex w-14 flex-col items-center border-r border-[var(--light-accent)]/20 bg-[var(--light-foreground)] py-4;
+	}
+
+	.dark .mini-sidebar {
+		@apply border-[var(--dark-accent)]/20 bg-[var(--dark-foreground)];
+	}
+
+	.sidebar-button {
+		@apply flex h-8 w-8 items-center justify-center rounded-lg border border-[var(--light-accent)] bg-transparent p-0 text-[var(--light-text)] hover:bg-[var(--light-background)]/80;
+	}
+
+	.dark .sidebar-button {
+		@apply border-[var(--dark-accent)]/50 text-[var(--dark-text)] hover:bg-[var(--dark-background)]/80;
+	}
+
+	.sidebar {
+		@apply z-10 flex h-full flex-col overflow-hidden border-r border-[var(--light-accent)]/20 bg-[var(--light-foreground)] transition-all duration-300 ease-in-out;
+	}
+
+	.dark .sidebar {
+		@apply border-[var(--dark-accent)]/20 bg-[var(--dark-foreground)];
+	}
+
+	/* Take up full screen width on mobile */
+	@media (max-width: 768px) {
+		.sidebar {
+			/* Max width must take into account width of "mini sidebar" */
+			@apply w-[calc(100vw-3.5rem)];
+		}
+
+		body.sidebar-open {
+			@apply overflow-hidden;
+		}
+	}
+
+	/* 16rem width on desktop or equivalent screens */
+	@media (min-width: 768px) {
+		.sidebar {
+			@apply w-64;
+		}
+	}
+
+	.sidebar-header-container {
+		@apply flex items-center px-2.5 py-4.5;
+	}
+
+	.sidebar-header-link {
+		@apply flex items-center text-inherit no-underline;
+	}
+
+	.sidebar-header-logo {
+		@apply ml-2 h-7 w-7;
+	}
+
+	.sidebar-header-text {
+		@apply font-copernicus ml-2.5 text-center text-lg text-[var(--light-text)];
+	}
+
+	.dark .sidebar-header-text {
+		@apply text-[var(--dark-text)];
+	}
+
+	.sidebar-section-divider {
+		@apply mx-4 border-t border-[var(--light-text)]/20;
+	}
+
+	.dark .sidebar-section-divider {
+		@apply border-[var(--dark-text)]/20;
+	}
+
+	.sidebar-action-button {
+		@apply flex items-center rounded-lg border border-[var(--light-text)]/10 bg-transparent px-3 py-2 text-sm text-[var(--light-text)] hover:bg-[var(--light-background)]/50;
+	}
+
+	.dark .sidebar-action-button {
+		@apply border-[var(--dark-text)]/10 text-[var(--dark-text)] hover:bg-[var(--dark-background)]/80;
+	}
+
+	.sidebar-search-bar {
+		@apply w-full rounded-lg border border-[var(--light-text)]/10 bg-transparent py-2 pr-4 pl-11 text-sm text-[var(--light-text)] hover:bg-[var(--light-background)]/80;
+	}
+
+	.dark .sidebar-search-bar {
+		@apply border-[var(--dark-text)]/10 text-[var(--dark-text)] hover:bg-[var(--dark-background)]/80;
+	}
+
+	.sidebar-search-bar-icon {
+		@apply absolute top-3 left-6 h-4 w-4 text-[var(--light-text)]/60;
+	}
+
+	.dark .sidebar-search-bar-icon {
+		@apply text-[var(--dark-text)]/60;
+	}
+
+	.sidebar-list {
+		@apply flex cursor-pointer flex-col rounded-lg border border-[var(--light-text)]/10 bg-transparent px-3 py-2 text-sm text-[var(--light-text)] hover:bg-[var(--light-background)]/50;
+	}
+
+	.dark .sidebar-list {
+		@apply border-[var(--dark-text)]/10 bg-transparent text-[var(--dark-text)] hover:bg-[var(--dark-background)]/80;
+	}
+
+	.sidebar-list-active {
+		@apply border-[var(--light-accent)];
+	}
+
+	.dark .sidebar-list-active {
+		@apply border-[var(--dark-accent)];
+	}
+
+	.sidebar-list-item-title {
+		@apply font-copernicus truncate text-sm text-[var(--light-text)];
+	}
+
+	.dark .sidebar-list-item-title {
+		@apply text-[var(--dark-text)];
+	}
+
+	.sidebar-list-item-delete-button {
+		@apply ml-1 h-5.5 w-5.5 flex-shrink-0 border-[var(--light-accent)]/40 hover:bg-[var(--light-accent)]/20;
+	}
+
+	.dark .sidebar-list-item-delete-button {
+		@apply border-[var(--dark-accent)]/40 hover:bg-[var(--dark-accent)]/20;
+	}
+
+	.sidebar-list-item-metadata {
+		@apply mt-1 truncate text-xs text-[var(--light-text)]/40;
+	}
+
+	.dark .sidebar-list-item-metadata {
+		@apply text-[var(--dark-text)]/40;
+	}
+
+	.sidebar-search-info {
+		@apply p-4 text-center text-sm text-[var(--light-text)]/60;
+	}
+
+	.dark .sidebar-search-info {
+		@apply text-[var(--dark-text)]/60;
+	}
+
+	.sidebar-user-button-content-container {
+		@apply flex w-full items-center;
+	}
+
+	.sidebar-user-button-username-container {
+		@apply max-w-full flex-grow justify-center overflow-hidden px-2;
+	}
+
+	.sidebar-user-button-username-text {
+		@apply line-clamp-2 block max-w-full overflow-hidden text-ellipsis;
+	}
+
+	.sidebar-user-dropdown {
+		@apply absolute bottom-full left-2 mb-0 w-[95%] rounded-lg border border-[var(--light-accent)]/20 bg-[var(--light-foreground)] shadow-lg;
+	}
+
+	.dark .sidebar-user-dropdown {
+		@apply border-[var(--dark-accent)]/20 bg-[var(--dark-foreground)];
+	}
+
+	/* * * * * * * * * * * * */
+	/*   Primary workspace   */
+	/* * * * * * * * * * * * */
+
 	.main-content {
 		@apply flex min-h-0 flex-1 flex-col overflow-auto bg-[var(--light-background)] p-6;
 	}
@@ -620,6 +438,35 @@
 		@apply bg-[var(--dark-background)];
 	}
 
+	/* Minimize wasted screen height on short displays */
+	@media (max-width: 768px) {
+		.main-content {
+			@apply pb-2;
+		}
+	}
+
+	.content-wrapper {
+		@apply flex h-screen flex-1 flex-col overflow-hidden py-12;
+	}
+
+	.note-content-fixed-width {
+		@apply mx-auto flex h-full w-full max-w-[800px] flex-col px-8 py-0;
+	}
+
+	@media (max-width: 768px) {
+		.content-wrapper {
+			@apply py-0;
+		}
+
+		.note-content-fixed-width {
+			@apply max-w-full px-0 py-0;
+		}
+	}
+
+	/* * * * * * * * * * * */
+	/*   User greetings    */
+	/* * * * * * * * * * * */
+
 	.greeting-container {
 		@apply flex h-full flex-col items-center justify-center;
 	}
@@ -629,10 +476,442 @@
 	}
 
 	.greeting-bottom-link {
-		@apply cursor-pointer text-[var(--light-accent)] transition-colors duration-200 hover:underline;
+		@apply cursor-pointer text-[var(--light-accent)]/70 transition-colors duration-200 hover:underline;
 	}
 
-	.greeting-bottom-link {
+	.dark .greeting-bottom-link {
 		@apply text-[var(--dark-accent)];
 	}
+
+	/* * * * * * * * * * * * * */
+	/*    Note editor/viewer   */
+	/* * * * * * * * * * * * * */
+
+	.note-editor-content {
+		@apply flex h-full flex-col;
+	}
+
+	.note-title-container {
+		@apply mb-4;
+	}
+
+	.note-title-display {
+		@apply font-copernicus max-w-full pb-1 text-2xl wrap-break-word;
+	}
+
+	/* Limit title (display as input is always only one row tall) to max. 4 rows tall on short screens */
+	@media (max-width: 768px) {
+		.note-title-display {
+			@apply max-h-24 overflow-y-auto;
+			line-height: 1.2;
+		}
+	}
+
+	.note-title-input {
+		@apply w-full rounded-lg border-[var(--light-text)]/20 bg-transparent pb-2 text-2xl hover:bg-[var(--light-foreground)]/50 focus:border-1 focus:border-[var(--light-accent)]/50;
+	}
+
+	.dark .note-title-input {
+		@apply border-[var(--dark-text)]/20 hover:bg-[var(--dark-foreground)]/80 focus:border-[var(--dark-accent)]/50;
+	}
+
+	.note-char-count {
+		@apply my-2 text-xs text-[var(--light-text)]/50;
+	}
+
+	.dark .note-char-count {
+		@apply text-[var(--dark-text)]/50;
+	}
+
+	.note-action-container {
+		@apply mb-2.5 flex flex-wrap items-center justify-start space-x-2 gap-y-2 border-t border-[var(--light-text)]/10 pt-2.5;
+	}
+
+	.dark .note-action-container {
+		@apply border-[var(--dark-text)]/10;
+	}
+
+	.note-action-button {
+		@apply flex h-9 items-center justify-center rounded-lg border border-[var(--light-text)]/10 bg-transparent text-sm text-[var(--light-text)] hover:bg-[var(--light-foreground)]/50;
+	}
+
+	.dark .note-action-button {
+		@apply border-[var(--dark-text)]/10 text-[var(--dark-text)] hover:bg-[var(--dark-foreground)]/80;
+	}
+
+	.note-action-icon-button {
+		@apply flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--light-text)]/10 bg-transparent p-0 text-[var(--light-text)] hover:bg-[var(--light-foreground)]/80;
+	}
+
+	.dark .note-action-icon-button {
+		@apply border-[var(--dark-text)]/10 text-[var(--dark-text)] hover:bg-[var(--dark-foreground)]/80;
+	}
+
+	.note-mobile-save-button {
+		@apply fixed right-4 bottom-4 z-10 hidden h-10 w-10 items-center justify-center border border-[var(--light-accent)] bg-[var(--light-foreground)] p-0 text-[var(--light-text)]/80 shadow-lg;
+	}
+
+	.dark .note-mobile-save-button {
+		@apply border-[var(--dark-accent)]/50 bg-[var(--dark-foreground)] text-[var(--dark-text)]/80;
+	}
+
+	/* Modified save button positioning on short screens */
+	@media (max-width: 768px) {
+		.note-mobile-save-button {
+			@apply flex;
+		}
+
+		.note-action-icon-button {
+			@apply hidden;
+		}
+	}
+
+	.note-versions-dropdown {
+		@apply absolute top-9 right-0 z-10 mt-2 w-58 origin-top-right overflow-hidden rounded-lg border border-[var(--light-accent)]/20 bg-[var(--light-foreground)] shadow-lg;
+	}
+
+	.dark .note-versions-dropdown {
+		@apply border-[var(--dark-accent)]/20 bg-[var(--dark-foreground)];
+	}
+
+	.versions-dropdown-item-text {
+		@apply font-copernicus w-full justify-end truncate px-0 text-[var(--light-text)]/90;
+		letter-spacing: -0.02em;
+	}
+
+	.dark .versions-dropdown-item-text {
+		@apply text-[var(--dark-text)]/90;
+	}
+
+	.versions-dropdown-item-meta {
+		@apply text-xs text-[var(--light-text)]/60;
+	}
+
+	.dark .versions-dropdown-item-meta {
+		@apply text-[var(--dark-text)]/60;
+	}
+
+	.versions-dropdown-active-version {
+		@apply border-[var(--light-accent)];
+	}
+
+	.dark .versions-dropdown-active-version {
+		@apply border-[var(--dark-accent)];
+	}
+
+	.note-editor-container {
+		@apply flex min-h-0 flex-1 flex-col overflow-auto;
+	}
+
+	.note-editor-wrapper {
+		@apply flex h-full flex-col;
+	}
+
+	.note-textarea {
+		@apply h-full max-h-full min-h-1/2 w-full resize-none rounded-lg border-1 border-[var(--light-text)]/20 bg-transparent p-3.5 font-mono outline-none hover:bg-[var(--light-foreground)]/50 focus:border-3 focus:border-[var(--light-accent)]/70;
+	}
+
+	.dark .note-textarea {
+		@apply border-[var(--dark-text)]/20 hover:bg-[var(--dark-foreground)]/80 focus:border-[var(--dark-accent)]/80;
+	}
+
+	.note-save-button {
+		@apply fixed right-10 bottom-10 z-10;
+	}
+
+	/* * * * * * * * * * * * * */
+	/*    Rendered Markdown    */
+	/* * * * * * * * * * * * * */
+
+	.markdown-preview h1,
+	h2,
+	h3,
+	h4 {
+		@apply font-copernicus;
+	}
+
+	/* Headings */
+
+	.markdown-preview h1 {
+		@apply mt-6 mb-4 border-b border-[var(--light-foreground)] pb-3 text-3xl;
+	}
+
+	.dark .markdown-preview h1 {
+		@apply border-[var(--dark-foreground)];
+	}
+
+	.markdown-preview h2 {
+		@apply mt-6 mb-4 text-2xl;
+	}
+
+	.markdown-preview h3 {
+		@apply mt-5 mb-3 text-xl;
+	}
+
+	/* Regular text */
+
+	.markdown-preview p {
+		@apply my-4;
+	}
+
+	/* Regular lists */
+
+	.markdown-preview ul,
+	.markdown-preview ol {
+		@apply pl-5;
+	}
+
+	.markdown-preview ul {
+		@apply list-disc;
+	}
+
+	.markdown-preview ol {
+		@apply list-decimal;
+	}
+
+	/* Checkboxes ('todo items') */
+
+	.markdown-preview input[type="checkbox"] {
+		@apply mr-1 h-4 w-4 appearance-none rounded-md border-[var(--light-text)]/30 bg-[var(--light-foreground)] p-0 align-text-bottom;
+	}
+
+	.dark .markdown-preview input[type="checkbox"] {
+		@apply border-[var(--dark-text)]/30 bg-[var(--dark-foreground)];
+	}
+
+	.markdown-preview input[type="checkbox"]:checked {
+		@apply border-[var(--light-accent)] bg-[var(--light-accent)];
+	}
+
+	.dark .markdown-preview input[type="checkbox"]:checked {
+		@apply border-[var(--dark-accent)] bg-[var(--dark-accent)]/80;
+	}
+
+	/* Horizontal rules */
+
+	.markdown-preview hr {
+		@apply my-4 border-[var(--light-text)]/20;
+	}
+
+	.dark .markdown-preview hr {
+		@apply border-[var(--dark-text)]/20;
+	}
+
+	/* Inline code snippets */
+
+	.markdown-preview code {
+		@apply rounded-lg bg-[var(--light-foreground)] px-1 py-0.5 font-mono;
+	}
+
+	.dark .markdown-preview code {
+		@apply bg-[var(--dark-foreground)];
+	}
+
+	/* Code blocks & blockquotes */
+
+	.markdown-preview pre code {
+		@apply block bg-transparent px-0 py-0;
+	}
+
+	.markdown-preview pre {
+		@apply overflow-x-auto rounded-lg bg-[var(--light-foreground)] p-2;
+	}
+
+	.dark .markdown-preview pre {
+		@apply bg-[var(--dark-foreground)];
+	}
+
+	.markdown-preview blockquote {
+		@apply my-4 rounded-none border-l-4 border-[var(--light-accent)] pl-4 text-[var(--light-text)] opacity-70;
+	}
+
+	.dark .markdown-preview blockquote {
+		@apply border-[var(--dark-accent)] text-[var(--dark-text)];
+	}
+
+	/* Links */
+
+	.markdown-preview a {
+		@apply text-[var(--light-accent)] underline;
+	}
+
+	.dark .markdown-preview a {
+		@apply text-[var(--dark-accent)];
+	}
+
+	/* Tables & their contents */
+
+	.markdown-preview table {
+		@apply my-4 w-full border-collapse;
+	}
+
+	.markdown-preview th,
+	.markdown-preview td {
+		@apply border border-[var(--light-text)]/20 p-2 text-left;
+	}
+
+	.dark .markdown-preview th,
+	.dark .markdown-preview td {
+		@apply border-[var(--dark-text)]/20;
+	}
+
+	.markdown-preview th {
+		@apply bg-[var(--light-foreground)];
+	}
+
+	.dark .markdown-preview th {
+		@apply bg-[var(--dark-foreground)];
+	}
+
+	/* Codeblock syntax highlighting (highlight.js) */
+
+	.hljs {
+		display: block;
+		overflow-x: auto;
+		padding: 0.5em;
+		background: transparent;
+		color: var(--light-text);
+	}
+
+	.dark .hljs {
+		color: var(--dark-text);
+	}
+
+	/* Keywords */
+
+	.hljs-keyword,
+	.hljs-selector-tag,
+	.hljs-subst {
+		color: #8959a8;
+	}
+
+	.dark .hljs-keyword,
+	.dark .hljs-selector-tag,
+	.dark .hljs-subst {
+		color: #c792ea;
+	}
+
+	/* Strings */
+
+	.hljs-string,
+	.hljs-doctag,
+	.hljs-regexp {
+		color: #3c8548;
+	}
+
+	.dark .hljs-string,
+	.dark .hljs-doctag,
+	.dark .hljs-regexp {
+		color: #89ca78;
+	}
+
+	/* Numbers & booleans */
+
+	.hljs-number,
+	.hljs-literal {
+		color: #f5871f;
+	}
+
+	.dark .hljs-number,
+	.dark .hljs-literal {
+		color: #f78c6c;
+	}
+
+	/* Function names */
+
+	.hljs-title,
+	.hljs-section,
+	.hljs-selector-id {
+		color: #4271ae;
+	}
+
+	.dark .hljs-title,
+	.dark .hljs-section,
+	.dark .hljs-selector-id {
+		color: #82aaff;
+	}
+
+	/* Comments */
+
+	.hljs-comment {
+		color: #8e908c;
+	}
+
+	.dark .hljs-comment {
+		color: #676e95;
+	}
+
+	/* Variables */
+
+	.hljs-variable,
+	.hljs-template-variable {
+		color: #c82829;
+	}
+
+	.dark .hljs-variable,
+	.dark .hljs-template-variable {
+		color: #ff5874;
+	}
+
+	/* Class names */
+
+	.hljs-class .hljs-title {
+		color: #4271ae;
+	}
+
+	.dark .hljs-class .hljs-title {
+		color: #ffcb6b;
+	}
+
+	/* * * * * * * */
+	/*    Modals   */
+	/* * * * * * * */
+
+	.modal-backdrop {
+		@apply fixed inset-0 z-40 flex items-center justify-center backdrop-blur-xs;
+	}
+
+	.modal-content {
+		@apply mx-4 max-h-[90vh] w-full max-w-[90vw] overflow-y-auto rounded-lg border-2 border-[var(--light-accent)]/10 bg-[var(--light-background)] shadow-lg;
+	}
+
+	.dark .modal-content {
+		@apply border-[var(--dark-accent)]/10 bg-[var(--dark-background)];
+	}
+
+	.modal-section {
+		@apply border-b border-[var(--light-text)]/20 p-4;
+	}
+
+	.dark .modal-section {
+		@apply border-[var(--dark-text)]/20;
+	}
+
+	.modal-section-title {
+		@apply mb-4 text-lg;
+	}
+
+	.modal-table {
+		@apply w-full table-auto border-collapse;
+	}
+
+	.modal-table-row {
+		@apply border border-[var(--light-text)]/10;
+	}
+
+	.dark .modal-table-row {
+		@apply border-[var(--dark-text)]/10;
+	}
+
+	.modal-table-row-item {
+		@apply overflow-x-auto px-4 py-3 text-wrap;
+	}
+
+	.modal-table-head {
+		@apply text-left font-semibold text-[var(--light-text)]/80;
+	}
+
+	.dark .modal-table-head {
+		@apply text-[var(--dark-text)]/80;
+	}
 }
diff --git a/web/src/app.html b/web/src/app.html
index 718fae9..9eef4bd 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -21,6 +21,7 @@
             localStorage.setItem("darkMode", darkMode)
 	    </script>
 	</head>
+    <noscript><h2>You'll need to enable JavaScript to use this app.</h2></noscript>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
diff --git a/web/src/lib/components/AuthForm.svelte b/web/src/lib/components/AuthForm.svelte
index 6e16367..7f70b2a 100644
--- a/web/src/lib/components/AuthForm.svelte
+++ b/web/src/lib/components/AuthForm.svelte
@@ -1,24 +1,39 @@
 <script lang="ts">
-	import { cError } from "$lib/client"
-	import { isPasswordValid } from "$lib/utils"
+	import { cError } from "$lib/logic/client"
 	import { onMount } from "svelte"
 	import ThemeToggle from "./ThemeToggle.svelte"
+	import { isPasswordValid, isUsernameValid } from "$lib/util/authValidation"
 	export let formName: string
-	export let handler: (username: string, password: string) => Promise<void>
+	export let handler: (username: string, password: string) => Promise<void | null>
 	export let bottomText: string
 	export let bottomLink: string
 
 	let username = ""
 	let password = ""
+	let usernameError = ""
 	let passwordError = ""
 	let isFormValid = false
 
-	// Clear any errors when swapping between login/signup views
-	onMount(() => cError.set(null))
+	// TODO (optional feature):
+	// during `onMount`, check whether user is *already authenticated* (redirect straight to `/` if yes)
+
+	// clear any errors when swapping between login/signup views
+	onMount(() => ($cError = null))
+
+	const validateUsername = () => {
+		if (formName === "Login") {
+			// skip if logging into existing account
+			passwordError = ""
+			isFormValid = true
+			return
+		}
+
+		;[isFormValid, usernameError] = isUsernameValid(username)
+	}
 
 	const validatePassword = () => {
 		if (formName === "Login") {
-			// Skip if logging into existing account
+			// skip if logging into existing account
 			passwordError = ""
 			isFormValid = true
 			return
@@ -27,17 +42,22 @@
 		;[isFormValid, passwordError] = isPasswordValid(password)
 	}
 
-	// Update validation on password change (reactive dependency)
+	// reactive dependencies for monitoring changes to username and password
+	$: {
+		username
+		validateUsername()
+	}
+
 	$: {
 		password
 		validatePassword()
 	}
 
 	const handleSubmit = async () => {
-		cError.set(null)
+		$cError = null
 
 		if (formName === "Register" && !isFormValid) {
-			cError.set(passwordError)
+			$cError = usernameError !== "" ? usernameError : passwordError
 			return
 		}
 
@@ -46,7 +66,7 @@
 </script>
 
 <div class="flex min-h-screen items-center justify-center">
-	<div class="card rounded-4x1 grid w-[16rem] justify-items-center space-y-6 p-6">
+	<div class="auth-card rounded-4x1 grid w-[16rem] justify-items-center space-y-6 p-6">
 		{#if $cError}
 			<div class="error max-w-full overflow-hidden text-ellipsis text-center">
 				{$cError}
@@ -62,7 +82,7 @@
 					placeholder="Username"
 					required
 					autocomplete="username"
-					class="w-full"
+					class="auth-input-field"
 				/>
 			</div>
 
@@ -74,11 +94,11 @@
 					placeholder="Password"
 					required
 					autocomplete={formName === "Login" ? "current-password" : "new-password"}
-					class="w-full"
+					class="auth-input-field"
 				/>
 			</div>
 
-			<button type="submit" class="btn-primary w-full rounded-lg">
+			<button type="submit" class="auth-button">
 				{formName}
 			</button>
 		</form>
@@ -90,7 +110,7 @@
 	</div>
 </div>
 
-<!-- TODO: add footer with a random quote (font-copernicus) -->
+<!-- TODO: add footer with a randomly picked quote (font-copernicus) -->
 
 <div class="absolute right-4 top-4">
 	<ThemeToggle />
diff --git a/web/src/lib/components/NoteEditor.svelte b/web/src/lib/components/NoteEditor.svelte
index bb55478..d0c8700 100644
--- a/web/src/lib/components/NoteEditor.svelte
+++ b/web/src/lib/components/NoteEditor.svelte
@@ -1,19 +1,44 @@
 <script lang="ts">
 	import { onMount } from "svelte"
-	import { marked } from "marked"
-	import { TITLE_MAX_LENGTH } from "$lib/const"
-	import { apiClient, type FullNote } from "$lib/client"
+	import { Marked } from "marked"
+	import { markedHighlight } from "marked-highlight"
+	import hljs from "highlight.js"
+	import { cError, versionHistory } from "$lib/logic/client"
+	import ChevronDown from "$lib/icons/ChevronDown.svelte"
+	import ChevronUp from "$lib/icons/ChevronUp.svelte"
+	import EditPen from "$lib/icons/editor/EditPen.svelte"
+	import ViewEye from "$lib/icons/editor/ViewEye.svelte"
+	import Save from "$lib/icons/editor/Save.svelte"
+	import type { FullNote } from "$lib/logic/model"
 
-	// Props
+	// props
 	export let note: FullNote
 	export let isEditing = false
+	export let isVersionDropdownOpen = false
 	export let saveNote: (title: string, content: string) => Promise<void>
+	export let selectVersion: (versionID: string, isActiveVersion: boolean) => Promise<void>
 
-	// Local copy for editing (to prevent uploading every single keypress as unique version)
+	// constants
+	const TITLE_MAX_LENGTH = 150
+
+	// local state
 	let editableTitle = note.title
 	let editableContent = note.content
 
-	// Update the local copy when the note changes
+	// markdown parser with syntax highlight support
+	const marked = new Marked(
+		markedHighlight({
+			emptyLangClass: "hljs",
+			langPrefix: "hljs language-",
+			highlight(code, lang, info) {
+				const language = hljs.getLanguage(lang) ? lang : "plaintext"
+				// console.log(`syntax highlight language: ${language}`)
+				return hljs.highlight(code, { language }).value
+			}
+		})
+	)
+
+	// update the local copy when the note changes
 	$: if (note && note.id) {
 		editableTitle = note.title
 		editableContent = note.content
@@ -29,12 +54,12 @@
 		const { value } = event.target as HTMLTextAreaElement
 		editableContent = value
 
-		// Update title based on the first line if it starts with #
+		// update title based on the first line if it starts with #
 		const firstLine = editableContent.split("\n")[0]
 		if (firstLine && firstLine.startsWith("# ")) {
 			editableTitle = firstLine.substring(2).slice(0, TITLE_MAX_LENGTH)
 		} else if (!editableTitle || editableTitle === "Untitled Note") {
-			// Try to extract a title from the first non-empty line if there's no title yet
+			// try to extract a title from the first non-empty line if there's no title yet
 			const firstNonEmptyLine = editableContent.split("\n").find((line) => line.trim().length > 0)
 
 			if (firstNonEmptyLine) {
@@ -46,17 +71,38 @@
 		}
 	}
 
+	const isLatestVersion = (note: FullNote | null) => {
+		if (!note) {
+			return true
+		}
+
+		return note.isActiveVersion
+	}
+
+	const toggleEditMode = () => {
+		if (isLatestVersion(note)) {
+			isEditing = !isEditing
+			isVersionDropdownOpen = false
+		} else {
+			$cError = "Editing historical versions is prohibited."
+		}
+	}
+
 	const exitEditMode = () => {
 		isEditing = false
 	}
 
+	const toggleVersionDropdown = () => {
+		isVersionDropdownOpen = !isVersionDropdownOpen
+	}
+
 	const handleKeyDown = (event: KeyboardEvent) => {
-		// Ctrl+Enter or Command+Enter keyboard shortcut for saving the current note
+		// ctrl+enter or cmd+enter keyboard shortcut for saving the current note
 		if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
 			event.preventDefault()
 			handleSave()
 		}
-		// Esc keyboard shortcut for quitting edit mode
+		// esc keyboard shortcut for quitting edit mode
 		else if (event.key === "Escape") {
 			event.preventDefault()
 			exitEditMode()
@@ -81,24 +127,17 @@
 			return ""
 		}
 
-		// Enable Github flavored markdown rendering
+		// github flavored markdown rendering
 		marked.setOptions({
+			breaks: false,
 			gfm: true,
-			breaks: true
+			pedantic: false
 		})
 
-		let html = await marked(markdown)
+		// remove the most common zerowidth characters from the start of the file
+		marked.parse(markdown.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ""))
 
-		// Add spans to regular list items
-		html = html.replaceAll(/\<li\>([^\<].*)\<\/li\>/g, '<li><span class="list-text">$1</span></li>')
-
-		// Add spans to nested ordered/unordered lists
-		html = html.replaceAll(
-			/<li>([^<]+)(?=.*?<(?:ul|ol)[^>]*>)/g,
-			'<li><span class="list-text">$1</span></li>'
-		)
-
-		return html
+		return await marked.parse(markdown)
 	}
 
 	let textarea: HTMLTextAreaElement | null
@@ -111,10 +150,13 @@
 
 	onMount(() => {
 		if (isEditing && textarea) {
-			// Scrollbar is hidden in global CSS so flickering during resizing of the
+			// scrollbar is hidden in global CSS so flickering during resizing of the
 			// textarea shouldn't be an issue anymore
 			autoResize()
 		}
+
+		// close the versioning dropdown menu if it has been left open in the previously viewed notes
+		isVersionDropdownOpen = false
 	})
 
 	$: if (isEditing && textarea) {
@@ -134,28 +176,76 @@
 				placeholder="Title"
 				class="note-title-input"
 			/>
-			<div class="note-char-count ml-3">
+			<div class="note-char-count ml-2">
 				{editableTitle.length}/{TITLE_MAX_LENGTH} characters
 			</div>
-			<div class="note-char-count ml-3">
-				Last updated: {new Date(note.versionCreatedAt).toLocaleString()}
-				{#if !isEditing}
-					<!-- Minus 1 due to versioning beginning at 2 in the DB -->
-					• Version: {note.versionNumber - 1}
-				{/if}
-			</div>
 		{:else}
-			<h1 class="border-[var(--light-text)]/20 border-b pb-2 text-2xl font-bold">
+			<h1 class="note-title-display">
 				{note.title || "Untitled Note"}
 			</h1>
-			<div class="note-char-count">
-				Last updated: {new Date(note.versionCreatedAt).toLocaleString()}
-				{#if !isEditing}
-					<!-- Minus 1 due to versioning beginning at 2 in the DB -->
-					• Version: {note.versionNumber - 1}
+		{/if}
+
+		<!-- TODO: add pagination support for versions dropdown -->
+
+		<!-- Note action buttons -->
+		<div class="note-action-container">
+			<!-- Editor mode toggle button -->
+			{#if isLatestVersion(note)}
+				<button on:click={toggleEditMode} class="note-action-button w-28">
+					{#if isEditing}
+						<EditPen classString="mr-3 h-4 w-4" />
+					{:else}
+						<ViewEye classString="mr-3 h-4 w-4" />
+					{/if}
+					{isEditing ? "Editing" : "Viewing"}
+				</button>
+			{:else}
+				<button disabled class="note-action-button w-28 cursor-not-allowed opacity-40"
+					>Viewing</button
+				>
+			{/if}
+
+			<!-- Versioning dropdown -->
+			<div class="relative flex flex-col">
+				<button on:click={toggleVersionDropdown} class="note-action-button min-w-32">
+					Version {note.versionNumber - 1}
+
+					{#if isVersionDropdownOpen}
+						<ChevronUp classString="ml-1.5 h-4 w-4" />
+					{:else}
+						<ChevronDown classString="ml-1.5 h-4 w-4" />
+					{/if}
+				</button>
+
+				{#if isVersionDropdownOpen && $versionHistory && $versionHistory.length > 0}
+					<div class="note-versions-dropdown">
+						{#each $versionHistory as version, index}
+							<button
+								on:click={() => selectVersion(version.versionID, version.isActive)}
+								class="sidebar-action-button w-full flex-col rounded-none {index === 0
+									? 'rounded-t-lg'
+									: ''} {index === $versionHistory.length - 1 ? 'rounded-b-lg' : ''}
+                                    {version.isActive ? 'versions-dropdown-active-version' : ''}"
+							>
+								<p class="versions-dropdown-item-text">{version.title}</p>
+								<span class="versions-dropdown-item-meta"
+									>{version.createdAt.toLocaleString()}, v.{version.versionNumber}</span
+								>
+							</button>
+						{/each}
+					</div>
 				{/if}
 			</div>
-		{/if}
+
+			{#if isEditing}
+				<button
+					on:click={() => saveNote(editableTitle, editableContent)}
+					class="note-action-icon-button"
+				>
+					<Save classString="h-5 w-5" />
+				</button>
+			{/if}
+		</div>
 	</div>
 
 	<!-- Note content (takes up remaining vertical space) -->
@@ -170,20 +260,21 @@
 					placeholder="Markdown contents"
 					class="note-textarea"
 				></textarea>
+
+				<button
+					on:click={() => saveNote(editableTitle, editableContent)}
+					class="note-mobile-save-button"
+				>
+					<Save classString="h-6 w-6" />
+				</button>
 			</div>
 		{:else}
 			<!-- Rendered markdown preview -->
-			<div class="prose markdown-preview max-w-none p-4">
+			<div class="prose markdown-preview max-w-none">
 				{#await parseMarkdown(note.content) then html}
 					{@html html}
 				{/await}
 			</div>
 		{/if}
 	</div>
-
-	{#if isEditing}
-		<div class="note-save-button">
-			<button on:click={handleSave} class="btn-primary rounded-full"> Save </button>
-		</div>
-	{/if}
 </div>
diff --git a/web/src/lib/components/NoteView.svelte b/web/src/lib/components/NoteView.svelte
index 0cbcfa5..904f460 100644
--- a/web/src/lib/components/NoteView.svelte
+++ b/web/src/lib/components/NoteView.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { onDestroy, onMount } from "svelte"
 	import { goto } from "$app/navigation"
-	import ThemeToggle from "./ThemeToggle.svelte"
 	import Sidebar from "./Sidebar.svelte"
 	import NoteEditor from "./NoteEditor.svelte"
 	import SettingsModal from "./SettingsModal.svelte"
@@ -12,31 +11,33 @@
 		availableNotes,
 		versionHistory,
 		cError,
-		type FullNote,
 		cSuccess
-	} from "$lib/client"
-	import ToggleSidebar from "$lib/icons/ToggleSidebar.svelte"
-	import VersionArrow from "$lib/icons/VersionArrow.svelte"
+	} from "$lib/logic/client"
 	import Close from "$lib/icons/Close.svelte"
-	import { ERR_NOTIFICATION_DUR, SUC_NOTIFICATION_DUR } from "$lib/const"
 	import { generateGreeting } from "$lib/util/greetMessage"
-	import { get } from "svelte/store"
+	import { hashContent } from "$lib/util/contentValidation"
 
-	// State
+	// error/success notification display durations
+	const ERR_NOTIFICATION_DUR = 8 * 1000 // 8 s.
+	const SUC_NOTIFICATION_DUR = 8 * 1000 // 8 s.
+
+	// local state
 	let isComponentReady = false
-	let sidebarOpen = window.innerWidth > 768
 	let showSettings = false
-	let showVersionsDropdown = false
+	let isSidebarOpen = window.innerWidth > 768
+	let isVersionDropdownOpen = false
 	let isEditing = false
 	let errorTimeout: ReturnType<typeof setTimeout> | null = null
 	let successTimeout: ReturnType<typeof setTimeout> | null = null
+	let username = "friend"
 	let greetMessage = "What's up?"
+	let currentContentHash = ""
 
 	onMount(async (): Promise<any> => {
-		// The following fetch attempts to refresh any expired tokens automatically
+		// the following fetch attempts to refresh any expired tokens automatically
 		await apiClient.getCurrentUser()
 
-		// If still no current user after the fetch attempt, redirect to login
+		// if still no current user after the fetch attempt, redirect to login
 		if (!$currentUser) {
 			console.log("[VIEW] No user data found, routing to login page")
 			goto("/login")
@@ -44,19 +45,22 @@
 		}
 
 		await loadNotes()
-		const cUser = get(currentUser)
-		greetMessage = generateGreeting(cUser ? cUser.username : "friend")
+		username = $currentUser.username
+		greetMessage = generateGreeting(
+			// capitalization for the message
+			String(username).charAt(0).toUpperCase() + String(username).slice(1)
+		)
 
-		// Default to sidebar closed on mobile
+		// default to sidebar being initially closed on mobile
 		const handleResize = () => {
-			if (window.innerWidth < 768 && sidebarOpen) {
-				sidebarOpen = false
+			if (window.innerWidth < 768 && isSidebarOpen) {
+				isSidebarOpen = false
 			}
 		}
 
 		handleResize()
 
-		// Keep listening to browser's resize events
+		// keep listening to browser's resize events
 		window.addEventListener("resize", handleResize)
 
 		isComponentReady = true
@@ -74,95 +78,102 @@
 		}
 	}
 
-	const toggleVersionDropdown = () => {
-		showVersionsDropdown = !showVersionsDropdown
-	}
-
-	const toggleSidebar = () => {
-		sidebarOpen = !sidebarOpen
-	}
-
-	const closeSidebar = () => {
-		sidebarOpen = false
-	}
-
-	const toggleSettings = () => {
+	const toggleSettingsModal = () => {
 		showSettings = !showSettings
 	}
 
+	const toggleAdminModal = () => {
+		console.log("[DBG] Admin view is not implemented yet")
+	}
+
+	const toggleWebhookModal = () => {
+		console.log("[DBG] Webhooks aren't implemented yet")
+	}
+
+	const toggleTagModal = () => {
+		console.log("[DBG] Tags aren't implemented yet")
+	}
+
 	const createNewNote = async () => {
 		const newNote = await apiClient.createNote()
 
 		if (newNote) {
-			// Refresh notes list
+			// refresh notes list
 			await loadNotes()
 
-			// Get the full note details of the newly created note
+			// get the full note details of the newly created note
 			// (we need to find the ID from the updated `availableNotes`)
 			if ($availableNotes && $availableNotes.length > 0) {
-				const latestNote = $availableNotes[0] // Assuming the latest note is first
-				await selectNote(latestNote.id, true)
+				const latestNote = $availableNotes[0] // assuming the latest note is first
+				await selectNote(latestNote.id, true, false)
 			}
 
-			isEditing = true // Open brand new notes in edit mode by default
+			isEditing = true // open brand new notes in edit mode by default
 		}
 	}
 
-	const isLatestVersion = (note: FullNote | null) => {
-		if (!note) {
-			return true
+	const selectNote = async (noteID: string, fetchRemote: boolean, clearSelection: boolean) => {
+		if (clearSelection) {
+			currentFullNote.set(null)
+			return
 		}
 
-		return note.isActiveVersion
-	}
-
-	const selectNote = async (noteID: string, fetchRemote: boolean) => {
 		const note = await apiClient.getActiveFullNote(noteID, fetchRemote)
 
-		if (note) {
-			currentFullNote.set(note)
-			isEditing = false
+		if (!note) {
+			return
 		}
 
+		currentFullNote.set(note)
+		isEditing = false
+		currentContentHash = await hashContent(note.title + note.content)
+
+		console.log(`[VER] Current content hash: ${currentContentHash}`)
+
 		const history = await apiClient.getNoteHistory(noteID, fetchRemote)
 
 		if (history) {
 			versionHistory.set(history)
 		}
 
-		// MOBILE: Close sidebar when selecting a note from the list
+		// close sidebar on mobile as it takes the whole screen width when open
 		if (window.innerWidth < 768) {
-			closeSidebar()
+			isSidebarOpen = false
 		}
 	}
 
-	const selectVersion = async (versionID: string) => {
+	const selectVersion = async (versionID: string, isActiveVersion: boolean) => {
 		if ($currentFullNote) {
-			const note = await apiClient.getFullVersion($currentFullNote.id, versionID)
+			const note = await apiClient.getFullVersion($currentFullNote.id, versionID, isActiveVersion)
 
 			if (note) {
 				currentFullNote.set(note)
-				showVersionsDropdown = false
+				isVersionDropdownOpen = false
+			} else {
+				$cError = "Version could not be fetched."
 			}
 		}
 	}
 
-	const toggleEditMode = () => {
-		if (isLatestVersion($currentFullNote)) {
-			isEditing = !isEditing
-		} else {
-			cError.set("Editing historical versions is prohibited.")
-		}
-	}
-
 	const saveNote = async (title: string, content: string) => {
 		if ($currentFullNote) {
+			const newContentHash = await hashContent(title + content)
+
+			if (currentContentHash === newContentHash) {
+				console.log(`[VER] Content unchanged for ${$currentFullNote.id}, aborting request`)
+				$cSuccess = "No changes detected. Save skipped."
+
+				isEditing = false
+
+				return
+			}
+
 			await apiClient.createVersion($currentFullNote.id, title, content)
 
-			// Refresh the current note to get the latest version (+ assure that client and server are synced)
-			await selectNote($currentFullNote.id, true)
+			// refresh the current note to get the latest version (+ assure that client and server are synced)
+			await selectNote($currentFullNote.id, true, false)
 
-			// Refresh the notes list to update any changes (ordering based on `updatedAt` field)
+			// refresh the notes list to update any changes (ordering based on `updatedAt` field)
 			await loadNotes()
 
 			isEditing = false
@@ -172,15 +183,15 @@
 	const deleteNote = async (noteID: string) => {
 		await apiClient.deleteNote(noteID)
 
-		// If we're deleting the currently active note, clear the current note
+		// if we're deleting the currently active note, clear the current note
 		if ($currentFullNote && $currentFullNote.id === noteID) {
 			currentFullNote.set(null)
 		}
 
-		// Refresh the notes list due to updates being pushed to server
+		// refresh the notes list due to updates being pushed to server
 		await loadNotes()
 
-		cSuccess.set("Note deleted successfully.")
+		$cSuccess = "Note deleted successfully."
 	}
 
 	const logout = async () => {
@@ -188,7 +199,7 @@
 	}
 
 	const errorUnsubscribe = cError.subscribe((value) => {
-		// Clear any existing timeout to avoid multiple timeouts
+		// clear any existing timeout to avoid multiple timeouts
 		if (errorTimeout) {
 			clearTimeout(errorTimeout)
 			errorTimeout = null
@@ -196,13 +207,13 @@
 
 		if (value) {
 			errorTimeout = setTimeout(() => {
-				cError.set(null)
+				$cError = null
 			}, ERR_NOTIFICATION_DUR)
 		}
 	})
 
 	const successUnsubscribe = cSuccess.subscribe((value) => {
-		// Clear any existing timeout to avoid multiple timeouts
+		// clear any existing timeout to avoid multiple timeouts
 		if (successTimeout) {
 			clearTimeout(successTimeout)
 			successTimeout = null
@@ -210,7 +221,7 @@
 
 		if (value) {
 			successTimeout = setTimeout(() => {
-				cSuccess.set(null)
+				$cSuccess = null
 			}, SUC_NOTIFICATION_DUR)
 		}
 	})
@@ -219,7 +230,7 @@
 		errorUnsubscribe()
 		successUnsubscribe()
 
-		// Clear any pending timeouts
+		// clear any pending timeouts
 		if (errorTimeout) {
 			clearTimeout(errorTimeout)
 		}
@@ -237,7 +248,7 @@
 			<div class="main-info-popup">
 				<div class="error">
 					{$cError}
-					<button class="main-info-popup-button" on:click={() => cError.set(null)}>
+					<button class="main-info-popup-button" on:click={() => ($cError = null)}>
 						<Close />
 					</button>
 				</div>
@@ -249,100 +260,42 @@
 			<div class="main-info-popup">
 				<div class="success">
 					{$cSuccess}
-					<button class="main-info-popup-button" on:click={() => cSuccess.set(null)}>
+					<button class="main-info-popup-button" on:click={() => ($cSuccess = null)}>
 						<Close />
 					</button>
 				</div>
 			</div>
 		{/if}
 
-		<!-- Sidebar (2-way binding prop allows changing the same var. in either component) -->
+		<!-- Sidebar (2-way binded state) -->
 		<Sidebar
-			bind:sidebarOpen
+			bind:isSidebarOpen
+			{username}
 			notes={$availableNotes || []}
 			currentNote={$currentFullNote}
-			{toggleSettings}
+			{toggleSettingsModal}
+			{toggleAdminModal}
+			{toggleWebhookModal}
+			{toggleTagModal}
 			{logout}
 			{createNewNote}
 			{selectNote}
 			{deleteNote}
-			on:close={closeSidebar}
 		/>
 
 		<!-- Main content area -->
-		<div
-			class="content-wrapper transition-all duration-300"
-			class:md:-ml-64={!sidebarOpen}
-			class:md:ml-0={sidebarOpen}
-		>
-			<!-- Top navbar -->
-			<header class="main-header">
-				<button
-					on:click={toggleSidebar}
-					class="btn-secondary rounded-lg p-2"
-					aria-label="Toggle sidebar"
-				>
-					<ToggleSidebar />
-				</button>
-
-				<div class="flex items-center space-x-4 pl-2">
-					{#if $currentFullNote}
-						<!-- Note edit/preview button (only shown for latest version) -->
-						{#if isLatestVersion($currentFullNote)}
-							<button on:click={toggleEditMode} class="btn-primary rounded-full">
-								{isEditing ? "Preview" : "Edit"}
-							</button>
-						{:else}
-							<button disabled class="btn-primary cursor-not-allowed rounded-full opacity-40">
-								Edit
-							</button>
-						{/if}
-
-						<!-- Version history dropdown menu -->
-						<div class="relative">
-							<button
-								on:click={toggleVersionDropdown}
-								class="btn-secondary flex items-center rounded-full"
-							>
-								<span>Versions</span>
-								<VersionArrow />
-							</button>
-
-							{#if showVersionsDropdown && $versionHistory && $versionHistory.length > 0}
-								<div class="versions-dropdown">
-									{#each $versionHistory as version}
-										<button
-											on:click={() => selectVersion(version.versionID)}
-											class="versions-dropdown-item {$currentFullNote.versionNumber ===
-											version.versionNumber
-												? 'versions-dropdown-item-active'
-												: ''}"
-										>
-											<p class="versions-dropdown-item-text truncate font-bold">{version.title}</p>
-											<span class="versions-dropdown-item-text"
-												>{version.createdAt.toLocaleString()}</span
-											>
-											{#if version.isActive}<span
-													class="versions-dropdown-item-text ml-2 opacity-70">(active)</span
-												>{/if}
-										</button>
-									{/each}
-								</div>
-							{/if}
-						</div>
-					{/if}
-				</div>
-
-				<div class="flex items-center space-x-4 pl-2">
-					<ThemeToggle />
-				</div>
-			</header>
-
+		<div class="content-wrapper ml-0 transition-all duration-300">
 			<!-- Note content area with fixed width -->
 			<div class="note-content-fixed-width">
 				<main class="main-content">
 					{#if $currentFullNote}
-						<NoteEditor note={$currentFullNote} bind:isEditing {saveNote} />
+						<NoteEditor
+							note={$currentFullNote}
+							bind:isVersionDropdownOpen
+							bind:isEditing
+							{saveNote}
+							{selectVersion}
+						/>
 					{:else}
 						<div class="greeting-container">
 							<p class="greeting-message">{greetMessage}</p>
@@ -368,7 +321,7 @@
 
 		<!-- Settings Modal -->
 		{#if showSettings}
-			<SettingsModal onClose={toggleSettings} />
+			<SettingsModal onClose={toggleSettingsModal} />
 		{/if}
 	</div>
 {/if}
diff --git a/web/src/lib/components/SettingsModal.svelte b/web/src/lib/components/SettingsModal.svelte
index cfb0066..5eb1cde 100644
--- a/web/src/lib/components/SettingsModal.svelte
+++ b/web/src/lib/components/SettingsModal.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
-	import { apiClient, cSuccess } from "$lib/client"
+	import { apiClient, cSuccess, currentUser } from "$lib/logic/client"
 	import Close from "$lib/icons/Close.svelte"
-	import { isPasswordValid } from "$lib/utils"
+	import { isPasswordValid } from "$lib/util/authValidation"
 	import { onMount } from "svelte"
+	import { formatDate } from "$lib/util/contentVisual"
 
-	// Props
+	// props
 	export let onClose: () => void
 
+	const userData = $currentUser
+
 	let currentPassword = ""
 	let newPassword = ""
 	let confirmPassword = ""
@@ -21,10 +24,10 @@
 	let previouslyFocusedElement: HTMLElement | null = null
 
 	onMount(() => {
-		// Store the element that had focus before opening the modal
+		// store the element that had focus before opening the modal
 		previouslyFocusedElement = document.activeElement as HTMLElement
 
-		// Focus the first focusable element in the modal
+		// focus the first focusable element in the modal
 		if (modalContent !== null) {
 			const focusableElements = (modalContent as HTMLDivElement).querySelectorAll(
 				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
@@ -36,7 +39,7 @@
 			}
 		}
 
-		// When component unmounts, restore focus
+		// when component unmounts, restore focus
 		return () => {
 			if (previouslyFocusedElement) {
 				previouslyFocusedElement.focus()
@@ -63,7 +66,7 @@
 		;[isNewPasswordValid, changePasswordModalError] = isPasswordValid(newPassword)
 
 		if (!isNewPasswordValid) {
-			// Error will be automatically displayed inside corresponding modal section
+			// error will be automatically displayed inside corresponding modal section
 			return
 		}
 
@@ -73,7 +76,7 @@
 			newPassword = ""
 			confirmPassword = ""
 
-			cSuccess.set("Password updated successfully.")
+			$cSuccess = "Password updated successfully."
 
 			setTimeout(() => {
 				onClose()
@@ -96,14 +99,14 @@
 
 		try {
 			await apiClient.deleteCurrentUser(deleteConfirmPassword)
-			// The API client will handle the redirect to login page after successful deletion
+			// the API client will handle the redirect to login page after successful deletion
 		} catch (err) {
 			deleteUserModalError = err instanceof Error ? err.message : "Unknown error."
 		}
 	}
 
 	const handleClickOutside = (event: MouseEvent) => {
-		// Close the modal if user clicks outside of it
+		// close the modal if user clicks outside of it
 		const target = event.target as HTMLElement
 		if (target.classList.contains("modal-backdrop")) {
 			onClose()
@@ -111,7 +114,7 @@
 	}
 
 	const handleModalContentKeydown = (event: KeyboardEvent) => {
-		// Accessibility compliance handler, actual handling is done by the global keydown handler
+		// accessibility compliance handler, actual handling is done by the global keydown handler
 	}
 
 	const handleKeydown = (event: KeyboardEvent) => {
@@ -123,8 +126,6 @@
 
 <svelte:window on:keydown={handleKeydown} />
 
-<!-- TODO: add user details section (username, creation date, update date, admin status, etc.) -->
-
 <div
 	class="modal-backdrop"
 	on:click={handleClickOutside}
@@ -136,7 +137,7 @@
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<div
 		bind:this={modalContent}
-		class="modal-content"
+		class="modal-content max-w-md"
 		on:click|stopPropagation
 		on:keydown={handleModalContentKeydown}
 		role="document"
@@ -145,14 +146,45 @@
 		<!-- Header (title + close button) -->
 		<div class="modal-section flex items-center justify-between" role="heading" aria-level="1">
 			<h2 class="text-xl font-bold">Settings</h2>
-			<button on:click={onClose} class="modal-close-button" aria-label="Close settings">
+			<button on:click={onClose} class="sidebar-button" aria-label="Close settings">
 				<Close />
 			</button>
 		</div>
 
+		<!-- Account information -->
+		<div class="modal-section">
+			<h3 class="modal-section-title">Account Data</h3>
+			<table class="modal-table">
+				<tbody>
+					<tr class="modal-table-row">
+						<th class="modal-table-row-item modal-table-head">Username</th>
+						<td class="modal-table-row-item">{userData?.username}</td>
+					</tr>
+					<tr class="modal-table-row">
+						<th class="modal-table-row-item modal-table-head">Account created</th>
+						<td class="modal-table-row-item"
+							>{userData?.createdAt !== undefined ? formatDate(userData?.createdAt) : ""}</td
+						>
+					</tr>
+					<tr class="modal-table-row">
+						<th class="modal-table-row-item modal-table-head">Password updated</th>
+						<td class="modal-table-row-item"
+							>{userData?.createdAt !== undefined ? formatDate(userData?.updatedAt) : ""}</td
+						>
+					</tr>
+					{#if userData?.isAdmin}
+						<tr class="modal-table-row">
+							<th class="modal-table-row-item modal-table-head">Admin permissions</th>
+							<td class="modal-table-row-item">{userData?.isAdmin}</td>
+						</tr>
+					{/if}
+				</tbody>
+			</table>
+		</div>
+
 		<!-- Account settings -->
 		<div class="modal-section">
-			<h3 class="mb-4 text-lg font-bold">Account Settings</h3>
+			<h3 class="modal-section-title">Account Settings</h3>
 
 			{#if changePasswordModalError}
 				<div class="error mb-4" role="alert">
@@ -166,30 +198,43 @@
 				<!-- Current Password -->
 				<div class="form-group">
 					<label class="form-label" for="currentPassword">Current Password</label>
-					<input type="password" id="currentPassword" bind:value={currentPassword} class="w-full" />
+					<input
+						type="password"
+						id="currentPassword"
+						bind:value={currentPassword}
+						class="auth-input-field"
+					/>
 				</div>
 
 				<!-- New Password -->
 				<div class="form-group">
 					<label class="form-label" for="newPassword">New Password</label>
-					<input type="password" id="newPassword" bind:value={newPassword} class="w-full" />
+					<input
+						type="password"
+						id="newPassword"
+						bind:value={newPassword}
+						class="auth-input-field"
+					/>
 				</div>
 
 				<!-- Confirm New Password -->
 				<div class="form-group">
 					<label class="form-label" for="confirmPassword">Confirm New Password</label>
-					<input type="password" id="confirmPassword" bind:value={confirmPassword} class="w-full" />
+					<input
+						type="password"
+						id="confirmPassword"
+						bind:value={confirmPassword}
+						class="auth-input-field"
+					/>
 				</div>
 
-				<button on:click={changePassword} class="btn-primary w-full rounded-full">
-					Change Password
-				</button>
+				<button on:click={changePassword} class="auth-button"> Change Password </button>
 			</div>
 		</div>
 
-		<!-- Danger zone -->
+		<!-- "Danger zone" -->
 		<div class="modal-section">
-			<h3 class="mb-4 text-lg font-bold text-red-500">Danger Zone</h3>
+			<h3 class="modal-section-title text-red-500">Danger Zone</h3>
 
 			{#if deleteUserModalError}
 				<div class="error mb-4" role="alert">
@@ -210,7 +255,7 @@
 						type="password"
 						id="deleteConfirmPassword"
 						bind:value={deleteConfirmPassword}
-						class="w-full"
+						class="auth-input-field"
 					/>
 				</div>
 
@@ -221,14 +266,14 @@
 						type="text"
 						id="deleteConfirmText"
 						bind:value={deleteConfirmText}
-						class="w-full"
+						class="auth-input-field"
 						placeholder="DELETE"
 					/>
 				</div>
 
 				<button
 					on:click={deleteAccount}
-					class="w-full rounded-full bg-red-500 font-bold text-white hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50"
+					class="auth-button bg-red-500 text-white hover:bg-red-600 disabled:cursor-not-allowed disabled:opacity-50"
 					disabled={deleteConfirmText !== "DELETE" || !deleteConfirmPassword}
 				>
 					Delete My Account
diff --git a/web/src/lib/components/Sidebar.svelte b/web/src/lib/components/Sidebar.svelte
index 86be9c5..4ec588b 100644
--- a/web/src/lib/components/Sidebar.svelte
+++ b/web/src/lib/components/Sidebar.svelte
@@ -1,40 +1,48 @@
 <script lang="ts">
-	import type { NoteMetadata, FullNote } from "$lib/client"
-	import Close from "$lib/icons/Close.svelte"
-	import Create from "$lib/icons/Create.svelte"
-	import Delete from "$lib/icons/Delete.svelte"
-	import Logout from "$lib/icons/Logout.svelte"
-	import Search from "$lib/icons/Search.svelte"
-	import Settings from "$lib/icons/Settings.svelte"
+	import Create from "$lib/icons/sidebar/Create.svelte"
+	import Delete from "$lib/icons/sidebar/Delete.svelte"
+	import ChevronLeft from "$lib/icons/sidebar/ChevronLeft.svelte"
+	import ChevronRight from "$lib/icons/sidebar/ChevronRight.svelte"
+	import User from "$lib/icons/sidebar/User.svelte"
+	import ChevronDown from "$lib/icons/ChevronDown.svelte"
+	import ChevronUp from "$lib/icons/ChevronUp.svelte"
+	import Tag from "$lib/icons/sidebar/Tag.svelte"
+	import WebhookTruck from "$lib/icons/sidebar/WebhookTruck.svelte"
+	import Search from "$lib/icons/sidebar/Search.svelte"
+	import SettingsGear from "$lib/icons/sidebar/SettingsGear.svelte"
+	import AdminWrench from "$lib/icons/sidebar/AdminShield.svelte"
+	import Exit from "$lib/icons/sidebar/Exit.svelte"
+	import ThemeToggle from "./ThemeToggle.svelte"
+	import { formatDate } from "$lib/util/contentVisual"
+	import type { FullNote, NoteMetadata } from "$lib/logic/model"
 
-	// Props
-	export let sidebarOpen = true
+	// props
+	export let isSidebarOpen: boolean
+	export let username: string
 	export let notes: NoteMetadata[] = []
 	export let currentNote: FullNote | null = null
-	export let toggleSettings: () => void
+	export let toggleSettingsModal: () => void
+	export let toggleAdminModal: () => void
+	export let toggleWebhookModal: () => void
+	export let toggleTagModal: () => void
 	export let logout: () => Promise<void>
 	export let createNewNote: () => Promise<void>
-	export let selectNote: (noteID: string, fetchRemote: boolean) => Promise<void>
+	export let selectNote: (
+		noteID: string,
+		fetchRemote: boolean,
+		clearSelection: boolean
+	) => Promise<void>
 	export let deleteNote: (noteID: string) => Promise<void>
 
-	const formatDate = (dateString: string | Date): string => {
-		if (!dateString) {
-			return ""
-		}
+	// local state
+	let userMenuOpen = false
 
-		const d = new Date(dateString)
-		return d.toLocaleDateString(undefined, {
-			weekday: "short",
-			year: "2-digit",
-			month: "short",
-			day: "numeric",
-			hour: "numeric",
-			minute: "numeric"
-		})
+	const toggleSidebar = () => {
+		isSidebarOpen = !isSidebarOpen
 	}
 
-	const closeSidebar = () => {
-		sidebarOpen = false
+	const toggleUserMenu = () => {
+		userMenuOpen = !userMenuOpen
 	}
 
 	const handleDeleteNote = (event: MouseEvent, noteID: string) => {
@@ -47,115 +55,202 @@
 
 	const handleNoteKeydown = (event: KeyboardEvent, noteID: string) => {
 		if (event.key === "Enter" || event.key === " ") {
-			event.preventDefault() // Prevent page scroll on space
-			selectNote(noteID, true) // Sync with API due to pushing updates
+			event.preventDefault() // prevent page scroll on space
+			selectNote(noteID, true, false) // sync with API due to pushing updates
 		}
 	}
 
-	// Client-side search
+	// client-side search
 	let searchQuery = ""
 	$: filteredNotes = searchQuery
 		? notes.filter((note) => note.title.toLowerCase().includes(searchQuery.toLowerCase()))
 		: notes
 </script>
 
-<!-- TODO: add admin modal button (+ component similar to the settings modal) if the user is an admin -->
-<!-- TODO: component-level paging support (via the implementation in `pages.ts`) -->
+<!-- TODO: handle pagination support later if it becomes an issue (`util/itemPagination.ts`) -->
 
-<aside
-	class="sidebar z-10"
-	class:translate-x-0={sidebarOpen}
-	class:translate-x-[-100%]={!sidebarOpen}
-	class:fixed={true}
-	class:md:relative={true}
->
-	<!-- Sidebar header -->
-	<div class="sidebar-header">
-		<div class="mx-2 flex items-center justify-center">
-			<button
-				on:click={createNewNote}
-				class="btn-secondary h-9 w-9 p-2 text-center"
-				aria-label="Create new note"
-			>
-				<Create />
-			</button>
+<!-- Outmost sidebar container with collapsible functionality -->
+<div class="relative z-10 flex h-full">
+	<!-- Collapsed mini sidebar (always visible) -->
+	<div class="mini-sidebar">
+		<button
+			on:click={toggleSidebar}
+			class="sidebar-button"
+			aria-label={isSidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
+		>
+			{#if isSidebarOpen}
+				<ChevronLeft classString="h-5 w-5" />
+			{:else}
+				<ChevronRight classString="h-5 w-5" />
+			{/if}
+		</button>
 
-			<!-- Search bar -->
-			<div class="pl-4.5 relative">
-				<input type="text" placeholder="Search" bind:value={searchQuery} class="search-bar" />
-				<Search />
-			</div>
+		<!-- Mini sidebar icons -->
+		{#if !isSidebarOpen}
+			<div class="mt-6 flex flex-col gap-4">
+				<button on:click={createNewNote} class="sidebar-button" aria-label="Create new note">
+					<Create classString="h-5 w-5" />
+				</button>
+
+				<button on:click={toggleWebhookModal} class="sidebar-button" aria-label="View webhooks">
+					<WebhookTruck classString="h-5 w-5" />
+				</button>
 
-			<!-- Close button visible only on mobile -->
-			<div class="pl-4.5 relative">
 				<button
-					on:click={closeSidebar}
-					class="btn-secondary h-9 w-9 p-2 text-center md:hidden"
-					aria-label="Close sidebar"
+					on:click={toggleTagModal}
+					class="sidebar-button"
+					aria-label="View tags & expiration"
 				>
-					<Close />
+					<Tag classString="h-5 w-5" />
 				</button>
 			</div>
+		{/if}
+
+		<!-- Should be roughly in the center of the mini sidebar despite the absolute positioning -->
+		<div class="absolute bottom-4 left-3">
+			<ThemeToggle />
 		</div>
 	</div>
 
-	<!-- Notes list -->
-	<div class="flex-1 overflow-y-auto">
-		{#if filteredNotes.length > 0}
-			<ul class="sidebar-divider" role="listbox">
-				{#each filteredNotes as note}
-					<li
-						class="sidebar-item"
-						class:sidebar-item-active={currentNote && note.id === currentNote.id}
-						on:click={() => selectNote(note.id, false)}
-						on:keydown={(e) => handleNoteKeydown(e, note.id)}
-						tabindex="0"
-						role="option"
-						aria-selected={currentNote && note.id === currentNote.id}
-					>
-						<div class="sidebar-item-content">
-							<!-- Note metadata description -->
-							<h3 class="truncate font-bold">{note.title || "Untitled Note"}</h3>
-							<div class="sidebar-item-bottom-row">
-								<p class="sidebar-item-text mt-1 italic">
-									{formatDate(note.updatedAt)}
-								</p>
+	<!-- Expanded sidebar -->
+	<aside
+		class="sidebar"
+		class:translate-x-0={isSidebarOpen}
+		class:translate-x-[-100%]={!isSidebarOpen}
+		class:hidden={!isSidebarOpen}
+		class:md:relative={true}
+	>
+		<!-- Header with app logo and display name -->
+		<div class="sidebar-header-container">
+			<!-- svelte-ignore a11y_invalid_attribute -->
+			<a href="#" class="sidebar-header-link" on:click={() => selectNote("", false, true)}>
+				<img src="favicon.svg" alt="Logo" class="sidebar-header-logo" />
+				<span class="sidebar-header-text">QueNote</span>
+			</a>
+		</div>
 
-								<!-- Note delete button -->
+		<div class="sidebar-section-divider"></div>
+
+		<!-- Action buttons (same functionality as mini sidebar icons) -->
+		<div class="flex flex-col px-2 py-3">
+			<button on:click={createNewNote} class="sidebar-action-button mb-1">
+				<Create classString="mr-3 h-5 w-5" />
+				Create note
+			</button>
+
+			<button on:click={toggleWebhookModal} class="sidebar-action-button mb-1">
+				<WebhookTruck classString="mr-3 h-5 w-5" />
+				Webhooks
+			</button>
+
+			<button on:click={toggleTagModal} class="sidebar-action-button">
+				<Tag classString="mr-3 h-5 w-5" />
+				Note tags
+			</button>
+		</div>
+
+		<div class="relative flex flex-col px-2 pb-3">
+			<input type="text" placeholder="Search" bind:value={searchQuery} class="sidebar-search-bar" />
+			<Search classString="sidebar-search-bar-icon" />
+		</div>
+
+		<div class="sidebar-section-divider"></div>
+
+		<!-- Notes list -->
+		<div class="flex-1 overflow-y-auto p-2">
+			{#if filteredNotes.length > 0}
+				<ul class="space-y-1" role="listbox">
+					{#each filteredNotes as note}
+						<li
+							class="sidebar-list"
+							class:sidebar-list-active={currentNote && note.id === currentNote.id}
+							on:click={() => selectNote(note.id, false, false)}
+							on:keydown={(e) => handleNoteKeydown(e, note.id)}
+							tabindex="0"
+							role="option"
+							aria-selected={currentNote && note.id === currentNote.id}
+						>
+							<div class="flex w-full items-start justify-between">
+								<h3 class="sidebar-list-item-title">
+									{note.title || "Untitled Note"}
+								</h3>
+
+								<!-- Delete button -->
 								<button
 									on:click={(e) => handleDeleteNote(e, note.id)}
-									class="sidebar-item-delete"
+									class="sidebar-button sidebar-list-item-delete-button"
 									aria-label="Delete note"
 								>
-									<Delete />
+									<Delete classString="h-3 w-3" />
 								</button>
 							</div>
-						</div>
-					</li>
-				{/each}
-			</ul>
-		{:else}
-			<div class="sidebar-item-text p-4 text-center">
-				{searchQuery ? "No notes match your search" : "No notes yet"}
-			</div>
-		{/if}
-	</div>
 
-	<!-- Sidebar footer -->
-	<div class="sidebar-footer">
-		<div class="flex justify-between">
-			<button on:click={logout} class="btn-secondary rounded-full p-2" aria-label="Logout">
-				<Logout />
-			</button>
-
-			<!-- It's better for UX that the logout button isn't on the right side -->
-			<button
-				on:click={toggleSettings}
-				class="btn-secondary rounded-full p-2"
-				aria-label="Toggle settings"
-			>
-				<Settings />
-			</button>
+							<p class="sidebar-list-item-metadata">
+								{formatDate(note.updatedAt)}
+							</p>
+						</li>
+					{/each}
+				</ul>
+			{:else}
+				<div class="sidebar-search-info">
+					{searchQuery ? "No notes match your search" : "No notes yet"}
+				</div>
+			{/if}
 		</div>
-	</div>
-</aside>
+
+		<div class="sidebar-section-divider"></div>
+
+		<!-- User section (single button) with dropdown -->
+		<div class="relative flex flex-col px-2 py-3">
+			<button
+				on:click={toggleUserMenu}
+				class="sidebar-action-button flex-wrap justify-between px-4 py-4"
+			>
+				<div class="sidebar-user-button-content-container">
+					<User classString="h-6 w-6 flex-shrink-0" />
+
+					<div class="sidebar-user-button-username-container">
+						<span class="sidebar-user-button-username-text">Logged in as {username}</span>
+					</div>
+
+					{#if userMenuOpen}
+						<ChevronDown classString="h-6 w-6 flex-shrink-0" />
+					{:else}
+						<ChevronUp classString="h-6 w-6 flex-shrink-0" />
+					{/if}
+				</div>
+			</button>
+
+			<!-- User actions dropdown menu -->
+			{#if userMenuOpen}
+				<div class="sidebar-user-dropdown">
+					<div class="flex flex-col p-0">
+						<button
+							on:click={toggleSettingsModal}
+							class="sidebar-action-button rounded-none rounded-t-lg border-0 border-b"
+						>
+							<SettingsGear classString="mr-3 h-5 w-5" />
+							Settings
+						</button>
+
+						<button
+							on:click={toggleAdminModal}
+							class="sidebar-action-button rounded-none border-0 border-y"
+						>
+							<AdminWrench classString="mr-3 h-5 w-5" />
+							Admin view
+						</button>
+
+						<button
+							on:click={logout}
+							class="sidebar-action-button rounded-none rounded-b-lg border-0 border-t"
+						>
+							<Exit classString="mr-3 h-5 w-5" />
+							Log out
+						</button>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</aside>
+</div>
diff --git a/web/src/lib/components/ThemeToggle.svelte b/web/src/lib/components/ThemeToggle.svelte
index 95b44a4..3f3d353 100644
--- a/web/src/lib/components/ThemeToggle.svelte
+++ b/web/src/lib/components/ThemeToggle.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Moon from "$lib/icons/Moon.svelte"
-	import Sun from "$lib/icons/Sun.svelte"
+	import Moon from "$lib/icons/theme/Moon.svelte"
+	import Sun from "$lib/icons/theme/Sun.svelte"
 	import { themeState } from "$lib/state.svelte"
 	import { onMount } from "svelte"
 
@@ -15,7 +15,7 @@
 		document.documentElement.classList.toggle("dark", themeState.isDarkMode)
 		localStorage.setItem("darkMode", themeState.isDarkMode ? "true" : "false")
 	}}
-	class="btn-secondary p-2"
+	class="sidebar-button"
 	aria-label={themeState.isDarkMode ? "Switch to light mode" : "Switch to dark mode"}
 >
 	{#if themeState.isDarkMode}
diff --git a/web/src/lib/const.ts b/web/src/lib/const.ts
deleted file mode 100644
index f32c6d1..0000000
--- a/web/src/lib/const.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export const API_BASE_ADDR = import.meta.env.PROD ? "/api" : "http://localhost:8080/api"
-
-// Lifetimes of *in-memory* authentication tokens in milliseconds
-export const AT_EXP_MS = 15 * 60 * 1000 // 15 min.
-export const CSRF_EXP_MS = 12 * 60 * 60 * 1000 // 12 h.
-export const REFRESH_BUF = 30 * 1000 // 30 s.
-
-// User registration password restrictions
-export const MIN_PASSWORD_LENGTH = 12
-export const MAX_PASSWORD_LENGTH = 72
-export const MIN_PASSWORD_ENTROPY = 60.0
-export const ENTROPY_CLASSES: Array<[RegExp, number]> = [
-	[/[a-z]/, 24], // 26
-	[/[A-Z]/, 24], // 26
-	[/\d/, 10],
-	[/[!@#$%^&*()\-_+=\[\]{}|;:'",.<>\/?`~\\]/, 32] // 40
-]
-
-export const TITLE_MAX_LENGTH = 150
-
-export const UUID_REGEX = new RegExp(
-	"^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$",
-	"i"
-)
-
-// View cookie configuration (holds UNIX timestamp value of the actual refresh token cookie's expiration date)
-export const VIEW_COOKIE_PATH = import.meta.env.VITE_VIEW_COOKIE_PATH || "/"
-export const VIEW_COOKIE_DOMAIN = import.meta.env.VITE_VIEW_COOKIE_DOMAIN || "localhost"
-export const COOKIE_SAME_SITE = import.meta.env.VITE_COOKIE_SAME_SITE || "strict"
-export const COOKIE_SECURE = import.meta.env.PROD ? true : false
-
-// Error/success notification display durations
-export const ERR_NOTIFICATION_DUR = 8 * 1000 // 8 s.
-export const SUC_NOTIFICATION_DUR = 8 * 1000 // 8 s.
diff --git a/web/src/lib/icons/ChevronDown.svelte b/web/src/lib/icons/ChevronDown.svelte
new file mode 100644
index 0000000..86825a0
--- /dev/null
+++ b/web/src/lib/icons/ChevronDown.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
+	<path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/web/src/lib/icons/ChevronUp.svelte b/web/src/lib/icons/ChevronUp.svelte
new file mode 100644
index 0000000..2e598dc
--- /dev/null
+++ b/web/src/lib/icons/ChevronUp.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
+	<path d="M6 15L12 9L18 15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/web/src/lib/icons/Close.svelte b/web/src/lib/icons/Close.svelte
index ec489dc..8f710aa 100644
--- a/web/src/lib/icons/Close.svelte
+++ b/web/src/lib/icons/Close.svelte
@@ -1,3 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
 	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 </svg>
diff --git a/web/src/lib/icons/CreateNew.svelte b/web/src/lib/icons/CreateNew.svelte
deleted file mode 100644
index b6de604..0000000
--- a/web/src/lib/icons/CreateNew.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-	<path
-		fill-rule="evenodd"
-		d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
-		clip-rule="evenodd"
-	/>
-</svg>
diff --git a/web/src/lib/icons/Logout.svelte b/web/src/lib/icons/Logout.svelte
deleted file mode 100644
index f6efdd0..0000000
--- a/web/src/lib/icons/Logout.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg
-	viewBox="0 0 24 24"
-	class="general-sidebar-icon"
-	fill="none"
-	stroke="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path
-		d="M12 3V12M18.3611 5.64001C19.6195 6.8988 20.4764 8.50246 20.8234 10.2482C21.1704 11.994 20.992 13.8034 20.3107 15.4478C19.6295 17.0921 18.4759 18.4976 16.9959 19.4864C15.5159 20.4752 13.776 21.0029 11.9961 21.0029C10.2162 21.0029 8.47625 20.4752 6.99627 19.4864C5.51629 18.4976 4.36274 17.0921 3.68146 15.4478C3.00019 13.8034 2.82179 11.994 3.16882 10.2482C3.51584 8.50246 4.37272 6.8988 5.6311 5.64001"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-</svg>
diff --git a/web/src/lib/icons/ToggleSidebar.svelte b/web/src/lib/icons/ToggleSidebar.svelte
deleted file mode 100644
index 9475e14..0000000
--- a/web/src/lib/icons/ToggleSidebar.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	class="h-6 w-6"
-	fill="none"
-	viewBox="0 0 24 24"
-	stroke="currentColor"
->
-	<path
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="2"
-		d="M4 6h16M4 12h16M4 18h16"
-	/>
-</svg>
diff --git a/web/src/lib/icons/VersionArrow.svelte b/web/src/lib/icons/VersionArrow.svelte
deleted file mode 100644
index 51253c0..0000000
--- a/web/src/lib/icons/VersionArrow.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg class="ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-	<path
-		fill-rule="evenodd"
-		d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-		clip-rule="evenodd"
-	/>
-</svg>
diff --git a/web/src/lib/icons/editor/EditPen.svelte b/web/src/lib/icons/editor/EditPen.svelte
new file mode 100644
index 0000000..e7e2f19
--- /dev/null
+++ b/web/src/lib/icons/editor/EditPen.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
+	<path
+		d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z"
+	/>
+	<path
+		d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z"
+	/>
+</svg>
diff --git a/web/src/lib/icons/editor/Save.svelte b/web/src/lib/icons/editor/Save.svelte
new file mode 100644
index 0000000..86066f4
--- /dev/null
+++ b/web/src/lib/icons/editor/Save.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
+	<path
+		d="M15 20V15H9V20M18 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4H14.1716C14.702 4 15.2107 4.21071 15.5858 4.58579L19.4142 8.41421C19.7893 8.78929 20 9.29799 20 9.82843V18C20 19.1046 19.1046 20 18 20Z"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/></svg
+>
diff --git a/web/src/lib/icons/editor/ViewEye.svelte b/web/src/lib/icons/editor/ViewEye.svelte
new file mode 100644
index 0000000..b3be933
--- /dev/null
+++ b/web/src/lib/icons/editor/ViewEye.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
+<!-- TODO: this needs to be fixed :) -->
+
+<svg
+	viewBox="0 -4 20 20"
+	class={classString}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
+	<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+		<g transform="translate(-260.000000, -4563.000000)">
+			<g transform="translate(56.000000, 160.000000)">
+				<path
+					d="M216,4409.00052 C216,4410.14768 215.105,4411.07682 214,4411.07682 C212.895,4411.07682 212,4410.14768 212,4409.00052 C212,4407.85336 212.895,4406.92421 214,4406.92421 C215.105,4406.92421 216,4407.85336 216,4409.00052 M214,4412.9237 C211.011,4412.9237 208.195,4411.44744 206.399,4409.00052 C208.195,4406.55359 211.011,4405.0763 214,4405.0763 C216.989,4405.0763 219.805,4406.55359 221.601,4409.00052 C219.805,4411.44744 216.989,4412.9237 214,4412.9237 M214,4403 C209.724,4403 205.999,4405.41682 204,4409.00052 C205.999,4412.58422 209.724,4415 214,4415 C218.276,4415 222.001,4412.58422 224,4409.00052 C222.001,4405.41682 218.276,4403 214,4403"
+					fill="currentColor"
+				>
+				</path>
+			</g>
+		</g>
+	</g>
+</svg>
diff --git a/web/src/lib/icons/sidebar/AdminShield.svelte b/web/src/lib/icons/sidebar/AdminShield.svelte
new file mode 100644
index 0000000..603740a
--- /dev/null
+++ b/web/src/lib/icons/sidebar/AdminShield.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let classString: string
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	fill="none"
+	class={classString}
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
+	<path
+		d="M11.302 21.6149C11.5234 21.744 11.6341 21.8086 11.7903 21.8421C11.9116 21.8681 12.0884 21.8681 12.2097 21.8421C12.3659 21.8086 12.4766 21.744 12.698 21.6149C14.646 20.4784 20 16.9084 20 12V6.6C20 6.04207 20 5.7631 19.8926 5.55048C19.7974 5.36198 19.6487 5.21152 19.4613 5.11409C19.25 5.00419 18.9663 5.00084 18.3988 4.99413C15.4272 4.95899 13.7136 4.71361 12 3C10.2864 4.71361 8.57279 4.95899 5.6012 4.99413C5.03373 5.00084 4.74999 5.00419 4.53865 5.11409C4.35129 5.21152 4.20259 5.36198 4.10739 5.55048C4 5.7631 4 6.04207 4 6.6V12C4 16.9084 9.35396 20.4784 11.302 21.6149Z"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/web/src/lib/icons/sidebar/ChevronLeft.svelte b/web/src/lib/icons/sidebar/ChevronLeft.svelte
new file mode 100644
index 0000000..8f5a0ee
--- /dev/null
+++ b/web/src/lib/icons/sidebar/ChevronLeft.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	stroke="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M15 6L9 12L15 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/web/src/lib/icons/sidebar/ChevronRight.svelte b/web/src/lib/icons/sidebar/ChevronRight.svelte
new file mode 100644
index 0000000..fd1a069
--- /dev/null
+++ b/web/src/lib/icons/sidebar/ChevronRight.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	stroke="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M9 6L15 12L9 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/web/src/lib/icons/sidebar/Create.svelte b/web/src/lib/icons/sidebar/Create.svelte
new file mode 100644
index 0000000..c9a76e2
--- /dev/null
+++ b/web/src/lib/icons/sidebar/Create.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let classString: string
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
+	<path d="M4 12H20M12 4V20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/web/src/lib/icons/Delete.svelte b/web/src/lib/icons/sidebar/Delete.svelte
similarity index 75%
rename from web/src/lib/icons/Delete.svelte
rename to web/src/lib/icons/sidebar/Delete.svelte
index c5f3eda..c078fcf 100644
--- a/web/src/lib/icons/Delete.svelte
+++ b/web/src/lib/icons/sidebar/Delete.svelte
@@ -1,4 +1,14 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
 	<path d="M10 12V17" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
 	<path d="M14 12V17" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
 	<path d="M4 7H20" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
diff --git a/web/src/lib/icons/sidebar/Exit.svelte b/web/src/lib/icons/sidebar/Exit.svelte
new file mode 100644
index 0000000..58b2bc0
--- /dev/null
+++ b/web/src/lib/icons/sidebar/Exit.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let classString: string
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
+	<g id="Interface / Exit">
+		<path
+			id="Vector"
+			d="M12 15L15 12M15 12L12 9M15 12H4M4 7.24802V7.2002C4 6.08009 4 5.51962 4.21799 5.0918C4.40973 4.71547 4.71547 4.40973 5.0918 4.21799C5.51962 4 6.08009 4 7.2002 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V16.8036C20 17.9215 20 18.4805 19.7822 18.9079C19.5905 19.2842 19.2837 19.5905 18.9074 19.7822C18.48 20 17.921 20 16.8031 20H7.19691C6.07899 20 5.5192 20 5.0918 19.7822C4.71547 19.5905 4.40973 19.2839 4.21799 18.9076C4 18.4798 4 17.9201 4 16.8V16.75"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</g>
+</svg>
diff --git a/web/src/lib/icons/Search.svelte b/web/src/lib/icons/sidebar/Search.svelte
similarity index 73%
rename from web/src/lib/icons/Search.svelte
rename to web/src/lib/icons/sidebar/Search.svelte
index c6375c6..531e350 100644
--- a/web/src/lib/icons/Search.svelte
+++ b/web/src/lib/icons/sidebar/Search.svelte
@@ -1,8 +1,12 @@
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
 <svg
-	xmlns="http://www.w3.org/2000/svg"
-	class="search-bar-icon"
-	fill="none"
 	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
 	stroke="currentColor"
 >
 	<path
diff --git a/web/src/lib/icons/Settings.svelte b/web/src/lib/icons/sidebar/SettingsGear.svelte
similarity index 98%
rename from web/src/lib/icons/Settings.svelte
rename to web/src/lib/icons/sidebar/SettingsGear.svelte
index 5fc990a..8d2a3c4 100644
--- a/web/src/lib/icons/Settings.svelte
+++ b/web/src/lib/icons/sidebar/SettingsGear.svelte
@@ -1,8 +1,12 @@
+<script lang="ts">
+	export let classString: string
+</script>
+
 <svg
-	xmlns="http://www.w3.org/2000/svg"
-	class="general-sidebar-icon"
-	fill="none"
 	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
 	stroke="currentColor"
 >
 	<path
diff --git a/web/src/lib/icons/sidebar/Tag.svelte b/web/src/lib/icons/sidebar/Tag.svelte
new file mode 100644
index 0000000..a96db21
--- /dev/null
+++ b/web/src/lib/icons/sidebar/Tag.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
+	<path
+		d="M7.0498 7.0498H7.0598M10.5118 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V10.5118C3 11.2455 3 11.6124 3.08289 11.9577C3.15638 12.2638 3.27759 12.5564 3.44208 12.8249C3.6276 13.1276 3.88703 13.387 4.40589 13.9059L9.10589 18.6059C10.2939 19.7939 10.888 20.388 11.5729 20.6105C12.1755 20.8063 12.8245 20.8063 13.4271 20.6105C14.112 20.388 14.7061 19.7939 15.8941 18.6059L18.6059 15.8941C19.7939 14.7061 20.388 14.112 20.6105 13.4271C20.8063 12.8245 20.8063 12.1755 20.6105 11.5729C20.388 10.888 19.7939 10.2939 18.6059 9.10589L13.9059 4.40589C13.387 3.88703 13.1276 3.6276 12.8249 3.44208C12.5564 3.27759 12.2638 3.15638 11.9577 3.08289C11.6124 3 11.2455 3 10.5118 3ZM7.5498 7.0498C7.5498 7.32595 7.32595 7.5498 7.0498 7.5498C6.77366 7.5498 6.5498 7.32595 6.5498 7.0498C6.5498 6.77366 6.77366 6.5498 7.0498 6.5498C7.32595 6.5498 7.5498 6.77366 7.5498 7.0498Z"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/web/src/lib/icons/sidebar/User.svelte b/web/src/lib/icons/sidebar/User.svelte
new file mode 100644
index 0000000..a9a12e9
--- /dev/null
+++ b/web/src/lib/icons/sidebar/User.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
+	<path
+		d="M5 21C5 17.134 8.13401 14 12 14C15.866 14 19 17.134 19 21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/web/src/lib/icons/sidebar/WebhookTruck.svelte b/web/src/lib/icons/sidebar/WebhookTruck.svelte
new file mode 100644
index 0000000..af50142
--- /dev/null
+++ b/web/src/lib/icons/sidebar/WebhookTruck.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let classString = "h-6 w-6"
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	class={classString}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke="currentColor"
+>
+	<path
+		d="M18.5 18C18.5 19.1046 17.6046 20 16.5 20C15.3954 20 14.5 19.1046 14.5 18M18.5 18C18.5 16.8954 17.6046 16 16.5 16C15.3954 16 14.5 16.8954 14.5 18M18.5 18H21.5M14.5 18H13.5M8.5 18C8.5 19.1046 7.60457 20 6.5 20C5.39543 20 4.5 19.1046 4.5 18M8.5 18C8.5 16.8954 7.60457 16 6.5 16C5.39543 16 4.5 16.8954 4.5 18M8.5 18H13.5M4.5 18C3.39543 18 2.5 17.1046 2.5 16V7.2C2.5 6.0799 2.5 5.51984 2.71799 5.09202C2.90973 4.71569 3.21569 4.40973 3.59202 4.21799C4.01984 4 4.5799 4 5.7 4H10.3C11.4201 4 11.9802 4 12.408 4.21799C12.7843 4.40973 13.0903 4.71569 13.282 5.09202C13.5 5.51984 13.5 6.0799 13.5 7.2V18M13.5 18V8H17.5L20.5 12M20.5 12V18M20.5 12H13.5"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/web/src/lib/icons/Moon.svelte b/web/src/lib/icons/theme/Moon.svelte
similarity index 100%
rename from web/src/lib/icons/Moon.svelte
rename to web/src/lib/icons/theme/Moon.svelte
diff --git a/web/src/lib/icons/Sun.svelte b/web/src/lib/icons/theme/Sun.svelte
similarity index 100%
rename from web/src/lib/icons/Sun.svelte
rename to web/src/lib/icons/theme/Sun.svelte
diff --git a/web/src/lib/client.ts b/web/src/lib/logic/client.ts
similarity index 76%
rename from web/src/lib/client.ts
rename to web/src/lib/logic/client.ts
index 60cb628..062a101 100644
--- a/web/src/lib/client.ts
+++ b/web/src/lib/logic/client.ts
@@ -1,100 +1,37 @@
 import { get, writable, type Writable } from "svelte/store"
-import {
-	API_BASE_ADDR,
-	AT_EXP_MS,
-	COOKIE_SAME_SITE,
-	COOKIE_SECURE,
-	CSRF_EXP_MS,
-	REFRESH_BUF,
-	UUID_REGEX,
-	VIEW_COOKIE_DOMAIN,
-	VIEW_COOKIE_PATH
-} from "./const"
 import { goto } from "$app/navigation"
-import { usersPagination } from "./pages"
+import { usersPagination } from "../util/itemPagination"
+import {
+	FullNote,
+	NoteMetadata,
+	User,
+	VersionMetadata,
+	type ApiFullNoteResponse,
+	type ApiFullVersionResponse,
+	type ApiNoteMetadataResponse,
+	type ApiUserResponse,
+	type ApiVersionMetadataResponse,
+	type NewNoteResponse
+} from "./model"
 
-interface User {
-	id: string
-	username: string
-	isAdmin: boolean
-	createdAt: Date
-	updatedAt: Date
-}
+const API_BASE_ADDR = import.meta.env.PROD ? "/api" : "http://localhost:8080/api"
+const UUID_REGEX = new RegExp(
+	"^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$",
+	"i"
+)
 
-interface ApiUserResponse {
-	id: string
-	username: string
-	is_admin: boolean
-	created_at: string
-	updated_at: string
-}
+// lifetimes of *in-memory* authentication tokens in milliseconds
+const AT_EXP_MS = 15 * 60 * 1000 // 15 min.
+const CSRF_EXP_MS = 12 * 60 * 60 * 1000 // 12 h.
+const REFRESH_BUF = 30 * 1000 // 30 s.
 
-export interface FullNote {
-	id: string
-	owner: string
-	title: string
-	content: string
-	versionNumber: number
-	versionCreatedAt: Date
-	isActiveVersion: boolean
-	noteCreatedAt: Date
-	noteUpdatedAt: Date
-}
+// view cookie configuration (holds UNIX timestamp value of the actual refresh token cookie's expiration date)
+const VIEW_COOKIE_PATH = import.meta.env.VITE_VIEW_COOKIE_PATH || "/"
+const VIEW_COOKIE_DOMAIN = import.meta.env.VITE_VIEW_COOKIE_DOMAIN || "localhost"
+const COOKIE_SAME_SITE = import.meta.env.VITE_COOKIE_SAME_SITE || "strict"
+const COOKIE_SECURE = import.meta.env.PROD ? true : false
 
-interface ApiFullNoteResponse {
-	note_id: string
-	owner_id: string
-	title: string
-	content: string
-	version_number: number
-	version_created_at: string
-	note_created_at: string
-	note_updated_at: string
-}
-
-export interface NoteMetadata {
-	id: string
-	owner: string
-	title: string
-	updatedAt: Date
-}
-
-interface ApiNoteMetadataResponse {
-	note_id: string
-	owner_id: string
-	title: string
-	updated_at: string
-}
-
-interface NewNoteResponse {
-	title: string
-	content: string
-}
-
-interface VersionMetadata {
-	versionID: string
-	title: string
-	versionNumber: number
-	isActive: boolean
-	createdAt: Date
-}
-
-interface ApiVersionMetadataResponse {
-	version_id: string
-	title: string
-	version_number: number
-	created_at: string
-}
-
-interface ApiFullVersionResponse {
-	version_id: string
-	title: string
-	content: string
-	version_number: number
-	created_at: string
-}
-
-// Some of these could just be local variables as not all of them are being used globally
+// some of these could just be local variables as not all of them are being used globally
 export const currentUser: Writable<User | null> = writable(null)
 export const currentFullNote: Writable<FullNote | null> = writable(null)
 export const availableNotes: Writable<NoteMetadata[] | null> = writable(null)
@@ -108,13 +45,13 @@ export const cSuccess: Writable<string | null> = writable(null)
 class ApiClient {
 	private viewCookieName: string
 	private baseUrl: string
-	private lastAtUpdate = new Date(0) // Refreshing the page wipes access and CSRF tokens from memory -> Rotation needed
+	private lastAtUpdate = new Date(0) // refreshing the page wipes access and CSRF tokens from memory -> Rotation needed
 	private lastCsrfUpdate = new Date(0)
 	private refreshInProgress = false
 	private activeVersion = -1
 	private loadedNotesCache = new Map<string, FullNote>()
 	private loadedHistoryCache = new Map<string, VersionMetadata[]>()
-	private loadedVersionsCache = new Map<string, FullNote>() // Key: noteID + versionID
+	private loadedVersionsCache = new Map<string, FullNote>() // key: noteID + versionID
 
 	constructor(baseUrl: string) {
 		this.baseUrl = baseUrl
@@ -129,12 +66,9 @@ class ApiClient {
 		cError.set(null)
 		cSuccess.set(null)
 
-		// NOTE: If `handleResponse` is used, errors thrown from it will be caught here
+		// NOTE: if `handleResponse` is used, errors thrown from it will be caught here
 
 		try {
-			// Only bearers (JWT access tokens) need to be considered here as the refresh token cookies
-			// will be automatically included to corresponding requests by browser and CSRF rotation is
-			// handled by the `refreshAccessToken` method
 			if (options.useBearerAuth) {
 				try {
 					await this.checkAndRefreshAccessToken()
@@ -149,9 +83,9 @@ class ApiClient {
 		} catch (err) {
 			const errMsg = err instanceof Error ? err.message : "Unknown error"
 
-			// The suspension option is handy when we want to display the error inside a modal instead of in a global notification
+			// the suspension option is handy when we want to display the error inside a modal instead of in a global notification
 			if (options.suspendGlobalErr) {
-				// Throw the same error to the next handler (should be handled inside the caller component)
+				// throw the same error to the next handler (should be handled inside the caller component)
 				throw new Error(errMsg)
 			} else {
 				cError.set(errMsg)
@@ -165,14 +99,14 @@ class ApiClient {
 		return null
 	}
 
-	// Should be attached to routes that handle authentication with the bearer token (access token)
+	// should be attached to routes that handle authentication with the bearer token (access token)
 	private async handleResponse<T>(
 		response: Response,
 		options: { useBearerAuth: boolean }
 	): Promise<T> {
 		if (!response.ok) {
 			if (response.status === 401 && options.useBearerAuth) {
-				// This should never happen due to the token expiration checks we make client-side,
+				// this should never happen due to the token expiration checks we make client-side,
 				// but it's still good to have as a fallback
 				try {
 					console.log("[RES] Unexpected 401 caught, attempting to refresh...")
@@ -184,7 +118,7 @@ class ApiClient {
 				}
 			}
 
-			// Capitalize the error message and display (only if not 401)
+			// capitalize the error message and display (only if not 401)
 			const { error } = await response.json()
 			const dError = error[0].toUpperCase() + error.substr(1).toLowerCase() + "."
 
@@ -195,7 +129,7 @@ class ApiClient {
 	}
 
 	private async checkAndRefreshAccessToken(): Promise<void> {
-		// Notably we must check whether we even have an authentication cookie present
+		// notably we must check whether we even have an authentication cookie present
 		// as that's obviously required for completing the token rotation procedure
 		if (this.refreshInProgress) {
 			return
@@ -317,7 +251,7 @@ class ApiClient {
 			return
 		}
 
-		// Overwrite the view cookie with details that match with the real cookie
+		// overwrite the view cookie with details that match with the real cookie
 		document.cookie = `${this.viewCookieName}=;path=${VIEW_COOKIE_PATH};domain=${VIEW_COOKIE_DOMAIN};expires=Thu, 01 Jan 1970 00:00:00 GMT;${COOKIE_SECURE ? "secure;" : ""}sameSite=${COOKIE_SAME_SITE}`
 	}
 
@@ -333,77 +267,18 @@ class ApiClient {
 		return cookieValue
 	}
 
-	private deserializeUser(apiResponse: ApiUserResponse): User {
-		return {
-			id: apiResponse.id,
-			username: apiResponse.username,
-			isAdmin: apiResponse.is_admin,
-			createdAt: new Date(apiResponse.created_at),
-			updatedAt: new Date(apiResponse.updated_at)
-		}
-	}
-
-	private deserializeNoteMetadatas(apiResponses: ApiNoteMetadataResponse[]): NoteMetadata[] {
-		return apiResponses.map((res) => {
-			return {
-				id: res.note_id,
-				owner: res.owner_id,
-				title: res.title,
-				updatedAt: new Date(res.updated_at)
-			}
-		})
-	}
-
-	private deserializeFullNote(apiResponse: ApiFullNoteResponse): FullNote {
-		return {
-			id: apiResponse.note_id,
-			owner: apiResponse.owner_id,
-			title: apiResponse.title,
-			content: apiResponse.content,
-			versionNumber: apiResponse.version_number,
-			versionCreatedAt: new Date(apiResponse.version_created_at),
-			isActiveVersion: true, // This endpoint serves only the latest version
-			noteCreatedAt: new Date(apiResponse.note_created_at),
-			noteUpdatedAt: new Date(apiResponse.note_updated_at)
-		}
-	}
-
-	private deserializeVersionMetadatas(
-		apiResponses: ApiVersionMetadataResponse[]
-	): VersionMetadata[] {
-		return apiResponses.map((res) => {
-			return {
-				versionID: res.version_id,
-				title: res.title,
-				versionNumber: res.version_number,
-				isActive: this.activeVersion === res.version_number,
-				createdAt: new Date(res.created_at)
-			}
-		})
-	}
-
 	private joinDeserializedVersion(
 		noteID: string,
 		apiResponse: ApiFullVersionResponse
 	): FullNote | null {
-		// Cache lookups are safe here due to this always being called *after* fetching the actual `FullNote`
+		// cache lookups are safe here due to this always being called *after* fetching the actual `FullNote`
 		const cachedNote = this.loadedNotesCache.get(noteID)
 
 		if (!cachedNote) {
 			return null
 		}
 
-		return {
-			id: cachedNote.id,
-			owner: cachedNote.owner,
-			title: apiResponse.title,
-			content: apiResponse.content,
-			versionNumber: apiResponse.version_number,
-			versionCreatedAt: new Date(apiResponse.created_at),
-			isActiveVersion: cachedNote.versionNumber === apiResponse.version_number,
-			noteCreatedAt: cachedNote.noteCreatedAt,
-			noteUpdatedAt: cachedNote.noteUpdatedAt
-		}
+		return cachedNote.joinWithVersionResponse(apiResponse)
 	}
 
 	public async register(username: string, password: string): Promise<void | null> {
@@ -415,7 +290,7 @@ class ApiClient {
 					body: JSON.stringify({ username, password })
 				})
 
-				// Can't overwrite the function parameter
+				// can't overwrite the function parameter
 				const data = await this.handleResponse<{
 					id: string
 					username: string
@@ -485,7 +360,7 @@ class ApiClient {
 					}
 				})
 				const data = await this.handleResponse<ApiUserResponse>(response, { useBearerAuth: true })
-				const user = this.deserializeUser(data)
+				const user = new User(data)
 
 				currentUser.set(user)
 			},
@@ -522,7 +397,7 @@ class ApiClient {
 				currentUser.set(user || null)
 				this.lastAtUpdate = new Date()
 			},
-			{ useBearerAuth: true, suspendGlobalErr: true } // Error displayed inside the settings modal
+			{ useBearerAuth: true, suspendGlobalErr: true } // error displayed inside the settings modal
 		)
 	}
 
@@ -547,7 +422,7 @@ class ApiClient {
 				await this.handleResponse<void>(response, { useBearerAuth: true })
 				await this.handleLocalLogout()
 			},
-			{ useBearerAuth: true, suspendGlobalErr: true } // Error displayed inside the settings modal
+			{ useBearerAuth: true, suspendGlobalErr: true } // error displayed inside the settings modal
 		)
 	}
 
@@ -573,7 +448,7 @@ class ApiClient {
 
 				return users
 			},
-			{ useBearerAuth: true, suspendGlobalErr: true } // Error displayed inside the settings modal
+			{ useBearerAuth: true, suspendGlobalErr: true } // error displayed inside the settings modal
 		)
 	}
 
@@ -603,7 +478,7 @@ class ApiClient {
 
 				await this.handleResponse<void>(response, { useBearerAuth: true })
 			},
-			{ useBearerAuth: true, suspendGlobalErr: true } // Error displayed inside the settings modal
+			{ useBearerAuth: true, suspendGlobalErr: true } // error displayed inside the settings modal
 		)
 	}
 
@@ -625,7 +500,7 @@ class ApiClient {
 				})
 
 				if (data) {
-					notes = this.deserializeNoteMetadatas(data)
+					notes = NoteMetadata.fromApiResponseArray(data)
 				}
 
 				console.log(`[NOTE] Got ${notes.length} note metadata results`)
@@ -637,7 +512,7 @@ class ApiClient {
 	}
 
 	public async createNote(): Promise<NewNoteResponse | null> {
-		// NOTE: The initial note version doesn't allow any user input, the first user-made modification
+		// NOTE: the initial note version doesn't allow any user input, the first user-made modification
 		//       is applied through the version creation endpoint
 
 		return this.handleRequest(
@@ -659,7 +534,7 @@ class ApiClient {
 			throw new Error("Invalid note ID format.")
 		}
 
-		// Attempt cache lookup only if we didn't just push new updates
+		// attempt cache lookup only if we didn't just push new updates
 		if (!fetchRemote) {
 			const cachedNote = this.loadedNotesCache.get(noteID)
 			if (cachedNote != null) {
@@ -679,7 +554,7 @@ class ApiClient {
 				const data = await this.handleResponse<ApiFullNoteResponse>(response, {
 					useBearerAuth: true
 				})
-				const note = this.deserializeFullNote(data)
+				const note = new FullNote(data)
 
 				console.log(`[CACHE] Storing ${noteID}`)
 				this.loadedNotesCache.set(noteID, note)
@@ -742,7 +617,7 @@ class ApiClient {
 				const data = await this.handleResponse<ApiVersionMetadataResponse[]>(response, {
 					useBearerAuth: true
 				})
-				const versions = this.deserializeVersionMetadatas(data)
+				const versions = VersionMetadata.fromApiResponseArray(data, this.activeVersion)
 
 				this.loadedHistoryCache.set(noteID, versions)
 				console.log(`[VER] Got and cached ${versions.length} version metadata results`)
@@ -758,7 +633,7 @@ class ApiClient {
 			throw new Error("Invalid note ID format.")
 		}
 
-		// NOTE: Title's length limit is applied in the UI component, so we don't need to worry about it here
+		// NOTE: title's length limit is applied in the UI component, so we don't need to worry about it here
 
 		return this.handleRequest(
 			async () => {
@@ -782,7 +657,11 @@ class ApiClient {
 		)
 	}
 
-	public async getFullVersion(noteID: string, versionID: string): Promise<FullNote | null> {
+	public async getFullVersion(
+		noteID: string,
+		versionID: string,
+		isActiveVersion: boolean
+	): Promise<FullNote | null> {
 		if (!UUID_REGEX.test(noteID)) {
 			throw new Error("Invalid note ID format.")
 		}
@@ -791,10 +670,15 @@ class ApiClient {
 			throw new Error("Invalid version ID format.")
 		}
 
-		// NOTE: No need to explicitly prevent attempting a cache hit as versions aren't editable
+		if (isActiveVersion) {
+			// the active version will always get cached when the note is initially selected and loaded
+			const cachedActiveNote = this.loadedNotesCache.get(noteID)
+			if (cachedActiveNote !== undefined) {
+				return cachedActiveNote
+			}
+		}
 
-		// TODO: If accessing the active version, don't attempt to hit the cache,
-		//       but instead load the contents from the currently active full note
+		// NOTE: no need to explicitly prevent attempting a cache hit as versions aren't editable
 
 		const cachedVersion = this.loadedVersionsCache.get(noteID + versionID)
 		if (cachedVersion != null) {
diff --git a/web/src/lib/logic/model.ts b/web/src/lib/logic/model.ts
new file mode 100644
index 0000000..a83b061
--- /dev/null
+++ b/web/src/lib/logic/model.ts
@@ -0,0 +1,144 @@
+export interface ApiUserResponse {
+	id: string
+	username: string
+	is_admin: boolean
+	created_at: string
+	updated_at: string
+}
+
+export class User {
+	id: string
+	username: string
+	isAdmin: boolean
+	createdAt: Date
+	updatedAt: Date
+
+	constructor(apiResponse: ApiUserResponse) {
+		this.id = apiResponse.id
+		this.username = apiResponse.username
+		this.isAdmin = apiResponse.is_admin
+		this.createdAt = new Date(apiResponse.created_at)
+		this.updatedAt = new Date(apiResponse.updated_at)
+	}
+}
+
+export interface ApiFullNoteResponse {
+	note_id: string
+	owner_id: string
+	title: string
+	content: string
+	version_number: number
+	version_created_at: string
+	note_created_at: string
+	note_updated_at: string
+}
+
+export class FullNote {
+	id: string
+	owner: string
+	title: string
+	content: string
+	versionNumber: number
+	versionCreatedAt: Date
+	isActiveVersion: boolean
+	noteCreatedAt: Date
+	noteUpdatedAt: Date
+
+	constructor(apiResponse: ApiFullNoteResponse) {
+		this.id = apiResponse.note_id
+		this.owner = apiResponse.owner_id
+		this.title = apiResponse.title
+		this.content = apiResponse.content
+		this.versionNumber = apiResponse.version_number
+		this.versionCreatedAt = new Date(apiResponse.version_created_at)
+		this.isActiveVersion = true // this endpoint serves only the latest version
+		this.noteCreatedAt = new Date(apiResponse.note_created_at)
+		this.noteUpdatedAt = new Date(apiResponse.note_updated_at)
+	}
+
+	public joinWithVersionResponse(apiResponse: ApiFullVersionResponse): FullNote {
+		const newNote = new FullNote({
+			note_id: this.id,
+			owner_id: this.owner,
+			title: apiResponse.title,
+			content: apiResponse.content,
+			version_number: apiResponse.version_number,
+			version_created_at: apiResponse.created_at,
+			note_created_at: this.noteCreatedAt.toISOString(),
+			note_updated_at: this.noteUpdatedAt.toISOString()
+		})
+
+		// override the isActiveVersion property
+		newNote.isActiveVersion = this.versionNumber === apiResponse.version_number
+
+		return newNote
+	}
+}
+
+export interface ApiNoteMetadataResponse {
+	note_id: string
+	owner_id: string
+	title: string
+	updated_at: string
+}
+
+export class NoteMetadata {
+	id: string
+	owner: string
+	title: string
+	updatedAt: Date
+
+	constructor(apiResponse: ApiNoteMetadataResponse) {
+		this.id = apiResponse.note_id
+		this.owner = apiResponse.owner_id
+		this.title = apiResponse.title
+		this.updatedAt = new Date(apiResponse.updated_at)
+	}
+
+	static fromApiResponseArray(apiResponses: ApiNoteMetadataResponse[]): NoteMetadata[] {
+		return apiResponses.map((res) => new NoteMetadata(res))
+	}
+}
+
+export interface NewNoteResponse {
+	title: string
+	content: string
+}
+
+export interface ApiVersionMetadataResponse {
+	version_id: string
+	title: string
+	version_number: number
+	created_at: string
+}
+
+export class VersionMetadata {
+	versionID: string
+	title: string
+	versionNumber: number
+	isActive: boolean
+	createdAt: Date
+
+	constructor(apiResponse: ApiVersionMetadataResponse, activeVersionNumber: number) {
+		this.versionID = apiResponse.version_id
+		this.title = apiResponse.title
+		this.versionNumber = apiResponse.version_number
+		this.isActive = activeVersionNumber === apiResponse.version_number
+		this.createdAt = new Date(apiResponse.created_at)
+	}
+
+	static fromApiResponseArray(
+		apiResponses: ApiVersionMetadataResponse[],
+		activeVersionNumber: number
+	): VersionMetadata[] {
+		return apiResponses.map((res) => new VersionMetadata(res, activeVersionNumber))
+	}
+}
+
+export interface ApiFullVersionResponse {
+	version_id: string
+	title: string
+	content: string
+	version_number: number
+	created_at: string
+}
diff --git a/web/src/lib/utils.ts b/web/src/lib/util/authValidation.ts
similarity index 53%
rename from web/src/lib/utils.ts
rename to web/src/lib/util/authValidation.ts
index 4a2db96..4f336db 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/util/authValidation.ts
@@ -1,9 +1,34 @@
-import {
-	ENTROPY_CLASSES,
-	MAX_PASSWORD_LENGTH,
-	MIN_PASSWORD_ENTROPY,
-	MIN_PASSWORD_LENGTH
-} from "./const"
+const MIN_USERNAME_LENGTH = 3
+const MAX_USERNAME_LENGTH = 20
+const USERNAME_REGEX = RegExp("^[a-z0-9_]+$")
+
+const MIN_PASSWORD_LENGTH = 12
+const MAX_PASSWORD_LENGTH = 72
+const MIN_PASSWORD_ENTROPY = 60.0
+
+// purposefully produce lower entropy than in the backend to prevent 400s
+const ENTROPY_CLASSES: Array<[RegExp, number]> = [
+	[/[a-z]/, 24], // 26
+	[/[A-Z]/, 24], // 26
+	[/\d/, 10],
+	[/[!@#$%^&*()\-_+=\[\]{}|;:'",.<>\/?`~\\]/, 32] // 40
+]
+
+export const isUsernameValid = (username: string): [boolean, string] => {
+	if (username.length < MIN_USERNAME_LENGTH) {
+		return [false, `Username cannot be shorter than ${MIN_USERNAME_LENGTH} characters`]
+	}
+
+	if (username.length > MAX_USERNAME_LENGTH) {
+		return [false, `Username cannot be longer than ${MAX_USERNAME_LENGTH} characters`]
+	}
+
+	if (!USERNAME_REGEX.test(username)) {
+		return [false, "Username can only contain numbers, letters, and underscores"]
+	}
+
+	return [true, ""]
+}
 
 export const isPasswordValid = (password: string): [boolean, string] => {
 	if (password.length < MIN_PASSWORD_LENGTH) {
@@ -35,7 +60,7 @@ const calculateEntropy = (password: string): number => {
 		}
 	}
 
-	// Empty password exception
+	// empty password exception
 	if (poolSize === 0) {
 		return 0
 	}
diff --git a/web/src/lib/util/contentValidation.ts b/web/src/lib/util/contentValidation.ts
new file mode 100644
index 0000000..fb138c4
--- /dev/null
+++ b/web/src/lib/util/contentValidation.ts
@@ -0,0 +1,13 @@
+export const hashContent = async (content: string) => {
+	// content string to byte array
+	const encoder = new TextEncoder()
+	const data = encoder.encode(content)
+
+	const hashBuffer = await crypto.subtle.digest("SHA-256", data)
+
+	// hash bytes to hex string
+	const hashArray = Array.from(new Uint8Array(hashBuffer))
+	const hashHex = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("")
+
+	return hashHex
+}
diff --git a/web/src/lib/util/contentVisual.ts b/web/src/lib/util/contentVisual.ts
new file mode 100644
index 0000000..c239e05
--- /dev/null
+++ b/web/src/lib/util/contentVisual.ts
@@ -0,0 +1,15 @@
+export const formatDate = (dateString: string | Date): string => {
+	if (!dateString) {
+		return ""
+	}
+
+	const d = new Date(dateString)
+	return d.toLocaleDateString(undefined, {
+		weekday: "short",
+		year: "2-digit",
+		month: "short",
+		day: "numeric",
+		hour: "numeric",
+		minute: "numeric"
+	})
+}
diff --git a/web/src/lib/util/greetMessage.ts b/web/src/lib/util/greetMessage.ts
index 19e296c..95fa47d 100644
--- a/web/src/lib/util/greetMessage.ts
+++ b/web/src/lib/util/greetMessage.ts
@@ -1,7 +1,7 @@
 interface HolidayMap {
 	[month: number]: {
 		[day: number]: {
-			name: string // Metadata for debugging
+			name: string // metadata for debugging
 			greetings: string[]
 		}
 	}
@@ -48,8 +48,7 @@ const getHolidayGreeting = (username: string, date: Date): [string, string] | nu
 				greetings: [
 					`Happy May Day, ${username}!`,
 					`Spring celebrations await, ${username}!`,
-					`Enjoy the festivities, ${username}!`,
-					`Hyvää Vappua, ${username}!`
+					`Enjoy the festivities, ${username}!`
 				]
 			}
 		},
@@ -110,8 +109,7 @@ const getHolidayGreeting = (username: string, date: Date): [string, string] | nu
 					`Happy Midsummer, ${username}!`,
 					`Enjoying the longest days, ${username}?`,
 					`Summer solstice greetings, ${username}!`,
-					`Glad Midsommar, ${username}!`,
-					`Hyvää Juhannusta, ${username}!`
+					`Glad Midsommar, ${username}!`
 				])
 			]
 		}
@@ -127,7 +125,7 @@ const getHolidayGreeting = (username: string, date: Date): [string, string] | nu
 }
 
 const calculateMidsummer = (year: number): number => {
-	// Saturday between 20th and 26th of June
+	// saturday between 20th and 26th of June
 	const startDate = new Date(year, 5, 20)
 	const dayOfWeek = startDate.getDay()
 
@@ -142,7 +140,7 @@ const calculateMidsummer = (year: number): number => {
 }
 
 const gaussEaster = (year: number): [day: number, month: number] => {
-	// Directly from Gauss's Easter algorithm
+	// directly from Gauss's Easter algorithm
 	const a = year % 19
 	const b = year % 4
 	const c = year % 7
@@ -163,7 +161,7 @@ const gaussEaster = (year: number): [day: number, month: number] => {
 	}
 
 	if (days > 31) {
-		// Jump to April
+		// jump to April
 		return [days - 31, 4]
 	}
 
@@ -173,7 +171,7 @@ const gaussEaster = (year: number): [day: number, month: number] => {
 const getTimeBasedGreeting = (username: string, date: Date): string => {
 	const hour = date.getHours()
 
-	// Early morning
+	// early morning
 	if (0 <= hour && hour < 5) {
 		return getRandomGreeting([
 			`Up late, ${username}?`,
@@ -183,7 +181,7 @@ const getTimeBasedGreeting = (username: string, date: Date): string => {
 		])
 	}
 
-	// Morning
+	// morning
 	if (5 <= hour && hour < 12) {
 		return getRandomGreeting([
 			`Good morning, ${username}!`,
@@ -193,7 +191,7 @@ const getTimeBasedGreeting = (username: string, date: Date): string => {
 		])
 	}
 
-	// Afternoon
+	// afternoon
 	if (12 <= hour && hour < 17) {
 		return getRandomGreeting([
 			`Good afternoon, ${username}!`,
@@ -203,7 +201,7 @@ const getTimeBasedGreeting = (username: string, date: Date): string => {
 		])
 	}
 
-	// Evening
+	// evening
 	if (17 <= hour && hour < 21) {
 		return getRandomGreeting([
 			`Good evening, ${username}!`,
@@ -213,7 +211,7 @@ const getTimeBasedGreeting = (username: string, date: Date): string => {
 		])
 	}
 
-	// Night
+	// night
 	return getRandomGreeting([
 		`Good night, ${username}!`,
 		`Having a pleasant evening, ${username}?`,
diff --git a/web/src/lib/pages.ts b/web/src/lib/util/itemPagination.ts
similarity index 75%
rename from web/src/lib/pages.ts
rename to web/src/lib/util/itemPagination.ts
index db00a5c..e620a09 100644
--- a/web/src/lib/pages.ts
+++ b/web/src/lib/util/itemPagination.ts
@@ -3,10 +3,10 @@ import { writable } from "svelte/store"
 interface PaginationState {
 	currentPage: number
 	pageSize: number
-	totalItems?: number // Page number rendering (+ caching metadata)
+	totalItems?: number // page number rendering (+ caching metadata)
 }
 
-// Limit and offset (`pageSize` and `currentPage`) values align initially with backend defaults,
+// limit and offset (`pageSize` and `currentPage`) values align initially with backend defaults,
 // but should be adjusted based on the UI state/dimensions
 
 export const notesPagination = writable<PaginationState>({
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index c49b8f1..9da9ae6 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import AuthForm from "$lib/components/AuthForm.svelte"
-	import { apiClient } from "$lib/client"
+	import { apiClient } from "$lib/logic/client"
 
 	const loginHandler = (username: string, password: string) => {
 		return apiClient.login(username, password) as Promise<void>
diff --git a/web/src/routes/register/+page.svelte b/web/src/routes/register/+page.svelte
index 960357e..ce500c7 100644
--- a/web/src/routes/register/+page.svelte
+++ b/web/src/routes/register/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import AuthForm from "$lib/components/AuthForm.svelte"
-	import { apiClient } from "$lib/client"
+	import { apiClient } from "$lib/logic/client"
 
 	const registerHandler = (username: string, password: string) => {
 		return apiClient.register(username, password)
diff --git a/web/static/apple-touch-icon.png b/web/static/apple-touch-icon.png
index a631678..f2cc119 100644
Binary files a/web/static/apple-touch-icon.png and b/web/static/apple-touch-icon.png differ
diff --git a/web/static/favicon-96x96.png b/web/static/favicon-96x96.png
index f2feb96..ac77c62 100644
Binary files a/web/static/favicon-96x96.png and b/web/static/favicon-96x96.png differ
diff --git a/web/static/favicon.ico b/web/static/favicon.ico
index c4338d5..c48eee7 100644
Binary files a/web/static/favicon.ico and b/web/static/favicon.ico differ
diff --git a/web/static/favicon.svg b/web/static/favicon.svg
index 84ef94d..d9696de 100644
--- a/web/static/favicon.svg
+++ b/web/static/favicon.svg
@@ -1,9 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1365.3333" height="1365.3333"><svg version="1.1" id="SvgjsSvg1423" width="1365.3333" height="1365.3333" viewBox="0 0 1365.3333 1365.3333" sodipodi:docname="qnote-logo.svg" inkscape:version="1.2.2 (b0a8486541, 2022-12-01)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-  <defs id="SvgjsDefs1422"></defs>
-  <sodipodi:namedview id="SvgjsSodipodi:namedview1421" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25" inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" showgrid="false" inkscape:zoom="0.18804933" inkscape:cx="1659.1391" inkscape:cy="146.23823" inkscape:window-width="1720" inkscape:window-height="1372" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="0" inkscape:current-layer="g54"></sodipodi:namedview>
-  <g inkscape:groupmode="layer" inkscape:label="Image" id="SvgjsG1420">
-    <path style="fill:#4b66c4;stroke-width:2.30942" d="m 157.66009,1362.0616 c -9.00526,-1.7947 -21.9442,-5.3029 -28.7532,-7.7961 C 81.488681,1336.9029 30.975204,1290.9704 14.607804,1250.3322 1.9625423,1218.9354 2.6050325,1251.3729 3.2820266,678.535 L 3.9101942,147.00951 12.423657,124.52781 C 23.821731,94.428583 39.923559,70.940269 64.423873,48.673204 87.680215,27.536722 114.52816,13.299176 145.30637,5.780968 l 19.14252,-4.6759336 484.01218,0.080132 C 963.83092,1.2372526 1137.713,2.0519805 1147.5119,3.5232753 1213.916,13.49373 1270.7568,59.035973 1293.2583,120.29883 l 6.5406,17.80717 1.3987,104.50803 c 0.7693,57.47943 1.3424,276.34061 1.2736,486.35821 -0.115,348.99026 -0.4709,383.26876 -4.1421,398.33486 -4.8861,20.0508 -14.0783,38.7483 -30.2552,61.5409 -15.1617,21.3626 -15.7156,27.8021 -3.5609,41.4057 4.7524,5.3188 27.1808,28.2012 49.8406,50.8496 22.66,22.6485 43.0322,43.6557 45.2716,46.6827 9.8894,13.3674 0.8361,30.368 -18.8801,35.4532 -6.6632,1.7187 -177.6829,2.3742 -588.05369,2.2544 -498.85214,-0.1453 -580.91626,-0.619 -595.03132,-3.432 z m 890.35071,-130.7331 c 10.6139,-4.8021 5.2816,-11.316 -53.18795,-64.9742 -31.55959,-28.9627 -60.88167,-55.0587 -65.16022,-57.9911 l -7.77916,-5.3316 H 661.50115 c -163.16571,0 -265.20117,-0.8301 -273.28891,-2.2232 -34.45158,-5.9344 -74.18219,-34.3674 -90.20331,-64.5537 -15.8359,-29.837 -14.9531,-8.5276 -14.9531,-360.95308 0,-220.83193 0.80363,-323.60596 2.59406,-331.74727 8.9998,-40.92302 47.64272,-81.4288 89.98987,-94.328 13.50389,-4.11336 24.06027,-4.27743 275.2174,-4.27743 h 261.17489 l 17.55762,5.3429 c 42.8944,13.05313 76.54323,46.15349 87.66903,86.24011 3.3776,12.16948 3.796,48.80449 3.796,332.43502 0,280.36655 0.4378,319.60314 3.6349,325.77248 1.9993,3.8577 28.6858,30.83587 59.3035,59.95137 60.4447,57.4794 63.0963,59.1732 73.4653,46.9276 l 4.966,-5.8648 -0.023,-456.56486 -0.023,-456.56491 -5.8159,-11.60429 c -7.983,-15.92838 -23.9372,-30.17901 -40.0608,-35.78306 -13.0377,-4.53156 -16.2897,-4.56866 -464.62005,-5.29881 l -451.48937,-0.73533 -11.9805,5.1292 c -16.4189,7.0294 -33.74842,24.61445 -38.30576,38.87059 -3.15082,9.85625 -3.61105,73.23301 -3.70821,510.63997 -0.10783,485.0011 0.0192,499.6586 4.41748,508.8144 5.28277,10.998 24.70505,28.5752 37.94785,34.3428 8.612,3.7509 23.25458,4.102 217.69373,5.22 304.85528,1.7527 636.73143,1.292 641.55573,-0.8908 z m -172.56463,-265.78842 7.83268,-7.27684 V 675.95449 c 0,-298.87943 0.3457,-289.36633 -10.74931,-295.80309 -3.30655,-1.91828 -58.90921,-2.63787 -213.70708,-2.7657 -115.08074,-0.095 -212.82495,-0.13305 -217.20932,-0.0843 -5.53343,0.0614 -10.11389,2.07846 -14.97562,6.59486 l -7.00399,6.50643 v 285.19218 285.1922 l 6.18829,5.32762 c 3.40359,2.93034 8.52526,5.76151 11.38149,6.29172 2.85624,0.53004 100.86698,0.83938 217.80166,0.68713 l 212.60849,-0.27662 z" id="SvgjsPath1419"></path>
-  </g>
-</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1024" height="1024" viewBox="0 0 1024 1024"><image width="1024" height="1024" xlink:href="data:image/png;base64,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"></image><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
 @media (prefers-color-scheme: dark) { :root { filter: none; } }
 </style></svg>
\ No newline at end of file