diff --git a/app/views/cms/pages/show.haml b/app/views/cms/pages/show.haml
index 174ce9a..d9225bc 100644
--- a/app/views/cms/pages/show.haml
+++ b/app/views/cms/pages/show.haml
@@ -1,18 +1,25 @@
 %p#notice= notice
 
 -@page.sections.each_with_index do |section , index|
-  .grid.grid-cols-6.gap-4.m-8{class: (index%2)==1 ? 'bg-emerald-50/50' : 'bg-yellow-50/50' }
+  .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")
-      .p-6
-        %h3.mt-4.text-lg.font-bold= section.template #PREVIEW here
-        %button.mt-4.block.w-full.rounded-sm.bg-yellow-500.p-4.text-sm.font-medium{:type => "button"}
-          =index #up down delete actions here
+      =# 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
+          =link_to "Up" , "/index"
+        %button.mt-4.rounded-lg.bg-yellow-500.p-4
+          =link_to "Down" , "/index"
+        %button.mt-4.rounded-lg.bg-blue-400.p-4
+          =link_to "Edit" , "/index"
+        %button.mt-4.rounded-lg.bg-red-400.p-4
+          =link_to "Delete" , "/index"
     -section.content.each do |key , value|
-      .p-6
-        %h3.mt-4.text-lg.font-bold= key.upcase
-        %p= value
+      = render "cms/sections/#{key}", section: section , key: key , value: value
 
-= link_to 'Edit', edit_cms_page_path(@page.name)
-\|
-= link_to 'Back', cms_pages_path
+.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/_button.haml b/app/views/cms/sections/_button.haml
new file mode 100644
index 0000000..fe2d63a
--- /dev/null
+++ b/app/views/cms/sections/_button.haml
@@ -0,0 +1,8 @@
+.p-6
+  %h3.mt-4.text-lg.font-bold= key.upcase
+  %p
+    .font-bold Text
+    = value["text"]
+  %p
+    .font-bold Link
+    = value["link"]
diff --git a/app/views/cms/sections/_header.haml b/app/views/cms/sections/_header.haml
new file mode 100644
index 0000000..eaf2df3
--- /dev/null
+++ b/app/views/cms/sections/_header.haml
@@ -0,0 +1,3 @@
+.p-6
+  %h3.mt-4.text-lg.font-bold= key.upcase
+  %p= value
diff --git a/app/views/cms/sections/_image.haml b/app/views/cms/sections/_image.haml
new file mode 100644
index 0000000..2788735
--- /dev/null
+++ b/app/views/cms/sections/_image.haml
@@ -0,0 +1,2 @@
+.p-6
+  = image_tag "cms/" + value
diff --git a/app/views/cms/sections/_template.haml b/app/views/cms/sections/_template.haml
new file mode 100644
index 0000000..8eef1ee
--- /dev/null
+++ b/app/views/cms/sections/_template.haml
@@ -0,0 +1,3 @@
+.p-6{style: bg(section)}
+  %h3.mt-4.text-lg.font-bold= key.upcase
+  %p= value
diff --git a/app/views/cms/sections/_text.haml b/app/views/cms/sections/_text.haml
new file mode 100644
index 0000000..eaf2df3
--- /dev/null
+++ b/app/views/cms/sections/_text.haml
@@ -0,0 +1,3 @@
+.p-6
+  %h3.mt-4.text-lg.font-bold= key.upcase
+  %p= value