diff --git a/src/custom/assets/cow-swap/important.svg b/src/custom/assets/cow-swap/important.svg
new file mode 100644
index 000000000..2a80f490c
--- /dev/null
+++ b/src/custom/assets/cow-swap/important.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <path fill="#FF784A" d="M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z" opacity=".3"/>
+  <path fill="#FF784A" d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z"/>
+  <path fill="#FF784A" d="M9 13h2v2H9v-2Zm0-8h2v6H9V5Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/custom/components/FaqDrawer/index.tsx b/src/custom/components/FaqDrawer/index.tsx
new file mode 100644
index 000000000..2e66db746
--- /dev/null
+++ b/src/custom/components/FaqDrawer/index.tsx
@@ -0,0 +1,94 @@
+import styled from 'styled-components/macro'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-flow: column wrap;
+  width: 100%;
+  gap: 0;
+  margin: 0 0 24px;
+`
+
+const Item = styled.div`
+  width: 100%;
+  display: block;
+  position: relative;
+  padding: 4px 60px 12px 12px;
+
+  > div {
+    font-size: 16px;
+    padding: 0;
+    margin: 0;
+    height: 0;
+    overflow: hidden;
+    position: relative;
+    opacity: 0;
+    transition: 0.4s ease-in-out;
+  }
+
+  > input {
+    display: none;
+    appearance: none;
+  }
+
+  > input:checked ~ div {
+    height: auto;
+    opacity: 0.7;
+    margin: 0 0 12px;
+  }
+
+  > input:checked ~ label {
+    padding: 0 0 12px;
+  }
+
+  > input:checked ~ label > span {
+    transform: rotate(45deg);
+  }
+
+  > label {
+    cursor: pointer;
+    display: block;
+    width: 100%;
+    padding: 0;
+    font-weight: 500;
+    font-size: 21px;
+  }
+
+  > label > span {
+    display: block;
+    position: absolute;
+    right: 0;
+    font-size: 34px;
+    top: -2px;
+    line-height: 1;
+    opacity: 0.5;
+    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+  }
+
+  > label:hover > span {
+    opacity: 1;
+  }
+`
+
+type FaqDrawerProps = {
+  items: {
+    title: string
+    content: string
+  }[]
+}
+
+export function FaqDrawer({ items }: FaqDrawerProps) {
+  return (
+    <Wrapper>
+      {items?.length > 0 &&
+        items.map(({ title, content }, index) => (
+          <Item key={index}>
+            <input id={`q${index}`} type="checkbox" />
+            <label htmlFor={`q${index}`}>
+              {title} <span>+</span>
+            </label>
+            <div>{content}</div>
+          </Item>
+        ))}
+    </Wrapper>
+  )
+}
diff --git a/src/custom/pages/Claim/InvestmentFlow/index.tsx b/src/custom/pages/Claim/InvestmentFlow/index.tsx
index 960c69758..333b7c9d2 100644
--- a/src/custom/pages/Claim/InvestmentFlow/index.tsx
+++ b/src/custom/pages/Claim/InvestmentFlow/index.tsx
@@ -10,12 +10,14 @@ import {
   AccountClaimSummary,
   StepExplainer,
   Badge,
+  UserMessage,
   BannerExplainer,
 } from 'pages/Claim/styled'
 import { InvestSummaryRow } from 'pages/Claim/InvestmentFlow/InvestSummaryRow'
 import { ClaimSummaryView } from 'pages/Claim/ClaimSummary'
 
 import { Stepper } from 'components/Stepper'
+import { FaqDrawer } from 'components/FaqDrawer'
 
 import {
   useClaimState,
@@ -40,6 +42,7 @@ import { ExplorerDataType } from 'utils/getExplorerLink'
 import { BadgeVariant } from 'components/Badge'
 import { OperationType } from 'components/TransactionConfirmationModal'
 import RoundArrow from 'assets/cow-swap/round-arrow.svg'
+import ImportantIcon from 'assets/cow-swap/important.svg'
 import CowProtocolImage from 'assets/cow-swap/cowprotocol.svg'
 import SVG from 'react-inlinesvg'
 
@@ -55,6 +58,19 @@ const STEPS_DATA = [
   },
 ]
 
+const FAQ_DATA = [
+  {
+    title: 'What will happen?',
+    content:
+      'By sending this Ethereum transaction, you will be investing tokens from the connected account and exchanging them for vCOW tokens that will be received by the claiming account specified above.',
+  },
+  {
+    title: 'Can I modify (partially) invested amounts later?',
+    content:
+      'No. Once you send the transaction, you cannot increase or reduce the investment. Investment opportunities can only be exercised once.',
+  },
+]
+
 export type InvestmentFlowProps = Pick<ClaimCommonTypes, 'hasClaims'> & {
   isAirdropOnly: boolean
   modalCbs: {
@@ -269,18 +285,14 @@ export default function InvestmentFlow({ hasClaims, isAirdropOnly, modalCbs }: I
           </AccountClaimSummary>
 
           <h4>Ready to claim your vCOW?</h4>
-          <p>
-            <b>What will happen?</b> By sending this Ethereum transaction, you will be investing tokens from the
-            connected account and exchanging them for vCOW tokens that will be received by the claiming account
-            specified above.
-          </p>
-          <p>
-            <b>Can I modify the invested amounts or invest partial amounts later?</b> No. Once you send the transaction,
-            you cannot increase or reduce the investment. Investment opportunities can only be exercised once.
-          </p>
-          <p>
-            <b>Important!</b> Please make sure you intend to claim and send vCOW to the mentioned receiving account(s).
-          </p>
+          <FaqDrawer items={FAQ_DATA} />
+          <UserMessage>
+            <SVG src={ImportantIcon} description="Important!" />
+            <span>
+              <b>Important!</b> Please make sure you intend to claim and send vCOW to the above mentioned receiving
+              account.
+            </span>
+          </UserMessage>
         </InvestContent>
       ) : null}
     </InvestFlow>
diff --git a/src/custom/pages/Claim/styled.ts b/src/custom/pages/Claim/styled.ts
index 44515e366..63ea46db9 100644
--- a/src/custom/pages/Claim/styled.ts
+++ b/src/custom/pages/Claim/styled.ts
@@ -28,120 +28,6 @@ export const InnerPageWrapper = styled.div`
     padding: 16px;
     border-radius: var(--border-radius-small);
   `};
-
-  > a,
-  > a:hover,
-  > a:visited,
-  > a:focus {
-    text-decoration: none;
-  }
-
-  input[type='checkbox'],
-  input[type='radio'] {
-    --active: ${({ theme }) => theme.primary1};
-    --active-inner: ${({ theme }) => theme.black};
-    --focus: 2px rgba(39, 94, 254, .3);
-    --border: ${({ theme }) => theme.blueShade3};
-    --border-hover: ${({ theme }) => theme.primary1};
-    --background: ${({ theme }) => theme.white};
-    appearance: none;
-    height: 21px;
-    width: 21px;
-    outline: none;
-    display: inline-block;
-    vertical-align: top;
-    position: relative;
-    margin: 0;
-    cursor: pointer;
-    border: 1px solid var(--bc, var(--border));
-    background: var(--b, var(--background));
-
-    &:after {
-      content: '';
-      display: block;
-      left: 0;
-      top: 0;
-      position: absolute;
-    }
-
-    &:checked {
-      --b: var(--active);
-      --bc: var(--active);
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: .5;
-
-      &:checked {
-      }
-
-      & + label {
-        cursor: not-allowed;
-      }
-    }
-
-    &:hover {
-      &:not(:checked) {
-        &:not(:disabled) {
-          --bc: var(--border-hover);
-        }
-      }
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 var(--focus);
-    }
-
-    &:after {
-      opacity: var(--o, 0);
-    }
-
-    &:checked {
-      --o: 1;
-    }
-
-    & + label {
-      font-size: 14px;
-      line-height: 21px;
-      display: inline-block;
-      vertical-align: top;
-      cursor: pointer;
-      margin-left: 4px;
-    }
-  }
-
-  input[type='checkbox'] {
-    border-radius: 7px;
-
-    &:after {
-      width: 5px;
-      height: 9px;
-      border: 2px solid var(--active-inner);
-      border-top: 0;
-      border-left: 0;
-      left: 7px;
-      top: 4px;
-      transform: rotate(var(--r, 20deg));
-    }
-
-    &:checked {
-      --r: 43deg;
-    }
-  }
-
-  input[type='radio'] {
-    border-radius: 50%;
-
-    &:after {
-      width: 19px;
-      height: 19px;
-      border-radius: 50%;
-      background: var(--active-inner);
-      opacity: 0;
-      transform: scale(var(--s, .7));
-    }
-  }
 }
 
 a {
@@ -324,6 +210,113 @@ export const ClaimTable = styled.div`
   width: 100%;
   margin: 0;
 
