diff --git a/package-lock.json b/package-lock.json
index f746642..3d47f00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3120,6 +3120,11 @@
       "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==",
       "dev": true
     },
+    "fn-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fn-name/-/fn-name-2.0.1.tgz",
+      "integrity": "sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -4675,6 +4680,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
       "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
     },
+    "lodash-es": {
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
+      "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+    },
     "lodash.clone": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz",
@@ -6237,6 +6247,11 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "dev": true
     },
+    "property-expr": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-1.5.1.tgz",
+      "integrity": "sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g=="
+    },
     "psl": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.7.0.tgz",
@@ -7227,6 +7242,22 @@
       "integrity": "sha512-jRk7jdYULb9V4Z+0BKlfofombmdIIQph4leojrOSHzvZBRmCredz7fZsJBiUDLO6h83XYekuLbwfy5zx1i95GQ==",
       "dev": true
     },
+    "svelte-forms-lib": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/svelte-forms-lib/-/svelte-forms-lib-1.0.4.tgz",
+      "integrity": "sha512-6GuufV5AX/B8vQjE5uJS0rZSiAvjs+G8Apz8WYUaTeVLOirx0InfK5i7jgoA+J1uLFBg7+P5c4Icam8bjuKvkA==",
+      "requires": {
+        "property-expr": "1.5.1",
+        "svelte": "3.16.5"
+      },
+      "dependencies": {
+        "svelte": {
+          "version": "3.16.5",
+          "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.16.5.tgz",
+          "integrity": "sha512-iYOhJc7iczaonycuKjPgmy1lthhBoDOQo5UVhgKJRd3XYRdnYPPb0LvvJ0t7jqu5+15S0msMm06WSOKUvhEZsw=="
+        }
+      }
+    },
     "svelte-pipeable-store": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/svelte-pipeable-store/-/svelte-pipeable-store-1.0.3.tgz",
@@ -7245,11 +7276,6 @@
       "resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-1.4.0.tgz",
       "integrity": "sha512-09ypn0/vD2PcuyZEEocUHFgi7kvLOxSoUUuJZ4j3p4Y4sT/kMIWtHIRpnLdsr8bQ+sGo77sbEkO+av6yd1RjPg=="
     },
-    "svelte-tags-input": {
-      "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/svelte-tags-input/-/svelte-tags-input-1.0.16.tgz",
-      "integrity": "sha512-g9buRdhoQaIW9wFPeRDSIZnyYT1tzvizb7EU8Ayqi+8P4yAJ7EHDwteQ+/5q3HjNiqkgn3HZqqZjQmV9ZLdqhw=="
-    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -7277,6 +7303,11 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "synchronous-promise": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.10.tgz",
+      "integrity": "sha512-6PC+JRGmNjiG3kJ56ZMNWDPL8hjyghF5cMXIFOKg+NiwwEZZIvxTWd0pinWKyD227odg9ygF8xVhhz7gb8Uq7A=="
+    },
     "teeny-request": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-6.0.1.tgz",
@@ -7409,6 +7440,11 @@
       "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
       "dev": true
     },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -7965,6 +8001,20 @@
           "dev": true
         }
       }
