diff --git a/static/css/directives/ui/app-public-view.css b/static/css/directives/ui/app-public-view.css
index 39a5456cd..1436e99a6 100644
--- a/static/css/directives/ui/app-public-view.css
+++ b/static/css/directives/ui/app-public-view.css
@@ -72,4 +72,10 @@
 
 .app-public-view-element .co-panel .co-panel-heading i.fa {
     display: none;
+}
+
+.app-public-view-element .co-tab-panel {
+    margin: 0px;
+    box-shadow: none;
+    border: none;
 }
\ No newline at end of file
diff --git a/static/css/directives/ui/cor-tabs.css b/static/css/directives/ui/cor-tabs.css
index e7f405d9c..d49094965 100644
--- a/static/css/directives/ui/cor-tabs.css
+++ b/static/css/directives/ui/cor-tabs.css
@@ -1,4 +1,4 @@
-cor-tabs {
+.vertical cor-tabs {
   display: table-cell;
   float: none;
   vertical-align: top;
@@ -6,6 +6,37 @@ cor-tabs {
   border-right: 1px solid #DDE7ED;
 }
 
+@media (min-width: 768px) {
+  .horizontal-label {
+    color: #666;
+  }
+
+  .vertical .horizontal-label {
+    display: none;
+  }
+
+  .horizontal .horizontal-label {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .horizontal .horizontal-label {
+    margin-left: 10px;
+    display: inline-block;
+  }
+
+  .horizontal .cor-tab-itself {
+    font-size: 18px;
+    padding: 6px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .horizontal .cor-tab-itself i.fa {
+    display: none;
+  }
+}
+
 .co-tab-container {
   padding: 0px;
 }
@@ -18,7 +49,14 @@ cor-tabs {
   vertical-align: top;
 }
 
-.co-tab-content {
+.horizontal .co-tab-content {
+  width: 100%;
+  display: block;
+  float: none;
+  padding: 30px;
+}
+
+.vertical .co-tab-content {
   width: 100%;
   display: table-cell;
   float: none;
@@ -68,6 +106,10 @@ cor-tabs {
 }
 
 @media (max-width: 767px) {
+  .vertical cor-tabs {
+    display: block;
+  }
+
   .co-tabs {
     display: block;
     width: auto;
@@ -78,6 +120,16 @@ cor-tabs {
   cor-tabs {
     position: relative;
     display: block;
+    float: none;
+    vertical-align: top;
+    background-color: #e8f1f6;
+    border-right: 1px solid #DDE7ED;
+  }
+
+  .co-tab-element li.active {
+    background-color: white;
+    border-right: 1px solid white;
+    margin-right: -1px;
   }
 
   .co-tab-element .xs-toggle {
@@ -106,24 +158,46 @@ cor-tabs {
     font-family: FontAwesome;
   }
 
-  .co-tab-element .xs-label {
-    line-height: 60px;
+  .co-tab-element .horizontal-label {
     font-size: 16px;
     margin-left: 16px;
     display: inline-block !important;
     color: gray;
+    vertical-align: middle;
   }
 
-  .co-tabs li a {
+  .cor-tab-itself {
+    width: 100%;
+  }
+
+  .cor-tab-icon {
+    vertical-align: middle;
+  }
+
+  .co-top-tab-bar {
+    padding: 0px;
+  }
+
+  .co-top-tab-bar li {
+    padding: 0px;
+  }
+
+  .co-tabs li a, .co-top-tab-bar li a {
     display: inline-block;
     height: 60px;
-    line-height: 60px;
+    line-height: 54px;
     white-space: nowrap;
     width: 100%;
     text-align: left;
     padding-left: 20px;
     text-decoration: none !important;
     font-size: 28px;
+    color: #666;
+  }
+
+  .co-top-tab {
+    display: block !important;
+    border-bottom: 0px !important;
   }
 
   .co-tabs li a i {
@@ -131,7 +205,7 @@ cor-tabs {
     font-size: 28px;
   }
 
-  .co-tabs li.active a .xs-label {
+  .co-tabs li.active a .horizontal-label {
     color: black;
   }
 
@@ -145,6 +219,7 @@ cor-tabs {
 
   .co-tab-element.closed li {
     height: 0px;
+    padding: 0px;
     overflow: hidden;
   }
 
diff --git a/static/directives/credentials-dialog.html b/static/directives/credentials-dialog.html
index d5c45b42e..c491741bb 100644
--- a/static/directives/credentials-dialog.html
+++ b/static/directives/credentials-dialog.html
@@ -6,7 +6,7 @@
           <div class="cor-loader"></div>
         </div>
         <div class="co-tab-modal-body" ng-show="!credentials.loading">
-          <cor-tab-panel remember-cookie="quay.credentialsTab">
+          <cor-tab-panel remember-cookie="quay.credentialsTab" vertical-tabs="true">
             <!-- Tabs -->
             <cor-tabs>
               <cor-tab tab-active="true" tab-id="cred-secret-{{ ::dialogID }}">
diff --git a/static/js/directives/ui/app-public-view/app-public-view.component.html b/static/js/directives/ui/app-public-view/app-public-view.component.html
index ea4adaa13..fd9506d59 100644
--- a/static/js/directives/ui/app-public-view/app-public-view.component.html
+++ b/static/js/directives/ui/app-public-view/app-public-view.component.html
@@ -2,7 +2,7 @@
   <div class="co-main-content-panel">
     <div class="app-row">
       <!-- Main panel -->
-      <div class="col-md-9 main-content">
+      <div class="col-md-9 col-sm-12 main-content">
         <!-- App Header -->
         <div class="app-header">
           <a href="https://coreos.com/blog/quay-application-registry-for-kubernetes.html" class="hidden-xs hidden-sm" style="float: right; padding: 6px;" ng-safenewtab><i class="fa fa-info-circle" style="margin-right: 6px;"></i>Learn more about applications</a>
@@ -10,89 +10,91 @@
         </div>
 
         <!-- Tabs -->
-        <ul class="co-top-tab-bar">
-          <li class="co-top-tab" ng-class="$ctrl.currentTab == 'description' ? 'active': ''" ng-click="$ctrl.showTab('description')">
-            Description
-          </li>
-          <li class="co-top-tab" ng-class="$ctrl.currentTab == 'channels' ? 'active': ''" ng-click="$ctrl.showTab('channels')">
-            Channels
-          </li>
-          <li class="co-top-tab" ng-class="$ctrl.currentTab == 'releases' ? 'active': ''" ng-click="$ctrl.showTab('releases')">
-            Releases
-          </li>
-          <li class="co-top-tab" ng-class="$ctrl.currentTab == 'settings' ? 'active': ''" ng-click="$ctrl.showTab('settings')"
-              ng-if="$ctrl.repository.can_admin">
-            Settings
-          </li>
-        </ul>
+        <cor-tab-panel>
+          <cor-tabs>
+            <cor-tab tab-title="Description" tab-id="description">
+              <i class="fa fa-info-circle"></i>
+            </cor-tab>
+            <cor-tab tab-title="Channels" tab-id="channels">
+              <i class="fa fa-tags"></i>
+            </cor-tab>
+            <cor-tab tab-title="Releases" tab-id="releases">
+              <i class="fa ci-package"></i>
+            </cor-tab>
+            <cor-tab tab-title="Settings" tab-id="settings"
+                     ng-if="$ctrl.repository.can_admin">
+              <i class="fa fa-gear"></i>
+            </cor-tab>
+          </cor-tabs>
 
-        <div class="tab-content">
-          <div ng-show="$ctrl.currentTab == 'description'">
-            <div class="description markdown-input"
-             content="$ctrl.repository.description"
-             can-write="$ctrl.repository.can_write"
-             content-changed="$ctrl.updateDescription"
-             field-title="'application description'">
-            </div>
-          </div>
+          <cor-tab-content>
+            <!-- Description -->
+            <cor-tab-pane id="description">
+              <div class="description markdown-input"
+               content="$ctrl.repository.description"
+               can-write="$ctrl.repository.can_write"
+               content-changed="$ctrl.updateDescription"
+               field-title="'application description'">
+              </div>
+            </cor-tab-pane>
 
-          <div ng-show="$ctrl.currentTab == 'channels'">
-            <div ng-show="!$ctrl.repository.channels.length && $ctrl.repository.can_write">
-              <h3>No channels found for this application</h3>
-              <br>
-              <p>
-                To push a new channel (from within the Helm package directory and with the <a href="https://coreos.com/apps" ng-safenewtab>Helm registry plugin</a> installed):
-<pre class="command">
-helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }}
-</pre>
-              </p>
-            </div>
+            <!-- Channels -->
+            <cor-tab-pane id="channels">
+              <div ng-show="!$ctrl.repository.channels.length && $ctrl.repository.can_write">
+                <h3>No channels found for this application</h3>
+                <br>
+                <p class="hidden-xs">
+                  To push a new channel (from within the Helm package directory and with the <a href="https://coreos.com/apps" ng-safenewtab>Helm registry plugin</a> installed):
+  <pre class="command hidden-xs">helm registry push --namespace {{ $ctrl.repository.namespace }} --channel {channelName} {{ $ctrl.Config.SERVER_HOSTNAME }}</pre>
+                </p>
+              </div>
 
-            <div ng-show="$ctrl.repository.channels.length || !$ctrl.repository.can_write">
-              <cor-table table-data="$ctrl.repository.channels" table-item-title="channels" filter-fields="['name']">
-                <cor-table-col datafield="name" sortfield="name" title="Name"
-                               templateurl="/static/js/directives/ui/app-public-view/channel-name.html"></cor-table-col>
-                <cor-table-col datafield="release" sortfield="release" title="Current Release"></cor-table-col>
-                <cor-table-col datafield="last_modified" sortfield="last_modified" title="Last Modified"
-                               selected="true" kindof="datetime"
-                               templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
-              </cor-table>
-            </div>
-          </div> <!-- /channels -->
+              <div ng-show="$ctrl.repository.channels.length || !$ctrl.repository.can_write">
+                <cor-table table-data="$ctrl.repository.channels" table-item-title="channels" filter-fields="['name']">
+                  <cor-table-col datafield="name" sortfield="name" title="Name"
+                                 templateurl="/static/js/directives/ui/app-public-view/channel-name.html"></cor-table-col>
+                  <cor-table-col datafield="release" sortfield="release" title="Current Release"></cor-table-col>
+                  <cor-table-col datafield="last_modified" sortfield="last_modified" title="Last Modified"
+                                 selected="true" kindof="datetime"
+                                 templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
+                </cor-table>
+              </div>
+            </cor-tab-pane>
 
-          <div ng-show="$ctrl.currentTab == 'releases'">
-            <div ng-show="!$ctrl.repository.releases.length && $ctrl.repository.can_write">
-              <h3>No releases found for this application</h3>
-              <br>
-              <p>
-                To push a new release (from within the Helm package directory and with the <a href="https://coreos.com/apps" ng-safenewtab>Helm registry plugin</a> installed):
-<pre class="command">
-helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }}
-</pre>
-              </p>
-            </div>
+            <!-- Releases -->
+            <cor-tab-pane id="releases">
+              <div ng-show="!$ctrl.repository.releases.length && $ctrl.repository.can_write">
+                <h3>No releases found for this application</h3>
+                <br>
+                <p class="hidden-xs">
+                  To push a new release (from within the Helm package directory and with the <a href="https://coreos.com/apps" ng-safenewtab>Helm registry plugin</a> installed):
+  <pre class="command hidden-xs">helm registry push --namespace {{ $ctrl.repository.namespace }} {{ $ctrl.Config.SERVER_HOSTNAME }}</pre>
+                </p>
+              </div>
 
-            <div ng-show="$ctrl.repository.releases.length || !$ctrl.repository.can_write">
-              <cor-table table-data="$ctrl.repository.releases" table-item-title="releases" filter-fields="['name']">
-                <cor-table-col datafield="name" sortfield="name" title="Name"></cor-table-col>
-                <cor-table-col datafield="last_modified" sortfield="last_modified"
-                               title="Created"
-                               selected="true" kindof="datetime"
-                               templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
-                <cor-table-col datafield="channels" title="Channels"
-                               templateurl="/static/js/directives/ui/app-public-view/channels-list.html"></cor-table-col>
-              </cor-table>
-            </div>
-          </div> <!-- /releases -->
+              <div ng-show="$ctrl.repository.releases.length || !$ctrl.repository.can_write">
+                <cor-table table-data="$ctrl.repository.releases" table-item-title="releases" filter-fields="['name']">
+                  <cor-table-col datafield="name" sortfield="name" title="Name"></cor-table-col>
+                  <cor-table-col datafield="last_modified" sortfield="last_modified"
+                                 title="Created"
+                                 selected="true" kindof="datetime"
+                                 templateurl="/static/js/directives/ui/app-public-view/last-modified.html"></cor-table-col>
+                  <cor-table-col datafield="channels" title="Channels"
+                                 templateurl="/static/js/directives/ui/app-public-view/channels-list.html"></cor-table-col>
+                </cor-table>
+              </div>
+            </cor-tab-pane>
 
-          <div ng-show="$ctrl.currentTab == 'settings'" ng-if="$ctrl.repository.can_admin">
-            <div class="repo-panel-settings" repository="$ctrl.repository" is-enabled="$ctrl.settingsShown"></div>
-          </div>
-        </div>
+            <!-- Settings -->
+            <cor-tab-pane id="settings" ng-if="$ctrl.repository.can_admin">
+              <div class="repo-panel-settings" repository="$ctrl.repository" is-enabled="$ctrl.settingsShown"></div>
+            </cor-tab-pane>
+          </cor-tab-content>
+        </cor-tab-panel>
       </div>
 
       <!-- Side bar -->
-      <div class="col-md-3 side-bar">
+      <div class="col-md-3 hidden-xs hidden-sm side-bar">
         <div>
           <visibility-indicator repository="$ctrl.repository"></visibility-indicator>
         </div>
diff --git a/static/js/directives/ui/app-public-view/app-public-view.component.ts b/static/js/directives/ui/app-public-view/app-public-view.component.ts
index 0d90c188f..6b1f75258 100644
--- a/static/js/directives/ui/app-public-view/app-public-view.component.ts
+++ b/static/js/directives/ui/app-public-view/app-public-view.component.ts
@@ -10,7 +10,6 @@ import { Input, Component, Inject } from 'ng-metadata/core';
 })
 export class AppPublicViewComponent {
   @Input('<') public repository: any;
-  private currentTab: string = 'description';
   private settingsShown: number = 0;
 
   constructor(@Inject('Config') private Config: any) {
@@ -22,10 +21,7 @@ export class AppPublicViewComponent {
     this.repository.put();
   }
 
-  public showTab(tab: string): void {
-    this.currentTab = tab;
-    if (tab == 'settings') {
-      this.settingsShown++;
-    }
+  public showSettings(): void {
+    this.settingsShown++;
   }
 }
diff --git a/static/js/directives/ui/cor-tabs/cor-tab-panel.component.html b/static/js/directives/ui/cor-tabs/cor-tab-panel.component.html
index d041c9466..d449a6e30 100644
--- a/static/js/directives/ui/cor-tabs/cor-tab-panel.component.html
+++ b/static/js/directives/ui/cor-tabs/cor-tab-panel.component.html
@@ -1,3 +1,3 @@
 <div class="co-main-content-panel co-tab-panel co-fx-box-shadow-heavy">
-    <div class="co-tab-container" ng-transclude></div>
+    <div class="co-tab-container" ng-class="$ctrl.isVertical() ? 'vertical': 'horizontal'" ng-transclude></div>
 </div>
diff --git a/static/js/directives/ui/cor-tabs/cor-tab-panel.component.ts b/static/js/directives/ui/cor-tabs/cor-tab-panel.component.ts
index a427989f4..dc24c39b0 100644
--- a/static/js/directives/ui/cor-tabs/cor-tab-panel.component.ts
+++ b/static/js/directives/ui/cor-tabs/cor-tab-panel.component.ts
@@ -15,9 +15,13 @@ import { CorTabCurrentHandler, LocationCurrentTabHandler, CookieCurrentTabHandle
   }
 })
 export class CorTabPanelComponent implements OnDestroy {
-  // If 'true', the currently selected tab will be remembered via a cookie and not the page URL.
+  // If supplied, the currently selected tab will be remembered via the named cookie and not
+  // the page URL.
   @Input('@') public rememberCookie: string;
 
+  // If 'true', the tabs will be displayed vertically, as opposed to horizontally.
+  @Input('<') public verticalTabs: boolean;
+
   // The tabs under this tabs component.
   private tabs: CorTabComponent[] = [];
 
@@ -45,6 +49,13 @@ export class CorTabPanelComponent implements OnDestroy {
     }
   }
 
+  /**
+   * isVertical returns true if the tabs in this panel are displayed vertically.
+   */
+  public isVertical(): boolean {
+    return this.verticalTabs;
+  }
+
   public tabClicked(tab: CorTabComponent): void {
     this.setActiveTab(tab);
   }
diff --git a/static/js/directives/ui/cor-tabs/cor-tab.component.html b/static/js/directives/ui/cor-tabs/cor-tab.component.html
index ca8e42f49..56b97fccf 100644
--- a/static/js/directives/ui/cor-tabs/cor-tab.component.html
+++ b/static/js/directives/ui/cor-tabs/cor-tab.component.html
@@ -1,10 +1,11 @@
-<li ng-class="{'active': $ctrl.isActive}">
+<li class="cor-tab-itself" ng-class="{'active': $ctrl.isActive, 'co-top-tab': !$ctrl.parent.isVertical()}">
     <a ng-click="$ctrl.tabClicked()">
-        <span data-title="{{ ::$ctrl.tabTitle }}"
+        <span class="cor-tab-icon"
+              data-title="{{ ::($ctrl.parent.isVertical() ? $ctrl.tabTitle : '') }}"
               data-placement="right"
               data-container="body"
               style="display: inline-block"
-              bs-tooltip><span ng-transclude/></span><span class="visible-xs-inline xs-label">{{ ::$ctrl.tabTitle }}</span>
+              bs-tooltip><span ng-transclude/></span><span class="horizontal-label">{{ ::$ctrl.tabTitle }}</span>
         </span>
     </a>
 </li>
diff --git a/static/js/directives/ui/cor-tabs/cor-tabs.component.html b/static/js/directives/ui/cor-tabs/cor-tabs.component.html
index 0e1b4bf22..e068a43bf 100644
--- a/static/js/directives/ui/cor-tabs/cor-tabs.component.html
+++ b/static/js/directives/ui/cor-tabs/cor-tabs.component.html
@@ -1,4 +1,4 @@
 <span class="co-tab-element" ng-class="$ctrl.isClosed ? 'closed' : 'open'">
   <span class="xs-toggle" ng-click="$ctrl.toggleClosed($event)"></span>
-  <ul class="co-tabs col-md-1" ng-transclude></ul>
+  <ul ng-class="$ctrl.parent.isVertical() ? 'co-tabs col-md-1' : 'co-top-tab-bar'" ng-transclude></ul>
 </span>
diff --git a/static/js/directives/ui/cor-tabs/cor-tabs.component.ts b/static/js/directives/ui/cor-tabs/cor-tabs.component.ts
index 6b58ae50e..7c7c60a61 100644
--- a/static/js/directives/ui/cor-tabs/cor-tabs.component.ts
+++ b/static/js/directives/ui/cor-tabs/cor-tabs.component.ts
@@ -1,5 +1,6 @@
-import { Component, Host, Inject } from 'ng-metadata/core';
+import { Component, Input, Output, Inject, EventEmitter, Host } from 'ng-metadata/core';
 import { CorTabComponent } from './cor-tab.component';
+import { CorTabPanelComponent } from './cor-tab-panel.component';
 
 
 /**
@@ -16,6 +17,9 @@ export class CorTabsComponent {
   // If true, the tabs are in a closed state. Only applies in the mobile view.
   private isClosed: boolean = true;
 
+  constructor(@Host() @Inject(CorTabPanelComponent) private parent: CorTabPanelComponent) {
+  }
+
   private toggleClosed(e): void {
     this.isClosed = !this.isClosed;
   }
diff --git a/static/partials/image-view.html b/static/partials/image-view.html
index beec1526d..231a8ce0e 100644
--- a/static/partials/image-view.html
+++ b/static/partials/image-view.html
@@ -15,7 +15,7 @@
       </span>
     </div>
 
-    <cor-tab-panel>
+    <cor-tab-panel vertical-tabs="true">
       <cor-tabs>
         <cor-tab tab-title="Layers" tab-id="layers">
           <i class="fa ci-layers"></i>
diff --git a/static/partials/manage-application.html b/static/partials/manage-application.html
index 698dca5c0..85c986c4a 100644
--- a/static/partials/manage-application.html
+++ b/static/partials/manage-application.html
@@ -20,7 +20,7 @@
       </div>
     </div>
 
-    <cor-tab-panel>
+    <cor-tab-panel vertical-tabs="true">
       <cor-tabs>
         <cor-tab tab-title="Settings" tab-id="settings">
           <i class="fa fa-gear"></i>
diff --git a/static/partials/org-view.html b/static/partials/org-view.html
index 1fd56e0bb..8cfef7e10 100644
--- a/static/partials/org-view.html
+++ b/static/partials/org-view.html
@@ -20,7 +20,7 @@
       <div class="repo-list-view padded" namespaces="[organization]">&nbsp;</div>
     </div>
 
-    <cor-tab-panel ng-if="!user.anonymous && isMember">
+    <cor-tab-panel ng-if="!user.anonymous && isMember" vertical-tabs="true">
       <cor-tabs quay-show="isMember">
         <cor-tab tab-active="true" tab-title="Repositories" tab-id="repos">
           <i class="fa fa-hdd-o"></i>
diff --git a/static/partials/repo-view.html b/static/partials/repo-view.html
index 95da42e2a..9da90ba49 100644
--- a/static/partials/repo-view.html
+++ b/static/partials/repo-view.html
@@ -35,7 +35,7 @@
         </span>
       </div>
 
-      <cor-tab-panel>
+      <cor-tab-panel vertical-tabs="true">
         <cor-tabs>
           <cor-tab tab-title="Information" tab-id="info"
                    tab-init="showInfo()">
diff --git a/static/partials/super-user.html b/static/partials/super-user.html
index f272834bb..90fff94fe 100644
--- a/static/partials/super-user.html
+++ b/static/partials/super-user.html
@@ -22,7 +22,7 @@
       <span class="cor-title-content">Quay Enterprise Management</span>
     </div>
 
-    <cor-tab-panel>
+    <cor-tab-panel vertical-tabs="true">
       <cor-tabs>
         <cor-tab tab-title="Manage Users"
                  tab-id="users" tab-init="loadUsers()">
diff --git a/static/partials/user-view.html b/static/partials/user-view.html
index e275fe049..4fc2e620c 100644
--- a/static/partials/user-view.html
+++ b/static/partials/user-view.html
@@ -20,7 +20,7 @@
       <div class="repo-list-view padded" namespaces="[context.viewuser]">&nbsp;</div>
     </div>
 
-    <cor-tab-panel ng-if="context.viewuser.is_me">
+    <cor-tab-panel ng-if="context.viewuser.is_me" vertical-tabs="true">
       <cor-tabs quay-show="context.viewuser.is_me">
         <cor-tab tab-active="true" tab-title="Repositories" tab-id="repos">
           <i class="fa fa-hdd-o"></i>