diff --git a/web/App.vue b/web/App.vue
index 80b1fac..44ba0c2 100644
--- a/web/App.vue
+++ b/web/App.vue
@@ -19,7 +19,7 @@ import Settings from "./components/Settings.vue";
 
 		<div class="preview">
 
-			<form class="form">
+			<form class="form" @submit.prevent>
 
 				<div class="inp">
 					<input type="text" placeholder=" ">
diff --git a/web/components/Settings.vue b/web/components/Settings.vue
index b15c581..b1216db 100644
--- a/web/components/Settings.vue
+++ b/web/components/Settings.vue
@@ -21,27 +21,31 @@ function update() {
 	
 	<div class="settings">
 
-		<div class="variables">
-			<template v-for="v in variables">
-				<label :for="v.name">
-					<Icon :icon="variableTypeIcon[v.type]" />
-					{{ v.name }}
-				</label>
-				<div v-if="v.type == 'color'">
-					<div class="inp inp-small color">
-						<input v-model="variableValues[v.name]" type="color" :id="v.name" @change="update">
+		<div>
+			<h2>Variables</h2>
+			<div class="variables">
+				<template v-for="v in variables">
+					<label :for="v.name">
+						<Icon :icon="variableTypeIcon[v.type]" />
+						{{ v.name }}
+					</label>
+					<div v-if="v.type == 'color'">
+						<div class="inp inp-small color">
+							<input v-model="variableValues[v.name]" type="color" :id="v.name" @change="update">
+						</div>
+						<div class="inp inp-small">
+							<input v-model="variableValues[v.name]" type="string" :id="v.name" @change="update">
+						</div>
 					</div>
-					<div class="inp inp-small">
+					<div v-else class="inp inp-small">
 						<input v-model="variableValues[v.name]" type="string" :id="v.name" @change="update">
 					</div>
-				</div>
-				<div v-else class="inp inp-small">
-					<input v-model="variableValues[v.name]" type="string" :id="v.name" @change="update">
-				</div>
-			</template>
+				</template>
+			</div>
 		</div>
 
 		<div>
+			<h2>Presets</h2>
 			<div class="presets">
 				<div v-for="preset in Preset.presets" @click="applyVariables(preset.getVariables())">
 					<div :style="`background-color: ${c?.hexFormat()}`" v-for="c in preset.colors"></div>
diff --git a/web/css/demo.css b/web/css/demo.css
index 82ae182..0d5c86c 100644
--- a/web/css/demo.css
+++ b/web/css/demo.css
@@ -10,13 +10,23 @@ header h1 .color {background-clip: text; -webkit-background-clip: text; backgrou
 
 
 .settings {margin: 70px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 25px;}
+.settings h2 {text-align: center;}
 .settings .variables {display: grid; gap: 10px 20px; align-items: center; grid-template-columns: max-content 1fr;}
 .settings .variables > * {display: flex; gap: 10px; align-items: center;}
 
-.settings .presets {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;}
+.settings .presets {display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;}
 .settings .presets > * {display: flex; border-radius: 10px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);}
 .settings .presets > * > * {height: 100px; flex: 1;}
 
+@media screen and (max-width: 850px) {
+	.settings {display: flex; flex-direction: column-reverse;}
+}
+
+@media screen and (max-width: 500px) {
+	.settings .variables {display: block;}
+	.settings .variables label {margin: 20px 0 10px;}
+}
+
 .content {padding: 0 20px; margin: auto; max-width: 1000px;}
 
 .preview {margin: 70px 0;}