diff --git a/app/assets/images/cms/card_preview/card_full_image.png b/app/assets/images/cms/card_preview/card_full_image.png
new file mode 100644
index 0000000..28faabe
Binary files /dev/null and b/app/assets/images/cms/card_preview/card_full_image.png differ
diff --git a/app/assets/images/cms/section_preview/section_2_col.png b/app/assets/images/cms/section_preview/section_2_col.png
new file mode 100644
index 0000000..b548340
Binary files /dev/null and b/app/assets/images/cms/section_preview/section_2_col.png differ
diff --git a/app/assets/images/cms/section_preview/section_full_left2.png b/app/assets/images/cms/section_preview/section_full_left2.png
new file mode 100644
index 0000000..725a0b7
Binary files /dev/null and b/app/assets/images/cms/section_preview/section_full_left2.png differ
diff --git a/app/assets/images/cms/section_preview/section_full_up.png b/app/assets/images/cms/section_preview/section_full_up.png
new file mode 100644
index 0000000..88a3d41
Binary files /dev/null and b/app/assets/images/cms/section_preview/section_full_up.png differ
diff --git a/app/assets/images/cms/section_preview/section_half_left.png b/app/assets/images/cms/section_preview/section_half_left.png
new file mode 100644
index 0000000..6d31b08
Binary files /dev/null and b/app/assets/images/cms/section_preview/section_half_left.png differ
diff --git a/app/assets/images/cms/section_preview/section_half_right.png b/app/assets/images/cms/section_preview/section_half_right.png
new file mode 100644
index 0000000..5eee23b
Binary files /dev/null and b/app/assets/images/cms/section_preview/section_half_right.png differ
diff --git a/app/assets/images/cms/section_preview/section_spacer.png b/app/assets/images/cms/section_preview/section_spacer.png
new file mode 100644
index 0000000..ce8cba3
Binary files /dev/null and b/app/assets/images/cms/section_preview/section_spacer.png differ
diff --git a/app/views/cms/pages/show.haml b/app/views/cms/pages/show.haml
index d9225bc..650c944 100644
--- a/app/views/cms/pages/show.haml
+++ b/app/views/cms/pages/show.haml
@@ -1,10 +1,13 @@
 %p#notice= notice
+.flex.flex-col.bg-white
+  .flex.items-center.justify-center.flex-1
+    .max-w-xl.px-4.py-8.mx-auto.text-center
+      %h1.text-2xl.font-bold.tracking-tight.text-gray-900.sm:text-4xl
+        Page #{@page.name}
 
 -@page.sections.each_with_index do |section , index|
   .grid.grid-cols-6.gap-2.m-8{class: (index%2)==1 ? 'bg-cyan-50' : 'bg-red-50' }
     .relative.block.border.border-gray-100
-      =#image_tag("cms/#{file}" , class: "h-56 w-full object-contain lg:h-72")
-      =# section.template #PREVIEW here
       .p-4
         %h3.mt-4.text-lg.font-bold Section #{index + 1}
         %button.mt-4.rounded-lg.bg-yellow-500.p-4
@@ -13,13 +16,9 @@
           =link_to "Down" , "/index"
         %button.mt-4.rounded-lg.bg-blue-400.p-4
           =link_to "Edit" , "/index"
+        %button.mt-4.rounded-lg.bg-cyan-400.p-4
+          =link_to "New" , "/index"
         %button.mt-4.rounded-lg.bg-red-400.p-4
           =link_to "Delete" , "/index"
     -section.content.each do |key , value|
       = render "cms/sections/#{key}", section: section , key: key , value: value
-
-.grid.grid-cols-6.gap-2.m-8
-  %button.mt-4.rounded-lg.bg-cyan-400.p-4
-    =link_to "New Section" , "/index"
-  %button.mt-4.rounded-lg.bg-blue-400.p-4
-    =link_to "Save Changes" , "/index"
diff --git a/app/views/cms/sections/_card_template.haml b/app/views/cms/sections/_card_template.haml
new file mode 100644
index 0000000..df37779
--- /dev/null
+++ b/app/views/cms/sections/_card_template.haml
@@ -0,0 +1,5 @@
+.p-6
+  %h3.mt-4.text-lg.font-bold= key.upcase
+  %p= value
+  =image_tag("cms/card_preview/#{value}" , class: "w-full object-contain")
+  %p #{section.content['cards'].length} cards
diff --git a/app/views/cms/sections/_cards.haml b/app/views/cms/sections/_cards.haml
new file mode 100644
index 0000000..e69de29
diff --git a/app/views/cms/sections/_image.haml b/app/views/cms/sections/_image.haml
index 2788735..ceb48ad 100644
--- a/app/views/cms/sections/_image.haml
+++ b/app/views/cms/sections/_image.haml
@@ -1,2 +1,3 @@
 .p-6
+  %h3.mt-4.text-lg.font-bold= key.upcase
   = image_tag "cms/" + value
diff --git a/app/views/cms/sections/_template.haml b/app/views/cms/sections/_template.haml
index 8eef1ee..33f493f 100644
--- a/app/views/cms/sections/_template.haml
+++ b/app/views/cms/sections/_template.haml
@@ -1,3 +1,4 @@
-.p-6{style: bg(section)}
+.p-6
   %h3.mt-4.text-lg.font-bold= key.upcase
   %p= value
+  =image_tag("cms/section_preview/#{section.template}" , class: "w-full object-contain")
diff --git a/app/views/sections/_section_2_col.haml b/app/views/sections/_section_2_col.haml
index 4b229c6..8bec66a 100644
--- a/app/views/sections/_section_2_col.haml
+++ b/app/views/sections/_section_2_col.haml
@@ -5,7 +5,7 @@
         = section["header"]
       %p.mt-4.text-gray-500
         = section["text"]
-  - template = "cards/" + section["element_template"]
+  - template = "cards/" + section["card_template"]
   .grid.grid-cols-1.md:grid-cols-2
-    - section["elements"].each do |element|
+    - section["cards"].each do |element|
       = render( template , element: element)
diff --git a/cms/studios.yaml b/cms/studios.yaml
index 2a84c52..dad0370 100644
--- a/cms/studios.yaml
+++ b/cms/studios.yaml
@@ -5,8 +5,8 @@
     The rooms are in the old hospital wings, so most are old patient rooms, but there are plenty of others too.
     Prices do not include electricity or vat, but do include the use of common spaces, see below.
   image: makerspace.webp
-  element_template: card_full_image
-  elements:
+  card_template: card_full_image
+  cards:
     - header: Standard
       text:
         This is the standard 2 patient room. They are mostly towards the south,