diff --git a/src/App.js b/src/App.js
index a937175..b6c1baa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -29,6 +29,7 @@ class App extends Component {
             originY: 0,
             isLoading: true,
             intro: true,
+            eyedropper: false,
             palette: [
                 '247a23',
                 '30bf2e',
@@ -72,12 +73,14 @@ class App extends Component {
         this._updatePixel = this._updatePixel.bind(this);
         this._updateOffscreenCanvas = this._updateOffscreenCanvas.bind(this);
         this._getDrawLocation = this._getDrawLocation.bind(this);
-        this.onClick = this.onClick.bind(this);
+        this.onPaletteClick = this.onPaletteClick.bind(this);
         this._addColor = this._addColor.bind(this);
         this._rgbToHex = this._rgbToHex.bind(this);
         this.clearPalette = this.clearPalette.bind(this);
         this._checkPickerVisibility = this._checkPickerVisibility.bind(this);
         this.onIntroClick = this.onIntroClick.bind(this);
+        this.onEyedropperClick = this.onEyedropperClick.bind(this);
+        this._getColor = this._getColor.bind(this);
     }
 
     _init() {
@@ -223,11 +226,15 @@ class App extends Component {
             let { doc, col } = this._getDocumentLocation(pixelX, pixelY);
 
             if(pixelX >= 0 && pixelX < 500 && pixelY >= 0 && pixelY < 500) {
-                this._updatePixel(doc, col);
+                if(this.state.eyedropper) {
+                    this._getColor(doc, col);
+                }else {
+                    this._updatePixel(doc, col);
 
-                this._updateOffscreenCanvas(b, row, col);
+                    this._updateOffscreenCanvas(b, row, col);
 
-                socket.emit('clientUpdate', doc, b, row, col, this.state.quilt[doc].color);
+                    socket.emit('clientUpdate', doc, b, row, col, this.state.quilt[doc].color);
+                }
             }
         }
 
@@ -385,7 +392,7 @@ class App extends Component {
         return { x, y };
     }
 
-    onClick(event) {
+    onPaletteClick(event) {
         if(event.target.style.backgroundColor)
             this.setState({ color: this._rgbToHex(event.target.style.backgroundColor) });
     }
@@ -450,6 +457,31 @@ class App extends Component {
         this.setState({ intro: false });
     }
 
+    onEyedropperClick() {
+        let eyedropper = document.getElementById('eyedropper');
+
+        eyedropper.className = eyedropper.className === 'eyedropper' ? 'eyedropper_down' : 'eyedropper';
+
+        document.body.style.cursor = document.body.style.cursor !== 'copy' ? 'copy' : 'auto';
+
+        this.setState(prevState => {
+            let eyedropper = this.state.eyedropper ? false : true;
+
+            return { eyedropper };
+        });
+    }
+
+    _getColor(doc, col) {
+        let quilt = this.state.quilt;
+        let colors = quilt[doc].color;
+        let getCol = col * 7;
+
+        let color = colors.substr(getCol, 7).slice(0, -1);
+
+        this.setState({ color });
+        this.onEyedropperClick();
+    }
+
     componentDidMount() {
         this._init()
         .then(this._getCanvas)
@@ -468,7 +500,7 @@ class App extends Component {
                     : null
                 }
                 <div className='splash'>
-                    <p>Pixel <br /> Share</p>
+                    <p>Pixel <br /> Share<br /><span>0.1.0</span></p>
                 </div>
                 <canvas id='quilt'></canvas>
                 {this.state.isLoading
@@ -476,7 +508,7 @@ class App extends Component {
                     : null
                 }
                 <div className='palette'>
-                    <Palette palette={this.state.palette} onClick={this.onClick} savePalette={this.savePalette} clearPalette={this.clearPalette} />
+                    <Palette palette={this.state.palette} onPaletteClick={this.onPaletteClick} savePalette={this.savePalette} clearPalette={this.clearPalette} onEyedropperClick={this.onEyedropperClick} />
                     <div className='picker'>
                         <div>
                             <input type='button' id='add' value='Add to Palette' onClick={this._addColor} />
@@ -490,12 +522,10 @@ class App extends Component {
     }
 }
 
-const Palette = ({ palette, onClick, clearPalette }) =>
+const Palette = ({ palette, onPaletteClick, clearPalette, onEyedropperClick }) =>
     <div id='paletteContainer'>
-        <div id='paletteButtons'>
-            <input type='button' value='Clear Palette' onClick={clearPalette} />
-        </div>
-        <div id='palette' onClick={onClick}>
+        <input type='button' value='Clear Palette' onClick={clearPalette} />
+        <div id='palette' onClick={onPaletteClick}>
             {palette.length > 1 ?
                 palette.map(color => {
                     let id = `color${color}`;
@@ -507,20 +537,23 @@ const Palette = ({ palette, onClick, clearPalette }) =>
                 : null
             }
         </div>
+        <input className='eyedropper' id='eyedropper' type='button' value='&#9906;' onClick={onEyedropperClick} />
     </div>
 
 const Intro = ({ onClick }) =>
     <div id="intro">
         <div id="description">
-            Welcome to <span id="title">PixelShare</span>&nbsp;&nbsp;the online community quilt<br/><br/>
+            Welcome to <span id="title">PixelShare</span>&nbsp;&nbsp;the online community quilt<br/>
+
+            <span>Scroll</span>&nbsp;&nbsp;to zoom in and out<br/>
 
-            <span>Scroll</span>&nbsp;&nbsp;to zoom in and out<br/><br/>
+            <span>Click and drag</span>&nbsp;&nbsp;to pan around the quilt<br/>
 
-            <span>Click and drag</span>&nbsp;&nbsp;to pan around the quilt<br/><br/>
+            <span>Click the swatch</span>&nbsp;&nbsp;to select a custom color<br/>
 
-            <span>Click the swatch</span>&nbsp;&nbsp;to select a custom color<br/><br/>
+            <span>Click the&nbsp;&nbsp;&#9906;&nbsp;&nbsp;button</span>&nbsp;&nbsp;to select a color from another pixel<br/>
 
-            <span>Add to palette</span>&nbsp;&nbsp;saves the color for now &ndash; and next time<br/><br/>
+            <span>Add to palette</span>&nbsp;&nbsp;saves the color for now &ndash; and next time<br/>
 
             <span>Clear palette</span>&nbsp;&nbsp;resets the palette to the original colors
         </div>
diff --git a/src/css/App.css b/src/css/App.css
index 3d62dd3..a050e1e 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -43,6 +43,7 @@
       padding-left: 1%;
       font-family: karmaticArcade;
       font-size: 2vw;
+      line-height: 200%;
       -webkit-mask-image: linear-gradient(to top, black, rgba(0, 0, 0, 0.7) 50%, black); }
     .App #intro #title {
       font-size: 2.8vw; }
@@ -53,7 +54,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      margin: 7vh 0 2vh 0; }
+      margin: 4vh 0 2vh 0; }
       .App #intro #show input[type=checkbox] {
         position: relative;
         width: 2%;
@@ -137,6 +138,11 @@
       font-family: karmaticArcade;
       font-size: calc(100vw / 12 - 100vh / 12);
       -webkit-mask-image: linear-gradient(to top, black, rgba(0, 0, 0, 0.7) 50%, black); }
+      .App .splash p span {
+        font-size: 0.8vw;
+        line-height: 300%;
+        padding-left: 1vw;
+        vertical-align: top; }
   .App input[type=button] {
     width: 100%;
     border: 1px solid #888;
@@ -195,6 +201,8 @@
   .App #paletteContainer {
     width: 7vw;
     max-width: 80%;
+    display: flex;
+    flex-direction: column;
     margin: 5%;
     margin-bottom: auto; }
     .App #paletteContainer #palette {
@@ -203,10 +211,16 @@
       .App #paletteContainer #palette .color {
         height: 0;
         padding-top: 100%; }
-    .App #paletteContainer #paletteButtons {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end; }
+    .App #paletteContainer .eyedropper {
+      border: 1px solid #555; }
+    .App #paletteContainer .eyedropper_down {
+      background: #bbb;
+      background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#bbb));
+      background: -webkit-linear-gradient(top, #888, #bbb);
+      background: -moz-linear-gradient(top, #888, #bbb);
+      background: -ms-linear-gradient(top, #888, #bbb);
+      background: -o-linear-gradient(top, #888, #bbb);
+      border: 1px solid #444; }
   .App #quilt {
     width: 100vh;
     height: 100vh;
diff --git a/src/scss/App.scss b/src/scss/App.scss
index 9e2f732..a42465d 100644
--- a/src/scss/App.scss
+++ b/src/scss/App.scss
@@ -56,6 +56,7 @@
             padding-left: 1%;
             font-family: karmaticArcade;
             font-size: 2vw;
+            line-height: 200%;
             -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,.7) 50%, rgba(0,0,0,1));
         }
 
@@ -72,7 +73,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            margin: 7vh 0 2vh 0;
+            margin: 4vh 0 2vh 0;
 
             input[type=checkbox] {
                 position: relative;
@@ -167,6 +168,13 @@
             font-family: karmaticArcade;
             font-size: calc(100vw / 12 - 100vh / 12);
             -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,.7) 50%, rgba(0,0,0,1));
+
+            span {
+                font-size: 0.8vw;
+                line-height: 300%;
+                padding-left: 1vw;
+                vertical-align: top;
+            }
         }
     }
 
@@ -233,6 +241,8 @@
     #paletteContainer {
         width: 7vw;
         max-width: 80%;
+        display: flex;
+        flex-direction: column;
         margin: 5%;
         margin-bottom: auto;
 
@@ -246,10 +256,13 @@
             }
         }
 
-        #paletteButtons {
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
+        .eyedropper {
+            border: 1px solid #555;
+        }
+
+        .eyedropper_down {
+            @include background-gradient(#888, #bbb);
+            border: 1px solid #444;
         }
     }