diff --git a/Public/calculator.html b/Public/calculator.html
index 46daeee5..43e27122 100644
--- a/Public/calculator.html
+++ b/Public/calculator.html
@@ -8,42 +8,42 @@
     <link href="../assets/css/Calculator.css" rel="stylesheet" />
     <script src="../assets/Js/Calculator.js" defer></script>
   </head>
-  <body>
+  <body> 
     <div class="calculator-grid">
       <div class="output">
         <div data-previous-operand class="previous-operand"></div>
         <div data-current-operand class="current-operand"></div>
       </div>
-      <button data-operation class="special pie-button">兀</button>
-      <button data-operation class="special e-button">e</button>
-      <button data-all-clear>AC</button>
-      <button data-delete>DEL</button>
-      <button data-operation>÷</button>
+      <button data-operation class="special pie-button operationbtn">兀</button>
+      <button data-operation class="special e-button operationbtn">e</button>
+      <button data-all-clear class="operationbtn">AC</button>
+      <button data-delete class="operationbtn">DEL</button>
+      <button data-operation class="operationbtn">÷</button>
       <button data-operation class="special square">
         x<sup class="superscript-text">2</sup>
       </button>
       <button data-number>1</button>
       <button data-number>2</button>
       <button data-number>3</button>
-      <button data-operation>*</button>
+      <button data-operation class="operationbtn">*</button>
       <button data-operation class="special pow">
         x<sup class="superscript-text">y</sup>
       </button>
       <button data-number>4</button>
       <button data-number>5</button>
       <button data-number>6</button>
-      <button data-operation>+</button>
+      <button data-operation class="operationbtn">+</button>
       <button data-operation class="special squareRoot">
         <span>&#8730;</span>x
       </button>
       <button data-number>7</button>
       <button data-number>8</button>
       <button data-number>9</button>
-      <button data-operation>-</button>
+      <button data-operation class="operationbtn">-</button>
       <button data-operation class="special logBase10">log<sub class="subscript-text">10</sub></button>
       <button data-number>.</button>
       <button data-number>0</button>
-      <button data-equals class="span-two">=</button>
+      <button data-equals class="span-two ">=</button>
     </div>
   </body>
 </html>
diff --git a/assets/Images/Calculator.jpg b/assets/Images/Calculator.jpg
index df661545..8802971f 100644
Binary files a/assets/Images/Calculator.jpg and b/assets/Images/Calculator.jpg differ
diff --git a/assets/Images/calculator.jpg b/assets/Images/calculator.jpg
index df661545..8802971f 100644
Binary files a/assets/Images/calculator.jpg and b/assets/Images/calculator.jpg differ
diff --git a/assets/css/Calculator.css b/assets/css/Calculator.css
index 255717fb..464e960d 100644
--- a/assets/css/Calculator.css
+++ b/assets/css/Calculator.css
@@ -9,10 +9,11 @@
 body {
   padding: 0;
   margin: 0;
-  background: linear-gradient(to right, #00d0ff, #55ff00);
+  background: linear-gradient(45deg, #0a0a0a, #3a4452);
 }
+ 
 
-.calculator-grid {
+.calculator-grid { 
   display: grid;
   justify-content: center;
   align-content: center;
@@ -24,15 +25,28 @@ body {
 .calculator-grid>button {
   cursor: pointer;
   font-size: 2rem;
-  border: 1px solid white;
+  color: #fff;
+  
+  background-color: transparent;
+  /* border: 1px solid white; */
   outline: none;
-  background-color: rgba(255, 255, 255, .75);
+  /* background-color: rgba(255, 255, 255, .75); */
 }
 
 .calculator-grid>button:hover {
+  color: #0a0a0a;
   background-color: rgba(255, 255, 255, .9);
 }
 
+.operationbtn{ 
+  color: #fbff00 !important;
+  background: #1e1919 !important;
+}
+.operationbtn:hover{ 
+  background-color: #000 !important;
+  
+}
+
 .pie-button {
   font-size: 1.5rem !important;
   font-weight: bold;
@@ -47,12 +61,19 @@ body {
 }
 
 .span-two {
+  color: white !important;
+  font-size: 32px !important;
+  font-weight: 800;
+  background:  orangered !important;
   grid-column: span 2;
 }
+.span-two:hover{
+  background: rgba(255, 68, 0, 0.888) !important;
+}
 
 .output {
   grid-column: 1 / -1;
-  background-color: rgba(0, 0, 0, 0.74);
+  background-color: #0000006a;
   display: flex;
   align-items: flex-end;
   justify-content: space-around;
