diff --git a/src/lib/components/ui/create/BudgetSlider.svelte b/src/lib/components/ui/create/BudgetSlider.svelte
index 8fb831a..eb02614 100644
--- a/src/lib/components/ui/create/BudgetSlider.svelte
+++ b/src/lib/components/ui/create/BudgetSlider.svelte
@@ -1,5 +1,7 @@
 <script>
-	let { budget = $bindable(50000) } = $props();
+	import './budget-slider.css';
+
+	let { budget = $bindable() } = $props();
 
 	const min = 10_000;
 	const max = 150_000;
@@ -39,33 +41,3 @@
 		</div>
 	</div>
 </div>
-
-<style>
-	.budget-slider::-webkit-slider-thumb {
-		appearance: none;
-		width: 1rem;
-		height: 1rem;
-		border-radius: 9999px;
-		background: var(--color-pill);
-		border: none;
-		margin-top: -0.4375rem;
-	}
-
-	.budget-slider::-moz-range-thumb {
-		width: 1rem;
-		height: 1rem;
-		border-radius: 9999px;
-		background: var(--color-pill);
-		border: none;
-	}
-
-	.budget-slider::-webkit-slider-runnable-track {
-		height: 1px;
-		background: transparent;
-	}
-
-	.budget-slider::-moz-range-track {
-		height: 1px;
-		background: transparent;
-	}
-</style>
diff --git a/src/lib/components/ui/create/budget-slider.css b/src/lib/components/ui/create/budget-slider.css
new file mode 100644
index 0000000..2a4935e
--- /dev/null
+++ b/src/lib/components/ui/create/budget-slider.css
@@ -0,0 +1,27 @@
+.budget-slider::-webkit-slider-thumb {
+	appearance: none;
+	width: 1rem;
+	height: 1rem;
+	border-radius: 9999px;
+	background: var(--color-pill);
+	border: none;
+	margin-top: -0.4375rem;
+}
+
+.budget-slider::-moz-range-thumb {
+	width: 1rem;
+	height: 1rem;
+	border-radius: 9999px;
+	background: var(--color-pill);
+	border: none;
+}
+
+.budget-slider::-webkit-slider-runnable-track {
+	height: 1px;
+	background: transparent;
+}
+
+.budget-slider::-moz-range-track {
+	height: 1px;
+	background: transparent;
+}