diff --git a/jam-ui/cypress/e2e/jamtracks/jamtracks-page.cy.js b/jam-ui/cypress/e2e/jamtracks/jamtracks-page.cy.js
index 83b7600f0..c082ce940 100644
--- a/jam-ui/cypress/e2e/jamtracks/jamtracks-page.cy.js
+++ b/jam-ui/cypress/e2e/jamtracks/jamtracks-page.cy.js
@@ -32,46 +32,80 @@ describe('JamTracks Page', () => {
       cy.intercept('GET', /\S+\/jamtracks\?per_page=10\&page=1\&\S+/, { fixture: 'jamtracks_page1' }).as('getJamTracks_page1');
       cy.intercept('GET', /\S+\/jamtracks\?per_page=10\&page=2\&\S+/, { fixture: 'jamtracks_page2' }).as('getJamTracks_page2');
       cy.intercept('GET', /\S+\/jamtracks\?per_page=10\&page=3\&\S+/, { fixture: 'jamtracks_page3' }).as('getJamTracks_page3');
+      cy.intercept('GET', /\S+\/shopping_carts/,  {
+        statusCode: 200,
+        body: []
+      }).as('getShoppingCart');
       cy.intercept('POST', /\S+\/shopping_carts\/add_jamtrack/, {
-        body: { success: true }
+        statusCode: 200,
+        body: { id: 1,
+          product_info: {
+            total_price: 9.99
+         }
+        }
       }).as('addJamTrackToCart');
-      })
+      cy.intercept('GET', /\S+\/jamtracks\/purchased/,  {
+        statusCode: 200,
+        body: []
+      }).as('getPurchasedJamTracks');
+    })
+
+    it('should display the JamTracks', () => {
+      cy.get('input[type="search"]').type('ba{enter}');
+      cy.wait('@getJamTracks_page1');
+      cy.contains('Search Results: JamTracks including "ba"');
+      cy.get('[data-testid=jamtracks-table] tbody tr:first .track-name-col').should('contain', 'Back in Black by AC DC');
+      cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col .jamtrack-track:visible').should('have.length', 6);
+      cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col').contains('Show all tracks').click();
+      cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col .jamtrack-track:visible').should('have.length', 10);
+      cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col').contains('Show fewer tracks').click();
+      cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col .jamtrack-track:visible').should('have.length', 6);
+
+      //load more
+      cy.get('button').contains('Load More').click();
+      cy.wait('@getJamTracks_page2');
+
+      //load more
+      cy.get('button').contains('Load More').click();
+      cy.wait('@getJamTracks_page3');
+
+      cy.get('[data-testid=jamtracks-table] tbody tr').should('have.length', 30);
+
+      //no more pages
+      cy.get('[data-testid=moreBtn]').should('not.exist');
+    });
+
+    it('let user to purchase a JamTrack', () => {
+      cy.get('input[type="search"]').type('ba{enter}');
+      cy.wait('@getJamTracks_page1');
+      cy.wait('@getShoppingCart');
+      cy.get('[data-testid=jamtracks-table] tbody tr').eq(2).find('.purchase-button-col button').should('contain', 'Add to Cart').click();
+      cy.wait('@getShoppingCart');
+      cy.wait('@addJamTrackToCart');
+      cy.location('pathname').should('eq', '/shopping-cart')
+    });
+
+
+
+    describe.only('mobile', () => { 
+      beforeEach(() => {
+        cy.viewport('iphone-6');
+      });
 
       it('should display the JamTracks', () => {
         cy.get('input[type="search"]').type('ba{enter}');
         cy.wait('@getJamTracks_page1');
         cy.contains('Search Results: JamTracks including "ba"');
-        cy.get('[data-testid=jamtracks-table] tbody tr:first .track-name-col').should('contain', 'Back in Black by AC DC');
-        cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col .jamtrack-track:visible').should('have.length', 6);
-        cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col').contains('Show all tracks').click();
-        cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col .jamtrack-track:visible').should('have.length', 10);
-        cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col').contains('Show fewer tracks').click();
-        cy.get('[data-testid=jamtracks-table] tbody tr:first .track-tracks-col .jamtrack-track:visible').should('have.length', 6);
-  
-        //load more
-        cy.get('button').contains('Load More').click();
-        cy.wait('@getJamTracks_page2');
-  
-        //load more
-        cy.get('button').contains('Load More').click();
-        cy.wait('@getJamTracks_page3');
-  
-        cy.get('[data-testid=jamtracks-table] tbody tr').should('have.length', 30);
-  
-        //no more pages
-        cy.get('[data-testid=moreBtn]').should('not.exist');
       });
-  
-      it('let user to purchase a JamTrack', () => {
-        cy.get('input[type="search"]').type('ba{enter}');
-        cy.wait('@getJamTracks_page1');
-        cy.get('[data-testid=jamtracks-table] tbody tr').eq(2).find('.purchase-button-col button').should('contain', 'Add to Cart').click();
-        cy.wait('@addJamTrackToCart');
-        cy.location('pathname').should('eq', '/shopping-cart')
-      });
-  
     });
 
 
 
