diff --git a/src/lib/components/DeleteConfirmationPopup.svelte b/src/lib/components/DeleteConfirmationPopup.svelte
index a6d81b5..41b4616 100644
--- a/src/lib/components/DeleteConfirmationPopup.svelte
+++ b/src/lib/components/DeleteConfirmationPopup.svelte
@@ -3,6 +3,7 @@
     export let destination = '';
     export let onConfirm: () => void;
     export let onCancel: () => void;
+    export let darkMode = false;
 
     function handlePopupClick(event: MouseEvent) {
         event.stopPropagation();
@@ -12,7 +13,7 @@
 {#if showPopup}
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <div class="overlay" role="button" tabindex="0">
-        <div class="popup" role="button" tabindex="0" onclick={handlePopupClick}>
+        <div class="popup" class:dark-mode={darkMode} role="button" tabindex="0" onclick={handlePopupClick}>
             <h2>Delete Trip</h2>
             <p>Are you sure you want to delete Trip to {destination}?</p>
             <div class="button-group">
@@ -88,4 +89,32 @@
         background: var(--memory-400);
         color: white;
     }
+
+    .popup.dark-mode {
+        background-color: var(--gray-900);
+        color: var(--white);
+    }
+
+    .popup.darkdark-mode h2 {
+        color: var(--memory-400);
+    }
+
+    .popup.dark-mode p {
+        color: var(--gray-400);
+    }
+
+    .popup.dark-mode button {
+        background: var(--gray-50);
+        color: var(--gray-400);
+    }
+
+    .popup.dark-mode .cancel-btn:hover {
+        background-color: var(--gray-100);
+        color: var(--gray-600);
+    }
+
+    .popup.dark-mode .delete-btn:hover {
+        background: var(--memory-500);
+        color: white;
+    }
 </style> 
\ No newline at end of file
diff --git a/src/lib/components/MemoryCard.svelte b/src/lib/components/MemoryCard.svelte
index dc548a0..f183577 100644
--- a/src/lib/components/MemoryCard.svelte
+++ b/src/lib/components/MemoryCard.svelte
@@ -1,70 +1,160 @@
-<script>
-  export let destination = '';
-  export let startDate = '';
-  export let endDate = '';
-  export let image = '';
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { fade } from 'svelte/transition';
+    import DeleteConfirmationPopup from './DeleteConfirmationPopup.svelte';
+    import { ref, remove } from 'firebase/database';
+    import { db } from '../../firebase';
+  
+    export let tripId: string;
+    export let memoryId: string;
+    export let destination: string;
+    export let startDate: string;
+    export let endDate: string;
+    export let image: string;
+  
+    let showDelete = false;
+    let showDeleteConfirmation = false;
+  
+    function handleClick() {
+      goto(`/viewimage/${tripId}/${memoryId}`);
+    }
+  
+    function handleMouseEnter() {
+      showDelete = true;
+    }
+  
+    function handleMouseLeave() {
+      showDelete = false;
+    }
+  
+    function handleDeleteClick(event: MouseEvent) {
+      event.stopPropagation();
+      showDeleteConfirmation = true;
+    }
+  
+    async function handleConfirmDelete() {
+        try {
+            const memoryRef = ref(db, `trips/${tripId}/memories/${memoryId}`);
+            await remove(memoryRef);
+            showDeleteConfirmation = false;
+        } catch (error) {
+            console.error('Error deleting memory:', error);
+        }
+    }
+  
+    function handleCancelDelete() {
+      showDeleteConfirmation = false;
+    }
 </script>
-
-<div class="memory-card">
-  <div class="image" style="background-image: url({image})">
-      <!-- Image placeholder if no image provided -->
-      {#if !image}
-          <div class="placeholder">
-              <i class="fa-solid fa-image" style="color: var(--gray-800)"></i>
-          </div>
-      {/if}
-  </div>
-  <div class="info">
-      <h3>{destination}</h3>
-      <p class="date">{startDate} - {endDate}</p>
-  </div>
-</div>
+  
+<div 
+    class="memory-card" 
+    role="button" 
+    tabindex="0" 
+    on:mouseenter={handleMouseEnter}
+    on:mouseleave={handleMouseLeave}
+    on:click={handleClick}
+>
+    <div class="image" style={`background-image: url("${image || ''}")`}>
+            {#if !image}
+                <div class="placeholder">
+                    <i class="fa-solid fa-image" style="color: var(--gray-400)"></i>
+                </div>
+            {/if}
+            {#if showDelete}
+                <button 
+                    class="delete-btn"
+                    on:click={handleDeleteClick}
+                    transition:fade={{ duration: 100 }}
+                    aria-label="Delete memory"
+                >
+                    <i class="fa-solid fa-xmark"></i>
+                </button>
+            {/if}
+        </div>
+        <div class="info">
+            <h3>{destination}</h3>
+            <p class="date">{startDate} - {endDate}</p>
+        </div>
+    </div>
+  
+<DeleteConfirmationPopup
+    showPopup={showDeleteConfirmation}
+    {destination}
+    darkMode={true}
+    onConfirm={handleConfirmDelete}
+    onCancel={handleCancelDelete}
+/>
 
 <style>
-  .memory-card {
-      background: var(--black);
-      border-radius: 12px;
-      overflow: hidden;
-      box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-      cursor: pointer;
-      font-family: 'Inter', sans-serif;
-      color: var(--white);
-  }
+    .memory-card {
+        background: var(--black);
+        color: var(--white);
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+        cursor: pointer;
+        font-family: 'Inter', sans-serif;
+        position: relative;
+    }
 
-  .memory-card:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
-  }
+    .memory-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
+    }
 
-  .image {
-      height: 160px;
-      background-size: cover;
-      background-position: center;
-      background-color: var(--gray-900);
-  }
+    .image {
+        height: 160px;
+        background-size: cover;
+        background-position: center;
+        background-color: var(--gray-900);
+        position: relative;
+    }
 
-  .placeholder {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 2rem;
-  }
+    .placeholder {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2rem;
+    }
 
-  .info {
-      padding: 1rem;
-  }
+    .info {
+        padding: 1rem;
+    }
 
-  .info h3 {
-      margin: 0;
-      font-size: 1.2rem;
-      font-weight: 600;
-  }
+    .info h3 {
+        margin: 0;
+        font-size: 1.2rem;
+        font-weight: 600;
+    }
 
-  .date {
-      margin: 0.25rem 0 0 0;
-      font-size: 0.8rem;
-      color: var(--gray-400);
-  }
+    .date {
+        margin: 0.25rem 0 0 0;
+        font-size: 0.8rem;
+        color: var(--gray-400);
+    }
+
+    .delete-btn {
+        position: absolute;
+        top: 0.75rem;
+        right: 0.75rem;
+        background: rgba(240, 240, 240, 0.8);
+        border: none;
+        width: 2rem;
+        height: 2rem;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: var(--gray-600);
+        transition: all 0.2s ease;
+    }
+
+    .delete-btn:hover {
+        background-color: var(--memory-50);
+        color: var(--memory-600);
+    }
 </style> 
\ No newline at end of file
diff --git a/src/routes/mymemory/+page.svelte b/src/routes/mymemory/+page.svelte
index 8e103ae..83229dc 100644
--- a/src/routes/mymemory/+page.svelte
+++ b/src/routes/mymemory/+page.svelte
@@ -1,32 +1,53 @@
 <script lang="ts">
-  import '../../app.css';
-  import MemoryCard from '$lib/components/MemoryCard.svelte';
-  import Button from '$lib/components/Button.svelte';
-  import NewMemoryPopup from '$lib/components/NewMemoryPopup.svelte';
-  import Nav from '$lib/components/Nav.svelte';
-  
-  interface Trip {
-      destination: string;
-      startDate: string;
-      endDate: string;
-      imageUrl: string;
-  }
+    import '../../app.css';
+    import MemoryCard from '$lib/components/MemoryCard.svelte';
+    import Button from '$lib/components/Button.svelte';
+    import NewMemoryPopup from '$lib/components/NewMemoryPopup.svelte';
+    import Nav from '$lib/components/Nav.svelte';
+    import { onMount } from 'svelte';
+    import { ref, get } from 'firebase/database';
+    import { db } from '../../firebase';
 
-  let showNewMemoryPopup = false;
-  let contentContainer: HTMLElement;
-  
-  // Sample data, replace with actual data later
-  const sample_memories = {
-      destination: "Taiwan",
-      startDate: "04.27.2025",
-      endDate: "04.30.2025",
-      imageUrl: ""
-  }
-  let pastMemories = Array(3).fill(sample_memories);
+    interface Memory {
+        tripId: string;
+        memoryId: string;
+        destination: string;
+        startDate: string;
+        endDate: string;
+        image: string;
+    }
 
-  function handleNewMemory() {
-      showNewMemoryPopup = true;
-  }
+    let showNewMemoryPopup = false;
+    let contentContainer: HTMLElement;
+    
+    let pastMemories: Memory[] = [];
+
+    onMount(async () => {
+        const snapshot = await get(ref(db, 'trips'));
+        const data = snapshot.val();
+
+        pastMemories = Object.entries(data).flatMap(([tripId, trip]: any) => {
+            const memories = Object.entries(trip.memories ?? {});
+            if (memories.length === 0) return [];
+
+            //latest memoryID
+            const sorted = memories.sort((a, b) => new Date(b[1].createdAt) - new Date(a[1].createdAt));
+            const [memoryId, memory] = sorted[0];
+
+            return [{
+            tripId,
+            memoryId,
+            destination: trip.destination?.name ?? 'Unknown',
+            startDate: memory.startDate,
+            endDate: memory.endDate,
+            image: memory.images?.[0] ?? ''
+            }];
+        });
+    });
+
+    function handleNewMemory() {
+        showNewMemoryPopup = true;
+    }
 </script>
 
 <main>
@@ -40,12 +61,12 @@
       <div class="memories-container">
             {#if pastMemories.length === 0}
                 <div class="empty-state">
-                    <p>There is no past trip</p>
+                    <p>There is no memory</p>
                 </div>
             {:else}
                 <div class="memories-grid">
                     {#each pastMemories as memory}
-                        <MemoryCard {...memory} />
+                        <MemoryCard {...memory} on:deleted={(e) => handleDeletedMemory(e.detail.memoryId)} />
                     {/each}
                 </div>
             {/if}
diff --git a/src/routes/viewimage/[tripId]/[memoryId]/+page.svelte b/src/routes/viewimage/[tripId]/[memoryId]/+page.svelte
index 9d3ffbb..461f190 100644
--- a/src/routes/viewimage/[tripId]/[memoryId]/+page.svelte
+++ b/src/routes/viewimage/[tripId]/[memoryId]/+page.svelte
@@ -68,7 +68,7 @@
         }
 
         if (memory?.images?.length) {
-          columnGroups = await extractColumnwiseColors(memory.images, true);
+          columnGroups = await extractColumnwiseColors(memory.images, false);
           currentImageIndex = 0;
         }
       } else {
@@ -79,12 +79,13 @@
     }
   }
 
+  //get information from other trip in same region
   async function loadDroppedTrip(tripId, memoryId) {
     const memorySnap = await get(ref(db, `trips/${tripId}/memories/${memoryId}`));
     if (memorySnap.exists()) {
       droppedTripId = tripId;
       droppedMemory = memorySnap.val();
-      droppedColumnGroups = await extractColumnwiseColors(droppedMemory.images, false);
+      droppedColumnGroups = await extractColumnwiseColors(droppedMemory.images, true);
       droppedImageIndex = 0;
       isDroppedVisible = true;
     }
@@ -121,6 +122,7 @@
     return ctx.getImageData(0, 0, canvas.width, canvas.height);
   }
 
+  //convert rgb to hsb for color adjustment
   function rgbToHsb(r, g, b) {
     const r_ = r / 255, g_ = g / 255, b_ = b / 255;
     const max = Math.max(r_, g_, b_), min = Math.min(r_, g_, b_);
@@ -141,6 +143,7 @@
     return [h, s * 100, v * 255];
   }
 
+  // get most frequent color from each section
   function getColumnColors(imageData, columnCount = 5) {
     const { data, width, height } = imageData;
     const columnWidth = Math.floor(width / columnCount);
@@ -167,20 +170,28 @@
     });
   }
 