+  input[type='checkbox'],
+  input[type='radio'] {
+    --active: ${({ theme }) => theme.primary1};
+    --active-inner: ${({ theme }) => theme.black};
+    --focus: 2px rgba(39, 94, 254, 0.3);
+    --border: ${({ theme }) => theme.blueShade3};
+    --border-hover: ${({ theme }) => theme.primary1};
+    --background: ${({ theme }) => theme.white};
+    appearance: none;
+    height: 21px;
+    width: 21px;
+    outline: none;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    margin: 0;
+    cursor: pointer;
+    border: 1px solid var(--bc, var(--border));
+    background: var(--b, var(--background));
+
+    &:after {
+      content: '';
+      display: block;
+      left: 0;
+      top: 0;
+      position: absolute;
+    }
+
+    &:checked {
+      --b: var(--active);
+      --bc: var(--active);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+
+      &:checked {
+      }
+
+      & + label {
+        cursor: not-allowed;
+      }
+    }
+
+    &:hover {
+      &:not(:checked) {
+        &:not(:disabled) {
+          --bc: var(--border-hover);
+        }
+      }
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 var(--focus);
+    }
+
+    &:after {
+      opacity: var(--o, 0);
+    }
+
+    &:checked {
+      --o: 1;
+    }
+
+    & + label {
+      font-size: 14px;
+      line-height: 21px;
+      display: inline-block;
+      vertical-align: top;
+      cursor: pointer;
+      margin-left: 4px;
+    }
+  }
+
+  input[type='checkbox'] {
+    border-radius: 7px;
+
+    &:after {
+      width: 5px;
+      height: 9px;
+      border: 2px solid var(--active-inner);
+      border-top: 0;
+      border-left: 0;
+      left: 7px;
+      top: 4px;
+      transform: rotate(var(--r, 20deg));
+    }
+
+    &:checked {
+      --r: 43deg;
+    }
+  }
+
+  input[type='radio'] {
+    border-radius: 50%;
+
+    &:after {
+      width: 19px;
+      height: 19px;
+      border-radius: 50%;
+      background: var(--active-inner);
+      opacity: 0;
+      transform: scale(var(--s, 0.7));
+    }
+  }
+
   ${TokenLogo},
   ${Icon} {
     border: 2px solid ${({ theme }) => theme.blueShade3};
@@ -947,6 +940,11 @@ export const InvestContent = styled.div`
   display: flex;
   flex-flow: column wrap;
 
+  > h4 {
+    font-size: 28px;
+    text-align: center;
+  }
+
   ${ClaimTable} {
     table {
       display: grid;
@@ -1699,6 +1697,40 @@ export const StepExplainer = styled.div`
   }
 `
 
+export const UserMessage = styled.div`
+  width: 100%;
+  border-radius: var(--border-radius);
+  padding: 24px 40px;
+  text-align: left;
+  display: flex;
+  background: ${({ theme }) => transparentize(0.9, theme.attention)};
+  color: ${({ theme }) => darken(0.1, theme.attention)};
+  margin: 0 auto;
+  align-items: center;
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    padding: 24px;
+  `}
+
+  > svg {
+    height: 36px;
+    width: auto;
+    margin: 0 12px 0 0;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      height: 28px;
+    `}
+  }
+
+  > svg > path {
+    fill: ${({ theme }) => darken(0.1, theme.attention)};
+  }
+
+  > span {
+    flex: 1 1 100%;
+  }
+`
+
 export const BannerExplainer = styled.div`
   display: flex;
   justify-content: space-between;