diff --git a/app/views/sites/_designs.haml b/app/views/sites/_designs.haml
new file mode 100644
index 00000000..d1119954
--- /dev/null
+++ b/app/views/sites/_designs.haml
@@ -0,0 +1,36 @@
+= form_for site, html: { class: form_class(site) } do |f|
+  - unless site.persisted?
+    .form-group#design_id
+      %h2= t('.design.title')
+      %p.lead= t('.help.design')
+      - if invalid? site, :design_id
+        = render 'bootstrap/alert' do
+          = t('activerecord.errors.models.site.attributes.design_id.layout_incompatible.help',
+            layouts: site.incompatible_layouts.to_sentence)
+      .row
+        - @designs = Design.all.order(priority: :desc)
+        .col-md-3.black-bg.col-sm-12
+          %h5.pb-3 Selector de Plantillas
+          - @designs.each do |design|
+            .design.col.d-flex.flex-column
+              .custom-control.custom-radio
+                = f.radio_button :design_id, design.id,
+                  checked: design.id == site.design_id,
+                  disabled: design.disabled,
+                  required: true, class: 'custom-control-input'
+                = f.label "design_id_#{design.id}", design.name,
+                  class: 'custom-control-label'
+              .flex-fill
+                = sanitize_markdown design.description,
+                  tags: %w[p a strong em]
+        
+        .col-md-6.black-bg.col-sm-12
+          %h5.text-center.pb-3 Previsualizar Plantilla
+          .embed-responsive.embed-responsive-1by1
+            %iframe.embed-responsive-item{allowfullscreen: "", src: "https://www.youtube.com/embed/zpOULjyy-n8?rel=0"}
+        .col-md-3.black-bg.col.sm-12
+          %h5.pb-3 Características
+          = @designs.first.inspect
+          
+          
+
diff --git a/app/views/sites/_form.haml b/app/views/sites/_form.haml
index 69997ffa..a22bbaf2 100644
--- a/app/views/sites/_form.haml
+++ b/app/views/sites/_form.haml
@@ -46,36 +46,7 @@
       .invalid-feedback= site.errors.messages[:description].join(', ')
     %hr/
 
-  .form-group#design_id
-    %h2= t('.design.title')
-    %p.lead= t('.help.design')
-    - if invalid? site, :design_id
-      = render 'bootstrap/alert' do
-        = t('activerecord.errors.models.site.attributes.design_id.layout_incompatible.help',
-          layouts: site.incompatible_layouts.to_sentence)
-    .row.row-cols-1.row-cols-md-2.designs
-      -# Demasiado complejo para un f.collection_radio_buttons
-      - Design.all.order(priority: :desc).each do |design|
-        .design.col.d-flex.flex-column
-          .custom-control.custom-radio
-            = f.radio_button :design_id, design.id,
-              checked: design.id == site.design_id,
-              disabled: design.disabled,
-              required: true, class: 'custom-control-input'
-            = f.label "design_id_#{design.id}", design.name,
-              class: 'custom-control-label'
-          .flex-fill
-            = sanitize_markdown design.description,
-              tags: %w[p a strong em]
-
-          .btn-group{ role: 'group', 'aria-label': t('.design.actions') }
-            - if design.url
-              = link_to t('.design.url'), design.url,
-                target: '_blank', class: 'btn'
-            - if design.license
-              = link_to t('.design.license'), design.license,
-                target: '_blank', class: 'btn'
-    %hr/
+  = render 'designs', site: @site
 
   .form-group.licenses#license_id
     %h2= t('.licencia.title')