diff --git a/components/stock-card/index.js b/components/stock-card/index.js
index 2a8a5f0..6405a3c 100644
--- a/components/stock-card/index.js
+++ b/components/stock-card/index.js
@@ -13,10 +13,10 @@ export const Card = ({ stock, operationType }) => {
   return (
     <div className="stock-card">
       <Image
-        src={path.join('/assets', 'stocks.jpg')}
+        src={path.join('/assets', 'stock.png')}
         alt={stock.name || stock.stockName}
-        width={100}
-        height={100}
+        width={87}
+        height={86}
         objectFit="cover"
         layout="fixed"
       />
@@ -25,13 +25,22 @@ export const Card = ({ stock, operationType }) => {
         <p className="stock-card-product-name">
           {stock.name || stock.stockName}
         </p>
-        <p className="stock-card-product-price">
-          {stock.price || stock.initialStockValue} 💲
-        </p>
         <p className="stock-card-product-quantity">
           {' '}
           Quantity : {stock.quantity}
         </p>
+        <p className="stock-card-product-price">
+         <i className="dollar">
+              <Image
+              src={path.join('/assets', 'dollar.png')}
+              alt={"dollar sign"}
+              width={18}
+              height={18}
+              objectFit="cover"
+              layout="fixed"
+            />
+          </i> {stock.price || stock.initialStockValue}
+        </p>
         <div>
           <StockOperation
             stockId={finalId}
@@ -47,16 +56,18 @@ export const Card = ({ stock, operationType }) => {
             display: flex;
             flex-direction: column;
             align-items: center;
-            justify-content: space-between;
+            justify-content: flex-start;
+            font-family: 'Poppins';
             margin: 10px;
             padding-top: 16px;
             border: 1px solid #eee;
             box-shadow: 0 2px 2px #ccc;
             text-align: center;
-            min-width: 300px;
-            border-radius: 4px;
+            min-width: 250px;
+            min-height: 297px;
+            border-radius: 1.5em;
             transition: 0.2s;
-            background: #ffffff;
+            background: #F6FDFB;
           }
           .stock-card:hover {
             box-shadow: 0px 4px 10px #ccc;
@@ -70,13 +81,15 @@ export const Card = ({ stock, operationType }) => {
             text-align: center;
             width: 100%;
             padding: 1rem;
-            background-color: #ffffff;
+            background-color: #F6FDFB;
+            border-radius: 1.5em;
           }
 
           .stock-card-product-name {
-            font-weight: bold;
-            font-size: 1.3em;
+            font-weight: 500;
+            font-size: 1.125em;
             color: #540075;
+            margin: 0;
           }
           p {
             margin-block-start: 0.5rem;
@@ -84,12 +97,24 @@ export const Card = ({ stock, operationType }) => {
           }
           .stock-card-product-price {
             font-weight: bold;
-            font-size: 1.3em;
+            font-size: 1.125em;
             color: #e30062;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0;
+          }
+          .stock-card-product-price .dollar{
+            font-style: normal;
+            font-size: 1.1em;
+            display: flex;
+            justify-content: center;
+            align-items: end;
           }
           .stock-card-product-quantity {
-            font-size: 1.3em;
+            font-size: 0.875em;
             color: #540075;
+            margin: 2px;
           }
         `}
       </style>
diff --git a/components/stock-operation/index.js b/components/stock-operation/index.js
index 7b3b8ad..ad8d24c 100644
--- a/components/stock-operation/index.js
+++ b/components/stock-operation/index.js
@@ -18,10 +18,10 @@ const StockOperation = (props) => {
     <div className={styles.buttonWrapper}>
       {router.pathname == '/trading' && (
         <div
-          className={`${styles.button} ${styles.greenButton}`}
+          className={`${styles.button} ${styles.blueButton}`}
           onClick={() => setTransaction('BUY')}
         >
-          BUY
+           Buy Now
         </div>
       )}
       {router.pathname == '/trading/sell' && (
diff --git a/pages/trading/index.js b/pages/trading/index.js
index 36759b9..92ca80a 100644
--- a/pages/trading/index.js
+++ b/pages/trading/index.js
@@ -24,6 +24,12 @@ const Invest = () => {
       <div className="main-container">
         <div className="layout">
           <div className="content">
+          <div className="stocks-header">
+              <Link href="/trading/sell">
+                <div className={`${styles.trade}`}>Sell Stocks</div>
+              </Link>
+              <h2>Stocks</h2>
+            </div>
             <div className="shoppinglist-container">
               {stocks.map((itemName) => (
                 <Card
@@ -33,11 +39,6 @@ const Invest = () => {
                 />
               ))}
             </div>
-            <div>
-              <Link href="/trading/sell">
-                <div className={`${styles.trade}`}>Sell Stocks</div>
-              </Link>
-            </div>
           </div>
           <Footer />
         </div>
@@ -46,7 +47,6 @@ const Invest = () => {
             min-height: calc(100vh-58px);
             position: relative;
           }
-
           .content {
             min-height: 87vh;
             padding-bottom: 75px;
@@ -57,6 +57,17 @@ const Invest = () => {
             justify-content: space-evenly;
             align-items: stretch;
           }
+          .stocks-header{
+            display: flex;
+            flex-direction: column;
+            padding: 0rem 5rem;
+          }
+          .stocks-header h2{
+            font-family: 'Poppins';
+            font-weight: 600;
+            font-size: 1.375rem;
+            line-height: 2rem;
+          }
         `}</style>
       </div>
     </>
diff --git a/public/assets/dollar.png b/public/assets/dollar.png
new file mode 100644
index 0000000..8ceb7d6
Binary files /dev/null and b/public/assets/dollar.png differ
diff --git a/public/assets/stock.png b/public/assets/stock.png
new file mode 100644
index 0000000..8ab033c
Binary files /dev/null and b/public/assets/stock.png differ
diff --git a/styles/Home.module.css b/styles/Home.module.css
index e05e993..0af7cbb 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -1,3 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@700&display=swap');
+
 .leftSection {
   display: flex;
   flex-direction: column;
@@ -21,13 +25,24 @@
   font-size: 20px;
   cursor: pointer;
   margin: 1.5rem 1.5rem 0 1.5rem;
-  width: 7rem;
+  width: 8rem;
 }
 .greenButton {
   background-color: #2ecc71;
   text-align: center;
   border: none;
 }
+.blueButton {
+  width: 9.6rem;
+  height: 2.75rem;
+  font-family: 'Work Sans', sans-serif;
+  background-color: #041187;
+  font-size: 1rem;
+  text-align: center;
+  border: none;
+  border-radius: 0.625em;
+  margin-top: 2.125em;
+}
 .redButton {
   background-color: #ff3838;
   text-align: center;
@@ -74,15 +89,21 @@
 }
 
 .trade {
-  width: 100%;
-  text-align: center;        
+  width: 13.125rem;
+  height: 3.125rem;  
+  align-self: end;
   margin: 0;
-  padding: 1rem;
-  display: block;
-  color:#540075;
-  font-weight: bold;
-  font-size: 1.2rem;
+  display: flex;
+  align-items: center;    
+  justify-content: center;
+  font-family:  'Heebo', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.313rem;
+  color: #FFFFFF;
   cursor: pointer;
+  border-radius: 0.3rem;
+  background-color: #0094B6;
 }
 
 @media only screen and (max-width: 600px) {
diff --git a/styles/globals.css b/styles/globals.css
index 81510cb..f85494e 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -8,7 +8,7 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  background-color: #e9ebff;
+  background-color: #ffffff;
   min-height: 100%;
 }
 @media only screen and (min-width: 905px) {