diff --git a/src/custom/components/ProgressBar/index.tsx b/src/custom/components/ProgressBar/index.tsx
new file mode 100644
index 000000000..75d62f9da
--- /dev/null
+++ b/src/custom/components/ProgressBar/index.tsx
@@ -0,0 +1,62 @@
+import { ProgressBarWrap, ProgressContainer, Progress, Label, FlexWrap, HiddenRange, ProgressVal } from './styled'
+
+interface ProgressBarProps {
+  percentage: number // between 0 - 100
+  onPercentageClick: (percentage: number) => void
+}
+
+export function ProgressBar({ percentage, onPercentageClick }: ProgressBarProps) {
+  const statPercentages = [
+    {
+      value: 0,
+      label: '0%',
+    },
+    {
+      value: 25,
+      label: '25%',
+    },
+    {
+      value: 50,
+      label: '50%',
+    },
+    {
+      value: 75,
+      label: '75%',
+    },
+    {
+      value: 100,
+      label: '100%',
+    },
+  ]
+  const minVal = statPercentages[0].value
+  const maxVal = statPercentages[statPercentages.length - 1].value
+
+  if (percentage > 100) {
+    percentage = 100
+  } else if (percentage < 0) {
+    percentage = 0
+  }
+
+  return (
+    <FlexWrap>
+      <ProgressBarWrap>
+        {statPercentages.map((item, index) => (
+          <Label position={item.value} onClick={() => onPercentageClick(item.value)} key={`${item.value}-${index}`}>
+            {item.label}
+          </Label>
+        ))}
+        <ProgressContainer>
+          <HiddenRange
+            onChange={(e) => onPercentageClick(parseFloat(e.target.value))}
+            min={minVal}
+            max={maxVal}
+            value={percentage}
+            type="range"
+          />
+          <Progress percentage={percentage} />
+          <ProgressVal>{percentage}%</ProgressVal>
+        </ProgressContainer>
+      </ProgressBarWrap>
+    </FlexWrap>
+  )
+}
diff --git a/src/custom/components/ProgressBar/styled.tsx b/src/custom/components/ProgressBar/styled.tsx
new file mode 100644
index 000000000..b0869fcfa
--- /dev/null
+++ b/src/custom/components/ProgressBar/styled.tsx
@@ -0,0 +1,77 @@
+import styled from 'styled-components/macro'
+import * as CSS from 'csstype'
+import { FlexWrap as FlexWrapMod } from 'pages/Profile/styled'
+import { transparentize } from 'polished'
+
+export const FlexWrap = styled(FlexWrapMod)`
+  max-width: 100%;
+  align-items: flex-end;
+`
+
+export const ProgressBarWrap = styled(FlexWrapMod)`
+  max-width: 500px; //optional
+  padding-top: 40px;
+  position: relative;
+`
+
+export const ProgressContainer = styled.div`
+  background-color: ${({ theme }) => transparentize(0.61, theme.text1)};
+  height: 24px;
+  width: 100% !important;
+  position: relative;
+  overflow: hidden;
+  border-radius: 10px;
+`
+
+export const HiddenRange = styled.input`
+  width: 100%;
+  background-color: transparent;
+  z-index: 3;
+  position: relative;
+  opacity: 0;
+`
+
+export const Progress = styled.div<Partial<CSS.Properties & { percentage: number }>>`
+  background-color: ${({ theme }) => theme.primary1};
+  width: 100%;
+  max-width: ${(props) => props.percentage}%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  transition: max-width 0.2s;
+`
+
+export const ProgressVal = styled.span`
+  display: inline-block;
+  color: ${({ theme }) => theme.text1};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  font-weight: bold;
+  font-size: 16px;
+`
+
+export const Label = styled.a<Partial<CSS.Properties & { position: any }>>`
+  cursor: pointer;
+  position: absolute;
+  font-size: 12px;
+  color: ${({ theme }) => theme.text1};
+  top: 10px;
+  left: ${(props) => props.position}%;
+  transform: translateX(-50%);
+  font-weight: bold;
+  text-decoration: underline;
+
+  &:first-child {
+    transform: none;
+  }
+  &:nth-last-child(2) {
+    transform: translateX(-100%);
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+`
diff --git a/src/custom/pages/Profile/index.tsx b/src/custom/pages/Profile/index.tsx
index 8a4faa4ec..65428893a 100644
--- a/src/custom/pages/Profile/index.tsx
+++ b/src/custom/pages/Profile/index.tsx
@@ -33,6 +33,8 @@ import AffiliateStatusCheck from 'components/AffiliateStatusCheck'
 import { useHasOrders } from 'api/gnosisProtocol/hooks'
 import CowProtocolLogo from 'components/CowProtocolLogo'
 import { Title } from 'components/Page'
+import { ProgressBar } from 'components/ProgressBar'
+import { useState } from 'react'
 import { useTokenBalance } from 'state/wallet/hooks'
 import { V_COW } from 'constants/tokens'
 import { AMOUNT_PRECISION } from 'constants/index'
@@ -44,6 +46,7 @@ export default function Profile() {
   const lastUpdated = useTimeAgo(profileData?.lastUpdated)
   const isTradesTooltipVisible = account && chainId == 1 && !!profileData?.totalTrades
   const hasOrders = useHasOrders(account)
+  const [percentage, setPercentage] = useState(0)
 
   const vCowBalance = useTokenBalance(account || undefined, chainId ? V_COW[chainId] : undefined)
 
@@ -217,6 +220,7 @@ export default function Profile() {
           </GridWrap>
           {!account && <Web3Status openOrdersPanel={() => console.log('TODO')} />}
         </GridWrap>
+        <ProgressBar onPercentageClick={setPercentage} percentage={percentage} />
       </Wrapper>
     </Container>
   )