diff --git a/refl1d/webview/client/eslint.config.js b/refl1d/webview/client/eslint.config.js
index 5e5d8e79..791bd054 100644
--- a/refl1d/webview/client/eslint.config.js
+++ b/refl1d/webview/client/eslint.config.js
@@ -4,21 +4,20 @@ import pluginVue from "eslint-plugin-vue";
 import { FlatCompat } from "@eslint/eslintrc";
 import js from "@eslint/js";
 import prettierConfig from "@vue/eslint-config-prettier";
-import vueTsEslintConfig from "@vue/eslint-config-typescript";
+import { defineConfigWithVueTs, vueTsConfigs } from "@vue/eslint-config-typescript";
 
 const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 const compat = new FlatCompat({
   baseDirectory: __dirname,
   recommendedConfig: js.configs.recommended,
-  // allConfig: js.configs.all,
 });
 
-export default [
+export default defineConfigWithVueTs([
   /** Extend recommended configs */
   ...compat.extends("plugin:vue/vue3-recommended", "plugin:vuejs-accessibility/recommended", "prettier"),
   ...pluginVue.configs["flat/recommended"],
-  ...vueTsEslintConfig(),
   eslintPluginPrettierRecommended,
+  vueTsConfigs.recommended,
   prettierConfig,
   /** Configuration */
   {
@@ -39,6 +38,7 @@ export default [
         "error",
         { allowShortCircuit: true, allowTernary: true }, // Temporary fix for indirect dependency @typescript-eslint <= 8.15.0
       ],
+      "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
       "prettier/prettier": [
         "warn",
         {},
@@ -56,4 +56,4 @@ export default [
       ],
     },
   },
-];
+]);
diff --git a/refl1d/webview/client/src/components/SimpleBuilder.vue b/refl1d/webview/client/src/components/SimpleBuilder.vue
index 5f6a8967..f8312cc0 100644
--- a/refl1d/webview/client/src/components/SimpleBuilder.vue
+++ b/refl1d/webview/client/src/components/SimpleBuilder.vue
@@ -1,3 +1,7 @@
+<!-- 
+ TODO: Implement sortedSamples as Stack[] instead of Slab[][] to handle Repeat layers
+-->
+
 <script setup lang="ts">
 import { computed, onMounted, ref, shallowRef } from "vue";
 import type { ComputedRef } from "vue";
@@ -13,12 +17,15 @@ import type {
   SerializedModel,
   Slab,
   SLD,
-  Stack,
+  // Stack,
 } from "../model";
 
+type ModelType = "simple" | "mixed";
+
 // const title = "Builder";
 // @ts-ignore: intentionally infinite type recursion
 const modelJson = shallowRef<json>({});
+const modelType = ref<ModelType>("simple");
 const showInstructions = ref(false);
 const showEditQRange = ref(false);
 const editQmin = ref(0);
@@ -35,8 +42,24 @@ const props = defineProps<{
   socket: AsyncSocket;
 }>();
 