+
+    
+  });
+
+
+
+
 });
diff --git a/jam-ui/src/components/dashboard/JKDashboardMain.js b/jam-ui/src/components/dashboard/JKDashboardMain.js
index 53da4ab69..aae1045da 100644
--- a/jam-ui/src/components/dashboard/JKDashboardMain.js
+++ b/jam-ui/src/components/dashboard/JKDashboardMain.js
@@ -57,7 +57,7 @@ import JKShoppingCart from '../shopping-cart/JKShoppingCart';
 import JKCheckout from '../shopping-cart/JKCheckout';
 import JKCheckoutSuccess from '../shopping-cart/JKCheckoutSuccess';
 import JKMyJamTracks from '../jamtracks/JKMyJamTracks';
-import JKJamTrack from '../jamtracks/JKJamTrack';
+import JKJamTrackShow from '../jamtracks/JKJamTrackShow';
 
 
 //import loadable from '@loadable/component';
@@ -313,7 +313,7 @@ function JKDashboardMain() {
           <PrivateRoute path="/affiliate/signups" component={JKAffiliateSignups} />
           <PrivateRoute path="/affiliate/earnings" component={JKAffiliateEarnings} />
           <PrivateRoute path="/affiliate/agreement" component={JKAffiliateAgreement} />
-          <PrivateRoute path="/jamtracks/:id" component={JKJamTrack} />
+          <PrivateRoute path="/jamtracks/:id" component={JKJamTrackShow} />
           <PrivateRoute path="/jamtracks" component={JKJamTracksFilter} />
           <PrivateRoute path="/my-jamtracks" component={JKMyJamTracks} />
           <PrivateRoute path="/shopping-cart" component={JKShoppingCart} />
diff --git a/jam-ui/src/components/jamtracks/JKJamTrackItem.js b/jam-ui/src/components/jamtracks/JKJamTrackItem.js
new file mode 100644
index 000000000..1d549b5e4
--- /dev/null
+++ b/jam-ui/src/components/jamtracks/JKJamTrackItem.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+import { useResponsive } from '@farfetch/react-context-responsive'
+import { Row, Col } from 'reactstrap'
+import JKJamTrackPreview from './JKJamTrackPreview'
+import JKJamTrackPurchaseButton from './JKJamTrackPurchaseButton'
+import { JamTrackPreviewProvider } from '../../context/JamTrackPreviewContext'
+
+
+const JKJamTrackItem = ({ jamTrack }) => {
+  const { t } = useTranslation('jamtracks')
+  const { greaterThan } = useResponsive()
+  return (
+    <>
+      <JamTrackPreviewProvider>
+        {greaterThan.sm ? (
+          <tr key={`jamtrck-preview-row-${jamTrack.id}`}>
+            <td className="track-name-col">
+              {jamTrack.name} <br />
+              <span className='fs--1'>by {jamTrack.original_artist}</span>
+            </td>
+            <td className="track-tracks-col fs--1">
+              <JKJamTrackPreview jamTrack={jamTrack} />
+            </td>
+            <td className="purchase-button-col text-center" align='center'>
+              <JKJamTrackPurchaseButton jamTrack={jamTrack} />
+            </td>
+          </tr>
+        ) : (
+          <Row>
+            <Col xs={12} className="mb-3">
+              <h5>
+                {jamTrack.name}
+              </h5>
+              <h6 className="fs--1">
+                by {jamTrack.original_artist}
+              </h6>
+            </Col>
+            <Col xs={12} className="mb-3">
+              <JKJamTrackPreview jamTrack={jamTrack} />
+            </Col>
+            <Col xs={12} className="mb-3">
+              <JKJamTrackPurchaseButton jamTrack={jamTrack} />
+            </Col>
+          </Row>
+        )}
+      </JamTrackPreviewProvider>
+    </>
+  )
+}
+
+JKJamTrackItem.propTypes = {
+  jamTrack: PropTypes.object.isRequired
+}
+
+export default JKJamTrackItem
\ No newline at end of file
diff --git a/jam-ui/src/components/jamtracks/JKJamTrackPreview.js b/jam-ui/src/components/jamtracks/JKJamTrackPreview.js
index e432081db..707eeabc7 100644
--- a/jam-ui/src/components/jamtracks/JKJamTrackPreview.js
+++ b/jam-ui/src/components/jamtracks/JKJamTrackPreview.js
@@ -2,9 +2,11 @@ import React, { Fragment, useState } from 'react';
 import { Row, Col, Container } from 'reactstrap';
 import JKJamTrackTrack from './JKJamTrackTrack';
 import PropTypes from 'prop-types';
+import { useResponsive } from '@farfetch/react-context-responsive';
 
 const JKJamTrackPreview = ({ jamTrack }) => {
   const [expanded, setExpanded] = useState(false);
+  const { greaterThan } = useResponsive();
 
   const toggleMoreTracks = (e) => {
     e.preventDefault();
@@ -12,18 +14,29 @@ const JKJamTrackPreview = ({ jamTrack }) => {
   };
 
   return (
-    <Container>
-      <Row>
-        {jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => (
-          <Fragment key={track.id} >
-            <Col className={ index + 1 > 6 && !expanded ? 'd-none' : null}>
+    <>
+      {greaterThan.sm ? (
+        <Row>
+          {jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => (
+            <Fragment key={track.id} >
+              <Col className={index + 1 > 6 && !expanded ? 'd-none' : null}>
+                <JKJamTrackTrack track={track} />
+              </Col>
+              {(index + 1) % 2 === 0 && <div className="w-100" />}
+              {(index + 1) === jamTrack.tracks.length && (index + 1) % 2 !== 0 && <div className="col" />}
+            </Fragment>
+          ))}
+        </Row>
+      ) : (
+        <Row>
+          {jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => (
+            <Col key={track.id} xs={12} className={index + 1 > 6 && !expanded ? 'd-none mb-3' : 'mb-3'}>
               <JKJamTrackTrack track={track} />
             </Col>
-            {(index + 1) % 2 === 0 && <div className="w-100" />}
-            {(index + 1) === jamTrack.tracks.length && (index + 1) % 2 !== 0 && <div className="col" />}
-          </Fragment>
-        ))}
-      </Row>
+          ))}
+        </Row>
+      )}
+
       {jamTrack.tracks.length > 6 && (
         <Row>
           <Col>
@@ -31,7 +44,7 @@ const JKJamTrackPreview = ({ jamTrack }) => {
           </Col>
         </Row>
       )}
-    </Container>
+    </>
   );
 };
 