+  //collect color by column
   async function extractColumnwiseColors(imageUrls, reverseColumns = true) {
     const columnColorGroups = [[], [], [], [], []];
 
     for (const url of imageUrls) {
       const imageData = await getImageData(url);
-      const colColors = getColumnColors(imageData);
+      let colColors = getColumnColors(imageData);
+
+      // reverse column order
+      if (reverseColumns) {
+        colColors = colColors.reverse();
+      }
+
       colColors.forEach((color, index) => {
         columnColorGroups[index].push(color);
       });
     }
 
-    return reverseColumns ? columnColorGroups.reverse() : columnColorGroups;
+    return columnColorGroups;
   }
 
+  // make gradient wheel
   function makeConcentricGradients(groups, rotationOffset = 0, imageCount = 1, isDropped = false) {
     const directionFactor = 1;
     const additionalAdjustment = isDropped ? -360 / imageCount : 0;
@@ -198,6 +209,7 @@
     const angleOffset = -(360 / memory.images.length) * currentImageIndex;
     const gradients = makeConcentricGradients(columnGroups, angleOffset, memory.images.length, false);
 
+    //mask for donut shape
     const MASK_COUNT = 3;
     for (let i = 0; i < MASK_COUNT; i++) {
       gradients.push('radial-gradient(circle, var(--black) 100%)');