diff --git a/.prettierignore_for_svelte b/.prettierignore_for_svelte
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/apps/lluis/Button.svelte b/apps/lluis/Button.svelte
index 6c8feb7c2504..2c5dab774723 100644
--- a/apps/lluis/Button.svelte
+++ b/apps/lluis/Button.svelte
@@ -15,8 +15,20 @@
   export let disabled = false
 </script>
 
-<div class="lluis-button" class:small={size === "small"} class:large={size === "large"} data-style={style}>
-  <LinkOrButton href={href} on:click="{() => dispatch('click')}" type={type} target={target} tabIndex={tabIndex} disabled={disabled}>
+<div
+  class="lluis-button"
+  class:small={size === "small"}
+  class:large={size === "large"}
+  data-style={style}
+>
+  <LinkOrButton
+    {href}
+    on:click={() => dispatch("click")}
+    {type}
+    {target}
+    {tabIndex}
+    {disabled}
+  >
     {#if loading}
       <span class="spinner">
         <Icon icon="spinner" />
@@ -33,34 +45,37 @@
 
 <style type="text/scss">
   @keyframes spinner {
-    to {transform: rotate(360deg);}
+    to {
+      transform: rotate(360deg);
+    }
   }
 
   .lluis-button {
     display: inline-block;
   }
 
-  div>:global(*) {
+  div > :global(*) {
     display: flex;
     border-radius: var(--button-radius-small);
     padding: 6px 20px;
     margin: 4px;
     transition-property: filter;
-    transition-duration: .1s;
+    transition-duration: 0.1s;
     transition-timing-function: ease-in-out;
 
-		:global(.icon) {
-				width: unset;
-				height: unset;
-				margin-right: 8px;
-		}
+    :global(.icon) {
+      width: unset;
+      height: unset;
+      margin-right: 8px;
+    }
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       filter: brightness(1.2);
     }
 
     &:active {
-      filter: brightness(.9);
+      filter: brightness(0.9);
       transform: scale(0.9);
     }
   }
@@ -71,7 +86,7 @@
     height: 16px;
     align-items: center;
     justify-content: center;
-    animation: spinner .6s linear infinite;
+    animation: spinner 0.6s linear infinite;
 
     :global(.icon) {
       display: block;
@@ -79,19 +94,21 @@
     }
   }
 
