Merged the work done on the frontend homepage

Frontend/src/Assets/ProfileIcon.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="64.000000pt" height="64.000000pt" viewBox="0 0 64.000000 64.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,64.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M244 466 c-48 -48 -48 -104 0 -152 28 -28 42 -34 76 -34 34 0 48 6
+76 34 28 28 34 42 34 76 0 60 -50 110 -110 110 -34 0 -48 -6 -76 -34z m115 -1
+c16 -8 34 -28 41 -45 28 -67 -44 -138 -111 -110 -44 19 -66 68 -49 110 12 29
+50 59 78 60 7 0 26 -7 41 -15z"/>
+<path d="M225 211 c-39 -17 -105 -81 -105 -101 0 -20 21 -9 52 26 81 92 199
+96 287 8 24 -24 48 -44 52 -44 34 0 -37 81 -95 109 -53 26 -136 27 -191 2z"/>
+</g>
+</svg>

Frontend/src/Assets/ShoppingCart.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 902.86 902.86"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M671.504,577.829l110.485-432.609H902.86v-68H729.174L703.128,179.2L0,178.697l74.753,399.129h596.751V577.829z
+			 M685.766,247.188l-67.077,262.64H131.199L81.928,246.756L685.766,247.188z"/>
+		<path d="M578.418,825.641c59.961,0,108.743-48.783,108.743-108.744s-48.782-108.742-108.743-108.742H168.717
+			c-59.961,0-108.744,48.781-108.744,108.742s48.782,108.744,108.744,108.744c59.962,0,108.743-48.783,108.743-108.744
+			c0-14.4-2.821-28.152-7.927-40.742h208.069c-5.107,12.59-7.928,26.342-7.928,40.742
+			C469.675,776.858,518.457,825.641,578.418,825.641z M209.46,716.897c0,22.467-18.277,40.744-40.743,40.744
+			c-22.466,0-40.744-18.277-40.744-40.744c0-22.465,18.277-40.742,40.744-40.742C191.183,676.155,209.46,694.432,209.46,716.897z
+			 M619.162,716.897c0,22.467-18.277,40.744-40.743,40.744s-40.743-18.277-40.743-40.744c0-22.465,18.277-40.742,40.743-40.742
+			S619.162,694.432,619.162,716.897z"/>
+	</g>
+</g>
+</svg>
\ No newline at end of file

Frontend/src/Navigation.jsx

 import React from 'react'
+import ShoppingCart from "./Assets/ShoppingCart.svg"
+import ProfileIcon from "./Assets/ProfileIcon.svg"
 
 function Navigation() {
 
@@ -7,7 +9,9 @@ function Navigation() {
     <div className="navigation">
 
         <div className="navTop">
-            <h1> ElectroMart </h1>
+            <h1 className="headerTitle"> ElectroMart </h1>
+            <img src={ShoppingCart} className='ShopCartIcon' alt="Shopping Cart icon" />
+            <img src={ProfileIcon} className='ProfileIcon' alt="Profile Icon" />
         </div>
 
         <div className="navBot">

Frontend/src/css/App.css

 
+/*  ----------------------------------------------------------------------------------
+    body CSS 
+*/
 body
 {
     background-color: rgb(24, 22, 22);
     color : rgb(218, 218, 218);
 }
 
+.headerTitle {
+    color:#111111
+}
+
 .product-grid
 {
   position: fixed;
@@ -14,14 +21,29 @@ body
   margin: 0; /* This removes the default margin around the body */
 }
 
+/*  ----------------------------------------------------------------------------------
+    navigation bar css
+*/
 .navigation
 {
     position: fixed;
     top: 0;
-    background-color: rgb(58, 58, 58);
+    background-color: rgb(202, 193, 189);
     width : 100%;
 }
 
+.ShopCartIcon { 
+    width: 50px;
+    height: 50px;
+    padding-left: 100px;
+  }
+  
+  .ProfileIcon {
+      width: 50px;
+      height: 50px;
+      padding-left: 10px;
+  }
+
 .product-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -57,7 +79,8 @@ body
     display:flex;
     flex-direction:row;
     list-style: none;           /* removing bullet points */
-    border-style: solid;
+    border-bottom-style: solid;
+    border-bottom-color: black;
     border-width: 1px;
     padding: 16px;
 }
@@ -66,7 +89,7 @@ body
 .navigationBar a
 {
     text-decoration: none;
-    color : rgb(218, 218, 218);
+    color : rgb(15, 14, 14);
     padding: 16px;
 }