-const sortedLayers: ComputedRef<Slab[]> = computed(() => {
-  return modelJson.value["object"]["models"][activeModel.value]["sample"]["layers"];
+/** Returns a list of list of Slab based on the currently active model */
+const sortedSamples: ComputedRef<Slab[][]> = computed(() => {
+  const samples: Slab[][] = [];
+  let model = modelJson.value["object"]["models"][activeModel.value];
+  switch (modelType.value) {
+    case "simple":
+      let stack = model["sample"]["layers"] as Slab[];
+      samples.push(stack);
+      break;
+    case "mixed":
+      for (const sample of model["samples"]) {
+        samples.push(sample["layers"] as Slab[]);
+      }
+      break;
+    default:
+      throw new Error("Model type not recognized");
+  }
+  return samples;
 });
 
 props.socket.on("updated_parameters", fetchModel);
@@ -62,6 +85,7 @@ function createParameter(
   return par;
 }
 
+/** Create a new single layer with default values */
 function createLayer(
   name: string,
   rho: number,
@@ -86,24 +110,59 @@ function createLayer(
   return layer;
 }
 
-function createModel(): SerializedModel {
-  return {
-    references: {},
-    object: {
-      __class__: "bumps.fitproblem.FitProblem",
-      models: [
-        {
-          __class__: "refl1d.experiment.Experiment",
-          sample: {
-            __class__: "refl1d.sample.layers.Stack",
-            layers: [createLayer("Si", 2.07, 0.0, 0.0, 1.0), createLayer("Vacuum", 0.0, 0.0, 0.0, 0.0)],
+function createModel(mixed: boolean = false): SerializedModel {
+  modelType.value = mixed ? "mixed" : "simple";
+  if (mixed === true) {
+    // TODO: Created by Copilot, check if it's correct
+    return {
+      references: {},
+      object: {
+        __class__: "refl1d.bumps_interface.fitproblem.FitProblem",
+        models: [
+          {
+            __class__: "refl1d.experiment.MixedExperiment",
+            samples: [
+              {
+                __class__: "refl1d.experiment.Experiment",
+                sample: {
+                  __class__: "refl1d.sample.layers.Stack",
+                  layers: [createLayer("Si", 2.07, 0.0, 0.0, 1.0), createLayer("Vacuum", 0.0, 0.0, 0.0, 0.0)],
+                },
+                probe: generateQProbe(editQmin.value, editQmax.value, editQsteps.value, 0.0001),
+              },
+              {
+                __class__: "refl1d.experiment.Experiment",
+                sample: {
+                  __class__: "refl1d.sample.layers.Stack",
+                  layers: [createLayer("Si", 2.07, 0.0, 0.0, 1.0), createLayer("Vacuum", 0.0, 0.0, 0.0, 0.0)],
+                },
+                probe: generateQProbe(editQmin.value, editQmax.value, editQsteps.value, 0.0001),
+              },
+            ],
           },
-          probe: generateQProbe(editQmin.value, editQmax.value, editQsteps.value, 0.0001),
-        },
-      ],
-    },
-    $schema: "bumps-draft-02",
-  };
+        ],
+      },
+      $schema: "bumps-draft-03",
+    };
+  } else {
+    return {
+      references: {},
+      object: {
+        __class__: "bumps.fitproblem.FitProblem",
+        models: [
+          {
+            __class__: "refl1d.experiment.Experiment",
+            sample: {
+              __class__: "refl1d.sample.layers.Stack",
+              layers: [createLayer("Si", 2.07, 0.0, 0.0, 1.0), createLayer("Vacuum", 0.0, 0.0, 0.0, 0.0)],
+            },
+            probe: generateQProbe(editQmin.value, editQmax.value, editQsteps.value, 0.0001),
+          },
+        ],
+      },
+      $schema: "bumps-draft-03",
+    };
+  }
 }
 
 function generateQProbe(qmin: number = 0, qmax: number = 0.1, qsteps: number = 250, dQ: number = 0.00001) {
@@ -122,21 +181,55 @@ function generateQProbe(qmin: number = 0, qmax: number = 0.1, qsteps: number = 2
   return probe;
 }
 
+/** Model Methods */
+
+const decoder = new TextDecoder("utf-8");
+
 async function fetchModel() {
   props.socket.asyncEmit("get_model", (payload: ArrayBuffer) => {
     const json_bytes = new Uint8Array(payload);
-    console.debug({ payload });
-
     if (json_bytes.length < 3) {
       // no model defined...
       modelJson.value = {};
       dictionaryLoaded.value = false;
+      return;
+    }
+
+    const jsonValue = JSON.parse(decoder.decode(json_bytes));
+    modelJson.value = jsonValue;
+    console.debug("Loaded model: ", modelJson.value);
+    parametersById.value = jsonValue.references;
+    dictionaryLoaded.value = true;
+
+    let model = modelJson.value["object"]["models"][activeModel.value];
+    if (model.hasOwnProperty("sample")) {
+      modelType.value = "simple";
+    } else if (model.hasOwnProperty("samples")) {
+      modelType.value = "mixed";
     } else {
-      const jsonValue = JSON.parse(decoder.decode(json_bytes));
-      modelJson.value = jsonValue;
-      console.log("modelJson", modelJson.value);
-      parametersById.value = jsonValue.references;
-      dictionaryLoaded.value = true;
+      throw new Error("Model type not recognized");
+    }
+
+    let badModel: boolean = false;
+    switch (modelType.value) {
+      case "simple":
+        if (model["sample"]["layers"].some((layer: Slab) => layer.material === undefined)) {
+          badModel = true;
+        }
+        break;
+      case "mixed":
+        model["samples"].forEach((sample: { layers: Slab[] }) => {
+          if (sample["layers"].some((layer: Slab) => layer.material === undefined)) {
+            badModel = true;
+          }
+        });
+        break;
+    }
+    if (badModel) {
+      console.error("Model is not valid - some layers are missing material property");
+      modelJson.value = {};
+      dictionaryLoaded.value = false;
+      return;
     }
   });
 }
@@ -159,8 +252,6 @@ function getSlot(parameterLike: ParameterLike) {
     const parameter = resolveParameter(parameterLike);
     return parameter.slot;
   }
-  // TODO: This should really not return null.
-  // return null;
   return { value: 0.0, __class__: "bumps.parameter.Variable" };
 }
 
@@ -175,29 +266,24 @@ function resolveParameter(parameterLike: ParameterLike): Parameter {
   }
 }
 
-function setParameterNames(stack: Stack) {
-  for (const layer of stack.layers) {
-    if (layer.__class__ === "refl1d.sample.layers.Repeat") {
-      setParameterNames(layer.stack);
-    } else {
-      const l = layer as Slab;
-      const { material, thickness, interface: interface_ } = l;
-      const { name, rho, irho } = material;
-      const thicknessParam = resolveParameter(thickness);
-      const interfaceParam = resolveParameter(interface_);
-      const rhoParam = resolveParameter(rho);
-      const irhoParam = resolveParameter(irho);
-      l.name = name;
-      thicknessParam.name = `${material.name} thickness`;
-      interfaceParam.name = `${material.name} interface`;
-      rhoParam.name = `${material.name} rho`;
-      irhoParam.name = `${material.name} irho`;
-    }
+function setParameterNames(sample: Slab[]) {
+  for (const layer of sample) {
+    const { material, thickness, interface: interface_ } = layer;
+    const { name, rho, irho } = material;
+    const thicknessParam = resolveParameter(thickness);
+    const interfaceParam = resolveParameter(interface_);
+    const rhoParam = resolveParameter(rho);
+    const irhoParam = resolveParameter(irho);
+    layer.name = name;
+    thicknessParam.name = `${material.name} thickness`;
+    interfaceParam.name = `${material.name} interface`;
+    rhoParam.name = `${material.name} rho`;
+    irhoParam.name = `${material.name} irho`;
   }
 }
 
-function setParameterBounds(stack: Stack) {
-  // set the bounds of the fixed parameters
+function setParameterBounds(sample: Slab[]) {
+  /** set the bounds of the fixed parameters */
   const boundsSetter = (p: Parameter) => {
     if (!p.fixed) {
       return;
@@ -216,40 +302,61 @@ function setParameterBounds(stack: Stack) {
       return c - d;
     });
   };
-  for (const layer of stack.layers) {
-    if (layer.__class__ === "refl1d.sample.layers.Repeat") {
-      setParameterBounds(layer.stack);
-    } else {
-      const l = layer as Slab;
-      const { material, thickness, interface: interface_ } = l;
-      const { rho, irho } = material;
-      const thicknessParam = resolveParameter(thickness);
-      const interfaceParam = resolveParameter(interface_);
-      const rhoParam = resolveParameter(rho);
-      const irhoParam = resolveParameter(irho);
-      [thicknessParam, interfaceParam, rhoParam, irhoParam].forEach(boundsSetter);
-    }
+
+  for (const layer of sample) {
+    const l = layer as Slab;
+    const { material, thickness, interface: interface_ } = l;
+    const { rho, irho } = material;
+    const thicknessParam = resolveParameter(thickness);
+    const interfaceParam = resolveParameter(interface_);
+    const rhoParam = resolveParameter(rho);
+    const irhoParam = resolveParameter(irho);
+    [thicknessParam, interfaceParam, rhoParam, irhoParam].forEach(boundsSetter);
   }
 }
 
 async function sendModel(is_new: boolean = false, name: string | null = null) {
   for (const model of modelJson.value["object"]["models"]) {
-    setParameterNames(model["sample"]);
-    setParameterBounds(model["sample"]);
+    switch (modelType.value) {
+      case "simple":
+        setParameterNames(model["sample"]);
+        setParameterBounds(model["sample"]);
+        break;
+      case "mixed":
+        for (const sample of model["samples"]) {
+          setParameterNames(sample["layers"]);
+          setParameterBounds(sample["layers"]);
+        }
+        break;
+    }
   }
   const json_model = JSON.stringify(modelJson.value);
   await props.socket.asyncEmit("set_serialized_problem", json_model, is_new, name);
 }
 
-// Adding and deleting layers
-function deleteLayer(index: number) {
-  sortedLayers.value.splice(index, 1);
+/** Layer Manipulation Methods */
+
+function addLayer(stackIndex: number, after_index: number = -1) {
+  const newLayer: Slab = createLayer("sld", 2.5, 0.0, 25.0, 1.0);
+  sortedSamples.value[stackIndex].splice(after_index, 0, newLayer);
   sendModel();
 }
 
-function addLayer(after_index: number = -1) {
-  const newLayer: Slab = createLayer("sld", 2.5, 0.0, 25.0, 1.0);
-  sortedLayers.value.splice(after_index, 0, newLayer);
+function deleteLayer(stackIndex: number, layerIndex: number) {
+  sortedSamples.value[stackIndex].splice(layerIndex, 1);
+  sendModel();
+}
+
+function addStack(stackIndex: number) {
+  modelType.value = "mixed";
+  const newStack: Slab[] = [createLayer("sld", 2.5, 0.0, 25.0, 1.0)];
+  console.log({ newStack });
+  sortedSamples.value.splice(stackIndex + 1, 0, newStack);
+  sendModel();
+}
+
+function deleteStack(stackIndex: number) {
+  sortedSamples.value.splice(stackIndex, 1);
   sendModel();
 }
 
@@ -263,32 +370,29 @@ function setQProbe() {
   sendModel();
 }
 
-const decoder = new TextDecoder("utf-8");
-
-onMounted(() => {
-  fetchModel();
-});
+/** Code for draggable rows */
 
-// Code for draggable rows
-const dragData = ref<number | null>(null);
+const dragData = ref<{ stackIndex: number; layerIndex: number } | null>(null);
 
-function dragStart(index: number, event: DragEvent) {
+function dragStart(stackIndex: number, layerIndex: number, event: DragEvent) {
   if (event.dataTransfer === null) {
     return;
   }
-  dragData.value = index;
-  event.dataTransfer.setData("text/plain", `${index}`);
+  dragData.value = { stackIndex, layerIndex };
+  event.dataTransfer.setData("text/plain", `${stackIndex},${layerIndex}`);
 }
 
-function dragOver(index: number, event: DragEvent) {
+function dragOver(event: DragEvent) {
   event.preventDefault();
 }
 
-function drop(index: number) {
+function drop(stackIndexNew: number, layerIndexNew: number) {
   if (dragData.value !== null) {
-    const draggedDict = sortedLayers.value[dragData.value];
-    sortedLayers.value.splice(dragData.value, 1);
-    sortedLayers.value.splice(index, 0, draggedDict);
+    // const { stackIndex, layerIndex } = dragData.value;
+    const { stackIndex: stackIndexOld, layerIndex: layerIndexOld } = dragData.value;
+    const draggedDict = sortedSamples.value[stackIndexOld][layerIndexOld];
+    sortedSamples.value[stackIndexOld].splice(layerIndexOld, 1); // remove from old position
+    sortedSamples.value[stackIndexNew].splice(layerIndexNew, 0, draggedDict); // insert at new position
     dragData.value = null;
   }
   sendModel();
@@ -297,14 +401,20 @@ function drop(index: number) {
 function dragEnd() {
   dragData.value = null;
 }
+
+onMounted(() => {
+  fetchModel();
+});
 </script>
 
 <template>
+  <!-- Main page container -->
   <div id="builder">
+    <!-- Title Card -->
     <div class="container m-2">
       <div class="card">
+        <h5 class="card-header">Simple Slab Model Builder</h5>
         <div class="card-body">
-          <h5 class="card-title d-inline-block px-2 my-0 align-middle">Simple Slab Model Builder</h5>
           <button
             class="btn btn-primary"
             type="button"
@@ -314,7 +424,6 @@ function dragEnd() {
           >
             Instructions
           </button>
-
           <div id="builderInstructions" class="card-text collapse" :class="{ show: showInstructions }">
             <ul>
               <li>Click the "Add layer" button to add a new layer.</li>
@@ -325,7 +434,10 @@ function dragEnd() {
         </div>
       </div>
     </div>
+
+    <!-- Builder Container -->
     <div class="container mt-4">
+      <!-- Top Buttons -->
       <div class="row justify-content-end">
         <div class="col">
           <button class="btn btn-primary m-2" @click="showEditQRange = !showEditQRange">Edit Q-range</button>
@@ -353,6 +465,8 @@ function dragEnd() {
           </div>
         </div>
       </div>
+
+      <!-- Edit Q-range -->
       <div v-if="showEditQRange" class="row mb-2">
         <div class="col">
           <label for="qmin">Q min (Å<sup>-1</sup>)</label>
@@ -370,116 +484,152 @@ function dragEnd() {
           <button class="btn btn-secondary mx-2" @click="setQProbe">Apply new Q</button>
         </div>
       </div>
-      <table v-if="dictionaryLoaded" id="sortable" class="table table-sm">
-        <thead class="border-bottom py-1 sticky-top text-white bg-secondary">
-          <tr>
-            <th></th>
-            <th>Layer</th>
-            <th>Thickness</th>
-            <th>Rho</th>
-            <th v-if="showImaginary">iRho</th>
-            <th>Interface</th>
-            <th></th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(layer, key) in sortedLayers" :key="key" class="align-middle" @blur.capture="sendModel()">
-            <td
-              draggable="true"
-              class="draggable"
-              @dragstart="dragStart(key, $event)"
-              @dragover="dragOver(key, $event)"
-              @drop="drop(key)"
-              @dragend="dragEnd"
-            >
-              <span width="10px" class="badge bg-secondary">:</span>
-            </td>
-            <td>
-              <textarea
-                id="layer-name"
-                v-model="layer.material.name"
-                class="form-control name"
-                rows="1"
-                cols="40"
-                type="text"
-                :title="layer.material.name"
-              >
-                <label for="layer-name">Layer Name</label>
-              </textarea>
-            </td>
-            <td>
-              <label for="layer-thickness" class="visually-hidden">>Layer Thickness</label>
-              <input
-                v-if="getSlot(layer.thickness) !== null"
-                id="layer-thickness"
-                v-model="getSlot(layer.thickness).value"
-                class="form-control"
-                type="number"
-                step="5"
-              />
-            </td>
-            <td>
-              <label for="layer-rho" class="visually-hidden">>Layer Rho</label>
-              <input
-                v-if="getSlot(layer.material.rho) !== null"
-                id="layer-rho"
-                v-model="getSlot(layer.material.rho).value"
-                class="form-control"
-                type="number"
-                step="0.01"
-              />
-            </td>
-            <td v-if="showImaginary">
-              <label for="layer-irho" class="visually-hidden">>Layer iRho</label>
-              <input
-                v-if="getSlot(layer.material.irho) !== null"
-                id="layer-irho"
-                v-model="getSlot(layer.material.irho).value"
-                class="form-control"
-                type="number"
-                step="0.01"
-              />
-            </td>
-            <td>
-              <label for="layer-interface" class="visually-hidden">>Layer Interface</label>
-              <input
-                v-if="getSlot(layer.interface) !== null"
-                id="layer-interface"
-                v-model="getSlot(layer.interface).value"
-                class="form-control"
-                type="number"
-                step="1"
-              />
-            </td>
-            <td><button class="btn btn-danger btn-sm" @click="deleteLayer(key)">Delete</button></td>
-            <td>
-              <button class="btn btn-success btn-sm add-layer-after" title="add layer here" @click="addLayer(key + 1)">
-                +
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <p v-else>Load data to start building a model</p>
-    </div>
 
-    <div class="row">
-      <div class="col">
-        <button class="btn btn-primary m-2" @click="newModel">New Model</button>
+      <!-- Table Conditional Wrapper -->
+      <div v-if="dictionaryLoaded">
+        <!-- Table Container -->
+        <div v-for="(sample, sampleKey) in sortedSamples" id="sortable" :key="sampleKey">
+          <h6 class="ps-4 pt-2">
+            <u>{{ `Sample ${sortedSamples.length - sampleKey}` }}</u>
+          </h6>
+          <table class="table table-sm">
+            <thead>
+              <!-- <thead class="border-bottom py-1 sticky-top text-white bg-secondary"> -->
+              <tr>
+                <th></th>
+                <th>Layer</th>
+                <th>Thickness</th>
+                <th>Rho</th>
+                <th v-if="showImaginary">iRho</th>
+                <th>Interface</th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr v-for="(layer, layerKey) in sample" :key="layerKey" class="align-middle" @blur.capture="sendModel()">
+                <td
+                  draggable="true"
+                  class="draggable"
+                  @dragstart="dragStart(sampleKey, layerKey, $event)"
+                  @dragover="dragOver($event)"
+                  @drop="drop(sampleKey, layerKey)"
+                  @dragend="dragEnd"
+                >
+                  <span width="10px" class="badge bg-secondary">:</span>
+                </td>
+                <td>
+                  <textarea
+                    id="layer-name"
+                    v-model="layer.material.name"
+                    class="form-control name"
+                    rows="1"
+                    cols="40"
+                    type="text"
+                    :title="layer.material.name"
+                  >
+                  <label for="layer-name">Layer Name</label>
+                </textarea
+                  >
+                </td>
+                <td>
+                  <label for="layer-thickness" class="visually-hidden">>Layer Thickness</label>
+                  <input
+                    v-if="getSlot(layer.thickness) !== null"
+                    id="layer-thickness"
+                    v-model="getSlot(layer.thickness).value"
+                    class="form-control"
+                    type="number"
+                    step="5"
+                  />
+                </td>
+                <td>
+                  <label for="layer-rho" class="visually-hidden">>Layer Rho</label>
+                  <input
+                    v-if="getSlot(layer.material.rho) !== null"
+                    id="layer-rho"
+                    v-model="getSlot(layer.material.rho).value"
+                    class="form-control"
+                    type="number"
+                    step="0.01"
+                  />
+                </td>
+                <td v-if="showImaginary">
+                  <label for="layer-irho" class="visually-hidden">>Layer iRho</label>
+                  <input
+                    v-if="getSlot(layer.material.irho) !== null"
+                    id="layer-irho"
+                    v-model="getSlot(layer.material.irho).value"
+                    class="form-control"
+                    type="number"
+                    step="0.01"
+                  />
+                </td>
+                <td>
+                  <label for="layer-interface" class="visually-hidden">>Layer Interface</label>
+                  <input
+                    v-if="getSlot(layer.interface) !== null"
+                    id="layer-interface"
+                    v-model="getSlot(layer.interface).value"
+                    class="form-control"
+                    type="number"
+                    step="1"
+                  />
+                </td>
+                <td><button class="btn btn-danger btn-sm" @click="deleteLayer(sampleKey, layerKey)">Delete</button></td>
+                <td>
+                  <button
+                    class="btn btn-success btn-sm add-layer-after"
+                    title="add layer here"
+                    @click="addLayer(sampleKey, layerKey + 1)"
+                  >
+                    +
+                  </button>
+                </td>
+              </tr>
+              <!-- Stack-specific actions -->
+              <tr>
+                <td></td>
+                <td>
+                  <button class="btn btn-success m-2" @click="addStack(sampleKey)">Add Stack</button>
+                  <button class="btn btn-danger m-2" @click="deleteStack(sampleKey)">Delete Stack</button>
+                </td>
+                <td>
+                  <div class="input-group m-2">
+                    <button class="btn btn-success btn-sm" @click="addLayer(insertIndex)">Add layer at index:</button>
+                    <label for="insert-index" class="visually-hidden">Insert index</label>
+                    <input
+                      id="insert-index"
+                      v-model="insertIndex"
+                      class="form-control me-4 insert-index"
+                      type="number"
+                    />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!-- End of table div -->
       </div>
-      <div v-if="dictionaryLoaded" class="col-auto">
-        <button class="btn btn-secondary m-2" @click="sendModel()">Apply changes</button>
+      <div v-else class="p-3">
+        <p>Load data to start building a model, or click the "New Model" button to start from scratch.</p>
       </div>
-      <div v-if="dictionaryLoaded" class="col-auto">
-        <div class="input-group m-2">
-          <button class="btn btn-success btn-sm" @click="addLayer(insertIndex)">Add layer at index:</button>
-          <label for="insert-index" class="visually-hidden">Insert index</label>
-          <input id="insert-index" v-model="insertIndex" class="form-control me-4 insert-index" type="number" />
+
+      <!-- Bottom Buttons -->
+      <div class="row justify-items-end">
+        <div class="col"></div>
+        <div class="col-auto">
+          <button class="btn btn-primary m-2" @click="newModel">New Model</button>
+        </div>
+        <div class="col-auto">
+          <button v-if="dictionaryLoaded" class="btn btn-secondary m-2" @click="sendModel()">Apply changes</button>
         </div>
       </div>
     </div>
 
+    <!-- Disclaimer -->
     <div class="container m-2">
       <div class="card bg-warning">
         <div class="card-body">
@@ -516,4 +666,12 @@ button.add-layer-after {
   margin-bottom: -3em;
   padding: 0.1em 0.3em;
 }
+
+#builder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  /* height: 100%; */
+}
 </style>
diff --git a/refl1d/webview/client/src/model.ts b/refl1d/webview/client/src/model.ts
index 61b2a9a7..9a28ca87 100644
--- a/refl1d/webview/client/src/model.ts
+++ b/refl1d/webview/client/src/model.ts
@@ -11,12 +11,11 @@ export interface Reference {
 export type BoundsValue = number | "-inf" | "inf";
 
 /* Bumps models */
-// Are these necessary? Imported from bumps?
 
 export interface SerializedModel {
   references: { [key: string]: Parameter };
   object: any;
-  $schema: "bumps-draft-02";
+  $schema: "bumps-draft-03";
 }
 
 export interface NumpyArray {
@@ -48,6 +47,22 @@ export interface ParameterLike {
 
 /* Sample models */
 
+export interface Magnetism {
+  name: string;
+  rhoM: ParameterLike;
+  thetaM: ParameterLike;
+  phiM: ParameterLike;
+  __class__: "refl1d.sample.material.Magnetism";
+}
+
+export interface SLD {
+  name: string;
+  rho: ParameterLike;
+  irho: ParameterLike;
+  __class__: "refl1d.sample.material.SLD";
+}
+
+/** Layer of material */
 export interface Slab {
   name: string;
   thickness: ParameterLike;
@@ -57,6 +72,7 @@ export interface Slab {
   __class__: "refl1d.sample.layers.Slab";
 }
 
+/** Repeated layers of material */
 export interface Repeat {
   name: string;
   interface: ParameterLike;
@@ -67,21 +83,7 @@ export interface Repeat {
   __class__: "refl1d.sample.layers.Repeat";
 }
 
-export interface SLD {
-  name: string;
-  rho: ParameterLike;
-  irho: ParameterLike;
-  __class__: "refl1d.sample.material.SLD";
-}
-
-export interface Magnetism {
-  name: string;
-  rhoM: ParameterLike;
-  thetaM: ParameterLike;
-  phiM: ParameterLike;
-  __class__: "refl1d.sample.material.Magnetism";
-}
-
+/** Stack (sample) of slabs (layers) */
 export interface Stack {
   layers: (Slab | Repeat)[];
   __class__: "refl1d.sample.layers.Stack";