diff --git a/src/pages/AddNewBill.css b/src/pages/AddNewBill.css
index ba22a79..aa697a3 100644
--- a/src/pages/AddNewBill.css
+++ b/src/pages/AddNewBill.css
@@ -2,9 +2,10 @@
     max-width: 20%;
     background-color: rgb(223, 245, 229);
     padding: 10px;
+    margin: 1%;
 }
 .widget_header {
-    margin:0px;
+    margin: 0px;
     margin-bottom: 20px;
     position: relative;
 }
diff --git a/src/pages/AddNewBill.js b/src/pages/AddNewBill.js
index 3b5c697..9ac1097 100644
--- a/src/pages/AddNewBill.js
+++ b/src/pages/AddNewBill.js
@@ -17,7 +17,7 @@ export default function AddNewBill() {
                             <p>Leisure</p>
                             <p>Gas</p>
                         </div>
-                    
+
                 </div>
                 <button>Add Bill</button>  
                 </div>
diff --git a/src/pages/CurrentBalance.css b/src/pages/CurrentBalance.css
new file mode 100644
index 0000000..c569276
--- /dev/null
+++ b/src/pages/CurrentBalance.css
@@ -0,0 +1,29 @@
+.current_balance_widget {
+    max-width: 20%;
+    background-color: rgb(223, 245, 229);
+    padding: 10px;
+    margin: 1%;
+}
+.widget_header {
+    margin: 0px;
+    margin-bottom: 20px;
+    position: relative;
+}
+
+img {
+    position: relative;
+    float: left;
+    height: 40px;
+    padding: 5%;
+}
+
+.current_balance_widget h1 {
+    padding-left: 70px;
+    margin: 0;
+}
+.current_balance_widget h6 {
+    color: green;
+    margin: 0;
+    margin-bottom: 10px;
+    padding-left: 70px;
+}
diff --git a/src/pages/CurrentBalance.js b/src/pages/CurrentBalance.js
new file mode 100644
index 0000000..99e5239
--- /dev/null
+++ b/src/pages/CurrentBalance.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import './CurrentBalance.css'
+import logo from './widget_logos/current_balance_logo.png';
+
+export default function CurrentBalance() {
+    return (
+        <>
+            <div class="current_balance_widget">
+                <h5 class="widget_header">Current Balance</h5> 
+                <img src={logo} />          
+                <h1>$1238.56</h1>
+                <h6>+ $179.97 (17%) last month</h6>
+            </div>
+        </>
+        
+    )
+}
\ No newline at end of file
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 1b20f7f..88458df 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -1,12 +1,12 @@
  import AddNewBill from './AddNewBill'
+ import CurrentBalance from './CurrentBalance'
  
  export default function Dashboard() {
-
     return (
         <>
             <h1>Dashboard</h1>
+            <CurrentBalance />
             <AddNewBill />
         </>
-        
     )
  }
\ No newline at end of file
diff --git a/src/pages/widget_logos/current_balance_logo.png b/src/pages/widget_logos/current_balance_logo.png
new file mode 100644
index 0000000..819acbd
Binary files /dev/null and b/src/pages/widget_logos/current_balance_logo.png differ