-  div[data-style=primary]>:global(*) {
+  div[data-style="primary"] > :global(*) {
     border: 1px solid var(--button-primary-border);
-    color: var(--button-primary-text-color) !important; /* TODO: remove when hero is remoevd */
+    color: var(
+      --button-primary-text-color
+    ) !important; /* TODO: remove when hero is remoevd */
     background-color: var(--button-primary-background-color) !important;
   }
 
-  div[data-style=secondary]>:global(*) {
+  div[data-style="secondary"] > :global(*) {
     border: 1px solid var(--button-secondary-border);
     color: var(--button-secondary-text-color) !important;
     background-color: var(--button-secondary-background-color) !important;
   }
 
-  div[data-style=key]>:global(*) {
+  div[data-style="key"] > :global(*) {
     margin: 6px;
     padding: 6px 0;
     text-align: center;
@@ -101,17 +118,17 @@
     background-color: var(--button-key-background-color) !important;
   }
 
-  .small>:global(*) {
+  .small > :global(*) {
     font-size: 16px;
     padding: 3px 12px;
   }
 
-  .medium>:global(*) {
+  .medium > :global(*) {
     font-size: 18px;
     padding: 3px 12px;
   }
 
-  .large>:global(*) {
+  .large > :global(*) {
     font-size: 20px;
     padding: 9px 14px;
   }
diff --git a/apps/lluis/Column.svelte b/apps/lluis/Column.svelte
index 29100940616a..9944301d4d4d 100644
--- a/apps/lluis/Column.svelte
+++ b/apps/lluis/Column.svelte
@@ -7,16 +7,17 @@
 </script>
 
 <div
-  data-size="{size}"
-  data-size-desktop="{sizeDesktop}"
-  data-size-tablet="{sizeTablet}"
-  class:is-one-third-desktop="{sizeDesktop === '1/3'}"
-  class:is-half-tablet="{sizeTablet === '1/2'}"
-  class:is-one-third-tablet="{sizeTablet === '1/3'}"
-  class:is-one-quarter="{size === '1/4'}"
-  class:is-one-third="{size === '1/3'}"
-  class:is-three-fifths="{size === '3/5'}"
-  class:is-1="{size === '1'}"
-  class="column">
+  data-size={size}
+  data-size-desktop={sizeDesktop}
+  data-size-tablet={sizeTablet}
+  class:is-one-third-desktop={sizeDesktop === "1/3"}
+  class:is-half-tablet={sizeTablet === "1/2"}
+  class:is-one-third-tablet={sizeTablet === "1/3"}
+  class:is-one-quarter={size === "1/4"}
+  class:is-one-third={size === "1/3"}
+  class:is-three-fifths={size === "3/5"}
+  class:is-1={size === "1"}
+  class="column"
+>
   <slot />
 </div>
diff --git a/apps/lluis/Columns.svelte b/apps/lluis/Columns.svelte
index c599a789bcc6..d9624a28f625 100644
--- a/apps/lluis/Columns.svelte
+++ b/apps/lluis/Columns.svelte
@@ -5,13 +5,14 @@
 
 <div
   class="columns"
-  class:is-multiline="{multiline}"
-  class:is-reversed="{reversed}">
+  class:is-multiline={multiline}
+  class:is-reversed={reversed}
+>
   <slot />
 </div>
 
 <style type="text/scss">
-  @import './node_modules/bulma/sass/utilities/_all';
+  @import "./node_modules/bulma/sass/utilities/_all";
 
   @include until($tablet) {
     .is-reversed {
diff --git a/apps/lluis/FormField.svelte b/apps/lluis/FormField.svelte
index b36282c21225..d72bfa26de57 100644
--- a/apps/lluis/FormField.svelte
+++ b/apps/lluis/FormField.svelte
@@ -1,15 +1,15 @@
 <script lang="typescript">
-  import Icon from "lluis/Icon.svelte";
+  import Icon from "lluis/Icon.svelte"
 
-  export let name: string;
-  export let id: string;
-  export let icon: string;
-  export let type = "text";
-  export let value: string | boolean | number;
-  export let formStatus = {};
-  let error = null;
+  export let name: string
+  export let id: string
+  export let icon: string
+  export let type = "text"
+  export let value: string | boolean | number
+  export let formStatus = {}
+  let error = null
   $: {
-    error = formStatus[id];
+    error = formStatus[id]
   }
 </script>
 
diff --git a/apps/lluis/Hidden.svelte b/apps/lluis/Hidden.svelte
index c38f2220124e..13d838f61b1f 100644
--- a/apps/lluis/Hidden.svelte
+++ b/apps/lluis/Hidden.svelte
@@ -2,7 +2,6 @@
   <slot />
 </div>
 
-
 <style>
   div {
     display: none !important;
diff --git a/apps/lluis/Icon.svelte b/apps/lluis/Icon.svelte
index ef65ceecb3af..f4f24b248b41 100644
--- a/apps/lluis/Icon.svelte
+++ b/apps/lluis/Icon.svelte
@@ -5,6 +5,6 @@
   export let left = false
 </script>
 
-<span class="{`icon is-${size}`}" class:is-left="{left}">
-  <i class="{`${prefix} fa-${icon} ${size === 'large' ? 'fa-2x' : ''}`}"></i>
+<span class={`icon is-${size}`} class:is-left={left}>
+  <i class={`${prefix} fa-${icon} ${size === "large" ? "fa-2x" : ""}`} />
 </span>
diff --git a/apps/lluis/Logo.svelte b/apps/lluis/Logo.svelte
index 7f6622c47d17..aff29879056d 100644
--- a/apps/lluis/Logo.svelte
+++ b/apps/lluis/Logo.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <a href="/" class="logo">
-  <img src={src} alt={alt}/>
+  <img {src} {alt} />
 </a>
 
 <style type="text/scss">
diff --git a/apps/lluis/Panel.svelte b/apps/lluis/Panel.svelte
index 07bb151edf80..ec9a58cbbcea 100644
--- a/apps/lluis/Panel.svelte
+++ b/apps/lluis/Panel.svelte
@@ -42,11 +42,11 @@
       max-width: 960px;
       margin: auto;
 
-      :global( [slot="left"] ) {
+      :global([slot="left"]) {
         flex-grow: 1;
       }
 
-      :global( [slot="right"] ) {
+      :global([slot="right"]) {
         flex-grow: 0;
       }
     }
diff --git a/apps/lluis/Title.svelte b/apps/lluis/Title.svelte
index df5e522f898c..76061211ae17 100644
--- a/apps/lluis/Title.svelte
+++ b/apps/lluis/Title.svelte
@@ -14,17 +14,18 @@
 <h1
   class:title={!isSubtitle}
   class:subtitle={isSubtitle}
-  class="{`is-size-${size}
-  ${sizeMobile ? `is-size-${sizeMobile}-mobile` : '' }
-  ${sizeTablet ? `is-size-${sizeTablet}-tablet` : ''}
-  ${sizeDesktop ? `is-size-${sizeDesktop}-desktop` : ''}
-  ${textWeight? `has-text-weight-${textWeight}` : '' }
-  ${align? `has-text-${align}` : '' }`}"
-  class:is-spaced={isSpaced}>
+  class={`is-size-${size}
+  ${sizeMobile ? `is-size-${sizeMobile}-mobile` : ""}
+  ${sizeTablet ? `is-size-${sizeTablet}-tablet` : ""}
+  ${sizeDesktop ? `is-size-${sizeDesktop}-desktop` : ""}
+  ${textWeight ? `has-text-weight-${textWeight}` : ""}
+  ${align ? `has-text-${align}` : ""}`}
+  class:is-spaced={isSpaced}
+>
   <slot />
 </h1>
 
 <style type="text/scss">
-  @import './node_modules/bulma/sass/utilities/_all';
+  @import "./node_modules/bulma/sass/utilities/_all";
   @import "./node_modules/bulma/sass/elements/title.sass";
 </style>
diff --git a/package.json b/package.json
index a74965dc8fa7..5de4704c51c0 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,8 @@
     "test:ci": "yarn web test:ci",
     "web": "yarn workspace @librelingo/web",
     "types": "yarn workspaces run types",
-    "format": "eslint . --fix --max-warnings=0",
-    "lint": "eslint . --max-warnings=0",
+    "format": "eslint . --fix --max-warnings=0 && prettier --write apps/**/*.svelte --ignore-path ./.prettierignore_for_svelte",
+    "lint": "eslint . --max-warnings=0 && prettier --check apps/**/*.svelte --ignore-path ./.prettierignore_for_svelte",
     "exportAllCourses": "./scripts/exportAllYamlCourses.sh",
     "exportCourse": "./scripts/exportYamlCourse.sh",
     "docs": "poetry run mkdocs serve",
diff --git a/prettier.config.js b/prettier.config.js
new file mode 100644
index 000000000000..a43ab29ded20
--- /dev/null
+++ b/prettier.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  semi: false,
+}