diff --git a/about.md b/about.md
index 9138932..10aee1d 100644
--- a/about.md
+++ b/about.md
@@ -1,7 +1,2 @@
 # About Nix CLIC
 
-In fact a start of package was available by mistake in nixpkgs.
-
-I updated it in this PR: <https://github.com/NixOS/nixpkgs/pull/337419>.
-
-Still need  to work on the module (it's very wip)..
diff --git a/components/ConfigForm.vue b/components/ConfigForm.vue
new file mode 100644
index 0000000..e56c93a
--- /dev/null
+++ b/components/ConfigForm.vue
@@ -0,0 +1,593 @@
+<script>
+export default {
+  data() {
+    return {
+      netconf: 'autoconfig',
+      networkingHostname: '',
+      networkingDomain: 'distrilab.org',
+      timezone: 'Etc/UTC',
+      locale: 'en_US.UTF-8',
+      user: 'operator',
+      userPassword: 'CHANGE ME !!!',
+    }
+  },
+  methods: {
+    netconfHasBeenChanged(val = '') {
+      if (val === 'autoconfig') {
+        this.networkingDomain = 'distrilab.org'
+      } else {
+        this.networkingDomain = ''
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <h2>Networking</h2>
+
+  <div class="form-row">
+    <div class="form-cell">
+      <strong>Choose your network configuration</strong>
+      <label>
+        <input type="radio" v-model="netconf" name="netconf" value="autoconfig"
+          @click="netconfHasBeenChanged('autoconfig')">I'm a
+        noob in
+        network config, I trust
+        you to provide networking for me (ipv6 only)</label>
+      <label>
+        <input type="radio" v-model="netconf" name="netconf" value="publicip" @click="netconfHasBeenChanged">My server
+        has a public ip that I can
+        provide
+      </label>
+      <label>
+        <input type="radio" v-model="netconf" name="netconf" value="localnetwork" @click="netconfHasBeenChanged">My
+        router is set so that my local
+        machine is accessible on the public network
+      </label>
+      <label>
+        <input type="radio" v-model="netconf" name="netconf" value="wireguard" @click="netconfHasBeenChanged">My server
+        can use a wireguard server i
+        can configure
+      </label>
+    </div>
+  </div>
+  <div class="form-row">
+    <div class="form-cell">
+      <label>Machine network name</label>
+      <input required type="text" v-model="networkingHostname"
+        placeholder="Give your machine a name without spaces, ponctuation or accents" />
+    </div>
+  </div>
+  <input v-if="netconf === 'autoconfig'" type="hidden" v-model="networkingDomain" value="distrilab.fr" />
+  <div class="form-row" v-if="netconf !== 'autoconfig'">
+    <div class="form-cell">
+      <label>Domain name</label>
+      <input required type="text" v-model="networkingDomain" placeholder="ex: distrilab.fr" />
+    </div>
+  </div>
+
+  <h2>Usage bundles</h2>
+
+  <h2>Applications packages</h2>
+
+  <h2>Advanced configuration</h2>
+  Operating UNIX user name
+  Operating UNIX user password
+  Timezone
+  Locale
+
+  <h2>Auto-generated configuration.nix file</h2>
+  <pre>
+    <code>
+      { config, lib, pkgs, ... }:
+
+      {
+      imports = [
+      ./hardware-configuration.nix
+      ];
+
+      boot.loader.systemd-boot.enable = true;
+      boot.loader.efi.canTouchEfiVariables = true;
+
+      networking = {
+      hostName = "{{ networkingHostname }}";
+      domain = "{{ networkingDomain }}";
+      nameservers = ["80.67.169.12" "2001:910:800::12" "80.67.169.40" "2001:910:800::40"];
+      wg-quick.interfaces = {
+      wg0 = {
+      address = [ "10.42.0.3/32"];
+      privateKeyFile = "/etc/wireguard_private_key";
+
+      peers = [
+      {
+      publicKey = "2MZzEGJzA3HrwkHf91TaKJEHwCNyVvsTLWoIYHrCxhY=";
+      presharedKeyFile = "/etc/wireguard_preshared_key";
+      allowedIPs = [ "10.42.0.0/24" ];
+      endpoint = "195.201.63.240:8098";
+      persistentKeepalive = 15;
+      }
+      ];
+      };
+      };
+      };
+
+      users.users.{{ user }} = {
+      isNormalUser = true;
+      extraGroups = [ "wheel" ];
+      initialPassword = "{{ userPassword }}";
+      openssh.authorizedKeys.keys = [
+      "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIBBM+2TwkopAQF7splTWjORQoxjcp67VhodwzvTMlL8g florian@florian-LinuxMint-MBP"
+      "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAILRG0CyeeMMrrjTTm/PHgRXD/I4lH/bBPBCGUiL+cBdq douzeb@tux-12"
+      ];
+      };
+
+      security.sudo.extraRules= [
+      {
+      users = [ "{{ user }}" ];
+      commands = [
+      { command = "ALL" ;
+      options= [ "NOPASSWD" ]; # "SETENV" # Adding the following could be a good idea
+      }
+      ];
+      }
+      ];
+
+
+      time.timeZone = "{{ timezone }}";
+      i18n.defaultLocale = "{{ locale }}";
+      }
+    </code>
+  </pre>
+</template>
+
+<style>
+:root {
+  box-sizing: border-box;
+  --co-body-bg: #eee;
+  --co-body-text: #444;
+  --co-body-accent: #4834d4;
+  --co-body-accent-contrast: #fff;
+  --co-textfld-bg: #fff;
+  --co-textfld-border: #ccc;
+  --co-textfld-active-border: #aaa;
+  --co-textfld-focus-border: var(--co-body-accent);
+  --co-textfld-valid-border: hsl(140 50% 75%);
+  --co-textfld-valid-active-border: hsl(140 50% 65%);
+  --co-textfld-valid-focus-border: hsl(140 50% 50%);
+  --co-textfld-invalid-border: hsl(20 65% 75%);
+  --co-textfld-invalid-active-border: hsl(20 65% 65%);
+  --co-textfld-invalid-focus-border: hsl(20 65% 50%);
+  --co-btn-text: var(--co-body-accent-contrast);
+  --co-btn-bg: var(--co-body-accent);
+  --co-btn-active-bg: #333;
+  --co-btn-focus-bg: #333;
+}
+
+.dark-mode {
+  --co-body-bg: #111;
+  --co-body-text: #ddd;
+  --co-body-accent: #6c5ce7;
+  --co-body-accent-contrast: #fff;
+  --co-textfld-bg: #222;
+  --co-textfld-border: #333;
+  --co-textfld-active-border: #444;
+  --co-textfld-focus-border: var(--co-body-accent);
+  --co-textfld-valid-border: hsl(140 90% 20%);
+  --co-textfld-valid-active-border: hsl(140 90% 30%);
+  --co-textfld-valid-focus-border: hsl(140 90% 45%);
+  --co-textfld-invalid-border: hsl(20 90% 20%);
+  --co-textfld-invalid-active-border: hsl(20 90% 30%);
+  --co-textfld-invalid-focus-border: hsl(20 90% 45%);
+  --co-btn-text: var(--co-body-accent-contrast);
+  --co-btn-bg: var(--co-body-accent);
+  --co-btn-active-bg: #333;
+  --co-btn-focus-bg: #333;
+}
+
+.dark-mode {
+  color-scheme: dark;
+}
+
+:root {
+  --leading-inputs: 120%;
+  --padding-inputs: 0.75em;
+  --margin-label: 0.5em;
+  --margin-form-gap: 1.5em;
+  --margin-btn-gap: 1em;
+  --width-input-border: 2px;
+  --width-inputs: 250px;
+  --width-textarea: 450px;
+  --height-textarea: 250px;
+  --radius-inputs: 0.25em;
+  --opacity-input-disabled: 0.5;
+  --transition-duration-inputs: 250ms;
+  --transition-function-inputs: ease-in-out;
+  --transition-inputs: color var(--transition-duration-inputs),
+    background-color var(--transition-duration-inputs),
+    border-color var(--transition-duration-inputs) var(--transition-function-inputs);
+}
+
+:read-only:not(label, button, input[type=button], input[type=submit], input[type=reset]) {
+  cursor: default;
+}
+
+:disabled {
+  opacity: var(--opacity-input-disabled);
+  cursor: not-allowed;
+}
+
+/* All elemenets regardless of types */
+input,
+select,
+option,
+textarea,
+button,
+datalist,
+fieldset,
+legend,
+optgroup,
+output,
+input::file-selector-button {
+  font: inherit;
+  color: inherit;
+  accent-color: var(--co-body-accent);
+  transition: var(--transition-inputs);
+  line-height: var(--leading-inputs);
+}
+
+/* All elements with types */
+/* Radio & Checkbox */
+/* Buttons */
+/* Select, Buttons and text-fields */
+select,
+textarea,
+input[type=date],
+input[type=datetime-local],
+input[type=email],
+input[type=month],
+input[type=number],
+input[type=password],
+input[type=search],
+input[type=tel],
+input[type=text],
+input[type=time],
+input[type=url],
+input[type=week],
+button,
+input[type=reset],
+input[type=submit],
+input[type=button],
+input::file-selector-button {
+  border: var(--width-input-border) solid var(--co-textfld-border);
+  padding: var(--padding-inputs);
+  border-radius: var(--radius-inputs);
+  background-color: var(--co-textfld-bg);
+}
+
+select:focus,
+textarea:focus,
+input[type=date]:focus,
+input[type=datetime-local]:focus,
+input[type=email]:focus,
+input[type=month]:focus,
+input[type=number]:focus,
+input[type=password]:focus,
+input[type=search]:focus,
+input[type=tel]:focus,
+input[type=text]:focus,
+input[type=time]:focus,
+input[type=url]:focus,
+input[type=week]:focus,
+button:focus,
+input[type=reset]:focus,
+input[type=submit]:focus,
+input[type=button]:focus,
+input::file-selector-button:focus {
+  outline: 0;
+}
+
+/* All text-fields x select */
+select,
+textarea,
+input[type=date],
+input[type=datetime-local],
+input[type=email],
+input[type=month],
+input[type=number],
+input[type=password],
+input[type=search],
+input[type=tel],
+input[type=text],
+input[type=time],
+input[type=url],
+input[type=week] {
+  max-width: var(--width-inputs);
+  width: 100%;
+}
+
+select:hover:not([readonly], [disabled]),
+select:active:not([readonly], [disabled]),
+textarea:hover:not([readonly], [disabled]),
+textarea:active:not([readonly], [disabled]),
+input[type=date]:hover:not([readonly], [disabled]),
+input[type=date]:active:not([readonly], [disabled]),
+input[type=datetime-local]:hover:not([readonly], [disabled]),
+input[type=datetime-local]:active:not([readonly], [disabled]),
+input[type=email]:hover:not([readonly], [disabled]),
+input[type=email]:active:not([readonly], [disabled]),
+input[type=month]:hover:not([readonly], [disabled]),
+input[type=month]:active:not([readonly], [disabled]),
+input[type=number]:hover:not([readonly], [disabled]),
+input[type=number]:active:not([readonly], [disabled]),
+input[type=password]:hover:not([readonly], [disabled]),
+input[type=password]:active:not([readonly], [disabled]),
+input[type=search]:hover:not([readonly], [disabled]),
+input[type=search]:active:not([readonly], [disabled]),
+input[type=tel]:hover:not([readonly], [disabled]),
+input[type=tel]:active:not([readonly], [disabled]),
+input[type=text]:hover:not([readonly], [disabled]),
+input[type=text]:active:not([readonly], [disabled]),
+input[type=time]:hover:not([readonly], [disabled]),
+input[type=time]:active:not([readonly], [disabled]),
+input[type=url]:hover:not([readonly], [disabled]),
+input[type=url]:active:not([readonly], [disabled]),
+input[type=week]:hover:not([readonly], [disabled]),
+input[type=week]:active:not([readonly], [disabled]) {
+  border-color: var(--co-textfld-active-border);
+}
+
+select:focus:not([readonly], [disabled]),
+textarea:focus:not([readonly], [disabled]),
+input[type=date]:focus:not([readonly], [disabled]),
+input[type=datetime-local]:focus:not([readonly], [disabled]),
+input[type=email]:focus:not([readonly], [disabled]),
+input[type=month]:focus:not([readonly], [disabled]),
+input[type=number]:focus:not([readonly], [disabled]),
+input[type=password]:focus:not([readonly], [disabled]),
+input[type=search]:focus:not([readonly], [disabled]),
+input[type=tel]:focus:not([readonly], [disabled]),
+input[type=text]:focus:not([readonly], [disabled]),
+input[type=time]:focus:not([readonly], [disabled]),
+input[type=url]:focus:not([readonly], [disabled]),
+input[type=week]:focus:not([readonly], [disabled]) {
+  border-color: var(--co-textfld-focus-border);
+}
+
+select:required:valid:hover:not([readonly], [disabled]),
+select:required:valid:active:not([readonly], [disabled]),
+textarea:required:valid:hover:not([readonly], [disabled]),
+textarea:required:valid:active:not([readonly], [disabled]),
+input[type=date]:required:valid:hover:not([readonly], [disabled]),
+input[type=date]:required:valid:active:not([readonly], [disabled]),
+input[type=datetime-local]:required:valid:hover:not([readonly], [disabled]),
+input[type=datetime-local]:required:valid:active:not([readonly], [disabled]),
+input[type=email]:required:valid:hover:not([readonly], [disabled]),
+input[type=email]:required:valid:active:not([readonly], [disabled]),
+input[type=month]:required:valid:hover:not([readonly], [disabled]),
+input[type=month]:required:valid:active:not([readonly], [disabled]),
+input[type=number]:required:valid:hover:not([readonly], [disabled]),
+input[type=number]:required:valid:active:not([readonly], [disabled]),
+input[type=password]:required:valid:hover:not([readonly], [disabled]),
+input[type=password]:required:valid:active:not([readonly], [disabled]),
+input[type=search]:required:valid:hover:not([readonly], [disabled]),
+input[type=search]:required:valid:active:not([readonly], [disabled]),
+input[type=tel]:required:valid:hover:not([readonly], [disabled]),
+input[type=tel]:required:valid:active:not([readonly], [disabled]),
+input[type=text]:required:valid:hover:not([readonly], [disabled]),
+input[type=text]:required:valid:active:not([readonly], [disabled]),
+input[type=time]:required:valid:hover:not([readonly], [disabled]),
+input[type=time]:required:valid:active:not([readonly], [disabled]),
+input[type=url]:required:valid:hover:not([readonly], [disabled]),
+input[type=url]:required:valid:active:not([readonly], [disabled]),
+input[type=week]:required:valid:hover:not([readonly], [disabled]),
+input[type=week]:required:valid:active:not([readonly], [disabled]) {
+  border-color: var(--co-textfld-valid-active-border);
+}
+
+select:required:valid:focus:not([readonly], [disabled]),
+textarea:required:valid:focus:not([readonly], [disabled]),
+input[type=date]:required:valid:focus:not([readonly], [disabled]),
+input[type=datetime-local]:required:valid:focus:not([readonly], [disabled]),
+input[type=email]:required:valid:focus:not([readonly], [disabled]),
+input[type=month]:required:valid:focus:not([readonly], [disabled]),
+input[type=number]:required:valid:focus:not([readonly], [disabled]),
+input[type=password]:required:valid:focus:not([readonly], [disabled]),
+input[type=search]:required:valid:focus:not([readonly], [disabled]),
+input[type=tel]:required:valid:focus:not([readonly], [disabled]),
+input[type=text]:required:valid:focus:not([readonly], [disabled]),
+input[type=time]:required:valid:focus:not([readonly], [disabled]),
+input[type=url]:required:valid:focus:not([readonly], [disabled]),
+input[type=week]:required:valid:focus:not([readonly], [disabled]) {
+  border-color: var(--co-textfld-valid-focus-border);
+}
+
+select:required:invalid:hover,
+select:required:invalid:active,
+textarea:required:invalid:hover,
+textarea:required:invalid:active,
+input[type=date]:required:invalid:hover,
+input[type=date]:required:invalid:active,
+input[type=datetime-local]:required:invalid:hover,
+input[type=datetime-local]:required:invalid:active,
+input[type=email]:required:invalid:hover,
+input[type=email]:required:invalid:active,
+input[type=month]:required:invalid:hover,
+input[type=month]:required:invalid:active,
+input[type=number]:required:invalid:hover,
+input[type=number]:required:invalid:active,
+input[type=password]:required:invalid:hover,
+input[type=password]:required:invalid:active,
+input[type=search]:required:invalid:hover,
+input[type=search]:required:invalid:active,
+input[type=tel]:required:invalid:hover,
+input[type=tel]:required:invalid:active,
+input[type=text]:required:invalid:hover,
+input[type=text]:required:invalid:active,
+input[type=time]:required:invalid:hover,
+input[type=time]:required:invalid:active,
+input[type=url]:required:invalid:hover,
+input[type=url]:required:invalid:active,
+input[type=week]:required:invalid:hover,
+input[type=week]:required:invalid:active {
+  border-color: var(--co-textfld-invalid-active-border);
+}
+
+select:required:invalid:focus,
+textarea:required:invalid:focus,
+input[type=date]:required:invalid:focus,
+input[type=datetime-local]:required:invalid:focus,
+input[type=email]:required:invalid:focus,
+input[type=month]:required:invalid:focus,
+input[type=number]:required:invalid:focus,
+input[type=password]:required:invalid:focus,
+input[type=search]:required:invalid:focus,
+input[type=tel]:required:invalid:focus,
+input[type=text]:required:invalid:focus,
+input[type=time]:required:invalid:focus,
+input[type=url]:required:invalid:focus,
+input[type=week]:required:invalid:focus {
+  border-color: var(--co-textfld-invalid-focus-border);
+}
+
+select::selection,
+textarea::selection,
+input[type=date]::selection,
+input[type=datetime-local]::selection,
+input[type=email]::selection,
+input[type=month]::selection,
+input[type=number]::selection,
+input[type=password]::selection,
+input[type=search]::selection,
+input[type=tel]::selection,
+input[type=text]::selection,
+input[type=time]::selection,
+input[type=url]::selection,
+input[type=week]::selection {
+  background-color: var(--co-body-accent);
+  color: var(--co-body-accent-contrast);
+}
+
+select:not([disabled], [readonly]) option:focus,
+select:not([disabled], [readonly]) option:active,
+select:not([disabled], [readonly]) option:hover,
+select:not([disabled], [readonly]) option:checked {
+  background-color: var(--co-body-accent);
+  color: var(--co-body-accent-contrast);
+}
+
+input[type=color] {
+  cursor: pointer;
+  border-style: solid;
+  border-radius: var(--radius-inputs);
+  border-color: var(--co-textfld-border);
+  background-color: var(--co-textfld-bg);
+}
+
+input[type=color]:hover:not([disabled]),
+input[type=color]:active:not([disabled]) {
+  border-color: var(--co-textfld-active-border);
+}
+
+input[type=color]:focus {
+  outline: 0;
+}
+
+input[type=color]:focus:not([disabled]) {
+  border-color: var(--co-textfld-focus-border);
+}
+
+button,
+input[type=reset],
+input[type=submit],
+input[type=button],
+input::file-selector-button {
+  border-color: var(--co-btn-bg);
+  background-color: var(--co-btn-bg);
+  color: var(--co-btn-text);
+  cursor: pointer;
+}
+
+button:hover,
+button:active,
+input[type=reset]:hover,
+input[type=reset]:active,
+input[type=submit]:hover,
+input[type=submit]:active,
+input[type=button]:hover,
+input[type=button]:active,
+input::file-selector-button:hover,
+input::file-selector-button:active {
+  background-color: var(--co-btn-active-bg);
+  border-color: var(--co-btn-active-bg);
+}
+
+button:focus,
+input[type=reset]:focus,
+input[type=submit]:focus,
+input[type=button]:focus,
+input::file-selector-button:focus {
+  background-color: var(--co-btn-active-bg);
+}
+
+/* Labels */
+label {
+  cursor: pointer;
+  display: block;
+}
+
+label+label,
+label+input,
+label+select,
+label+button,
+label+textarea {
+  margin-top: var(--margin-label);
+}
+
+textarea {
+  max-width: var(--width-textarea);
+  height: var(--height-textarea);
+}
+
+textarea:read-only,
+textarea:disabled {
+  resize: none;
+}
+
+input::file-selector-button {
+  margin-right: var(--margin-form-gap);
+}
+
+label:has(input:disabled) {
+  opacity: var(--opacity-input-disabled);
+  cursor: not-allowed;
+}
+
+label:has(input:disabled) :disabled {
+  opacity: 1;
+}
+
+.site-container {
+  padding: 1.5em;
+  max-width: 1160px;
+  margin: 3em auto;
+}
+
+.form-row {
+  gap: var(--margin-form-gap);
+}
+
+.form-row+.form-row {
+  margin-top: var(--margin-form-gap);
+}
+
+.btn-group {
+  gap: var(--margin-btn-gap);
+}
+
+.form-row,
+.btn-group {
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>
diff --git a/configure.md b/configure.md
index 93db5e7..579b141 100644
--- a/configure.md
+++ b/configure.md
@@ -1,14 +1,15 @@
-# Tips and tricks
+---
+layout: doc
+prev: false
+next: false
+sidebar: false
+outline: false
+aside: false
+---
+# Generate my configuration
 
-## Remove long nix paths in htop
+<script setup>
+import ConfigForm from './components/ConfigForm.vue'
+</script>
 
-`htop` has an option for shorter names, press `p` to toggle between full path and short path
-
-## Migrating from Debian 12 to Nixos
-
-> [!TIP]
-> You need a fast internet connection to achieve this in less than 5 hours... #truestory 
-
-Following the procedure from https://nixos.org/manual/nixos/stable/#sec-installing-from-other-distro (skipping the extra partition)
-
-There was also the option of [nixos anywhere](https://github.com/nix-community/nixos-anywhere).
+<ConfigForm />
diff --git a/index.md b/index.md
index 3ee5800..02af253 100644
--- a/index.md
+++ b/index.md
@@ -10,7 +10,7 @@ hero:
   actions:
      - theme: brand
        text: Generate my NixOS configuration
-       link: /generate
+       link: /configure
      - theme: alt
        text: Documentation 
        link: /about
diff --git a/roadmap.md b/roadmap.md
new file mode 100644
index 0000000..309305c
--- /dev/null
+++ b/roadmap.md
@@ -0,0 +1,2 @@
+# Roadmap
+
diff --git a/technical-principles.md b/technical-principles.md
new file mode 100644
index 0000000..207ccb9
--- /dev/null
+++ b/technical-principles.md
@@ -0,0 +1,2 @@
+# Technical principles
+