diff --git a/package.json b/package.json
index 6b8a334..acd1f54 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@calcom/embed-react": "^1.0.10",
-    "@heroicons/react": "^2.0.13",
+    "@heroicons/react": "^2.1.3",
     "cloudinary-core": "^2.13.0",
     "date-fns": "^2.29.1",
     "dompurify": "^2.4.0",
diff --git a/src/atoms/inputField/inputField.module.scss b/src/atoms/inputField/inputField.module.scss
index 3ac87ac..5010243 100644
--- a/src/atoms/inputField/inputField.module.scss
+++ b/src/atoms/inputField/inputField.module.scss
@@ -48,25 +48,32 @@
 
 .awell_input_field {
   font: var(--awell-font);
-  padding: var(--awell-spacing-3) var(--awell-spacing-4);
+  font-size: var(--awell-font-size-sm);
+  padding: var(--awell-spacing-2) var(--awell-spacing-3);
   color: var(--awell-slate900);
-  font-size: var(--awell-font-size-base);
   line-height: var(--awell-leading-5);
   border: 1px solid rgb(209 213 219);
   border-radius: var(--awell-border-radius-md);
   box-shadow: var(--awell-shadow-sm);
   width: 100%;
 
+  @media (min-width: 640px) {
+    font-size: var(--awell-font-size-base);
+    padding: var(--awell-spacing-3) var(--awell-spacing-4);
+  }
+
   &:focus {
     outline: 2px transparent;
     outline-offset: 2px;
-    box-shadow:
-      0 0 0 0px #fff,
-      0 0 0 calc(1px + var(--awell-focus-ring-offset-width)) var(--awell-focus-ring-color), 0 0 #0000;
+    box-shadow: 0 0 0 0px #fff,
+      0 0 0 calc(1px + var(--awell-focus-ring-offset-width))
+        var(--awell-focus-ring-color),
+      0 0 #0000;
     border-color: var(--awell-focus-ring-color);
   }
 
-  &:focus, &:active {
+  &:focus,
+  &:active {
     outline-color: var(--awell-accent-color);
   }
   &:disabled {
diff --git a/src/atoms/questionLabel/questionLabel.module.scss b/src/atoms/questionLabel/questionLabel.module.scss
index ce1f5ee..d549fab 100644
--- a/src/atoms/questionLabel/questionLabel.module.scss
+++ b/src/atoms/questionLabel/questionLabel.module.scss
@@ -1,6 +1,6 @@
 .label {
   margin-bottom: var(--awell-spacing-1\.5);
-  font-size: var(--awell-font-size-base);
+  font-size: var(--awell-font-size-sm);
   line-height: var(--awell-leading-normal);
   font-weight: var(--awell-font-medium);
   color: rgb(55 65 81);
@@ -9,7 +9,7 @@
   white-space: pre-wrap;
 
   @media (min-width: 640px) {
-    font-size: var(--awell-font-size-lg);
+    font-size: var(--awell-font-size-base);
     line-height: var(--awell-leading-relaxed);
   }
 }
diff --git a/src/hostedPages/activities/collectMedication/CollectMedication.tsx b/src/hostedPages/activities/collectMedication/CollectMedication.tsx
new file mode 100644
index 0000000..842bbc0
--- /dev/null
+++ b/src/hostedPages/activities/collectMedication/CollectMedication.tsx
@@ -0,0 +1,129 @@
+import React, { FC, useCallback, useEffect, useState } from 'react'
+import { Button, InputField, useTheme } from '../../../atoms'
+import { HostedPageFooter } from '../../layouts/HostedPageLayout/HostedPageFooter'
+import layoutClasses from '../../layouts/HostedPageLayout/hostedPageLayout.module.scss'
+import classes from './collectMedication.module.scss'
+import { CollectMedicationProps, type Medication } from './types'
+import { isEmpty } from 'lodash'
+import { MinusCircleIcon } from '@heroicons/react/24/outline'
+
+export const CollectMedication: FC<CollectMedicationProps> = ({
+  text,
+  onSubmit,
+}) => {
+  const [medications, setMedications] = useState<Medication[]>([])
+  const { updateLayoutMode, resetLayoutMode } = useTheme()
+
+  useEffect(() => {
+    updateLayoutMode('flexible')
+
+    return () => {
+      // Reset to default mode on unmount
+      resetLayoutMode()
+    }
+  }, [])
+
+  const handleSubmit = useCallback(() => {
+    const filteredMedications = medications.filter((medication) => {
+      return (
+        !isEmpty(medication.name) ||
+        !isEmpty(medication.dose) ||
+        !isEmpty(medication.instructions)
+      )
+    })
+
+    onSubmit(filteredMedications)
+  }, [medications, onsubmit])
+
+  const addMedication = () => {
+    setMedications([...medications, { name: '', dose: '', instructions: '' }])
+  }
+
+  const updateMedication = (
+    index: number,
+    field: keyof Medication,
+    value: string
+  ) => {
+    const newMedications = [...medications]
+    newMedications[index] = { ...newMedications[index], [field]: value }
+    setMedications(newMedications)
+  }
+
+  const removeMedication = (index: number) => {
+    setMedications(medications.filter((_, i) => i !== index))
+  }
+
+  return (
+    <>
+      <main
+        id="ahp_main_content_with_scroll_hint"
+        className={layoutClasses.main_content}
+      >
+        <div
+          className={`${classes.container} ${classes.groupMedsListContainer}`}
+        >
+          {medications.map((medication, index) => (
+            <div className={classes.singleMedsListContainer} key={index}>
+              <InputField
+                id="name"
+                label={text.medication_name}
+                type="text"
+                value={medication.name}
+                onChange={(e) =>
+                  updateMedication(index, 'name', e.target.value)
+                }
+                placeholder={text.medication_name}
+              />
+              <InputField
+                id="dose"
+                label={text.medication_dose}
+                type="text"
+                value={medication.dose}
+                onChange={(e) =>
+                  updateMedication(index, 'dose', e.target.value)
+                }
+                placeholder={text.medication_dose}
+              />
+              <InputField
+                id="instructions"
+                label={text.medication_instructions}
+                type="text"
+                value={medication.instructions || ''}
+                onChange={(e) =>
+                  updateMedication(index, 'instructions', e.target.value)
+                }
+                placeholder={text.medication_instructions}
+              />
+              <button
+                onClick={() => removeMedication(index)}
+                type="button"
+                className={classes.deleteMedsButton}
+              >
+                <MinusCircleIcon className={classes.icon} aria-hidden="true" />
+              </button>
+            </div>
+          ))}
+        </div>
+        <div className={`${classes.container} ${classes.addMedsButton}`}>
+          <Button onClick={addMedication} variant="secondary">
+            {text.add_medication_button}
+          </Button>
+        </div>
+      </main>
+
+      <HostedPageFooter showScrollHint={false}>
+        <div className={`${classes.button_wrapper} ${classes.container}`}>
+          <Button
+            data-cy="submitMedication"
+            variant="primary"
+            onClick={handleSubmit}
+          >
+            {text.submit_medication}
+          </Button>
+        </div>
+      </HostedPageFooter>
+    </>
+  )
+}
+
+CollectMedication.displayName = 'CollectMedication'
diff --git a/src/hostedPages/activities/collectMedication/collectMedication.module.scss b/src/hostedPages/activities/collectMedication/collectMedication.module.scss
new file mode 100644
index 0000000..d8423ed
--- /dev/null
+++ b/src/hostedPages/activities/collectMedication/collectMedication.module.scss
@@ -0,0 +1,86 @@
+@use '../../../globalStyles';
+
+:root {
+  --awell-activity-collect-medication-max-width: 850px;
+  --awell-activity-collect-medication-padding: var(--awell-activity-padding);
+}
+
+.container {
+  max-width: var(--awell-activity-collect-medication-max-width);
+  padding: var(--awell-activity-collect-medication-padding);
+  margin: 0 auto;
+}
+
+.groupMedsListContainer {
+  font-size: var(--awell-font-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  gap: var(--awell-spacing-4);
+  @media (min-width: 640px) {
+    font-size: var(--awell-font-size-base);
+    gap: var(--awell-spacing-3);
+  }
+}
+
+.singleMedsListContainer {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  text-align: left;
+  width: 100%;
+  gap: var(--awell-spacing-2);
+  @media (min-width: 640px) {
+    gap: var(--awell-spacing-4);
+  }
+}
+
+.singleMedsListContainer:not(:first-child) label {
+  display: none;
+}
+
+.singleMedsListContainer > div {
+  width: 100%;
+}
+
+.addMedsButton {
+  margin-top: var(--awell-spacing-4);
+  display: flex;
+  justify-content: flex-start;
+}
+
+.deleteMedsButton {
+  background-color: var(--awell-red50);
+  border: none;
+  color: var(--awell-red);
+  border-radius: var(--awell-border-radius-md);
+  display: flex;
+  align-items: center;
+  padding: var(--awell-spacing-2);
+  cursor: pointer;
+  &:hover {
+    background-color: #fee2e2;
+  }
+  @media (min-width: 640px) {
+    padding: var(--awell-spacing-2);
+  }
+}
+
+.icon {
+  width: 1.35rem;
+  height: 1.35rem;
+  @media (min-width: 640px) {
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+}
+
+.button_wrapper {
+  display: flex;
+  justify-content: flex-end;
+  height: 100%;
+  align-items: center;
+  width: 100%;
+}
diff --git a/src/hostedPages/activities/collectMedication/collectMedication.stories.tsx b/src/hostedPages/activities/collectMedication/collectMedication.stories.tsx
new file mode 100644
index 0000000..a3df58d
--- /dev/null
+++ b/src/hostedPages/activities/collectMedication/collectMedication.stories.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { Meta, Story } from '@storybook/react/types-6-0'
+import { ThemeProvider } from '../../../atoms'
+import { HostedPageLayout } from '../../layouts/HostedPageLayout/HostedPageLayout'
+import { CollectMedication as CollectMedicationComponent } from './CollectMedication'
+import { CollectMedicationProps } from './types'
+
+export default {
+  title: 'HostedPages/Activities/CollectMedication',
+  component: CollectMedicationComponent,
+  argTypes: {
+    onSubmit: { action: 'submitted' },
+  },
+  decorators: [
+    (StoryComponent) => (
+      <ThemeProvider accentColor="#004ac2">
+        <StoryComponent />
+      </ThemeProvider>
+    ),
+  ],
+} as Meta
+
+export const CollectMedication: Story<CollectMedicationProps> = ({
+  onSubmit,
+}) => {
+  return (
+    <HostedPageLayout
+      logo={
+        'https://res.cloudinary.com/da7x4rzl4/image/upload/v1710884206/Developer%20portal/awell_logo.svg'
+      }
+      onCloseHostedPage={() => alert('Stop session')}
+    >
+      <CollectMedicationComponent
+        onSubmit={onSubmit}
+        text={{
+          medication_name: 'Name',
+          medication_dose: 'Dose',
+          medication_instructions: 'Instructions',
+          add_medication_button: 'Add medication',
+          submit_medication: 'Submit',
+        }}
+      />
+    </HostedPageLayout>
+  )
+}
+
+CollectMedication.parameters = {}
diff --git a/src/hostedPages/activities/collectMedication/index.tsx b/src/hostedPages/activities/collectMedication/index.tsx
new file mode 100644
index 0000000..fa1d3c3
--- /dev/null
+++ b/src/hostedPages/activities/collectMedication/index.tsx
@@ -0,0 +1 @@
+export { CollectMedication } from './CollectMedication'
diff --git a/src/hostedPages/activities/collectMedication/types.ts b/src/hostedPages/activities/collectMedication/types.ts
new file mode 100644
index 0000000..605acc9
--- /dev/null
+++ b/src/hostedPages/activities/collectMedication/types.ts
@@ -0,0 +1,16 @@
+export type Medication = {
+  name: string
+  dose: string
+  instructions?: string
+}
+
+export interface CollectMedicationProps {
+  onSubmit: (data: Medication[]) => void
+  text: {
+    medication_name: string
+    medication_dose: string
+    medication_instructions: string
+    add_medication_button: string
+    submit_medication: string
+  }
+}
diff --git a/src/hostedPages/index.tsx b/src/hostedPages/index.tsx
index e2011a2..3f41ed0 100644
--- a/src/hostedPages/index.tsx
+++ b/src/hostedPages/index.tsx
@@ -5,6 +5,7 @@ export { WizardForm } from './activities/wizardForm'
 export { CalDotcomActivity } from './activities/scheduling'
 export { CloudinaryUpload } from './activities/cloudinary'
 export { CloudinarySingleFileUpload } from './activities/cloudinary'
+export { CollectMedication } from './activities/collectMedication'
 export {
   HostedPageLayout,
   CloseButton,
diff --git a/src/index.ts b/src/index.ts
index 22d4722..d87398a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -54,6 +54,7 @@ export {
   CloudinarySingleFileUpload,
   HostedPageFooter,
   LoadActivityPlaceholder,
+  CollectMedication,
 } from './hostedPages'
 
 export {
diff --git a/yarn.lock b/yarn.lock
index e9cd093..1199c6c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1902,10 +1902,10 @@
     tslib "^2.4.0"
     value-or-promise "1.0.11"
 
-"@heroicons/react@^2.0.13":
-  version "2.0.13"
-  resolved "https://registry.npmjs.org/@heroicons/react/-/react-2.0.13.tgz"
-  integrity sha512-iSN5XwmagrnirWlYEWNPdCDj9aRYVD/lnK3JlsC9/+fqGF80k8C7rl+1HCvBX0dBoagKqOFBs6fMhJJ1hOg1EQ==
+"@heroicons/react@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.1.3.tgz#78a2a7f504a7370283d07eabcddc7fec04f503db"
+  integrity sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==
 
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"