diff --git a/src/modules/expeditions/api/index.ts b/src/modules/expeditions/api/index.ts
new file mode 100644
index 000000000..ce88bfef2
--- /dev/null
+++ b/src/modules/expeditions/api/index.ts
@@ -0,0 +1,50 @@
+import { EXPEDITIONS_API_BASE_URL } from '../constants'
+
+export interface WeeklyFragmentRewards {
+  claimableFragments: number
+  claimedFragments: number
+  totalAmountUSD: number
+  liquidityDeposits: any[]
+}
+
+export interface GetWeeklyFragmentRewardsResponse {
+  data: {
+    liquidityProvision: WeeklyFragmentRewards
+    liquidityStaking: WeeklyFragmentRewards
+  }
+}
+
+/**
+ * Get weekly fragment rewards for given user
+ * @param address user address
+ * @returns
+ */
+export function getUserExpeditionsRewards(address: string): Promise<GetWeeklyFragmentRewardsResponse> {
+  const params = new URLSearchParams({
+    address,
+  })
+
+  const url = `${EXPEDITIONS_API_BASE_URL}/expeditions/weekly-fragments?${params.toString()}`
+
+  console.log({ url })
+
+  return fetch(url).then(res => res.json())
+}
+
+/**
+ *
+ * @param address user address
+ * @param signature EIP712 signature
+ * @returns
+ */
+export function claimUserWeeklyFragments(address: string, signature: string): Promise<any> {
+  const url = new URL('/expeditions/weekly-fragments/claim', EXPEDITIONS_API_BASE_URL)
+
+  return fetch(url, {
+    method: 'POST',
+    body: JSON.stringify({
+      address,
+      signature,
+    }),
+  }).then(res => res.json())
+}
diff --git a/src/modules/expeditions/app/index.tsx b/src/modules/expeditions/app/index.tsx
new file mode 100644
index 000000000..df2a2d0e7
--- /dev/null
+++ b/src/modules/expeditions/app/index.tsx
@@ -0,0 +1,62 @@
+import type { Web3Provider } from '@ethersproject/providers'
+
+import { useEffect, useState } from 'react'
+
+import { HeaderButton } from '../../../components/Header/HeaderButton'
+import { useToggleShowExpeditionsPopup } from '../../../state/application/hooks'
+import { getUserExpeditionsRewards } from '../api'
+import { ExpeditionsModal } from '../components/ExpeditionsModal'
+import { ExpeditionsContext } from '../contexts/ExpeditionsContext'
+
+export interface SwaprExpeditionsAppProps {
+  provider: Web3Provider
+  account: string
+}
+
+export function App({ provider, account }: SwaprExpeditionsAppProps) {
+  const toggleExpeditionsPopup = useToggleShowExpeditionsPopup()
+
+  if (!account) {
+    throw new Error('SwaprExpeditionsApp: No account')
+  }
+
+  if (!provider) {
+    throw new Error('SwaprExpeditionsApp: No provider')
+  }
+  // Controls fetching of data from the backend
+  const [isLoading, setIsLoading] = useState(true)
+  const [rewards, setRewards] = useState<ExpeditionsContext['rewards']>()
+
+  useEffect(() => {
+    getUserExpeditionsRewards(account as string)
+      .then(userRewards => {
+        console.log({
+          userRewards,
+        })
+        setRewards(userRewards.data)
+      })
+      .catch(error => {
+        console.error(error)
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+  }, [account])
+
+  return (
+    <ExpeditionsContext.Provider
+      value={
+        {
+          userAddress: account,
+          isLoading,
+          rewards,
+        } as ExpeditionsContext
+      }
+    >
+      <HeaderButton onClick={toggleExpeditionsPopup} style={{ marginRight: '7px' }}>
+        &#10024;&nbsp;Expeditions
+      </HeaderButton>
+      <ExpeditionsModal onDismiss={toggleExpeditionsPopup} />
+    </ExpeditionsContext.Provider>
+  )
+}