diff --git a/openy_af4_vue_app/src/App.vue b/openy_af4_vue_app/src/App.vue
index 5ee3a6b..0f1e7f6 100644
--- a/openy_af4_vue_app/src/App.vue
+++ b/openy_af4_vue_app/src/App.vue
@@ -148,15 +148,12 @@
       v-else-if="step === 'results'"
       :data="data"
       :ages="ages"
-      :selected-ages="selectedAges"
       :is-loading-data="isLoadingData"
       :cart-items="cartItems"
       :legacy-mode="legacyMode"
       :disable-spots-available="disableSpotsAvailable"
-      :request-more-info="daxko"
       :bs-version="bsVersion"
       @startOver="startOver()"
-      @addItem="addItem($event)"
       @removeItem="removeItem($event)"
       @removeItems="removeItems"
     >
@@ -195,9 +192,18 @@
       <template v-slot:sort>
         <SortSelect v-model="selectedSort" :sort-options="sortOptions" />
       </template>
-      <template v-slot:pager>
-        <DaxkoPager v-if="daxko" v-model="selectedPage" :daxko-pages="daxkoPages" />
-        <Pager v-else v-model="selectedPage" :total-pages="data.pager_info.total_pages" />
+      <template v-slot:results-list>
+        <ResultsList
+          :results="data.table"
+          :ages="ages"
+          :selected-ages="selectedAges"
+          :cart-items="cartItems"
+          :legacy-mode="legacyMode"
+          :disable-spots-available="disableSpotsAvailable"
+          :request-more-info="daxko"
+          @addItem="addItem($event)"
+          @removeItem="removeItem($event)"
+        />
       </template>
       <template v-slot:no-results>
         <NoResults
@@ -212,6 +218,10 @@
           @clearKeywords="clearKeywords($event)"
         />
       </template>
+      <template v-slot:pager>
+        <DaxkoPager v-if="daxko" v-model="selectedPage" :daxko-pages="daxkoPages" />
+        <Pager v-else v-model="selectedPage" :total-pages="data.pager_info.total_pages" />
+      </template>
     </Results>
   </div>
 </template>
@@ -237,6 +247,7 @@ import SortRadios from '@/components/filters/SortRadios.vue'
 import SortSelect from '@/components/filters/SortSelect.vue'
 import SearchForm from '@/components/filters/SearchForm.vue'
 import NoResults from '@/components/NoResults.vue'
