diff --git a/src/components/App.css b/src/components/App.css
index 613646a..c33c05b 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -1,5 +1,4 @@
 .calculator {
-  z-index: 1;
   position: absolute;
   top: 60px;
   right: 0;
diff --git a/src/components/Burst.css b/src/components/Burst.css
index 64bda24..1868cd0 100644
--- a/src/components/Burst.css
+++ b/src/components/Burst.css
@@ -71,3 +71,9 @@
   font-size: 17px;
   font-family: Arial, Helvetica, sans-serif;
 }
+
+.Burst-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/Burst.js b/src/components/Burst.js
index a6a6656..b43238e 100644
--- a/src/components/Burst.js
+++ b/src/components/Burst.js
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { getCalcState, setCalcState } from '../lib/calc-helpers';
 import { getBurstErrors } from '../lib/input-helpers';
 import './Burst.css';
+import InfoIcon from './InfoIcon';
 
 class Burst extends Component {
   constructor(props) {
@@ -84,11 +85,18 @@ class Burst extends Component {
   render() {
     const { idx, min, max, step, errors } = this.state;
     const { expanded } = this.props;
+    const burstInfo = `Burst allows you to generate multiple snapshots
+      of your graph at one time. Enter the relevant info in the input fields
+      and hit capture to watch the magic happen.`;
 
     if (!expanded) return <div className="Burst" />;
 
     return (
       <div className={classNames('Burst', { 'Burst-expanded': expanded })}>
+        <div className="Burst-header">
+          <h2>Burst</h2>
+          <InfoIcon infoText={burstInfo} />
+        </div>
         <div data-testid="Burst-slider-index-label">Slider Index</div>
         <input
           className={classNames('Burst-input', {
diff --git a/src/components/Folder.css b/src/components/Folder.css
index 39a9eb2..c08f7dc 100644
--- a/src/components/Folder.css
+++ b/src/components/Folder.css
@@ -140,6 +140,12 @@
   border-color: #e79600;
 }
 
+.Folder-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @media (max-width: 448px) {
   .Folder {
     width: calc(100vw - 70px);
diff --git a/src/components/Folder.js b/src/components/Folder.js
index 4b7e452..330b247 100644
--- a/src/components/Folder.js
+++ b/src/components/Folder.js
@@ -6,6 +6,7 @@ import {
 } from '../lib/local-storage-helpers';
 import panes from '../constants/pane-types';
 import './Folder.css';
+import InfoIcon from './InfoIcon';
 
 class Folder extends Component {
   constructor(props) {
@@ -101,12 +102,19 @@ class Folder extends Component {
       </div>
     );
 
+    const folderText = `The folder allows you to save your graphs so you 
+                          can come back to them at a later time.`;
+
     return (
       <div
         className={classNames('Folder', {
           'Folder-expanded': expanded
         })}
       >
+        <div className="Folder-header">
+          <h2>Folder</h2>
+          <InfoIcon infoText={folderText} />
+        </div>
         <div>
           <div className="Folder-titles">Name</div>
           <input
diff --git a/src/components/InfoIcon.css b/src/components/InfoIcon.css
new file mode 100644
index 0000000..aa8147b
--- /dev/null
+++ b/src/components/InfoIcon.css
@@ -0,0 +1,40 @@
+.InfoIcon-icon {
+  height: 17px;
+  width: 17px;
+  margin-left: 10px;
+  margin-top: 7px;
+}
+
+.InfoIcon-icon:hover {
+  cursor: pointer;
+}
+
+.InfoIcon-text-container {
+  position: relative;
+}
+
+.InfoIcon-text {
+  position: absolute;
+  background-color: rgb(34, 34, 34, 0.8);
+  width: 180px;
+  margin-left: 10px;
+  left: 100%;
+  top: 10%;
+  font-size: 13px;
+  padding: 1rem;
+  border-radius: 5px;
+  text-align: left;
+  z-index: 1;
+}
+
+.InfoIcon-text a {
+  color: #fff;
+}
+
+.InfoIcon-text a:hover {
+  color: rgb(184, 184, 184);
+}
+
+.InfoIcon-text.hide {
+  display: none;
+}
diff --git a/src/components/InfoIcon.js b/src/components/InfoIcon.js
new file mode 100644
index 0000000..46f5b83
--- /dev/null
+++ b/src/components/InfoIcon.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import info from './icons/info.svg';
+import './InfoIcon.css';
+
+export default class InfoIcon extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: false
+    };
+    this.toggleInfo = this.toggleInfo.bind(this);
+  }
+
+  toggleInfo() {
+    this.setState({
+      show: !this.state.show
+    });
+  }
+
+  render() {
+    const displayClass = this.state.show ? 'show' : 'hide';
+    return (
+      <div className="InfoIcon-text-container">
+        <img
+          src={info}
+          alt="info icon"
+          className="InfoIcon-icon"
+          onClick={this.toggleInfo}
+        />
+        <div className={`InfoIcon-text ${displayClass}`}>
+          <p>{this.props.infoText}</p>
+          <a href="https://github.com/desmosinc/gifsmos" target="blank">
+            <p>More Info</p>
+          </a>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/Preview.css b/src/components/Preview.css
index b1ebff5..e3e84d5 100644
--- a/src/components/Preview.css
+++ b/src/components/Preview.css
@@ -9,6 +9,7 @@
   transition: 0.2s transform;
   margin-bottom: 0;
   overflow: scroll;
+  color: #fff;
 }
 
 .Preview-expanded {
@@ -65,6 +66,12 @@
   color: #fff;
 }
 
+.Preview-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @keyframes fade-in {
   0% {
     opacity: 0;
diff --git a/src/components/Preview.js b/src/components/Preview.js
index 1097512..1d88ccf 100644
--- a/src/components/Preview.js
+++ b/src/components/Preview.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import Frame from './Frame';
+import InfoIcon from './InfoIcon';
 import GenerateGifFormContainer from '../containers/GenerateGifFormContainer';
 import './Preview.css';
 
@@ -89,12 +90,20 @@ class Preview extends Component {
 
     if (!expanded) return <div className="Preview" />;
 
+    const previewText = `Preview allows you to preview your future GIF by 
+                         scrubbing through snapshots with the slider or 
+                         previewing your GIF with the play/pause button.`;
+
     return (
       <div
         className={classNames('Preview', { 'Preview-expanded': expanded })}
         data-testid="Preview-container"
         onClick={this.handleClickContainer}
       >
+        <div className="Preview-header">
+          <h2>Preview</h2>
+          <InfoIcon infoText={previewText} />
+        </div>
         <div className={classNames({ 'Preview-muted': !numFrames })}>
           <Frame
             imageSrc={imageSrc}
@@ -143,7 +152,7 @@ class Preview extends Component {
         {gifProgress === 1 ? (
           <div className="Preview-progress-success">Download Successful</div>
         ) : null}
-        {!frameIDs.length ? (
+        {!numFrames ? (
           <div className="Preview-no-frames">
             No frames have been captured. Use the camera or burst tools to add
             some!
diff --git a/src/components/Settings.css b/src/components/Settings.css
index f446ce1..1c51cf8 100644
--- a/src/components/Settings.css
+++ b/src/components/Settings.css
@@ -48,3 +48,9 @@
   font-size: 1em;
   outline: none !important;
 }
+
+.Settings-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/components/Settings.js b/src/components/Settings.js
index 74a43d0..6e22274 100644
--- a/src/components/Settings.js
+++ b/src/components/Settings.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { isPositiveInteger, isProperBound } from '../lib/input-helpers';
 import './Settings.css';
+import InfoIcon from './InfoIcon';
 
 class Settings extends Component {
   constructor(props) {
@@ -43,10 +44,16 @@ class Settings extends Component {
 
     if (!expanded) return <div className="Settings" />;
 
+    const settingsText = `The settings panel allows you to set your desired image dimensions 
+                          as well as the interval between frames in the generated GIF.`;
     return (
       <div
         className={classNames('Settings', { 'Settings-expanded': expanded })}
       >
+        <div className="Settings-header">
+          <h2>Settings</h2>
+          <InfoIcon infoText={settingsText} />
+        </div>
         <div data-testid="Settings-image-width-label">Image Width</div>
         <input
           className={classNames('Settings-input', {
diff --git a/src/components/icons/info.svg b/src/components/icons/info.svg
new file mode 100644
index 0000000..bb725ac
--- /dev/null
+++ b/src/components/icons/info.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#fff;}</style></defs><title>info(white)</title><path class="cls-1" d="M50.16,0c27.45.09,50,22.66,49.84,49.92A50.14,50.14,0,0,1,49.8,100h0C22.33,100.05-.13,77.31,0,49.56A50,50,0,0,1,50.16,0Zm.23,9.46a40.43,40.43,0,0,0-40.81,40v.42C9.33,72,27.66,90.44,49.81,90.49A40.48,40.48,0,0,0,90.38,50.1v-.31C90.25,27.64,72.25,9.49,50.39,9.46Z" transform="translate(0 0)"/><path class="cls-1" d="M47.89,78.34H44.21a.74.74,0,0,0-.21-.13,4.75,4.75,0,0,1-2.84-5.7c1.67-6.89,3.39-13.77,5.06-20.66a21.7,21.7,0,0,0,.5-2.9.68.68,0,0,0-.46-.83.66.66,0,0,0-.44,0,5.77,5.77,0,0,0-1.15.39c-.84.35-1.65.76-2.49,1.09a1.41,1.41,0,0,1-1.81-.36V47.92A15.68,15.68,0,0,1,42.3,45.7c2.52-2,5.11-3.89,7.71-5.79a8.5,8.5,0,0,1,1.78-.9,4.33,4.33,0,0,1,2.61-.27,5.06,5.06,0,0,1,4.36,5.68,5,5,0,0,1-.19.85q-2.45,10-4.9,19.9a26.19,26.19,0,0,0-.58,3.28.64.64,0,0,0,.93.72c.62-.19,1.2-.49,1.8-.73s1.47-.61,2.22-.86a1.06,1.06,0,0,1,1.21.35,1.1,1.1,0,0,1,.12,1.3,4.45,4.45,0,0,1-.69,1.07,18.89,18.89,0,0,1-2,1.9A56.28,56.28,0,0,1,47.89,78.34Z" transform="translate(0 0)"/><path class="cls-1" d="M52.65,35.62a7,7,0,1,1,6.94-7.06v.06a7,7,0,0,1-6.9,7Z" transform="translate(0 0)"/></svg>
\ No newline at end of file