diff --git a/src/components/blocks/list-promo/_list-promo.js b/src/components/blocks/list-promo/_list-promo.js
index 7f538d95..65acc981 100644
--- a/src/components/blocks/list-promo/_list-promo.js
+++ b/src/components/blocks/list-promo/_list-promo.js
@@ -1,112 +1,47 @@
 document.addEventListener('DOMContentLoaded', () => {
-  const ctrlsDirectional = [
-    {
-      ctrlName: 'Previous',
-      ctrlClasses: ['u-btn-icon', 'u-btn-icon--light', 'u-btn-icon--point-left', 'b-list-promo__ctrls-directional-btn'],
-      ctrlAttr: 'disabled',
-    },
-    {
-      ctrlName: 'Next',
-      ctrlClasses: ['u-btn-icon', 'u-btn-icon--light', 'u-btn-icon--point-right', 'b-list-promo__ctrls-directional-btn'],
-    },
-  ];
-
-  const setActiveListItem = (listIndex, inst) => {
-    const promoImgListItems = inst.querySelectorAll('.b-list-promo__image-list-item');
-    const promoInfoListItems = inst.querySelectorAll('.b-list-promo__list-item');
-
-    promoImgListItems.forEach((listItem, i) => {
-      if (i !== listIndex) {
-        listItem.classList.remove('b-list-promo__image-list-item--active');
-      } else {
-        listItem.classList.add('b-list-promo__image-list-item--active');
-      }
-    });
-
-    promoInfoListItems.forEach((listItem, i) => {
-      if (i !== listIndex) {
-        listItem.classList.remove('b-list-promo__list-item--active');
-      } else {
-        listItem.classList.add('b-list-promo__list-item--active');
-      }
-    });
-  };
-
-  const switchListItem = (e) => {
-    const selectedDirection = e.target.textContent;
-
-    const promoListItems = Array.from(e.target.inst.querySelectorAll('.b-list-promo__list-item'));
-    const promoListActiveItem = e.target.inst.querySelector('.b-list-promo__list-item--active');
-    const currentListItemIndex = promoListItems.indexOf(promoListActiveItem);
-    const lastListItemIndex = promoListItems.length - 1;
-
-    const ctrlDirectionPrev = e.target.inst.querySelector('.u-btn-icon--point-left.b-list-promo__ctrls-directional-btn');
-    const ctrlDirectionNext = e.target.inst.querySelector('.u-btn-icon--point-right.b-list-promo__ctrls-directional-btn');
-
-    if (selectedDirection === 'Previous') {
-      if (currentListItemIndex > 0) {
-        setActiveListItem(currentListItemIndex - 1, e.target.inst);
-        ctrlDirectionNext.removeAttribute('disabled');
-      }
-      if (currentListItemIndex === 1) {
-        ctrlDirectionPrev.setAttribute('disabled', '');
-      }
+  Array.from(document.querySelectorAll('.b-list-promo'), (promo) => {
+    const listImgs = promo.querySelectorAll('.b-list-promo__image-list-item');
+
+    /* Promo logic only required if > 1 promo img present */
+    if (listImgs.length > 1) {
+      const listItems = promo.querySelectorAll('.b-list-promo__list-item');
+
+      /* set initial item active state */
+      let activeIndex = 0;
+      listItems[activeIndex].classList.add('b-list-promo__list-item--active');
+
+      /* fn to set active item classes */
+      const setActiveItem = (itemIndex) => {
+        promo.querySelector('.b-list-promo__image-list-item--active').classList.remove('b-list-promo__image-list-item--active');
+        listImgs[itemIndex].classList.add('b-list-promo__image-list-item--active');
+        promo.querySelector('.b-list-promo__list-item--active').classList.remove('b-list-promo__list-item--active');
+        listItems[itemIndex].classList.add('b-list-promo__list-item--active');
+      };
+
+      /* promo ctrls can be shown */
+      const ctrls = promo.querySelector('.b-list-promo__ctrls');
+      ctrls.classList.add('b-list-promo__ctrls--active');
+
+      /* promo controls setup */
+      const prev = ctrls.querySelector('.js-list-promo__ctrls-btn--prev');
+      const next = ctrls.querySelector('.js-list-promo__ctrls-btn--next');
+      prev.setAttribute('disabled', 'true');
+
+      /* promo controls logic */
+      ctrls.addEventListener('click', (e) => {
+        if (e.target === prev) {
+          activeIndex -= 1;
+          next.removeAttribute('disabled');
+          if (activeIndex === 0) prev.setAttribute('disabled', 'true');
+        } else if (e.target === next) {
+          activeIndex += 1;
+          prev.removeAttribute('disabled');
+          if (activeIndex === listImgs.length - 1) next.setAttribute('disabled', 'true');
+        }
+        setActiveItem(activeIndex);
+      });
     }
 
-    if (selectedDirection === 'Next') {
-      if (currentListItemIndex < lastListItemIndex) {
-        setActiveListItem(currentListItemIndex + 1, e.target.inst);
-        ctrlDirectionPrev.removeAttribute('disabled');
-      }
-      if (currentListItemIndex === lastListItemIndex - 1) {
-        ctrlDirectionNext.setAttribute('disabled', '');
-      }
-    }
-  };
-
-  const buildDirectionCtrls = (inst) => {
-    const ctrlsContainerParent = inst.querySelector('.b-list-promo__image-list-container');
-    const ctrlsContainer = document.createElement('ul');
-
-    ctrlsContainer.classList.add('b-list-promo__ctrls-directional-list');
-
-    ctrlsDirectional.forEach((ctrl) => {
-      const ctrlListItem = document.createElement('li');
-      const ctrlBtn = document.createElement('button');
-
-      ctrlBtn.classList.add(...ctrl.ctrlClasses);
-      ctrlBtn.textContent = ctrl.ctrlName;
-      ctrlBtn.setAttribute('title', `${ctrl.ctrlName} item`);
-      ctrlBtn.setAttribute('type', 'button');
-
-      // disable 'Previous' button on initialisation
-      if (ctrl.ctrlAttr) {
-        ctrlBtn.setAttribute(ctrl.ctrlAttr, '');
-      }
-
-      ctrlBtn.inst = inst;
-      ctrlBtn.addEventListener('click', switchListItem, false);
-
-      ctrlListItem.appendChild(ctrlBtn);
-      ctrlsContainer.appendChild(ctrlListItem);
-      ctrlsContainerParent.appendChild(ctrlsContainer);
-    });
-  };
-
-  const init = () => {
-    // there may be more than one instance on the page
-    const componentContainers = document.querySelectorAll('.b-list-promo');
-
-    componentContainers.forEach((inst) => {
-      const promoInfoListItems = inst.querySelectorAll('.b-list-promo__list-item');
-
-      setActiveListItem(0, inst);
-
-      if (promoInfoListItems.length > 1) {
-        buildDirectionCtrls(inst);
-      }
-    });
-  };
-
-  init();
+    return true;
+  });
 });
diff --git a/src/components/blocks/list-promo/_list-promo.scss b/src/components/blocks/list-promo/_list-promo.scss
index 6c734387..aec1c3b3 100644
--- a/src/components/blocks/list-promo/_list-promo.scss
+++ b/src/components/blocks/list-promo/_list-promo.scss
@@ -65,35 +65,27 @@
   }
 
   &__image-list-container {
+    min-height: 190px;
     position: relative;
 
     @include mixins.breakpoints-bpMinSmall {
       flex: 1 1 0;
+      min-height: 296px;
     }
-  }
 