+import ResultsList from '@/components/ResultsList.vue'
 
 export default {
   name: 'ActivityFinder',
@@ -259,7 +270,8 @@ export default {
     SortRadios,
     SortSelect,
     SearchForm,
-    NoResults
+    NoResults,
+    ResultsList
   },
   props: {
     backendService: {
diff --git a/openy_af4_vue_app/src/components/Results.vue b/openy_af4_vue_app/src/components/Results.vue
index d1e5e99..be89b56 100644
--- a/openy_af4_vue_app/src/components/Results.vue
+++ b/openy_af4_vue_app/src/components/Results.vue
@@ -37,193 +37,14 @@
             </span>
           </div>
 
-          <div
-            v-for="item in data.table"
-            :key="item.nid ? item.nid : item.offering_id"
-            class="result"
-            role="button"
-            @click="showActivityDetailsModal(item)"
-          >
-            <div class="d-sm-none hidden-sm hidden-md hidden-lg">
-              <div class="result-header">
-                <span class="title">
-                  {{ item.name }}
-                </span>
-              </div>
-
-              <div class="ages-spots">
-                <span v-if="item.ages || (selectedAges.length && !legacyMode)" class="ages">
-                  <span class="age-label">{{ 'Ages' | t }}:</span>
-                  <span v-if="!selectedAges.length || legacyMode" class="info">
-                    {{ item.ages }}
-                  </span>
-                  <template v-for="age in selectedAges" v-else>
-                    <template
-                      v-if="
-                        (!item.min_age || parseInt(item.min_age) <= age) &&
-                          (!item.max_age || parseInt(item.max_age) >= age)
-                      "
-                    >
-                      <AgeIcon :key="age" :age="parseInt(age)" :ages="ages" big />
-                    </template>
-                  </template>
-                </span>
-                <AvailableSpots
-                  v-if="!disableSpotsAvailable && item.spots_available !== ''"
-                  :spots="Number(item.spots_available)"
-                  :wait-list="Number(item.wait_list_availability)"
-                />
-              </div>
-
-              <div v-if="item.dates" class="item-detail dates">
-                <i class="fa fa-calendar"></i>
-                <span>
-                  <span class="info">{{ item.dates }}</span>
-                  <br />
-                  <span v-if="item.days" class="details">{{ item.days }}</span>
-                </span>
-              </div>
-
-              <div class="item-detail schedule">
-                <i class="fa fa-clock fa-clock-o"></i>
-                <span class="schedule-items">
-                  <span
-                    v-for="(schedule, index) in item.schedule"
-                    :key="index"
-                    class="schedule-item"
-                  >
-                    <span class="info">{{ schedule.time }}</span>
-                    <br />
-                    <span class="details">{{ schedule.days }}</span>
-                  </span>
-                </span>
-              </div>
-
-              <div v-if="item.location" class="item-detail">
-                <i class="fa fa-map-marker"></i>
-                <span>
-                  <span class="info">{{ item.location }}</span>
-                  <br />
-                  <span v-if="item.roomName" class="details">{{ item.roomName }}</span>
-                </span>
-              </div>
-
-              <div v-if="item.instructor" class="item-detail instructor">
-                <i class="fa fa-user"></i>
-                <span>
-                  <span class="info">{{ item.instructor }}</span>
-                  <br />
-                  <span v-if="item.substitute" class="details">{{ item.substitute }}</span>
-                </span>
-              </div>
-            </div>
-
-            <div class="d-none d-sm-block hidden-xs">
-              <div class="result-header">
-                <span class="title">
-                  {{ item.name }}
-                </span>
-                <span v-if="item.ages || (selectedAges.length && !legacyMode)" class="ages">
-                  <span class="age-label">{{ 'Ages' | t }}:</span>
-                  <span v-if="!selectedAges.length || legacyMode" class="info">
-                    {{ item.ages }}
-                  </span>
-                  <template v-for="age in selectedAges" v-else>
-                    <template
-                      v-if="
-                        (!item.min_age || parseInt(item.min_age) <= age) &&
-                          (!item.max_age || parseInt(item.max_age) >= age)
-                      "
-                    >
-                      <AgeIcon :key="age" :age="parseInt(age)" :ages="ages" big />
-                    </template>
-                  </template>
-                </span>
-              </div>
-
-              <div class="row">
-                <div class="col-sm-4">
-                  <div v-if="item.dates" class="item-detail dates">
-                    <i class="fa fa-calendar"></i>
-                    <span>
-                      <span class="info">{{ item.dates }}</span>
-                      <br />
-                      <span v-if="item.days" class="details">{{ item.days }}</span>
-                    </span>
-                  </div>
-
-                  <div class="item-detail schedule">
-                    <i class="fa fa-clock fa-clock-o"></i>
-                    <span class="schedule-items">
-                      <span
-                        v-for="(schedule, index) in item.schedule"
-                        :key="index"
-                        class="schedule-item"
-                      >
-                        <span class="info">{{ schedule.time }}</span>
-                        <br />
-                        <span class="details">{{ schedule.days }}</span>
-                      </span>
-                    </span>
-                  </div>
-                </div>
-
-                <div class="col-sm-4">
-                  <div v-if="item.location" class="item-detail">
-                    <i class="fa fa-map-marker"></i>
-                    <span>
-                      <span class="info">{{ item.location }}</span>
-                      <br />
-                      <span v-if="item.roomName" class="details">{{ item.roomName }}</span>
-                    </span>
-                  </div>
-
-                  <div v-if="item.instructor" class="item-detail instructor">
-                    <i class="fa fa-user"></i>
-                    <span>
-                      <span class="info">{{ item.instructor }}</span>
-                      <br />
-                      <span v-if="item.substitute" class="details">{{ item.substitute }}</span>
-                    </span>
-                  </div>
-                </div>
-
-                <div class="col-sm-4">
-                  <div v-if="item.price" class="item-detail price">
-                    <i class="fa fa-money-bill fa-money"></i>
-                    <span>
-                      <span class="info">{{ item.price }}</span>
-                    </span>
-                  </div>
-                  <AvailableSpots
-                    v-if="!disableSpotsAvailable && item.spots_available !== ''"
-                    :spots="Number(item.spots_available)"
-                    :wait-list="Number(item.wait_list_availability)"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
+          <slot v-if="data.table.length" name="results-list" />
           <slot v-if="!data.table.length" name="no-results" />
 
-          <ActivityDetailsModal
-            v-model="activityDetailsModal.visible"
-            :item="activityDetailsModal.item"
-            :cart-items="cartItems"
-            :ages="ages"
-            :selected-ages="selectedAges"
-            :legacy-mode="legacyMode"
-            :disable-spots-available="disableSpotsAvailable"
-            :request-more-info="requestMoreInfo"
-            @bookmark="handleActivityDetailsBookmark($event)"
-            @unbookmark="handleActivityDetailsUnbookmark($event)"
-          />
           <BookmarkedItemsModal
             v-if="!legacyMode"
             v-model="bookmarkedItemsModal.visible"
             :cart-items="cartItems"
             :ages="ages"
-            :selected-ages="selectedAges"
             :disable-spots-available="disableSpotsAvailable"
             @removeItem="removeItem($event)"
             @removeItems="removeItems"
@@ -241,22 +62,16 @@
 
 <script>
 import Loading from '@/components/Loading.vue'
-import ActivityDetailsModal from '@/components/modals/ActivityDetails.vue'
 import BookmarkedItemsModal from '@/components/modals/BookmarkedItems.vue'
 import BookmarkFeatureModal from '@/components/modals/BookmarkFeature.vue'
-import AvailableSpots from '@/components/AvailableSpots'
-import AgeIcon from '@/components/AgeIcon.vue'
 import BookmarkIcon from '@/components/BookmarkIcon'
 
 export default {
   name: 'Results',
   components: {
     Loading,
-    ActivityDetailsModal,
     BookmarkedItemsModal,
     BookmarkFeatureModal,
-    AvailableSpots,
-    AgeIcon,
     BookmarkIcon
   },
   props: {
@@ -268,10 +83,6 @@ export default {
       type: Array,
       required: true
     },
-    selectedAges: {
-      type: Array,
-      required: true
-    },
     isLoadingData: {
       type: Boolean,
       required: true
@@ -288,10 +99,6 @@ export default {
       type: Boolean,
       required: true
     },
-    requestMoreInfo: {
-      type: Boolean,
-      default: false
-    },
     bsVersion: {
       type: Number,
       required: true
@@ -299,10 +106,6 @@ export default {
   },
   data() {
     return {
-      activityDetailsModal: {
-        item: {},
-        visible: false
-      },
       bookmarkedItemsModal: {
         visible: false
       }
@@ -320,34 +123,6 @@ export default {
     startOver() {
       this.$emit('startOver')
     },
-    showActivityDetailsModal(item) {
-      this.activityDetailsModal.item = item
-      this.activityDetailsModal.visible = true
-    },
-    handleActivityDetailsBookmark(age) {
-      if (age) {
-        this.$emit('addItem', {
-          item: this.activityDetailsModal.item,
-          age: age
-        })
-      } else {
-        this.$emit('addItem', {
-          item: this.activityDetailsModal.item,
-          age: null
-        })
-      }
-    },
-    handleActivityDetailsUnbookmark(age) {
-      this.cartItems.forEach((cartItem, index) => {
-        if (
-          cartItem.age === age &&
-          cartItem.item.product_id === this.activityDetailsModal.item.product_id &&
-          cartItem.item.nid === this.activityDetailsModal.item.nid
-        ) {
-          this.removeItem(index)
-        }
-      })
-    },
     onBookmarkIconClick() {
       this.bookmarkedItemsModal.visible = true
     },
@@ -392,107 +167,5 @@ export default {
       color: $af-blue;
     }
   }
-
-  .result {
-    padding: 10px;
-    color: $af-black;
-
-    @include media-breakpoint-up('lg') {
-      padding: 20px;
-    }
-
-    &:nth-of-type(odd) {
-      background-color: $af-light-gray;
-    }
-
-    .result-header {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .title {
-      font-size: 14px;
-      line-height: 21px;
-      color: $af-blue;
-      font-weight: bold;
-      margin-bottom: 10px;
-
-      @include media-breakpoint-up('lg') {
-        font-size: 18px;
-        line-height: 27px;
-        margin-bottom: 20px;
-      }
-    }
-
-    .ages-spots {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 15px;
-    }
-
-    .age-label {
-      font-size: 10px;
-      line-height: 15px;
-      margin-right: 5px;
-
-      @include media-breakpoint-up('lg') {
-        font-size: 12px;
-        line-height: 18px;
-        margin-right: 10px;
-      }
-    }
-
-    .item-detail {
-      display: flex;
-      margin-bottom: 10px;
-
-      @include media-breakpoint-up('lg') {
-        margin-bottom: 20px;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .schedule-items {
-        display: flex;
-
-        @include media-breakpoint-up('md') {
-          flex-direction: column;
-        }
-
-        .schedule-item {
-          margin-right: 10px;
-
-          @include media-breakpoint-up('md') {
-            margin-right: 0;
-          }
-
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-      }
-
-      .details {
-        font-size: 10px;
-        line-height: 15px;
-      }
-
-      .fa {
-        font-size: 20px;
-        color: $af-dark-gray;
-        margin-right: 10px;
-        width: 20px;
-        text-align: center;
-        flex-shrink: 0;
-      }
-    }
-
-    .info {
-      font-size: 12px;
-      line-height: 18px;
-    }
-  }
 }
 </style>
diff --git a/openy_af4_vue_app/src/components/ResultsList.vue b/openy_af4_vue_app/src/components/ResultsList.vue
new file mode 100644
index 0000000..b8fc26c
--- /dev/null
+++ b/openy_af4_vue_app/src/components/ResultsList.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="results-list-component">
+    <div
+      v-for="item in results"
+      :key="item.nid ? item.nid : item.offering_id"
+      class="result"
+      role="button"
+      @click="showActivityDetailsModal(item)"
+    >
+      <div class="d-sm-none hidden-sm hidden-md hidden-lg">
+        <div class="result-header">
+          <span class="title">
+            {{ item.name }}
+          </span>
+        </div>
+
+        <div class="ages-spots">
+          <span v-if="item.ages || (selectedAges.length && !legacyMode)" class="ages">
+            <span class="age-label">{{ 'Ages' | t }}:</span>
+            <span v-if="!selectedAges.length || legacyMode" class="info">
+              {{ item.ages }}
+            </span>
+            <template v-for="age in selectedAges" v-else>
+              <template
+                v-if="
+                  (!item.min_age || parseInt(item.min_age) <= age) &&
+                    (!item.max_age || parseInt(item.max_age) >= age)
+                "
+              >
+                <AgeIcon :key="age" :age="parseInt(age)" :ages="ages" big />
+              </template>
+            </template>
+          </span>
+          <AvailableSpots
+            v-if="!disableSpotsAvailable && item.spots_available !== ''"
+            :spots="Number(item.spots_available)"
+            :wait-list="Number(item.wait_list_availability)"
+          />
+        </div>
+
+        <div v-if="item.dates" class="item-detail dates">
+          <i class="fa fa-calendar"></i>
+          <span>
+            <span class="info">{{ item.dates }}</span>
+            <br />
+            <span v-if="item.days" class="details">{{ item.days }}</span>
+          </span>
+        </div>
+
+        <div class="item-detail schedule">
+          <i class="fa fa-clock fa-clock-o"></i>
+          <span class="schedule-items">
+            <span v-for="(schedule, index) in item.schedule" :key="index" class="schedule-item">
+              <span class="info">{{ schedule.time }}</span>
+              <br />
+              <span class="details">{{ schedule.days }}</span>
+            </span>
+          </span>
+        </div>
+
+        <div v-if="item.location" class="item-detail">
+          <i class="fa fa-map-marker"></i>
+          <span>
+            <span class="info">{{ item.location }}</span>
+            <br />
+            <span v-if="item.roomName" class="details">{{ item.roomName }}</span>
+          </span>
+        </div>
+
+        <div v-if="item.instructor" class="item-detail instructor">
+          <i class="fa fa-user"></i>
+          <span>
+            <span class="info">{{ item.instructor }}</span>
+            <br />
+            <span v-if="item.substitute" class="details">{{ item.substitute }}</span>
+          </span>
+        </div>
+      </div>
+
+      <div class="d-none d-sm-block hidden-xs">
+        <div class="result-header">
+          <span class="title">
+            {{ item.name }}
+          </span>
+          <span v-if="item.ages || (selectedAges.length && !legacyMode)" class="ages">
+            <span class="age-label">{{ 'Ages' | t }}:</span>
+            <span v-if="!selectedAges.length || legacyMode" class="info">
+              {{ item.ages }}
+            </span>
+            <template v-for="age in selectedAges" v-else>
+              <template
+                v-if="
+                  (!item.min_age || parseInt(item.min_age) <= age) &&
+                    (!item.max_age || parseInt(item.max_age) >= age)
+                "
+              >
+                <AgeIcon :key="age" :age="parseInt(age)" :ages="ages" big />
+              </template>
+            </template>
+          </span>
+        </div>
+
+        <div class="row">
+          <div class="col-sm-4">
+            <div v-if="item.dates" class="item-detail dates">
+              <i class="fa fa-calendar"></i>
+              <span>
+                <span class="info">{{ item.dates }}</span>
+                <br />
+                <span v-if="item.days" class="details">{{ item.days }}</span>
+              </span>
+            </div>
+
+            <div class="item-detail schedule">
+              <i class="fa fa-clock fa-clock-o"></i>
+              <span class="schedule-items">
+                <span v-for="(schedule, index) in item.schedule" :key="index" class="schedule-item">
+                  <span class="info">{{ schedule.time }}</span>
+                  <br />
+                  <span class="details">{{ schedule.days }}</span>
+                </span>
+              </span>
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <div v-if="item.location" class="item-detail">
+              <i class="fa fa-map-marker"></i>
+              <span>
+                <span class="info">{{ item.location }}</span>
+                <br />
+                <span v-if="item.roomName" class="details">{{ item.roomName }}</span>
+              </span>
+            </div>
+
+            <div v-if="item.instructor" class="item-detail instructor">
+              <i class="fa fa-user"></i>
+              <span>
+                <span class="info">{{ item.instructor }}</span>
+                <br />
+                <span v-if="item.substitute" class="details">{{ item.substitute }}</span>
+              </span>
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <div v-if="item.price" class="item-detail price">
+              <i class="fa fa-money-bill fa-money"></i>
+              <span>
+                <span class="info">{{ item.price }}</span>
+              </span>
+            </div>
+            <AvailableSpots
+              v-if="!disableSpotsAvailable && item.spots_available !== ''"
+              :spots="Number(item.spots_available)"
+              :wait-list="Number(item.wait_list_availability)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ActivityDetailsModal
+      v-model="activityDetailsModal.visible"
+      :item="activityDetailsModal.item"
+      :cart-items="cartItems"
+      :ages="ages"
+      :selected-ages="selectedAges"
+      :legacy-mode="legacyMode"
+      :disable-spots-available="disableSpotsAvailable"
+      :request-more-info="requestMoreInfo"
+      @bookmark="handleActivityDetailsBookmark($event)"
+      @unbookmark="handleActivityDetailsUnbookmark($event)"
+    />
+  </div>
+</template>
+
+<script>
+import ActivityDetailsModal from '@/components/modals/ActivityDetails.vue'
+import AvailableSpots from '@/components/AvailableSpots'
+import AgeIcon from '@/components/AgeIcon.vue'
+
+export default {
+  name: 'ResultsList',
+  components: {
+    ActivityDetailsModal,
+    AvailableSpots,
+    AgeIcon
+  },
+  props: {
+    results: {
+      type: Array,
+      required: true
+    },
+    ages: {
+      type: Array,
+      required: true
+    },
+    selectedAges: {
+      type: Array,
+      required: true
+    },
+    cartItems: {
+      type: Array,
+      required: true
+    },
+    legacyMode: {
+      type: Boolean,
+      required: true
+    },
+    disableSpotsAvailable: {
+      type: Boolean,
+      required: true
+    },
+    requestMoreInfo: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      activityDetailsModal: {
+        item: {},
+        visible: false
+      }
+    }
+  },
+  methods: {
+    showActivityDetailsModal(item) {
+      this.activityDetailsModal.item = item
+      this.activityDetailsModal.visible = true
+    },
+    handleActivityDetailsBookmark(age) {
+      if (age) {
+        this.$emit('addItem', {
+          item: this.activityDetailsModal.item,
+          age: age
+        })
+      } else {
+        this.$emit('addItem', {
+          item: this.activityDetailsModal.item,
+          age: null
+        })
+      }
+    },
+    handleActivityDetailsUnbookmark(age) {
+      this.cartItems.forEach((cartItem, index) => {
+        if (
+          cartItem.age === age &&
+          cartItem.item.product_id === this.activityDetailsModal.item.product_id &&
+          cartItem.item.nid === this.activityDetailsModal.item.nid
+        ) {
+          this.$emit('removeItem', index)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.results-list-component {
+  .result {
+    padding: 10px;
+    color: $af-black;
+
+    @include media-breakpoint-up('lg') {
+      padding: 20px;
+    }
+
+    &:nth-of-type(odd) {
+      background-color: $af-light-gray;
+    }
+
+    .result-header {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .title {
+      font-size: 14px;
+      line-height: 21px;
+      color: $af-blue;
+      font-weight: bold;
+      margin-bottom: 10px;
+
+      @include media-breakpoint-up('lg') {
+        font-size: 18px;
+        line-height: 27px;
+        margin-bottom: 20px;
+      }
+    }
+
+    .ages-spots {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 15px;
+    }
+
+    .age-label {
+      font-size: 10px;
+      line-height: 15px;
+      margin-right: 5px;
+
+      @include media-breakpoint-up('lg') {
+        font-size: 12px;
+        line-height: 18px;
+        margin-right: 10px;
+      }
+    }
+
+    .item-detail {
+      display: flex;
+      margin-bottom: 10px;
+
+      @include media-breakpoint-up('lg') {
+        margin-bottom: 20px;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .schedule-items {
+        display: flex;
+
+        @include media-breakpoint-up('md') {
+          flex-direction: column;
+        }
+
+        .schedule-item {
+          margin-right: 10px;
+
+          @include media-breakpoint-up('md') {
+            margin-right: 0;
+          }
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+
+      .details {
+        font-size: 10px;
+        line-height: 15px;
+      }
+
+      .fa {
+        font-size: 20px;
+        color: $af-dark-gray;
+        margin-right: 10px;
+        width: 20px;
+        text-align: center;
+        flex-shrink: 0;
+      }
+    }
+
+    .info {
+      font-size: 12px;
+      line-height: 18px;
+    }
+  }
+}
+</style>
diff --git a/openy_af4_vue_app/src/components/modals/BookmarkedItems.vue b/openy_af4_vue_app/src/components/modals/BookmarkedItems.vue
index fbd9e01..0efba0d 100644
--- a/openy_af4_vue_app/src/components/modals/BookmarkedItems.vue
+++ b/openy_af4_vue_app/src/components/modals/BookmarkedItems.vue
@@ -160,10 +160,6 @@ export default {
       type: Array,
       required: true
     },
-    selectedAges: {
-      type: Array,
-      required: true
-    },
     disableSpotsAvailable: {
       type: Boolean,
       required: true