diff --git a/components/itinerary/itinerarycard.tsx b/components/itinerary/itinerarycard.tsx
index b4c5e54..4384522 100644
--- a/components/itinerary/itinerarycard.tsx
+++ b/components/itinerary/itinerarycard.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {Card} from "@/components/ui/card";
+import {Button} from "@/components/ui/button";
 
 export interface Props {
     itinerary: {
@@ -22,8 +23,10 @@ export interface Props {
                     location: string
                 }
             }
-        }[]
-    };
+        }[],
+    },
+    isOnItineraryIndex?: boolean,
+    deleteCallback?: () => void
 }
 
 type Itinerary = {
@@ -116,6 +119,16 @@ export const ItineraryCard = (props: Props) => {
                 <p className='text-3xl'>{finalDestination}</p>
                 <p>{arriveTime?.toDateString()}</p>
             </div>
+            {
+                props.isOnItineraryIndex
+                    ? (<Button className='bg-destructive' onClick={props.deleteCallback}>
+                            <span className="material-symbols-outlined">
+                                close
+                            </span>
+                        </Button>)
+                    : <></>
+            }
+
         </Card>
     );
 };
\ No newline at end of file
diff --git a/pages/api/itineraries.ts b/pages/api/itineraries.ts
index 4546646..a7942d2 100644
--- a/pages/api/itineraries.ts
+++ b/pages/api/itineraries.ts
@@ -67,6 +67,26 @@ const handle = async (req: NextApiRequest, res: NextApiResponse) => {
             });
 
             res.status(200).json(create);
+            break;
+        }
+        case 'DELETE': {
+            const {id} = req.query;
+            if (!id) return res.status(400).json({message: 'Itinerary ID is required'});
+            if (typeof id !== 'string') return res.status(400).json({message: 'Itinerary ID must be a string'});
+            const itineraryId = parseInt(id);
+            const itinerary = await prisma.itenerary.findFirst({
+                where: {
+                    id: itineraryId
+                }
+            });
+            if (!itinerary) return res.status(400).json({message: 'Itinerary not found'});
+            const deleteItinerary = await prisma.itenerary.delete({
+                where: {
+                    id: itineraryId
+                }
+            });
+            res.status(200).json(deleteItinerary);
+            break;
         }
     }
 }
diff --git a/pages/api/itineraries/[id].ts b/pages/api/itineraries/[id].ts
deleted file mode 100644
index e69de29..0000000
diff --git a/pages/itineraries/index.tsx b/pages/itineraries/index.tsx
index de2c9dc..0fab20b 100644
--- a/pages/itineraries/index.tsx
+++ b/pages/itineraries/index.tsx
@@ -39,6 +39,17 @@ const Index = () => {
         }
     }, [wingmanUser])
 
+    const onDelete = (id: number) => {
+        fetch(`/api/itineraries?id=${id}`, {
+            method: 'DELETE',
+        }).then(res => {
+            console.log(res);
+            if (res.status === 200) {
+                setItineraries(itineraries.filter(itinerary => itinerary.id !== id));
+            }
+        })
+    }
+
     if (!user) return (
         <div className='flex flex-col justify-center items-center gap-5 px-24 py-12 pt-24'>
             <p className='text-xl text-gray-700 italic'>Please log in to view your itineraries!</p>
@@ -50,7 +61,7 @@ const Index = () => {
         <div className='flex flex-col justify-center items-center gap-5 px-24 py-12 pt-24'>
             <h1 className='text-3xl'>Current Itineraries</h1>
             {itineraries.map((itinerary, index) => {
-                return <ItineraryCard key={'itinerary-' + index} itinerary={itinerary} />
+                return <ItineraryCard key={'itinerary-' + index} itinerary={itinerary} isOnItineraryIndex deleteCallback={() => onDelete(itinerary.id)}/>
             })}
             <Button className='fixed bottom-3'><Link href='/itineraries/create'>Create New Itinerary</Link></Button>
         </div>