diff --git a/client/src/components/dashboard/DonorDashboard.css b/client/src/components/dashboard/DonorDashboard.css
new file mode 100644
index 00000000..e45177e0
--- /dev/null
+++ b/client/src/components/dashboard/DonorDashboard.css
@@ -0,0 +1,11 @@
+.circular .inner{
+    position: absolute;
+    z-index: 6;
+    top: 50%;
+    left: 50%;
+    height: 80px;
+    width: 80px;
+    margin: -40px 0 0 -40px;
+    background: red;
+    border-radius: 100%;
+  }
\ No newline at end of file
diff --git a/client/src/components/dashboard/DonorDashboard.js b/client/src/components/dashboard/DonorDashboard.js
index 65b0bf1e..67185dea 100644
--- a/client/src/components/dashboard/DonorDashboard.js
+++ b/client/src/components/dashboard/DonorDashboard.js
@@ -1,9 +1,27 @@
 import React from 'react'
+import SideNav from './StoreDashboard/SideNav'
+import IntroCard from './StoreDashboard/IntroCard'
+import Card from "react-bootstrap/Card";
+import DonorDashStyling from './DonorDashboard.css'
+import Progress from './DonorDashboard/ProgressBar';
+import TotalDons from './DonorDashboard/TotalDons';
 
 function DonorDashboard() {
+    const user = {name:'Anuj',email:'anujpillai1201@gmail.com'}
     return (
-        <div>
-            DonorDashboard
+        <div className="Container">
+            <div class="row">
+                <div class="col-sm-2">
+                    <div className="Content-left">
+                        <SideNav />
+                    </div>
+                </div>
+                <div class="col-sm-10">
+                    <IntroCard user={user}/>
+                    <TotalDons></TotalDons>
+                    <Progress></Progress>
+                </div>
+            </div>
         </div>
     )
 }
