diff --git a/app/assets/javascripts/app/application.js b/app/assets/javascripts/app/application.js
index cf3bf04d8..f0936f5de 100644
--- a/app/assets/javascripts/app/application.js
+++ b/app/assets/javascripts/app/application.js
@@ -22,6 +22,7 @@
     initSlider();
     loadFlash();
     blendedImg();
+    initChangeImageColor();
     document.removeEventListener('turbolinks:load', initApplication);
   }
 
diff --git a/app/assets/javascripts/app/change_img_color.js b/app/assets/javascripts/app/change_img_color.js
new file mode 100644
index 000000000..8043bb45f
--- /dev/null
+++ b/app/assets/javascripts/app/change_img_color.js
@@ -0,0 +1,43 @@
+(function() {
+  var initChangeImageColor = function() {
+    var elements = document.querySelectorAll('.pk-js-changed-color-images');
+
+    for(var i = 0; i < elements.length; i++) {
+      var elem = elements[i];
+      processElement(elem);
+    }
+
+    function processElement(elem) {
+      var imgNode = elem.childNodes[0];
+      var canvas = document.createElement('canvas');
+      var imgObj = new Image();
+      imgObj.onload = function() {
+        canvas.width = imgObj.width;
+        canvas.height = imgObj.height;
+
+        x = canvas.getContext('2d');
+
+        x.drawImage(imgObj, 0, 0);
+
+        var img = x.getImageData(0, 0, canvas.width, canvas.height);
+        var pix = img.data;
+        var n = pix.length;
+
+        for (i = 0; i < n; i += 4) {
+          if (pix[i + 3] > 0) {
+            pix[i] = 255;
+            pix[i + 1] = 244;
+            pix[i + 2] = 218;
+          }
+        }
+
+        x.putImageData(img, 0, 0);
+
+        elem.appendChild(canvas);
+      }
+      imgObj.src = imgNode.src;
+    }
+  }
+
+  window.initChangeImageColor = initChangeImageColor;
+})();
diff --git a/app/assets/stylesheets/app/application.scss b/app/assets/stylesheets/app/application.scss
index 4c6cfd8fc..ba6f34b53 100644
--- a/app/assets/stylesheets/app/application.scss
+++ b/app/assets/stylesheets/app/application.scss
@@ -44,6 +44,8 @@
 
 @import "pages/authentication/authentication";
 @import "pages/talks-archive/talk";
+@import "pages/supporters/base";
+@import "pages/supporters/supporter";
 
 @import "shared/list";
 @import "shared/search";
diff --git a/app/assets/stylesheets/app/pages/supporters/_base.scss b/app/assets/stylesheets/app/pages/supporters/_base.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/assets/stylesheets/app/pages/supporters/_supporter.scss b/app/assets/stylesheets/app/pages/supporters/_supporter.scss
new file mode 100644
index 000000000..73c0669ff
--- /dev/null
+++ b/app/assets/stylesheets/app/pages/supporters/_supporter.scss
@@ -0,0 +1,53 @@
+$namespace: ".pk-supporter";
+
+#{$namespace} {
+  text-decoration: none;
+  display: inline-block;
+  vertical-align: middle;
+  width: 200px;
+  height: 112px;
+  padding: 10px;
+  position: relative;
+  overflow: hidden;
+  margin: 8px 0;
+  img, canvas {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%,-50%,0);
+    width: 100%;
+    transition: opacity .2s ease-out;
+  }
+
+  img {
+    opacity: 0;
+  }
+
+  canvas {
+    opacity: 1;
+  }
+
+  &:hover, &:active, &:focus {
+    text-decoration: none;
+    img {
+      opacity: 1;
+    }
+
+    canvas {
+      opacity: 0;
+    }
+  }
+}
+
+#{$namespace}--medium {
+  width: 300px;
+  height: 170px;
+}
+
+#{$namespace} + #{$namespace} {
+  margin-left: 40px;
+}
+
+#{$namespace}--medium + #{$namespace}--medium {
+  margin-left: 56px;
+}
diff --git a/app/controllers/admin/friends_controller.rb b/app/controllers/admin/friends_controller.rb
index 9b7c4cf9b..ddec4cddc 100644
--- a/app/controllers/admin/friends_controller.rb
+++ b/app/controllers/admin/friends_controller.rb
@@ -31,7 +31,7 @@ def friend
     end
 
     def friends
