diff --git a/packages/react-app/src/components/claim-list.tsx b/packages/react-app/src/components/claim-list.tsx
index a1a47a29..d609f9f7 100644
--- a/packages/react-app/src/components/claim-list.tsx
+++ b/packages/react-app/src/components/claim-list.tsx
@@ -1,4 +1,4 @@
-import { Accordion } from '@1hive/1hive-ui';
+import { Accordion, Box } from '@1hive/1hive-ui';
 import { ClaimModel } from 'src/models/claim.model';
 import { useWallet } from 'src/contexts/wallet.context';
 import styled from 'styled-components';
@@ -8,6 +8,7 @@ import { TokenAmountModel } from 'src/models/token-amount.model';
 import { QuestModel } from 'src/models/quest.model';
 import { useEffect, useState } from 'react';
 import { Logger } from 'src/utils/logger';
+import { getObjectFromIpfsSafe } from 'src/services/ipfs.service';
 import ChallengeModal from './modals/challenge-modal';
 import ResolveChallengeModal from './modals/resolve-challenge-modal';
 import { ChildSpacer, Outset } from './utils/spacer-util';
@@ -39,6 +40,11 @@ const HeaderStyled = styled.h1`
   margin-left: ${GUpx()};
 `;
 
+const BoxStyled = styled(Box)`
+  display: flex;
+  justify-content: space-around;
+`;
+
 // #endregion
 
 type Props = {
@@ -55,7 +61,9 @@ export default function ClaimList({
   questTotalBounty,
 }: Props) {
   const { walletAddress } = useWallet();
-  const [claims, setClaims] = useState<ClaimModel[]>();
+  const [claims, setClaims] = useState<ClaimModel[]>([
+    { state: ENUM_CLAIM_STATE.None } as ClaimModel,
+  ]);
 
   useEffect(() => {
     fetchClaims();
@@ -71,7 +79,17 @@ export default function ClaimList({
 
   const fetchClaims = async () => {
     const result = await QuestService.fetchQuestClaims(questData);
-    setClaims(result);
+    setClaims(result); // Fetch visible data
+    setClaims(
+      await Promise.all(
+        result.map(async (claim) => ({
+          ...claim,
+          evidence: claim.evidenceIpfsHash
+            ? await getObjectFromIpfsSafe(claim.evidenceIpfsHash)
+            : 'No evidence',
+        })),
+      ),
+    ); // Fetch evidence wich is currently hidden in accordion
     return result;
   };
 
@@ -89,75 +107,82 @@ export default function ClaimList({
 
   return (
     <WrapperStyled>
-      {!!claims?.length && (
-        <>
-          <ClaimHeaderStyled>
-            <HeaderStyled>Claims</HeaderStyled>
-            <HelpTooltip tooltip="A claim includes the proof of the quest's completion." />
-          </ClaimHeaderStyled>
-          <Accordion
-            items={claims.map((claim: ClaimModel) => {
-              let actionButton;
-              if (claim.state === ENUM_CLAIM_STATE.Scheduled) {
-                if (walletAddress === claim.playerAddress)
-                  actionButton = (
-                    <ExecuteClaimModal
-                      claim={claim}
-                      questTotalBounty={questTotalBounty}
-                      onClose={fetchNewClaimChanges}
-                    />
-                  );
-                else
-                  actionButton = (
-                    <ChallengeModal
-                      claim={claim}
-                      challengeDeposit={challengeDeposit}
-                      onClose={fetchNewClaimChanges}
-                    />
-                  );
-              } else if (claim.state === ENUM_CLAIM_STATE.Challenged) {
+      <ClaimHeaderStyled>
+        <HeaderStyled>Claims</HeaderStyled>
+        <HelpTooltip tooltip="A claim includes the proof of the quest's completion." />
+      </ClaimHeaderStyled>
+      {claims?.length ? (
+        <Accordion
+          items={claims.map((claim: ClaimModel) => {
+            let actionButton;
+            if (claim.state === ENUM_CLAIM_STATE.Scheduled) {
+              if (walletAddress === claim.playerAddress)
                 actionButton = (
-                  <ResolveChallengeModal claim={claim} onClose={fetchNewClaimChanges} />
+                  <ExecuteClaimModal
+                    claim={claim}
+                    questTotalBounty={questTotalBounty}
+                    onClose={fetchNewClaimChanges}
+                  />
                 );
-              } else if (!claim.state) Logger.error(`Claim doesn't have state`, { claim });
-              return [
-                <div className="wide">
-                  <Outset>
-                    <ChildSpacer size={16} justify="start" align="center" buttonEnd>
-                      <FieldInput label="Status">
-                        <StateTag state={claim.state ?? ''} className="pl-0" />
-                      </FieldInput>
-                      <AddressFieldInput
-                        id="playerAddress"
-                        value={claim.playerAddress}
-                        label={walletAddress === claim.playerAddress ? 'You' : 'Claiming player'}
-                      />
-                      {claim.claimedAmount.parsedAmount ? (
-                        <AmountFieldInput
-                          id="amount"
-                          label="Claimed amount"
-                          value={claim.claimedAmount}
-                        />
-                      ) : (
-                        <FieldInput label="Claimed amount">All available</FieldInput>
-                      )}
-                      {walletAddress && actionButton}
-                    </ChildSpacer>
-                  </Outset>
-                </div>,
-                <Outset gu8>
-                  <TextFieldInput
-                    id="evidence"
-                    value={claim.evidence}
-                    isMarkDown
-                    wide
-                    label="Evidence of completion"
+              else
+                actionButton = (
+                  <ChallengeModal
+                    claim={claim}
+                    challengeDeposit={challengeDeposit}
+                    onClose={fetchNewClaimChanges}
                   />
-                </Outset>,
-              ];
-            })}
-          />
-        </>
+                );
+            } else if (claim.state === ENUM_CLAIM_STATE.Challenged) {
+              actionButton = <ResolveChallengeModal claim={claim} onClose={fetchNewClaimChanges} />;
+            } else if (!claim.state) Logger.error(`Claim doesn't have state`, { claim });
+            return [
+              <div className="wide">
+                <Outset>
+                  <ChildSpacer size={16} justify="start" align="center" buttonEnd>
+                    <FieldInput label="Status" isLoading={claim.state === ENUM_CLAIM_STATE.None}>
+                      <StateTag state={claim.state ?? ''} className="pl-0" />
+                    </FieldInput>
+                    <AddressFieldInput
+                      id="playerAddress"
+                      value={claim.playerAddress}
+                      label={walletAddress === claim.playerAddress ? 'You' : 'Claiming player'}
+                      isLoading={!claim.playerAddress}
+                    />
+                    {claim.claimedAmount?.parsedAmount ? (
+                      <AmountFieldInput
+                        id="amount"
+                        label="Claimed amount"
+                        value={claim.claimedAmount}
+                      />
+                    ) : (
+                      <FieldInput
+                        label="Claimed amount"
+                        isLoading={claim.state === ENUM_CLAIM_STATE.None}
+                      >
+                        All available
+                      </FieldInput>
+                    )}
+                    {walletAddress && actionButton}
+                  </ChildSpacer>
+                </Outset>
+              </div>,
+              <Outset gu8>
+                <TextFieldInput
+                  id="evidence"
+                  value={claim.evidence}
+                  isMarkDown
+                  wide
+                  label="Evidence of completion"
+                  isLoading={!claim.evidence}
+                />
+              </Outset>,
+            ];
+          })}
+        />
+      ) : (
+        <BoxStyled>
+          <i>No claims</i>
+        </BoxStyled>
       )}
     </WrapperStyled>
   );
diff --git a/packages/react-app/src/components/dashboard.tsx b/packages/react-app/src/components/dashboard.tsx
index 5222228a..6740a3c2 100644
--- a/packages/react-app/src/components/dashboard.tsx
+++ b/packages/react-app/src/components/dashboard.tsx
@@ -22,7 +22,7 @@ const BoxStyled = styled.div`
 const TextStyled = styled.span`
   color: ${({ theme }: any) => theme.positive};
   font-weight: bold !important;
-  ${textStyle('title3')};
+  ${textStyle('title2')};
 `;
 
 const SpacerStyled = styled.div`
@@ -62,14 +62,19 @@ export default function Dashboard() {
           tooltip="Total of the quest bounties converted into USD"
           isLoading={!dashboardModel}
         >
-          <TextStyled theme={theme}>$ {dashboardModel?.totalFunds}</TextStyled>
+          <TextStyled theme={theme}>
+            {dashboardModel?.totalFunds?.toLocaleString('en-US', {
+              style: 'currency',
+              currency: 'USD',
+            })}
+          </TextStyled>
         </FieldInput>
         <FieldInput
           label={<LabelStyled>Open Quests</LabelStyled>}
           tooltip="All the quests that are currently not expired or closed"
           isLoading={!dashboardModel}
         >
-          <TextStyled theme={theme}>{dashboardModel?.questCount}</TextStyled>
+          <TextStyled theme={theme}>{dashboardModel?.questCount.toLocaleString()}</TextStyled>
         </FieldInput>
         <SpacerStyled>
           {walletAddress && <QuestModal questMode={ENUM_QUEST_VIEW_MODE.Create} />}
diff --git a/packages/react-app/src/components/field-input/address-field-input.tsx b/packages/react-app/src/components/field-input/address-field-input.tsx
index d2e78ea5..6ac14896 100644
--- a/packages/react-app/src/components/field-input/address-field-input.tsx
+++ b/packages/react-app/src/components/field-input/address-field-input.tsx
@@ -7,12 +7,12 @@ import { FieldInput } from './field-input';
 // #region Styled
 
 const TextInputStyled = styled(TextInput)`
-  border-radius: 8px;
+  border-radius: 12px;
   padding-right: 42px;
 `;
 
 const EthIdenticonStyled = styled(EthIdenticon)`
-  border-radius: 0 8px 8px 0;
+  border-radius: 0 12px 12px 0;
   padding: 0;
 `;
 
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 7db2df1d..a5d9481a 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
@@ -11,7 +11,6 @@ import { connect, FormikContextType } from 'formik';
 import { noop } from 'lodash-es';
 import React, { ReactNode, useEffect, useState, useRef, Fragment } from 'react';
 import { NETWORK_TOKENS } from 'src/constants';
-import { useWallet } from 'src/contexts/wallet.context';
 import { TokenAmountModel } from 'src/models/token-amount.model';
 import { TokenModel } from 'src/models/token.model';
 import { getNetwork } from 'src/networks';
@@ -128,7 +127,6 @@ function AmountFieldInput({
   const [token, setToken] = useState<TokenModel | undefined>(value?.token);
   const [availableTokens, setAvailableTokens] = useState<TokenModel[]>([]);
   const [_hasFocused, _setHasFocused] = useState<boolean>();
-  const { walletAddress } = useWallet();
   const tokenInputId = tokenEditable ? id : `token-${id}`; // Handle label for
   const amountInputId = !tokenEditable ? id : `amount-${id}`; // Handle label for
 
@@ -138,30 +136,28 @@ function AmountFieldInput({
     hasFocusedRef.current = data;
     _setHasFocused(data);
   };
-
   const autoCompleteRef: React.Ref<any> = useRef(null);
+
+  useEffect(() => {
+    fetchAvailableTokens();
+  }, []);
+
   const handleFocusIn = (e: FocusEvent) => {
-    if (
-      document.activeElement === autoCompleteRef.current &&
-      walletAddress &&
-      isEdit &&
-      tokenEditable
-    ) {
+    if (document.activeElement === autoCompleteRef.current && isEdit && tokenEditable) {
       setHasFocused(true);
-      fetchAvailableTokens();
     } else if (document.activeElement !== autoCompleteRef.current && hasFocusedRef.current) {
-      formik?.setFieldTouched(id, true);
-      formik?.handleBlur(e);
+      formik?.handleBlur({ ...e, target: { id, name: id } });
       setHasFocused(false);
     }
   };
+
   useEffect(() => {
     if (!token) document.addEventListener('focusin', handleFocusIn);
     return () => document.removeEventListener('focusin', handleFocusIn);
-  }, [walletAddress, isEdit, tokenEditable, token]);
+  }, [isEdit, tokenEditable, token]);
 
   useEffect(() => {
-    if (availableTokens.length) {
+    if (availableTokens.length && _hasFocused) {
       if (searchTerm && isAddress(searchTerm)) {
         setTokens([]);
         getTokenInfo(searchTerm)
@@ -178,7 +174,7 @@ function AmountFieldInput({
         );
       }
     }
-  }, [searchTerm, availableTokens]);
+  }, [searchTerm, availableTokens, _hasFocused]);
 
   useEffect(() => {
     if (!isEdit) {
@@ -203,7 +199,7 @@ function AmountFieldInput({
   const onAmountChange = (e: any) => {
     const newAmount = e.target.value;
     setAmount(newAmount);
-    if (token && e.target.value !== '') {
+    if (token && newAmount !== '') {
       applyChanges({
         token: {
           ...token,
@@ -232,7 +228,6 @@ function AmountFieldInput({
     if (formik) formik.setFieldValue(id, nextValue);
     else onChange(nextValue);
   };
-
   const amountField = (
     <FieldInput key={`amountField${amountLabel}`} label={amountLabel} wide={wide} compact={compact}>
       <AmountTokenWrapperStyled isEdit={isEdit} wide={wide}>
@@ -244,6 +239,9 @@ function AmountFieldInput({
               onChange={onAmountChange}
               placeHolder={placeHolder}
               onBlur={(e: React.FocusEvent) => {
+                const el = e.target as HTMLInputElement;
+                if (el.value === '') el.value = '0';
+                onAmountChange(e);
                 formik?.setFieldTouched(id, true);
                 formik?.handleBlur(e);
               }}
@@ -277,7 +275,7 @@ function AmountFieldInput({
             onSelect={onTokenChange}
             ref={autoCompleteRef}
             onBlur={(e: FocusEvent) => formik?.handleBlur(e)}
-            placeholder="Search name or paste address"
+            placeholder={availableTokens.length ? 'Search name or paste address' : 'Loading tokens'}
             wide={wide}
             renderSelected={(i: number) => (
               <Fragment key={tokens[i].token}>{tokens[i].name}</Fragment>
@@ -312,6 +310,7 @@ function AmountFieldInput({
       compact
       direction={!!amountLabel || !!tokenLabel ? 'column' : 'row'}
       error={error}
+      className={!isEdit ? 'fit-content' : 'dd'}
     >
       {reversed ? [tokenField, amountField] : [amountField, tokenField]}
     </FieldInput>
diff --git a/packages/react-app/src/components/field-input/checkbox-field-input.tsx b/packages/react-app/src/components/field-input/checkbox-field-input.tsx
index f04cb50c..8170aaa2 100644
--- a/packages/react-app/src/components/field-input/checkbox-field-input.tsx
+++ b/packages/react-app/src/components/field-input/checkbox-field-input.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@1hive/1hive-ui';
 import { noop } from 'lodash-es';
-import { ReactNode } from 'react';
+import { FocusEventHandler, ReactNode } from 'react';
 import { GUpx } from 'src/utils/style.util';
 import styled from 'styled-components';
 import { FieldInput } from './field-input';
@@ -99,6 +99,7 @@ type Props = {
   isLoading?: boolean;
   label?: string;
   onChange?: Function;
+  handleBlur?: FocusEventHandler<HTMLInputElement>;
   value?: boolean;
   tooltip?: ReactNode;
   compact?: boolean;
@@ -115,6 +116,7 @@ export default function CheckboxFieldInput({
   compact = false,
   onChange = noop,
   disabled = false,
+  handleBlur = noop,
 }: Props) {
   const theme = useTheme();
   return (
@@ -126,6 +128,7 @@ export default function CheckboxFieldInput({
           name={id}
           value={id}
           checked={value}
+          onBlur={handleBlur}
           disabled={disabled || !isEdit}
           onChange={(e) => onChange(e)}
         />
diff --git a/packages/react-app/src/components/field-input/date-field-input.tsx b/packages/react-app/src/components/field-input/date-field-input.tsx
index 61762854..94111005 100644
--- a/packages/react-app/src/components/field-input/date-field-input.tsx
+++ b/packages/react-app/src/components/field-input/date-field-input.tsx
@@ -53,7 +53,7 @@ type Props = {
   compact?: boolean;
   wide?: boolean;
   formik?: any;
-  onBlur?: FocusEventHandler<HTMLInputElement> & Function;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
   error?: string | false;
 };
 
diff --git a/packages/react-app/src/components/field-input/help-tooltip.tsx b/packages/react-app/src/components/field-input/help-tooltip.tsx
index a901ad3c..12463da5 100644
--- a/packages/react-app/src/components/field-input/help-tooltip.tsx
+++ b/packages/react-app/src/components/field-input/help-tooltip.tsx
@@ -50,7 +50,7 @@ export const HelpTooltip = ({ tooltip, children }: Props) => {
         onMouseLeave={handleLeave}
         ref={wrapperRef}
       >
-        <Help hint={tooltip}>
+        <Help hint="">
           <TooltipWrapperStyled color={theme.accentContent}>
             {children ?? tooltip}
           </TooltipWrapperStyled>
diff --git a/packages/react-app/src/components/main-view.tsx b/packages/react-app/src/components/main-view.tsx
index 973bc3cd..ea4fa12b 100644
--- a/packages/react-app/src/components/main-view.tsx
+++ b/packages/react-app/src/components/main-view.tsx
@@ -31,25 +31,6 @@ const ContentWrapperStyled = styled.div<{
 const ScrollViewStyled = styled.div`
   height: calc(100vh - 80px); // Minus header height
   overflow-y: auto;
-  /* custom scrollbar */
-  &::-webkit-scrollbar {
-    width: 20px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #4a4a4a;
-    border-radius: 20px;
-    border: 6px solid transparent;
-    background-clip: content-box;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: #a8bbbf;
-  }
 `;
 
 // #endregion
diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx
index aff77ddc..2bb44d3f 100644
--- a/packages/react-app/src/components/modals/challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/challenge-modal.tsx
@@ -34,12 +34,6 @@ const OpenButtonStyled = styled(Button)`
   width: fit-content;
 `;
 
-const HeaderStyled = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`;
-
 const OpenButtonWrapperStyled = styled.div`
   display: flex;
   flex-direction: column;
@@ -268,12 +262,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
   return (
     <ModalBase
       id="challenge-modal"
-      title={
-        <HeaderStyled>
-          <h1>Challenge quests</h1>
-          <HelpTooltip tooltip="A challenge allows you to deny a claim. It will be raised to Celeste and disputable voting will be used to determine the validity of this challenge." />
-        </HeaderStyled>
-      }
+      title="Challenge quests"
       openButton={
         <OpenButtonWrapperStyled>
           {buttonLabel && (
@@ -289,6 +278,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
           {!loading && challengeTimeout === false && claim.executionTimeMs && (
             <Timer end={new Date(claim.executionTimeMs)} />
           )}
+          <HelpTooltip tooltip="A challenge allows you to deny a claim. It will be raised to Celeste and disputable voting will be used to determine the validity of this challenge." />
         </OpenButtonWrapperStyled>
       }
       buttons={[
@@ -358,8 +348,8 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
             );
           }
         }}
+        validateOnChange
         validate={validate}
-        validateOnBlur
       >
         {({ values, handleSubmit, handleChange, errors, touched, handleBlur }) => (
           <FormStyled id="form-challenge" onSubmit={handleSubmit} ref={formRef}>
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 95d11acb..cb3b3f63 100644
--- a/packages/react-app/src/components/modals/execute-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/execute-claim-modal.tsx
@@ -1,4 +1,4 @@
-import { Button, IconCoin, Field, Timer } from '@1hive/1hive-ui';
+import { Button, IconCoin, Timer } from '@1hive/1hive-ui';
 import { noop, uniqueId } from 'lodash-es';
 import { ReactNode, useEffect, useState } from 'react';
 import { ENUM_CLAIM_STATE, ENUM, ENUM_TRANSACTION_STATUS } from 'src/constants';
@@ -14,6 +14,7 @@ import { AmountFieldInputFormik } from '../field-input/amount-field-input';
 import { Outset } from '../utils/spacer-util';
 import ModalBase, { ModalCallback } from './modal-base';
 import { AddressFieldInput } from '../field-input/address-field-input';
+import { FieldInput } from '../field-input/field-input';
 
 // #region StyledComponents
 
@@ -132,9 +133,9 @@ export default function ExecuteClaimModal({ claim, questTotalBounty, onClose = n
         openButton={
           <OpenButtonWrapperStyled>
             {!loading && !scheduleTimeout && claim.executionTimeMs ? (
-              <Field label="Claimable in">
+              <FieldInput label="Claimable in">
                 <Timer end={new Date(claim.executionTimeMs)} />
-              </Field>
+              </FieldInput>
             ) : (
               <OpenButtonStyled
                 onClick={() => setOpened(true)}
diff --git a/packages/react-app/src/components/modals/fund-modal.tsx b/packages/react-app/src/components/modals/fund-modal.tsx
index 8f04e2e1..1947f663 100644
--- a/packages/react-app/src/components/modals/fund-modal.tsx
+++ b/packages/react-app/src/components/modals/fund-modal.tsx
@@ -121,8 +121,8 @@ export default function FundModal({ quest, onClose = noop }: Props) {
           fundModalTx(values, setSubmitting);
         }
       }}
+      validateOnChange
       validate={validate}
-      validateOnBlur
     >
       {({ values, handleSubmit, handleChange, touched, errors }) => (
         <ModalBase
diff --git a/packages/react-app/src/components/modals/modal-base.tsx b/packages/react-app/src/components/modals/modal-base.tsx
index a648f262..19dd747b 100644
--- a/packages/react-app/src/components/modals/modal-base.tsx
+++ b/packages/react-app/src/components/modals/modal-base.tsx
@@ -1,6 +1,6 @@
 import { Modal, ScrollView, textStyle } from '@1hive/1hive-ui';
 import { noop } from 'lodash-es';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { ENUM_TRANSACTION_STATUS } from 'src/constants';
 import { useTransactionContext } from 'src/contexts/transaction.context';
 import { GUpx } from 'src/utils/style.util';
@@ -25,7 +25,6 @@ const ModalStyled = styled(Modal)`
 
 const ScrollViewStyled = styled(ScrollView)`
   overflow: auto;
-  justify-content: center;
   max-height: calc(60vh) !important;
 `;
 
@@ -38,7 +37,7 @@ type Props = {
   onClose?: (_success: boolean) => void;
   isOpen: boolean;
   css?: React.CSSProperties;
-  size?: 'small' | 'normal';
+  size?: 'small' | 'normal' | 'large';
 };
 
 export default function ModalBase({
@@ -54,6 +53,16 @@ export default function ModalBase({
 }: Props) {
   const openButtonId = `open-${id}`;
   const { transaction, setTransaction } = useTransactionContext();
+  const width = useMemo(() => {
+    switch (size) {
+      case 'small':
+        return 500;
+      case 'large':
+        return 1200;
+      default:
+        return 800;
+    }
+  }, [size]);
   useEffect(() => {
     if (isOpen) {
       // Clear tx if a tx is still there and already completed
@@ -108,9 +117,7 @@ export default function ModalBase({
       <ModalStyled
         visible={isOpen}
         onClose={(e: any) => handleOnClose(e)}
-        width={(viewport: VisualViewport) =>
-          Math.min(viewport.width - 16, size === 'small' ? 500 : 1200)
-        }
+        width={(viewport: VisualViewport) => Math.min(viewport.width - 16, width)}
         style={css}
         id={id}
         tabIndex="-1"
diff --git a/packages/react-app/src/components/modals/quest-modal.tsx b/packages/react-app/src/components/modals/quest-modal.tsx
index ec966144..380f859f 100644
--- a/packages/react-app/src/components/modals/quest-modal.tsx
+++ b/packages/react-app/src/components/modals/quest-modal.tsx
@@ -3,7 +3,6 @@ import { noop } from 'lodash-es';
 import { useEffect, useState } from 'react';
 import { ENUM_QUEST_STATE, ENUM_QUEST_VIEW_MODE } from 'src/constants';
 import { QuestModel } from 'src/models/quest.model';
-import { GUpx } from 'src/utils/style.util';
 import styled from 'styled-components';
 import * as QuestService from 'src/services/quest.service';
 import { IN_A_WEEK_IN_MS } from 'src/utils/date.utils';
@@ -14,10 +13,6 @@ import { useQuestsContext } from '../../contexts/quests.context';
 
 // #region StyledComponents
 
-const QuestActionButtonStyled = styled(Button)`
-  margin: ${GUpx()};
-`;
-
 const ButtonLinkStyled = styled(Button)`
   border: none;
   box-shadow: none;
@@ -128,18 +123,6 @@ export default function QuestModal({
           />
         )
       }
-      buttons={[
-        (questMode === ENUM_QUEST_VIEW_MODE.Create ||
-          questMode === ENUM_QUEST_VIEW_MODE.Update) && (
-          <QuestActionButtonStyled
-            key="btn-save"
-            label="Create"
-            mode="positive"
-            type="submit"
-            form={`form-quest-form-${data?.address ?? 'new'}`}
-          />
-        ),
-      ]}
       isOpen={opened}
       onClose={closeModal}
     >
diff --git a/packages/react-app/src/components/modals/schedule-claim-modal.tsx b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
index 558fcccd..6e459d30 100644
--- a/packages/react-app/src/components/modals/schedule-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
@@ -4,7 +4,7 @@ import { useState, useRef } from 'react';
 import { GiBroadsword } from 'react-icons/gi';
 import styled from 'styled-components';
 import { Formik, Form } from 'formik';
-import { ENUM_TRANSACTION_STATUS, ENUM } from 'src/constants';
+import { ENUM_TRANSACTION_STATUS, ENUM, DEFAULT_CLAIM_EXECUTION_DELAY_MS } from 'src/constants';
 import { TokenAmountModel } from 'src/models/token-amount.model';
 import { ClaimModel } from 'src/models/claim.model';
 import { useTransactionContext } from 'src/contexts/transaction.context';
@@ -17,17 +17,20 @@ import { computeTransactionErrorMessage } from 'src/utils/errors.util';
 import { FormErrors } from 'src/models/form-errors';
 import ModalBase, { ModalCallback } from './modal-base';
 import * as QuestService from '../../services/quest.service';
-import { AmountFieldInputFormik } from '../field-input/amount-field-input';
+import AmountFieldInput, { AmountFieldInputFormik } from '../field-input/amount-field-input';
 import TextFieldInput from '../field-input/text-field-input';
 import { ChildSpacer, Outset } from '../utils/spacer-util';
 import CheckboxFieldInput from '../field-input/checkbox-field-input';
 import { AddressFieldInput } from '../field-input/address-field-input';
 import { WalletBallance } from '../wallet-balance';
+import Stepper from '../utils/stepper';
 
 // #region StyledComponents
 
 const FormStyled = styled(Form)`
   width: 100%;
+  padding: ${GUpx()};
+  padding-bottom: 0;
 `;
 
 const OpenButtonStyled = styled(Button)`
@@ -35,8 +38,9 @@ const OpenButtonStyled = styled(Button)`
   width: fit-content;
 `;
 
-const LineStyled = styled.div`
+const WrapperStyled = styled.div`
   display: flex;
+  flex-direction: column;
   align-content: center;
 `;
 
@@ -202,31 +206,6 @@ export default function ScheduleClaimModal({
           mode="positive"
         />
       }
-      buttons={[
-        <WalletBallance
-          key="WalletBallance-claimDeposit"
-          askedTokenAmount={claimDeposit}
-          setIsEnoughBalance={setIsEnoughBalance}
-        />,
-        <AmountFieldInputFormik
-          key="claimDeposit"
-          id="claimDeposit"
-          label="Claim Deposit"
-          tooltip="This amount will be staked when claiming a bounty. If the claim is challenged and ruled in favor of the challenger, you will lose this deposit."
-          isLoading={loading}
-          value={claimDeposit}
-          compact
-        />,
-        <Button
-          key="confirmButton"
-          icon={<GiBroadsword />}
-          label="Schedule claim"
-          mode="positive"
-          type="submit"
-          form="form-claim"
-          disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid}
-        />,
-      ]}
       onClose={closeModal}
       isOpen={opened}
     >
@@ -242,75 +221,123 @@ export default function ScheduleClaimModal({
         onSubmit={(values, { setSubmitting }) => {
           onClaimSubmit(values, setSubmitting);
         }}
-        validateOnBlur
+        validateOnChange
         validate={validate}
       >
-        {({ values, handleSubmit, handleChange, handleBlur, errors, touched }) => (
+        {({ values, handleSubmit, handleChange, handleBlur, errors, touched, setTouched }) => (
           <FormStyled id="form-claim" onSubmit={handleSubmit} ref={formRef}>
-            <Outset gu16>
-              <ChildSpacer size={16} justify="start" vertical>
-                <TextFieldInput
-                  id="evidence"
-                  isEdit
-                  label="Evidence of completion"
-                  tooltip="The necessary evidence that will confirm the completion of the quest. Make sure there is enough evidence as it will be useful if this claim is challenged in the future."
-                  isLoading={loading}
-                  value={values.evidence}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  error={touched.evidence && errors.evidence}
-                  multiline
-                  wide
-                  rows={5}
-                  compact
-                  isMarkDown
-                />
-                <LineStyled>
-                  <Outset horizontal>
-                    <AmountFieldInputFormik
-                      id="questBounty"
-                      label="Available bounty"
+            <ChildSpacer size={16} justify="start" vertical>
+              <Stepper
+                onNext={(currentStep: number, _isSubmitStep: boolean) => {
+                  const stepErrors = validate(values);
+
+                  if (currentStep === 0) {
+                    setTouched({ evidence: true });
+                    return !stepErrors.evidence;
+                  }
+                  if (currentStep === 1) {
+                    return !(stepErrors.claimedAmount || stepErrors.playerAddress);
+                  }
+                  return true;
+                }}
+                submitButton={
+                  <>
+                    <AmountFieldInput
+                      key="claimDeposit"
+                      id="claimDeposit"
+                      label="Claim Deposit"
+                      tooltip="This amount will be staked when claiming a bounty. If the claim is challenged and ruled in favor of the challenger, you will lose this deposit."
                       isLoading={loading}
-                      value={questTotalBounty}
+                      value={claimDeposit}
+                      compact
                     />
-                  </Outset>
-                  <Outset horizontal>
-                    <CheckboxFieldInput
-                      id="claimAll"
-                      label="Claim all"
-                      onChange={handleChange}
-                      value={values.claimAll}
-                      isLoading={loading}
-                      isEdit
+                    <WalletBallance
+                      key="WalletBallance-claimDeposit"
+                      askedTokenAmount={claimDeposit}
+                      setIsEnoughBalance={setIsEnoughBalance}
                     />
-                  </Outset>
-                  <Outset horizontal>
-                    <AmountFieldInputFormik
-                      id="claimedAmount"
-                      isEdit
-                      label="Claim amount"
-                      tooltip="The expected amount to claim considering the Quest agreement. Check all bounty if you want to claim all available bounty at the moment the claim is executed."
-                      isLoading={loading}
-                      value={values.claimAll ? questTotalBounty : values.claimedAmount}
-                      error={touched.claimedAmount && (errors.claimedAmount as string)}
-                      disabled={values.claimAll}
+                    <Button
+                      key="confirmButton"
+                      icon={<GiBroadsword />}
+                      label="Schedule claim"
+                      mode="positive"
+                      type="submit"
+                      form="form-claim"
+                      disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid}
                     />
-                  </Outset>
-                </LineStyled>
-                <AddressFieldInput
-                  id="playerAddress"
-                  label="Player address"
-                  value={values.playerAddress ?? walletAddress}
-                  isLoading={loading}
-                  error={touched.playerAddress && errors.playerAddress}
-                  onBlur={handleBlur}
-                  tooltip="Most of time it will be the connected wallet but it can also be set to another address."
-                  isEdit
-                  onChange={handleChange}
-                  wide
-                />
-              </ChildSpacer>
-            </Outset>
+                  </>
+                }
+                steps={[
+                  <TextFieldInput
+                    id="evidence"
+                    isEdit
+                    label="Evidence of completion"
+                    tooltip="The necessary evidence that will confirm the completion of the quest. Make sure there is enough evidence as it will be useful if this claim is challenged in the future."
+                    isLoading={loading}
+                    value={values.evidence}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    error={touched.evidence && errors.evidence}
+                    multiline
+                    wide
+                    rows={10}
+                    compact
+                    isMarkDown
+                  />,
+                  <WrapperStyled>
+                    <div className="inline-flex">
+                      <Outset horizontal>
+                        <AmountFieldInputFormik
+                          id="questBounty"
+                          label="Available bounty"
+                          isLoading={loading}
+                          value={questTotalBounty}
+                        />
+                      </Outset>
+                      <Outset horizontal>
+                        <CheckboxFieldInput
+                          id="claimAll"
+                          label="Claim all"
+                          onChange={handleChange}
+                          handleBlur={handleBlur}
+                          value={values.claimAll}
+                          tooltip={`Check this if you want to claim the entire bounty available passed the claim delay of ${DEFAULT_CLAIM_EXECUTION_DELAY_MS}.`}
+                          isLoading={loading}
+                          isEdit
+                        />
+                      </Outset>
+                    </div>
+                    <Outset horizontal>
+                      <AmountFieldInputFormik
+                        id="claimedAmount"
+                        isEdit
+                        label="Claim amount"
+                        tooltip="The expected amount to claim considering the Quest agreement. Check all bounty if you want to claim all available bounty at the moment the claim is executed."
+                        isLoading={loading}
+                        value={values.claimAll ? questTotalBounty : values.claimedAmount}
+                        error={touched.claimedAmount && (errors.claimedAmount as string)}
+                        disabled={values.claimAll}
+                      />
+                    </Outset>
+
+                    <Outset horizontal>
+                      <AddressFieldInput
+                        id="playerAddress"
+                        label="Player address"
+                        value={values.playerAddress ?? walletAddress}
+                        isLoading={loading}
+                        tooltip="Usually is the connected wallet but it can also be set to another address."
+                        error={touched.playerAddress && errors.playerAddress}
+                        onBlur={handleBlur}
+                        isEdit
+                        onChange={handleChange}
+                        wide
+                      />
+                    </Outset>
+                  </WrapperStyled>,
+                ]}
+              />
+            </ChildSpacer>
           </FormStyled>
         )}
       </Formik>
diff --git a/packages/react-app/src/components/quest.tsx b/packages/react-app/src/components/quest.tsx
index 41e1bd91..12eb485e 100644
--- a/packages/react-app/src/components/quest.tsx
+++ b/packages/react-app/src/components/quest.tsx
@@ -1,10 +1,9 @@
-import { Card, useViewport } from '@1hive/1hive-ui';
+import { Card, Button } from '@1hive/1hive-ui';
 import { Form, Formik, FormikErrors, FormikTouched } from 'formik';
 import { noop } from 'lodash-es';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { FocusEventHandler, useCallback, useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { debounce, uniqueId } from 'lodash';
-
 import {
   ENUM,
   ENUM_PAGES,
@@ -17,7 +16,7 @@ import { TokenAmountModel } from 'src/models/token-amount.model';
 import { getNetwork } from 'src/networks';
 import * as QuestService from 'src/services/quest.service';
 import { Logger } from 'src/utils/logger';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { useTransactionContext } from 'src/contexts/transaction.context';
 import { GUpx } from 'src/utils/style.util';
 import { TokenModel } from 'src/models/token.model';
@@ -35,7 +34,8 @@ import ClaimList from './claim-list';
 import { processQuestState } from '../services/state-machine';
 import { StateTag } from './state-tag';
 import { AddressFieldInput } from './field-input/address-field-input';
-import { BREAKPOINTS } from '../styles/breakpoints';
+import Stepper from './utils/stepper';
+import { WalletBallance } from './wallet-balance';
 
 // #region StyledComponents
 
@@ -47,15 +47,17 @@ const LinkStyled = styled(Link)`
   font-weight: 100;
 `;
 
+const QuestActionButtonStyled = styled(Button)`
+  width: 40px;
+`;
+
 const CardStyled = styled(Card)`
   justify-content: flex-start;
   align-items: flex-start;
   width: 100%;
   height: fit-content;
   min-height: 250px;
-
   ${({ isEdit }: any) => isEdit && 'border:none;'}
-
   & > div:first-child {
     padding-bottom: 0;
   }
@@ -82,37 +84,43 @@ const FormStyled = styled(Form)`
   }
 `;
 
-const TwoColumnStyled = styled.div<{ twoCol?: boolean }>`
+const WrapperStyled = styled.div<{ twoCol?: boolean }>`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
   ${(props) => (props.twoCol ? '' : 'flex-wrap: wrap;')}
-  padding: ${GUpx(3)};
 `;
 
-const FirstColStyled = styled.div`
-  margin: 0 ${GUpx()};
-  max-width: 90%;
-  flex-grow: 1;
-  overflow-wrap: break-word;
+const FirstColStyled = styled.div<{ isEdit: boolean }>`
+  margin: 0 ${GUpx(3)};
+  ${(props) =>
+    !props.isEdit &&
+    css`
+      width: 80%;
+    `}
 `;
 
-const SecondColStyled = styled.div`
+const SecondColStyled = styled.div<{ wide?: boolean }>`
   margin: 0 ${GUpx(3)};
   max-width: 90%;
   flex-grow: 0;
   display: flex;
   flex-direction: column;
+  ${(props) => props.wide && 'width: 100%;'}
 `;
 
-const QuestHeaderStyled = styled.div`
+const QuestHeaderStyled = styled.div<{ isEdit: boolean }>`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap-reverse;
   justify-content: space-between;
-  padding: ${GUpx(3)};
-  padding-bottom: ${GUpx()};
+  ${(props) =>
+    !props.isEdit &&
+    css`
+      padding: ${GUpx(3)};
+      padding-bottom: ${GUpx()};
+    `}
   width: 100%;
 `;
 
@@ -123,7 +131,6 @@ type Props = {
   questMode?: string;
   isLoading?: boolean;
   onSave?: (_questAddress: string) => void;
-  css?: any;
 };
 
 export default function Quest({
@@ -131,9 +138,7 @@ export default function Quest({
   isLoading = false,
   questMode = ENUM_QUEST_VIEW_MODE.ReadDetail,
   onSave = noop,
-  css,
 }: Props) {
-  const { width: vw } = useViewport();
   const { walletAddress } = useWallet();
   const { defaultToken } = getNetwork();
   const formRef = useRef<HTMLFormElement>(null);
@@ -146,14 +151,10 @@ export default function Quest({
   const { setTransaction } = useTransactionContext();
   const [claimDeposit, setClaimDeposit] = useState<TokenAmountModel | null>();
   const [challengeDeposit, setChallengeDeposit] = useState<TokenAmountModel | null>();
-  const [twoCol, setTwoCol] = useState(true);
+  const [isEnoughBalance, setIsEnoughBalance] = useState(false);
 
   let isSubscribed = true;
 
-  useEffect(() => {
-    setTwoCol(vw >= BREAKPOINTS.large);
-  }, [vw]);
-
   useEffect(() => {
     if (!questData) return;
 
@@ -199,6 +200,7 @@ export default function Quest({
 
   const onQuestSubmit = async (values: QuestModel, setSubmitting: Function) => {
     validate(values); // Validate one last time before submitting
+
     if (isFormValid) {
       setLoading(true);
       let createdQuestAddress: string;
@@ -371,11 +373,26 @@ export default function Quest({
 
   const questContent = (
     values: QuestModel,
-    handleChange = noop,
+    handleChange: Function,
     errors: FormErrors<QuestModel>,
     touched: FormikTouched<QuestModel>,
-    handleBlur = noop,
+    handleBlur: FocusEventHandler<HTMLInputElement>,
+    setTouched: (
+      _touched: FormikTouched<QuestModel>,
+      _shouldValidate?: boolean | undefined,
+    ) => void,
   ) => {
+    const onNext = (currentStep: number) => {
+      const stepErrors = validate(values);
+      if (currentStep === 0) {
+        setTouched({ title: true, description: true });
+        return !(stepErrors.title || stepErrors.description);
+      }
+      if (currentStep === 1) {
+        return !(errors.bounty || errors.fallbackAddress || errors.expireTime);
+      }
+      return true;
+    };
     const titleInput = (
       <TextFieldInput
         id="title"
@@ -388,175 +405,203 @@ export default function Quest({
         onBlur={handleBlur}
         fontSize="24px"
         tooltip="Title should resume the Quest and be short and clear."
+        // tooltipDetail="Title should resume the quest"
         wide
         error={touched.title && errors.title}
       />
     );
-
-    return (
-      <>
-        {!isEdit && (
-          <QuestHeaderStyled>
-            {questMode === ENUM_QUEST_VIEW_MODE.ReadSummary ? (
-              <TitleLinkStyled to={`/${ENUM_PAGES.Detail}?id=${values.address}`}>
-                {titleInput}
-              </TitleLinkStyled>
-            ) : (
-              titleInput
-            )}
-            <AddressFieldInput
-              id="address"
-              value={values.address}
-              isLoading={loading || !questData}
-            />
-          </QuestHeaderStyled>
+    const firstStep = (
+      <FirstColStyled className="pb-0" isEdit={isEdit}>
+        {isEdit && titleInput}
+        <TextFieldInput
+          id="description"
+          label={isEdit ? 'Description' : undefined}
+          value={values.description}
+          isEdit={isEdit}
+          isLoading={loading || !questData}
+          placeHolder="Quest description"
+          tooltip={
+            <>
+              <b>The quest description should include:</b>
+              <br />- Details about what the quest entails. <br />- What evidence must be submitted
+              by users claiming a reward for completing the quest. <br />- The payout amount. This
+              could be a constant amount for quests that payout multiple times, a range with
+              reference to what determines what amount, the contracts balance at time of claim.{' '}
+              <br />
+              ⚠️<i>The description should not include any sensitive information.</i>
+            </>
+          }
+          onChange={handleChange}
+          onBlur={handleBlur}
+          error={touched.description && errors.description}
+          wide
+          multiline
+          isMarkDown
+          maxLine={questMode === ENUM_QUEST_VIEW_MODE.ReadSummary ? 5 : undefined}
+          ellipsis={
+            <LinkStyled to={`/${ENUM_PAGES.Detail}?id=${questData?.address}`}>Read more</LinkStyled>
+          }
+        />
+      </FirstColStyled>
+    );
+    const secondStep = (
+      <SecondColStyled wide={isEdit}>
+        {(bounty !== null || isEdit) && (
+          <AmountFieldInputFormik
+            id="bounty"
+            label={questMode === ENUM_QUEST_VIEW_MODE.Create ? undefined : 'Available bounty'}
+            isEdit={isEdit}
+            tooltip={
+              isEdit
+                ? 'The initial funding of this quest. A token needs to be picked. You can enter the token address directly.'
+                : "The available amount of this quest's funding pool."
+            }
+            value={questData?.bounty}
+            isLoading={loading || (!isEdit && !bounty) || !questData}
+            error={touched.bounty && errors.bounty}
+            tokenEditable
+            tokenLabel={isEdit ? 'Funding token' : undefined}
+            amountLabel={isEdit ? 'Initial funding amount' : undefined}
+            reversed={isEdit}
+            wide
+          />
         )}
-        <TwoColumnStyled twoCol={twoCol}>
+        {questMode === ENUM_QUEST_VIEW_MODE.ReadDetail && (
           <>
-            <FirstColStyled className="pb-0">
-              {isEdit && titleInput}
-              <TextFieldInput
-                id="description"
-                label={isEdit ? 'Description' : undefined}
-                value={values.description}
-                isEdit={isEdit}
-                isLoading={loading || !questData}
-                placeHolder="Quest description"
-                tooltip={
-                  <>
-                    <b>The quest description should include:</b>
-                    <br />- Details about what the quest entails. <br />- What evidence must be
-                    submitted by users claiming a reward for completing the quest. <br />- The
-                    payout amount. This could be a constant amount for quests that payout multiple
-                    times, a range with reference to what determines what amount, the contracts
-                    balance at time of claim. <br />
-                    ⚠️<i>The description should not include any sensitive information.</i>
-                  </>
-                }
-                onChange={handleChange}
-                onBlur={handleBlur}
-                error={touched.description && errors.description}
+            {claimDeposit !== null && (
+              <AmountFieldInput
+                id="claimDeposit"
+                label="Claim deposit"
+                tooltip="This amount will be staked when claiming a bounty. If the claim is challenged and ruled in favor of the challenger, you will lose this deposit."
+                value={claimDeposit}
+                isLoading={loading || (!isEdit && !claimDeposit) || !questData}
                 wide
-                multiline
-                isMarkDown
-                maxLine={questMode === ENUM_QUEST_VIEW_MODE.ReadSummary ? 5 : undefined}
-                ellipsis={
-                  <LinkStyled to={`/${ENUM_PAGES.Detail}?id=${questData?.address}`}>
-                    Read more
-                  </LinkStyled>
-                }
               />
-            </FirstColStyled>
-            <SecondColStyled>
-              {(bounty !== null || isEdit) && (
-                <AmountFieldInputFormik
-                  id="bounty"
-                  label={questMode === ENUM_QUEST_VIEW_MODE.Create ? undefined : 'Available bounty'}
-                  isEdit={isEdit}
-                  tooltip={
-                    isEdit
-                      ? 'The initial funding of this quest. A token needs to be picked. You can enter the token address directly.'
-                      : "The available amount of this quest's funding pool."
-                  }
-                  value={questData?.bounty}
-                  isLoading={loading || (!isEdit && !bounty) || !questData}
-                  error={touched.bounty && errors.bounty}
-                  tokenEditable
-                  tokenLabel={isEdit ? 'Funding token' : undefined}
-                  amountLabel={isEdit ? 'Initial funding amount' : undefined}
-                  reversed={isEdit}
-                  wide
-                />
-              )}
-              {questMode === ENUM_QUEST_VIEW_MODE.ReadDetail && (
+            )}
+            <DateFieldInput
+              id="creationTime"
+              label="Creation time"
+              isLoading={loading || !questData}
+              value={values.creationTime}
+              wide
+            />
+          </>
+        )}
+        <DateFieldInputFormik
+          id="expireTime"
+          label="Expire time"
+          tooltip="The expiry time for the quest completion. Past expiry time, funds will only be sendable to the fallback address."
+          isEdit={isEdit}
+          isLoading={loading || !questData}
+          value={values.expireTime}
+          wide
+          onBlur={handleBlur}
+          error={touched.expireTime && errors.expireTime}
+          formik={formRef}
+        />
+        {isEdit && (
+          <AddressFieldInput
+            id="fallbackAddress"
+            label="Funds fallback address"
+            value={values.fallbackAddress ?? walletAddress}
+            isLoading={loading || !questData}
+            tooltip="Unused funds at the specified expiry time can be returned to this address."
+            isEdit
+            onBlur={handleBlur}
+            error={touched.fallbackAddress && errors.fallbackAddress}
+            onChange={handleChange}
+            wide
+          />
+        )}
+      </SecondColStyled>
+    );
+
+    const claimList = !loading && questData?.address && (
+      <>
+        {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 &&
+          bounty && (
+            <QuestFooterStyled>
+              {values.state === ENUM_QUEST_STATE.Active ? (
                 <>
-                  {claimDeposit !== null && (
-                    <AmountFieldInput
-                      id="claimDeposit"
-                      label="Claim deposit"
-                      tooltip="This amount will be staked when claiming a bounty. If the claim is challenged and ruled in favor of the challenger, you will lose this deposit."
-                      value={claimDeposit}
-                      isLoading={loading || (!isEdit && !claimDeposit) || !questData}
-                      wide
+                  <FundModal quest={questData} onClose={onFundModalClosed} />
+                  {claimDeposit && (
+                    <ScheduleClaimModal
+                      questAddress={questData.address}
+                      questTotalBounty={bounty}
+                      claimDeposit={claimDeposit}
+                      onClose={onScheduleModalClosed}
                     />
                   )}
-                  <DateFieldInput
-                    id="creationTime"
-                    label="Creation time"
-                    isLoading={loading || !questData}
-                    value={values.creationTime}
-                    wide
-                  />
+                </>
+              ) : (
+                <>
+                  {!!bounty?.parsedAmount && (
+                    <ReclaimFundsModal bounty={bounty} questData={values} />
+                  )}
                 </>
               )}
-              <DateFieldInputFormik
-                id="expireTime"
-                label="Expire time"
-                tooltip="The expiry time for the quest completion. Past expiry time, funds will only be sendable to the fallback address."
-                isEdit={isEdit}
-                isLoading={loading || !questData}
-                value={values.expireTime}
-                wide
-                onBlur={handleBlur}
-                error={touched.expireTime && errors.expireTime}
-                formik={formRef}
-              />
-              {isEdit && (
-                <AddressFieldInput
-                  id="fallbackAddress"
-                  label="Funds fallback address"
-                  value={values.fallbackAddress ?? walletAddress}
-                  isLoading={loading || !questData}
-                  tooltip="Unused funds at the specified expiry time can be returned to this address."
-                  isEdit
-                  onBlur={handleBlur}
-                  error={touched.fallbackAddress && errors.fallbackAddress}
-                  onChange={handleChange}
-                  wide
-                />
-              )}
-            </SecondColStyled>
-          </>
-        </TwoColumnStyled>
-        {!loading && !isEdit && questData?.address && (
+            </QuestFooterStyled>
+          )}
+      </>
+    );
+
+    return (
+      <WrapperStyled>
+        {!isEdit && (
           <>
-            {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 &&
-              bounty && (
-                <QuestFooterStyled>
-                  {values.state === ENUM_QUEST_STATE.Active ? (
-                    <>
-                      <FundModal quest={questData} onClose={onFundModalClosed} />
-                      {claimDeposit && (
-                        <ScheduleClaimModal
-                          questAddress={questData.address}
-                          questTotalBounty={bounty}
-                          claimDeposit={claimDeposit}
-                          onClose={onScheduleModalClosed}
-                        />
-                      )}
-                    </>
-                  ) : (
-                    <>
-                      {!!bounty?.parsedAmount && (
-                        <ReclaimFundsModal bounty={bounty} questData={values} />
-                      )}
-                    </>
-                  )}
-                </QuestFooterStyled>
+            <QuestHeaderStyled isEdit={isEdit}>
+              {questMode === ENUM_QUEST_VIEW_MODE.ReadSummary ? (
+                <TitleLinkStyled to={`/${ENUM_PAGES.Detail}?id=${values.address}`}>
+                  {titleInput}
+                </TitleLinkStyled>
+              ) : (
+                titleInput
               )}
+              <AddressFieldInput
+                id="address"
+                value={values.address}
+                isLoading={loading || !questData}
+              />
+            </QuestHeaderStyled>
+            {firstStep}
+            {secondStep}
+            {claimList}
           </>
         )}
-      </>
+        {isEdit && (
+          <Stepper
+            submitButton={
+              <>
+                <WalletBallance
+                  key="WalletBallance-initialFunds"
+                  askedTokenAmount={values.bounty}
+                  setIsEnoughBalance={setIsEnoughBalance}
+                />
+                <QuestActionButtonStyled
+                  key="btn-save"
+                  label="Create"
+                  mode="positive"
+                  type="submit"
+                  form={`form-quest-form-${questData?.address ?? 'new'}`}
+                  disabled={loading || !walletAddress || !isEnoughBalance || !isFormValid}
+                />
+              </>
+            }
+            onNext={(currentStep) => onNext(currentStep)}
+            steps={[firstStep, secondStep]}
+          />
+        )}
+      </WrapperStyled>
     );
   };
 
@@ -572,18 +617,22 @@ export default function Quest({
         initialValues={
           {
             ...questData,
-            fallbackAddress: questData?.fallbackAddress ?? walletAddress,
+            fallbackAddress: questData?.fallbackAddress ?? questData?.fallbackAddress,
           } as QuestModel
         }
         onSubmit={(values, { setSubmitting }) => onQuestSubmit(values, setSubmitting)}
+        validateOnChange
         validate={validate}
-        validateOnBlur
-        validateOnChange={false}
       >
-        {({ values, handleChange, handleBlur, handleSubmit, errors, touched }) =>
+        {({ values, handleChange, handleBlur, handleSubmit, errors, touched, setTouched }) =>
           isEdit && questData ? (
             <FormStyled
-              onSubmit={handleSubmit}
+              onSubmit={
+                handleSubmit
+                // touched.bounty = true;
+                // touched.title = true;
+                // touched.description = true;
+              }
               ref={formRef}
               id={`form-quest-form-${questData.address ?? 'new'}`}
             >
@@ -593,10 +642,18 @@ export default function Quest({
                 errors as FormErrors<QuestModel>,
                 touched,
                 handleBlur,
+                setTouched,
               )}
             </FormStyled>
           ) : (
-            questContent(values, handleChange, errors as FormErrors<QuestModel>, touched)
+            questContent(
+              values,
+              handleChange,
+              errors as FormErrors<QuestModel>,
+              touched,
+              handleBlur,
+              setTouched,
+            )
           )
         }
       </Formik>
diff --git a/packages/react-app/src/components/utils/stepper.tsx b/packages/react-app/src/components/utils/stepper.tsx
new file mode 100644
index 00000000..680b5c55
--- /dev/null
+++ b/packages/react-app/src/components/utils/stepper.tsx
@@ -0,0 +1,91 @@
+import { Button } from '@1hive/1hive-ui';
+import { ReactNode, useEffect, useState } from 'react';
+import { GUpx } from 'src/utils/style.util';
+import styled from 'styled-components';
+
+// #region StyledComponents
+const QuestActionButtonStyled = styled(Button)<{ visible: boolean }>`
+  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
+`;
+
+const ButtonWrapperStyled = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-top: ${GUpx(5)};
+  margin-bottom: ${GUpx(0.5)};
+  align-items: center;
+`;
+
+const WrapperStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100% !important;
+`;
+
+const ContentContainerStyled = styled.div`
+  overflow: auto;
+  max-height: calc(60vh - 60px) !important;
+`;
+// #endregion
+
+type Props = {
+  steps?: ReactNode[];
+  submitButton?: ReactNode;
+  onNext?: (_currentStep: number, _isSubmitStep: boolean) => boolean;
+  onBack?: (_currentStep: number) => void;
+};
+export default function Stepper({ steps, submitButton, onNext, onBack }: Props) {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [isSubmitStep, setIsSubmitStep] = useState(false);
+  const [isFirstStep, setIsFirstStep] = useState(true);
+
+  const nextStep = () => {
+    const isValid = onNext?.(currentStep, currentStep + 2 === steps?.length);
+    if (isValid) {
+      if (steps && steps[currentStep + 1]) {
+        setCurrentStep(currentStep + 1);
+      }
+      if (isFirstStep) {
+        setIsFirstStep(false);
+      }
+    }
+  };
+  const previousStep = () => {
+    onBack?.(currentStep);
+    if (currentStep >= 1) {
+      setCurrentStep(currentStep - 1);
+    }
+    if (isSubmitStep) {
+      setIsSubmitStep(false);
+    }
+  };
+
+  useEffect(() => {
+    if (currentStep + 1 === steps?.length) {
+      setIsSubmitStep(true);
+    }
+    if (currentStep === 0) {
+      setIsFirstStep(true);
+    }
+  }, [currentStep]);
+
+  return (
+    <WrapperStyled>
+      <ContentContainerStyled>{steps && steps[currentStep]}</ContentContainerStyled>
+      <ButtonWrapperStyled>
+        <QuestActionButtonStyled
+          visible={!isFirstStep}
+          label="Back"
+          mode="normal"
+          onClick={previousStep}
+        />
+        {!isSubmitStep ? (
+          <QuestActionButtonStyled visible label="Next" mode="positive" onClick={nextStep} />
+        ) : (
+          submitButton
+        )}
+      </ButtonWrapperStyled>
+    </WrapperStyled>
+  );
+}
diff --git a/packages/react-app/src/components/views/quest-list.tsx b/packages/react-app/src/components/views/quest-list.tsx
index 4ec9937b..e956311b 100644
--- a/packages/react-app/src/components/views/quest-list.tsx
+++ b/packages/react-app/src/components/views/quest-list.tsx
@@ -42,14 +42,14 @@ const FilterWrapperStyled = styled.div<{
   theme: ThemeInterface;
 }>`
   position: sticky;
-  top: 0;
+  top: -1px;
   width: calc(100% + 20px); // Size of scrollbar
   z-index: 1;
   background-image: url(${background});
   background-color: ${({ theme }: any) => theme.background};
   &::after {
     content: '';
-    background: url(${backgroundMotif}) no-repeat center -113px;
+    background: url(${backgroundMotif}) no-repeat center -103px;
     position: absolute;
     top: 0;
     left: 0;
@@ -64,7 +64,7 @@ const LineStyled = styled.div`
   display: flex;
   flex-direction: row;
   margin: ${GUpx(2)};
-  align-items: flex-end;
+  align-items: center;
 `;
 
 const skeletonQuests: any[] = [];
diff --git a/packages/react-app/src/components/wallet-balance.tsx b/packages/react-app/src/components/wallet-balance.tsx
index a7ea42a2..e096442c 100644
--- a/packages/react-app/src/components/wallet-balance.tsx
+++ b/packages/react-app/src/components/wallet-balance.tsx
@@ -1,19 +1,29 @@
-import { Info } from '@1hive/1hive-ui';
 import { useEffect, useState } from 'react';
+import { useThemeContext } from 'src/contexts/theme.context';
 import { useWallet } from 'src/contexts/wallet.context';
 import { TokenAmountModel } from 'src/models/token-amount.model';
 import { TokenModel } from 'src/models/token.model';
 import { getBalanceOf } from 'src/services/quest.service';
-import { GUpx } from 'src/utils/style.util';
-import styled from 'styled-components';
+import { ThemeInterface } from 'src/styles/theme';
+import styled, { css } from 'styled-components';
 import AmountFieldInput from './field-input/amount-field-input';
+import { FieldInput } from './field-input/field-input';
 
-const InfoStyled = styled(Info)`
-  padding: ${GUpx()};
+// #region StyledComponents
+
+const WrapperStyled = styled.div<{ theme: ThemeInterface; isEnoughBalance: boolean }>`
+  ${({ isEnoughBalance, theme }) =>
+    !isEnoughBalance &&
+    css`
+      label {
+        color: ${theme.negative};
+      }
+    `}
 `;
+// #endregion
 
 type Props = {
-  askedTokenAmount: TokenAmountModel;
+  askedTokenAmount?: TokenAmountModel;
   setIsEnoughBalance?: (_valid: boolean) => void;
 };
 
@@ -21,38 +31,43 @@ export function WalletBallance({ askedTokenAmount, setIsEnoughBalance }: Props)
   const { walletAddress } = useWallet();
   const [tokenBalance, setTokenBalance] = useState<TokenAmountModel>();
   const [isEnoughBalance, _setIsEnoughBalance] = useState(true);
+  const { currentTheme } = useThemeContext();
 
   useEffect(() => {
     const fetchBalances = async (_token: TokenModel) => {
       setTokenBalance((await getBalanceOf(_token, walletAddress)) ?? undefined);
     };
-    if (askedTokenAmount?.token) {
+    if (askedTokenAmount?.token && askedTokenAmount.token.token !== tokenBalance?.token.token) {
+      setTokenBalance(undefined);
       fetchBalances(askedTokenAmount.token);
     }
-  }, [askedTokenAmount, walletAddress]);
+  }, [askedTokenAmount?.token, walletAddress]);
 
   useEffect(() => {
     if (tokenBalance) {
-      const isEnough = tokenBalance.parsedAmount >= askedTokenAmount.parsedAmount;
+      const isEnough =
+        (askedTokenAmount && tokenBalance.parsedAmount >= askedTokenAmount.parsedAmount) ?? false;
       _setIsEnoughBalance(isEnough);
       if (setIsEnoughBalance) setIsEnoughBalance(isEnough);
     }
   }, [askedTokenAmount, tokenBalance, setIsEnoughBalance]);
-
   return (
-    <>
-      {tokenBalance && (
-        <InfoStyled mode={isEnoughBalance ? 'info' : 'warning'}>
-          <AmountFieldInput
-            id={`balance-${tokenBalance.token.symbol}`}
-            key={`balance-${tokenBalance.token.token}`}
-            compact
-            label={isEnoughBalance ? 'Wallet balance' : 'Not enough'}
-            tooltip="The balance of the funding token for the connected wallet."
-            value={tokenBalance}
-          />
-        </InfoStyled>
+    <WrapperStyled theme={currentTheme} isEnoughBalance={isEnoughBalance}>
+      {askedTokenAmount?.token ? (
+        <AmountFieldInput
+          isLoading={!tokenBalance}
+          id={`balance-${tokenBalance?.token.symbol}`}
+          key={`balance-${tokenBalance?.token.token}`}
+          compact
+          label={isEnoughBalance ? 'Wallet balance' : 'Not enough'}
+          tooltip="The balance of the funding token for the connected wallet."
+          value={tokenBalance}
+        />
+      ) : (
+        <FieldInput id="balance-not-selected-token" label="Wallet balance" compact>
+          <i>No token selected</i>
+        </FieldInput>
       )}
-    </>
+    </WrapperStyled>
   );
 }
diff --git a/packages/react-app/src/models/claim.model.ts b/packages/react-app/src/models/claim.model.ts
index 0ffdd01d..4e8a3ca0 100644
--- a/packages/react-app/src/models/claim.model.ts
+++ b/packages/react-app/src/models/claim.model.ts
@@ -5,7 +5,8 @@ export type ClaimModel = {
   questAddress: string;
   playerAddress: string;
   claimedAmount: TokenAmountModel;
-  evidence: string;
+  evidence?: string;
+  evidenceIpfsHash?: string;
 
   // Only set when fetch
   executionTimeMs?: number;
diff --git a/packages/react-app/src/services/ipfs.service.ts b/packages/react-app/src/services/ipfs.service.ts
index a85ba48d..32248c39 100644
--- a/packages/react-app/src/services/ipfs.service.ts
+++ b/packages/react-app/src/services/ipfs.service.ts
@@ -44,3 +44,20 @@ export const getObjectFromIpfs = async (objHasHex: string, configOverride?: IPFS
   }
   return undefined; // No result
 };
+
+/**
+ * This method will go through all IPFS configs until it finds one that works.
+ * If no one, will result in a markdown link to the IPFS object.
+ */
+export const getObjectFromIpfsSafe = async (evidenceIpfsHash: string) => {
+  let evidence: string | undefined;
+  try {
+    evidence = await getObjectFromIpfs(evidenceIpfsHash);
+  } catch (error: any) {
+    evidence = await getObjectFromIpfs(evidenceIpfsHash, ipfsTheGraph);
+    Logger.exception(error, 'Failed to get IPFS object when fetching claims');
+  }
+  // If failed to fetch ipfs evidence
+  if (!evidence) evidence = formatIpfsMarkdownLink(evidenceIpfsHash, 'See evidence');
+  return evidence;
+};
diff --git a/packages/react-app/src/services/quest.service.ts b/packages/react-app/src/services/quest.service.ts
index 196ce96a..fa84eca6 100644
--- a/packages/react-app/src/services/quest.service.ts
+++ b/packages/react-app/src/services/quest.service.ts
@@ -184,6 +184,8 @@ async function generateScheduleContainer(
   const erc3000Config = governQueueResult.config;
   const lastBlockTimestamp = await getLastBlockTimestamp();
 
+  if (!claimData.evidence) throw new Error('Evidence field is required');
+
   // A bit more than the execution delay
   const executionTime =
     lastBlockTimestamp +
@@ -243,15 +245,7 @@ export async function fetchQuestClaims(quest: QuestModel): Promise<ClaimModel[]>
         const { evidenceIpfsHash, claimAmount, playerAddress } = decodeClaimAction(
           container.payload,
         );
-        let evidence: string | undefined;
-        try {
-          evidence = await getObjectFromIpfs(evidenceIpfsHash);
-        } catch (error: any) {
-          evidence = await getObjectFromIpfs(evidenceIpfsHash, ipfsTheGraph);
-          Logger.exception(error, 'Failed to get IPFS object when fetching claims');
-        }
-        // If failed to fetch ipfs evidence
-        if (!evidence) evidence = formatIpfsMarkdownLink(evidenceIpfsHash, 'See evidence');
+
         const tokenModel =
           typeof quest.rewardToken === 'string'
             ? ((await getTokenInfo(quest.rewardToken)) as TokenModel)
@@ -261,7 +255,7 @@ export async function fetchQuestClaims(quest: QuestModel): Promise<ClaimModel[]>
             token: tokenModel,
             parsedAmount: fromBigNumber(BigNumber.from(claimAmount), tokenModel?.decimals),
           },
-          evidence,
+          evidenceIpfsHash,
           playerAddress,
           questAddress: quest.address,
           state: container.state,
diff --git a/packages/react-app/src/styles/style.scss b/packages/react-app/src/styles/style.scss
index b340d9cd..a5190bd3 100644
--- a/packages/react-app/src/styles/style.scss
+++ b/packages/react-app/src/styles/style.scss
@@ -72,7 +72,7 @@ button {
 }
 
 .fit-content {
-  min-width: fit-content !important;
+  width: fit-content !important;
 }
 
 .inline-flex {
@@ -106,3 +106,30 @@ button {
 .flex-grow {
   flex-grow: 1;
 }
+
+/* custom scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #4a4a4a #00000000;
+}
+*::-webkit-scrollbar {
+  width: 20px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #4a4a4a;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}
+*::-webkit-scrollbar-corner {
+  background-color: #00000000;
+}