diff --git a/apps/dashboard/banners/apps.py b/apps/dashboard/banners/apps.py
index 509d5bd..c711937 100644
--- a/apps/dashboard/banners/apps.py
+++ b/apps/dashboard/banners/apps.py
@@ -15,6 +15,7 @@ def ready(self):
         self.banners_create = get_class('dashboard.banners.views', 'BannerCreateView')
         self.slide_create = get_class('dashboard.banners.views', 'SlideCreateView')
         self.slide_update = get_class('dashboard.banners.views', 'SlideUpdateView')
+        self.slide_delete = get_class('dashboard.banners.views', 'SlideDeleteView')
 
     def get_urls(self):
         urls = [
@@ -22,5 +23,6 @@ def get_urls(self):
             path(r'create/', self.banners_create.as_view(), name='banners-create'),
             path(r'<int:banner_id>/slide/', self.slide_create.as_view(), name='slide-create'),
             path(r'<int:banner_id>/slide/<int:pk>/update', self.slide_update.as_view(), name='slide-update'),
+            path('<int:banner_id>/slide/<int:pk>/delete/', self.slide_delete.as_view(), name='slide-delete'),
         ]
         return urls
diff --git a/apps/dashboard/banners/templates/banners/dashboard/banner-listing.html b/apps/dashboard/banners/templates/banners/dashboard/banner-listing.html
index 0e1c4af..3c528be 100644
--- a/apps/dashboard/banners/templates/banners/dashboard/banner-listing.html
+++ b/apps/dashboard/banners/templates/banners/dashboard/banner-listing.html
@@ -5,10 +5,10 @@
 {% load render_table from django_tables2 %}
 {% block breadcrumbs %}
 <ul class="breadcrumb">
-    <li>
+    <li class="breadcrumb-item">
         <a href="{% url 'dashboard:index' %}">{% trans "Dashboard" %}</a>
     </li>
-    <li class="active">{{ title }}</li>
+    <li class="breadcrumb-item active">{{ title }}</li>
 </ul>
 {% endblock %}
 {% block dashboard_content %}
@@ -18,4 +18,4 @@ <h2>All Banners</h2>
 <div class="well">
     {% render_table table %}
 </div>
-{% endblock dashboard_content %}
\ No newline at end of file
+{% endblock dashboard_content %}
diff --git a/apps/dashboard/banners/templates/banners/dashboard/partials/actions.html b/apps/dashboard/banners/templates/banners/dashboard/partials/actions.html
index 7968d82..96ccb5d 100644
--- a/apps/dashboard/banners/templates/banners/dashboard/partials/actions.html
+++ b/apps/dashboard/banners/templates/banners/dashboard/partials/actions.html
@@ -6,12 +6,10 @@
             {% trans "Actions" %}
             <span class="caret"></span>
         </button>
-        <ul class="nav dropdown-menu pull-right">
-            <li>
-                <a href="{% url 'dashboard:dashboard_banners:slide-create' banner_id=record.pk %}">
-                    {% trans "Add Slide" %}
-                </a>
-            </li>
+        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+            <a  class="dropdown-item" href="{% url 'dashboard:dashboard_banners:slide-create' banner_id=record.pk %}">
+                {% trans "Add Slide" %}
+            </a>
         </ul>
     </div>
 </div>
diff --git a/apps/dashboard/banners/templates/banners/dashboard/slide-form.html b/apps/dashboard/banners/templates/banners/dashboard/slide-form.html
index 2dab41b..512c753 100644
--- a/apps/dashboard/banners/templates/banners/dashboard/slide-form.html
+++ b/apps/dashboard/banners/templates/banners/dashboard/slide-form.html
@@ -11,13 +11,13 @@
 
 {% block breadcrumbs %}
 <ul class="breadcrumb">
-    <li>
+    <li class="breadcrumb-item">
         <a href="{% url 'dashboard:index' %}">{% trans "Dashboard" %}</a>
     </li>
-    <li>
+    <li class="breadcrumb-item">
         <a href="#">{% trans "Banners" %}</a>
     </li>
-    <li class="active">{{ title }}</li>
+    <li class="breadcrumb-item active">{{ title }}</li>
 </ul>
 {% endblock %}
 
@@ -34,19 +34,78 @@ <h2>{{ title }}</h2>
 <div class="table-header">
     <h2>Existing Slides</h2>
 </div>
+<style>
+.cartzilla-banner-card {
+    border-radius: 1rem;
+    box-shadow: 0 2px 16px rgba(60,72,88,.08);
+    overflow: hidden;
+    transition: box-shadow 0.2s;
+    position: relative;
+    background: #fff;
+    border: none;
+}
+.cartzilla-banner-img-wrapper {
+    position: relative;
+    width: 100%;
+    padding-top: 56.25%; /* 16:9 aspect ratio */
+    background: #f8f9fa;
+}
+.cartzilla-banner-img-wrapper img {
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
+    border-radius: 0;
+}
+.cartzilla-banner-actions {
+    position: absolute;
+    top: 0; right: 0;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    opacity: 0;
+    transition: opacity 0.2s;
+    z-index: 2;
+}
+.cartzilla-banner-card:hover .cartzilla-banner-actions {
+    opacity: 1;
+}
+.cartzilla-banner-content {
+    padding: 1rem;
+    min-height: 80px;
+    transition: background 0.2s;
+}
+</style>
 <div class="well">
