diff --git a/README.md b/README.md
index 37da25140..1d40e656a 100644
--- a/README.md
+++ b/README.md
@@ -279,12 +279,13 @@ You can toggle the presenter or overview mode by pressing respectively `alt+p` a
 | Alt/Option + P  | Toggle Presenter Mode          |
 | Alt/Option + T  | Toggle Timer in Presenter Mode |
 | Alt/Option + A  | Start autoplay (if enabled)    |
+| Alt/Option + F  | Toggle Fullscreen Mode         |
 
 <a name="fullscreen"></a>
 
 ## Fullscreen
 
-Fullscreen can be toggled via browser options, or by hovering over the bottom right corner of your window until the fullscreen icon appears and clicking it.
+Fullscreen can be toggled via browser options, <kbd>Alt/Option</kbd> + <kbd>F</kbd>, or by pressing the button in the bottom right corner of your window.
 
 <a name="pdf-export"></a>
 
@@ -484,6 +485,7 @@ The Deck tag is the root level tag for your presentation. It supports the follow
 | onStateChange           | PropTypes.func    | Called whenever a new slide becomes visible with the arguments `(previousState, nextState)` where state refers to the outgoing and incoming `<Slide />`'s `state` props, respectively. The default implementation attaches the current state as a class to the document root. | see description |
 | history                 | PropTypes.object  | Accepts custom configuration for [history](https://github.com/ReactTraining/history).                                                                                                                                                                                         |                 |
 | progress                | PropTypes.string  | Accepts `pacman`, `bar`, `number` or `none`. To override the color, change the 'quaternary' color in the theme.                                                                                                                                                               | `pacman`        |
+| showFullscreenControl   | PropTypes.bool    | Show the fullscreen control button in bottom right of the screen.                                                                                                                                                                                                             | `true`          |
 | theme                   | PropTypes.object  | Accepts a theme object for styling your presentation.                                                                                                                                                                                                                         |                 |
 | transition              | PropTypes.array   | Accepts `slide`, `zoom`, `fade` or `spin`, and can be combined. Sets global slide transitions. **Note: If you use the 'scale' transition, fitted text won't work in Safari.**                                                                                                 |                 |
 | transitionDuration      | PropTypes.number  | Accepts integer value in milliseconds for global transition duration.                                                                                                                                                                                                         | `500`           |
diff --git a/index.d.ts b/index.d.ts
index 390b87ac1..b5cf0bf67 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -160,6 +160,7 @@ declare module 'spectacle' {
     controls?: boolean;
     globalStyles?: boolean;
     history?: any; // Needs a type, see https://github.com/ReactTraining/history
+    showFullscreenControl?: boolean;
     onStateChange?: (previousState?: string, nextState?: string) => void;
     progress?: progressType;
     theme?: Theme;
diff --git a/src/components/__snapshots__/component-playground.test.js.snap b/src/components/__snapshots__/component-playground.test.js.snap
index 50a063cd5..a3c7cf3c4 100644
--- a/src/components/__snapshots__/component-playground.test.js.snap
+++ b/src/components/__snapshots__/component-playground.test.js.snap
@@ -21,14 +21,10 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
         class="css-1a7vuu6 ev51h780"
       >
         <svg
-          viewBox="0 0 24 24"
+          viewBox="0 0 512 512"
         >
           <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-          <path
-            d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+            d="M64 371.2h76.795V448H192V320H64v51.2zm76.795-230.4H64V192h128V64h-51.205v76.8zM320 448h51.2v-76.8H448V320H320v128zm51.2-307.2V64H320v128h128v-51.2h-76.8z"
             fill="currentColor"
           />
         </svg>
@@ -557,14 +553,10 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
         class="css-1a7vuu6 ev51h780"
       >
         <svg
-          viewBox="0 0 24 24"
+          viewBox="0 0 512 512"
         >
           <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-          <path
-            d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+            d="M64 371.2h76.795V448H192V320H64v51.2zm76.795-230.4H64V192h128V64h-51.205v76.8zM320 448h51.2v-76.8H448V320H320v128zm51.2-307.2V64H320v128h128v-51.2h-76.8z"
             fill="currentColor"
           />
         </svg>
@@ -1093,14 +1085,10 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
         class="css-1a7vuu6 ev51h780"
       >
         <svg
-          viewBox="0 0 24 24"
+          viewBox="0 0 512 512"
         >
           <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-          <path
-            d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+            d="M64 371.2h76.795V448H192V320H64v51.2zm76.795-230.4H64V192h128V64h-51.205v76.8zM320 448h51.2v-76.8H448V320H320v128zm51.2-307.2V64H320v128h128v-51.2h-76.8z"
             fill="currentColor"
           />
         </svg>
@@ -1629,14 +1617,10 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
         class="css-1a7vuu6 ev51h780"
       >
         <svg
-          viewBox="0 0 24 24"
+          viewBox="0 0 512 512"
         >
           <path
-            d="M0 0h24v24H0z"
-            fill="none"
-          />
-          <path
-            d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+            d="M64 371.2h76.795V448H192V320H64v51.2zm76.795-230.4H64V192h128V64h-51.205v76.8zM320 448h51.2v-76.8H448V320H320v128zm51.2-307.2V64H320v128h128v-51.2h-76.8z"
             fill="currentColor"
           />
         </svg>
diff --git a/src/components/__snapshots__/fullscreen.test.js.snap b/src/components/__snapshots__/fullscreen.test.js.snap
index 967116891..eaccf3114 100644
--- a/src/components/__snapshots__/fullscreen.test.js.snap
+++ b/src/components/__snapshots__/fullscreen.test.js.snap
@@ -1,40 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Fullscreen /> should render correctly. 1`] = `
-<Fullscreen>
+<Fullscreen
+  onClick={[Function]}
+>
   <Styled(FullscreenButton)
+    isFullscreen={false}
     onClick={[Function]}
     styles={undefined}
-    viewBox="0 0 512 512"
   >
     <FullscreenButton
-      className="css-12n5ud e4v3eea0"
+      className="css-12w3q3u e4v3eea0"
+      isFullscreen={false}
       onClick={[Function]}
       styles={undefined}
-      viewBox="0 0 512 512"
     >
       <Styled(button)
         aria-label="Toggle full screen"
-        className="css-12n5ud e4v3eea0"
+        className="css-12w3q3u e4v3eea0"
         onClick={[Function]}
         styles={undefined}
-        viewBox="0 0 512 512"
       >
         <button
           aria-label="Toggle full screen"
-          className="e4v3eea0 css-1hv29sw ev51h780"
+          className="e4v3eea0 css-11lfetj ev51h780"
           onClick={[Function]}
-          viewBox="0 0 512 512"
         >
           <svg
-            viewBox="0 0 24 24"
+            viewBox="0 0 512 512"
           >
             <path
-              d="M0 0h24v24H0z"
-              fill="none"
-            />
-            <path
-              d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+              d="M396.795 396.8H320V448h128V320h-51.205zM396.8 115.205V192H448V64H320v51.205zM115.205 115.2H192V64H64v128h51.205zM115.2 396.795V320H64v128h128v-51.205z"
               fill="currentColor"
             />
           </svg>
diff --git a/src/components/__snapshots__/manager.test.js.snap b/src/components/__snapshots__/manager.test.js.snap
index 6608b63a9..34a5ed764 100644
--- a/src/components/__snapshots__/manager.test.js.snap
+++ b/src/components/__snapshots__/manager.test.js.snap
@@ -333,40 +333,312 @@ exports[`<Manager /> should render correctly. 1`] = `
             </div>
           </Styled(div)>
         </Progress>
-        <Fullscreen>
+        <style
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "body { } .spectacle-presenter-next .fragment { display: none !important} ",
+            }
+          }
+        />
+      </div>
+    </Styled(div)>
+  </Manager>
+</Connect(Manager)>
+`;
+
+exports[`<Manager /> should render fullscreen button dependant on prop 1`] = `
+<Connect(Manager)
+  showFullscreenControl={true}
+>
+  <Manager
+    autoplay={false}
+    autoplayDuration={7000}
+    autoplayLoop={true}
+    contentHeight={700}
+    contentWidth={1000}
+    controls={true}
+    disableKeyboardControls={false}
+    dispatch={[Function]}
+    fragment={
+      Object {
+        "fragments": Array [],
+      }
+    }
+    globalStyles={true}
+    progress="pacman"
+    route={
+      Object {
+        "params": Array [],
+        "slide": 0,
+      }
+    }
+    showFullscreenControl={true}
+    style={
+      Object {
+        "globalStyleSet": Array [],
+      }
+    }
+    transition={Array []}
+    transitionDuration={500}
+  >
+    <Styled(div)
+      className="spectacle-deck"
+      onClick={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      route={
+        Object {
+          "params": Array [],
+          "slide": 0,
+        }
+      }
+    >
+      <div
+        className="spectacle-deck css-1w702dy eaa55an0"
+        onClick={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+      >
+        <Controls
+          controlColor={null}
+          currentSlideIndex={0}
+          onNext={[Function]}
+          onPrev={[Function]}
+          totalSlides={1}
+        >
+          <div>
+            <undefined />
+            <undefined />
+          </div>
+        </Controls>
+        <Styled(TransitionGroup)
+          component="div"
+        >
+          <TransitionGroup
+            childFactory={[Function]}
+            className="css-r8ywg3 eaa55an1"
+            component="div"
+          >
+            <div
+              className="css-r8ywg3 eaa55an1"
+            >
+              <SlideWrapper
+                align="center center"
+                dispatch={[Function]}
+                export={false}
+                fragments={
+                  Object {
+                    "fragments": Array [],
+                  }
+                }
+                hash={0}
+                key=".$0"
+                lastSlideIndex={0}
+                presenterStyle={Object {}}
+                print={false}
+                slideIndex={0}
+                slideReference={
+                  Array [
+                    Object {
+                      "id": 0,
+                      "rootIndex": 0,
+                    },
+                  ]
+                }
+                style={Object {}}
+                transition={Array []}
+                transitionDuration={500}
+                viewerScaleMode={false}
+              >
+                <VictoryAnimation
+                  data={
+                    Object {
+                      "transform": " translate3d(0px, 0px, 0px)",
+                      "zIndex": 1,
+                    }
+                  }
+                  delay={0}
+                  duration={500}
+                  easing="quadInOut"
+                >
+                  <div
+                    style={
+                      Object {
+                        "backgroundColor": "",
+                        "display": "flex",
+                        "height": "100%",
+                        "left": 0,
+                        "overflow": "hidden",
+                        "position": "absolute",
+                        "top": 0,
+                        "transform": " translate3d(0px, 0px, 0px)",
+                        "transformOrigin": "center center",
+                        "width": "100%",
+                        "zIndex": 1,
+                      }
+                    }
+                  >
+                    <MockSlide
+                      dispatch={[Function]}
+                      export={false}
+                      fragments={
+                        Object {
+                          "fragments": Array [],
+                        }
+                      }
+                      hash={0}
+                      key=".0"
+                      lastSlideIndex={0}
+                      print={false}
+                      slideIndex={0}
+                      slideReference={
+                        Array [
+                          Object {
+                            "id": 0,
+                            "rootIndex": 0,
+                          },
+                        ]
+                      }
+                      transition={Array []}
+                      transitionDuration={500}
+                    >
+                      <div>
+                        Slide Content
+                      </div>
+                    </MockSlide>
+                  </div>
+                </VictoryAnimation>
+              </SlideWrapper>
+            </div>
+          </TransitionGroup>
+        </Styled(TransitionGroup)>
+        <Progress
+          currentSlideIndex={0}
+          items={
+            Array [
+              Object {
+                "id": 0,
+                "rootIndex": 0,
+              },
+            ]
+          }
+          progressColor={null}
+          type="pacman"
+        >
+          <Styled(div)
+            styles={
+              Array [
+                undefined,
+                null,
+              ]
+            }
+          >
+            <div
+              className="css-0 e12weced4"
+            >
+              <div>
+                <Styled(div)
+                  position={
+                    Object {
+                      "left": "-5px",
+                      "top": "-20px",
+                    }
+                  }
+                  styles={undefined}
+                >
+                  <div
+                    className="css-p4obic e12weced0"
+                  >
+                    <Styled(div)
+                      styles={
+                        Array [
+                          undefined,
+                          Object {
+                            "animation": "animation-vwhb3c 0.12s linear 10 alternate both",
+                          },
+                          null,
+                        ]
+                      }
+                    >
+                      <div
+                        className="css-1la23zo e12weced1"
+                      />
+                    </Styled(div)>
+                    <Styled(div)
+                      styles={
+                        Array [
+                          undefined,
+                          Object {
+                            "animation": "animation-1p18wsg 0.12s linear 10 alternate both",
+                          },
+                          null,
+                        ]
+                      }
+                    >
+                      <div
+                        className="css-1yi33k2 e12weced1"
+                      />
+                    </Styled(div)>
+                  </div>
+                </Styled(div)>
+                <Styled(div)
+                  key="presentation-progress-0"
+                  position={
+                    Object {
+                      "left": "-5px",
+                      "opacity": 0,
+                      "top": "-20px",
+                    }
+                  }
+                  styles={
+                    Array [
+                      undefined,
+                      null,
+                    ]
+                  }
+                >
+                  <div
+                    className="css-ci3gz3 e12weced2"
+                  />
+                </Styled(div)>
+              </div>
+            </div>
+          </Styled(div)>
+        </Progress>
+        <Fullscreen
+          onClick={[Function]}
+        >
           <Styled(FullscreenButton)
+            isFullscreen={false}
             onClick={[Function]}
             styles={undefined}
-            viewBox="0 0 512 512"
           >
             <FullscreenButton
-              className="css-12n5ud e4v3eea0"
+              className="css-12w3q3u e4v3eea0"
+              isFullscreen={false}
               onClick={[Function]}
               styles={undefined}
-              viewBox="0 0 512 512"
             >
               <Styled(button)
                 aria-label="Toggle full screen"
-                className="css-12n5ud e4v3eea0"
+                className="css-12w3q3u e4v3eea0"
                 onClick={[Function]}
                 styles={undefined}
-                viewBox="0 0 512 512"
               >
                 <button
                   aria-label="Toggle full screen"
-                  className="e4v3eea0 css-1hv29sw ev51h780"
+                  className="e4v3eea0 css-11lfetj ev51h780"
                   onClick={[Function]}
-                  viewBox="0 0 512 512"
                 >
                   <svg
-                    viewBox="0 0 24 24"
+                    viewBox="0 0 512 512"
                   >
                     <path
-                      d="M0 0h24v24H0z"
-                      fill="none"
-                    />
-                    <path
-                      d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
+                      d="M396.795 396.8H320V448h128V320h-51.205zM396.8 115.205V192H448V64H320v51.205zM115.205 115.2H192V64H64v128h51.205zM115.2 396.795V320H64v128h128v-51.205z"
                       fill="currentColor"
                     />
                   </svg>
@@ -669,48 +941,6 @@ exports[`<Manager /> should render the overview configuration when specified. 1`
             </div>
           </Styled(div)>
         </Overview>
-        <Fullscreen>
-          <Styled(FullscreenButton)
-            onClick={[Function]}
-            styles={undefined}
-            viewBox="0 0 512 512"
-          >
-            <FullscreenButton
-              className="css-12n5ud e4v3eea0"
-              onClick={[Function]}
-              styles={undefined}
-              viewBox="0 0 512 512"
-            >
-              <Styled(button)
-                aria-label="Toggle full screen"
-                className="css-12n5ud e4v3eea0"
-                onClick={[Function]}
-                styles={undefined}
-                viewBox="0 0 512 512"
-              >
-                <button
-                  aria-label="Toggle full screen"
-                  className="e4v3eea0 css-1hv29sw ev51h780"
-                  onClick={[Function]}
-                  viewBox="0 0 512 512"
-                >
-                  <svg
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M0 0h24v24H0z"
-                      fill="none"
-                    />
-                    <path
-                      d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </button>
-              </Styled(button)>
-            </FullscreenButton>
-          </Styled(FullscreenButton)>
-        </Fullscreen>
         <style
           dangerouslySetInnerHTML={
             Object {
@@ -1093,48 +1323,6 @@ exports[`<Manager /> should render with slideset slides 1`] = `
             </div>
           </Styled(div)>
         </Progress>
-        <Fullscreen>
-          <Styled(FullscreenButton)
-            onClick={[Function]}
-            styles={undefined}
-            viewBox="0 0 512 512"
-          >
-            <FullscreenButton
-              className="css-12n5ud e4v3eea0"
-              onClick={[Function]}
-              styles={undefined}
-              viewBox="0 0 512 512"
-            >
-              <Styled(button)
-                aria-label="Toggle full screen"
-                className="css-12n5ud e4v3eea0"
-                onClick={[Function]}
-                styles={undefined}
-                viewBox="0 0 512 512"
-              >
-                <button
-                  aria-label="Toggle full screen"
-                  className="e4v3eea0 css-1hv29sw ev51h780"
-                  onClick={[Function]}
-                  viewBox="0 0 512 512"
-                >
-                  <svg
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M0 0h24v24H0z"
-                      fill="none"
-                    />
-                    <path
-                      d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </button>
-              </Styled(button)>
-            </FullscreenButton>
-          </Styled(FullscreenButton)>
-        </Fullscreen>
         <style
           dangerouslySetInnerHTML={
             Object {
diff --git a/src/components/component-playground.js b/src/components/component-playground.js
index 19639fb71..97cc331c8 100644
--- a/src/components/component-playground.js
+++ b/src/components/component-playground.js
@@ -9,6 +9,7 @@ import FullscreenButton from './fullscreen-button';
 import {
   requestFullscreen,
   exitFullscreen,
+  isFullscreen,
   getFullscreenElement
 } from '../utils/fullscreen';
 
@@ -193,7 +194,7 @@ class ComponentPlayground extends Component {
     evt.stopPropagation();
 
     // Esc: When entering the editor or an input element the default esc-to-exit might not work anymore
-    if (evt.keyCode === 27 && getFullscreenElement()) {
+    if (evt.keyCode === 27 && isFullscreen()) {
       exitFullscreen();
     }
   }
@@ -246,7 +247,10 @@ class ComponentPlayground extends Component {
           <Title>Live Preview</Title>
           <Title useDarkTheme={useDarkTheme}>
             Source Code
-            <FullscreenButton onClick={this.requestFullscreen} />
+            <FullscreenButton
+              onClick={this.requestFullscreen}
+              isFullscreen={getFullscreenElement() === this.node}
+            />
           </Title>
         </PlaygroundRow>
 
diff --git a/src/components/deck.js b/src/components/deck.js
index fb9108f36..b442520ae 100644
--- a/src/components/deck.js
+++ b/src/components/deck.js
@@ -32,13 +32,15 @@ export default class Deck extends Component {
     history: PropTypes.object,
     onStateChange: PropTypes.func,
     progress: PropTypes.oneOf(['pacman', 'bar', 'number', 'none']),
+    showFullscreenControl: PropTypes.bool,
     theme: PropTypes.object,
     transition: PropTypes.array,
     transitionDuration: PropTypes.number
   };
 
   static defaultProps = {
-    onStateChange: defaultOnStateChange
+    onStateChange: defaultOnStateChange,
+    showFullscreenControl: true
   };
 
   state = {
diff --git a/src/components/fullscreen-button.js b/src/components/fullscreen-button.js
index de4355d2a..4c2bf49c9 100644
--- a/src/components/fullscreen-button.js
+++ b/src/components/fullscreen-button.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
 import styled from 'react-emotion';
 
 const Button = styled.button`
@@ -17,18 +19,24 @@ const Button = styled.button`
   }
 `;
 
-const FullscreenButton = props => (
+const FullscreenButton = ({ isFullscreen, ...props }) => (
   <Button aria-label="Toggle full screen" {...props}>
-    <svg viewBox="0 0 24 24">
-      <path d="M0 0h24v24H0z" fill="none" />
+    <svg viewBox="0 0 512 512">
       <path
-        d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"
-        fill={
-          props.styles && props.styles.fill ? props.styles.fill : 'currentColor'
+        fill={get(props, 'styles.fill', 'currentColor')}
+        d={
+          isFullscreen
+            ? 'M64 371.2h76.795V448H192V320H64v51.2zm76.795-230.4H64V192h128V64h-51.205v76.8zM320 448h51.2v-76.8H448V320H320v128zm51.2-307.2V64H320v128h128v-51.2h-76.8z'
+            : 'M396.795 396.8H320V448h128V320h-51.205zM396.8 115.205V192H448V64H320v51.205zM115.205 115.2H192V64H64v128h51.205zM115.2 396.795V320H64v128h128v-51.205z'
         }
       />
     </svg>
   </Button>
 );
 
+FullscreenButton.propTypes = {
+  isFullscreen: PropTypes.bool,
+  styles: PropTypes.object
+};
+
 export default FullscreenButton;
diff --git a/src/components/fullscreen.js b/src/components/fullscreen.js
index b79b3bc2b..80c2bbf0e 100644
--- a/src/components/fullscreen.js
+++ b/src/components/fullscreen.js
@@ -4,41 +4,36 @@ import styled from 'react-emotion';
 
 import FullscreenButton from './fullscreen-button';
 
-import {
-  requestFullscreen,
-  exitFullscreen,
-  getFullscreenElement
-} from '../utils/fullscreen';
+import { toggleFullscreen, isFullscreen } from '../utils/fullscreen';
 
 const StyledFullscreen = styled(FullscreenButton)`
   position: absolute;
   bottom: 10px;
   right: 20px;
-  opacity: 0;
-  transition: 300ms opacity ease;
+  width: 45px;
+  height: 45px;
   font-size: 30px;
   color: #fff;
+  transition: 300ms transform ease;
+  transform: scale(1);
 
-  &:hover {
-    opacity: 1;
+  &:hover,
+  &:focus {
+    transform: ${props => (props.isFullscreen ? 'scale(0.75)' : 'scale(1.25)')};
   }
-`;
 
-export class Fullscreen extends Component {
-  toggleFullscreen() {
-    if (!getFullscreenElement()) {
-      requestFullscreen(document.documentElement);
-    } else {
-      exitFullscreen();
-    }
+  &:active {
+    transform: ${props => (props.isFullscreen ? 'scale(0.90)' : 'scale(1.10)')};
   }
+`;
 
+export class Fullscreen extends Component {
   render() {
     return (
       <StyledFullscreen
-        onClick={() => this.toggleFullscreen()}
+        isFullscreen={isFullscreen()}
+        onClick={this.props.onClick}
         styles={this.context.styles.fullscreen}
-        viewBox="0 0 512 512"
       />
     );
   }
@@ -48,4 +43,13 @@ Fullscreen.contextTypes = {
   styles: PropTypes.object
 };
 
+Fullscreen.propTypes = {
+  controlColor: PropTypes.string,
+  onClick: PropTypes.func
+};
+
+Fullscreen.defaultProps = {
+  onClick: toggleFullscreen
+};
+
 export default Fullscreen;
diff --git a/src/components/fullscreen.test.js b/src/components/fullscreen.test.js
index dd66edede..9316b6953 100644
--- a/src/components/fullscreen.test.js
+++ b/src/components/fullscreen.test.js
@@ -11,14 +11,14 @@ describe('<Fullscreen />', () => {
 
   test('should toggle fullscreen when the button is selected.', () => {
     const context = { styles: { styles: { fullscreen: {} } } };
-    const wrapper = mount(<Fullscreen />, { context });
-    const stub = jest.fn();
-    wrapper.instance().toggleFullscreen = stub;
-    wrapper.update();
+    const onClickStub = jest.fn();
+    const wrapper = mount(<Fullscreen onClick={onClickStub} />, { context });
+
     wrapper
-      .children()
+      .find('button')
       .first()
       .simulate('click');
-    expect(stub).toHaveBeenCalledTimes(1);
+
+    expect(onClickStub).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/components/manager.js b/src/components/manager.js
index 647932848..def589eb6 100644
--- a/src/components/manager.js
+++ b/src/components/manager.js
@@ -26,6 +26,7 @@ import AutoplayControls from './autoplay-controls';
 import Fullscreen from './fullscreen';
 import Progress from './progress';
 import Controls from './controls';
+import { toggleFullscreen } from '../utils/fullscreen';
 
 let convertStyle = styles => {
   return Object.keys(styles)
@@ -112,6 +113,7 @@ export class Manager extends Component {
     globalStyles: PropTypes.bool,
     progress: PropTypes.oneOf(['pacman', 'bar', 'number', 'none']),
     route: PropTypes.object,
+    showFullscreenControl: PropTypes.bool,
     transition: PropTypes.array,
     transitionDuration: PropTypes.number
   };
@@ -252,53 +254,57 @@ export class Manager extends Component {
     const event = window.event ? window.event : e;
 
     if (
-      event.keyCode === 37 ||
-      event.keyCode === 33 ||
-      (event.keyCode === 32 && event.shiftKey)
+      event.keyCode === 37 || // 'ArrowLeft'|
+      event.keyCode === 33 || // 'PageUp'
+      (event.keyCode === 32 && // 'Space'
+        event.shiftKey)
     ) {
       this._prevSlide();
       this._stopAutoplay();
     } else if (
-      event.keyCode === 39 ||
-      event.keyCode === 34 ||
-      (event.keyCode === 32 && !event.shiftKey)
+      event.keyCode === 39 || // 'ArrowRight'
+      event.keyCode === 34 || // 'PageDown'
+      (event.keyCode === 32 && // 'Space'
+        !event.shiftKey)
     ) {
       this._nextSlide();
       this._stopAutoplay();
     } else if (
       event.altKey &&
-      event.keyCode === 79 &&
+      event.keyCode === 79 && // 'o'
       !event.ctrlKey &&
       !event.metaKey
     ) {
-      // o
       this._toggleOverviewMode();
     } else if (
       event.altKey &&
-      event.keyCode === 80 &&
+      event.keyCode === 80 && // 'p'
       !event.ctrlKey &&
       !event.metaKey
     ) {
-      // p
       this._togglePresenterMode();
     } else if (
       event.altKey &&
-      event.keyCode === 84 &&
+      event.keyCode === 84 && // 't'
       !event.ctrlKey &&
       !event.metaKey
     ) {
-      // t
       this._toggleTimerMode();
     } else if (
       event.altKey &&
-      event.keyCode === 65 &&
+      event.keyCode === 65 && // 'a'
+      !event.ctrlKey &&
+      !event.metaKey &&
+      this.props.autoplay
+    ) {
+      this._startAutoplay();
+    } else if (
+      event.altKey &&
+      event.keyCode === 70 && // 'f'
       !event.ctrlKey &&
       !event.metaKey
     ) {
-      // a
-      if (this.props.autoplay) {
-        this._startAutoplay();
-      }
+      toggleFullscreen();
     }
   }
   _handleKeyPress(e) {
@@ -883,7 +889,8 @@ export class Manager extends Component {
           ''
         )}
 
-        {this.props.route.params.indexOf('export') === -1 ? <Fullscreen /> : ''}
+        {this.props.showFullscreenControl &&
+          !this.props.route.params.includes('export') && <Fullscreen />}
 
         {this.props.autoplay ? (
           <AutoplayControls
diff --git a/src/components/manager.test.js b/src/components/manager.test.js
index d5b13c543..faf5a29a3 100644
--- a/src/components/manager.test.js
+++ b/src/components/manager.test.js
@@ -80,6 +80,16 @@ describe('<Manager />', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  test('should render fullscreen button dependant on prop', () => {
+    const wrapper = mount(
+      <Manager showFullscreenControl>
+        <MockSlide />
+      </Manager>,
+      { context: _mockContext(0, []), childContextTypes: _mockChildContext() }
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
   test('should render the export configuration when specified.', () => {
     const wrapper = mount(
       <Manager>
diff --git a/src/themes/default/print.js b/src/themes/default/print.js
index 87fed8dd7..fb0a82c7d 100644
--- a/src/themes/default/print.js
+++ b/src/themes/default/print.js
@@ -46,7 +46,7 @@ const print = (colorArgs = defaultColors, fontArgs = defaultFonts) => {
       }
     },
     fullscreen: {
-      fill: colors.tertiary
+      fill: colors.quaternary
     },
     controls: {
       prev: {
diff --git a/src/themes/default/screen.js b/src/themes/default/screen.js
index 5aeb36343..878297cd5 100644
--- a/src/themes/default/screen.js
+++ b/src/themes/default/screen.js
@@ -59,7 +59,7 @@ const screen = (colorArgs = defaultColors, fontArgs = defaultFonts) => {
       }
     },
     fullscreen: {
-      fill: colors.tertiary
+      fill: colors.quaternary
     },
     autoplay: {
       pause: {
diff --git a/src/utils/fullscreen.js b/src/utils/fullscreen.js
index 5496901ed..46719eb15 100644
--- a/src/utils/fullscreen.js
+++ b/src/utils/fullscreen.js
@@ -1,4 +1,4 @@
-export const requestFullscreen = element => {
+export const requestFullscreen = (element = document.documentElement) => {
   const request =
     element.requestFullscreen ||
     element.webkitRequestFullscreen ||
@@ -27,3 +27,13 @@ export const getFullscreenElement = () =>
   document.mozFullScreenElement ||
   document.webkitFullscreenElement ||
   document.msFullscreenElement;
+
+export const isFullscreen = () => !!getFullscreenElement();
+
+export const toggleFullscreen = () => {
+  if (isFullscreen()) {
+    exitFullscreen();
+  } else {
+    requestFullscreen(document.documentElement);
+  }
+};