diff --git a/src/App.tsx b/src/App.tsx
index 69a2c3b..4042a16 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { ShoppingCart } from 'lucide-react';
 import { Sheet, SheetTrigger } from '@/components/ui/sheet';
-import Cart from './components/Cart';
+import Cart from './components/Card';
 import Product from './components/Product';
 import CartContext from './lib/context';
 import useTheme from './hooks/useTheme';
@@ -14,25 +14,24 @@ function App() {
   return (
     <CartContext.Provider value={{ count, setCount }}>
       <Sheet>
-        <div className="flex flex-col items-center justify-center min-h-screen bg-stone-400">
-          <SheetTrigger className="absolute top-4 right-4">
-            <div className="h-10 w-10 relative flex items-center justify-center">
-              <span className="absolute -top-1 -right-1 text-[8px] bg-black text-white rounded-full px-2 py-1">
+        <div className='flex flex-col items-center justify-center min-h-screen bg-stone-400'>
+          <SheetTrigger className='absolute top-4 right-4'>
+            <div className='h-10 w-10 relative flex items-center justify-center'>
+              <span className='absolute -top-1 -right-1 text-[8px] bg-black text-white rounded-full px-2 py-1'>
                 {count}
               </span>
-              <ShoppingCart className="size-6" />
+              <ShoppingCart className='size-6' />
             </div>
           </SheetTrigger>
           <button
-            className="absolute top-4 left-4 bg-black text-white px-4 py-2 rounded-lg"
+            className='absolute top-4 left-4 bg-black text-white px-4 py-2 rounded-lg'
             onClick={() => toggleTheme()}
           >
             Toggle theme
           </button>
-          <div className="card">
-            <Product name="apple" description="A juicy red apple" />
+          <div className='card'>
+            <Product name='apple' description='A juicy red apple' />
           </div>
-          <Cart quantity={count} setCount={setCount} />
         </div>
       </Sheet>
     </CartContext.Provider>
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..ef5884b
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,16 @@
+type cardProps = {
+  text?:string
+  time:number
+}
+
+
+export default function Card({text} :cardProps) {
+//  if (text){
+//   const title = text + "title"
+//  }
+
+  return <div className='bg-blue-800 flex'>{text ? <h1 className="bg-red-500">
+    {text}
+  </h1>:null}
+  </div>;
+}
diff --git a/src/components/Cart.tsx b/src/components/Cart.tsx
deleted file mode 100644
index e2cb91a..0000000
--- a/src/components/Cart.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import {
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-} from './ui/sheet';
-
-export default function Cart({
-  quantity,
-  setCount,
-}: {
-  quantity: number;
-  setCount: React.Dispatch<React.SetStateAction<number>>;
-}) {
-  return (
-    <SheetContent className="bg-stone-400">
-      <SheetHeader>
-        <SheetTitle className="font-2xl font-bold">Cart</SheetTitle>
-        <SheetDescription>
-          {quantity > 0 ? (
-            <p className="text-lg">You have {quantity} items in your cart.</p>
-          ) : (
-            <p className="text-lg">Your cart is empty.</p>
-          )}
-        </SheetDescription>
-      </SheetHeader>
-
-      <div className="flex flex-col items-center justify-center">
-        <button onClick={() => setCount(0)}>Clear cart</button>
-      </div>
-    </SheetContent>
-  );
-}
diff --git a/src/stories/Card.stories.ts b/src/stories/Card.stories.ts
new file mode 100644
index 0000000..81dc90d
--- /dev/null
+++ b/src/stories/Card.stories.ts
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import Card from '@/components/Card';
+
+const meta = {
+  component: Card,
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: 'Card Title',
+    time: 10,
+  },
+};