diff --git a/web/app/app.js b/web/app/app.js
index 39305852..d23e2fd6 100644
--- a/web/app/app.js
+++ b/web/app/app.js
@@ -8,7 +8,8 @@ angular.module('myApp', [
   'myApp.wallets',
   'myApp.settings',
   'myApp.version',
-  'myApp.buy'
+  'myApp.buy',
+  'myApp.stringUtils'
 ]).
 config(['$locationProvider', '$routeProvider' ,'NotificationProvider',  function($locationProvider, $routeProvider, NotificationProvider) {
   NotificationProvider.setOptions({
diff --git a/web/app/components/buy/buy.html b/web/app/components/buy/buy.html
index 1eb2f6b5..6d787233 100644
--- a/web/app/components/buy/buy.html
+++ b/web/app/components/buy/buy.html
@@ -1,30 +1,25 @@
 <div class="col-md-12">
-    <div class="form col-md-12">
+   <div class="form col-md-12">
         <div class="row">
-          <label>Exchange: </label><select ng-model="selectedExchange" class="form-control">
-                <option ng-repeat="exchange in enabledExchanges">{{exchange.Name}}</option>
-            </select>
+          <label>Exchange: {{$ctrl.exchange.exchangeName}}
         </div>
         <div class="row">
-            <label>Currency: </label><select ng-model="selectedCurrency" class="form-control">
-                <option ng-repeat="currency in selectedExchange.Currencies">{{currency}}</option>
-            </select>
+            <label>Currency: </label>{{$ctrl.currency.CryptoCurrency}}
         </div>
         <div class="row">
-            <label>Lowest Ask: </label><label>{{selectedCurrency.Price}} 0.987359872639587623USD</label>
+            <label>Lowest Ask: </label><label>{{$ctrl.currency.Last}}</label>
         </div>
         <div class="row">
-            <label>Price: </label><input class="form-control" type="number" placeholder="How much?" />
+            <label>Price: </label><input pattern="\d*" class="form-control" ng-model="price" type="text" placeholder="How much?" />
         </div>
         <div class="row">
-            <label>Amount: </label><input class="form-control" type="number" placeholder="How much?" />
+            <label>Amount: </label><input  pattern="\d*" ng-model="amount" class="form-control" type="text" placeholder="How much?" />
         </div>
-        <div class="row">
+        <div class="row" ng-show="price > 0 && amount > 0">
             <label>Total: </label><label>{{price * amount}}</label>
         </div>
-
         <div class="row">
-            <button class="form-control btn btn-success">Place Order</button>
+            <button ng-click="placeOrder()" class="form-control btn btn-success">Place Order</button>
         </div>
     </div>
 <div>
\ No newline at end of file
diff --git a/web/app/components/buy/buy.js b/web/app/components/buy/buy.js
index e4081a37..7af228b1 100644
--- a/web/app/components/buy/buy.js
+++ b/web/app/components/buy/buy.js
@@ -3,18 +3,30 @@ angular.module('myApp.buy',[]).component('buy', {
   templateUrl: '/components/buy/buy.html',
   controller:'BuyController',
    bindings: {
-    message: '='
-  }
-}).controller('BuyController', function ($http, Notification) {
-  //This contrioller will retrieve all enabled exchanges, 
-  //their enabled currencies and the currency's latest ask
-  //This call will be used for selling too
-  //
-  //This will allow a user to make decisions based onthe latest information to them
-  //It will auto poll every X seconds (at least until a push method is implemented)
-  //When all fields are valid, a purchase order will be sent to and handle by gocryptoServer
+      exchange: '=',
+      currency:'=' 
+  }, controller: function ($scope, $http, Notification) {
+     
+     $scope.GetLatestDataFromExchangeCurrency = function () {
+       $http.get('/GetLatestDataFromExchangeCurrency?exhange=' + $scope.exchange.exchangeName + '&currency='+ $scope.currency.CryptoCurrency).success(function (data) {
+         $scope.currency.Last = data.Last;
+         $scope.currency.Volume = data.Volume;
+       });
+     }  
 
-  //Could also hard-type the exchange and currency via attributes on the component for quick use
-  //Or at lest controlled by passing data from other components/data
+     $scope.placeOrder = function () {
+       var obj = {};
+       obj.ExchangeName = $scope.exchange.exchangeName;
+       obj.Currency = $scope.currency;
+       obj.Price = $scope.price;
+       obj.Amount = $scope.amount;
+       obj.Amount = $scope.amount;
+       $http.post('/Command/', obj).success(function (response) {
+         Notification.success("Successfully placed order");
+       });
+     };
+  }
 });
 
+
+
diff --git a/web/app/components/filters/stringUtils.js b/web/app/components/filters/stringUtils.js
new file mode 100644
index 00000000..ea4ead34
--- /dev/null
+++ b/web/app/components/filters/stringUtils.js
@@ -0,0 +1,9 @@
+angular.module('myApp.stringUtils', [])
+  .filter('removeSpaces', [function () {
+    return function (string) {
+      if (!angular.isString(string)) {
+        return string;
+      }
+      return string.replace(/[\s]/g, '');
+    };
+  }]);
\ No newline at end of file
diff --git a/web/app/index.html b/web/app/index.html
index 0e93c805..8b1f80ff 100644
--- a/web/app/index.html
+++ b/web/app/index.html
@@ -64,5 +64,6 @@
   <script src="/components/version/version.js"></script>
   <script src="/components/version/version-directive.js"></script>
   <script src="/components/version/interpolate-filter.js"></script>
+  <script src="/components/filters/stringUtils.js"></script>
 </body>
 </html>
diff --git a/web/app/views/home/home.html b/web/app/views/home/home.html
index 5e514d5e..f36eb379 100644
--- a/web/app/views/home/home.html
+++ b/web/app/views/home/home.html
@@ -16,7 +16,7 @@
 		</div>
 		<div class="col-md-4" >
 			<h4>Buy</h4>
-			<buy exchange="POLOINEX" currency="BTC_USD"></buy>
+			<buy ng-show="selectedCurrency.Last > 0" exchange="selectedExchange" currency="selectedCurrency"></buy>
 		</div>
 		<div class="col-md-4" style=" height: 300px;">
 			<h4>Sell</h4>
@@ -36,20 +36,34 @@
 	</div>
 	<div class="col-md-4">
 		<h4>All enabled currencies</h4>
-		<div ng-repeat="exchange in exchanges">
-			<h5>{{exchange.exchangeName}}</h5>
-			<table class="table table-striped">
-				<tr>
-					<th>Currency</th>
-					<th>Last</th>
-					<th>Volume</th>
-				</tr>
-				<tr ng-repeat="value in exchange.exchangeValues">
-					<td>{{value.CryptoCurrency}}</td>
-					<td>{{value.Last}}</td>
-					<td>{{value.Volume}}</td>
-				</tr>
-			</table>
-		</div>
+<div class="panel-group" id="accordion">
+  <div class="panel panel-default" ng-repeat="exchange in exchanges">
+    <div class="panel-heading">
+      <h4 class="panel-title">
+        <a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#{{exchange.exchangeName | removeSpaces}}">
+          {{exchange.exchangeName}}
+        </a>
+      </h4>
+    </div>
+    <div id="{{exchange.exchangeName | removeSpaces}}" class="panel-collapse collapse" ng-class='{in:$first}'>
+      <div class="panel-body">
+        <table class="table table-striped">
+							<tr>
+								<th>Currency</th>
+								<th>Last</th>
+								<th>Volume</th>
+							</tr>
+							<tr  ng-repeat="value in exchange.exchangeValues">
+								<td><a href="" ng-click="reloadDashboardWithExchangeCurrency(exchange,value)">{{value.CryptoCurrency}}</a></td>
+								<td>{{value.Last}}</td>
+								<td>{{value.Volume}}</td>
+							</tr>
+						</table>
+      </div>
+    </div>
+  </div>
+</div>
+
+	
 	</div>
 </div>
\ No newline at end of file
diff --git a/web/app/views/home/home.js b/web/app/views/home/home.js
index eb4ac885..d8d6c260 100644
--- a/web/app/views/home/home.js
+++ b/web/app/views/home/home.js
@@ -24,6 +24,11 @@ angular.module('myApp.home', ['ngRoute'])
     });
   };
 
+  $scope.reloadDashboardWithExchangeCurrency = function (exchange, value) {
+    $scope.selectedExchange = exchange;
+    $scope.selectedCurrency = value;
+  };
+
   $scope.getDashboardData();
 
 });
\ No newline at end of file