diff --git a/core/modules/responsive_preview/config/responsive_preview.devices.yml b/core/modules/responsive_preview/config/responsive_preview.devices.yml
index c8b20c4..8f4e088 100644
--- a/core/modules/responsive_preview/config/responsive_preview.devices.yml
+++ b/core/modules/responsive_preview/config/responsive_preview.devices.yml
@@ -6,40 +6,45 @@
 # The device listing and specifications will be updated periodically through
 # minor releases of Drupal.
 
-devices:
-  iphone:
-    label: iPhone 5
-    dimensions:
-      width: 640
-      height: 1136
-      dppx: 2
-  iphone4:
-    label: iPhone 4
-    dimensions:
-      width: 640
-      height: 960
-      dppx: 2
-  ipad:
-    label: iPad
-    dimensions:
-      width: 1536
-      height: 2048
-      dppx: 2
-  nexus4:
-    label: Nexus 4
-    dimensions:
-      width: 768
-      height: 1280
-      dppx: 2
-  nexus7:
-    label: Nexus 7
-    dimensions:
-      width: 800
-      height: 1280
-      dppx: 1.325
-  desktop:
-    label: Typical desktop
-    dimensions:
-      width: 1366
-      height: 768
-      dppx: 1
+iphone:
+  label: iPhone 5
+  dimensions:
+    width: 640
+    height: 1136
+    dppx: 2
+  orientation: portrait
+iphone4:
+  label: iPhone 4
+  dimensions:
+    width: 640
+    height: 960
+    dppx: 2
+  orientation: portrait
+ipad:
+  label: iPad
+  dimensions:
+    width: 1536
+    height: 2048
+    dppx: 2
+  orientation: portrait
+nexus4:
+  label: Nexus 4
+  dimensions:
+    width: 768
+    height: 1280
+    dppx: 2
+  orientation: portrait
+nexus7:
+  label: Nexus 7
+  dimensions:
+    width: 800
+    height: 1280
+    dppx: 1.325
+  orientation: portrait
+desktop:
+  label: Typical desktop
+  dimensions:
+    width: 1366
+    height: 768
+    dppx: 1
+  orientation: landscape
diff --git a/core/modules/responsive_preview/css/responsive-preview.base-rtl.css b/core/modules/responsive_preview/css/responsive-preview.base-rtl.css
index eaf2504..7a314cd 100644
--- a/core/modules/responsive_preview/css/responsive-preview.base-rtl.css
+++ b/core/modules/responsive_preview/css/responsive-preview.base-rtl.css
@@ -28,11 +28,11 @@
  *
  * The container is kept offscreen after it is built and has been disabled.
  */
-#responsive-preview-container {
+.responsive-preview {
   left: auto;
   right: -200%;
 }
-#responsive-preview-container.active {
+.responsive-preview.active {
   left: auto;
   right: 0;
 }
diff --git a/core/modules/responsive_preview/css/responsive-preview.base.css b/core/modules/responsive_preview/css/responsive-preview.base.css
index 0efa751..b98ef78 100644
--- a/core/modules/responsive_preview/css/responsive-preview.base.css
+++ b/core/modules/responsive_preview/css/responsive-preview.base.css
@@ -33,14 +33,17 @@
 .responsive-preview-toolbar-tab .trigger {
   display: block;
 }
