diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 4bf3a0504030f12e68a49f47bcf7391efb10898e..79a37d87e82302f3c1c5160fb6479f0982f32a1b 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -162,6 +162,10 @@
   }
 }
 
+.dropdown-menu-full-width {
+  width: 100%;
+}
+
 .dropdown-menu-paging {
   .dropdown-page-two,
   .dropdown-menu-back {
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 8c96c7a9c31e8c554545a9a1c0776ceacb4ad3bc..71a9f79be3ef5e5c19e21382db30eb00f6267d17 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -5,6 +5,10 @@
 .file-holder {
   border: 1px solid $border-color;
 
+  &.file-holder-no-border {
+    border: 0;
+  }
+
   &.readme-holder {
     margin: $gl-padding-top 0;
   }
@@ -23,8 +27,17 @@
     word-wrap: break-word;
     border-radius: 3px 3px 0 0;
 
+    &.file-title-clear {
+      padding-left: 0;
+      padding-right: 0;
+      background-color: transparent;
+
+      .file-actions {
+        right: 0;
+      }
+    }
+
     .file-actions {
-      float: right;
       position: absolute;
       top: 5px;
       right: 15px;
diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss
index 639d639d5b0796aed4dc875879d5c30c4007f420..2aa939b7dc389197b6b17e747ad9ac68617b82e3 100644
--- a/app/assets/stylesheets/pages/snippets.scss
+++ b/app/assets/stylesheets/pages/snippets.scss
@@ -16,19 +16,6 @@
   }
 }
 
-.snippet-box {
-  @include border-radius(2px);
-
-  display: block;
-  float: left;
-  padding: 0 $gl-padding;
-  font-weight: normal;
-  margin-right: 10px;
-  font-size: $gl-font-size;
-  border: 1px solid;
-  line-height: 32px;
-}
-
 .markdown-snippet-copy {
   position: fixed;
   top: -10px;
@@ -36,3 +23,34 @@
   max-height: 0;
   max-width: 0;
 }
+
+.file-holder.snippet-file-content {
+  padding-bottom: $gl-padding;
+  border-bottom: 1px solid $border-color;
+
+  .file-title {
+    padding-top: $gl-padding;
+    padding-bottom: $gl-padding;
+  }
+
+  .file-actions {
+    top: 12px;
+  }
+
+  .file-content {
+    border-left: 1px solid $border-color;
+    border-right: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
+  }
+}
+
+.snippet-title {
+  font-size: 24px;
+  font-weight: normal;
+}
+
+.snippet-actions {
+  @media (min-width: $screen-sm-min) {
+    float: right;
+  }
+}
diff --git a/app/views/projects/snippets/_actions.html.haml b/app/views/projects/snippets/_actions.html.haml
index 4a51546942204346dc8d591ba3bf4c1ade0b7b8b..bf57beb9d071413bf3fafd4c103635a4de92f91d 100644
--- a/app/views/projects/snippets/_actions.html.haml
+++ b/app/views/projects/snippets/_actions.html.haml
@@ -1,11 +1,27 @@
-= link_to new_namespace_project_snippet_path(@project.namespace, @project), class: 'btn btn-grouped new-snippet-link', title: "New Snippet" do
-  = icon('plus')
-  New Snippet
-- if can?(current_user, :admin_project_snippet, @snippet)
-  = link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-remove", title: 'Delete Snippet' do
-    = icon('trash-o')
-    Delete
-- if can?(current_user, :update_project_snippet, @snippet)
-  = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-grouped snippable-edit" do
-    = icon('pencil-square-o')
-    Edit
+.hidden-xs
+  = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: 'btn btn-grouped btn-create new-snippet-link', title: "New Snippet" do
+    = icon('plus')
+    New Snippet
+  - if can?(current_user, :update_project_snippet, @snippet)
+    = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-grouped snippable-edit" do
+      Edit
+  - if can?(current_user, :update_project_snippet, @snippet)
+    = link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-warning", title: 'Delete Snippet' do
+      Delete
+.visible-xs-block.dropdown
+  %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
+    Options
+    %span.caret
+  .dropdown-menu.dropdown-menu-full-width
+    %ul
+      %li
+        = link_to new_namespace_project_snippet_path(@project.namespace, @project), title: "New Snippet" do
+          New Snippet
+      - if can?(current_user, :update_project_snippet, @snippet)
+        %li
+          = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet) do
+            Edit
+      - if can?(current_user, :update_project_snippet, @snippet)
+        %li
+          = link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do
+            Delete
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 7c599563ce45130f1e76cd7c7f5e8a32c119f83a..6f7bdcb29e8e4f924eca71e856d88f56436d5fec 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -4,15 +4,13 @@
 .snippet-holder
   = render 'shared/snippets/header'
 
-  %article.file-holder
-    .file-title
+  %article.file-holder.file-holder-no-border.snippet-file-content
+    .file-title.file-title-clear
       = blob_icon 0, @snippet.file_name
-      %strong
-        = @snippet.file_name
+      = @snippet.file_name
       .file-actions.hidden-xs
         = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
         = link_to 'Raw', raw_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-sm", target: "_blank"
-
     = render 'shared/snippets/blob'
 
   %div#notes= render "projects/notes/notes_with_form"
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index e65b181487238d529f5b8e5196d0cbfdd83c16a1..897aa5b4462961b428c59ccd294aa9838bed8137 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/app/views/shared/snippets/_header.html.haml
@@ -1,25 +1,24 @@
-.detail-page-header
-  .snippet-box.has-tooltip{class: visibility_level_color(@snippet.visibility_level), title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: 'body' }}
+.detail-page-header.clearfix
+  .snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } }
+    %span.sr-only
+      = visibility_level_label(@snippet.visibility_level)
     = visibility_level_icon(@snippet.visibility_level, fw: false)
