diff --git a/src/assets/App.css b/src/assets/App.css
index c0bfd1a..cb1cbd1 100644
--- a/src/assets/App.css
+++ b/src/assets/App.css
@@ -637,11 +637,24 @@ button {
         width: 100% !important; } }
     .ballots-about-i_name {
       width: 25%; }
+    .ballots-about-i_action {
+      width: 15%; }
+    .ballots-about-i_type {
+      width: 15%; }
     .ballots-about-i_proposal {
       width: 30%; }
     .ballots-about-i_mining-key {
       width: 30%;
       word-break: break-all; }
+    .ballots-about-i_proposed-min-threshold {
+      width: 60%;
+      word-break: break-all; }
+    .ballots-about-i_contract-type {
+      width: 30%;
+      word-break: break-all; }
+    .ballots-about-i_proposed-address {
+      width: 30%;
+      word-break: break-all; }
     .ballots-about-i_time {
       width: 15%;
       text-align: right; }
diff --git a/src/assets/src/assets/App.css b/src/assets/src/assets/App.css
index c0bfd1a..cb1cbd1 100644
--- a/src/assets/src/assets/App.css
+++ b/src/assets/src/assets/App.css
@@ -637,11 +637,24 @@ button {
         width: 100% !important; } }
     .ballots-about-i_name {
       width: 25%; }
+    .ballots-about-i_action {
+      width: 15%; }
+    .ballots-about-i_type {
+      width: 15%; }
     .ballots-about-i_proposal {
       width: 30%; }
     .ballots-about-i_mining-key {
       width: 30%;
       word-break: break-all; }
+    .ballots-about-i_proposed-min-threshold {
+      width: 60%;
+      word-break: break-all; }
+    .ballots-about-i_contract-type {
+      width: 30%;
+      word-break: break-all; }
+    .ballots-about-i_proposed-address {
+      width: 30%;
+      word-break: break-all; }
     .ballots-about-i_time {
       width: 15%;
       text-align: right; }
diff --git a/src/assets/stylesheets/ballots/about.scss b/src/assets/stylesheets/ballots/about.scss
index 23771ac..9c70b90 100644
--- a/src/assets/stylesheets/ballots/about.scss
+++ b/src/assets/stylesheets/ballots/about.scss
@@ -35,6 +35,14 @@
       width: 25%;
     }
 
+    &_action {
+      width: 15%;
+    }
+
+    &_type {
+      width: 15%;
+    }
+
     &_proposal {
       width: 30%;
     }
@@ -44,6 +52,21 @@
       word-break: break-all;
     }
 
