diff --git a/frontend/obsidian-plugin/src/styles.scss b/frontend/obsidian-plugin/src/styles.scss
deleted file mode 100644
index 110e7152..00000000
--- a/frontend/obsidian-plugin/src/styles.scss
+++ /dev/null
@@ -1,185 +0,0 @@
-@mixin number-card {
-	padding: var(--size-2-1) var(--size-4-1);
-	border-radius: var(--radius-s);
-	background-color: var(--color-base-30);
-	font-size: var(--font-ui-small);
-
-	&.good {
-		background-color: rgba(var(--color-green-rgb), 0.35);
-	}
-
-	&.bad {
-		background-color: rgba(var(--color-red-rgb), 0.35);
-	}
-}
-
-.status-description {
-	margin: var(--p-spacing) 0;
-
-	.number {
-		@include number-card;
-		font-family: var(--font-monospace);
-		font-weight: var(--bold-weight);
-	}
-
-	.error {
-		color: rgb(var(--color-red-rgb));
-	}
-
-	.warning {
-		color: rgb(var(--color-yellow-rgb));
-	}
-}
-
-.vault-link-settings {
-	h2 {
-		display: flex;
-		align-items: center;
-		font-size: var(--h2-size);
-
-		.version {
-			@include number-card;
-			margin: var(--size-2-2) 0 0 var(--size-4-2);
-			background-color: var(--color-base-30);
-			color: var(--color-base-70);
-			font-size: var(--font-ui-smaller);
-		}
-	}
-
-	.button-container {
-		display: flex;
-		gap: var(--size-4-2);
-	}
-
-	h3 {
-		font-size: var(--font-ui-large);
-		margin-top: var(--heading-spacing);
-	}
-
-	button,
-	input[type="range"],
-	.checkbox-container,
-	.slider::-webkit-slider-thumb {
-		cursor: pointer;
-	}
-
-	input[type="text"],
-	textarea {
-		width: 250px;
-	}
-
-	textarea {
-		resize: none;
-		height: 75px;
-	}
-}
-
-.sync-status {
-	display: flex;
-	gap: var(--size-4-2);
-
-	* {
-		display: block;
-	}
-
-	.initialize-button {
-		padding: 0 var(--size-4-2);
-		background: rgba(var(--color-red-rgb), 0.4);
-		cursor: pointer;
-	}
-}
-
-.logs-view {
-	display: flex;
-	flex-direction: column;
-
-	.logs-container {
-		max-width: 100%;
-		overflow-y: auto;
-
-		.log-message {
-			font: var(--font-monospace);
-			margin-bottom: var(--size-2-1);
-			overflow-wrap: break-word;
-			white-space: pre-wrap;
-			user-select: all;
-
-			.timestamp {
-				@include number-card;
-				font-family: var(--font-monospace);
-				font-weight: var(--bold-weight);
-				margin-right: var(--size-4-1);
-			}
-
-			&.DEBUG {
-				color: var(--color-base-50);
-			}
-
-			&.INFO {
-				color: var(--color-green-rgb);
-			}
-
-			&.WARNING {
-				color: var(--color-yellow-rgb);
-			}
-
-			&.ERROR {
-				color: var(--color-red-rgb);
-			}
-		}
-	}
-}
-
-.history-card {
-	padding: var(--size-4-4);
-	margin: var(--size-4-2);
-	background-color: var(--color-base-00);
-	border-radius: var(--radius-l);
-	container-type: inline-size;
-
-	&.clickable {
-		cursor: pointer;
-	}
-
-	&.success {
-		background-color: rgba(var(--color-green-rgb), 0.2);
-	}
-
-	&.error {
-		background-color: rgba(var(--color-red-rgb), 0.2);
-	}
-
-	.history-card-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: var(--size-4-2);
-		gap: var(--size-4-2);
-
-		@container (max-width: 300px) {
-			flex-direction: column;
-			align-items: flex-start;
-		}
-
-		.history-card-title {
-			font: var(--font-monospace);
-			display: flex;
-			align-items: center;
-			gap: var(--size-4-2);
-			word-break: break-all;
-			margin: 0;
-		}
-
-		.history-card-timestamp {
-			font-size: var(--font-ui-small);
-			font-style: italic;
-			color: var(--italic-color);
-		}
-	}
-
-	.history-card-message {
-		font-size: var(--font-ui-medium);
-		color: var(--color-base-70);
-		margin: 0;
-	}
-}
diff --git a/frontend/obsidian-plugin/src/views/history/history-view.scss b/frontend/obsidian-plugin/src/views/history/history-view.scss
new file mode 100644
index 00000000..deabf59f
--- /dev/null
+++ b/frontend/obsidian-plugin/src/views/history/history-view.scss
@@ -0,0 +1,53 @@
+.history-card {
+	padding: var(--size-4-4);
+	margin: var(--size-4-2);
+	background-color: var(--color-base-00);
+	border-radius: var(--radius-l);
+	container-type: inline-size;
+
+	&.clickable {
+		cursor: pointer;
+	}
+
+	&.success {
+		background-color: rgba(var(--color-green-rgb), 0.2);
+	}
+
+	&.error {
+		background-color: rgba(var(--color-red-rgb), 0.2);
+	}
+
+	.history-card-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: var(--size-4-2);
+		gap: var(--size-4-2);
+
+		@container (max-width: 300px) {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.history-card-title {
+			font: var(--font-monospace);
+			display: flex;
+			align-items: center;
+			gap: var(--size-4-2);
+			word-break: break-all;
+			margin: 0;
+		}
+
+		.history-card-timestamp {
+			font-size: var(--font-ui-small);
+			font-style: italic;
+			color: var(--italic-color);
+		}
+	}
+
+	.history-card-message {
+		font-size: var(--font-ui-medium);
+		color: var(--color-base-70);
+		margin: 0;
+	}
+}
diff --git a/frontend/obsidian-plugin/src/views/logs/logs-view.scss b/frontend/obsidian-plugin/src/views/logs/logs-view.scss
new file mode 100644
index 00000000..82ed1037
--- /dev/null
+++ b/frontend/obsidian-plugin/src/views/logs/logs-view.scss
@@ -0,0 +1,60 @@
+.logs-view {
+	display: flex;
+	flex-direction: column;
+
+	.verbosity-selector {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-weight: normal;
+		gap: var(--size-4-2);
+		margin: var(--size-4-4) var(--size-4-2);
+
+		h4 {
+			margin: 0;
+		}
+
+		select {
+			cursor: pointer;
+		}
+	}
+
+	.logs-container {
+		max-width: 100%;
+		overflow-y: auto;
+
+		.log-message {
+			font: var(--font-monospace);
+			margin-bottom: var(--size-2-1);
+			overflow-wrap: break-word;
+			white-space: pre-wrap;
+			user-select: all;
+
+			.timestamp {
+				padding: var(--size-2-1) var(--size-4-1);
+				border-radius: var(--radius-s);
+				background-color: var(--color-base-30);
+				font-size: var(--font-ui-small);
+				font-family: var(--font-monospace);
+				font-weight: var(--bold-weight);
+				margin-right: var(--size-4-1);
+			}
+
+			&.DEBUG {
+				color: var(--color-base-50);
+			}
+
+			&.INFO {
+				color: var(--color-base-100);
+			}
+
+			&.WARNING {
+				color: rgb(var(--color-yellow-rgb));
+			}
+
+			&.ERROR {
+				color: rgb(var(--color-red-rgb));
+			}
+		}
+	}
+}
diff --git a/frontend/obsidian-plugin/src/views/settings/settings-tab.scss b/frontend/obsidian-plugin/src/views/settings/settings-tab.scss
new file mode 100644
index 00000000..dcc3e806
--- /dev/null
+++ b/frontend/obsidian-plugin/src/views/settings/settings-tab.scss
@@ -0,0 +1,57 @@
+@mixin number-card {
+	padding: var(--size-2-1) var(--size-4-1);
+	border-radius: var(--radius-s);
+	background-color: var(--color-base-30);
+	font-size: var(--font-ui-small);
+
+	&.good {
+		background-color: rgba(var(--color-green-rgb), 0.35);
+	}
+
+	&.bad {
+		background-color: rgba(var(--color-red-rgb), 0.35);
+	}
+}
+
+.vault-link-settings {
+	h2 {
+		display: flex;
+		align-items: center;
+		font-size: var(--h2-size);
+
+		.version {
+			@include number-card;
+			margin: var(--size-2-2) 0 0 var(--size-4-2);
+			background-color: var(--color-base-30);
+			color: var(--color-base-70);
+			font-size: var(--font-ui-smaller);
+		}
+	}
+
+	.button-container {
+		display: flex;
+		gap: var(--size-4-2);
+	}
+
+	h3 {
+		font-size: var(--font-ui-large);
+		margin-top: var(--heading-spacing);
+	}
+
+	button,
+	input[type="range"],
+	.checkbox-container,
+	.slider::-webkit-slider-thumb {
+		cursor: pointer;
+	}
+
+	input[type="text"],
+	textarea {
+		width: 250px;
+	}
+
+	textarea {
+		resize: none;
+		height: 75px;
+	}
+}
diff --git a/frontend/obsidian-plugin/src/views/status-bar/status-bar.scss b/frontend/obsidian-plugin/src/views/status-bar/status-bar.scss
new file mode 100644
index 00000000..3762c2d9
--- /dev/null
+++ b/frontend/obsidian-plugin/src/views/status-bar/status-bar.scss
@@ -0,0 +1,14 @@
+.sync-status {
+	display: flex;
+	gap: var(--size-4-2);
+
+	* {
+		display: block;
+	}
+
+	.initialize-button {
+		padding: 0 var(--size-4-2);
+		background: rgba(var(--color-red-rgb), 0.4);
+		cursor: pointer;
+	}
+}
diff --git a/frontend/obsidian-plugin/src/views/status-description/status-description.scss b/frontend/obsidian-plugin/src/views/status-description/status-description.scss
new file mode 100644
index 00000000..3ac86944
--- /dev/null
+++ b/frontend/obsidian-plugin/src/views/status-description/status-description.scss
@@ -0,0 +1,32 @@
+@mixin number-card {
+	padding: var(--size-2-1) var(--size-4-1);
+	border-radius: var(--radius-s);
+	background-color: var(--color-base-30);
+	font-size: var(--font-ui-small);
+
+	&.good {
+		background-color: rgba(var(--color-green-rgb), 0.35);
+	}
+
+	&.bad {
+		background-color: rgba(var(--color-red-rgb), 0.35);
+	}
+}
+
+.status-description {
+	margin: var(--p-spacing) 0;
+
+	.number {
+		@include number-card;
+		font-family: var(--font-monospace);
+		font-weight: var(--bold-weight);
+	}
+
+	.error {
+		color: rgb(var(--color-red-rgb));
+	}
+
+	.warning {
+		color: rgb(var(--color-yellow-rgb));
+	}
+}