diff --git a/network-api/networkapi/buyersguide/templates/product_page.html b/network-api/networkapi/buyersguide/templates/product_page.html
index d18a0e3b1e3..b1d33283e0e 100644
--- a/network-api/networkapi/buyersguide/templates/product_page.html
+++ b/network-api/networkapi/buyersguide/templates/product_page.html
@@ -23,7 +23,11 @@ <h2 class="h1-heading">{{product.name}}</h2>
       </div>
       <div class="body-large mb-5">{{product.blurb}}</div>
 
-      <div class="creep-vote-target my-5"></div>
+      <div class="creep-vote-target my-5">
+          {% csrf_token %}
+          <input type="hidden" name="productID" value="{{ product.id }}">
+          <input type="hidden" name="votes" value="{{ product.votes | safe }}">
+      </div>
 
       <h3 class="h3-heading h3-heading-small">Can it spy on me?</h3>
 
diff --git a/source/js/buyers-guide/bg-main.js b/source/js/buyers-guide/bg-main.js
index b1781dd6692..7ba67f21a5a 100644
--- a/source/js/buyers-guide/bg-main.js
+++ b/source/js/buyers-guide/bg-main.js
@@ -75,7 +75,23 @@ let main = {
   injectReactComponents() {
     if (document.querySelectorAll(`.creep-vote-target`)) {
       Array.from(document.querySelectorAll(`.creep-vote-target`)).forEach(element => {
-        ReactDOM.render(<CreepVote />, element);
+        let csrf = element.querySelector(`input[name=csrfmiddlewaretoken]`);
+        let productID = element.querySelector(`input[name=productID]`).value;
+        let votes = element.querySelector(`input[name=votes]`).value;
+
+        try {
+          votes = JSON.parse(votes.replace(/'/g,`"`));
+        } catch (e) {
+          votes = {
+            creepiness: {
+              average: 50,
+              'vote_breakdown': {'0': 0, '1': 0, '2': 0, '3': 0, '4': 0}
+            },
+            confidence: {'0': 0, '1': 0}
+          };
+        }
+
+        ReactDOM.render(<CreepVote csrf={csrf.value} productID={parseInt(productID,10)} votes={votes}/>, element);
       });
     }
 
diff --git a/source/js/buyers-guide/components/creep-vote/creep-vote.jsx b/source/js/buyers-guide/components/creep-vote/creep-vote.jsx
index d70d50041c2..1edc6bfb8c9 100644
--- a/source/js/buyers-guide/components/creep-vote/creep-vote.jsx
+++ b/source/js/buyers-guide/components/creep-vote/creep-vote.jsx
@@ -6,34 +6,103 @@ import LikelyhoodChart from '../likelyhood-chart/likelyhood-chart.jsx';
 export default class CreepVote extends React.Component {
   constructor(props) {
     super(props);
-
     this.state = this.getInitialState();
-
-    this.submitVote = this.submitVote.bind(this);
+    console.log(this.props.votes);
   }
 
   getInitialState() {
+    let conf = this.props.votes.confidence;
+    let totalVotes = conf[0] + conf[1];
+
     return {
+      totalVotes,
+      creepiness: 50,
+      confidence: undefined,
       didVote: false
     };
   }
 
-  submitVote(){
-    this.setState({didVote:true});
+  showVoteResult() {
+    if (this.state.creepinessSubmitted && this.state.confidenceSubmitted) {
+      this.setState({ didVote: true });
+    }
+  }
+
+  sendVoteFor(payload) {
+    let attribute = payload.attribute;
+    let url = "/privacynotincluded/vote";
+    let method = "POST";
+    let credentials = 'same-origin';
+    let headers = {
+      "X-CSRFToken": this.props.csrf,
+      "Content-Type": "application/json"
+    };
+
+    fetch(url, {
+      method,
+      credentials,
+      headers,
+      body: JSON.stringify(payload)
+    })
+    .then(response => {
+      let update = {};
+      update[`${attribute}Submitted`] = true;
+      this.setState(update, () => {
+        this.showVoteResult()
+      });
+    })
+    .catch(e => {
+      console.warn(e);
+      this.setState({ disableVoteButton: false });
+    });
+  }
+
+  submitVote(evt) {
+    evt.preventDefault();
+
+    let confidence = this.state.confidence;
+
+    if (confidence === undefined) {
+      return;
+    }
+
+    this.setState({ disableVoteButton: true });
+
+    let productID = this.props.productID;
+
+    this.sendVoteFor({
+      attribute: 'confidence',
+      productID,
+      value: confidence,
+    });
+
+    this.sendVoteFor({
+      attribute: 'creepiness',
+      productID,
+      value: this.state.creepiness
+    });
+  }
+
+  setCreepiness(creepiness) {
+    this.setState({ creepiness });
+  }
+
+  setConfidence(confidence) {
+    this.setState({ confidence });
   }
 
   /**
    * @returns {jsx} What users see when they haven't voted on this product yet.
    */
   renderVoteAsk() {
-    return (<form method="post" id="creep-vote" onSubmit={this.submitVote}>
+    return (<form method="post" id="creep-vote" onSubmit={evt => this.submitVote(evt)}>
       <div className="row mb-5">
         <div className="col-12 col-md-6">
           <div className="mb-4 text-center">
             <h3 className="h5-heading mb-2">How creepy is this product?</h3>
             <p>Majority of voters think it is super creepy</p>
           </div>
-          <Creepometer initialValue={50}></Creepometer>
+          <Creepometer initialValue={this.state.creepiness} onChange={value => this.setCreepiness(value)}></Creepometer>
         </div>
         <div className="col-12 col-md-6">
           <div className="mb-4 text-center">
@@ -43,10 +112,12 @@ export default class CreepVote extends React.Component {
           <div className="text-center">
             <div class="btn-group btn-group-toggle" data-toggle="buttons">
               <label for="likely">
-                <input type="radio" name="wouldbuy" id="likely" autocomplete="off" required /><span class="btn">Likely</span>
+                <input type="radio" name="wouldbuy" id="likely" autocomplete="off" required/>
+                <span class="btn" onClick={evt => this.setConfidence(true)}>Likely</span>
               </label>
               <label for="unlikely">
-                <input type="radio" name="wouldbuy" id="unlikely" autocomplete="off" required /><span class="btn">Not likely</span>
+                <input type="radio" name="wouldbuy" id="unlikely" autocomplete="off" required/>
+                <span class="btn" onClick={evt => this.setConfidence(false)}>Not likely</span>
               </label>
             </div>
           </div>
@@ -54,8 +125,8 @@ export default class CreepVote extends React.Component {
       </div>
       <div className="row">
         <div className="col-12 text-center">
-          <button type="submit" className="btn btn-ghost mb-2">Vote & See Results</button>
-          <p>367 votes</p>
+          <button type="submit" className="btn btn-ghost mb-2" disabled={this.state.confidence===undefined}>Vote & See Results</button>
+          <p>{this.state.totalVotes} votes</p>
         </div>
       </div>
     </form>);
@@ -69,12 +140,16 @@ export default class CreepVote extends React.Component {
       <div>
         <div className="mb-5">
           <div className="col-12 text-center">
-            <h3 className="h4-heading">Thanks for voting! Here are the results</h3>
-            <div>367 Votes</div>
+            <h3 className="h4-heading">Thanks for voting! Here are the results so far:</h3>
+            <div>{this.state.totalVotes} Votes</div>
           </div>
           <div className="row">
-            <div className="col"><CreepChart/></div>
-            <div className="col likelyhood-chart"><LikelyhoodChart /></div>
+            <div className="col">
+              <CreepChart values={this.props.votes.creepiness.vote_breakdown} />
+            </div>
+            <div className="col likelyhood-chart">
+              <LikelyhoodChart values={this.props.votes.confidence} />
+            </div>
           </div>
         </div>
       </div>
diff --git a/source/js/buyers-guide/components/creep-vote/creep-vote.scss b/source/js/buyers-guide/components/creep-vote/creep-vote.scss
index 032e7258270..a9f3a1f4942 100644
--- a/source/js/buyers-guide/components/creep-vote/creep-vote.scss
+++ b/source/js/buyers-guide/components/creep-vote/creep-vote.scss
@@ -5,6 +5,16 @@ $btn-shadow-width: 3px;
   border-bottom: 1px solid #c8c8ca;
   border-top: 1px solid #c8c8ca;
 
+  button[disabled] {
+    color: #bbbbbb;
+
+    &.btn-ghost:hover {
+      cursor: auto;
+      color: inherit;
+      background: inherit;
+    }
+  }
+
   .btn-group {
     .btn {
       border: 1px solid $medium-gray;
@@ -12,6 +22,7 @@ $btn-shadow-width: 3px;
       color: black;
       text-transform: initial;
       transition: all 0.1s linear;
+
     }
 
     input { display: none; }
diff --git a/source/js/buyers-guide/components/creepiness-chart/creepiness-chart.jsx b/source/js/buyers-guide/components/creepiness-chart/creepiness-chart.jsx
index 84785f483d8..2ff9deaa5e8 100644
--- a/source/js/buyers-guide/components/creepiness-chart/creepiness-chart.jsx
+++ b/source/js/buyers-guide/components/creepiness-chart/creepiness-chart.jsx
@@ -3,64 +3,47 @@ import React from 'react';
 export default class CreepChart extends React.Component {
   constructor(props) {
     super(props);
-
     this.state = this.getInitialState();
-
   }
 
   getInitialState() {
+    let values = this.props.values;
+    let data = [
+      {c: 'no-creep', label: 'Not creepy', value: values[0], offset: 0},
+      {c: 'little-creep', label: 'A little creepy', value: values[1], offset: 225},
+      {c: 'somewhat-creep', label: 'Somewhat creepy', value: values[2], offset: 475},
+      {c: 'very-creep', label: 'Very creepy', value: values[3], offset: 725},
+      {c: 'super-creep', label: 'Super creepy', value: values[4], offset: 975}
+    ];
+    let sum = data.reduce((tally, v) => tally + v.value, 0);
+
     return {
+      totalCreepiness: sum,
+      creepinessData: data
     };
   }
 
-  render(){
+  render() {
     return (
       <div>
         <table id="creepiness-score">
           <tbody>
-            {/* TODO: Pull in vote% and apply as pixel height, td value.
-            TODO: Apply "your-vote" class to the level of the user's vote
-            Height needs to be in px so that the value sits on top of the bar  */}
-            <tr className="your-vote no-creep">
-              <th>
-                <div className="bar" style={{height: '100px'}}></div>
-                <span className="creep-label">Not creepy</span>
-                <span className="creep-face"></span>
-              </th>
-              <td className="creepiness">1%</td>
-            </tr>
-            <tr className="your-vote little-creep">
-              <th>
-                <div className="bar" style={{height: '20px'}}></div>
-                <span className="creep-label">A little creepy</span>
-                <span className="creep-face"></span>
-              </th>
-              <td className="creepiness">2%</td>
-            </tr>
-            <tr className="your-vote somewhat-creep">
-              <th>
-                <div className="bar" style={{height: '40px'}}></div>
-                <span className="creep-label">Somewhat creepy</span>
-                <span className="creep-face"></span>
-              </th>
-              <td className="creepiness">3%</td>
-            </tr>
-            <tr className="your-vote very-creep">
-              <th>
-                <div className="bar" style={{height: '25px'}}></div>
-                <span className="creep-label">Very creepy</span>
-                <span className="creep-face"></span>
-              </th>
-              <td className="creepiness">4%</td>
-            </tr>
-            <tr className="your-vote super-creep">
-              <th>
-                <div className="bar" style={{height: '65px'}}></div>
-                <span className="creep-label">Super creepy</span>
-                <span className="creep-face"></span>
-              </th>
-              <td className="creepiness">5%</td>
-            </tr>
+            {
+              this.state.creepinessData.map(data => {
+                let percent = Math.round(100 * data.value / this.state.totalCreepiness);
+                console.log(data.value, this.state.totalCreepiness, percent);
+                return (
+                  <tr key={data.c} className={`your-vote ${data.c}`}>
+                    <th>
+                      <div className="bar" style={{height: `${percent}px`}}></div>
+                      <span className="creep-label">{data.label}</span>
+                      <span className="creep-face" style={{backgroundPositionY: `-${data.offset}px`}}></span>
+                    </th>
+                    <td className="creepiness">{percent}%</td>
+                  </tr>
+                );
+              })
+            }
           </tbody>
         </table>
         <div className="row">
diff --git a/source/js/buyers-guide/components/creepometer/creepometer.jsx b/source/js/buyers-guide/components/creepometer/creepometer.jsx
index eb55c7004e5..7434d162b25 100644
--- a/source/js/buyers-guide/components/creepometer/creepometer.jsx
+++ b/source/js/buyers-guide/components/creepometer/creepometer.jsx
@@ -44,7 +44,7 @@ export default class Creepometer extends React.Component {
 
   slideMove(e) {
     if (this.state.isHandleGrabbed) {
-      let clientX, sliderLeftEdgeX, offset;
+      let clientX, sliderLeftEdgeX, offset, value=50;
 
       if (e.nativeEvent.type === `touchmove`){
         clientX = e.nativeEvent.touches[0].pageX;
@@ -53,11 +53,16 @@ export default class Creepometer extends React.Component {
       }
       sliderLeftEdgeX = this.sliderElement.getBoundingClientRect().left;
       offset = Math.floor(clientX - sliderLeftEdgeX);
+      value = Math.floor(offset / this.sliderElement.scrollWidth * this.encodedStepCount);
 
       this.setState({
         handleOffset: offset,
-        encodedValue: Math.floor(offset / this.sliderElement.scrollWidth * this.encodedStepCount)
+        encodedValue: value
       });
+
+      if (this.props.onChange) {
+        this.props.onChange(value);
+      }
     }
   }
 
diff --git a/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.jsx b/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.jsx
index 00f75d60350..df614dcac24 100644
--- a/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.jsx
+++ b/source/js/buyers-guide/components/likelyhood-chart/likelyhood-chart.jsx
@@ -5,17 +5,12 @@ import React from 'react';
 export default class LikelyhoodChart extends React.Component {
   constructor(props) {
     super(props);
-
-    this.state = this.getInitialState();
-
-  }
-
-  getInitialState() {
-    return {
-    };
   }
 
   render(){
+    let values = this.props.values;
+    let total = values[0] + values[1];
+    let perc = Math.round(100 * values[0]/total, 10);
     return (
       <div>
         <table id="likelyhood-score">
@@ -25,8 +20,8 @@ export default class LikelyhoodChart extends React.Component {
                 <span className="likely-label">Likely</span>
               </th>
               <td className="likelyhood">
-                <span className="bar" style={{width: '95%'}}></span>
-                <span className="likelyhood-words">95% Likely to buy it</span>
+                <span className="bar" style={{width: `${100 - perc}%`}}></span>
+                <span className="likelyhood-words">{100 - perc}% Likely to buy it</span>
               </td>
             </tr>
             <tr className="unlikely">
@@ -34,8 +29,8 @@ export default class LikelyhoodChart extends React.Component {
                 <span className="likely-label">Not likely</span>
               </th>
               <td className="likelyhood">
-                <span className="bar" style={{width: '5%'}}></span>
-                <span className="likelyhood-words">5% Not likely to buy it</span>
+                <span className="bar" style={{width: `${perc}%`}}></span>
+                <span className="likelyhood-words">{perc}% Not likely to buy it</span>
               </td>
             </tr>
           </tbody>