diff --git a/frontend/src/App.css b/frontend/src/App.css
index 74b5e05..030b852 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -36,3 +36,18 @@
     transform: rotate(360deg);
   }
 }
+
+.chart-container {
+  width: 80%;
+  max-width: 800px;
+  margin: 20px auto; /* Center the chart */
+  padding: 20px; /* Add some padding around the chart */
+  background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent background */
+  border-radius: 8px; /* Rounded corners */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
+}
+
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 3784575..266bfc8 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,25 +1,51 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
 import logo from './logo.svg';
 import './App.css';
 
-function App() {
+const App = () => {
+  // Sample data for the chart
+  const data = {
+    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    datasets: [
+      {
+        label: 'Revenue ($)',
+        data: [1200, 1900, 3000, 500, 2000, 3200, 4200],
+        backgroundColor: 'rgba(75, 192, 192, 0.6)',
+        borderColor: 'rgba(75, 192, 192, 1)',
+        borderWidth: 1,
+      },
+      {
+        label: 'Items Sold',
+        data: [300, 500, 600, 200, 700, 800, 1000],
+        backgroundColor: 'rgba(153, 102, 255, 0.6)',
+        borderColor: 'rgba(153, 102, 255, 1)',
+        borderWidth: 1,
+      },
+    ],
+  };
+
+  // Options for the chart
+  const options = {
+    scales: {
+      y: {
+        beginAtZero: true,
+      },
+    },
+  };
+
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <h1>Vendor Dashboard</h1>
+        <div className="chart-container">
+          <Bar data={data} options={options} />
+        </div>
       </header>
     </div>
   );
-}
+};
 
 export default App;
+