diff --git a/index.html b/index.html
index f851ea2..e1f069e 100644
--- a/index.html
+++ b/index.html
@@ -19,11 +19,15 @@
     font-weight: bold;
     font-size: 2em;
   }
-  .result {
+  .result, .clear {
     text-align: right;
     font-weight: bold;
     font-size: 2em;
   }
+  .clear {
+    text-align: center;
+    cursor: pointer;
+  }
   </style>
   <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 </head>
@@ -34,11 +38,17 @@ <h1>jQuery Calculator</h1>
     </header>
     <div id="calculator">
       <div class="row">
-        <div class="col-sm-12">
+        <div class="col-sm-2">
+          <div class="well clear">
+            Clr
+          </div>
+        </div>
+        <div class="col-sm-10">
           <div class="well result">
             0
           </div>
         </div>
+
         <div class="digits">
           <div class="col-xs-3"><div class="well digit">7</div></div>
           <div class="col-xs-3"><div class="well digit">8</div></div>
diff --git a/jquery.calc.js b/jquery.calc.js
index 78bdd05..22634d6 100644
--- a/jquery.calc.js
+++ b/jquery.calc.js
@@ -11,6 +11,7 @@
 
 jQuery(function($) {
   var digits = $('#calculator .digits .digit');
+  var clear = $('#calculator .clear');
   var calculator = { left: false, right: false, result: 0, operator: '+' };
   function calculate() {
     calculator.result = eval(calculator.left + calculator.operator + calculator.right);
@@ -30,6 +31,13 @@ jQuery(function($) {
   var leftBuffer = '';
   var rightBuffer = '';
 
+  clear.click(function() {
+    leftBuffer = '';
+    rightBuffer = '';
+    calculator = { left: false, right: false, result: 0, operator: '+' };
+    $('#calculator .result').text(calculator.result);
+  });
+
   digits.click(function() {
     var key = $(this).text();
     console.log(leftBuffer, rightBuffer);