-  &__image-list {
-    @include mixins.unstyledelements-unstyledList;
+    @include mixins.breakpoints-bpMinMedium {
+      min-height: 390px;
+    }
   }
 
   &__image-list-item {
-    height: 0;
+    inset: 0;
     opacity: 0;
-    transition: visibility 0s, opacity 0.3s ease-in;
-    visibility: hidden;
+    position: absolute;
+    transition: opacity 0.3s ease-in;
 
     &--active {
-      height: 190px;
       opacity: 1;
-      visibility: visible;
-
-      @include mixins.breakpoints-bpMinSmall {
-        height: 296px;
-      }
-  
-      @include mixins.breakpoints-bpMinMedium {
-        height: 390px;
-      }
     }
   }
 
@@ -103,25 +95,19 @@
     width: 100%;
   }
 
-  &__ctrls-directional-list {
-    @include mixins.unstyledelements-unstyledList;
-
-    display: flex;
+  &__ctrls {
+    bottom: 10px;
+    display: none;
     gap: 4px;
     position: absolute;
     right: 10px;
-    top: 155px;
-
-    @include mixins.breakpoints-bpMinSmall {
-      top: 250px;
-    }
 
-    @include mixins.breakpoints-bpMinMedium {
-      top: 345px;
+    &--active {
+      display: flex;
     }
   }
 
-  &__ctrls-directional-btn {
+  &__ctrls-btn {
     box-shadow: 1px 1px 12px 0 rgba(29, 30, 32, 50%), -1px -1px 12px 0 rgba(29, 30, 32, 50%);
     height: 26px;
     width: 26px;
@@ -179,7 +165,7 @@
           color: base.sitecolors-siteColor("vam-black");
         }
       }
-      
+
       &::after {
         background-color: base.sitecolors-siteColor("vam-black");
         border-radius: 50%;
diff --git a/src/components/blocks/list-promo/list-promo.config.js b/src/components/blocks/list-promo/list-promo.config.js
index 53362ffd..8d91a0f5 100644
--- a/src/components/blocks/list-promo/list-promo.config.js
+++ b/src/components/blocks/list-promo/list-promo.config.js
@@ -57,8 +57,8 @@ module.exports = {
   },
   variants: [
     {
-      name: 'on-dark',
-      label: 'On dark',
+      name: 'dark',
+      label: 'Dark',
       context: {
         previewClass: 'fr-bg--dark',
         modifier: ['dark']
diff --git a/src/components/blocks/list-promo/list-promo.html b/src/components/blocks/list-promo/list-promo.html
index 531218ac..183bc4b2 100644
--- a/src/components/blocks/list-promo/list-promo.html
+++ b/src/components/blocks/list-promo/list-promo.html
@@ -1,67 +1,24 @@
 <div class="b-list-promo {% for m in modifier %}b-list-promo--{{ m }}{% endfor %}" aria-label="Promotion: {{ promoTitle }}">
   <div class="b-list-promo__image-list-container">
-    <ul class="b-list-promo__image-list">
-      {% for img in promoItems %}
-        <li class="b-list-promo__image-list-item {% if loop.first == true %}b-list-promo__image-list-item--active {% endif %}">
-          <img
-            alt="{{ promoTitle }}"
-            class="b-list-promo__image"
-            srcset="{{ img.image["320"] }} 320w,
-                    {{ img.image["640"] }} 640w,
-                    {{ img.image[960] }} 960w,
-                    {{ img.image[1280] }} 1280w"
-            sizes="(max-width: 499px) 100vw,
-                  (min-width: 500px) 50vw"
-            src="{{ img.image["640"] }}"
-            loading="lazy">
-        </li>
-      {% endfor %}
-    </ul>
-  </div>
-  <div class="b-list-promo__info-container">
-    <h2 class="b-list-promo__title">{{ promoTitle }}</h2>
-    <p class="b-list-promo__strapline">{{ promoDescription }}</p>
-    <ul class="b-list-promo__info-list">
-      {% for item in promoItems %}
-        <li class="b-list-promo__list-item b-icon-list__item b-icon-list__icon b-icon-list__icon--{{ item.listIcon }}">
-          {{ item.listText }}
-        </li>
-      {% endfor %}
-    </ul>
-    <ul class="b-list-promo__cta-list">
-      <li>
-        <a href="{{ urlPrimary.url }}" class="b-list-promo__cta-btn u-btn u-btn--{% if modifier %}white{% else %}black{% endif %}">{{ urlPrimary.text }}</a>
-      </li>
-      {% if urlSecondary %}
-        <li>
-          <a href="{{ urlSecondary.url }}" class="b-list-promo__cta-btn u-btn u-btn--{% if modifier %}outlined-inverse{% else %}outlined{% endif %}">{{ urlSecondary.text }}</a>
-        </li>
-      {% endif %}
-    </ul>
-  </div>
-</div>
-
-<div style="padding: 40px 0"></div>
-
-<div class="b-list-promo {% for m in modifier %}b-list-promo--{{ m }}{% endfor %}" aria-label="Promotion: {{ promoTitle }}">
-  <div class="b-list-promo__image-list-container">
-    <ul class="b-list-promo__image-list">
-      {% for img in promoItems %}
-        <li class="b-list-promo__image-list-item {% if loop.first == true %}b-list-promo__image-list-item--active {% endif %}">
-          <img
-            alt="{{ promoTitle }}"
-            class="b-list-promo__image"
-            srcset="{{ img.image["320"] }} 320w,
-                    {{ img.image["640"] }} 640w,
-                    {{ img.image[960] }} 960w,
-                    {{ img.image[1280] }} 1280w"
-            sizes="(max-width: 499px) 100vw,
-                  (min-width: 500px) 50vw"
-            src="{{ img.image["640"] }}"
-            loading="lazy">
-        </li>
-      {% endfor %}
-    </ul>
+    {% for img in promoItems %}
+    <div class="b-list-promo__image-list-item {% if loop.first == true %}b-list-promo__image-list-item--active {% endif %}">
+      <img
+        alt="{{ promoTitle }}"
+        class="b-list-promo__image"
+        srcset="{{ img.image["320"] }} 320w,
+                {{ img.image["640"] }} 640w,
+                {{ img.image[960] }} 960w,
+                {{ img.image[1280] }} 1280w"
+        sizes="(min-width: 768px) 50vw,
+                100vw"
+        src="{{ img.image["640"] }}"
+        loading="lazy">
+    </div>
+    {% endfor %}
+    <div class="b-list-promo__ctrls">
+      <button class="u-btn-icon u-btn-icon--light u-btn-icon--point-left b-list-promo__ctrls-btn js-list-promo__ctrls-btn--prev" title="Previous item" type="button">Previous</button>
+      <button class="u-btn-icon u-btn-icon--light u-btn-icon--point-right b-list-promo__ctrls-btn js-list-promo__ctrls-btn--next" title="Next item" type="button">Next</button>
+    </div>
   </div>
   <div class="b-list-promo__info-container">
     <h2 class="b-list-promo__title">{{ promoTitle }}</h2>