diff --git a/src/components/StockChart.tsx b/src/components/StockChart.tsx
index fd26f94..b594c86 100644
--- a/src/components/StockChart.tsx
+++ b/src/components/StockChart.tsx
@@ -1,52 +1,31 @@
-"use client"
-
-import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
 const data = [
-  {
-    name: "Jan",
-    In: 4000,
-    Out: 2400,
-  },
-  {
-    name: "Feb",
-    In: 3000,
-    Out: 1398,
-  },
-  {
-    name: "Mar",
-    In: 2000,
-    Out: 9800,
-  },
-  {
-    name: "Apr",
-    In: 2780,
-    Out: 3908,
-  },
-  {
-    name: "May",
-    In: 1890,
-    Out: 4800,
-  },
-  {
-    name: "Jun",
-    In: 2390,
-    Out: 3800,
-  },
-  {
-    name: "Jul",
-    In: 3490,
-    Out: 4300,
-  },
-]
+  { name: 'Jan', In: 4000, Out: 2400 },
+  { name: 'Feb', In: 3000, Out: 1398 },
+  { name: 'Mar', In: 2000, Out: 9800 },
+  { name: 'Apr', In: 2780, Out: 3908 },
+  { name: 'May', In: 1890, Out: 4800 },
+  { name: 'Jun', In: 2390, Out: 3800 },
+  { name: 'Jul', In: 3490, Out: 4300 },
+  { name: 'Aug', In: 3000, Out: 2000 },
+  { name: 'Sep', In: 2000, Out: 2780 },
+  { name: 'Oct', In: 2780, Out: 1890 },
+  { name: 'Nov', In: 1890, Out: 2390 },
+  { name: 'Dec', In: 3490, Out: 2900 },
+];
 
-export function StockChart() {
+export const StockChart = () => {
   return (
-    <div className="h-[300px] w-full">
+    <Card className="col-span-1 lg:col-span-2 mt-4">
+      <CardHeader className="bg-primary text-primary-foreground mb-4 p-4 rounded-lg shadow-lg"> {/* Changed bg-primary-dark to bg-primary and text-white to text-primary-foreground */}
+        <CardTitle className="text-primary-foreground">Monthly Stock Activity</CardTitle> {/* Changed text-white to text-primary-foreground */}
+      </CardHeader>
+      <CardContent className="h-80">
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
-            width={500}
-            height={300}
             data={data}
             margin={{
               top: 5,
@@ -60,10 +39,11 @@ export function StockChart() {
             <YAxis />
             <Tooltip />
             <Legend />
-            <Bar dataKey="In" fill="#000000" name="Stock In" />
-            <Bar dataKey="Out" fill="#FFA500" name="Stock Out" />
+            <Bar dataKey="In" fill="#8884d8" name="Stock In" />
+            <Bar dataKey="Out" fill="#82ca9d" name="Stock Out" />
           </BarChart>
         </ResponsiveContainer>
-    </div>
-  )
-}
\ No newline at end of file
+      </CardContent>
+    </Card>
+  );
+};
\ No newline at end of file