+    &_proposed-min-threshold {
+      width: 60%;
+      word-break: break-all;
+    }
+
+    &_contract-type {
+      width: 30%;
+      word-break: break-all;
+    }
+
+    &_proposed-address {
+      width: 30%;
+      word-break: break-all;
+    }
+
     &_time {
       width: 15%;
       text-align: right;
diff --git a/src/components/BallotKeysCard.jsx b/src/components/BallotKeysCard.jsx
new file mode 100644
index 0000000..89f19f2
--- /dev/null
+++ b/src/components/BallotKeysCard.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { inject, observer } from "mobx-react";
+
+@inject("commonStore", "contractsStore", "ballotsStore")
+@observer
+export class BallotKeysCard extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render () {
+    return (
+      <div className="ballots-i">
+        <div className="ballots-about">
+          <div className="ballots-about-i ballots-about-i_name">
+            <div className="ballots-about-td">
+              <p className="ballots-about-i--title">Name</p>
+            </div>
+            <div className="ballots-about-td">
+              <p className="ballots-i--name">Suleyman Duyar</p>
+              <p className="ballots-i--created">31/10/2017 7:22 AM</p>
+            </div>
+          </div>
+          <div className="ballots-about-i ballots-about-i_action">
+            <div className="ballots-about-td">
+              <p className="ballots-about-i--title">Action</p>
+            </div>
+            <div className="ballots-about-td">
+              <p>Remove</p>
+            </div>
+          </div>
+          <div className="ballots-about-i ballots-about-i_type">
+            <div className="ballots-about-td">
+              <p className="ballots-about-i--title">Key type</p>
+            </div>
+            <div className="ballots-about-td">
+              <p>Mining</p>
+            </div>
+          </div>
+          <div className="ballots-about-i ballots-about-i_mining-key">
+            <div className="ballots-about-td">
+              <p className="ballots-about-i--title">Affected key</p>
+            </div>
+            <div className="ballots-about-td">
+              <p>0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41</p>
+            </div>
+          </div>
+          <div className="ballots-about-i ballots-about-i_time">
+            <div className="ballots-about-td">
+              <p className="ballots-about-i--title">Time</p>
+            </div>
+            <div className="ballots-about-td">
+              <p className="ballots-i--time">17:49</p>
+              <p className="ballots-i--to-close">To close</p>
+            </div>
+          </div>
+        </div>
+        <div className="ballots-i-scale">
+          <div className="ballots-i-scale-column">
+            <a href="#" className="ballots-i--vote ballots-i--vote_yes">Vote</a>
+            <div className="vote-scale--container">
+              <p className="vote-scale--value">Yes</p>
+              <p className="vote-scale--votes">Votes: 40</p>
+              <p className="vote-scale--percentage">40%</p>
+              <div className="vote-scale">
+                <div className="vote-scale--fill vote-scale--fill_yes" style={{width: '50%'}}></div>
+              </div>
+            </div>
+          </div>
+          <div className="ballots-i-scale-column">
+            <div className="vote-scale--container">
+              <p className="vote-scale--value">No</p>
+              <p className="vote-scale--votes">Votes: 10</p>
+              <p className="vote-scale--percentage">20%</p>
+              <div className="vote-scale">
+                <div className="vote-scale--fill vote-scale--fill_no" style={{width: '30%'}}></div>
+              </div>
+            </div>
+            <a href="#" className="ballots-i--vote ballots-i--vote_no">Vote</a>
+          </div>
+        </div>
+        <div className="info">
+          Minimum 3 from 12 validators  required to pass the proposal
+        </div>
+        <hr />
+        <div className="ballots-footer">
+          <a href="#" className="ballots-footer-finalize">Finalize ballot</a>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/BallotMinThresholdCard.jsx b/src/components/BallotMinThresholdCard.jsx
new file mode 100644
index 0000000..faa2aef
--- /dev/null
+++ b/src/components/BallotMinThresholdCard.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { inject, observer } from "mobx-react";
+
+@inject("commonStore", "contractsStore", "ballotsStore")
+@observer
+export class BallotMinThresholdCard extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render () {
+    return (
+      <div className="ballots-i">
+        <div className="ballots-about">
+          <div className="ballots-about-i ballots-about-i_name">
+            <div className="ballots-about-td">
+              <p className="ballots-about-i--title">Name</p>
+            </div>
+            <div className="ballots-about-td">
+              <p className="ballots-i--name">Suleyman Duyar</p>
+              <p className="ballots-i--created">31/10/2017 7:22 AM</p>
+            </div>
+          </div>
+          <div className="ballots-about-i ballots-about-i_proposed-min-threshold">
+            <div className="ballots-about-td">
+              <p className="ballots-about-i--title">Proposed min gthreshold</p>
+            </div>
+            <div className="ballots-about-td">
+              <p>0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41</p>
+            </div>
+          </div>
+          <div className="ballots-about-i ballots-about-i_time">
+            <div className="ballots-about-td">
+              <p className="ballots-about-i--title">Time</p>
+            </div>
+            <div className="ballots-about-td">
+              <p className="ballots-i--time">17:49</p>
+              <p className="ballots-i--to-close">To close</p>
+            </div>
+          </div>
+        </div>
+        <div className="ballots-i-scale">
+          <div className="ballots-i-scale-column">
+            <a href="#" className="ballots-i--vote ballots-i--vote_yes">Vote</a>
+            <div className="vote-scale--container">
+              <p className="vote-scale--value">Yes</p>
+              <p className="vote-scale--votes">Votes: 40</p>
+              <p className="vote-scale--percentage">40%</p>
+              <div className="vote-scale">
+                <div className="vote-scale--fill vote-scale--fill_yes" style={{width: '50%'}}></div>
+              </div>
+            </div>
+          </div>
+          <div className="ballots-i-scale-column">
+            <div className="vote-scale--container">
+              <p className="vote-scale--value">No</p>
+              <p className="vote-scale--votes">Votes: 10</p>
+              <p className="vote-scale--percentage">20%</p>
+              <div className="vote-scale">
+                <div className="vote-scale--fill vote-scale--fill_no" style={{width: '30%'}}></div>
+              </div>
+            </div>
+            <a href="#" className="ballots-i--vote ballots-i--vote_no">Vote</a>
+          </div>
+        </div>
+        <div className="info">
+          Minimum 3 from 12 validators  required to pass the proposal
+        </div>
+        <hr />
+        <div className="ballots-footer">
+          <a href="#" className="ballots-footer-finalize">Finalize ballot</a>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/components/BallotCard.jsx b/src/components/BallotProxyCard.jsx
similarity index 88%
rename from src/components/BallotCard.jsx
rename to src/components/BallotProxyCard.jsx
index 60a72bb..8b41fe1 100644
--- a/src/components/BallotCard.jsx
+++ b/src/components/BallotProxyCard.jsx
@@ -3,7 +3,7 @@ import { inject, observer } from "mobx-react";
 
 @inject("commonStore", "contractsStore", "ballotsStore")
 @observer
-export class BallotCard extends React.Component {
+export class BallotProxyCard extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -21,18 +21,17 @@ export class BallotCard extends React.Component {
               <p className="ballots-i--created">31/10/2017 7:22 AM</p>
             </div>
           </div>
-          <div className="ballots-about-i ballots-about-i_proposal">
+          <div className="ballots-about-i ballots-about-i_contract-type">
             <div className="ballots-about-td">
-              <p className="ballots-about-i--title">Proposal</p>
+              <p className="ballots-about-i--title">Contract type</p>
             </div>
             <div className="ballots-about-td">
-              <p>Remove notary Shawn Grey, Vermont ID: 55512345 ...</p>
-              <a href="#" className="ballots-i--see-all-proposal">See All</a>
+              <p>VotingToChangeKeys</p>
             </div>
           </div>
-          <div className="ballots-about-i ballots-about-i_mining-key">
+          <div className="ballots-about-i ballots-about-i_proposed-address">
             <div className="ballots-about-td">
-              <p className="ballots-about-i--title">Mining key</p>
+              <p className="ballots-about-i--title">Proposed contract address</p>
             </div>
             <div className="ballots-about-td">
               <p>0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41</p>
diff --git a/src/components/Ballots.jsx b/src/components/Ballots.jsx
index 1533c6a..a48a8c3 100644
--- a/src/components/Ballots.jsx
+++ b/src/components/Ballots.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { inject, observer, observable } from "mobx-react";
-import { BallotCard } from "./BallotCard";
 import "babel-polyfill";
 
 @inject("commonStore", "contractsStore", "ballotStore", "ballotsStore")
diff --git a/src/stores/ContractsStore.js b/src/stores/ContractsStore.js
index e517bd4..a28755a 100644
--- a/src/stores/ContractsStore.js
+++ b/src/stores/ContractsStore.js
@@ -7,7 +7,9 @@ import VotingToChangeProxy from '../contracts/VotingToChangeProxy.contract'
 import ballotStore from './BallotStore'
 import ballotsStore from './BallotsStore'
 import getWeb3 from '../getWeb3';
-import { BallotCard } from "../components/BallotCard";
+import { BallotKeysCard } from "../components/BallotKeysCard";
+import { BallotMinThresholdCard } from "../components/BallotMinThresholdCard";
+import { BallotProxyCard } from "../components/BallotProxyCard";
 
 import "babel-polyfill";
 
@@ -88,7 +90,7 @@ class ContractsStore {
     	console.log("allKeysBallotsIDs:", allKeysBallotsIDs)
 	    this.activeKeysBallotsIDs = allKeysBallotsIDs;
 	    for (let i = 0; i < allKeysBallotsIDs.length; i++) {
-	    	ballotsStore.ballotCards.push(<BallotCard id={this.activeKeysBallotsIDs[i]} type={ballotStore.BallotType.keys}/>);
+	    	ballotsStore.ballotCards.push(<BallotKeysCard id={this.activeKeysBallotsIDs[i]} type={ballotStore.BallotType.keys}/>);
 	    }
 	}
 
@@ -100,7 +102,7 @@ class ContractsStore {
     	console.log("allMinThresholdBallotsIDs:", allMinThresholdBallotsIDs)
 	    this.activeMinThresholdBallotsIDs = allMinThresholdBallotsIDs;
 	    for (let i = 0; i < allMinThresholdBallotsIDs.length; i++) {
-	    	ballotsStore.ballotCards.push(<BallotCard id={this.activeMinThresholdBallotsIDs[i]} type={ballotStore.BallotType.keys}/>);
+	    	ballotsStore.ballotCards.push(<BallotMinThresholdCard id={this.activeMinThresholdBallotsIDs[i]} type={ballotStore.BallotType.keys}/>);
 	    }
 	}
 
@@ -112,7 +114,7 @@ class ContractsStore {
     	console.log("allProxyBallotsIDs:", allProxyBallotsIDs)
 	    this.activeProxyBallotsIDs = allProxyBallotsIDs;
 	    for (let i = 0; i < allProxyBallotsIDs.length; i++) {
-	    	ballotsStore.ballotCards.push(<BallotCard id={this.activeProxyBallotsIDs[i]} type={ballotStore.BallotType.keys}/>);
+	    	ballotsStore.ballotCards.push(<BallotProxyCard id={this.activeProxyBallotsIDs[i]} type={ballotStore.BallotType.keys}/>);
 	    }
 	}
 }