-.responsive-preview-toolbar-tab .responsive-preview-options {
+/* Device preview options. */
+.responsive-preview-toolbar-tab .item-list {
   display: none;
+  position: absolute;
+  white-space: nowrap;
   z-index: 1;
 }
-.responsive-preview-toolbar-tab.open .responsive-preview-options {
+.responsive-preview-toolbar-tab.open .item-list {
   display: block;
 }
-.js .responsive-preview-toolbar-tab.tab .responsive-preview-options li {
+.js .responsive-preview-toolbar-tab.tab .options li {
   float: none;
 }
 
@@ -49,47 +52,45 @@
  *
  * The container is kept offscreen after it is built and has been disabled.
  */
-#responsive-preview-container {
+.responsive-preview {
   bottom: 0;
-  display: none;
   height: 100%;
   left: -200%; /* LTR */
-  position: fixed;
+  position: relative;
   top: 0;
   width: 100%;
   z-index: 1050;
 }
-#responsive-preview-container.active {
-  display: block;
+.responsive-preview.active {
   left: 0; /* LTR */
+  position: fixed;
 }
-#responsive-preview-close {
+.responsive-preview .control {
   position: absolute;
-  z-index: 75;
 }
-.responsive-preview-modal-background {
+.responsive-preview .modal-background {
   bottom: 0;
   height: 100%;
   left: 0;
-  position: fixed;
+  position: static;
   right: 0;
   top: 0;
   width: 100%;
   z-index: 1;
 }
+.responsive-preview.active .modal-background {
+  position: fixed;
+}
 
 /**
  * Preview iframe.
  */
-#responsive-preview-container iframe {
-  height: 100%;
-  position: relative;
-  width: 100%;
+.responsive-preview .frame-container {
+  position: absolute;
   z-index: 100;
-  -webkit-transition: all 150ms ease-out;
-     -moz-transition: all 150ms ease-out;
-       -o-transition: all 150ms ease-out;
-          transition: all 150ms ease-out;
+}
+.responsive-preview .frame-container iframe {
+  position: relative;
 }
 
 /**
diff --git a/core/modules/responsive_preview/css/responsive-preview.icons-rtl.css b/core/modules/responsive_preview/css/responsive-preview.icons-rtl.css
new file mode 100644
index 0000000..8f94e7b
--- /dev/null
+++ b/core/modules/responsive_preview/css/responsive-preview.icons-rtl.css
@@ -0,0 +1,21 @@
+/**
+ * @file
+ * RTL icon styling for responsive preview.
+ */
+
+.toolbar .bar .responsive-preview-toolbar-tab .icon-responsive-preview:before {
+  left: auto; /* LTR */
+  right: 1em;
+}
+
+/**
+ * Responsive preview controls icons.
+ */
+.responsive-preview .icon-close:before {
+  left: 8px;
+  right: auto;
+}
+.responsive-preview .icon-orientation:before {
+  left: auto;
+  right: 8px;
+}
diff --git a/core/modules/responsive_preview/css/responsive-preview.icons.css b/core/modules/responsive_preview/css/responsive-preview.icons.css
new file mode 100644
index 0000000..4cd26a3
--- /dev/null
+++ b/core/modules/responsive_preview/css/responsive-preview.icons.css
@@ -0,0 +1,76 @@
+/**
+ * @file
+ * Responsive preview icon styling.
+ */
+.responsive-preview-toolbar-tab .icon:before,
+.responsive-preview .icon:before {
+  background-attachment: scroll;
+  background-color: transparent;
+  background-image: url("../images/responsive-preview-icons.png");
+  background-repeat: no-repeat;
+  content: '';
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+.toolbar .bar .responsive-preview-toolbar-tab .icon:before {
+  width: 13px;
+}
+.responsive-preview button.icon {
+  background-color: transparent;
+  border: 0;
+  font-size: 1em;
+}
+
+/* Toolbar icon. */
+.toolbar .bar .icon.icon-responsive-preview {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
+  width: 5em;
+}
+.responsive-preview-toolbar-tab .icon.icon-responsive-preview:before {
+  background-position: center top;
+}
+.responsive-preview-toolbar-tab.open .icon-responsive-preview:before,
+.responsive-preview-toolbar-tab .icon-responsive-preview.active:before,
+.responsive-preview-toolbar-tab .icon-responsive-preview:hover:before {
+  background-position: center -22px;
+}
+.toolbar .bar .responsive-preview-toolbar-tab .icon-responsive-preview:before {
+  left: 1em; /* LTR */
+  height: 22px;
+  top: 0.6667em;
+}
+
+/**
+ * Responsive preview controls icons.
+ */
+.responsive-preview .control.icon:before {
+  height: 12px;
+  width: 12px;
+  top: 10px;
+}
+.responsive-preview .icon-close:before {
+  background-position: left -44px;
+  right: 8px; /* LTR */
+}
+.responsive-preview .icon-close:active:before,
+.responsive-preview .icon-close.active:before,
+.responsive-preview .icon-close:hover:before {
+  background-position: left -56px;
+}
+.responsive-preview .icon-orientation:before {
+  background-position: left -68px;
+  left: 8px; /* LTR */
+}
+.responsive-preview .icon-orientation:hover:before {
+  background-position: left -80px;
+}
+.responsive-preview .icon-orientation.rotated:before {
+  background-position: left -92px;
+}
+.responsive-preview .icon-orientation.rotated:hover:before {
+  background-position: left -104px;
+}
diff --git a/core/modules/responsive_preview/css/responsive-preview.theme-rtl.css b/core/modules/responsive_preview/css/responsive-preview.theme-rtl.css
index 8add01e..6cfa4f8 100644
--- a/core/modules/responsive_preview/css/responsive-preview.theme-rtl.css
+++ b/core/modules/responsive_preview/css/responsive-preview.theme-rtl.css
@@ -7,12 +7,6 @@
  * Toolbar tab.
  */
 
-/* Toolbar icon. */
-.toolbar .bar .responsive-preview-toolbar-tab .icon-responsive-preview:before {
-  left: auto;
-  right: 1em;
-}
-
 /* Toolbar tab triangle toggle. */
 .responsive-preview-toolbar-tab .trigger:after {
   left: 1em;
@@ -26,11 +20,11 @@
   left: 0.7em;
   right: auto;
 }
-
-/**
- * Preview container.
- */
-#responsive-preview-close {
-  margin-left: 0;
-  margin-right: 10px;
+.responsive-preview .control.close {
+  left: 0;
+  right: auto;
+}
+.responsive-preview .control.orientation {
+  left: auto;
+  right: 0;
 }
diff --git a/core/modules/responsive_preview/css/responsive-preview.theme.css b/core/modules/responsive_preview/css/responsive-preview.theme.css
index e0c537f..1c2adf8 100644
--- a/core/modules/responsive_preview/css/responsive-preview.theme.css
+++ b/core/modules/responsive_preview/css/responsive-preview.theme.css
@@ -6,55 +6,51 @@
 /**
  * Toolbar tab.
  */
-.responsive-preview-toolbar-tab .responsive-preview-options {
+.responsive-preview-toolbar-tab .options {
   background-color: #0f0f0f;
 }
-/* Toolbar icon. */
-.toolbar .bar .icon.icon-responsive-preview {
-  margin-left: 0;
-  margin-right: 0;
-  padding-left: 0;
-  padding-right: 0;
-  width: 5em;
-}
-.icon-responsive-preview:before {
-  background-image: url("../images/icon-responsive-preview.png");
-}
-.toolbar .bar .responsive-preview-toolbar-tab .icon-responsive-preview:before {
-  left: 1em; /* LTR */
-}
-.responsive-preview-toolbar-tab.open .icon-responsive-preview:before,
-.responsive-preview-toolbar-tab .icon-responsive-preview.active:before {
-  background-image: url("../images/icon-responsive-preview-active.png");
-}
-@media only screen and (min-width: 16.5em) {
-  .toolbar .responsive-preview-toolbar-tab.tab .icon-responsive-preview:before {
-    width: 20px;
-  }
-}
 /* Device preview options. */
-.responsive-preview-toolbar-tab .responsive-preview-options {
+.responsive-preview-toolbar-tab .options {
   box-shadow: 0 0.8em 2.5em -0.8em rgba(0, 0, 0, 0.75);
-  position: absolute;
-  white-space: nowrap;
 }
-.responsive-preview-toolbar-tab .responsive-preview-options li {
+.responsive-preview-toolbar-tab .options li {
   background-color: white;
+  padding: 0;
 }
 .responsive-preview-toolbar-tab .trigger {
+  cursor: pointer;
+  line-height: 1;
   height: 3em;
 }
+.responsive-preview-toolbar-tab .trigger:hover {
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
+}
+.responsive-preview-toolbar-tab .trigger.active,
+.responsive-preview-toolbar-tab .trigger.active:hover {
+  background-image: -webkit-linear-gradient(top, rgb(78,159,234) 0%, rgb(69,132,221) 100%);
+  background-image: linear-gradient(rgb(78,159,234) 0%,rgb(69,132,221) 100%);
+}
 .responsive-preview-toolbar-tab .trigger,
-.responsive-preview-toolbar-tab .responsive-preview-options a {
+.responsive-preview-toolbar-tab .options .device {
   padding-bottom: 1em;
   padding-top: 1em;
 }
-.toolbar .responsive-preview-toolbar-tab.tab .responsive-preview-options a {
+.responsive-preview-toolbar-tab .options .device {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 1em;
+  padding: 0.5em 1.3333em
+}
+.toolbar .responsive-preview-toolbar-tab.tab .options .device {
   color: #777;
 }
-.toolbar .responsive-preview-toolbar-tab.tab .responsive-preview-options a:hover {
+.toolbar .responsive-preview-toolbar-tab.tab .options .device:hover {
   color: black;
 }
+
 /* Toolbar tab triangle toggle. */
 .responsive-preview-toolbar-tab .trigger:after {
   border-bottom-color: transparent;
@@ -69,7 +65,7 @@
   line-height: 0;
   overflow: hidden;
   position: absolute;
-  right: 1em; /* LTR */
+  right: 1.6667em; /* LTR */
   top: 50%;
   margin-top: -0.1666em;
   width: 0;
@@ -93,49 +89,73 @@
   right: 0.7em; /* LTR */
   top: 1.25em;
 }
-.responsive-preview-toolbar-tab .trigger.active:after {
-  color: black;
+.responsive-preview-toolbar-tab:hover .trigger:after,
+.responsive-preview-toolbar-tab .trigger.active:after,
+.responsive-preview-toolbar-tab:hover .trigger.active:after {
+  color: white;
 }
-.responsive-preview-toolbar-tab .trigger.active {
-  background-image: -webkit-linear-gradient(top, rgb(78,159,234) 0%, rgb(69,132,221) 100%);
-  background-image: linear-gradient(rgb(78,159,234) 0%,rgb(69,132,221) 100%);
+.responsive-preview-toolbar-tab.open:hover .trigger:after {
+  color: black;
 }
 
 /**
  * Preview container.
  */
-#responsive-preview-container {
+.responsive-preview {
   box-shadow: 0 0 10px 0 black;
+  opacity: 0;
+  -moz-transition: all 450ms;
+  -webkit-transition: all 450ms;
+  transition: all 450ms;
 }
-#responsive-preview-container iframe {
-  box-shadow:
-    0 0 0 2px black,
-    0 0 0 3px rgba(80,80,80,1);
-  top: 10px;
-}
-#responsive-preview-close {
-  background-attachment: scroll;
-  background-color: #a0a0a0;
-  background-image: url("../images/close.png");
-  background-image: url("../images/close.png"), -webkit-linear-gradient(transparent, #787878 150%);
-  background-image: url("../images/close.png"), linear-gradient(transparent, #787878 150%);
-  background-position: center center;
-  background-repeat: no-repeat;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-  font-size: 1em;
-  height: 2.333em;
-  margin-left: 10px; /* LTR */
-  margin-top: 9px;
-  width: 2.333em;
+.responsive-preview.active {
+  opacity: 1;
 }
-#responsive-preview-close:hover {
-  background-image: url("../images/close.png");
-}
-.responsive-preview-modal-background {
+.responsive-preview .modal-background {
   background-color: black;
   background-color: rgba(0,0,0,0.92);
   background-image: -webkit-linear-gradient(left, black,rgb(20,20,20) 15%, rgb(45,45,45) 40%, rgb(45,45,45) 60%, rgb(20,20,20) 85%, black 100%);
   background-image: linear-gradient(left, black, rgb(20,20,20) 15%, rgb(45,45,45) 40%, rgb(45,45,45) 60%, rgb(20,20,20) 85%, black 100%);
 }
+
+/**
+ * Responsive preview control placement.
+ */
+.responsive-preview .control {
+  cursor: pointer;
+  height: 40px;
+  position: absolute;
+  top: 0;
+  width: 40px;
+}
+.responsive-preview .control.close {
+  right: 0; /* LTR */
+}
+.responsive-preview .control.orientation {
+  left: 0; /* LTR */
+}
+
+/**
+ * Responsive preview frame.
+ */
+.responsive-preview .frame-container {
+  background-color: #343434;
+  border-radius: 20px;
+  box-shadow:
+    0 0 0px 1px #404040,
+    2px 2px 0 0px black;
+  -webkit-transition: all 150ms ease-out;
+  -moz-transition: all 150ms ease-out;
+  -o-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+  top: 1em;
+}
+.responsive-preview .frame-container iframe {
+  box-shadow:
+    0 0 0 2px black,
+    0 0 0 3px #404040;
+  -webkit-transition: all 150ms ease-out;
+  -moz-transition: all 150ms ease-out;
+  -o-transition: all 150ms ease-out;
+  transition: all 150ms ease-out;
+}
diff --git a/core/modules/responsive_preview/images/close.png b/core/modules/responsive_preview/images/close.png
deleted file mode 100644
index 538518e..0000000
--- a/core/modules/responsive_preview/images/close.png
+++ /dev/null
@@ -1,3 +0,0 @@
-�PNG
-
-
IHDR��7�tEXtSoftwareAdobe ImageReadyq�e<
�IDAT(Se�KKBA��x_i�����W�j�OhBR�Eࣝ{�E. ��Bp�����E�Ľ�u��y!h����sV�Y�kiֶ^�pđ#�^�j[��RPZa�C̄>�5���V��d�r2Q�\��m�F�*�ToBK��گ����tJ���r�?w�ϋ�||�P�q�kU�ݞ,��/s�_��n�^�z�({�!���-�s�SS3�oRl��Y�g�E/���S�9d�,��H+_ϲ5}PrgY��{S�T⫑V k{�,p2�D*k�fj�5�Nd2Z��>%�o=�$4���֘�5�F�h��h��fPnoҗ�1�_M|6]�!���m�f�-!K��}�H2N|��S����\�*6B��Q1�	#�(��&�I��Nʕr�;S�����d	�#�Z� ����IEND�B`�
\ No newline at end of file
diff --git a/core/modules/responsive_preview/images/icon-responsive-preview-active.png b/core/modules/responsive_preview/images/icon-responsive-preview-active.png
deleted file mode 100644
index f6e8a16..0000000
--- a/core/modules/responsive_preview/images/icon-responsive-preview-active.png
+++ /dev/null
@@ -1,3 +0,0 @@
-�PNG
-
-
IHDR
�$cIDAT8�c��������
L@��H��L0#!W���?&���m"�m�����р0?�|��?!��	
?bG(�!�)d�F,���~(�.���t�e��IEND�B`�
\ No newline at end of file
diff --git a/core/modules/responsive_preview/images/icon-responsive-preview.png b/core/modules/responsive_preview/images/icon-responsive-preview.png
deleted file mode 100644
index 3e22cb8..0000000
--- a/core/modules/responsive_preview/images/icon-responsive-preview.png
+++ /dev/null
@@ -1,4 +0,0 @@
-�PNG
-
-
IHDR
�$pIDAT8�cZ�x� �O�����? f 
�3�8���0L-\1����� L��%ϦQM��߿@�S;������#�Ɛ��D
-iڈEB��Cit����uJq4QIEND�B`�
\ No newline at end of file
diff --git a/core/modules/responsive_preview/images/responsive-preview-icons.png b/core/modules/responsive_preview/images/responsive-preview-icons.png
new file mode 100644
index 0000000..167847d
--- /dev/null
+++ b/core/modules/responsive_preview/images/responsive-preview-icons.png
@@ -0,0 +1,7 @@
+�PNG
+
+
IHDR
v~tEXtSoftwareAdobe ImageReadyq�e<@IDATx��W͎�0v�H�>
+8���w��O����7�ʩ�UO=T��\�	v�
���©�D@�gA�� ;�'qؖ�h-�����yƓ϶�n�{���_��n�K�r���[�V3�z7�M�
H������� ��8��sB��n�A����ʠF����0"
+���σ�T�A}�����z~��3��O==��L��ȽS���@��O/��c>��c_t:5B��b�<��m}�R��
�+u�]G��<���N�b�;��#��v&��iJ�6
`}I��E�`j���q_�R[���|&	�k��j�j��ףNÔZ�y
�EEoD׉?�ÁOi�<����'�2�	�o^o�~,�o����,�-�C���`K��
H1�E�3�b]�5LG��=7����e�?�{�e8:`9��ZL���������6�|�ท�B����s��e�Ћ�\I˜��L}�5�
��+���S+�{�1�tJߠ�&�/T"˵`�ƒj˔��|����:��(a7�������"���z��L&o���l�e�\��
+�'�+!T�qĨ[	�I�� �HqWl�� �a�ZM���GL�${�@
���;��!t�a8*eЈ&;�f�9qj�'�;!. ^�p���/��,u'���*�
+L��%�R��J�?7N��LI�D�L��!�⦧�JQ�{�*�X:�}�����J\�C��:�?�
�!�RX�X� R.y�7.7�N�2�*�H	�Q%5(A�ԠU:%���F��4����s�����(��������נ{Ki#[b}lF@H����}�*.��
+����C��nw�)�h+p}�PIEND�B`�
\ No newline at end of file
diff --git a/core/modules/responsive_preview/js/responsive-preview.js b/core/modules/responsive_preview/js/responsive-preview.js
index 266e568..91d0957 100644
--- a/core/modules/responsive_preview/js/responsive-preview.js
+++ b/core/modules/responsive_preview/js/responsive-preview.js
@@ -11,21 +11,21 @@
  * Attaches behaviors to the toolbar tab and preview containers.
  */
 Drupal.behaviors.responsivePreview = {
-  attach: function (context, settings) {
-    settings.responsivePreview = settings.responsivePreview || {};
+  attach: function (context) {
+    var defaults = this.defaults;
     // once() returns a jQuery set. It will be empty if no unprocessed
     // elements are found. window and window.parent are equivalent unless the
     // Drupal page is itself wrapped in an iframe.
     var $body = $(window.parent.document.body).once('responsive-preview');
 
     if ($body.length) {
+      var options = $.extend(defaults, drupalSettings.responsivePreview || {});
       // If this window is itself in an iframe it must be marked as processed.
       // Its parent window will have been processed above.
       // When attach() is called again for the preview iframe, it will check
       // its parent window and find it has been processed. In most cases, the
       // following code will have no effect.
       $(window.document.body).once('responsive-preview');
-      var gutter = settings.responsivePreview.gutter || 60;
 
       var envModel = new Drupal.responsivePreview.models.EnvironmentModel({
         dir: document.getElementsByTagName('html')[0].getAttribute('dir')
@@ -39,16 +39,21 @@ Drupal.behaviors.responsivePreview = {
         model: tabModel,
         envModel: envModel,
         // Gutter size around preview frame.
-        gutter: gutter
+        gutter: options.gutter,
+        // Preview device frame width.
+        bleed: options.bleed
       });
       // The preview container view.
       var previewView = new Drupal.responsivePreview.views.PreviewView({
-        el: Drupal.theme('layoutContainer'),
+        el: Drupal.theme('responsivePreviewContainer'),
         model: previewModel,
         tabModel: tabModel,
         envModel: envModel,
         // Gutter size around preview frame.
-        gutter: gutter
+        gutter: options.gutter,
+        // Preview device frame width.
+        bleed: options.bleed,
+        strings: options.strings
       });
 
       var setViewportWidth = function() {
@@ -78,6 +83,17 @@ Drupal.behaviors.responsivePreview = {
         $frameBody.get(0).className += ' responsive-preview-frame';
       }
     }
+  },
+  defaults: {
+    gutter: 60,
+    // The width of the device border around the iframe. This value is critical
+    // to determine the size and placement of the preview iframe container,
+    // therefore it must be defined here instead of in the CSS file.
+    bleed: 25,
+    strings: {
+      close: Drupal.t('close'),
+      orientation: Drupal.t('Change orientation')
+    }
   }
 };
 
@@ -124,7 +140,9 @@ Drupal.responsivePreview.models.TabStateModel = Backbone.Model.extend({
 Drupal.responsivePreview.models.PreviewStateModel = Backbone.Model.extend({
   defaults: {
     // Indicates whether the preview iframe has been built.
-    isBuilt: false
+    isBuilt: false,
+    // Indicates whether the device is portrait (false) or landscape (true).
+    isRotated: false
   }
 });
 
@@ -136,14 +154,15 @@ Drupal.responsivePreview.views.TabView = Backbone.View.extend({
   events: {
     'click': 'toggleDeviceList',
     'mouseleave': 'toggleDeviceList',
-    'click .responsive-preview-device': 'updateDimensions'
+    'click .device': 'updateDimensions'
   },
 
   /**
-   * Implements Backbone Views' initialize().
+   * Implements Backbone.View.prototype.initialize().
    */
   initialize: function () {
     this.gutter = this.options.gutter;
+    this.bleed = this.options.bleed;
     this.envModel = this.options.envModel;
 
     this.model.on('change:isActive change:isDeviceListOpen change:fittingDeviceCount', this.render, this);
@@ -152,7 +171,7 @@ Drupal.responsivePreview.views.TabView = Backbone.View.extend({
   },
 
   /**
-   * Implements Backbone Views' render().
+   * Implements Backbone.View.prototype.render().
    */
   render: function () {
     var isActive = this.model.get('isActive');
@@ -203,7 +222,7 @@ Drupal.responsivePreview.views.TabView = Backbone.View.extend({
     var dir = this.envModel.get('dir');
     var edge = (dir === 'rtl') ? 'left' : 'right';
     this.$el
-      .find('.responsive-preview-options')
+      .find('.item-list')
       .position({
         'my': edge +' top',
         'at': edge + ' bottom',
@@ -217,15 +236,17 @@ Drupal.responsivePreview.views.TabView = Backbone.View.extend({
    */
   updateDeviceList: function () {
     var gutter = this.gutter;
+    var bleed = this.bleed;
     var viewportWidth = this.envModel.get('viewportWidth');
-    var $devices = this.$el.find('.responsive-preview-device');
+    var $devices = this.$el.find('.device');
+
     // Remove devices whose previews won't fit the current viewport.
     $devices.each(function (index, element) {
       var $this = $(this);
       var width = parseInt($this.data('responsive-preview-width'), 10);
       var dppx = parseFloat($this.data('responsive-preview-dppx'), 10);
       var previewWidth = width / dppx;
-      var fits = ((previewWidth + (gutter * 2)) <= viewportWidth);
+      var fits = ((previewWidth + (gutter * 2) + (bleed * 2)) <= viewportWidth);
       $this.parent('li').toggleClass('element-hidden', !fits);
     });
     // Set the number of devices that fit the current viewport.
@@ -260,17 +281,22 @@ Drupal.responsivePreview.views.TabView = Backbone.View.extend({
 Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({
 
   events: {
-    'click #responsive-preview-close': 'onClose'
+    'click #responsive-preview-close': 'onClose',
+    'click #responsive-preview-orientation': 'onRotate'
   },
 
   /**
-   * Implements Backbone Views' initialize().
+   * Implements Backbone.View.prototype.initialize().
    */
   initialize: function () {
     this.gutter = this.options.gutter;
+    this.bleed = this.options.bleed;
+    this.strings = this.options.strings;
     this.tabModel = this.options.tabModel;
     this.envModel = this.options.envModel;
 
+    this.model.on('change:isRotated', this.render, this);
+
     this.tabModel.on('change:isActive change:dimensions', this.render, this);
 
     // Recalculate the size of the preview container when the window resizes.
@@ -278,25 +304,29 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({
   },
 
   /**
-   * Implements Backbone Views' render().
+   * Implements Backbone.View.prototype.render().
    */
   render: function () {
     var isActive = this.tabModel.get('isActive');
 
-    // Render the state of the preview.
-    this.$el.toggleClass('active', isActive);
+    // Build the preview if it doesn't exist.
+    if (isActive && !this.model.get('isBuilt')) {
+      this._build();
+    }
 
     // Early-return if inactive.
-    if (!isActive) {
-      return this;
+    if (isActive) {
+      // Refresh the preview.
+      this._refresh();
     }
 
-    // Build the preview if it doesn't exist.
-    if (!this.model.get('isBuilt')) {
-      this._build();
-    }
-    // Refresh the preview.
-    this._refresh();
+    // Render the state of the preview.
+    var that = this;
+    // Wrap the call in a setTimeout so that it invokes in the next compute
+    // cycle, causing the CSS animations to render in the first pass.
+    window.setTimeout(function () {
+      that.$el.toggleClass('active', isActive);
+    }, 0);
 
     return this;
   },
@@ -307,30 +337,56 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({
    * @param Object event
    *   A jQuery event object.
    */
-  onClose: function () {
+  onClose: function (event) {
     this.tabModel.set('isActive', false);
   },
 
   /**
+   * Responds to rotation button presses.
+   *
+   * @param Object event
+   *   A jQuery event object.
+   */
+  onRotate: function (event) {
+    this.model.set('isRotated', !this.model.get('isRotated'));
+  },
+
+  /**
    * Builds the preview iframe.
    */
   _build: function () {
-    this.$el.append(Drupal.theme('layoutClose'));
+    var $frameContainer = $(Drupal.theme('responsivePreviewFrameContainer'))
+      .find('#responsive-preview-close span')
+      .text(this.strings.close)
+      .end()
+      .find('#responsive-preview-orientation span')
+      .text(this.strings.orientation)
+      .end()
+      // The padding around the frame must be known in order to position it
+      // correctly, so the style property is defined in JavaScript rather than
+      // CSS.
+      .css('padding', this.bleed);
     // Attach the iframe that will hold the preview.
-    var $frame = $(Drupal.theme('layoutFrame'))
-      .attr('data-loading', true)
-      .appendTo(this.$el);
-    // Displace the top of the container.
+    var $frame = $(Drupal.theme('responsivePreviewFrame'))
+      .attr({
+        'data-loading': true,
+        src: drupalSettings.basePath + Drupal.encodePath(drupalSettings.currentPath),
+        width: '100%',
+        height: '100%'
+      })
+      // Load the current page URI into the preview iframe.
+      .on('load.responsivePreview', $.proxy(this._refresh, this))
+      // Add the frame to the preview container.
+      .appendTo($frameContainer);
+    // Adjust the placement of the preview container and insert it into the DOM.
     this.$el
       .css({ top: this._getDisplacement('top') })
+      // Displace the top of the container.
       .attr('data-offset-top', this._getDisplacement('top'))
+      // Apend the frame container.
+      .append($frameContainer)
       // Append the container to the body to initialize the iframe document.
       .appendTo('body');
-    // The contentDocument property is not supported in IE until IE8.
-    var iframeDocument = $frame[0].contentDocument || $frame[0].contentWindow.document;
-    // Load the current page URI into the preview iframe.
-    $frame.on('load.responsivePreview', $.proxy(this._refresh, this));
-    iframeDocument.location.href = drupalSettings.basePath + Drupal.encodePath(drupalSettings.currentPath);
     // Mark the preview element processed.
     this.model.set('isBuilt', true);
   },
@@ -339,7 +395,9 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({
    * Refreshes the preview based on the current state (device & viewport width).
    */
   _refresh: function () {
-    var $frame = this.$el.find('#responsive-preview-frame');
+    var isRotated = this.model.get('isRotated');
+    var $container = this.$el.find('#responsive-preview-frame-container');
+    var $frame = $container.find('> iframe');
 
     // Get the static state.
     var edge = (this.envModel.get('dir') === 'rtl') ? 'right' : 'left';
@@ -347,38 +405,42 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({
 
     // Get current (dynamic) state.
     var dimensions = this.tabModel.get('dimensions');
+    var isRotated = this.model.get('isRotated');
     var viewportWidth = this.envModel.get('viewportWidth');
 
-    // Calculate preview width & height.
-    var width = dimensions.width / dimensions.dppx;
-    var height = dimensions.height / dimensions.dppx;
+    // Calculate preview width & height. If the preview is rotated, swap width
+    // and height.
+    var width = dimensions[(isRotated) ? 'height' : 'width'] / dimensions.dppx;
+    var height = dimensions[(isRotated) ? 'width' : 'height'] / dimensions.dppx;
+
+    // Get the container padding and border width for the left and right.
+    var bleed = this.bleed;
+    var spread = width + (bleed * 2);
 
     // Calculate gutter.
-    var gutterPercent = (1 - (width / viewportWidth)) / 2;
+    var gutterPercent = (1 - (spread / viewportWidth)) / 2;
     var gutter = gutterPercent * viewportWidth;
     gutter = (gutter < minGutter) ? minGutter : gutter;
 
     // The preview width plus gutters must fit within the viewport width.
-    width = (viewportWidth - (gutter * 2) < width) ? viewportWidth - (gutter * 2) : width;
+    width = (viewportWidth - (gutter * 2) < spread) ? viewportWidth - (gutter * 2) - (bleed * 2) : width;
+
+    // Updated the state of the rotated icon.
+    this.$el.find('.control.orientation').toggleClass('rotated', isRotated);
 
     // Resize & reposition the iframe.
     var position = {};
     position[edge] = gutter; // Depends on text direction.
     $frame
-      .stop(true, true)
-      .animate({
+      .css({
         width: width,
         height: height
-      }, 'fast')
+      });
+    $container
       .css(position);
 
     // Scale if not responsive.
     this._scaleIfNotResponsive();
-
-    // Position the close button.
-    this.$el
-      .find('#responsive-preview-close')
-      .css(edge, gutter + width);
   },
 
   /**
@@ -553,8 +615,8 @@ $.extend(Drupal.theme, {
    * @return
    *   The corresponding HTML.
    */
-  layoutContainer: function () {
-    return '<div id="responsive-preview-container"><div class="responsive-preview-modal-background"></div></div>';
+  responsivePreviewContainer: function () {
+    return '<div id="responsive-preview" class="responsive-preview"><div class="modal-background"></div></div>';
   },
 
   /**
@@ -563,8 +625,11 @@ $.extend(Drupal.theme, {
    * @return
    *   The corresponding HTML.
    */
-  layoutClose: function () {
-    return '<button id="responsive-preview-close" role="button" aria-pressed="false"><span class="element-invisible">' + Drupal.t('Close') + '</span></button>';
+  responsivePreviewFrameContainer: function () {
+    return '<div id="responsive-preview-frame-container" class="frame-container">'
+      + '<button id="responsive-preview-close" role="button" class="icon icon-close control close" aria-pressed="false"><span class="element-invisible"></span></button>'
+      + '<button id="responsive-preview-orientation" role="button" class="icon icon-orientation control orientation" aria-pressed="false"><span class="element-invisible"></span></button>'
+      + '</div>';
   },
 
   /**
@@ -573,7 +638,7 @@ $.extend(Drupal.theme, {
    * @return
    *   The corresponding HTML.
    */
-  layoutFrame: function (url) {
+  responsivePreviewFrame: function (url) {
     return '<iframe id="responsive-preview-frame" frameborder="0" scrolling="auto" allowtransparency="true"></iframe>';
   }
 });
diff --git a/core/modules/responsive_preview/responsive_preview.module b/core/modules/responsive_preview/responsive_preview.module
index 23729d5..6eb095a 100644
--- a/core/modules/responsive_preview/responsive_preview.module
+++ b/core/modules/responsive_preview/responsive_preview.module
@@ -25,19 +25,16 @@ function responsive_preview_help($path, $arg) {
  * Returns a list of devices and their properties from configuration.
  */
 function responsive_preview_get_devices_list() {
-  $devices = config('responsive_preview.devices')->get('devices');
+  $devices = config('responsive_preview.devices')->get();
 
   $links = array();
   foreach($devices as $name => $info) {
     $links[$name] = array(
-      'title' => $info['label'],
-      'href' => '',
-      'options' => array(
-        'fragment' => '!',
-        'external' => TRUE,
-      ),
-      'attributes' => array(
-        'class' => array('responsive-preview-device'),
+      '#theme' => 'html_tag',
+      '#tag' => 'button',
+      '#value' => $info['label'],
+      '#attributes' => array(
+        'class' => array('device'),
         'data-responsive-preview-width' => ($info['dimensions']['width']) ? $info['dimensions']['width'] : '',
         'data-responsive-preview-height' => ($info['dimensions']['height']) ? $info['dimensions']['height'] : '',
         'data-responsive-preview-dppx' => ($info['dimensions']['dppx']) ? $info['dimensions']['dppx'] : '1',
@@ -69,16 +66,15 @@ function responsive_preview_toolbar() {
         '#value_prefix' => '<span class="element-invisible">',
         '#value_suffix' => '</span>',
         '#attributes' => array(
-          'id' => 'responsive-preview',
           'title' => t('Preview page layout'),
           'class' => array('icon', 'icon-responsive-preview', 'trigger'),
         ),
       ),
       'device_options' => array(
-        '#theme' => 'links',
-        '#links' => responsive_preview_get_devices_list(),
+        '#theme' => 'item_list',
+        '#items' => responsive_preview_get_devices_list(),
         '#attributes' => array(
-          'class' => array('responsive-preview-options'),
+          'class' => array('options'),
         ),
       ),
     ),
@@ -114,6 +110,7 @@ function responsive_preview_library_info() {
     'css' => array(
       $path . '/css/responsive-preview.base.css',
       $path . '/css/responsive-preview.theme.css',
+      $path . '/css/responsive-preview.icons.css',
     ),
     'js' => array(
       $path . '/js/responsive-preview.js' => $options,