diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 936244e..1c5f6b9 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -2,6 +2,16 @@ require "redcarpet"
 
 module ApplicationHelper
 
+  # different template according to the amount of text
+  def render_story(story)
+    return "" unless story
+    text_length = story.text.length
+    template = "text"
+    template = "half" if text_length < 200
+    template = "pic" if text_length < 100
+    render partial: "stories/#{template}" , locals: {story: story}
+  end
+
   def prose_classes
     classes  = "prose lg:prose-lg "
     classes += "prose-headings:text-inherit "
diff --git a/app/views/members/show.html.haml b/app/views/members/show.html.haml
index 63f2637..22a8f36 100644
--- a/app/views/members/show.html.haml
+++ b/app/views/members/show.html.haml
@@ -32,4 +32,8 @@
         Sign out
 
 - @member.stories.each do |story|
-  =render "stories/inline" , story: story
+  =render_story( story )
+  .flex.justify-around
+    = link_to edit_story_path(story) do
+      %button.bg-cyan-200.mr-3.inline-block.rounded-lg.px-4.py-3.text-md.font-medium.border.border-gray-400
+        Edit Story
diff --git a/app/views/stories/_inline.haml b/app/views/stories/_half.haml
similarity index 96%
rename from app/views/stories/_inline.haml
rename to app/views/stories/_half.haml
index e8d32ce..0a4b080 100644
--- a/app/views/stories/_inline.haml
+++ b/app/views/stories/_half.haml
@@ -7,6 +7,6 @@
         = story.header
       %h4.text-xl.mt-10.md:text-2xl
         = distance_of_time_in_words_to_now story.happened
-        ago
+        ago half
       .mt-8{ prose_classes }
         = markdown(story.text)
diff --git a/app/views/stories/_pic.haml b/app/views/stories/_pic.haml
new file mode 100644
index 0000000..8b15553
--- /dev/null
+++ b/app/views/stories/_pic.haml
@@ -0,0 +1,13 @@
+%section.flex.justify-center.p-8.flex-col.md:flex-row.m-20
+  .flex.items-center.h-40.md:h-60.lg:h-96.w-full.overflow-hidden{class: "lg:w-2/3"}
+    = image_for(story ,"object-cover")
+  .flex.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-1/3"}
+    .flex-1
+      .text-center
+        %h2.text-4xl.font-bold.text-center.mb-4.lg:mb-8
+          = story.header
+        %h4.text-xl.mt-4.lg:mt-8.md:text-2xl
+          = distance_of_time_in_words_to_now story.happened
+          ago pic
+        .mt-3{ prose_classes }
+          = markdown(story.text)
diff --git a/app/views/stories/_text.haml b/app/views/stories/_text.haml
new file mode 100644
index 0000000..bdb1c5c
--- /dev/null
+++ b/app/views/stories/_text.haml
@@ -0,0 +1,11 @@
+%section.p-20.my-20
+  .flex.justify-center
+    .max-w-prose.text-center
+      %h1.mb-10.text-2xl.font-bold.tracking-tight.sm:text-4xl
+        = story.header
+      .text-xl.pb-6{ prose_classes }
+        = distance_of_time_in_words_to_now story.happened
+        ago
+  .max-w-full.mt-4.gap-16.columns-1.md:columns-2.lg:columns-3.xl:columns-4{ prose_classes  }
+    = image_for( story , "h-56 w-full object-cover sm:h-full")
+    = markdown(story.text)
diff --git a/app/views/stories/index.html.haml b/app/views/stories/index.html.haml
index 63f2e3f..ab7cd96 100644
--- a/app/views/stories/index.html.haml
+++ b/app/views/stories/index.html.haml
@@ -1,6 +1,6 @@
 = paginate @stories
 - @stories.each do |story|
-  = render "inline" , story: story
+  = render_story(story)
 
 %br
 
diff --git a/app/views/stories/show.html.haml b/app/views/stories/show.html.haml
index a95aeba..3df621c 100644
--- a/app/views/stories/show.html.haml
+++ b/app/views/stories/show.html.haml
@@ -1,4 +1,4 @@
-= render "inline" , story: @story
+= render_story @story
 
 = link_to 'Edit', edit_story_path(@story)
 \|