diff --git a/packages/react-app/src/collapsable-block.tsx b/packages/react-app/src/collapsable-block.tsx
index aded861e..89e11d90 100644
--- a/packages/react-app/src/collapsable-block.tsx
+++ b/packages/react-app/src/collapsable-block.tsx
@@ -66,40 +66,38 @@ export function CollapsableBlock(props: Props) {
   }, [props, props.children]);
 
   return (
-    <div>
-      <pre>
-        <LineStyled>
-          <CollapseButtonStyled onClick={() => setVisible(!isVisible)}>
-            <IconColumnStyled>
-              {isVisible ? (
-                <>
-                  <IconDown size="tiny" />
-                  <IconUp size="tiny" />
-                </>
-              ) : (
-                <>
-                  <IconUp size="tiny" />
-                  <IconDown size="tiny" />
-                </>
-              )}
-            </IconColumnStyled>
-            <LabelStyled>
-              {isVisible ? 'Hide ' : 'Show '}
-              {props.label}
-            </LabelStyled>
-          </CollapseButtonStyled>
-          {isVisible && (
-            <CopyButtonStyled
-              onClick={() => copyCode(content)}
-              icon={<IconCopy />}
-              size="small"
-              label="Copy"
-              display="icon"
-            />
-          )}
-        </LineStyled>
-        {isVisible && content ? <ContentWrapperStyled>{content}</ContentWrapperStyled> : <></>}
-      </pre>
-    </div>
+    <pre>
+      <LineStyled>
+        <CollapseButtonStyled onClick={() => setVisible(!isVisible)}>
+          <IconColumnStyled>
+            {isVisible ? (
+              <>
+                <IconDown size="tiny" />
+                <IconUp size="tiny" />
+              </>
+            ) : (
+              <>
+                <IconUp size="tiny" />
+                <IconDown size="tiny" />
+              </>
+            )}
+          </IconColumnStyled>
+          <LabelStyled>
+            {isVisible ? 'Hide ' : 'Show '}
+            {props.label}
+          </LabelStyled>
+        </CollapseButtonStyled>
+        {isVisible && (
+          <CopyButtonStyled
+            onClick={() => copyCode(content)}
+            icon={<IconCopy />}
+            size="small"
+            label="Copy"
+            display="icon"
+          />
+        )}
+      </LineStyled>
+      {isVisible && content ? <ContentWrapperStyled>{content}</ContentWrapperStyled> : <></>}
+    </pre>
   );
 }