diff --git a/jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js b/jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js
index be948a394..7385ce67a 100644
--- a/jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js
+++ b/jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js
@@ -27,17 +27,14 @@ const JKJamTrackPurchaseButton = ({ jamTrack }) => {
 
     try {
       const resp = await addCartItem(options);
-      console.log('resp1', resp);
       if(resp.fast_reedem){ //if this is a free jamtrack
         //get shopping cart items and see if all are free
         if(!hasOnlyFreeItemsInShoppingCart()){
           history.push('/jamtracks');
         }else{
           const purchadeResp = await placeOrder();
-          console.log('resp2', purchadeResp);
           if(purchadeResp.ok){
             const userResp = await updateUser(currentUser.id);
-            console.log('resp3', userResp);
             if(userResp.ok){
               history.push('/checkout/success?free=yes&jamtrackId=' + jamTrack.id);
             }
diff --git a/jam-ui/src/components/jamtracks/JKJamTrack.js b/jam-ui/src/components/jamtracks/JKJamTrackShow.js
similarity index 95%
rename from jam-ui/src/components/jamtracks/JKJamTrack.js
rename to jam-ui/src/components/jamtracks/JKJamTrackShow.js
index dd68cfc0c..8f3f6cf25 100644
--- a/jam-ui/src/components/jamtracks/JKJamTrack.js
+++ b/jam-ui/src/components/jamtracks/JKJamTrackShow.js
@@ -12,7 +12,7 @@ import JKJamTrackResourceLinks from './JKJamTrackResourceLinks';
 import { useAuth } from '../../context/UserAuth';
 import { useJamTrack } from '../../hooks/useJamTrack';
 
-const JKJamTrack = () => {
+const JKJamTrackShow = () => {
   const { t } = useTranslation('jamtracks');
   const { greaterThan } = useResponsive();
   const { id } = useParams();
@@ -63,13 +63,13 @@ const JKJamTrack = () => {
                 <FalconCardHeader title={t('jamtrack.player.title')} titleClass="font-weight-semi-bold" />
                 <CardBody className="pt-3">{jamTrack && <JKJamTrackPlayer />}</CardBody>
               </Card>
-              <Card className="mx-auto">
+              <Card className="mx-auto mb-4">
                 <FalconCardHeader title={t('jamtrack.my_mixes.title')} titleClass="font-weight-semi-bold" />
                 <CardBody className="pt-3">{jamTrack && <JKMyJamTrackMixes />}</CardBody>
               </Card>
             </Col>
             <Col sm={12} md={4}>
-              <Card className="mx-auto">
+              <Card className="mx-auto mb-4">
                 <FalconCardHeader title={t('jamtrack.create_mix.title')} titleClass="font-weight-semi-bold" />
                 <CardBody className="pt-3">{jamTrack && <JKCreateCustomMix />}</CardBody>
               </Card>
@@ -89,4 +89,4 @@ const JKJamTrack = () => {
   );
 };
 
-export default JKJamTrack;
+export default JKJamTrackShow;
diff --git a/jam-ui/src/components/jamtracks/JKJamTrackTrack.js b/jam-ui/src/components/jamtracks/JKJamTrackTrack.js
index ca55ffac3..9aeeb5f85 100644
--- a/jam-ui/src/components/jamtracks/JKJamTrackTrack.js
+++ b/jam-ui/src/components/jamtracks/JKJamTrackTrack.js
@@ -7,7 +7,6 @@ import { Spinner } from 'reactstrap';
 import PropTypes from 'prop-types';
 
 const JKJamTrackTrack = ({ track }) => {
-  console.log('debug JKTrackPlayPause track');
   const [isPlaying, setIsPlaying] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -112,7 +111,7 @@ const JKJamTrackTrack = ({ track }) => {
       </span>
       {trackInfo && (
         <>
-          <span className="mr-1 pb-1">
+          <span className="mr-1 pb-1" style={{ width: '30px' }}>
             <JKInstrumentIcon instrumentId={trackInfo.instrumentId} instrumentName={trackInfo.instrumentDescription} />
           </span>
           <span>
diff --git a/jam-ui/src/components/jamtracks/JKJamTracksAutoComplete.js b/jam-ui/src/components/jamtracks/JKJamTracksAutoComplete.js
index 4385e9f58..127d6a882 100644
--- a/jam-ui/src/components/jamtracks/JKJamTracksAutoComplete.js
+++ b/jam-ui/src/components/jamtracks/JKJamTracksAutoComplete.js
@@ -100,7 +100,7 @@ const JKJamTracksAutoComplete = ({
   };
 
   return (
-    <Row className="mb-2">
+    <Row className="">
       <Col md={12}>
         <FormGroup className="mb-3">
           <div className="d-flex align-items-center">
diff --git a/jam-ui/src/components/jamtracks/JKJamTracksFilter.js b/jam-ui/src/components/jamtracks/JKJamTracksFilter.js
index f1985bdc4..587b7dc98 100644
--- a/jam-ui/src/components/jamtracks/JKJamTracksFilter.js
+++ b/jam-ui/src/components/jamtracks/JKJamTracksFilter.js
@@ -4,9 +4,9 @@ import { Card, CardBody, Row, Col } from 'reactstrap';
 import FalconCardHeader from '../common/FalconCardHeader';
 import { useTranslation } from 'react-i18next';
 import JKJamTracksAutoComplete from './JKJamTracksAutoComplete';
-import { getJamTracks, getJamTrackArtists, autocompleteJamTracks } from '../../helpers/rest';
-import JKJamTrackArtists from './JKJamTrackArtists';
+import { getJamTracks, autocompleteJamTracks } from '../../helpers/rest';
 import JKJamTracksList from './JKJamTracksList';
+import JKJamTracksSlider from './JKJamTracksSlider';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useShoppingCart } from '../../hooks/useShoppingCart';
 import { useResponsive } from '@farfetch/react-context-responsive';
@@ -14,22 +14,17 @@ import { useResponsive } from '@farfetch/react-context-responsive';
 const JKJamTracksFilter = () => {
   const { t } = useTranslation('jamtracks');
   const [jamTracks, setJamTracks] = useState([]);
-  //const [artists, setArtists] = useState([]);
   const [selected, setSelected] = useState(null);
   const [searchTerm, setSearchTerm] = useState('');
   const [showDropdown, setShowDropdown] = useState(false);
-  //const [showArtists, setShowArtists] = useState(false);
   const [nextOffset, setNextOffset] = useState(null);
+  const [totalJamTracks, setTotalJamTracks] = useState(0);
   const [autoCompleteInputValue, setAutoCompleteInputValue] = useState('');
   const [page, setPage] = useState(1);
   const PER_PAGE = 10;
   const { shoppingCart } = useShoppingCart();
   const { greaterThan } = useResponsive();
 
-  // useEffect(() => {
-  //   setCartItems(shoppingCart);
-  // }, []);
-
   useEffect(() => {
     if (selected) {
       setSearchTerm(selected.type === 'artist' ? selected.original_artist : selected.name);
@@ -58,10 +53,8 @@ const JKJamTracksFilter = () => {
 
   const handleOnSelect = async selected => {
     setPage(1);
-    //setArtists([]);
     setJamTracks([]);
     setSearchTerm('');
-    //setShowArtists(false);
     setSelected(selected);
     const params = queryOptions(selected);
     await fetchJamTracks(params);
@@ -69,28 +62,13 @@ const JKJamTracksFilter = () => {
 
   const handleOnEnter = async queryStr => {
     setPage(1);
-    //setArtists([]);
     setJamTracks([]);
     setSelected(x => null);
     setSearchTerm(queryStr);
-    //setShowArtists(false);
-    //fetchArtists(queryStr);
     const params = queryOptions(queryStr);
-    console.log('handleOnEnter _params', params, selected);
     await fetchJamTracks(params);
   };
 
-  // const handleOnSelectArtist = async artist => {
-  //   setPage(1);
-  //   const selectedOpt = {
-  //     type: 'artist',
-  //     original_artist: artist.original_artist
-  //   };
-  //   setShowDropdown(false);
-  //   setAutoCompleteInputValue('');
-  //   await handleOnSelect(selectedOpt);
-  // };
-
   const handleOnNextJamTracksPage = async () => {
     const currentQuery = selected ? selected : searchTerm;
     const params = queryOptions(currentQuery);
@@ -101,35 +79,16 @@ const JKJamTracksFilter = () => {
     try {
       const resp = await getJamTracks(options);
       const data = await resp.json();
-      console.log('jamtracks', data);
+      //console.log('jamtracks', data);
       setJamTracks(prev => [...prev, ...data.jamtracks]);
       setNextOffset(data.next);
+      setTotalJamTracks(data.count);
       setPage(page + 1);
     } catch (error) {
       console.error('error', error);
     }
   };
 
-  // const fetchArtists = query => {
-  //   const options = {
-  //     limit: 100
-  //   };
-  //   options.artist_search = query;
-
-  //   getJamTrackArtists(options)
-  //     .then(resp => {
-  //       return resp.json();
-  //     })
-  //     .then(data => {
-  //       console.log('artists', data);
-  //       setArtists(data.artists);
-  //       setShowArtists(true);
-  //     })
-  //     .catch(error => {
-  //       console.error('error', error);
-  //     });
-  // };
-
   return (
     <Card>
       <FalconCardHeader title={t('search.page_title')} titleClass="font-weight-bold" />
@@ -139,6 +98,7 @@ const JKJamTracksFilter = () => {
             <JKJamTrackFilterLinks shoppingCart={shoppingCart} wrapperClassNames='d-flex flex-column' shoppingCartClassNames="col mt-1 mb-2" downloadLinkClassNames='col' />
           </Row>
         )}
+        
         <Row>
           <Col>
             <JKJamTracksAutoComplete
@@ -154,30 +114,51 @@ const JKJamTracksFilter = () => {
           </Col>
           {greaterThan.sm && (
             <Col>
-            <JKJamTrackFilterLinks
-              shoppingCart={shoppingCart}
-              wrapperClassNames="d-flex justify-content-end"
-              shoppingCartClassNames="ml-3 mr-1"
-            />
+              <JKJamTrackFilterLinks
+                shoppingCart={shoppingCart}
+                wrapperClassNames="d-flex justify-content-end"
+                shoppingCartClassNames="ml-3 mr-1"
+              />
             </Col>
           )}
         </Row>
-
-        {/* <div className="mb-3">
-          <JKJamTrackArtists
-            artists={artists}
+        <>
+          {selected?.type && searchTerm.length && jamTracks.length > 0 ? (
+            <Row className="mb-2">
+              <Col>
+                <strong>
+                  {t('search.search_results.for_selection')} {selected?.type} "{searchTerm}"
+                </strong>
+              </Col>
+            </Row>
+          ) : (
+            searchTerm.length > 0 &&
+            jamTracks.length > 0 && (
+              <Row className="mb-2">
+                <Col>
+                  <strong>{t('search.search_results.for_search_term')} "{searchTerm}"</strong>
+                </Col>
+              </Row>
+            )
+          )}
+        </>
+        {greaterThan.sm ? (
+          <JKJamTracksList
+            selectedType={selected?.type}
             searchTerm={searchTerm}
-            onSelect={handleOnSelectArtist}
-            showArtists={showArtists}
+            jamTracks={jamTracks}
+            nextOffset={nextOffset}
+            onNextPage={handleOnNextJamTracksPage}
           />
-        </div> */}
-        <JKJamTracksList
-          selectedType={selected?.type}
-          searchTerm={searchTerm}
-          jamTracks={jamTracks}
-          nextOffset={nextOffset}
-          onNextPage={handleOnNextJamTracksPage}
-        />
+        ) : (
+          <div className="swiper-container d-block d-md-none">
+
+            <JKJamTracksSlider jamTracks={jamTracks} onNextPage={handleOnNextJamTracksPage} totalJamTracks={totalJamTracks} />
+
+          </div>
+        )
+        }
+
       </CardBody>
     </Card>
   );
diff --git a/jam-ui/src/components/jamtracks/JKJamTracksList.js b/jam-ui/src/components/jamtracks/JKJamTracksList.js
index c83fce326..d8aae74c6 100644
--- a/jam-ui/src/components/jamtracks/JKJamTracksList.js
+++ b/jam-ui/src/components/jamtracks/JKJamTracksList.js
@@ -5,29 +5,12 @@ import JKJamTrackPurchaseButton from './JKJamTrackPurchaseButton';
 import { JamTrackPreviewProvider } from '../../context/JamTrackPreviewContext';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import JKJamTrackItem from './JKJamTrackItem';
 
 const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNextPage }) => {
   const { t } = useTranslation('jamtracks');
   return (
     <>
-      {selectedType && searchTerm.length && jamTracks.length > 0 ? (
-        <Row className="mb-2">
-          <Col>
-            <strong>
-              {t('search.search_results.for_selection')} {selectedType} "{searchTerm}"
-            </strong>
-          </Col>
-        </Row>
-      ) : (
-        searchTerm.length > 0 &&
-        jamTracks.length > 0 && (
-          <Row className="mb-2">
-            <Col>
-              <strong>{t('search.search_results.for_search_term')} "{searchTerm}"</strong>
-            </Col>
-          </Row>
-        )
-      )}
       {jamTracks.length > 0 && (
         <Row>
           <Col>
@@ -40,22 +23,9 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe
                 </tr>
               </thead>
               <tbody>
-                <JamTrackPreviewProvider>
-                  {jamTracks.map((jamTrack, index) => (
-                    <tr key={`jamtrck-preview-row-${jamTrack.id}`}>
-                      <td className="track-name-col">
-                        {jamTrack.name} <br />
-                        <span className='fs--1'>by {jamTrack.original_artist}</span>
-                      </td>
-                      <td className="track-tracks-col fs--1">
-                        <JKJamTrackPreview jamTrack={jamTrack} />
-                      </td>
-                      <td className="purchase-button-col text-center" align='center'>
-                        <JKJamTrackPurchaseButton jamTrack={jamTrack} />
-                      </td>
-                    </tr>
-                  ))}
-                </JamTrackPreviewProvider>
+                {jamTracks.map((jamTrack, index) => (
+                  <JKJamTrackItem key={index} jamTrack={jamTrack} />
+                ))}
               </tbody>
             </Table>
           </Col>
@@ -65,7 +35,7 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe
         <Row>
           <Col>
             <Button color="primary" onClick={onNextPage} data-testid="moreBtn">
-            {t('search.list.load_more')}
+              {t('search.list.load_more')}
             </Button>
           </Col>
         </Row>
@@ -87,7 +57,7 @@ JKJamTracksList.defaultProps = {
   searchTerm: '',
   jamTracks: [],
   nextOffset: null,
-  onNextPage: () => {}
+  onNextPage: () => { }
 };
 
 export default JKJamTracksList;
diff --git a/jam-ui/src/components/jamtracks/JKJamTracksSlider.js b/jam-ui/src/components/jamtracks/JKJamTracksSlider.js
new file mode 100644
index 000000000..d79099208
--- /dev/null
+++ b/jam-ui/src/components/jamtracks/JKJamTracksSlider.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+//import Swiper core and required modules
+import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+
+//import Swiper React components
+import { Swiper, SwiperSlide } from 'swiper/react'
+
+//import Swiper styles
+import 'swiper/swiper.scss'
+import 'swiper/components/navigation/navigation.scss'
+import 'swiper/components/pagination/pagination.scss'
+import 'swiper/components/scrollbar/scrollbar.scss'
+
+import { Card, CardBody, CardHeader } from 'reactstrap'
+import JKJamTrackItem from './JKJamTrackItem'
+
+SwiperCore.use([Navigation, Pagination, Scrollbar, A11y])
+
+const JKJamTracksSlider = ({ jamTracks, onNextPage, totalJamTracks }) => {
+  const [index, setIndex] = React.useState(1)
+  return (
+    <>
+      <Swiper
+        spaceBetween={0}
+        slidesPerView={1}
+        onSlideChange={() => setIndex(index + 1)}
+        onSlideNextTransitionEnd={swiper => {
+          if (swiper.isEnd) {
+            onNextPage()
+          }
+        }}
+        pagination={{
+          clickable: true,
+          type: 'custom'
+        }}
+        navigation={{
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }}
+      >
+        {jamTracks && jamTracks.map((jamTrack) => (
+          <SwiperSlide key={`jamtrack-swiper-item-${jamTrack.id}`}>
+            <Card className="swiper-card">
+              <CardHeader className="bg-200 text-center">
+                <h4 className="mt-1">JamTrack</h4>
+              </CardHeader>
+              <CardBody>
+                <JKJamTrackItem jamTrack={jamTrack} viewMode="swipe" />
+              </CardBody>
+            </Card>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+      <div className="py-4 px-6 bg-white border-top w-100 fixed-bottom">
+        <div className="swiper-pagination d-flex justify-content-center text-center ml-auto mr-auto"
+          style={{ width: '100%', position: 'relative' }}>
+          {totalJamTracks > 0 && (
+            <div className='fs-1'>
+              JamTrack {index} of {totalJamTracks}
+            </div>
+          )}
+        </div>
+        <div className="swiper-button-prev" />
+        <div className="swiper-button-next" />
+      </div>
+    </>
+  )
+}
+
+JKJamTracksSlider.propTypes = {
+  jamTracks: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,
+  onNextPage: PropTypes.func.isRequired,
+  totalJamTracks: PropTypes.number.isRequired
+}
+
+export default JKJamTracksSlider
\ No newline at end of file
diff --git a/jam-ui/src/components/page/JKPeopleSwiper.js b/jam-ui/src/components/page/JKPeopleSwiper.js
index 566eb5908..42e0661f1 100644
--- a/jam-ui/src/components/page/JKPeopleSwiper.js
+++ b/jam-ui/src/components/page/JKPeopleSwiper.js
@@ -68,7 +68,7 @@ const JKPeopleSwiper = ({ people, goNextPage }) => {
 };
 
 JKPeopleSwiper.propTypes = {
-  people: PropTypes.arrayOf(PropTypes.instanceOf(Object)),
+  people: PropTypes.arrayOf(PropTypes.instanceOf(Object)).isRequired,
   goNextPage: PropTypes.func
 };
 
diff --git a/jam-ui/src/components/shopping-cart/JKCheckout.js b/jam-ui/src/components/shopping-cart/JKCheckout.js
index c54046a9f..3212ee448 100644
--- a/jam-ui/src/components/shopping-cart/JKCheckout.js
+++ b/jam-ui/src/components/shopping-cart/JKCheckout.js
@@ -115,7 +115,7 @@ const JKCheckout = () => {
     try {
       const userResp = await getUserDetail(options);
       const userData = await userResp.json();
-      console.log('User Data:', userData);
+      //console.log('User Data:', userData);
       setHasRedeemableJamTrack(userData.has_redeemable_jamtrack);
 
       if (userData.has_recurly_account) {
@@ -162,7 +162,7 @@ const JKCheckout = () => {
   }, [paymentMethod]);
 
   const onSubmit = async data => {
-    console.log('Form Data:', data);
+    //console.log('Form Data:', data);
     if (paymentMethod === 'credit-card' || paymentMethod === 'existing-card') {
       constructRecurlyAccount(data);
     } else if (paymentMethod === 'paypal') {
@@ -171,7 +171,7 @@ const JKCheckout = () => {
   };
 
   const constructRecurlyAccount = async data => {
-    console.log('Form Data:', data);
+    //console.log('Form Data:', data);
 
     if (paymentMethod === 'credit-card' && !isValidateCard(data)) {
       return;
@@ -216,7 +216,7 @@ const JKCheckout = () => {
     try {
       const orderResp = await placeOrder();
       const orderData = await orderResp.json();
-      console.log('Order Data:', orderData);
+      //console.log('Order Data:', orderData);
       localStorage.setItem('lastPurchaseResponse', JSON.stringify(orderData));
       deletePreserveBillingInfo();
       history.push('/checkout/success');
@@ -238,12 +238,12 @@ const JKCheckout = () => {
 
     if (!isValid(cardNumber)) {
       _isValid = false;
-      console.log('Invalid Card Number');
+      //console.log('Invalid Card Number');
       setError('number', { type: 'manual', message: 'Invalid Card Number' }, { shouldFocus: false });
     }
     if (!isExpirationDateValid(data.month, data.year)) {
       _isValid = false;
-      console.log('Invalid Expiration Date');
+      //console.log('Invalid Expiration Date');
       setError('month', { type: 'manual', message: 'Invalid Expiration Date' }, { shouldFocus: false });
       setError('year', { type: 'manual', message: 'Invalid Expiration Date' }, { shouldFocus: false });
     }
@@ -274,7 +274,7 @@ const JKCheckout = () => {
 
   const handleOnCardNumberChange = e => {
     const cardNumber = e.target.value;
-    console.log('Formatted Card Number:', formatCardNumber(cardNumber));
+    //console.log('Formatted Card Number:', formatCardNumber(cardNumber));
     setCardNumber(formatCardNumber(cardNumber));
   };
 
diff --git a/jam-ui/src/hooks/useShoppingCart.js b/jam-ui/src/hooks/useShoppingCart.js
index 7dfb5a1c8..3654ccbdb 100644
--- a/jam-ui/src/hooks/useShoppingCart.js
+++ b/jam-ui/src/hooks/useShoppingCart.js
@@ -13,6 +13,9 @@ export const useShoppingCart = () => {
 
   const cartTotal = useMemo(() => {
     //calculate total price
+    if(shoppingCart.length === 0){
+      return 0.00;
+    }
     const totalPrice = shoppingCart.reduce((acc, item) => acc + parseFloat(item.product_info.total_price), 0.00);
     return totalPrice;
   }, [shoppingCart]);