diff --git a/src/Checkout.css b/src/Checkout.css
index 0d17a97..acc2e0d 100644
--- a/src/Checkout.css
+++ b/src/Checkout.css
@@ -19,3 +19,13 @@
   padding: 10px;
   border-bottom: 1px solid lightgray;
 }
+
+.checkout__right{
+  position: fixed;
+  right: 0;
+  margin-right: 10px;
+}
+
+.subtotal-calculate {
+  margin-left: 47rem;
+}
\ No newline at end of file
diff --git a/src/Checkout.js b/src/Checkout.js
index fc16274..a86d889 100644
--- a/src/Checkout.js
+++ b/src/Checkout.js
@@ -1,53 +1,70 @@
+/* eslint-disable no-unused-vars */
 import React from 'react'
 import './Checkout.css'
 import Subtotal from "./Subtotal";
 import CheckoutProduct from './CheckoutProduct';
-import{useStateValue} from './StateProvider';
+import { getBasketTotal } from "./reducer";
+import { useStateValue } from './StateProvider';
 import FlipMove from 'react-flip-move';
+import CurrencyFormat from "react-currency-format";
 
-function Checkout() {
-    const[{basket,user},dispatch]=useStateValue();
+function Checkout({ price }) {
+    const [{ basket, user }, dispatch] = useStateValue();
 
-    const Finalproducts=({basket})=>(
+    const Finalproducts = ({ basket }) => (
         <FlipMove duration={750} easing="ease-out">
-    {basket.map(article => (
-      <article key={basket.id} {...basket} />
-    ))}
-  </FlipMove>
+            {basket.map(article => (
+                <article key={basket.id} {...basket} />
+            ))}
+        </FlipMove>
     );
 
-
-      
     return (
         <div className="checkout">
-            
+
             <div className="checkout__left">
-                <img  className="checkout__add"src="https://th.bing.com/th/id/R.80ae5f35f1c44b0f930163d23226366c?rik=%2bJmqA3%2bhXOe%2byw&riu=http%3a%2f%2fwww.newburyportef.org%2fwp-content%2fuploads%2f2016%2f11%2famazon_smile_newbanner.png&ehk=QYz%2b3M45putNX9M8TW4b9l%2fDWCIrYVY34oQs0qJZQCA%3d&risl=&pid=ImgRaw&r=0" alt="Checkout Add"/>
+                {/*<img className="checkout__add" src="https://th.bing.com/th/id/R.80ae5f35f1c44b0f930163d23226366c?rik=%2bJmqA3%2bhXOe%2byw&riu=http%3a%2f%2fwww.newburyportef.org%2fwp-content%2fuploads%2f2016%2f11%2famazon_smile_newbanner.png&ehk=QYz%2b3M45putNX9M8TW4b9l%2fDWCIrYVY34oQs0qJZQCA%3d&risl=&pid=ImgRaw&r=0" alt="Checkout Add" />*/}
                 <div>
                     <h3>Hello, {user?.email}</h3>
                     <h1 className="checkout__title">Your Shopping Basket</h1>
-                    
-                        {/*This will send all the products we are adding in our basket to the shopping list using the basket variable*/}
-                        {basket.map((item)=>(
+
+                    {/*This will send all the products we are adding in our basket to the shopping list using the basket variable*/}
+                    {basket.map((item) => (
                         <CheckoutProduct
-                        id={item.id}
-                        price={item.price}
-                        rating={item.rating}
-                        title={item.title}
-                        image={item.image}
-                        reviews={item.reviews}
+                            id={item.id}
+                            price={item.price}
+                            rating={item.rating}
+                            title={item.title}
+                            image={item.image}
+                            reviews={item.reviews}
                         />
-                        ))}
-                    
+                    ))}
                 </div>
+
+                <p className="checkout__title"></p>
+
+                {/*The Subtotal that is printed below !*/}
+                <CurrencyFormat
+                    renderText={(value) => (
+                        <>
+                            <p className="subtotal-calculate">
+                                Subtotal ({basket.length} items) : <strong>{value}</strong>
+                            </p>
+                        </>
+                    )}
+                    decimalScale={2}
+                    value={getBasketTotal(basket)}
+                    displayType={"text"}
+                    thousandSeprator={true}
+                    prefix={"Rs "}
+                />
             </div>
+
             <div className="checkout__right">
-                <Subtotal/>
+                <Subtotal />
             </div>
-
-
         </div>
     )
 }
 
-export default Checkout
+export default Checkout
\ No newline at end of file
diff --git a/src/CheckoutProduct.css b/src/CheckoutProduct.css
index 9926c28..f93d71f 100644
--- a/src/CheckoutProduct.css
+++ b/src/CheckoutProduct.css
@@ -29,4 +29,25 @@
 .checkoutProduct__title {
   font-size: 17px;
   font-weight: 800;
+  float: left;
+  width: 600px;
 }
+
+.checkoutproduct__rating{
+  position: relative;
+  right: 0;
+  margin-right: 10px;
+}
+
+.checkout_Alignment{
+  display: inline-block;
+  margin: auto;
+  margin: auto;   
+}
+
+.checkoutproduct__price{
+  text-align: left;
+  float: left;
+  width: 200px;
+  margin-left: 5rem;
+}
\ No newline at end of file
diff --git a/src/CheckoutProduct.js b/src/CheckoutProduct.js
index da020d8..4172db1 100644
--- a/src/CheckoutProduct.js
+++ b/src/CheckoutProduct.js
@@ -1,49 +1,41 @@
+/* eslint-disable no-unused-vars */
 import React from 'react'
 import "./CheckoutProduct.css";
-import {useStateValue} from './StateProvider';
+import { useStateValue } from './StateProvider';
 
-
-function CheckoutProduct({id,image,title,price,rating,reviews}) {
-    const[{basket},dispatch]=useStateValue();
-
-    const removeFromBasket=()=>{
+function CheckoutProduct({ id, image, title, price, rating, reviews }) {
+    const [{ basket }, dispatch] = useStateValue();
+    const removeFromBasket = () => {
         dispatch({
-            type:'REMOVE_FROM_BASKET',
-            id:id,
+            type: 'REMOVE_FROM_BASKET',
+            id: id,
         })
     }
-       
-    
+
     return (
-        
         <div className="checkoutProduct">
             <img className="checkoutimage__product" src={image} alt="Checkout Product" />
-<div className="checkoutProduct__info">
-    <p className="checkoutProduct__title">{title}</p>
-    <p className="checkoutproduct__price">
-        <small>Rs</small>
-        <strong>{price}</strong>
-    </p>
-    <div className="checkoutproduct__rating">
-        
-         
-        
-        {Array(rating)
-        .fill()
-        .map((_,i)=>(
-            <p>⭐</p>
-        ))}
-        <span className='product__reviews'>({reviews})</span>
-    </div>
-    <button className="checkoutproduct__button" onClick={removeFromBasket}>Remove from basket</button>
+            <div className="checkoutProduct__info">
+                <div className='checkout_Alignment'>
+                    <div className="checkoutProduct__title">{title}</div>
+                    <div className="checkoutproduct__price">
+                        <small>Rs </small>
+                        <strong>{price}</strong>
+                    </div>
+                </div>
 
-</div>
-             
+                <div className="checkoutproduct__rating">
+                    {Array(rating)
+                        .fill()
+                        .map((_, i) => (
+                            <p>⭐</p>
+                        ))}
+                    <span className='product__reviews'>({reviews})</span>
+                </div>
+                <button className="checkoutproduct__button" onClick={removeFromBasket}>Remove from basket</button>
+            </div>
         </div>
-        
     )
 }
 
 export default CheckoutProduct
-
- 
\ No newline at end of file
diff --git a/src/Subtotal.js b/src/Subtotal.js
index f2b0fd2..3f78648 100644
--- a/src/Subtotal.js
+++ b/src/Subtotal.js
@@ -1,39 +1,37 @@
+/* eslint-disable no-unused-vars */
 import React from 'react'
 import './Subtotal.css'
 import CurrencyFormat from "react-currency-format";
-import {useStateValue} from './StateProvider';
-import {getBasketTotal} from "./reducer";
-import {useHistory} from "react-router-dom";
+import { useStateValue } from './StateProvider';
+import { getBasketTotal } from "./reducer";
+import { useHistory } from "react-router-dom";
+
 function Subtotal() {
     //provide browser history
-    const history=useHistory();
-        const[{basket},dispatch]=useStateValue();
+    const history = useHistory();
+    const [{ basket }, dispatch] = useStateValue();
     return (
         <div className="subtotal">
             {/*For rendering the money*/}
-             <CurrencyFormat
-             renderText={(value)=>(
-                 <>
-                 <p>
-                     Subtotal({basket.length} items):<strong>{value}</strong>
-
-                 </p>
-                 <small className="subtotal__gift">
-                 <input type="checkbox"/>This order contains a gift</small>
-                 </>
-    )}
-    decimalScale={2}
-    value={getBasketTotal(basket)} 
-    displayType={"text"}
-    thousandSeprator={true}
-    prefix={"Rs"}
-    />
-    <button  onClick={e=>history.push("/payment")} className="proceed__button">Proceed to checkout</button>
-
-            
+            <CurrencyFormat
+                renderText={(value) => (
+                    <>
+                        <p>
+                            Subtotal({basket.length} items) : <strong>{value}</strong>
+                        </p>
+                        <small className="subtotal__gift">
+                            <input type="checkbox" />This order contains a gift</small>
+                    </>
+                )}
+                decimalScale={2}
+                value={getBasketTotal(basket)}
+                displayType={"text"}
+                thousandSeprator={true}
+                prefix={"Rs "}
+            />
+            <button onClick={e => history.push("/payment")} className="proceed__button">Proceed to checkout</button>
         </div>
     );
 }
 
 export default Subtotal;
-