diff --git a/packages/web-app/package.json b/packages/web-app/package.json
index 4e3c71461..f24d4d521 100644
--- a/packages/web-app/package.json
+++ b/packages/web-app/package.json
@@ -79,7 +79,7 @@
     "@fortawesome/free-regular-svg-icons": "6.3.0",
     "@fortawesome/free-solid-svg-icons": "6.3.0",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@saladtechnologies/garden-components": "1.1.2",
+    "@saladtechnologies/garden-components": "1.1.5",
     "@saladtechnologies/garden-fonts": "1.0.3",
     "@saladtechnologies/garden-icons": "1.0.11",
     "@storybook/addon-a11y": "6.5.16",
diff --git a/packages/web-app/src/App.tsx b/packages/web-app/src/App.tsx
index 379d5721b..7911279ba 100644
--- a/packages/web-app/src/App.tsx
+++ b/packages/web-app/src/App.tsx
@@ -71,7 +71,6 @@ const styles = (theme: SaladTheme) => ({
     flex: 1,
     maxWidth: 1600,
     position: 'relative',
-    paddingBottom: 100,
     marginTop: 60,
   },
 })
diff --git a/packages/web-app/src/Routes.tsx b/packages/web-app/src/Routes.tsx
index 549ffd6c9..37ef661a4 100644
--- a/packages/web-app/src/Routes.tsx
+++ b/packages/web-app/src/Routes.tsx
@@ -5,7 +5,7 @@ import { ReferralOnboardingContainer, ReferralWelcomeContainer } from './modules
 import { LoginPageContainer } from './modules/auth-views'
 import { ReplaceBonusModalContainer } from './modules/bonus-views'
 import { EarnMenuContainer } from './modules/earn-views'
-import { RewardDetailsContainer } from './modules/reward-views'
+import { RewardDetailsContainer, SelectTargetRewardContainer } from './modules/reward-views'
 import { SaladPayOrderSummaryContainer } from './modules/salad-pay-views'
 import { SettingsContainer } from './modules/settings-views'
 import { StorefrontHomePage } from './modules/storefront-views/pages/StorefrontHomePage'
