diff --git a/src/app.scss b/src/app.scss
deleted file mode 100644
index ce2793f..0000000
--- a/src/app.scss
+++ /dev/null
@@ -1,178 +0,0 @@
-@use '@picocss/pico/scss/pico' with (
-	$enable-responsive-typography: false,
-	$enable-responsive-spacings: false,
-	$primary-hue: 212
-);
-@use 'bytemd/dist/index.css';
-
-:root {
-	--font-family: 'M PLUS Rounded 1c', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu',
-		'Cantarell', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-		'Noto Color Emoji';
-	--form-element-spacing-vertical: 0.3rem;
-	--form-element-spacing-horizontal: 0.45rem;
-	--neutral-color: hsl(205 30% 85%);
-	--code-color: hsl(205 30% 30%);
-	--secondary-alt: hsl(205, 15%, 27%);
-	--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-	accent-color: var(--primary);
-}
-
-[data-theme='light'],
-:root:not([data-theme='dark']) {
-	--background-color: hsl(202 18% 93%);
-	--code-color: hsl(205 30% 30%);
-}
-
-html {
-	min-height: 100vh;
-	min-height: 100dvh;
-	background-image: url('/favicon.svg');
-	background-color: var(--card-sectionning-background-color);
-	background-size: min(20vw, 150px);
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	&[data-theme] {
-		background-image: none;
-	}
-
-	&.modal-is-open {
-		scrollbar-gutter: stable;
-	}
-}
-
-body {
-	background-color: var(--background-color);
-
-	html[data-theme] & {
-		min-height: 100vh;
-		min-height: 100dvh;
-	}
-
-	&:has(.bytemd-fullscreen) {
-		overflow: hidden;
-	}
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	--typography-spacing-vertical: 0.3rem;
-	color: inherit;
-}
-
-p {
-	--typography-spacing-vertical: 1rem;
-}
-
-a,
-[role='link'] {
-	--color: hsl(240, 85%, 54%);
-}
-
-form {
-	margin: 0;
-}
-
-button {
-	touch-action: manipulation;
-}
-
-hr {
-	border-top: 1px solid var(--form-element-border-color);
-}
-
-ul > li {
-	list-style: disc;
-}
-
-ol > li {
-	list-style: decimal;
-}
-
-.bytemd {
-	--editor-bg: hsl(0 0% 100% / 0.1);
-	--editor-text: black;
-	--editor-border: hsl(0 0% 0% / 0.3);
-	font-family: var(--font-family);
-	height: 100%;
-	color-scheme: light;
-	color: var(--editor-text);
-	background-color: var(--editor-bg);
-	border-color: var(--editor-bg);
-	border-inline: none;
-
-	&.bytemd-fullscreen {
-		--editor-bg: var(--note-color, hsl(0 0% 100%));
-		z-index: 1000;
-	}
-
-	.bytemd-toolbar {
-		background-color: var(--editor-bg);
-		border-color: var(--editor-border);
-	}
-
-	.bytemd-toolbar-icon:hover {
-		background-color: hsl(0 0% 0% / 0.075);
-	}
-
-	.CodeMirror {
-		font-size: 1rem;
-		color: var(--editor-text);
-		background-color: var(--editor-bg);
-	}
-
-	.bytemd-status {
-		color: var(--editor-text);
-		border-color: var(--editor-border);
-	}
-
-	.bytemd-split,
-	.bytemd-sidebar {
-		border-color: var(--editor-border);
-	}
-
-	.bytemd-sidebar ul {
-		color: var(--editor-text);
-	}
-}
-
-.bytemd-split .bytemd-preview {
-	border-color: var(--editor-border);
-}
-
-.tippy-box {
-	font-size: 0.875rem;
-	color: var(--tooltip-color);
-	background-color: var(--tooltip-background-color);
-}
-
-.tippy-content {
-	line-height: 1;
-	padding: 0.25rem 0.5rem;
-}
-
-.tippy-arrow {
-	color: var(--tooltip-background-color);
-}
-
-:root[data-theme='dark'] .bytemd {
-	--editor-bg: hsl(0 0% 0% / 0.075);
-	color-scheme: dark;
-
-	&.bytemd-fullscreen {
-		--editor-bg: var(--note-color, hsl(0 0% 80%));
-	}
-}
-
-@media (min-width: 768px) {
-	.bytemd {
-		.CodeMirror {
-			font-size: 0.9rem;
-		}
-	}
-}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 8ddb970..03e612c 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,2 +1,2 @@
-import '../app.scss';
+import '$styles/index.scss';
 export const ssr = false;
