diff --git a/packages/web-app/src/MobileRoutes.tsx b/packages/web-app/src/MobileRoutes.tsx
index 096a76f73..73f069a09 100644
--- a/packages/web-app/src/MobileRoutes.tsx
+++ b/packages/web-app/src/MobileRoutes.tsx
@@ -5,7 +5,7 @@ import { MobilePageNotFound } from './components'
 import { FeatureFlags, useFeatureManager } from './FeatureManager'
 import { MobileAccountSummaryContainer } from './modules/account-views-mobile'
 import { BackupCodesPageContainer } from './modules/backup-codes/BackupCodesPageContainer'
-import { DemandAlertsPageContainer } from './modules/demand-alerts-views'
+import { DemandAlertsPage } from './modules/demand-alerts-views'
 import { DemandMonitorPageContainer } from './modules/demand-monitor-views'
 import { MobileEarningSummaryContainer } from './modules/earn-views-mobile'
 import { PasskeyDeletePageContainer } from './modules/passkey-delete'
@@ -25,9 +25,7 @@ const _Routes = ({ location }: RouteComponentProps) => {
         {isDemandMonitorFeatureFlagEnabled && (
           <Route path="/earn/demand" exact component={DemandMonitorPageContainer} />
         )}
-        {isDemandNotificationsFeatureFlagEnabled && (
-          <Route path="/account/alerts" exact component={DemandAlertsPageContainer} />
-        )}
+        {isDemandNotificationsFeatureFlagEnabled && <Route path="/account/alerts" exact component={DemandAlertsPage} />}
         <Route path="/account/summary" component={MobileAccountSummaryContainer} />
         <Route exact path="/rewards/:id" component={RewardDetailsContainer} />
         <Redirect exact from="/account/summary" to="/account/summary" />
diff --git a/packages/web-app/src/Store.tsx b/packages/web-app/src/Store.tsx
index 6f4035b4a..9a5a35fba 100644
--- a/packages/web-app/src/Store.tsx
+++ b/packages/web-app/src/Store.tsx
@@ -10,6 +10,7 @@ import { BackupCodesStore } from './modules/backup-codes'
 import { BalanceStore } from './modules/balance'
 import { BonusStore } from './modules/bonus'
 import { RefreshService } from './modules/data-refresh'
+import { DemandAlertsStore } from './modules/demand-alerts-views/DemandAlertsStore'
 import { DemandMonitorStore } from './modules/demand-monitor-views/DemandMonitorStore'
 import { EngagementStore } from './modules/engagement'
 import { ErrorBoundaryStore } from './modules/error-boundary'
@@ -75,6 +76,7 @@ export class RootStore {
   public readonly passkey: PasskeyStore
   public readonly backupCodes: BackupCodesStore
   public readonly demandMonitor: DemandMonitorStore
+  public readonly demandAlerts: DemandAlertsStore
 
   constructor(axios: AxiosInstance, private readonly featureManager: FeatureManager) {
     this.routing = new RouterStore()
@@ -103,6 +105,7 @@ export class RootStore {
     this.startButtonUI = new StartButtonUIStore(this)
     this.errorBoundary = new ErrorBoundaryStore()
     this.demandMonitor = new DemandMonitorStore(axios)
+    this.demandAlerts = new DemandAlertsStore(axios)
 
     // Pass AnalyticsStore to FeatureManager
     featureManager.setAnalyticsStore(this.analytics)
diff --git a/packages/web-app/src/components/SettingsPage.tsx b/packages/web-app/src/components/SettingsPage.tsx
index 8170250aa..c8c4ad6e9 100644
--- a/packages/web-app/src/components/SettingsPage.tsx
+++ b/packages/web-app/src/components/SettingsPage.tsx
@@ -9,7 +9,7 @@ import { AccountContainer } from '../modules/account-views/account-views'
 import { ReferralSettingsContainer } from '../modules/account-views/referral-views'
 import { AchievementPageContainer } from '../modules/achievements-views'
 import { BonusPageContainer } from '../modules/bonus-views'
-import { DemandAlertsPageContainer } from '../modules/demand-alerts-views'
+import { DemandAlertsPage } from '../modules/demand-alerts-views'
 import { IconArrowLeft } from '../modules/reward-views/components/assets'
 import { styles } from './SettingsPage.styles'
 
@@ -74,7 +74,7 @@ const _Settings = ({ appBuild, classes, menuButtons, isUserReferralsEnabled, onC
     isDemandNotificationsFeatureFlagEnabled && {
       url: '/account/alerts',
       text: 'Demand Alerts',
-      component: DemandAlertsPageContainer,
+      component: DemandAlertsPage,
     },
   ].filter((menuItem) => menuItem) as MenuItem[]
 
diff --git a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/DemandAlertsList.tsx b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/DemandAlertsList.tsx
index acdcf6fe2..2b03e216c 100644
--- a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/DemandAlertsList.tsx
+++ b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/DemandAlertsList.tsx
@@ -1,11 +1,14 @@
 import { Button, Text } from '@saladtechnologies/garden-components'
 import type CSS from 'csstype'
-import type { FunctionComponent } from 'react'
+import { useEffect, useState, type FunctionComponent } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
+import { ErrorText } from '../../../../components'
 import type { SaladTheme } from '../../../../SaladTheme'
 import { DefaultTheme } from '../../../../SaladTheme'
-import { mockedExistingAlertsList } from '../../mocks'
+import { demandScenario } from '../../constants'
+import type { DemandedSubscription } from '../../DemandAlertsStore'
+import { UnsubscribeFromDemandAlertStatus } from '../../DemandAlertsStore'
 
 const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: SaladTheme) => ({
   container: {
@@ -27,32 +30,85 @@ const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: Sa
     justifyContent: 'space-between',
     alignItems: 'center',
   },
+  loadingSpinnerWrap: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 })
 
-interface Props extends WithStyles<typeof styles> {}
+interface Props extends WithStyles<typeof styles> {
+  demandAlertSubscriptionList?: DemandedSubscription[]
+  fetchDemandAlertSubscriptionList: () => void
+  setUnsubscribeFromDemandAlertStatus: (unsubscribeFromDemandAlertStatus: UnsubscribeFromDemandAlertStatus) => void
+  unsubscribeFromDemandAlert: (subscriptionId: string) => void
+  unsubscribeFromDemandAlertStatus: UnsubscribeFromDemandAlertStatus
+}
+
+const _DemandAlertsList: FunctionComponent<Props> = ({
+  classes,
+  demandAlertSubscriptionList,
+  fetchDemandAlertSubscriptionList,
+  setUnsubscribeFromDemandAlertStatus,
+  unsubscribeFromDemandAlert,
+  unsubscribeFromDemandAlertStatus,
+}) => {
+  const [currentDemandedSubscriptionId, setCurrentDemandedSubscriptionId] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetchDemandAlertSubscriptionList()
+    return () => {
+      setUnsubscribeFromDemandAlertStatus(UnsubscribeFromDemandAlertStatus.UNKNOWN)
+    }
+  }, [fetchDemandAlertSubscriptionList, setUnsubscribeFromDemandAlertStatus])
+
+  const handleCancelSubscription = (demandedSubscriptionId: string) => {
+    unsubscribeFromDemandAlert(demandedSubscriptionId)
+    setCurrentDemandedSubscriptionId(demandedSubscriptionId)
+  }
 
-const _DemandAlertsList: FunctionComponent<Props> = ({ classes }) => {
   return (
-    <div className={classes.container}>
-      <Text variant="baseXL">Manage your existing alerts</Text>
-      <Text variant="baseS">You will get alerted on the following scenarios:</Text>
-      <div className={classes.existingAlertsContainer}>
-        {mockedExistingAlertsList.map((existingAlert) => (
-          <div className={classes.alertContainer}>
-            <Text variant="baseS">
-              {existingAlert.gpu} @ {existingAlert.demandScenario}
-            </Text>
-            <Button
-              onClick={() => {}}
-              outlineColor={DefaultTheme.white}
-              label="Unsubscribe"
-              variant="primary"
-              size="small"
-            />
-          </div>
-        ))}
+    demandAlertSubscriptionList &&
+    demandAlertSubscriptionList?.length > 0 && (
+      <div className={classes.container}>
+        <Text variant="baseXL">Manage your existing alerts</Text>
+        <Text variant="baseS">You will get alerted on the following scenarios:</Text>
+        <div className={classes.existingAlertsContainer}>
+          {demandAlertSubscriptionList.map((demandAlertSubscription) => {
+            const isCurrentDemandedSubscriptionId = currentDemandedSubscriptionId === demandAlertSubscription.id
+
+            const withCancelSubscriptionSubmitting =
+              unsubscribeFromDemandAlertStatus === UnsubscribeFromDemandAlertStatus.SUBMITTING &&
+              isCurrentDemandedSubscriptionId
+            const withCancelSubscriptionFailure =
+              unsubscribeFromDemandAlertStatus === UnsubscribeFromDemandAlertStatus.FAILURE &&
+              isCurrentDemandedSubscriptionId
+            const utilizationPctLabel = demandScenario[demandAlertSubscription.utilizationPct]?.label
+
+            return (
+              <>
+                <div className={classes.alertContainer}>
+                  <Text variant="baseS">
+                    {demandAlertSubscription.gpuDisplayName} @ {utilizationPctLabel}
+                  </Text>
+                  <Button
+                    onClick={() => handleCancelSubscription(demandAlertSubscription.id)}
+                    isLoading={withCancelSubscriptionSubmitting}
+                    outlineColor={DefaultTheme.white}
+                    label="Unsubscribe"
+                    variant="primary"
+                    size="small"
+                  />
+                </div>
+                {withCancelSubscriptionFailure && <ErrorText>Something went wrong. Please try again later</ErrorText>}
+              </>
+            )
+          })}
+        </div>
       </div>
-    </div>
+    )
   )
 }
 
diff --git a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/DemandAlertsListContainer.tsx b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/DemandAlertsListContainer.tsx
new file mode 100644
index 000000000..dd5faf8bd
--- /dev/null
+++ b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/DemandAlertsListContainer.tsx
@@ -0,0 +1,13 @@
+import { connect } from '../../../../connect'
+import type { RootStore } from '../../../../Store'
+import { DemandAlertsList } from './DemandAlertsList'
+
+const mapStoreToProps = (store: RootStore): any => ({
+  demandAlertSubscriptionList: store.demandAlerts.demandAlertSubscriptionList,
+  fetchDemandAlertSubscriptionList: store.demandAlerts.fetchDemandAlertSubscriptionList,
+  setUnsubscribeFromDemandAlertStatus: store.demandAlerts.setUnsubscribeFromDemandAlertStatus,
+  unsubscribeFromDemandAlert: store.demandAlerts.unsubscribeFromDemandAlert,
+  unsubscribeFromDemandAlertStatus: store.demandAlerts.unsubscribeFromDemandAlertStatus,
+})
+
+export const DemandAlertsListContainer = connect(mapStoreToProps, DemandAlertsList)
diff --git a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/index.ts b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/index.ts
index 510d28d3c..fafd52720 100644
--- a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/index.ts
+++ b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsList/index.ts
@@ -1 +1 @@
-export * from './DemandAlertsList'
+export * from './DemandAlertsListContainer'
diff --git a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsPage.tsx b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsPage.tsx
index 74072c1b2..757bbb079 100644
--- a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsPage.tsx
+++ b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsPage.tsx
@@ -6,8 +6,8 @@ import { useMediaQuery } from 'react-responsive'
 import { Head, mobileSize, Scrollbar } from '../../../components'
 import type { SaladTheme } from '../../../SaladTheme'
 import { withLogin } from '../../auth-views'
-import { DemandAlertsList } from './DemandAlertsList'
-import { DemandAlertsSetUp } from './DemandAlertsSetUp'
+import { DemandAlertsListContainer } from './DemandAlertsList'
+import { DemandAlertsSetUpContainer } from './DemandAlertsSetUp'
 
 const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: SaladTheme) => ({
   page: {
@@ -43,8 +43,8 @@ const _DemandAlertsPage = ({ classes }: Props) => {
           specific payout tier. When that scenario arrives we will notify you through email and an in-app message.
         </Text>
         <div className={classes.demandContentContainer}>
-          <DemandAlertsSetUp />
-          <DemandAlertsList />
+          <DemandAlertsSetUpContainer />
+          <DemandAlertsListContainer />
         </div>
       </Layout>
     </div>
diff --git a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/DemandAlertsSetUp.tsx b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/DemandAlertsSetUp.tsx
index fd718c476..ed01c7931 100644
--- a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/DemandAlertsSetUp.tsx
+++ b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/DemandAlertsSetUp.tsx
@@ -1,11 +1,16 @@
-import { Button, Text } from '@saladtechnologies/garden-components'
+import { Button, LoadingSpinner, Text } from '@saladtechnologies/garden-components'
 import type CSS from 'csstype'
-import type { FunctionComponent } from 'react'
+import { useEffect, useState, type FunctionComponent } from 'react'
 import type { WithStyles } from 'react-jss'
 import withStyles from 'react-jss'
-import { DefaultTheme } from '../../../../SaladTheme'
+import { ErrorText } from '../../../../components'
+import type { DropdownOption } from '../../../../components/Dropdown'
 import { DropdownLight } from '../../../../components/Dropdown'
-import { demandScenarios, mockedGpuNames } from '../../constants'
+import { DefaultTheme } from '../../../../SaladTheme'
+import type { DemandedHardwarePerformance } from '../../../demand-monitor-views/DemandMonitorStore'
+import { demandScenario } from '../../constants'
+import { SubscribeToDemandAlertStatus } from '../../DemandAlertsStore'
+import { getCreateNewSubscriptionErrorText } from './utils'
 
 const styles: () => Record<string, CSS.Properties> = () => ({
   container: {
@@ -26,26 +31,101 @@ const styles: () => Record<string, CSS.Properties> = () => ({
     flexDirection: 'column',
     gap: '5px',
   },
+  loadingSpinnerWrap: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 })
 
-interface Props extends WithStyles<typeof styles> {}
+interface Props extends WithStyles<typeof styles> {
+  demandedHardwarePerformanceList?: DemandedHardwarePerformance[]
+  fetchDemandedHardwarePerformanceList: () => void
+  setSubscribeToDemandAlertStatus: (subscribeToDemandAlertStatus: SubscribeToDemandAlertStatus) => void
+  subscribeToDemandAlert: (gpuName: string, utilizationPct: number) => void
+  subscribeToDemandAlertStatus: SubscribeToDemandAlertStatus
+}
+
+const _DemandAlertsSetUp: FunctionComponent<Props> = ({
+  classes,
+  demandedHardwarePerformanceList,
+  fetchDemandedHardwarePerformanceList,
+  setSubscribeToDemandAlertStatus,
+  subscribeToDemandAlert,
+  subscribeToDemandAlertStatus,
+}) => {
+  const createNewSubscriptionErrorText = getCreateNewSubscriptionErrorText(subscribeToDemandAlertStatus)
+
+  const demandHardwareOptions = demandedHardwarePerformanceList?.map((demandHardware) => ({
+    label: demandHardware.displayName,
+    value: demandHardware.name,
+  }))
+
+  const initialSelectedDemandHardwareValue = demandHardwareOptions?.[0]?.value
+  const initialSelectedDemandScenarioValue = demandScenario[0]?.value
+
+  const [selectedDemandHardwareValue, setSelectedDemandHardwareValue] = useState<string | undefined>(
+    initialSelectedDemandHardwareValue,
+  )
+  const [selectedDemandScenarioValue, setSelectedDemandScenarioValue] = useState<string | undefined>(
+    initialSelectedDemandScenarioValue,
+  )
+
+  useEffect(() => {
+    fetchDemandedHardwarePerformanceList()
+    setSelectedDemandHardwareValue(initialSelectedDemandHardwareValue)
+    return () => {
+      setSubscribeToDemandAlertStatus(SubscribeToDemandAlertStatus.UNKNOWN)
+    }
+  }, [initialSelectedDemandHardwareValue, fetchDemandedHardwarePerformanceList, setSubscribeToDemandAlertStatus])
+
+  const handleDemandHardwareOptionChange = (demandHardwareOption: DropdownOption) => {
+    setSelectedDemandHardwareValue(demandHardwareOption.value)
+    setSubscribeToDemandAlertStatus(SubscribeToDemandAlertStatus.UNKNOWN)
+  }
+
+  const handleDemandScenarioOptionChange = (demandScenarioOption: DropdownOption) => {
+    setSelectedDemandScenarioValue(demandScenarioOption.value)
+    setSubscribeToDemandAlertStatus(SubscribeToDemandAlertStatus.UNKNOWN)
+  }
+
+  const handleAddAlert = () => {
+    if (selectedDemandHardwareValue && selectedDemandScenarioValue) {
+      subscribeToDemandAlert(selectedDemandHardwareValue, Number(selectedDemandScenarioValue))
+    }
+  }
 
-const _DemandAlertsSetUp: FunctionComponent<Props> = ({ classes }) => {
   return (
     <div className={classes.container}>
       <Text variant="baseXL">Set up an alert</Text>
       <Text variant="baseS">Select the GPU and the demand scenario you wish to get notified for.</Text>
-      <div className={classes.dropdownContainer}>
-        <div className={classes.dropdownContentContainer}>
-          <Text variant="baseS">GPU</Text>
-          <DropdownLight options={mockedGpuNames} />
-        </div>
-        <div className={classes.dropdownContentContainer}>
-          <Text variant="baseS">Demand Scenario</Text>
-          <DropdownLight options={demandScenarios} />
+      {demandHardwareOptions ? (
+        <>
+          <div className={classes.dropdownContainer}>
+            <div className={classes.dropdownContentContainer}>
+              <Text variant="baseS">GPU</Text>
+              <DropdownLight options={demandHardwareOptions} onChange={handleDemandHardwareOptionChange} />
+            </div>
+            <div className={classes.dropdownContentContainer}>
+              <Text variant="baseS">Demand Scenario</Text>
+              <DropdownLight options={Object.values(demandScenario)} onChange={handleDemandScenarioOptionChange} />
+            </div>
+          </div>
+          <Button
+            isLoading={subscribeToDemandAlertStatus === SubscribeToDemandAlertStatus.SUBMITTING}
+            onClick={handleAddAlert}
+            label="Add Alert"
+            outlineColor={DefaultTheme.darkBlue}
+          />
+          {createNewSubscriptionErrorText && <ErrorText>{createNewSubscriptionErrorText}</ErrorText>}
+        </>
+      ) : (
+        <div className={classes.loadingSpinnerWrap}>
+          <LoadingSpinner variant="light" size={100} />
         </div>
-      </div>
-      <Button onClick={() => {}} label="Add Alert" outlineColor={DefaultTheme.darkBlue} />
+      )}
     </div>
   )
 }
diff --git a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/DemandAlertsSetUpContainer.tsx b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/DemandAlertsSetUpContainer.tsx
new file mode 100644
index 000000000..7a32a4325
--- /dev/null
+++ b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/DemandAlertsSetUpContainer.tsx
@@ -0,0 +1,13 @@
+import { connect } from '../../../../connect'
+import type { RootStore } from '../../../../Store'
+import { DemandAlertsSetUp } from './DemandAlertsSetUp'
+
+const mapStoreToProps = (store: RootStore): any => ({
+  demandedHardwarePerformanceList: store.demandMonitor.demandedHardwarePerformanceList,
+  fetchDemandedHardwarePerformanceList: store.demandMonitor.fetchDemandedHardwarePerformanceList,
+  setSubscribeToDemandAlertStatus: store.demandAlerts.setSubscribeToDemandAlertStatus,
+  subscribeToDemandAlert: store.demandAlerts.subscribeToDemandAlert,
+  subscribeToDemandAlertStatus: store.demandAlerts.subscribeToDemandAlertStatus,
+})
+
+export const DemandAlertsSetUpContainer = connect(mapStoreToProps, DemandAlertsSetUp)
diff --git a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/index.ts b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/index.ts
index cdea4a166..a68b7de21 100644
--- a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/index.ts
+++ b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/index.ts
@@ -1 +1 @@
-export * from './DemandAlertsSetUp'
+export * from './DemandAlertsSetUpContainer'
diff --git a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/utils.ts b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/utils.ts
new file mode 100644
index 000000000..4649f17fa
--- /dev/null
+++ b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPage/DemandAlertsSetUp/utils.ts
@@ -0,0 +1,16 @@
+import { SubscribeToDemandAlertStatus } from '../../DemandAlertsStore'
+
+export const getCreateNewSubscriptionErrorText = (
+  subscribeToDemandAlertStatus: SubscribeToDemandAlertStatus,
+): string | null => {
+  switch (subscribeToDemandAlertStatus) {
+    case SubscribeToDemandAlertStatus.FAILURE:
+      return 'Something went wrong. Please try again later'
+    case SubscribeToDemandAlertStatus.ALREADY_EXISTS:
+      return 'An alert with this GPU and Demand Scenario already exists.'
+    case SubscribeToDemandAlertStatus.INVALID_GPU:
+      return 'The GPU configuration provided is invalid.'
+    default:
+      return null
+  }
+}
diff --git a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPageContainer.tsx b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPageContainer.tsx
deleted file mode 100644
index 804688495..000000000
--- a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsPageContainer.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { connect } from '../../connect'
-import type { RootStore } from '../../Store'
-import { DemandAlertsPage } from './DemandAlertsPage'
-
-const mapStoreToProps = (_store: RootStore): any => ({})
-
-export const DemandAlertsPageContainer = connect(mapStoreToProps, DemandAlertsPage)
diff --git a/packages/web-app/src/modules/demand-alerts-views/DemandAlertsStore.tsx b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsStore.tsx
new file mode 100644
index 000000000..0afe7fd00
--- /dev/null
+++ b/packages/web-app/src/modules/demand-alerts-views/DemandAlertsStore.tsx
@@ -0,0 +1,102 @@
+import type { AxiosInstance } from 'axios'
+import { action, flow, observable } from 'mobx'
+import { demandSubscriptionsPath } from './constants'
+
+export interface DemandedSubscription {
+  createdAt: string
+  gpuDisplayName: string
+  gpuName: string
+  id: string
+  utilizationPct: number
+}
+
+export enum SubscribeToDemandAlertStatus {
+  UNKNOWN = 'unknown',
+  SUBMITTING = 'submitting',
+  SUCCESS = 'success',
+  FAILURE = 'failure',
+  ALREADY_EXISTS = 'failure:subscription-already-exists',
+  INVALID_GPU = 'failure:invalid-gpu',
+}
+export enum UnsubscribeFromDemandAlertStatus {
+  UNKNOWN = 'unknown',
+  SUBMITTING = 'submitting',
+  SUCCESS = 'success',
+  FAILURE = 'failure',
+}
+
+export class DemandAlertsStore {
+  constructor(private readonly axios: AxiosInstance) {}
+
+  @observable
+  public subscribeToDemandAlertStatus: SubscribeToDemandAlertStatus = SubscribeToDemandAlertStatus.UNKNOWN
+
+  @observable
+  public unsubscribeFromDemandAlertStatus: UnsubscribeFromDemandAlertStatus = UnsubscribeFromDemandAlertStatus.UNKNOWN
+
+  @observable
+  public demandAlertSubscriptionList?: DemandedSubscription[]
+
+  @action.bound
+  fetchDemandAlertSubscriptionList = flow(function* (this: DemandAlertsStore) {
+    try {
+      const demandAlertSubscriptionListResponse = yield this.axios.get(demandSubscriptionsPath)
+      this.demandAlertSubscriptionList = demandAlertSubscriptionListResponse.data
+    } catch (error) {
+      console.error('DemandAlertsStore -> fetchDemandAlertSubscriptionList: ', error)
+    }
+  })
+
+  @action.bound
+  subscribeToDemandAlert = flow(function* (this: DemandAlertsStore, gpuName: string, utilizationPct: number) {
+    try {
+      this.subscribeToDemandAlertStatus = SubscribeToDemandAlertStatus.SUBMITTING
+      yield this.axios.post(demandSubscriptionsPath, {
+        gpuName,
+        utilizationPct,
+      })
+      this.fetchDemandAlertSubscriptionList()
+      this.subscribeToDemandAlertStatus = SubscribeToDemandAlertStatus.SUCCESS
+    } catch (error) {
+      this.subscribeToDemandAlertStatus = this.mapErrorToSubscribeToDemandAlertStatus(error)
+      console.error('DemandAlertsStore -> subscribeToDemandAlert: ', error)
+    }
+  })
+
+  private mapErrorToSubscribeToDemandAlertStatus(error: any): SubscribeToDemandAlertStatus {
+    if (!error || typeof error !== 'object') return SubscribeToDemandAlertStatus.FAILURE
+
+    const errorResponse = error.response?.data
+    switch (errorResponse?.type) {
+      case 'subscription:create:already-exists':
+        return SubscribeToDemandAlertStatus.ALREADY_EXISTS
+      case 'subscription:create:invalid-gpu':
+        return SubscribeToDemandAlertStatus.INVALID_GPU
+      default:
+        return SubscribeToDemandAlertStatus.FAILURE
+    }
+  }
+
+  @action.bound
+  setSubscribeToDemandAlertStatus = (subscribeToDemandAlertStatus: SubscribeToDemandAlertStatus) => {
+    this.subscribeToDemandAlertStatus = subscribeToDemandAlertStatus
+  }
+
+  @action.bound
+  unsubscribeFromDemandAlert = flow(function* (this: DemandAlertsStore, subscriptionId: string) {
+    try {
+      this.unsubscribeFromDemandAlertStatus = UnsubscribeFromDemandAlertStatus.SUBMITTING
+      yield this.axios.delete(`${demandSubscriptionsPath}/${subscriptionId}`)
+      this.fetchDemandAlertSubscriptionList()
+      this.unsubscribeFromDemandAlertStatus = UnsubscribeFromDemandAlertStatus.SUCCESS
+    } catch (error) {
+      this.unsubscribeFromDemandAlertStatus = UnsubscribeFromDemandAlertStatus.FAILURE
+      console.error('DemandAlertsStore -> unsubscribeFromDemandAlert: ', error)
+    }
+  })
+
+  @action.bound
+  setUnsubscribeFromDemandAlertStatus = (unsubscribeFromDemandAlertStatus: UnsubscribeFromDemandAlertStatus) => {
+    this.unsubscribeFromDemandAlertStatus = unsubscribeFromDemandAlertStatus
+  }
+}
diff --git a/packages/web-app/src/modules/demand-alerts-views/constants.ts b/packages/web-app/src/modules/demand-alerts-views/constants.ts
index 3bcfbabbf..132a422f9 100644
--- a/packages/web-app/src/modules/demand-alerts-views/constants.ts
+++ b/packages/web-app/src/modules/demand-alerts-views/constants.ts
@@ -1,11 +1,15 @@
+import type { DropdownOption } from "../../components/Dropdown"
+
+export const demandSubscriptionsPath = '/api/v2/demand-monitor/subscriptions'
+
 export const mockedGpuNames = [
   { label: 'NVIDIA RTX 4090', value: 'NVIDIA RTX 4090' },
   { label: 'NVIDIA RTX 4080', value: 'NVIDIA RTX 4080' },
   { label: 'NVIDIA RTX 4070 Ti Super', value: 'NVIDIA RTX 4070 Ti Super' },
 ]
 
-export const demandScenarios = [
-  { label: 'High Demand', value: 'highDemand' },
-  { label: 'Moderate Demand', value: 'moderateDemand' },
-  { label: 'Low Demand', value: 'lowDemand' },
-]
+export const demandScenario: Record<number, DropdownOption> = {
+  80: { label: 'High Demand', value: '80' },
+  50: { label: 'Moderate Demand', value: '50' },
+  0: { label: 'Low Demand', value: '0' },
+}
diff --git a/packages/web-app/src/modules/demand-alerts-views/index.ts b/packages/web-app/src/modules/demand-alerts-views/index.ts
index a1409c7bd..6710c64a6 100644
--- a/packages/web-app/src/modules/demand-alerts-views/index.ts
+++ b/packages/web-app/src/modules/demand-alerts-views/index.ts
@@ -1,2 +1 @@
-export * from './DemandAlertsPageContainer'
-
+export * from './DemandAlertsPage'