-    {% for slide_image in banner.images.all %}
-    <a name="edit" href="{% url 'dashboard:dashboard_banners:slide-update' banner_id=banner.id pk=slide_image.id %}" class="btn btn-primary scale-up delay-4">Edit</a>
-    {% with image=slide_image.image %}
-    {% oscar_thumbnail image "100x100" upscale=True as thumb %}
-    <div class="thumbnail">
-        <img src="{{ thumb.url }}" height="100" width="100">
-        <div>
-            {{ slide_image.content|safe }}
+    <div class="row p-4">
+        {% for slide_image in banner.images.all %}
+        <div class="col-md-4 col-sm-6 mb-4">
+            <div class="cartzilla-banner-card h-100">
+                <div class="cartzilla-banner-img-wrapper">
+                    {% with image=slide_image.image %}
+                    {% oscar_thumbnail image "600x338" upscale=True as thumb %}
+                    <img src="{{ thumb.url }}" alt="Slide image">
+                    {% endwith %}
+                    <div class="cartzilla-banner-actions">
+                        <a name="edit" href="{% url 'dashboard:dashboard_banners:slide-update' banner_id=banner.id pk=slide_image.id %}" class="btn btn-primary btn-sm" title="Edit"><i class="fas fa-edit"></i></a>
+                        <form method="post" action="{% url 'dashboard:dashboard_banners:slide-delete' banner_id=banner.id pk=slide_image.id %}" style="display:inline;">
+                            {% csrf_token %}
+                            <button type="submit" class="btn btn-danger btn-sm ml-2" title="Delete" onclick="return confirm('Are you sure you want to delete this slide?');">
+                                <i class="fas fa-trash-alt"></i>
+                            </button>
+                        </form>
+                    </div>
+                </div>
+                <div class="cartzilla-banner-content" style="background: {{ slide_image.color|default:'#fff' }};">
+                    <div class="slide-content mb-2">
+                        {{ slide_image.content|safe }}
+                    </div>
+                </div>
+            </div>
         </div>
+        {% empty %}
+        <div class="col-12">
+            <p class="text-muted">No slides available.</p>
+        </div>
+        {% endfor %}
     </div>
-    {% endwith %}
-
-    {% endfor %}
 </div>
 {% endblock dashboard_content %}
diff --git a/apps/dashboard/banners/templates/banners/dashboard/slide_confirm_delete.html b/apps/dashboard/banners/templates/banners/dashboard/slide_confirm_delete.html
new file mode 100644
index 0000000..b7d4303
--- /dev/null
+++ b/apps/dashboard/banners/templates/banners/dashboard/slide_confirm_delete.html
@@ -0,0 +1,21 @@
+{% extends 'oscar/dashboard/layout.html' %}
+{% load i18n %}
+
+{% block title %}{{ title }} | {{ block.super }}{% endblock %}
+
+{% block dashboard_content %}
+<div class="table-header">
+    <h2>{{ title }}</h2>
+</div>
+<div class="well">
+    <form method="post">
+        {% csrf_token %}
+        <p>{% trans "Are you sure you want to delete this slide?" %}</p>
+        <div class="mb-3">
+            <button type="submit" class="btn btn-danger">{% trans "Delete" %}</button>
+            <a href="{% url 'dashboard:dashboard_banners:slide-create' banner_id=banner.id %}" class="btn btn-secondary">{% trans "Cancel" %}</a>
+        </div>
+    </form>
+</div>
+{% endblock %}
+
diff --git a/apps/dashboard/banners/views.py b/apps/dashboard/banners/views.py
index 67cf9aa..63da0ad 100644
--- a/apps/dashboard/banners/views.py
+++ b/apps/dashboard/banners/views.py
@@ -4,6 +4,7 @@
 from django.views import generic
 from django_tables2 import SingleTableView
 from oscar.core.loading import get_class, get_model
+from django.urls import reverse_lazy
 
 from apps.dashboard.banners.forms import BannerForm, SlideForm
 
@@ -63,6 +64,7 @@ def get_initial(self):
         initial['banner'] = self.kwargs.get('banner_id', None)
         return initial
 
+
 class SlideUpdateView(generic.edit.UpdateView):
     template_name = 'banners/dashboard/slide-form.html'
     model = BannerImage
@@ -73,3 +75,19 @@ def get_context_data(self, **kwargs):
         ctx['title'] = _("Add a new slide")
         ctx['banner'] = Banner.objects.get(pk=self.kwargs.get('banner_id', None))
         return ctx
+
+
+class SlideDeleteView(generic.edit.DeleteView):
+    model = BannerImage
+    template_name = 'banners/dashboard/slide_confirm_delete.html'
+
+    def get_success_url(self):
+        messages.success(self.request, _("Slide deleted successfully"))
+        banner_id = self.kwargs.get('banner_id')
+        return reverse_lazy('dashboard:dashboard_banners:slide-create', kwargs={'banner_id': banner_id})
+
+    def get_context_data(self, **kwargs):
+        ctx = super().get_context_data(**kwargs)
+        ctx['banner'] = Banner.objects.get(pk=self.kwargs.get('banner_id', None))
+        ctx['title'] = _("Delete slide")
+        return ctx