diff --git a/src/styles/bytemd.scss b/src/styles/bytemd.scss
new file mode 100644
index 0000000..ae3a59f
--- /dev/null
+++ b/src/styles/bytemd.scss
@@ -0,0 +1,88 @@
+@use 'bytemd/dist/index.css';
+
+.bytemd {
+	--editor-bg: hsl(0 0% 100% / 0.1);
+	--editor-text: black;
+	--editor-border: hsl(0 0% 0% / 0.3);
+	font-family: var(--font-family);
+	height: 100%;
+	color-scheme: light;
+	color: var(--editor-text);
+	background-color: var(--editor-bg);
+	border-color: var(--editor-bg);
+	border-inline: none;
+
+	&.bytemd-fullscreen {
+		--editor-bg: var(--note-color, hsl(0 0% 100%));
+		z-index: 1000;
+	}
+
+	.bytemd-toolbar {
+		background-color: var(--editor-bg);
+		border-color: var(--editor-border);
+	}
+
+	.bytemd-toolbar-icon:hover {
+		background-color: hsl(0 0% 0% / 0.075);
+	}
+
+	.CodeMirror {
+		font-size: 1rem;
+		color: var(--editor-text);
+		background-color: var(--editor-bg);
+	}
+
+	.bytemd-status {
+		color: var(--editor-text);
+		border-color: var(--editor-border);
+	}
+
+	.bytemd-split,
+	.bytemd-sidebar {
+		border-color: var(--editor-border);
+	}
+
+	.bytemd-sidebar ul {
+		color: var(--editor-text);
+	}
+}
+
+.bytemd-split .bytemd-preview {
+	border-color: var(--editor-border);
+}
+
+.tippy-box {
+	font-size: 0.875rem;
+	color: var(--tooltip-color);
+	background-color: var(--tooltip-background-color);
+}
+
+.tippy-content {
+	line-height: 1;
+	padding: 0.25rem 0.5rem;
+}
+
+.tippy-arrow {
+	color: var(--tooltip-background-color);
+}
+
+:root[data-theme='dark'] .bytemd {
+	--editor-bg: hsl(0 0% 0% / 0.075);
+	color-scheme: dark;
+
+	&.bytemd-fullscreen {
+		--editor-bg: var(--note-color, hsl(0 0% 80%));
+	}
+}
+
+body:has(.bytemd-fullscreen) {
+	overflow: hidden;
+}
+
+@media (min-width: 768px) {
+	.bytemd {
+		.CodeMirror {
+			font-size: 0.9rem;
+		}
+	}
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..ae6190f
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,83 @@
+@use 'pico';
+@use 'bytemd';
+
+:root {
+	--font-family: 'M PLUS Rounded 1c', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Ubuntu',
+		'Cantarell', 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+		'Noto Color Emoji';
+	--form-element-spacing-vertical: 0.3rem;
+	--form-element-spacing-horizontal: 0.45rem;
+	--neutral-color: hsl(205 30% 85%);
+	--code-color: hsl(205 30% 30%);
+	--secondary-alt: hsl(205, 15%, 27%);
+	--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+	accent-color: var(--primary);
+}
+
+[data-theme='light'],
+:root:not([data-theme='dark']) {
+	--background-color: hsl(202 18% 93%);
+	--code-color: hsl(205 30% 30%);
+}
+
+html {
+	min-height: 100vh;
+	min-height: 100dvh;
+	background-image: url('/favicon.svg');
+	background-color: var(--card-sectionning-background-color);
+	background-size: min(20vw, 150px);
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	&[data-theme] {
+		background-image: none;
+	}
+}
+
+body {
+	background-color: var(--background-color);
+
+	html[data-theme] & {
+		min-height: 100vh;
+		min-height: 100dvh;
+	}
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	--typography-spacing-vertical: 0.3rem;
+	color: inherit;
+}
+
+p {
+	--typography-spacing-vertical: 1rem;
+}
+
+a,
+[role='link'] {
+	--color: hsl(240, 85%, 54%);
+}
+
+form {
+	margin: 0;
+}
+
+button {
+	touch-action: manipulation;
+}
+
+hr {
+	border-top: 1px solid var(--form-element-border-color);
+}
+
+ul > li {
+	list-style: disc;
+}
+
+ol > li {
+	list-style: decimal;
+}
diff --git a/src/styles/pico.scss b/src/styles/pico.scss
new file mode 100644
index 0000000..741da2e
--- /dev/null
+++ b/src/styles/pico.scss
@@ -0,0 +1,9 @@
+@use '@picocss/pico/scss/pico' with (
+	$enable-responsive-typography: false,
+	$enable-responsive-spacings: false,
+	$primary-hue: 212
+);
+
+html.modal-is-open {
+	scrollbar-gutter: stable;
+}
diff --git a/svelte.config.js b/svelte.config.js
index 14ab7a3..3025952 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -9,6 +9,7 @@ const config = {
 			fallback: 'index.html',
 		}),
 		alias: {
+			$styles: 'src/styles/*',
 			$icon: 'src/assets/fontawesome/light/*',
 		},
 	},