diff --git a/client/src/components/dashboard/DonorDashboard/ProgressBar.js b/client/src/components/dashboard/DonorDashboard/ProgressBar.js
new file mode 100644
index 00000000..7d56eaf9
--- /dev/null
+++ b/client/src/components/dashboard/DonorDashboard/ProgressBar.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import styling from './styler.css'
+import Card from "react-bootstrap/Card";
+
+function ProgressBar() {
+    return (
+        <div class="progress-body">
+            <Card className='progress-card'>
+                <h1 className='total-title'>Time since last donation : 69</h1>
+            </Card>
+        </div>
+    )
+}
+
+export default ProgressBar
diff --git a/client/src/components/dashboard/DonorDashboard/TotalDons.js b/client/src/components/dashboard/DonorDashboard/TotalDons.js
new file mode 100644
index 00000000..b65b3614
--- /dev/null
+++ b/client/src/components/dashboard/DonorDashboard/TotalDons.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Card from "react-bootstrap/Card";
+
+function TotalDons() {
+    return (
+        <div>
+            <Card className='total-card'>
+                <h1 className='total-title'>Total Donations : 3</h1>
+            </Card>
+        </div>
+    )
+}
+
+export default TotalDons
\ No newline at end of file
diff --git a/client/src/components/dashboard/DonorDashboard/styler.css b/client/src/components/dashboard/DonorDashboard/styler.css
new file mode 100644
index 00000000..853b7feb
--- /dev/null
+++ b/client/src/components/dashboard/DonorDashboard/styler.css
@@ -0,0 +1,20 @@
+.total-card{
+    width: 100%;
+    margin: auto;
+    margin-top: 100px;
+    height: 120px;
+}
+.progress-card{
+    width: 100%;
+    margin: auto;
+    margin-top: 30px;
+    height: 120px;
+}
+.total-title{
+    font-size: 60px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 600;
+    text-align: left;
+    margin-left: 10%;
+    margin-top: 2%;
+}
\ No newline at end of file
diff --git a/client/src/components/dashboard/StoreDashboard.css b/client/src/components/dashboard/StoreDashboard.css
index b6619dea..cbd3ef0f 100644
--- a/client/src/components/dashboard/StoreDashboard.css
+++ b/client/src/components/dashboard/StoreDashboard.css
@@ -1,9 +1,7 @@
-
 .Container{
-    height: 100%;
 }
 .Content-right{
-    height: 100%;
+    height: auto;
 }
 .Content-left{
     height: 100%;
diff --git a/client/src/components/dashboard/StoreDashboard/styler.css b/client/src/components/dashboard/StoreDashboard/styler.css
index 95a33d74..c5624a89 100644
--- a/client/src/components/dashboard/StoreDashboard/styler.css
+++ b/client/src/components/dashboard/StoreDashboard/styler.css
@@ -111,7 +111,6 @@
 {
     height: 100%;
     width: 15%;
-    background-color: #4CCCC0;
 }
 
 .medicine-card{
diff --git a/client/src/index.css b/client/src/index.css
index bc047dab..7c665b12 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -10,6 +10,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: #DDF0EE;
 }
 
 code {
diff --git a/client/src/views/Billing/Billing.css b/client/src/views/Billing/Billing.css
index 40488bda..36d5e73c 100644
--- a/client/src/views/Billing/Billing.css
+++ b/client/src/views/Billing/Billing.css
@@ -2,7 +2,7 @@
     height: 160px;
     background: #E8E7FE;
     display: flex;
-    border: 1px solid #4F46E5;
+    border: 1px solid #40ccc4;
 }
 
 .billingtoph1{
@@ -29,7 +29,7 @@
 }
 
 .formhead{
-    background: #4F46E5;
+    background: #40ccc4;
     padding: 19px;
     font-weight: normal;
     font-size: 18px;
@@ -75,7 +75,7 @@
 .formsubmit{
     width: 223px;
     height: 37px;
-    background: #4F46E5;
+    background: #40ccc4;
     color: white;
     margin-left: auto;
     margin-right: auto;
@@ -117,7 +117,7 @@
 
 .removebutton{
     width: fit-content;
-    background: #4F46E5;
+    background: #40ccc4;
     color: white;
     margin-right: 14px;
     padding: 7px;
@@ -126,7 +126,7 @@
 
 .addbutton{
     width: fit-content;
-    background: #4F46E5;
+    background: #40ccc4;
     color: white;
     margin-right: 14px;
     padding: 7px;
diff --git a/client/src/views/Billing/Billing.js b/client/src/views/Billing/Billing.js
index 59788d03..9d9a192b 100644
--- a/client/src/views/Billing/Billing.js
+++ b/client/src/views/Billing/Billing.js
@@ -2,6 +2,10 @@ import React, { useState } from 'react'
 import './Billing.css'
 import { v4 as uuidv4 } from 'uuid';
 import axios from 'axios';
+import InvoiceForm from '../../components/dashboard/StoreDashboard/InvoiceForm';
+import TitleInvoice from '../../components/dashboard/StoreDashboard/TitleInvoice';
+import SideNav from '../../components/dashboard/StoreDashboard/SideNav';
+
 const Billing = () => {
     const [formkey, setFormkey] = useState(2);
     const [amount, setAmount] = useState();
@@ -67,63 +71,70 @@ const Billing = () => {
     }
     return (
         <div className='billing'>
-            <div className="billingtop">
-                <h1 className='billingtoph1'>Billing</h1>
-            </div>
-            <div className='billingbottom'>
-                <form className='billingform' onSubmit={handleSubmit}>
-                    <h1 className='formhead'>Bill 12abc435</h1>
-                    <input className ="forminput" type='text' placeholder="Customer Name" value={customerName} onChange={handleCustomerName}/>
-                    <input className ="forminput" type='text' placeholder="Customer Contact" value={customerContact} onChange={handleCustomerContact}/>
-                    <input className ="forminput" type='text' placeholder="Reffered By" value={referredBy} onChange={handleReferredBy}/>
-                    <div className='formlabel'>
-                        <label className='label'>Bill Date</label>
+            <div class="row">
+                <div class="col-sm-2">
+                    <div className="Content-left">
+                        <SideNav></SideNav> 
                     </div>
-                    <input className ="forminput" type='date' placeholder="" value={billDate} onChange={handleBillDate}/>
-                    <div className='formlabeldropdown'>
-                        <label className='label'>Choose Medicine</label>
-                        <label className='label'>Quantity</label>
+                </div>
+                <div class="col-sm-10">
+                    <TitleInvoice></TitleInvoice>
+                    <div className='billingbottom'>
+                        <form className='billingform' onSubmit={handleSubmit}>
+                            <h1 className='formhead'>Bill 12abc435</h1>
+                            <input className ="forminput" type='text' placeholder="Customer Name" value={customerName} onChange={handleCustomerName}/>
+                            <input className ="forminput" type='text' placeholder="Customer Contact" value={customerContact} onChange={handleCustomerContact}/>
+                            <input className ="forminput" type='text' placeholder="Reffered By" value={referredBy} onChange={handleReferredBy}/>
+                            <div className='formlabel'>
+                                <label className='label'>Bill Date</label>
+                            </div>
+                            <input className ="forminput" type='date' placeholder="" value={billDate} onChange={handleBillDate}/>
+                            <div className='formlabeldropdown'>
+                                <label className='label'>Choose Medicine</label>
+                                <label className='label'>Quantity</label>
+                            </div>
+                            {inputFields.map((inputField , index)=> (
+                                    <div className="formfields">
+                                        <select
+                                            name="medicinename"
+                                            label="Medicine Name"
+                                            value={inputFields.medicineName}
+                                            onChange={event => handleChangeInput(inputField.id, event)}
+                                            className='medicinename'
+                                        >
+                                            <option value="none" selected disabled hidden>Select an Option</option>
+                                            <option value="String">String</option>
+                                            <option value="Alphanumeric">Alphanumeric</option>
+                                            <option value="Number">Number</option>
+                                            <option value="Date">Date</option>
+                                        </select>
+                                        <input
+                                            name="medicinequantity"
+                                            label="Medicine Quantity"
+                                            onChange={event => handleChangeInput(inputField.id, event)}
+                                            className = "medicinequantity"  
+                                        />
+                                            <button disabled={inputFields.length === 1} onClick={() => handleRemoveFields(index)} className='removebutton'>
+                                                Remove 
+                                            </button>
+                                            {index === inputFields.length - 1?
+                                                <button onClick={handleAddFields} className='addbutton'>
+                                                    Add
+                                                </button>
+                                            :null}
+                                    </div>
+                                ))}
+                                    <h1 className='totalmoney'>Total Amount - 200</h1>
+                                <button
+                                    type="submit"
+                                    className='formsubmit'
+                                    onClick = {(e) => handleSubmit(e, customerName, customerContact, referredBy, billDate, inputFields)}
+                                    >
+                                    Submit
+                                </button>
+                        </form>
                     </div>
-                    {inputFields.map((inputField , index)=> (
-                              <div className="formfields">
-                                <select
-                                    name="medicinename"
-                                    label="Medicine Name"
-                                    value={inputFields.medicineName}
-                                    onChange={event => handleChangeInput(inputField.id, event)}
-                                    className='medicinename'
-                                >
-                                    <option value="none" selected disabled hidden>Select an Option</option>
-                                    <option value="String">String</option>
-                                    <option value="Alphanumeric">Alphanumeric</option>
-                                    <option value="Number">Number</option>
-                                    <option value="Date">Date</option>
-                                </select>
-                                <input
-                                    name="medicinequantity"
-                                    label="Medicine Quantity"
-                                    onChange={event => handleChangeInput(inputField.id, event)}
-                                    className = "medicinequantity"  
-                                />
-                                    <button disabled={inputFields.length === 1} onClick={() => handleRemoveFields(index)} className='removebutton'>
-                                        Remove 
-                                    </button>
-                                    {index === inputFields.length - 1?
-                                        <button onClick={handleAddFields} className='addbutton'>
-                                            Add
-                                        </button>
-                                    :null}
-                              </div>
-                          ))}
-                            <h1 className='totalmoney'>Total Amount - 200</h1>
-                           <button
-                            type="submit"
-                            className='formsubmit'
-                            onClick = {(e) => handleSubmit(e, customerName, customerContact, referredBy, billDate, inputFields)}
-                            >
-                            Submit
-                          </button>
-                </form>
+                </div>
             </div>
         </div>
     )
diff --git a/client/src/views/Invoice/Invoice.css b/client/src/views/Invoice/Invoice.css
index 554fe6c7..41d93aee 100644
--- a/client/src/views/Invoice/Invoice.css
+++ b/client/src/views/Invoice/Invoice.css
@@ -1,6 +1,7 @@
 .Container{
-    height: 800px;
     width: 100%;
+    padding-bottom: 30px;
+    background: #DDF0EE;
 }
 .invoice-card{
     margin-top: 20px;