diff --git a/__tests__/src/components/CompanionArea.test.js b/__tests__/src/components/CompanionArea.test.js
index 963e962d48870e4a3ddb5a16321158a02ec34080..87c76cc5ad45a58a94b7a556fabfc674a5ae7a8c 100644
--- a/__tests__/src/components/CompanionArea.test.js
+++ b/__tests__/src/components/CompanionArea.test.js
@@ -10,6 +10,7 @@ import CompanionWindowFactory from '../../../src/containers/CompanionWindowFacto
 function createWrapper(props) {
   return shallow(
     <CompanionArea
+      classes={{ horizontal: 'horizontal' }}
       windowId="abc123"
       position="right"
       companionWindows={[
@@ -27,6 +28,11 @@ describe('CompanionArea', () => {
     expect(wrapper.find(CompanionWindowFactory).length).toBe(2);
   });
 
+  it('should add the appropriate classes when the companion area fills the full width', () => {
+    const wrapper = createWrapper({ position: 'bottom' });
+    expect(wrapper.find('div.horizontal').length).toBe(2);
+  });
+
   it('should pass correct props to the <CompanionWindow> components', () => {
     const wrapper = createWrapper();
     const props = wrapper.find(CompanionWindowFactory).at(0).props();
diff --git a/__tests__/src/components/CompanionWindow.test.js b/__tests__/src/components/CompanionWindow.test.js
index 598579958ac2f9437c8c780082ea390fc7efb9d1..9c8896ccd93e9ac564c92d3a2d163c21093ebef2 100644
--- a/__tests__/src/components/CompanionWindow.test.js
+++ b/__tests__/src/components/CompanionWindow.test.js
@@ -8,7 +8,7 @@ function createWrapper(props) {
     <CompanionWindow
       id="abc123"
       windowId="x"
-      classes={{}}
+      classes={{ horizontal: 'horizontal', vertical: 'vertical' }}
       companionWindow={{}}
       position="right"
       {...props}
@@ -27,9 +27,9 @@ describe('CompanionWindow', () => {
         position: 'left',
       });
 
-      const closeButton = companionWindow.find('WithStyles(IconButton)[aria-label="openInCompanionWindow"]');
+      const button = companionWindow.find('WithStyles(IconButton)[aria-label="openInCompanionWindow"]');
 
-      closeButton.simulate('click');
+      button.simulate('click');
       expect(updateCompanionWindow).toHaveBeenCalledTimes(1);
       expect(updateCompanionWindow).toHaveBeenCalledWith('x', 'abc123', { position: 'right' });
     });
@@ -48,4 +48,28 @@ describe('CompanionWindow', () => {
       expect(removeCompanionWindowEvent).toHaveBeenCalledWith('x', 'abc123');
     });
   });
+
+  describe('when the companion window is on the right', () => {
+    const updateCompanionWindow = jest.fn();
+    companionWindow = createWrapper({ updateCompanionWindow, position: 'right' });
+
+    expect(companionWindow.find('WithStyles(Paper).vertical').length).toBe(1);
+
+    const button = companionWindow.find('WithStyles(IconButton)[aria-label="openInCompanionWindow"]');
+    button.simulate('click');
+    expect(updateCompanionWindow).toHaveBeenCalledTimes(1);
+    expect(updateCompanionWindow).toHaveBeenCalledWith('x', 'abc123', { position: 'bottom' });
+  });
+
+  describe('when the companion window is on the bottom', () => {
+    const updateCompanionWindow = jest.fn();
+    companionWindow = createWrapper({ updateCompanionWindow, position: 'bottom' });
+
+    expect(companionWindow.find('WithStyles(Paper).horizontal').length).toBe(1);
+
+    const button = companionWindow.find('WithStyles(IconButton)[aria-label="openInCompanionWindow"]');
+    button.simulate('click');
+    expect(updateCompanionWindow).toHaveBeenCalledTimes(1);
+    expect(updateCompanionWindow).toHaveBeenCalledWith('x', 'abc123', { position: 'right' });
+  });
 });
diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js
index 4816aebb070b0fe03b8c12006f9bdc4be24993b4..b1e6f5efdec084f98a9f0e683f128c7092263ec5 100644
--- a/src/components/CompanionArea.js
+++ b/src/components/CompanionArea.js
@@ -8,6 +8,15 @@ import ns from '../config/css-ns';
 
 /** */
 export class CompanionArea extends Component {
+  /** */
+  areaLayoutClass() {
+    const {
+      classes, position,
+    } = this.props;
+
+    return position === 'bottom' ? classes.horizontal : null;
+  }
+
   /** */
   render() {
     const {
@@ -16,7 +25,7 @@ export class CompanionArea extends Component {
     } = this.props;
 
     return (
-      <div className={classes.root} style={{ minHeight: 0, display: 'flex' }}>
+      <div className={[classes.root, this.areaLayoutClass()].join(' ')}>
         {
           setCompanionAreaOpen && position === 'left' && sideBarOpen && companionWindows.length > 0
           && (
@@ -28,7 +37,7 @@ export class CompanionArea extends Component {
             </IconButton>
           )
         }
-        <div className={ns('companion-windows')} style={{ display: companionAreaOpen && (position !== 'left' || sideBarOpen) ? 'flex' : 'none' }}>
+        <div className={[ns('companion-windows'), this.areaLayoutClass()].join(' ')} style={{ display: companionAreaOpen && (position !== 'left' || sideBarOpen) ? 'flex' : 'none' }}>
           {
             companionWindows.map(cw => (
               <CompanionWindowFactory id={cw.id} key={cw.id} windowId={windowId} />
diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js
index d33dea04498fc2aa300b0d707478e01f01f0b320..2615be8ed46326fffa644f43f205af8f933bb3b3 100644
--- a/src/components/CompanionWindow.js
+++ b/src/components/CompanionWindow.js
@@ -6,6 +6,8 @@ import OpenInNewIcon from '@material-ui/icons/OpenInNewSharp';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Toolbar from '@material-ui/core/Toolbar';
+import ThumbnailNavigationBottomIcon from './icons/ThumbnailNavigationBottomIcon';
+import ThumbnailNavigationRightIcon from './icons/ThumbnailNavigationRightIcon';
 import ns from '../config/css-ns';
 
 /**
@@ -24,7 +26,7 @@ export class CompanionWindow extends Component {
 
     return (
       <Paper
-        className={[classes.root, ns(`companion-window-${position}`), paperClassName].join(' ')}
+        className={[classes.root, position === 'bottom' ? classes.horizontal : classes.vertical, ns(`companion-window-${position}`), paperClassName].join(' ')}
         style={{
           display: isDisplayed ? null : 'none',
           order: position === 'left' ? -1 : null,
@@ -51,13 +53,26 @@ export class CompanionWindow extends Component {
                   </>
                 )
               : (
-                <IconButton
-                  aria-label={t('closeCompanionWindow')}
-                  className={classes.closeButton}
-                  onClick={() => { onCloseClick(windowId, id); }}
-                >
-                  <CloseIcon />
-                </IconButton>
+                <>
+                  {
+                    updateCompanionWindow && (
+                      <IconButton
+                        className={classes.positionButton}
+                        aria-label={t('openInCompanionWindow')}
+                        onClick={() => { updateCompanionWindow(windowId, id, { position: position === 'bottom' ? 'right' : 'bottom' }); }}
+                      >
+                        { position === 'bottom' ? <ThumbnailNavigationRightIcon /> : <ThumbnailNavigationBottomIcon /> }
+                      </IconButton>
+                    )
+                  }
+                  <IconButton
+                    aria-label={t('closeCompanionWindow')}
+                    className={classes.closeButton}
+                    onClick={() => { onCloseClick(windowId, id); }}
+                  >
+                    <CloseIcon />
+                  </IconButton>
+                </>
               )
           }
         </Toolbar>
diff --git a/src/containers/CompanionArea.js b/src/containers/CompanionArea.js
index bbd75319723040f0b98a8fc0274f3f2b7f08e725..22095d65e58bec600b6d08198841eb469fe08022 100644
--- a/src/containers/CompanionArea.js
+++ b/src/containers/CompanionArea.js
@@ -21,6 +21,11 @@ const mapDispatchToProps = ({
 const styles = theme => ({
   root: {
     position: 'relative',
+    minHeight: 0,
+    display: 'flex',
+  },
+  horizontal: {
+    width: '100%',
   },
   toggle: {
     position: 'absolute',
diff --git a/src/containers/CompanionWindow.js b/src/containers/CompanionWindow.js
index f1600fa0c6e0b1c10acef5a8d915a09772c1f0c8..e2a9615f679cdca7e66489189d21fd19dee07b31 100644
--- a/src/containers/CompanionWindow.js
+++ b/src/containers/CompanionWindow.js
@@ -45,10 +45,19 @@ const styles = theme => ({
   },
   root: {
     display: 'flex',
-    flexDirection: 'column',
     minHeight: 0,
-    width: '200px',
     boxShadow: 'none',
+    flexDirection: 'column',
+  },
+  horizontal: {
+    height: '200px',
+    width: '100%',
+  },
+  vertical: {
+    width: '200px',
+  },
+  positionButton: {
+    order: -100,
   },
   content: {
     ...theme.mixins.gutters(),
diff --git a/src/containers/Window.js b/src/containers/Window.js
index d124e12abed3b6a319fdd79e2a0889f2243fff49..e1bc823ed0c4ba6d7ad1130ac1e55892ad469444 100644
--- a/src/containers/Window.js
+++ b/src/containers/Window.js
@@ -59,6 +59,7 @@ const styles = theme => ({
     display: 'flex',
     flex: '0',
     minHeight: 0,
+    flexBasis: 'auto',
   },
   thumbnailArea: {
     backgroundColor: theme.palette.primary.dark,