@@ -30,9 +30,8 @@ const _Routes = ({ location }: RouteComponentProps) => {
       <Route path={['/store', '/store/search']} exact render={() => <StorefrontHomePage />} />
       <Route path="/store/rewards/:id" exact component={RewardDetailsContainer} />
       <Route path="/store/vault" exact component={VaultListContainer} />
-      {/* Target Reward Page */}
-      {/* * NOTE: Should be uncommented when backend is ready */}
-      {/* <Route path="/store/select-target-reward" exact component={SelectTargetRewardContainer} /> */}
+      {/* Recommended Target Rewards Page */}
+      <Route path="/store/select-target-reward" exact component={SelectTargetRewardContainer} />
 
       {/* Modals */}
       {/* SaladPay: This is stand in until we figure out iFrames, popups... */}
diff --git a/packages/web-app/src/modules/home-views/NavigationBarContainer.tsx b/packages/web-app/src/modules/home-views/NavigationBarContainer.tsx
index 5c2064f6e..c38447cc5 100644
--- a/packages/web-app/src/modules/home-views/NavigationBarContainer.tsx
+++ b/packages/web-app/src/modules/home-views/NavigationBarContainer.tsx
@@ -10,7 +10,6 @@ const mapStoreToProps = (store: RootStore): any => {
     store.auth.login()
   }
 
-  const goToAccount = () => store.routing.push('/account/summary')
   const bonus = store.bonuses.firstExpiringUnclaimedBonus
 
   const selectedAvatar = store.profile.profileAvatar
@@ -27,6 +26,10 @@ const mapStoreToProps = (store: RootStore): any => {
       }
     : null
 
+  const goToAccount = () => store.routing.push('/account/summary')
+  const goToSelectTargetRewardPage = () => store.routing.push('/store/select-target-reward')
+  const goToTargetRewardPage = () => store.routing.push(`/store/rewards/${targetReward?.id}`)
+
   return {
     avatar: isAuthenticated ? (
       selectedAvatar ? (
@@ -63,6 +66,8 @@ const mapStoreToProps = (store: RootStore): any => {
     startButtonHoverLabel: undefined,
     startButtonErrorClick: startButton.onClickWithError,
     onRemoveTargetRewardClick: store.rewards.removeSelectedTargetReward,
+    onSelectTargetRewardClick: goToSelectTargetRewardPage,
+    onOpenTargetRewardClick: goToTargetRewardPage,
     startButtonProgress: startButton.progress,
     startButtonRunningTime: startButton.runningTime,
     startButtonToolTip: startButton.toolTip,
diff --git a/packages/web-app/src/modules/reward-views/RewardFilterContainer.tsx b/packages/web-app/src/modules/reward-views/RewardFilterContainer.tsx
deleted file mode 100644
index 07faa187f..000000000
--- a/packages/web-app/src/modules/reward-views/RewardFilterContainer.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { connect } from '../../connect'
-import { RewardFilterList } from './components/RewardFilterList'
-
-const mapStoreToProps = () => ({})
-
-export const RewardFilterContainer = connect(mapStoreToProps, RewardFilterList)
diff --git a/packages/web-app/src/modules/reward-views/SelectTargetRewardContainer.tsx b/packages/web-app/src/modules/reward-views/SelectTargetRewardContainer.tsx
index 3b24e5ee9..d7510da9c 100644
--- a/packages/web-app/src/modules/reward-views/SelectTargetRewardContainer.tsx
+++ b/packages/web-app/src/modules/reward-views/SelectTargetRewardContainer.tsx
@@ -2,10 +2,16 @@ import { connect } from '../../connect'
 import type { RootStore } from '../../Store'
 import { SelectTargetRewardPage } from './pages'
 
-const mapStoreToProps = (store: RootStore): any => ({
-  // * NOTE: Should be replaced with real data when backend is ready
-  targetRewards: [],
-  onConfirmTargetReward: store.rewards.setSelectedTargetReward,
-})
+const mapStoreToProps = (store: RootStore): any => {
+  const navigateToStorePage = () => store.routing.push(`/store`)
+  return {
+    recommendedRewards: store.rewards.recommendedRewards,
+    targetReward: store.rewards.selectedTargetReward,
+    onConfirmTargetReward: store.rewards.setSelectedTargetReward,
+    onSelectDifferentReward: store.rewards.removeSelectedTargetReward,
+    fetchRecommendedRewards: store.rewards.fetchRecommendedRewards,
+    navigateToStorePage,
+  }
+}
 
 export const SelectTargetRewardContainer = connect(mapStoreToProps, SelectTargetRewardPage)
diff --git a/packages/web-app/src/modules/reward-views/components/index.tsx b/packages/web-app/src/modules/reward-views/components/index.tsx
index 2353a2e37..1a9004f5d 100644
--- a/packages/web-app/src/modules/reward-views/components/index.tsx
+++ b/packages/web-app/src/modules/reward-views/components/index.tsx
@@ -1,3 +1,4 @@
+export * from '../../storefront-views/pages/StorefrontHomePage/RewardSearchBar/RewardSearchBar'
 export * from './RewardDescriptionPanel'
 export * from './RewardDisclaimers'
 export * from './RewardHeaderBar'
@@ -5,5 +6,4 @@ export * from './RewardHowToPanel'
 export * from './RewardImageCarousel'
 export * from './RewardInfoPanel'
 export * from './RewardRequirementsPanel'
-export * from './RewardSearchBar'
 export * from './RewardSlider'
diff --git a/packages/web-app/src/modules/reward-views/index.tsx b/packages/web-app/src/modules/reward-views/index.tsx
index 28fd1925a..293830d37 100644
--- a/packages/web-app/src/modules/reward-views/index.tsx
+++ b/packages/web-app/src/modules/reward-views/index.tsx
@@ -1,4 +1,2 @@
-export * from './RewardDetailsContainer'
-export * from './RewardSearchBarContainer'
-export * from './RewardSearchResultContainer'
 export * from './SelectTargetRewardContainer'
+export * from './RewardDetailsContainer'
diff --git a/packages/web-app/src/modules/reward-views/pages/RewardDetailsPage.tsx b/packages/web-app/src/modules/reward-views/pages/RewardDetailsPage/RewardDetailsPage.tsx
similarity index 93%
rename from packages/web-app/src/modules/reward-views/pages/RewardDetailsPage.tsx
rename to packages/web-app/src/modules/reward-views/pages/RewardDetailsPage/RewardDetailsPage.tsx
index f8cbbcb30..dfad9ddfc 100644
--- a/packages/web-app/src/modules/reward-views/pages/RewardDetailsPage.tsx
+++ b/packages/web-app/src/modules/reward-views/pages/RewardDetailsPage/RewardDetailsPage.tsx
@@ -2,9 +2,9 @@ import type { ReactNode } from 'react'
 import { Component } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
-import { Head, Scrollbar } from '../../../components'
-import type { SaladTheme } from '../../../SaladTheme'
-import type { Reward } from '../../reward/models'
+import { Head, Scrollbar } from '../../../../components'
+import type { SaladTheme } from '../../../../SaladTheme'
+import type { Reward } from '../../../reward/models'
 import {
   RewardDescriptionPanel,
   RewardDisclaimers,
@@ -13,7 +13,7 @@ import {
   RewardImageCarousel,
   RewardInfoPanel,
   RewardRequirementsPanel,
-} from '../components'
+} from '../../components'
 
 const styles = (theme: SaladTheme) => ({
   container: {
diff --git a/packages/web-app/src/modules/reward-views/pages/RewardDetailsPage/index.ts b/packages/web-app/src/modules/reward-views/pages/RewardDetailsPage/index.ts
new file mode 100644
index 000000000..49264fd70
--- /dev/null
+++ b/packages/web-app/src/modules/reward-views/pages/RewardDetailsPage/index.ts
@@ -0,0 +1,2 @@
+export * from './RewardDetailsPage';
+
diff --git a/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage.tsx b/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage.tsx
deleted file mode 100644
index 46a93eba7..000000000
--- a/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import { Button } from '@saladtechnologies/garden-components'
-import type { FunctionComponent } from 'react'
-import { useState } from 'react'
-import type { WithStyles } from 'react-jss'
-import withStyles from 'react-jss'
-import { Scrollbar } from '../../../components'
-import type { SaladTheme } from '../../../SaladTheme'
-import { DefaultTheme } from '../../../SaladTheme'
-import type { Reward } from '../../reward/models'
-import { RewardCard } from '../components/RewardCard'
-import FortniteImageURL from './assets/fortnite.png'
-import NorthAmerica5URL from './assets/northAmerica5.png'
-import SaladBackgroundURL from './assets/saladBackground.png'
-import Xbox10ImageURL from './assets/xbox10.png'
-
-const styles = (theme: SaladTheme) => ({
-  container: {
-    display: 'flex',
-    height: '100%',
-  },
-  rewardsContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '32px',
-    margin: '70px 45px 0px 330px',
-  },
-  rewards: {
-    display: 'flex',
-    gap: '32px',
-    alignItems: 'stretch',
-    maxWidth: 655,
-    flexWrap: 'wrap',
-  },
-  header: {
-    margin: 0,
-    fontFamily: 'sharpGroteskLight09',
-    color: theme.green,
-    fontSize: '96px',
-    fontWeight: 300,
-    textShadow: '0px 0px 24px rgba(178, 213, 48, 0.7)',
-  },
-  description: {
-    fontFamily: 'Mallory',
-    color: theme.lightGreen,
-    fontSize: '16px',
-    lineHeight: '24px',
-  },
-  backgroundImage: {
-    backgroundImage: `url(${SaladBackgroundURL})`,
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    width: '75%',
-    height: '100vh',
-  },
-  buttonContainer: {
-    marginBottom: '5px',
-  },
-})
-
-interface Props extends WithStyles<typeof styles> {
-  rewards: Reward[]
-  onConfirmTargetReward: (reward: Reward) => void
-}
-
-const _SelectTargetRewardPage: FunctionComponent<Props> = ({ classes, rewards, onConfirmTargetReward }) => {
-  const [selectedRewardId, setSelectedRewardId] = useState<string | null>(null)
-  const [visibleRewardsAmount, setVisibleRewardsAmount] = useState(6)
-
-  const selectTargetReward = (rewardId: string) => {
-    setSelectedRewardId(rewardId)
-  }
-
-  const confirmTargetReward = (reward: Reward) => {
-    // * TODO: Add redirect to the "You've selected ..." new page
-    onConfirmTargetReward(reward)
-  }
-
-  const mockedRewards =
-    [
-      {
-        id: 'd214ac17-daaf-4e14-87ac-036f93f32474',
-        name: 'Fortnite Harley Quinn Back Bling DLC Some DL',
-        price: 12.79,
-        tags: [],
-        coverImage: FortniteImageURL,
-      },
-      {
-        id: 'ec83ab9f-22f0-4de5-ab33-7af39289da2c',
-        name: 'Xbox Live - $5 Gift Card ',
-        price: 9.99,
-        tags: [],
-        coverImage: Xbox10ImageURL,
-      },
-      {
-        id: '6c6d069b-5f57-4429-b7c4-4f4f174eef31',
-        name: 'Valorant - $5 Card',
-        price: 5.0,
-        tags: [],
-        coverImage: NorthAmerica5URL,
-      },
-      {
-        id: '658d2a5c-4049-4883-bb48-7e3b9d2708a2',
-        name: 'Second Original price test',
-        price: 8.90,
-        tags: [],
-        coverImage: FortniteImageURL,
-      },
-      {
-        id: 'cd7f8e4b-a345-41ca-8e8a-8eff9840cdea',
-        name: 'Sarah Manual Reward test 11',
-        price: 4.0,
-        tags: [],
-        coverImage: Xbox10ImageURL,
-      },
-      {
-        id: '332574d4-bdaa-4c0f-ab0a-d992fd022ccc',
-        name: 'Discord Nitro',
-        price: 9.99,
-        tags: [],
-        coverImage: NorthAmerica5URL,
-      },
-      {
-        id: '1d78685e-e475-4c30-900b-9cdadc47f8b4',
-        name: 'Salad For Your Home PC Short-Sleeve T-Shirt - Black & Athletic Heather',
-        price: 100.01,
-        tags: [],
-        coverImage: NorthAmerica5URL,
-      },
-    ] ?? rewards
-
-  return (
-    <Scrollbar>
-      <div className={classes.container}>
-        <div className={classes.rewardsContainer}>
-          <div>
-            <h1 className={classes.header}>Select a Reward to Target</h1>
-            <p className={classes.description}>
-              You can target any of these rewards, or any other reward in the Salad store, and track your progress
-              towards redeeming it. Once you have enough balance you can get that sweet loot or get something else
-            </p>
-          </div>
-          {/* * NOTE: Should be replaced with "targetRewards" from props when backend is ready */}
-          <div className={classes.rewards}>
-            {mockedRewards.slice(0, visibleRewardsAmount).map((reward) => (
-              <RewardCard
-                key={reward.id}
-                reward={reward}
-                isSelected={selectedRewardId === reward.id}
-                onSelectReward={selectTargetReward}
-                onConfirmReward={confirmTargetReward}
-              />
-            ))}
-            {visibleRewardsAmount < mockedRewards.length && (
-              <div className={classes.buttonContainer}>
-                <Button
-                  variant="outlined"
-                  outlineColor={DefaultTheme.lightGreen}
-                  onClick={() => setVisibleRewardsAmount(visibleRewardsAmount + 3)}
-                  label="View More Items"
-                />
-              </div>
-            )}
-          </div>
-        </div>
-        <div className={classes.backgroundImage}></div>
-      </div>
-    </Scrollbar>
-  )
-}
-
-export const SelectTargetRewardPage = withStyles(styles)(_SelectTargetRewardPage)
diff --git a/packages/web-app/src/modules/reward-views/components/RewardCard/RewardCard.tsx b/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/RewardCard/RewardCard.tsx
similarity index 90%
rename from packages/web-app/src/modules/reward-views/components/RewardCard/RewardCard.tsx
rename to packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/RewardCard/RewardCard.tsx
index e48b55bb5..1efd5b29d 100644
--- a/packages/web-app/src/modules/reward-views/components/RewardCard/RewardCard.tsx
+++ b/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/RewardCard/RewardCard.tsx
@@ -5,12 +5,12 @@ import { Img } from 'react-image'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
 import Skeleton from 'react-loading-skeleton'
-import type { SaladTheme } from '../../../../SaladTheme'
-import { DefaultTheme } from '../../../../SaladTheme'
-import type { Reward } from '../../../reward/models'
-import { RewardMissingImage } from '../RewardMissingImage'
+import type { SaladTheme } from '../../../../../../SaladTheme'
+import { DefaultTheme } from '../../../../../../SaladTheme'
+import type { Reward } from '../../../../../reward/models'
+import { RewardMissingImage } from '../../../../components/RewardMissingImage'
 
-const styles = (theme: SaladTheme) => ({
+export const styles = (theme: SaladTheme) => ({
   selected: {},
   imageOverlay: {
     display: 'none',
@@ -128,7 +128,7 @@ const _RewardCard: FunctionComponent<Props> = ({ classes, reward, isSelected, on
         </div>
       </div>
       <div className={classes.name}>{reward.name}</div>
-      <div className={classes.price}>{reward.price.toFixed(2)}</div>
+      <div className={classes.price}>${reward.price.toFixed(2)}</div>
     </div>
   )
 }
diff --git a/packages/web-app/src/modules/reward-views/components/RewardCard/index.ts b/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/RewardCard/index.ts
similarity index 100%
rename from packages/web-app/src/modules/reward-views/components/RewardCard/index.ts
rename to packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/RewardCard/index.ts
diff --git a/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/RewardsList.tsx b/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/RewardsList.tsx
new file mode 100644
index 000000000..1777fd651
--- /dev/null
+++ b/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/RewardsList.tsx
@@ -0,0 +1,48 @@
+import type { FunctionComponent } from 'react'
+import { useState } from 'react'
+import type { WithStyles } from 'react-jss'
+import withStyles from 'react-jss'
+import type { Reward } from '../../../../reward/models'
+import { RewardCard } from './RewardCard'
+
+export const styles = {
+  rewards: {
+    display: 'flex',
+    gap: '32px',
+    alignItems: 'stretch',
+    maxWidth: 655,
+    flexWrap: 'wrap',
+    paddingBottom: '40px',
+  },
+}
+
+interface Props extends WithStyles<typeof styles> {
+  rewards: Reward[]
+  onConfirmTargetReward: (reward: Reward) => void
+}
+
+const visibleRewardsAmount = 6
+
+const _RewardsList: FunctionComponent<Props> = ({ classes, rewards, onConfirmTargetReward }) => {
+  const [selectedRewardId, setSelectedRewardId] = useState<string | null>(null)
+
+  const selectTargetReward = (rewardId: string) => {
+    setSelectedRewardId(rewardId)
+  }
+
+  return (
+    <div className={classes.rewards}>
+      {rewards.slice(0, visibleRewardsAmount).map((reward) => (
+        <RewardCard
+          key={reward.id}
+          reward={reward}
+          isSelected={selectedRewardId === reward.id}
+          onSelectReward={selectTargetReward}
+          onConfirmReward={onConfirmTargetReward}
+        />
+      ))}
+    </div>
+  )
+}
+
+export const RewardsList = withStyles(styles)(_RewardsList)
diff --git a/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/index.ts b/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/index.ts
new file mode 100644
index 000000000..5edb9399e
--- /dev/null
+++ b/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/RewardsList/index.ts
@@ -0,0 +1,2 @@
+export * from './RewardsList';
+
diff --git a/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/SelectTargetRewardPage.tsx b/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/SelectTargetRewardPage.tsx
new file mode 100644
index 000000000..a27b73805
--- /dev/null
+++ b/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/SelectTargetRewardPage.tsx
@@ -0,0 +1,203 @@
+import { Button } from '@saladtechnologies/garden-components'
+import classNames from 'classnames'
+import type { FunctionComponent } from 'react'
+import { useEffect } from 'react'
+import { Img } from 'react-image'
+import type { WithStyles } from 'react-jss'
+import withStyles from 'react-jss'
+import Skeleton from 'react-loading-skeleton'
+import { Scrollbar } from '../../../../components'
+import type { SaladTheme } from '../../../../SaladTheme'
+import { DefaultTheme } from '../../../../SaladTheme'
+import type { Reward } from '../../../reward/models'
+import { RewardMissingImage } from '../../components/RewardMissingImage'
+import SaladBackgroundURL from '../assets/saladBackground.png'
+import { RewardsList } from './RewardsList'
+
+export const styles = (theme: SaladTheme) => ({
+  pageWrapper: {
+    display: 'flex',
+    height: '100%',
+    width: '100%',
+  },
+  overflowHidden: {
+    overflow: 'hidden',
+  },
+  rewardsWrapper: {
+    gap: '32px',
+    padding: '70px 0px 0px 70px',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+  },
+  header: {
+    margin: 0,
+    fontFamily: theme.fontGroteskLight09,
+    color: theme.green,
+    fontSize: '96px',
+    fontWeight: 300,
+    textShadow: '0px 0px 24px rgba(178, 213, 48, 0.7)',
+  },
+  subHeader: {
+    margin: 0,
+    fontFamily: theme.fontGroteskLight09,
+    color: theme.green,
+    fontSize: '56px',
+    fontWeight: 300,
+    textShadow: '0px 0px 24px rgba(178, 213, 48, 0.7)',
+  },
+  description: {
+    fontFamily: 'Mallory',
+    color: theme.lightGreen,
+    fontSize: '16px',
+    lineHeight: '24px',
+  },
+  backgroundImage: {
+    backgroundImage: `url(${SaladBackgroundURL})`,
+    backgroundSize: 'contain',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    height: '1343px',
+    flex: 1,
+  },
+  targetRewardImage: {
+    position: 'relative',
+    height: 241,
+    width: 180,
+    marginBottom: 32,
+    boxSizing: 'border-box',
+    filter: 'drop-shadow(8px 14px 21px rgba(0, 0, 0, 0.45))',
+  },
+  targetRewardWrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  targetRewardDetails: {
+    padding: 32,
+  },
+
+  targetRewardDetailsContent: {
+    marginLeft: 8,
+    marginBottom: 48,
+  },
+  targetRewardName: {
+    color: theme.lightGreen,
+    textAlign: 'left',
+    fontFamily: theme.fontGroteskLight09,
+    fontWeight: 300,
+    fontSize: 64,
+    lineHeight: '48px',
+    overflow: 'hidden',
+    display: '-webkit-box',
+    WebkitLineClamp: '2',
+    WebkitBoxOrient: 'vertical',
+    textOverflow: 'ellipsis',
+    marginTop: 'auto',
+  },
+  targetRewardPrice: {
+    textAlign: 'left',
+    color: theme.green,
+    fontFamily: theme.fontGroteskBook25,
+    fontWeight: 400,
+    fontSize: 24,
+    lineHeight: '18px',
+    marginTop: 16,
+  },
+  buttonContainer: {
+    marginBottom: '5px',
+  },
+  wantSomethingDifferent: {
+    marginTop: '8px',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '10px',
+    alignItems: 'center',
+  },
+})
+
+interface Props extends WithStyles<typeof styles> {
+  recommendedRewards: Reward[]
+  targetReward: Reward
+  onConfirmTargetReward: (reward: Reward) => void
+  onSelectDifferentReward: () => void
+  fetchRecommendedRewards: () => void
+  navigateToStorePage: () => void
+}
+
+const _SelectTargetRewardPage: FunctionComponent<Props> = ({
+  classes,
+  recommendedRewards,
+  targetReward,
+  navigateToStorePage,
+  onConfirmTargetReward,
+  onSelectDifferentReward,
+  fetchRecommendedRewards,
+}) => {
+  useEffect(() => {
+    fetchRecommendedRewards()
+  }, [fetchRecommendedRewards])
+
+  return (
+    <Scrollbar>
+      <div className={classNames(classes.pageWrapper, targetReward && classes.overflowHidden)}>
+        <div className={classes.rewardsWrapper}>
+          {targetReward ? (
+            <>
+              <div>
+                <h1 className={classes.header}>You’ve selected a reward!</h1>
+                <p className={classes.description}>Start chopping with the Salad App to earn towards your reward!</p>
+              </div>
+              <div className={classes.targetRewardWrapper}>
+                <Img
+                  className={classes.targetRewardImage}
+                  src={targetReward.coverImage ?? ''}
+                  draggable={false}
+                  alt={targetReward.name}
+                  loader={<Skeleton height={'100%'} />}
+                  unloader={<RewardMissingImage text={targetReward.name} />}
+                />
+                <div className={classes.targetRewardDetails}>
+                  <div className={classes.targetRewardDetailsContent}>
+                    <div className={classes.targetRewardName}>{targetReward.name}</div>
+                    <div className={classes.targetRewardPrice}>${targetReward.price.toFixed(2)}</div>
+                  </div>
+                  <Button
+                    variant="outlined"
+                    outlineColor={DefaultTheme.lightGreen}
+                    onClick={onSelectDifferentReward}
+                    label="Select a Different Reward"
+                  />
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <div>
+                <h1 className={classes.header}>Select a Reward to Target</h1>
+                <p className={classes.description}>
+                  You can target any of these rewards, or any other reward in the Salad store, and track your progress
+                  towards redeeming it. Once you have enough balance you can get that sweet loot or get something else
+                </p>
+                <RewardsList rewards={recommendedRewards} onConfirmTargetReward={onConfirmTargetReward} />
+                <h2 className={classes.subHeader}>Want something different? </h2>
+                <div className={classes.wantSomethingDifferent}>
+                  <Button
+                    variant="outlined"
+                    outlineColor={DefaultTheme.lightGreen}
+                    onClick={navigateToStorePage}
+                    label="Check out the Store"
+                  />
+                  <p className={classes.description}>and click into an item, and then press “Target this Reward.”</p>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+        <div className={classes.backgroundImage}></div>
+      </div>
+    </Scrollbar>
+  )
+}
+
+export const SelectTargetRewardPage = withStyles(styles)(_SelectTargetRewardPage)
diff --git a/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/index.ts b/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/index.ts
new file mode 100644
index 000000000..15298189e
--- /dev/null
+++ b/packages/web-app/src/modules/reward-views/pages/SelectTargetRewardPage/index.ts
@@ -0,0 +1,2 @@
+export * from './SelectTargetRewardPage';
+
diff --git a/packages/web-app/src/modules/reward-views/pages/index.tsx b/packages/web-app/src/modules/reward-views/pages/index.tsx
index 1bb9239d0..380b85d7f 100644
--- a/packages/web-app/src/modules/reward-views/pages/index.tsx
+++ b/packages/web-app/src/modules/reward-views/pages/index.tsx
@@ -1,4 +1,2 @@
-export * from './BrowseRewardsPage'
 export * from './RewardDetailsPage'
-export * from './SearchResultsPage'
 export * from './SelectTargetRewardPage'
diff --git a/packages/web-app/src/modules/reward/RewardStore.tsx b/packages/web-app/src/modules/reward/RewardStore.tsx
index accdadb79..d6b50b1cf 100644
--- a/packages/web-app/src/modules/reward/RewardStore.tsx
+++ b/packages/web-app/src/modules/reward/RewardStore.tsx
@@ -30,6 +30,9 @@ export class RewardStore {
   @observable
   private requiresFurtherAction: boolean = false
 
+  @observable
+  public recommendedRewards: Array<Reward> = []
+
   @observable
   public isRedeeming: boolean = false
 
@@ -171,7 +174,7 @@ export class RewardStore {
     try {
       var res = yield this.axios.patch('/api/v1/profile/selected-reward', request)
       this.selectedTargetRewardId = res.data.rewardId
-
+      this.rewards.set(reward.id, reward)
       if (reward) this.store.analytics.trackSelectedReward(reward)
     } catch (error) {
       console.error(error)
@@ -198,6 +201,16 @@ export class RewardStore {
     }
   })
 
+  @action.bound
+  fetchRecommendedRewards = flow(function* (this: RewardStore) {
+    try {
+      var res = yield this.axios.get('api/v1/rewards/recommendations')
+      this.recommendedRewards = res.data.map(rewardFromResource)
+    } catch (error) {
+      console.error(error)
+    }
+  })
+
   @action.bound
   redeemReward = flow(function* (this: RewardStore, reward: Reward) {
     this.checkIfFurtherActionIsRequired(reward)
diff --git a/packages/web-app/src/modules/reward-views/components/RewardSearchBar.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchBar/RewardSearchBar.tsx
similarity index 92%
rename from packages/web-app/src/modules/reward-views/components/RewardSearchBar.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchBar/RewardSearchBar.tsx
index 2a56476b5..42582cafc 100644
--- a/packages/web-app/src/modules/reward-views/components/RewardSearchBar.tsx
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchBar/RewardSearchBar.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { Component } from 'react'
-import { SearchBar } from '../../../components'
+import { SearchBar } from '../../../../../components'
 
 interface Props {
   searchTerm?: string
diff --git a/packages/web-app/src/modules/reward-views/RewardSearchBarContainer.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchBar/RewardSearchBarContainer.tsx
similarity index 71%
rename from packages/web-app/src/modules/reward-views/RewardSearchBarContainer.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchBar/RewardSearchBarContainer.tsx
index 4eb1b9539..d426ee533 100644
--- a/packages/web-app/src/modules/reward-views/RewardSearchBarContainer.tsx
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchBar/RewardSearchBarContainer.tsx
@@ -1,6 +1,6 @@
 import { withSearch } from '@elastic/react-search-ui'
-import { connect } from '../../connect'
-import { RewardSearchBar } from './components'
+import { connect } from '../../../../../connect'
+import { RewardSearchBar } from '../../../../reward-views/components'
 
 const mapStoreToProps = (): any => ({})
 
diff --git a/packages/web-app/src/modules/reward-views/pages/BrowseRewardsPage.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/BrowseRewardsPage.tsx
similarity index 89%
rename from packages/web-app/src/modules/reward-views/pages/BrowseRewardsPage.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/BrowseRewardsPage.tsx
index df457a991..c32dbb534 100644
--- a/packages/web-app/src/modules/reward-views/pages/BrowseRewardsPage.tsx
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/BrowseRewardsPage.tsx
@@ -4,16 +4,16 @@ import { Component } from 'react'
 import { Scrollbars } from 'react-custom-scrollbars'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
-import { P, Scrollbar } from '../../../components'
-import type { SaladTheme } from '../../../SaladTheme'
-import type { SearchResult } from '../../reward/models'
-import { RewardDisclaimers } from '../components'
-import { IconArrowLeft } from '../components/assets'
-import LeftArrow from '../components/assets/pagination/left-arrow.svg'
-import RightArrow from '../components/assets/pagination/right-arrow.svg'
-import { RewardItem } from '../components/RewardItem'
-import { rewardItemResponsive } from '../components/RewardSlider'
-import { RewardFilterContainer } from '../RewardFilterContainer'
+import { P, Scrollbar } from '../../../../../../components'
+import type { SaladTheme } from '../../../../../../SaladTheme'
+import { RewardDisclaimers } from '../../../../../reward-views/components'
+import { IconArrowLeft } from '../../../../../reward-views/components/assets'
+import { RewardItem } from '../../../../../reward-views/components/RewardItem'
+import { rewardItemResponsive } from '../../../../../reward-views/components/RewardSlider'
+import type { SearchResult } from '../../../../../reward/models'
+import RightArrow from './/assets/right-arrow.svg'
+import LeftArrow from './assets/left-arrow.svg'
+import { RewardFilterList } from './RewardFilterList'
 
 const styles = (theme: SaladTheme) => {
   let style = {
@@ -229,7 +229,7 @@ class _BrowseRewardsPage extends Component<Props> {
           <div style={{ flex: '0 0 250px' }}>
             <Scrollbars>
               <div className={classes.filterContainer}>
-                <RewardFilterContainer />
+                <RewardFilterList />
               </div>
             </Scrollbars>
           </div>
diff --git a/packages/web-app/src/modules/reward-views/components/RewardFilterList.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardFilterList.tsx
similarity index 82%
rename from packages/web-app/src/modules/reward-views/components/RewardFilterList.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardFilterList.tsx
index 8e272cc5e..dc1d89ed5 100644
--- a/packages/web-app/src/modules/reward-views/components/RewardFilterList.tsx
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardFilterList.tsx
@@ -1,17 +1,11 @@
 import { Facet, Sorting } from '@elastic/react-search-ui'
 import type { ReactNode } from 'react'
 import { Component } from 'react'
-import type { WithStyles } from 'react-jss'
-import withStyles from 'react-jss'
-import { Dropdown } from '../../../components/Dropdown'
+import { Dropdown } from '../../../../../../../components/Dropdown'
 import { RewardFilterPanel } from './RewardFilterPanel'
 import { RewardPriceFilter } from './RewardPriceFilter'
 
-const styles = {}
-
-interface Props extends WithStyles<typeof styles> {}
-
-class _RewardFilterList extends Component<Props> {
+export class RewardFilterList extends Component<{}> {
   public override render(): ReactNode {
     return (
       <div>
@@ -62,5 +56,3 @@ class _RewardFilterList extends Component<Props> {
     )
   }
 }
-
-export const RewardFilterList = withStyles(styles)(_RewardFilterList)
diff --git a/packages/web-app/src/modules/reward-views/components/RewardFilterPanel.stories.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardFilterPanel/RewardFilterPanel.stories.tsx
similarity index 100%
rename from packages/web-app/src/modules/reward-views/components/RewardFilterPanel.stories.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardFilterPanel/RewardFilterPanel.stories.tsx
diff --git a/packages/web-app/src/modules/reward-views/components/RewardFilterPanel.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardFilterPanel/RewardFilterPanel.tsx
similarity index 87%
rename from packages/web-app/src/modules/reward-views/components/RewardFilterPanel.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardFilterPanel/RewardFilterPanel.tsx
index a02ce516c..4f1beb57f 100644
--- a/packages/web-app/src/modules/reward-views/components/RewardFilterPanel.tsx
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardFilterPanel/RewardFilterPanel.tsx
@@ -2,11 +2,11 @@ import type { ReactNode } from 'react'
 import { Component } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
-import { Checkbox, SectionHeader } from '../../../components'
-import type { SaladTheme } from '../../../SaladTheme'
-import { ClearFilterItem } from './ClearFilterItem'
-import { RewardFilterRow } from './RewardFilterRow'
-import type { FilterOption } from './RewardPriceFilter'
+import { Checkbox, SectionHeader } from '../../../../../../../../components'
+import type { SaladTheme } from '../../../../../../../../SaladTheme'
+import type { FilterOption } from '../RewardPriceFilter'
+import { ClearFilterItem } from '../RewardPriceFilter/ClearFilterItem'
+import { RewardFilterRow } from '../RewardPriceFilter/RewardFilterRow'
 
 const styles = (theme: SaladTheme) => ({
   container: {
diff --git a/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardFilterPanel/index.ts b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardFilterPanel/index.ts
new file mode 100644
index 000000000..5c1d8e6c5
--- /dev/null
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardFilterPanel/index.ts
@@ -0,0 +1,2 @@
+export * from './RewardFilterPanel';
+
diff --git a/packages/web-app/src/modules/reward-views/components/ClearFilterItem.stories.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/ClearFilterItem/ClearFilterItem.stories.tsx
similarity index 100%
rename from packages/web-app/src/modules/reward-views/components/ClearFilterItem.stories.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/ClearFilterItem/ClearFilterItem.stories.tsx
diff --git a/packages/web-app/src/modules/reward-views/components/ClearFilterItem.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/ClearFilterItem/ClearFilterItem.tsx
similarity index 96%
rename from packages/web-app/src/modules/reward-views/components/ClearFilterItem.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/ClearFilterItem/ClearFilterItem.tsx
index 3a5d2bd95..01036202d 100644
--- a/packages/web-app/src/modules/reward-views/components/ClearFilterItem.tsx
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/ClearFilterItem/ClearFilterItem.tsx
@@ -5,7 +5,7 @@ import type { ReactNode } from 'react'
 import { Component } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
-import type { FilterOption } from './RewardPriceFilter'
+import type { FilterOption } from '../RewardPriceFilter'
 
 const styles = {
   row: {
diff --git a/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/ClearFilterItem/index.ts b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/ClearFilterItem/index.ts
new file mode 100644
index 000000000..193e0c3ca
--- /dev/null
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/ClearFilterItem/index.ts
@@ -0,0 +1,2 @@
+export * from './ClearFilterItem';
+
diff --git a/packages/web-app/src/modules/reward-views/components/RewardFilterRow.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/RewardFilterRow/RewardFilterRow.tsx
similarity index 93%
rename from packages/web-app/src/modules/reward-views/components/RewardFilterRow.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/RewardFilterRow/RewardFilterRow.tsx
index 609cee3a5..1cdddbf75 100644
--- a/packages/web-app/src/modules/reward-views/components/RewardFilterRow.tsx
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/RewardFilterRow/RewardFilterRow.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import { Component } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
-import { Checkbox } from '../../../components'
+import { Checkbox } from '../../../../../../../../../components'
 
 const styles = {
   row: {
diff --git a/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/RewardFilterRow/index.ts b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/RewardFilterRow/index.ts
new file mode 100644
index 000000000..c43e11cd9
--- /dev/null
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/RewardFilterRow/index.ts
@@ -0,0 +1,2 @@
+export * from './RewardFilterRow';
+
diff --git a/packages/web-app/src/modules/reward-views/components/RewardPriceFilter.stories.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/RewardPriceFilter.stories.tsx
similarity index 98%
rename from packages/web-app/src/modules/reward-views/components/RewardPriceFilter.stories.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/RewardPriceFilter.stories.tsx
index 63445642b..3a5b8dd66 100644
--- a/packages/web-app/src/modules/reward-views/components/RewardPriceFilter.stories.tsx
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/RewardPriceFilter.stories.tsx
@@ -1,5 +1,6 @@
 import { action } from '@storybook/addon-actions'
 import type { Meta } from '@storybook/react'
+import React from 'react'
 import type { RangeFilterOption } from './RewardPriceFilter'
 import { RewardPriceFilter } from './RewardPriceFilter'
 
diff --git a/packages/web-app/src/modules/reward-views/components/RewardPriceFilter.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/RewardPriceFilter.tsx
similarity index 94%
rename from packages/web-app/src/modules/reward-views/components/RewardPriceFilter.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/RewardPriceFilter.tsx
index b629cca3d..a943b6d71 100644
--- a/packages/web-app/src/modules/reward-views/components/RewardPriceFilter.tsx
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/RewardPriceFilter.tsx
@@ -2,8 +2,8 @@ import type { ReactNode } from 'react'
 import { Component } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
-import { SectionHeader } from '../../../components'
-import type { SaladTheme } from '../../../SaladTheme'
+import { SectionHeader } from '../../../../../../../../components'
+import type { SaladTheme } from '../../../../../../../../SaladTheme'
 import { ClearFilterItem } from './ClearFilterItem'
 import { RewardFilterRow } from './RewardFilterRow'
 
diff --git a/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/index.ts b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/index.ts
new file mode 100644
index 000000000..7298457ad
--- /dev/null
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/RewardPriceFilter/index.ts
@@ -0,0 +1,2 @@
+export * from './RewardPriceFilter';
+
diff --git a/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/index.ts b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/index.ts
new file mode 100644
index 000000000..a9ae726e4
--- /dev/null
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/RewardFilterList/index.ts
@@ -0,0 +1,2 @@
+export * from './RewardFilterList';
+
diff --git a/packages/web-app/src/modules/reward-views/components/assets/pagination/left-arrow.svg b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/assets/left-arrow.svg
similarity index 100%
rename from packages/web-app/src/modules/reward-views/components/assets/pagination/left-arrow.svg
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/assets/left-arrow.svg
diff --git a/packages/web-app/src/modules/reward-views/components/assets/pagination/right-arrow.svg b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/assets/right-arrow.svg
similarity index 100%
rename from packages/web-app/src/modules/reward-views/components/assets/pagination/right-arrow.svg
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/assets/right-arrow.svg
diff --git a/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/index.ts b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/index.ts
new file mode 100644
index 000000000..902664d7a
--- /dev/null
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/BrowseRewardsPage/index.ts
@@ -0,0 +1,2 @@
+export * from './BrowseRewardsPage';
+
diff --git a/packages/web-app/src/modules/reward-views/pages/SearchResultsPage.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/RewardSearchResult.tsx
similarity index 78%
rename from packages/web-app/src/modules/reward-views/pages/SearchResultsPage.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/RewardSearchResult.tsx
index acac00556..d6dfb45c7 100644
--- a/packages/web-app/src/modules/reward-views/pages/SearchResultsPage.tsx
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/RewardSearchResult.tsx
@@ -3,8 +3,8 @@ import type { ReactNode } from 'react'
 import { Component } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
-import { BrowseRewardsPage } from '.'
-import { SearchResult } from '../../reward/models'
+import { SearchResult } from '../../../../reward/models'
+import { BrowseRewardsPage } from './BrowseRewardsPage'
 
 const styles = {}
 
@@ -17,7 +17,7 @@ interface Props extends WithStyles<typeof styles> {
   onClickReward: (to: string, action?: Function) => void
 }
 
-class _SearchResultsPage extends Component<Props> {
+class _RewardSearchResult extends Component<Props> {
   handleBack = () => {
     const { clearFilters, onBack } = this.props
 
@@ -36,4 +36,4 @@ class _SearchResultsPage extends Component<Props> {
   }
 }
 
-export const SearchResultsPage = withStyles(styles)(_SearchResultsPage)
+export const RewardSearchResult = withStyles(styles)(_RewardSearchResult)
diff --git a/packages/web-app/src/modules/reward-views/RewardSearchResultContainer.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/RewardSearchResultContainer.tsx
similarity index 69%
rename from packages/web-app/src/modules/reward-views/RewardSearchResultContainer.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/RewardSearchResultContainer.tsx
index 8f3a3de47..2bfa99daa 100644
--- a/packages/web-app/src/modules/reward-views/RewardSearchResultContainer.tsx
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/RewardSearchResult/RewardSearchResultContainer.tsx
@@ -1,8 +1,8 @@
 import { withSearch } from '@elastic/react-search-ui'
-import { connect } from '../../connect'
-import type { RootStore } from '../../Store'
-import { routeLink } from '../../utils'
-import { SearchResultsPage } from './pages'
+import { connect } from '../../../../../connect'
+import type { RootStore } from '../../../../../Store'
+import { routeLink } from '../../../../../utils'
+import { RewardSearchResult } from './RewardSearchResult'
 
 const mapStoreToProps = (store: RootStore): any => {
   const onClickReward = (to: string, action?: any) => {
@@ -25,5 +25,5 @@ export const RewardSearchResultContainer = connect(
     error,
     results,
     clearFilters,
-  }))(SearchResultsPage),
+  }))(RewardSearchResult),
 )
diff --git a/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage.tsx b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/StorefrontHomePage.tsx
similarity index 82%
rename from packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage.tsx
rename to packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/StorefrontHomePage.tsx
index f068073c8..174bfb626 100644
--- a/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage.tsx
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/StorefrontHomePage.tsx
@@ -3,9 +3,10 @@ import { Component } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
 import { Route, Switch } from 'react-router'
-import type { SaladTheme } from '../../../SaladTheme'
-import { RewardSearchBarContainer, RewardSearchResultContainer } from '../../reward-views'
-import { StorefrontPageContainer } from '../StorefrontPageContainer'
+import type { SaladTheme } from '../../../../SaladTheme'
+import { StorefrontPageContainer } from '../../StorefrontPageContainer'
+import { RewardSearchBarContainer } from './RewardSearchBar/RewardSearchBarContainer'
+import { RewardSearchResultContainer } from './RewardSearchResult/RewardSearchResultContainer'
 
 const styles = (theme: SaladTheme) => ({
   container: {
diff --git a/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/index.ts b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/index.ts
new file mode 100644
index 000000000..7ca781087
--- /dev/null
+++ b/packages/web-app/src/modules/storefront-views/pages/StorefrontHomePage/index.ts
@@ -0,0 +1,2 @@
+export * from './StorefrontHomePage';
+
diff --git a/packages/web-app/yarn.lock b/packages/web-app/yarn.lock
index 7dd2df019..fc70718da 100644
--- a/packages/web-app/yarn.lock
+++ b/packages/web-app/yarn.lock
@@ -2947,7 +2947,7 @@ __metadata:
     "@fortawesome/free-regular-svg-icons": 6.3.0
     "@fortawesome/free-solid-svg-icons": 6.3.0
     "@fortawesome/react-fontawesome": 0.2.0
-    "@saladtechnologies/garden-components": 1.1.2
+    "@saladtechnologies/garden-components": 1.1.5
     "@saladtechnologies/garden-fonts": 1.0.3
     "@saladtechnologies/garden-icons": 1.0.11
     "@storybook/addon-a11y": 6.5.16
@@ -3055,9 +3055,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@saladtechnologies/garden-components@npm:1.1.2":
-  version: 1.1.2
-  resolution: "@saladtechnologies/garden-components@npm:1.1.2"
+"@saladtechnologies/garden-components@npm:1.1.5":
+  version: 1.1.5
+  resolution: "@saladtechnologies/garden-components@npm:1.1.5"
   peerDependencies:
     "@emotion/react": 11.x
     "@emotion/styled": 11.x
@@ -3072,7 +3072,7 @@ __metadata:
     react-intl: 6.x
     react-range: 1.x
     react-responsive: 9.x
-  checksum: 7d400c31a56294bd82ad31679d5f63ff1c32f119d17ae6970378eaa669a057ad36031075a5441af5b96149fed704bff9e4d11b4788cfa7e710159bf8d42d173b
+  checksum: a44be0c688520b814e04ec1e5f93436fbc5c5ac1db286d097f0410f3d9a2eb0d6e22b9145d8437de5c1db85b62db2bbacf433882b2edb5c734453fb873825890
   languageName: node
   linkType: hard