+    },
+    "yup": {
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.28.1.tgz",
+      "integrity": "sha512-xSHMZA7UyecSG/CCTDCtnYZMjBrYDR/C7hu0fMsZ6UcS/ngko4qCVFbw+CAmNtHlbItKkvQ3YXITODeTj/dUkw==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "fn-name": "~2.0.1",
+        "lodash": "^4.17.11",
+        "lodash-es": "^4.17.11",
+        "property-expr": "^1.5.0",
+        "synchronous-promise": "^2.0.6",
+        "toposort": "^2.0.2"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index d5a656a..e777f06 100644
--- a/package.json
+++ b/package.json
@@ -32,10 +32,11 @@
     "iter-tools": "^7.0.0-rc.0",
     "regenerator-runtime": "^0.13.3",
     "route-parser": "0.0.5",
+    "svelte-forms-lib": "^1.0.4",
     "svelte-pipeable-store": "^1.0.3",
     "svelte-portal": "^0.1.0",
     "svelte-routing": "^1.4.0",
-    "svelte-tags-input": "^1.0.16"
+    "yup": "^0.28.1"
   },
   "staticFiles": {
     "staticPath": "public",
diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte
index 1f0b6d4..2b11fe3 100644
--- a/src/components/Settings.svelte
+++ b/src/components/Settings.svelte
@@ -1,15 +1,19 @@
 <button class="header__sideBtn" on:click={() => openPage()}>Settings</button>
 <Portal target="{document.body}">
     <ContextPage name="Settings" open={open} on:close={closePage}>
-    <form class="settings">
+
+    <form class="settings" on:submit={handleSubmit}>
         <div class="settings-line">
             <div class="settings-side">
                 <div class="settings-side__title">Instance</div>
                 <div class="settings-side__subtitle">The mastodon instance from the toods are fetched</div>
             </div>
             <div class="settings-main">
-                <input class="f-size-full" type="text" value="https://eldritch.cafe">
+                <input class="f-size-full" type="text" id="domain" name="domain" on:change={handleChange} bind:value={$form.domain}>
             </div>
+            {#if $errors.domain}
+                <span>{$errors.domain}</span>
+            {/if}
         </div>
         <div class="settings-line">
             <div class="settings-side">
@@ -17,10 +21,13 @@
                 <div class="settings-side__subtitle">What hashtags are fetched</div>
             </div>
             <div class="settings-main">
-                <TagInput on:change={e => a = e.detail} value={a}/>
+                <TagInput on:change={handleCustomChange('hashtags')} bind:value={$form.hashtags} />
             </div>
+            <!-- {#if $errors.hashtags}
+                <span>{$errors.hashtags}{console.log($errors.hashtags)}</span>
+            {/if} -->
         </div>
-        <div class="settings-line">
+        <!-- <div class="settings-line">
             <div class="settings-side">
                 <div class="settings-side__title">Max duration</div>
                 <div class="settings-side__subtitle">Hide tracks above this duration</div>
@@ -37,19 +44,61 @@
                     <label for="nolimit">No limit</label>
                 </div>
             </div>
-        </div>
-        <button class="btn btn--primary w100">Save the changes</button>
+        </div> -->
+        <button class="btn btn--primary w100" type="submit">Save the changes</button>
     </form>
     </ContextPage>
 </Portal>
 
 <script>
+    import { getContext } from 'svelte'
+    import { createForm } from 'svelte-forms-lib'
+    import * as yup from 'yup'
     import Portal from 'svelte-portal'
     import ContextPage from '/components/ContextPage'
     import TagInput from '/components/TagInput'
 
-    let a = ['np', 'tootradio', 'pouetradio']
-    $: console.log(a)
+    const domain = getContext('domain')
+    const hashtags = getContext('hashtags')
+
+    const {
+        form,
+        errors,
+        handleChange,
+        handleSubmit
+    } = createForm({
+        initialValues: {
+            domain: $domain,
+            hashtags: $hashtags
+        },
+        // validationSchema: yup.object().shape({
+        //     domain: yup.string()
+        //         .required()
+        //         .trim()
+        //         .test(
+        //             'is-valid-domain',
+        //             '${path} is not a valid domain',
+        //             async domain => (await fetch(`https://${domain}/api/v1/instance`)).status === 200
+        //         ),
+        //     // hashtags: yup.array()
+        //         // .required()
+        //         // .of(yup.string()
+        //         //     .ensure()
+        //         //     .required()
+        //         //     .trim()
+        //         //     .matches('/[a-z0-9]+/i')
+        //         // )
+        //         // .min(1)
+        //         // .min(5)
+        // }),
+        onSubmit: values => {
+            $domain = values.domain
+            $hashtags = values.hashtags
+            location.reload() // for now
+        }
+    })
+
+    const handleCustomChange = name => event => handleChange({ target: { name, value: event.detail } })
 
     let open = false
 
diff --git a/src/components/TagInput.svelte b/src/components/TagInput.svelte
index 5312f29..cf4a355 100644
--- a/src/components/TagInput.svelte
+++ b/src/components/TagInput.svelte
@@ -14,14 +14,19 @@
 
     $: tags = value
 
+    const update = () => {
+        value = tags
+        dispatch('change', tags)
+    }
+
     const add = tag => {
         tags = [...tags, tag]
-        dispatch('change', tags)
+        update()
     }
 
     const remove = index => {
         tags = [...tags.slice(0, index), ...tags.slice(index + 1)]
-        dispatch('change', tags)
+        update()
     }
 
     const onKeyDown = event => {
diff --git a/src/services/misc.js b/src/services/misc.js
index a85c39b..d710ed7 100644
--- a/src/services/misc.js
+++ b/src/services/misc.js
@@ -2,6 +2,10 @@ import getUrls from 'get-urls'
 import { execPipe, asyncFilter, asyncMap, map, take, filter, asyncFlatMap, toArray } from 'iter-tools'
 import { share } from '/routes.js'
 
+const intersection = (xs, ys) => xs.filter(x => ys.includes(x))
+const difference = (xs, ys) => xs.filter(x => !ys.includes(x))
+const symmetricDifference = (xs, ys) => [...difference(xs, ys), ...difference(ys, xs)]
+
 export const tap = f => x => {
     f(x)
     return x