-    = visibility_level_label(@snippet.visibility_level)
-  %span.identifier
+  %strong.item-title
     Snippet ##{@snippet.id}
   %span.creator
-    · created by #{link_to_member(@project, @snippet.author, size: 24)}
-    ·
+    created by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title")}
     = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
     - if @snippet.updated_at != @snippet.created_at
       %span
-        ·
         = icon('edit', title: 'edited')
         = time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_edited_ago')
 
-  .pull-right
+  .snippet-actions
     - if @snippet.project_id?
       = render "projects/snippets/actions"
     - else
       = render "snippets/actions"
 
-.detail-page-description.row-content-block.second-block
-  %h2.title
+.content-block.second-block
+  %h2.snippet-title.prepend-top-0.append-bottom-0
     = markdown escape_once(@snippet.title), pipeline: :single_line
diff --git a/app/views/snippets/_actions.html.haml b/app/views/snippets/_actions.html.haml
index 1979ae6d5bc473ebf218d9633bee889a747408cc..a7769654b61c280b5e8213c841bd13865a75a34e 100644
--- a/app/views/snippets/_actions.html.haml
+++ b/app/views/snippets/_actions.html.haml
@@ -1,11 +1,27 @@
-= link_to new_snippet_path, class: 'btn btn-grouped new-snippet-link', title: "New Snippet" do
-  = icon('plus')
-  New Snippet
-- if can?(current_user, :update_personal_snippet, @snippet)
-  = link_to edit_snippet_path(@snippet), class: "btn btn-grouped snippable-edit" do
-    = icon('pencil-square-o')
-    Edit
-- if can?(current_user, :admin_personal_snippet, @snippet)
-  = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-remove", title: 'Delete Snippet' do
-    = icon('trash-o')
-    Delete
+.hidden-xs
+  = link_to new_snippet_path, class: "btn btn-grouped btn-create new-snippet-link", title: "New Snippet" do
+    = icon('plus')
+    New Snippet
+  - if can?(current_user, :update_personal_snippet, @snippet)
+    = link_to edit_snippet_path(@snippet), class: "btn btn-grouped snippable-edit" do
+      Edit
+  - if can?(current_user, :admin_personal_snippet, @snippet)
+    = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-warning", title: 'Delete Snippet' do
+      Delete
+.visible-xs-block.dropdown
+  %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
+    Options
+    %span.caret
+  .dropdown-menu.dropdown-menu-full-width
+    %ul
+      %li
+        = link_to new_snippet_path, title: "New Snippet" do
+          New Snippet
+      - if can?(current_user, :update_personal_snippet, @snippet)
+        %li
+          = link_to edit_snippet_path(@snippet) do
+            Edit
+      - if can?(current_user, :admin_personal_snippet, @snippet)
+        %li
+          = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do
+            Delete
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index a2b365687700d5531210fffca18c35d178737bc8..ed3992650d4a0c741f809ab4f80e49e5cde3c29c 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -3,11 +3,10 @@
 .snippet-holder
   = render 'shared/snippets/header'
 
-  %article.file-holder
-    .file-title
+  %article.file-holder.file-holder-no-border.snippet-file-content
+    .file-title.file-title-clear
       = blob_icon 0, @snippet.file_name
-      %strong
-        = @snippet.file_name
+      = @snippet.file_name
       .file-actions.hidden-xs
         = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
         = link_to 'Raw', raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank"
diff --git a/features/steps/project/snippets.rb b/features/steps/project/snippets.rb
index 786a0cad97571599525bea9761ad02d21ad8d3ce..beb8ecfc799254150314886eda3110190a55ab59 100644
--- a/features/steps/project/snippets.rb
+++ b/features/steps/project/snippets.rb
@@ -43,12 +43,12 @@ class Spinach::Features::ProjectSnippets < Spinach::FeatureSteps
 
   step 'I click link "Edit"' do
     page.within ".detail-page-header" do
-      click_link "Edit"
+      first(:link, "Edit").click
     end
   end
 
   step 'I click link "Delete"' do
-    click_link "Delete"
+    first(:link, "Delete").click
   end
 
   step 'I submit new snippet "Snippet three"' do
diff --git a/features/steps/snippets/snippets.rb b/features/steps/snippets/snippets.rb
index 023032e679f219001de31470cb25f97410b823a9..19366b11071d71dae680395a5a8367d61ac68f3f 100644
--- a/features/steps/snippets/snippets.rb
+++ b/features/steps/snippets/snippets.rb
@@ -14,12 +14,12 @@ class Spinach::Features::Snippets < Spinach::FeatureSteps
 
   step 'I click link "Edit"' do
     page.within ".detail-page-header" do
-      click_link "Edit"
+      first(:link, "Edit").click
     end
   end
 
   step 'I click link "Delete"' do
-    click_link "Delete"
+    first(:link, "Delete").click
   end
 
   step 'I submit new snippet "Personal snippet three"' do