-      @friends ||= search_against(Friend).order(:name).page(params[:page])
+      @friends ||= search_against(Friend).includes(:group).order(:name).page(params[:page])
     end
 
     def friend_params
diff --git a/app/controllers/supporters_controller.rb b/app/controllers/supporters_controller.rb
new file mode 100644
index 000000000..34664c785
--- /dev/null
+++ b/app/controllers/supporters_controller.rb
@@ -0,0 +1,27 @@
+class SupportersController < ApplicationController
+  helper_method :course_supporters, :meetups_supporters, :inlove_partner
+
+  private
+
+  def friends_groups
+    @friends_groups ||= Group.friends
+  end
+
+  def course_supporters
+    @course_supporters ||= friends_groups
+      .find_by(name: 'Course')
+      .friends
+      .where.not(id: inlove_partner.id)
+  end
+
+  def meetups_supporters
+    @meetups_supporters ||= friends_groups
+      .find_by(name: 'meetups')
+      .friends
+      .where.not(id: inlove_partner.id)
+  end
+
+  def inlove_partner
+    @inlove_partner ||= Friend.find_by(name: 'OnApp')
+  end
+end
diff --git a/app/views/admin/friends/index.slim b/app/views/admin/friends/index.slim
index 76ecb6fea..4c5a9ba38 100644
--- a/app/views/admin/friends/index.slim
+++ b/app/views/admin/friends/index.slim
@@ -6,12 +6,14 @@ table.ui.very.basic.table
   thead
     tr
       th = t 'words.name'
+      th = t 'groups.singular'
       th.actions colspan="2"
 
   tbody
     - friends.each do |friend|
       tr
         td = friend.name
+        td = friend&.group&.name
         td.right.aligned = controls do
           = admin_edit_resource_link(friend)
 
diff --git a/app/views/layouts/app/_header.slim b/app/views/layouts/app/_header.slim
index 188c8ac65..b572a3c91 100644
--- a/app/views/layouts/app/_header.slim
+++ b/app/views/layouts/app/_header.slim
@@ -62,6 +62,9 @@ header.pk-header class="#{yield(:main_header_class)}"
 
               /li.pk-list__unit = goals_link
 
+              li.pk-list__unit.pk-header__li-list-wr
+                = link_to "supporters", supporters_path
+
               li.pk-list__unit.pk-header__li-list-wr
                 a = "contacts"
                 ul.pk-header__li-list
diff --git a/app/views/supporters/show.slim b/app/views/supporters/show.slim
new file mode 100644
index 000000000..93053aff6
--- /dev/null
+++ b/app/views/supporters/show.slim
@@ -0,0 +1,14 @@
+.pk-container
+  h2 = 'Friends and supporters of pivorak community:'
+  - meetups_supporters.each do |meetups_supporter|
+    = link_to meetups_supporter.link, class: 'pk-supporter pk-supporter--medium pk-js-changed-color-images', target: '_blank'
+      = image_tag meetups_supporter.logo
+
+  h2 = 'Partners of Ruby Summer School:'
+  div
+    = link_to inlove_partner.link, class: 'pk-supporter pk-supporter--medium pk-js-changed-color-images', target: '_blank'
+      = image_tag inlove_partner.logo
+
+  - course_supporters.each do |course_supporter|
+    = link_to course_supporter.link, class: 'pk-supporter pk-js-changed-color-images', target: '_blank'
+      = image_tag course_supporter.logo
diff --git a/config/routes.rb b/config/routes.rb
index 3ef6f1536..c730cd3b7 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -33,6 +33,8 @@
     post :donate, on: :member
   end
 
+  resource :supporters, only: %i[show]
+
   #=== ADMIN AREA ===============================
   authenticate :user, ->(u) { u.admin? } do
     namespace :admin do