diff --git a/packages/react-app/src/components/claim-list.tsx b/packages/react-app/src/components/claim-list.tsx
index d5945192..b7daad27 100644
--- a/packages/react-app/src/components/claim-list.tsx
+++ b/packages/react-app/src/components/claim-list.tsx
@@ -43,7 +43,7 @@ type Props = {
   questData: QuestModel;
   newClaim: number;
   challengeDeposit: TokenAmountModel;
-  questTotalBounty?: TokenAmountModel;
+  questTotalBounty?: TokenAmountModel | null;
 };
 
 export default function ClaimList({
@@ -134,14 +134,7 @@ export default function ClaimList({
                         <AmountFieldInput
                           id="amount"
                           label="Claimed amount"
-                          isLoading={
-                            !claim.claimedAmount.parsedAmount && questTotalBounty === undefined
-                          }
-                          value={
-                            claim.claimedAmount.parsedAmount || !questTotalBounty
-                              ? claim.claimedAmount
-                              : questTotalBounty
-                          }
+                          value={claim.claimedAmount}
                         />
                       ) : (
                         <Field label="Claimed amount">All available</Field>
diff --git a/packages/react-app/src/components/field-input/amount-field-input.tsx b/packages/react-app/src/components/field-input/amount-field-input.tsx
index b53d0e07..553689d0 100644
--- a/packages/react-app/src/components/field-input/amount-field-input.tsx
+++ b/packages/react-app/src/components/field-input/amount-field-input.tsx
@@ -221,7 +221,7 @@ function AmountFieldInput({
   };
 
   const amountField = (
-    <FieldInput label={amountLabel} isLoading={isLoading} wide={wide} compact={compact}>
+    <FieldInput label={amountLabel} wide={wide} compact={compact}>
       <AmountTokenWrapperStyled isEdit={isEdit} wide={wide}>
         {amount !== undefined &&
           (isEdit ? (
@@ -245,7 +245,6 @@ function AmountFieldInput({
   const tokenField = (
     <FieldInput
       label={tokenLabel}
-      isLoading={isLoading}
       wide={wide}
       compact={compact}
       tooltip="Token"
@@ -291,7 +290,7 @@ function AmountFieldInput({
       label={label}
       tooltip={tooltip}
       tooltipDetail={tooltipDetail}
-      isLoading={false}
+      isLoading={isLoading}
       wide={wide}
       compact
       direction={!!amountLabel || !!tokenLabel ? 'column' : 'row'}
diff --git a/packages/react-app/src/components/field-input/field-input.tsx b/packages/react-app/src/components/field-input/field-input.tsx
index 600b86c5..449b55df 100644
--- a/packages/react-app/src/components/field-input/field-input.tsx
+++ b/packages/react-app/src/components/field-input/field-input.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { IconTooltip } from './icon-tooltip';
 
 const FieldStyled = styled.div`
-  ${({ compact }: any) => (!compact ? `margin-bottom:${GUpx(2)}` : '')};
+  ${({ compact }: any) => (!compact ? `margin-bottom:${GUpx(1)}` : '')};
   ${({ isLoading, wide }: any) => (isLoading || wide ? `width: 100%;` : 'max-width: 100%;')};
 `;
 
@@ -30,7 +30,7 @@ const LineStyled = styled.div`
 
 const ContentWrapperStyled = styled.div`
   display: flex;
-  align-items: center;
+  align-items: ${({ align }: any) => align};
   ${(props: any) => (!props.compact ? 'min-height: 45px;' : '')}
   & > div {
     input {
@@ -38,6 +38,7 @@ const ContentWrapperStyled = styled.div`
     }
   }
   flex-direction: ${({ direction }: any) => direction};
+  padding-left: ${GUpx(0.5)};
 `;
 
 const SkeletonWrapperStyled = styled.div`
@@ -52,9 +53,10 @@ type Props = {
   tooltipDetail?: React.ReactNode;
   children: React.ReactNode;
   id?: string;
-  isLoading: boolean;
+  isLoading?: boolean;
   wide?: boolean;
   direction?: 'row' | 'column';
+  align?: 'center' | 'baseline' | 'flex-start' | 'flex-end' | 'unset';
 };
 
 export function FieldInput({
@@ -67,6 +69,7 @@ export function FieldInput({
   isLoading = false,
   wide = false,
   direction = 'row',
+  align = 'center',
 }: Props) {
   const theme = useTheme();
   const labelComponent = label && (
@@ -86,7 +89,7 @@ export function FieldInput({
             <Skeleton />
           </SkeletonWrapperStyled>
         ) : (
-          <ContentWrapperStyled compact={compact} wide={wide} direction={direction}>
+          <ContentWrapperStyled compact={compact} wide={wide} direction={direction} align={align}>
             {children}
           </ContentWrapperStyled>
         )}
diff --git a/packages/react-app/src/components/field-input/icon-tooltip.tsx b/packages/react-app/src/components/field-input/icon-tooltip.tsx
index e8fbfd35..e1c92f56 100644
--- a/packages/react-app/src/components/field-input/icon-tooltip.tsx
+++ b/packages/react-app/src/components/field-input/icon-tooltip.tsx
@@ -1,7 +1,7 @@
 import { Help, IconQuestion, useTheme } from '@1hive/1hive-ui';
 import { ReactNode } from 'react';
+import { GUpx } from 'src/utils/css.util';
 import styled from 'styled-components';
-import { Outset } from '../utils/spacer-util';
 
 // #region Styled
 
@@ -30,12 +30,15 @@ const TooltipWrapperStyled = styled.div`
 
 const HelpWrapperStyled = styled.div`
   width: 16px;
+  display: inline-block;
+  margin-left: ${GUpx()};
+  margin-right: ${GUpx(0.5)};
 `;
 
 // #endregion
 
 type Props = {
-  tooltip: string;
+  tooltip?: string;
   tooltipDetail?: ReactNode;
   icon?: ReactNode;
   children?: ReactNode;
@@ -44,18 +47,16 @@ type Props = {
 export const IconTooltip = ({ tooltip, tooltipDetail, icon, children }: Props) => {
   const theme = useTheme();
   return (
-    <Outset horizontal>
-      <HelpWrapperStyled className="btn-no-margin">
-        {tooltipDetail || children ? (
-          <Help hint={tooltip}>
-            <TooltipWrapperStyled color={theme.accentContent}>
-              {tooltipDetail ?? children}
-            </TooltipWrapperStyled>
-          </Help>
-        ) : (
-          <IconSpanStyled title={tooltip}>{icon ?? <IconQuestion size="tiny" />}</IconSpanStyled>
-        )}
-      </HelpWrapperStyled>
-    </Outset>
+    <HelpWrapperStyled className="btn-no-margin">
+      {tooltipDetail || children ? (
+        <Help hint={tooltip ?? tooltipDetail}>
+          <TooltipWrapperStyled color={theme.accentContent}>
+            {tooltipDetail ?? children}
+          </TooltipWrapperStyled>
+        </Help>
+      ) : (
+        <IconSpanStyled title={tooltip}>{icon ?? <IconQuestion size="tiny" />}</IconSpanStyled>
+      )}
+    </HelpWrapperStyled>
   );
 };
diff --git a/packages/react-app/src/components/field-input/text-field-input.tsx b/packages/react-app/src/components/field-input/text-field-input.tsx
index a253cc20..8cfde7b4 100644
--- a/packages/react-app/src/components/field-input/text-field-input.tsx
+++ b/packages/react-app/src/components/field-input/text-field-input.tsx
@@ -71,7 +71,12 @@ export default function TextFieldInput({
           content={value}
           markdownToJsxOptions={(o: any) => ({
             ...o,
+            wrapper: 'div',
+
             overrides: {
+              p: {
+                component: 'div',
+              },
               pre: {
                 component: CollapsableBlock,
                 props: {
diff --git a/packages/react-app/src/components/modals/execute-claim-modal.tsx b/packages/react-app/src/components/modals/execute-claim-modal.tsx
index cc288c73..88510341 100644
--- a/packages/react-app/src/components/modals/execute-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/execute-claim-modal.tsx
@@ -33,7 +33,7 @@ const OpenButtonWrapperStyled = styled.div`
 
 type Props = {
   claim: ClaimModel;
-  questTotalBounty?: TokenAmountModel;
+  questTotalBounty?: TokenAmountModel | null;
   onClose?: ModalCallback;
 };
 
@@ -135,6 +135,7 @@ export default function ExecuteClaimModal({ claim, questTotalBounty, onClose = n
                   loading ||
                   !scheduleTimeout ||
                   claim.state === ENUM_CLAIM_STATE.Challenged ||
+                  questTotalBounty ||
                   !walletAddress
                 }
               />
diff --git a/packages/react-app/src/components/modals/fund-modal.tsx b/packages/react-app/src/components/modals/fund-modal.tsx
index d202325a..335fa7b2 100644
--- a/packages/react-app/src/components/modals/fund-modal.tsx
+++ b/packages/react-app/src/components/modals/fund-modal.tsx
@@ -137,6 +137,12 @@ export default function FundModal({ quest, onClose = noop }: Props) {
         >
           <FormStyled id="form-fund" onSubmit={handleSubmit} ref={formRef}>
             <Outset gu16>
+              <AddressFieldInput
+                id="address"
+                label="Quest address"
+                value={quest.address}
+                isLoading={loading}
+              />
               <AmountFieldInputFormik
                 id="fundAmount"
                 isEdit
@@ -147,12 +153,6 @@ export default function FundModal({ quest, onClose = noop }: Props) {
                 isLoading={loading}
                 value={values.fundAmount}
               />
-              <AddressFieldInput
-                id="address"
-                label="Quest address"
-                value={quest.address}
-                isLoading={loading}
-              />
             </Outset>
           </FormStyled>
         </ModalBase>
diff --git a/packages/react-app/src/components/modals/resolve-challenge-modal.tsx b/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
index abf70cab..57cb69f8 100644
--- a/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/resolve-challenge-modal.tsx
@@ -25,6 +25,7 @@ import * as QuestService from '../../services/quest.service';
 import { Outset } from '../utils/spacer-util';
 import { DisputeModel } from '../../models/dispute.model';
 import TextFieldInput from '../field-input/text-field-input';
+import { IconTooltip } from '../field-input/icon-tooltip';
 
 // #region StyledComponents
 
@@ -65,7 +66,7 @@ const RulingInfoStyled = styled(Info)`
   width: 100%;
 `;
 
-const OnlySHWarn = styled(Info)`
+const OnlyStackholderWarnStyled = styled(Info)`
   padding: ${GUpx()};
   display: flex;
   align-items: center;
@@ -198,9 +199,22 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
             ) : (
               <>
                 Ruling in progress, please come back later...
-                <LinkStyled href={`https://celeste.1hive.org/#/disputes/${dispute.id}`}>
-                  See dispute
-                </LinkStyled>
+                {process.env.NODE_ENV === 'production' ? (
+                  <LinkStyled
+                    external
+                    href={
+                      process.env.NODE_ENV === 'production' &&
+                      `https://celeste.1hive.org/#/disputes/${dispute.id}`
+                    }
+                  >
+                    See dispute
+                  </LinkStyled>
+                ) : (
+                  <IconTooltip
+                    tooltipDetail={`This is a mocked celeste dispute with id ${dispute.id}`}
+                    key={dispute.id}
+                  />
+                )}
               </>
             )}
           </FinalRulingStyled>
@@ -233,10 +247,10 @@ export default function ResolveChallengeModal({ claim, onClose = noop }: Props)
       buttons={[
         <Fragment key="warnMessage">
           {isRuled && !isStackholder && (
-            <OnlySHWarn mode="warning">
+            <OnlyStackholderWarnStyled mode="warning">
               <IconCaution />
               <span> Only a stackholder of this challenge may resolve it</span>
-            </OnlySHWarn>
+            </OnlyStackholderWarnStyled>
           )}
         </Fragment>,
         <Button
diff --git a/packages/react-app/src/components/quest.tsx b/packages/react-app/src/components/quest.tsx
index 01ee4bd4..2c003178 100644
--- a/packages/react-app/src/components/quest.tsx
+++ b/packages/react-app/src/components/quest.tsx
@@ -27,7 +27,7 @@ import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 import ScheduleClaimModal from './modals/schedule-claim-modal';
 import FundModal from './modals/fund-modal';
 import ReclaimFundsModal from './modals/reclaim-funds-modal';
-import { DateFieldInputFormik } from './field-input/date-field-input';
+import DateFieldInput, { DateFieldInputFormik } from './field-input/date-field-input';
 import AmountFieldInput, { AmountFieldInputFormik } from './field-input/amount-field-input';
 import TextFieldInput from './field-input/text-field-input';
 import ClaimList from './claim-list';
@@ -368,7 +368,7 @@ export default function Quest({
                 tooltip="Quest Description"
                 tooltipDetail={
                   <>
-                    <u>The quest description should include:</u>
+                    <b>The quest description should include:</b>
                     <ul>
                       <li>Details about what the quest entails.</li>
                       <li>
@@ -417,16 +417,27 @@ export default function Quest({
                   wide
                 />
               )}
-              {questMode === ENUM_QUEST_VIEW_MODE.ReadDetail && claimDeposit !== null && (
-                <AmountFieldInput
-                  id="claimDeposit"
-                  label="Claim deposit"
-                  tooltip="Claim deposit"
-                  tooltipDetail="This amount will be staked when claiming a bounty. If the claim is successfully challenged, you will lose this deposit."
-                  value={claimDeposit}
-                  isLoading={loading || (!isEdit && !claimDeposit)}
-                  wide
-                />
+              {questMode === ENUM_QUEST_VIEW_MODE.ReadDetail && (
+                <>
+                  {claimDeposit !== null && (
+                    <AmountFieldInput
+                      id="claimDeposit"
+                      label="Claim deposit"
+                      tooltip="Claim deposit"
+                      tooltipDetail="This amount will be staked when claiming a bounty. If the claim is successfully challenged, you will lose this deposit."
+                      value={claimDeposit}
+                      isLoading={loading || (!isEdit && !claimDeposit)}
+                      wide
+                    />
+                  )}
+                  <DateFieldInput
+                    id="creationTime"
+                    label="Creation time"
+                    isLoading={loading}
+                    value={values.creationTime}
+                    wide
+                  />
+                </>
               )}
               <DateFieldInputFormik
                 id="expireTime"
@@ -459,16 +470,14 @@ export default function Quest({
         </TwoColumnStyled>
         {!loading && !isEdit && questData.address && (
           <>
-            {questMode === ENUM_QUEST_VIEW_MODE.ReadDetail &&
-              challengeDeposit &&
-              bounty !== null && (
-                <ClaimList
-                  newClaim={claimUpdated}
-                  questData={questData}
-                  questTotalBounty={bounty}
-                  challengeDeposit={challengeDeposit}
-                />
-              )}
+            {questMode === ENUM_QUEST_VIEW_MODE.ReadDetail && challengeDeposit && (
+              <ClaimList
+                newClaim={claimUpdated}
+                questData={questData}
+                questTotalBounty={bounty}
+                challengeDeposit={challengeDeposit}
+              />
+            )}
             {questMode !== ENUM_QUEST_VIEW_MODE.ReadSummary &&
               questData.address &&
               walletAddress &&
@@ -516,7 +525,6 @@ export default function Quest({
           } as QuestModel
         }
         onSubmit={(values, { setSubmitting }) => onQuestSubmit(values, setSubmitting)}
-        validateOnBlur
         validate={validate}
       >
         {({ values, handleChange, handleSubmit }) =>
diff --git a/packages/react-app/src/components/side-content-layout.tsx b/packages/react-app/src/components/side-content-layout.tsx
index 3f2d1fad..1768bdae 100644
--- a/packages/react-app/src/components/side-content-layout.tsx
+++ b/packages/react-app/src/components/side-content-layout.tsx
@@ -1,16 +1,21 @@
 import { useViewport } from '@1hive/1hive-ui';
-import React, { useEffect, useState } from 'react';
-import { GUpx } from 'src/utils/css.util';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS } from '../styles/breakpoints';
 
 const WrapperStyled = styled.div`
   display: grid;
   grid-template-areas: ${(props: any) =>
-    props.twoCol ? "'m m s'\n'm m s'\n'f f f'" : "'s s s'\n'm m m'\n'f f f'"};
+    props.isOneCol ? "'s s s'\n'm m m'\n'f f f'" : "'m m s'\n'm m s'\n'f f f'"};
   height: calc(100vh - 64px);
   overflow-y: auto;
   grid-template-columns: 1fr auto;
+  scroll-behavior: smooth;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 `;
 
 const SideBlockStyled = styled.div`
@@ -19,20 +24,23 @@ const SideBlockStyled = styled.div`
 
 const FooterStyled = styled.div`
   grid-area: f;
+  transition: all 5s linear;
 `;
 
 const ScrollViewStyled = styled.div`
-  overflow-x: auto;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
+  ${(props: any) =>
+    props.scrollable
+      ? `
+      overflow-x: auto;
+      ::-webkit-scrollbar {
+        display: none;
+      }
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+      height: calc(100vh - 64px);
+      `
+      : ''}
 
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-  height: calc(100vh - 64px);
-
-  ${(props: any) => (props.twoCol ? `padding: ${GUpx(1)} ${GUpx(4)};` : `padding: ${GUpx(1)}`)};
   grid-area: m;
 `;
 
@@ -44,17 +52,64 @@ type Props = {
 
 function SideContentLayout({ main, side, footer }: Props) {
   const { width: vw } = useViewport();
-  const [twoCol, setTwoCol] = useState(true);
+  const wrapperElement = document.getElementById('main-scroll');
+  const scrollRef = useRef<HTMLDivElement>();
+  const footerRef = useRef<HTMLDivElement>();
+  const [isOneCol, setIsOneCol] = useState(false);
+
+  useEffect(() => {
+    const handleWheelOnMain = (e: WheelEvent) => {
+      const scrollElement = scrollRef.current as HTMLElement;
+      if (scrollElement && wrapperElement) {
+        if (
+          Math.round(scrollElement.scrollHeight - scrollElement.scrollTop) >=
+            Math.round(scrollElement.clientHeight) &&
+          e.deltaY < 0
+        ) {
+          requestAnimationFrame(() =>
+            wrapperElement.scroll({
+              top: -footerRef.current!.clientHeight,
+              left: 0,
+              behavior: 'auto',
+            }),
+          );
+        }
+        if (
+          Math.round(scrollElement.scrollHeight - scrollElement.scrollTop) ===
+            Math.round(scrollElement.clientHeight) &&
+          wrapperElement.scrollTop - scrollElement.scrollTop <= 0 &&
+          e.deltaY > 0
+        ) {
+          requestAnimationFrame(() =>
+            wrapperElement.scroll({
+              top: footerRef.current!.clientHeight,
+              left: 0,
+              behavior: 'auto',
+            }),
+          );
+        }
+      }
+    };
+    if (scrollRef.current && footerRef.current && !isOneCol) {
+      scrollRef.current?.addEventListener('wheel', handleWheelOnMain);
+    } else {
+      scrollRef.current?.removeEventListener('wheel', handleWheelOnMain);
+    }
+    return () => scrollRef.current?.removeEventListener('wheel', handleWheelOnMain);
+  }, [scrollRef.current, footerRef.current, isOneCol]);
+
   useEffect(() => {
-    setTwoCol(vw >= BREAKPOINTS.large);
-  }, [vw]);
+    setIsOneCol(!side || vw < BREAKPOINTS.large);
+  }, [vw, side]);
 
   return (
     <>
-      <WrapperStyled twoCol={twoCol && side}>
-        <ScrollViewStyled id="scroll-view">{main}</ScrollViewStyled>
+      <WrapperStyled isOneCol={isOneCol} id="main-scroll">
+        <ScrollViewStyled scrollable={!isOneCol} id="scroll-view" ref={scrollRef}>
+          {main}
+        </ScrollViewStyled>
         {side && <SideBlockStyled>{side}</SideBlockStyled>}
-        <FooterStyled>{footer}</FooterStyled>
+        <FooterStyled ref={footerRef}>{footer}</FooterStyled>
       </WrapperStyled>
     </>
   );
diff --git a/packages/react-app/src/components/views/quest-detail.tsx b/packages/react-app/src/components/views/quest-detail.tsx
index 84db66e0..a5683f45 100644
--- a/packages/react-app/src/components/views/quest-detail.tsx
+++ b/packages/react-app/src/components/views/quest-detail.tsx
@@ -5,8 +5,14 @@ import { QuestModel } from 'src/models/quest.model';
 import { usePageContext } from 'src/contexts/page.context';
 import { fetchQuest } from 'src/services/quest.service';
 import { useToast } from '@1hive/1hive-ui';
+import styled from 'styled-components';
+import { GUpx } from 'src/utils/css.util';
 import Quest from '../quest';
-import { Outset } from '../utils/spacer-util';
+
+const QuestDetailWrapperrStyled = styled.div`
+  padding: ${GUpx()};
+  min-height: calc(100vh - 64px);
+`;
 
 export default function QuestDetail() {
   const { setPage } = usePageContext();
@@ -25,7 +31,7 @@ export default function QuestDetail() {
   }, [id]);
 
   return (
-    <Outset>
+    <QuestDetailWrapperrStyled>
       <>
         {quest ? (
           <Quest dataState={{ questData: quest }} questMode={ENUM_QUEST_VIEW_MODE.ReadDetail} />
@@ -38,6 +44,6 @@ export default function QuestDetail() {
           </>
         )}
       </>
-    </Outset>
+    </QuestDetailWrapperrStyled>
   );
 }
diff --git a/packages/react-app/src/components/views/quest-list.tsx b/packages/react-app/src/components/views/quest-list.tsx
index 0913ba30..f3bcae23 100644
--- a/packages/react-app/src/components/views/quest-list.tsx
+++ b/packages/react-app/src/components/views/quest-list.tsx
@@ -121,7 +121,7 @@ export default function QuestList() {
       pullDownToRefreshContent={<h3 className="center">&#8595; Pull down to refresh</h3>}
       releaseToRefreshContent={<h3 className="center">&#8593; Release to refresh</h3>}
       scrollableTarget="scroll-view"
-      scrollThreshold="50px"
+      scrollThreshold={0.5}
     >
       <div>
         {quests.map((x: QuestModel) => (
diff --git a/packages/react-app/src/models/quest.model.ts b/packages/react-app/src/models/quest.model.ts
index 225d33e4..73a056d5 100644
--- a/packages/react-app/src/models/quest.model.ts
+++ b/packages/react-app/src/models/quest.model.ts
@@ -9,6 +9,7 @@ export type QuestModel = {
   fallbackAddress?: string;
 
   // Computed
+  creationTime?: Date;
   address?: string;
   bounty?: TokenAmountModel;
   rewardToken?: TokenModel | string;
diff --git a/packages/react-app/src/services/quest.service.ts b/packages/react-app/src/services/quest.service.ts
index 1d33d549..afe492af 100644
--- a/packages/react-app/src/services/quest.service.ts
+++ b/packages/react-app/src/services/quest.service.ts
@@ -54,6 +54,7 @@ async function mapQuest(questEntity: any) {
       detailsRefIpfs: toAscii(questEntity.questDetailsRef),
       rewardToken: await getTokenInfo(questEntity.questRewardTokenAddress),
       expireTime: new Date(questEntity.questExpireTimeSec * 1000), // sec to Ms
+      creationTime: new Date(questEntity.creationTimestamp * 1000), // sec to Ms
     } as QuestModel;
     quest = processQuestState(quest);
     if (!quest.detailsRefIpfs) quest.description = '[No description]';