diff --git a/app/views/layouts/component_preview.html.haml b/app/views/layouts/component_preview.html.haml
index 6374a6a67..82fcf217c 100644
--- a/app/views/layouts/component_preview.html.haml
+++ b/app/views/layouts/component_preview.html.haml
@@ -16,9 +16,10 @@
     = vite_client_tag
     = vite_javascript_tag 'application'
 
-    = preload_link_tag(asset_url("Muli-Regular.woff2"))
-    = preload_link_tag(asset_url("Muli-Bold.woff2"))
+    = preload_link_tag(asset_url("Marianne-Regular.woff2"))
+    = preload_link_tag(asset_url("Spectral-Regular.ttf"))
 
+    = vite_stylesheet_tag 'main', media: 'all'
     = stylesheet_link_tag 'application', media: 'all'
 
   %body{ class: browser.platform.ios? ? 'ios' : nil }
diff --git a/spec/components/previews/types_de_champ_editor/champ_component_preview.rb b/spec/components/previews/types_de_champ_editor/champ_component_preview.rb
new file mode 100644
index 000000000..7c718a976
--- /dev/null
+++ b/spec/components/previews/types_de_champ_editor/champ_component_preview.rb
@@ -0,0 +1,15 @@
+class TypesDeChampEditor::ChampComponentPreview < ViewComponent::Preview
+  include Logic
+
+  def nominal
+    tdc = TypeDeChamp.new(type_champ: 'text', stable_id: 123)
+    procedure = Procedure.new(id: 123)
+    coordinate = ProcedureRevisionTypeDeChamp.new(type_de_champ: tdc, procedure:)
+    upper_coordinates = []
+
+    render_with_template(locals: {
+      coordinate:,
+      upper_coordinates:
+    })
+  end
+end
diff --git a/spec/components/previews/types_de_champ_editor/champ_component_preview/nominal.html.haml b/spec/components/previews/types_de_champ_editor/champ_component_preview/nominal.html.haml
new file mode 100644
index 000000000..5b2cf2746
--- /dev/null
+++ b/spec/components/previews/types_de_champ_editor/champ_component_preview/nominal.html.haml
@@ -0,0 +1,7 @@
+%main
+  .container
+    .types-de-champ-editor
+      %ul.types-de-champ-block
+        = render TypesDeChampEditor::ChampComponent.new(coordinate:,
+          upper_coordinates:,
+          focused: false)