diff --git a/app/dashboard/puzzles/page.tsx b/app/dashboard/puzzles/page.tsx
index b09e966..54c053f 100644
--- a/app/dashboard/puzzles/page.tsx
+++ b/app/dashboard/puzzles/page.tsx
@@ -1,7 +1,9 @@
+import Button from '@/ui/Button';
 import Input from '@/ui/Input';
 import ToHTML from '@/ui/ToHTML';
 
 export default function Page() {
+  // on va utiliser react-hook-form https://react-hook-form.com/
   return (
     <div className="flex h-full w-full flex-col justify-between space-y-4">
       <div className="flex flex-col space-y-2">
@@ -11,10 +13,27 @@ export default function Page() {
       <div className="flex h-screen overflow-y-auto">
         <ToHTML html="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!" />
       </div>
-      <div className="flex items-center justify-between space-x-2">
-        <Input label="Réponse" type="text" placeholder="12" />
-        <Input label="Code" type="file" accept=".py,.js,.ts,.java,.rust" />
-      </div>
+      <form className="flex w-full flex-col justify-between sm:flex-row">
+        <div className="flex flex-col space-x-0 sm:flex-row sm:space-x-6">
+          <Input
+            className="w-full sm:w-1/3"
+            label="Réponse"
+            name="answer"
+            type="text"
+            placeholder="12"
+          />
+          <Input
+            className="h-16 w-full sm:w-1/3"
+            label="Code"
+            name="code_file"
+            type="file"
+            accept=".py,.js,.ts,.java,.rust"
+          />
+        </div>
+        <Button className="mt-6" type="submit">
+          Envoyer
+        </Button>
+      </form>
     </div>
   );
 }
diff --git a/ui/Button.tsx b/ui/Button.tsx
new file mode 100644
index 0000000..86f62e3
--- /dev/null
+++ b/ui/Button.tsx
@@ -0,0 +1,26 @@
+import { cn } from '@/lib/utils';
+import { forwardRef } from 'react';
+
+const Button = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    kind?: 'default' | 'outline' | 'danger';
+  }
+>(({ kind = 'default', className, ...props }, ref) => (
+  <button
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center rounded-lg border-0 px-5 py-2.5 text-center text-sm font-medium outline-none transition-colors focus:outline-none focus:ring-0 disabled:opacity-50',
+      {
+        'bg-[#424242] hover:bg-[#424242]/60': kind === 'default',
+        'bg-red-600 hover:bg-red-600/60': kind === 'danger'
+      },
+      className
+    )}
+    {...props}
+  />
+));
+
+Button.displayName = 'Button';
+
+export default Button;
diff --git a/ui/Input.tsx b/ui/Input.tsx
index 0138e82..18e692e 100644
--- a/ui/Input.tsx
+++ b/ui/Input.tsx
@@ -14,7 +14,7 @@ const Input = forwardRef<
     <Label label={label} description={description} required={props.required} className={className}>
       <input
         ref={ref}
-        className="w-full rounded-lg border-0 bg-[#424242] px-5 py-2.5 text-sm font-medium outline-none transition-colors hover:border-gray-400 focus:outline-none focus:ring-0 disabled:opacity-50"
+        className="w-full rounded-lg border-0 bg-[#424242] px-5 py-2.5 text-sm font-medium outline-none transition-colors focus:outline-none focus:ring-0 disabled:opacity-50"
         {...props}
       />
     </Label>