diff --git a/Gemfile b/Gemfile
index ef0adb5e2bea87b2f95feb86a5edb791dcd29f63..928b766f16aa796cf9ce420a8ae40ddad205877f 100644
--- a/Gemfile
+++ b/Gemfile
@@ -156,6 +156,9 @@ gem "rack-attack"
 # Ace editor
 gem 'ace-rails-ap'
 
+# Semantic UI Sass for Sidebar
+gem 'semantic-ui-sass', '~> 0.16.1.0'
+
 gem "sass-rails", '~> 4.0.2'
 gem "coffee-rails"
 gem "uglifier"
diff --git a/Gemfile.lock b/Gemfile.lock
index 3bea962f6ac0f08aca2cca7142d2d64fb37d01b6..896e6fdebea061ceadab8494730890b64bdfe889 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -452,6 +452,8 @@ GEM
       activesupport (>= 3.1, < 4.2)
     select2-rails (3.5.2)
       thor (~> 0.14)
+    semantic-ui-sass (0.16.1.0)
+      sass (~> 3.2)
     settingslogic (2.0.9)
     sexp_processor (4.4.0)
     shoulda-matchers (2.1.0)
@@ -656,6 +658,7 @@ DEPENDENCIES
   sdoc
   seed-fu
   select2-rails
+  semantic-ui-sass (~> 0.16.1.0)
   settingslogic
   shoulda-matchers (~> 2.1.0)
   sidekiq (= 2.17.0)
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 35e435546611b160be2a1114b7827aa6fcff8b1c..9bcd8f0a171efcdf2b3dac35d013384d0e48b265 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -30,6 +30,7 @@
 #= require nprogress
 #= require nprogress-turbolinks
 #= require dropzone
+#= require semantic-ui/sidebar
 #= require_tree .
 
 window.slugify = (text) ->
diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
new file mode 100644
index 0000000000000000000000000000000000000000..e4a8cc6a4b0883079142656680461149be9fc0ee
--- /dev/null
+++ b/app/assets/javascripts/sidebar.js.coffee
@@ -0,0 +1,31 @@
+responsive_resize = ->
+  current_width = $(window).width()
+  if current_width < 985
+    $('.responsive-side').addClass("ui right wide sidebar")
+    $('.responsive-side-left').addClass("ui left sidebar")
+  else
+    $('.responsive-side').removeClass("ui right wide sidebar")
+    $('.responsive-side-left').removeClass("ui left sidebar")
+
+$ ->
+  # Depending on window size, set the sidebar offscreen.
+  responsive_resize()
+
+  $('.ui.sidebar')
+    .sidebar()
+
+  $('.sidebar-expand-button').click ->
+    $('.ui.sidebar')
+      .sidebar({overlay: true})
+      .sidebar('toggle')
+
+  # Hide sidebar on click outside of sidebar
+  $(document).mouseup (e) ->
+    container = $(".ui.sidebar")
+    container.sidebar "hide"  if not container.is(e.target) and container.has(e.target).length is 0
+    return
+
+# On resize, check if sidebar should be offscreen.
+$(window).resize ->
+  responsive_resize()
+  return
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 630d2aa429b3dec263b3ecdb32990d24459a0d27..7d058ad7719d703894725b49a8dced6658425e88 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -51,3 +51,8 @@
  * Styles for JS behaviors.
  */
 @import "behaviors.scss";
+
+/**
+* Styles for responsive sidebar
+*/
+@import "semantic-ui/modules/sidebar"
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7d93db3cf9031ab9197cb0028d61b2c87f9066f8
--- /dev/null
+++ b/app/assets/stylesheets/generic/sidebar.scss
@@ -0,0 +1,49 @@
+.ui.sidebar {
+  z-index: 1000 !important;
+  background: #fff;
+  padding: 10px;
+  width: 285px;
+}
+
+.ui.left.sidebar {
+  border-right: 1px solid #e1e1e1;
+  border-left: 0;
+}
+
+.ui.right.sidebar {
+  border-left: 1px solid #e1e1e1;
+  border-right: 0;
+}
+
+.sidebar-expand-button {
+  background: #f9f9f9;
+  color: #555;
+  padding: 9px 12px 6px 14px;
+  border: 1px solid #E1E1E1;
+  border-right: 0;
+  position: fixed;
+  top: 108px;
+  right: 0px;
+  margin-right: 0;
+  cursor: pointer;
+  transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -webkit-transition: all 0.4s;
+
+  &:hover {
+    background: #ddd;
+    color: #333;
+    padding-right: 25px;
+  }
+}
+
+.left.sidebar-expand-button {
+  left: 0px;
+  right: auto;
+  border: 1px solid #E1E1E1;
+  border-left: 0;
+  &:hover {
+    padding-right: 14px;
+    padding-left: 25px;
+  }
+}
diff --git a/app/views/dashboard/issues.html.haml b/app/views/dashboard/issues.html.haml
index af627588ad9c407411943790c7404a116a93dc5e..670755b8996bd66cd4bdd533108dd7fde68452b2 100755
--- a/app/views/dashboard/issues.html.haml
+++ b/app/views/dashboard/issues.html.haml
@@ -7,7 +7,9 @@
 %hr
 
 .row
-  .col-md-3
+  .left.sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+  .col-md-3.responsive-side-left
     = render 'shared/filter', entity: 'issue'
   .col-md-9
     = render 'shared/issues'
