diff --git a/src/popup/app/global/mainController.js b/src/popup/app/global/mainController.js
index 1d444af52b..47c4ccaf49 100644
--- a/src/popup/app/global/mainController.js
+++ b/src/popup/app/global/mainController.js
@@ -1,11 +1,13 @@
 angular
     .module('bit.global')
 
-    .controller('mainController', function ($scope, $state, authService, toastr, i18nService, $analytics, utilsService) {
+    .controller('mainController', function ($scope, $state, authService, toastr, i18nService, $analytics, utilsService,
+        $window) {
         var self = this;
         self.currentYear = new Date().getFullYear();
         self.animation = '';
-        self.lgBody = !utilsService.isFirefox();
+        self.shBody = $window.screen.availHeight < 600;
+        self.lgBody = !utilsService.isFirefox() && !self.shBody;
 
         $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
             if (toParams.animation) {
diff --git a/src/popup/index.html b/src/popup/index.html
index 8b10dc9c86..e867ccdfef 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -95,7 +95,8 @@
     <script src="app/lock/lockModule.js"></script>
     <script src="app/lock/lockController.js"></script>
 </head>
-<body ng-controller="mainController as main" class="{{main.animation}}" ng-class="{lg: main.lgBody}">
+<body ng-controller="mainController as main" class="{{main.animation}}" 
+      ng-class="{lg: main.lgBody, sh: main.shBody }">
     <div ui-view class="main-view"></div>
 </body>
 </html>
diff --git a/src/popup/less/popup.less b/src/popup/less/popup.less
index e428ddb79a..370a20e0ec 100644
--- a/src/popup/less/popup.less
+++ b/src/popup/less/popup.less
@@ -23,6 +23,11 @@ body.lg {
     height: 667px !important;
 }
 
+body.sh {
+    width: 375px !important;
+    height: 500px !important;
+}
+
 .main-view {
     position: absolute;
     width: 100%;
