diff --git a/app/assets/images/no_image.png b/app/assets/images/no_image.png
new file mode 100644
index 0000000..ef843ce
Binary files /dev/null and b/app/assets/images/no_image.png differ
diff --git a/app/controllers/members_controller.rb b/app/controllers/members_controller.rb
index ce47e25..0d34e25 100644
--- a/app/controllers/members_controller.rb
+++ b/app/controllers/members_controller.rb
@@ -3,7 +3,7 @@ class MembersController < ApplicationController
 
   # GET /members
   def index
-    @members = Member.all
+    @members = Member.order(:name).page params[:page]
   end
 
   # GET /members/1
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index df5818d..e2264d6 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1,7 +1,8 @@
 require "redcarpet"
 
 module ApplicationHelper
-
+  include Merged::ViewHelper
+  
   def renderer
     options = {hard_wrap: true , autolink: true, no_intra_emphasis: true ,
         safe_links_only: true, no_styles: true ,
diff --git a/app/helpers/members_helper.rb b/app/helpers/members_helper.rb
index e3fa623..02d29f9 100644
--- a/app/helpers/members_helper.rb
+++ b/app/helpers/members_helper.rb
@@ -1,2 +1,12 @@
 module MembersHelper
+
+  def image_for(someone , classes = "")
+    if someone.picture.blank?
+      image = asset_url("no_image")
+    else
+      image = element.picture.url
+    end
+    image_tag(image , alt: someone.name , class: classes )
+  end
+
 end
diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml
index ad784ef..7870ed3 100644
--- a/app/views/layouts/_header.haml
+++ b/app/views/layouts/_header.haml
@@ -4,7 +4,9 @@
       = image_tag("feenix_lintu" , class: "h-20")
       %span.ml-2.text-xl.font-bold.tracking-wide.text-gray-800.uppercase Hub Feenix
     %ul.flex.items-center.hidden.space-x-8.lg:flex
-      - [:volunteers , :stories , :info , :arriving, :about].each do |link|
+      %li
+        %a.font-medium.tracking-wide.text-gray-700.transition-colors.duration-400.hover:text-cyan-800{"aria-label" => "Our product", :href => "/members", :title => "People"} People
+      - [ :stories , :info , :arriving, :about].each do |link|
         %li
           %a.font-medium.tracking-wide.text-gray-700.transition-colors.duration-400.hover:text-cyan-800{"aria-label" => "Our product", :href => "/#{link}", :title => link.capitalize}= link.capitalize
       %li
diff --git a/app/views/members/index.html.haml b/app/views/members/index.html.haml
index ea556b4..2e88109 100644
--- a/app/views/members/index.html.haml
+++ b/app/views/members/index.html.haml
@@ -1,25 +1,14 @@
 .flex.justify-center
 
   %h1 Listing members
+  = paginate @members
 
-  %table
-    %thead
-      %tr
-        %th Name
-        %th Public
-        %th
-        %th
-        %th
-
-    %tbody
-      - @members.each do |member|
-        %tr
-          %td= member.name
-          %td= member.public
-          %td= link_to 'Show', member
-          %td= link_to 'Edit', edit_member_path(member)
-          %td= link_to 'Destroy', member, method: :delete, data: { confirm: 'Are you sure?' }
-
-  %br
-
-  = link_to 'New Member', new_member_path
+.grid.grid-cols-4
+  - @members.each do |member|
+    .fex.flex-col.overflow-hidden.rounded-lg.border.border-gray-100.shadow-sm.m-10
+      = image_for( member ,  class: "h-60 w-full object-cover")
+      %h3.p-5.text-2xl.bg-gray-100.text-black.font-bold.text-center= member.name
+      %div.h-full
+        .p-5.text-center
+          .m-2.text-sm.leading-relaxed.line-clamp-3{ prose_classes }
+            = markdown(member.bio)