diff --git a/app/views/dashboard/merge_requests.html.haml b/app/views/dashboard/merge_requests.html.haml
index 550a93e178c3f251e935093e4f10cf9f8ed77b72..0a87eedaecc0dc08655297745453e3e89bf54f5f 100755
--- a/app/views/dashboard/merge_requests.html.haml
+++ b/app/views/dashboard/merge_requests.html.haml
@@ -7,7 +7,9 @@
   List all merge requests from all projects you have access to.
 %hr
 .row
-  .col-md-3
+  .left.sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+  .col-md-3.responsive-side-left
     = render 'shared/filter', entity: 'merge_request'
   .col-md-9
     = render 'shared/merge_requests'
diff --git a/app/views/dashboard/show.html.haml b/app/views/dashboard/show.html.haml
index e5b7fbf097e287b31e189d97575189c6fc7ce44a..b81eed76001d5d4a3638ef5ecec60e668c48eada 100644
--- a/app/views/dashboard/show.html.haml
+++ b/app/views/dashboard/show.html.haml
@@ -2,8 +2,11 @@
   .dashboard.row
     .activities.col-md-8
       = render 'activities'
-    .side.col-md-4.hidden-sm.hidden-xs
+    .side.col-md-4.left.responsive-side
       = render 'sidebar'
 
+  .sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+
 - else
   = render "zero_authorized_projects"
diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml
index 4b11d91dc985b4f370911224bcd20c5c1efc0a8b..7c6042b8ba3581e28681c1da36f4533ca9742892 100644
--- a/app/views/groups/issues.html.haml
+++ b/app/views/groups/issues.html.haml
@@ -11,7 +11,9 @@
 %hr
 
 .row
-  .col-md-3
+  .left.sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+  .col-md-3.responsive-side-left
     = render 'shared/filter', entity: 'issue'
   .col-md-9
     = render 'shared/issues'
diff --git a/app/views/groups/merge_requests.html.haml b/app/views/groups/merge_requests.html.haml
index 209130ec4443a3853df6000bca2dc5f92f4d0c60..817790f06ce4ea0019f574b6359d149f9a1f0219 100644
--- a/app/views/groups/merge_requests.html.haml
+++ b/app/views/groups/merge_requests.html.haml
@@ -10,7 +10,9 @@
     To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page.
 %hr
 .row
-  .col-md-3
+  .left.sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+  .col-md-3.responsive-side-left
     = render 'shared/filter', entity: 'merge_request'
   .col-md-9
     = render 'shared/merge_requests'
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index 51a8c911af8a457df5b7bad48e1362b730d4763b..e527b7bc2c8fa86e454d97fc292ac7b2d3fa7c5d 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -1,6 +1,8 @@
 = render "head"
 .row
-  .col-md-3
+  .left.sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+  .col-md-3.responsive-side-left
     = render 'shared/project_filter', project_entities_path: project_issues_path(@project),
              labels: true, redirect: 'issues'
   .col-md-9.issues-holder
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 232d398c5303a678625220c623534bf8c8111e42..919efc5fa1640c86d82b01765025697a1d5b1ae4 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -7,7 +7,9 @@
   %span (#{@merge_requests.total_count})
 %hr
 .row
-  .col-md-3
+  .left.sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+  .col-md-3.responsive-side-left
     = render 'shared/project_filter', project_entities_path: project_merge_requests_path(@project),
              labels: true, redirect: 'merge_requests'
   .col-md-9
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index 15635b299f466fbaadd5a0f0ea26df7dd74c57e5..4b44d68a9195a95ef51e42db7557473afb2bfdcf 100644
--- a/app/views/projects/milestones/index.html.haml
+++ b/app/views/projects/milestones/index.html.haml
@@ -8,7 +8,9 @@
         New Milestone
 
   .row
-    .col-md-3.hidden-sm
+    .left.sidebar-expand-button.hidden-lg.hidden-md
+      %i.icon-list.icon-2x
+    .col-md-3.responsive-side-left
       %ul.nav.nav-pills.nav-stacked
         %li{class: ("active" if (params[:f] == "active" || !params[:f]))}
           = link_to project_milestones_path(@project, f: "active") do
diff --git a/app/views/shared/_filter.html.haml b/app/views/shared/_filter.html.haml
index 0becf531cc3004234257424e1a4351e403bb8e6e..19ecc458e29ae8dbb35110e2972f9f32723b0876 100644
--- a/app/views/shared/_filter.html.haml
+++ b/app/views/shared/_filter.html.haml
@@ -1,4 +1,4 @@
-.side-filters.hidden-xs.hidden-sm
+.side-filters
   = form_tag filter_path(entity), method: 'get' do
     - if current_user
       %fieldset.scope-filter
diff --git a/app/views/shared/_project_filter.html.haml b/app/views/shared/_project_filter.html.haml
index 7936a038be390b3859fb4714843a97f9e469068b..743b4fba54217e4933d091700641f5471cb06c36 100644
--- a/app/views/shared/_project_filter.html.haml
+++ b/app/views/shared/_project_filter.html.haml
@@ -1,4 +1,4 @@
-.side-filters.hidden-xs.hidden-sm
+.side-filters
   = form_tag project_entities_path, method: 'get' do
     - if current_user
       %fieldset