Code snippet, better UX in questionnaire

src/components/Question/CheckboxQuestion/index.svelte

@@ -1,8 +1,10 @@
 <script>
   import PrimaryButton from "../../PrimaryButton/index.svelte";
+  import CodeSnippet from "../../CodeSnippet/index.svelte";
   import Checkbox from "../../Form/Checkbox.svelte";
 
   export let title = "";
+  export let code;
   export let name = "";
   export let options = [];
   export let onSubmit = () => {};
@@ -39,22 +41,31 @@
 <form on:submit|preventDefault={handleFormSubmit}>
   <h2>{title}</h2>
 
+  {#if code}
+    <CodeSnippet {code} />
+  {/if}
+
   <div class="ml-4">
     {#each options as option}
-      <div>
+      <button
+        class="text-left my-2 border border-gray-300 p-2 rounded-md cursor-pointer hover:bg-gray-200 w-full"
+        type="button"
+      >
         <Checkbox
           {name}
           value={option.value}
           checked={defaultValue.includes(option.value)}
           label={option.label || option.value}
         />
-      </div>
+      </button>
     {/each}
   </div>
-  <div class="mt-3">
-    {#if disablePreviousButton === false}
-      <PrimaryButton onClick={handlePrevious} label="Previous" />
-    {/if}
+  <div class="mt-3 flex items-center justify-between w-full">
+    <PrimaryButton
+      onClick={handlePrevious}
+      label="Previous"
+      isDisabled={disablePreviousButton}
+    />
     <PrimaryButton type="submit" label={isLast ? "Finish" : "Next"} {name} />
   </div>
 </form>