diff --git a/package.json b/package.json
index 7476f0025..fe2600931 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
     "@emotion/styled": "^11",
     "@ethersproject/web": "^5.4.0",
     "@synthetixio/synpress": "^1.2.0",
+    "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-slick": "^0.23.9",
     "@walletconnect/web3-provider": "^1.6.5",
     "awesome-debounce-promise": "^2.1.0",
     "axios": "^0.21.1",
diff --git a/src/app/components/copy-string/CopyString.style.tsx b/src/app/components/copy-string/CopyString.style.tsx
new file mode 100644
index 000000000..0dd856209
--- /dev/null
+++ b/src/app/components/copy-string/CopyString.style.tsx
@@ -0,0 +1,10 @@
+import { BoxProps } from '@chakra-ui/react';
+
+export const CopyWrapperStyle: BoxProps = {
+  borderRadius: '10px',
+  padding: '6px 8px',
+  _hover: {
+    bg: 'rgba(0, 0, 0, 0.05)',
+  }
+}
+
diff --git a/src/app/components/copy-string/CopyString.tsx b/src/app/components/copy-string/CopyString.tsx
new file mode 100644
index 000000000..6e6516db4
--- /dev/null
+++ b/src/app/components/copy-string/CopyString.tsx
@@ -0,0 +1,35 @@
+import { Box, Image, Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import copyIcon from "@assets/images/copy1.svg";
+import * as styles from './CopyString.style';
+
+interface ICopyStringProps {
+  str: string;
+}
+
+export const CopyString = ({ str }: ICopyStringProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleOnCopy = () => {
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  }
+
+  return (
+    <CopyToClipboard text={str} onCopy={handleOnCopy}>
+      <Box display='flex' alignItems='center' cursor='pointer' gap={1} {...styles.CopyWrapperStyle}>
+        <Image
+          src={copyIcon}
+          alt="Copy to clipboard icon"
+          boxSize='20px'
+        />
+        <Text fontSize='12px' lineHeight='18px' fontWeight={500} color='rgba(0, 0, 0, 0.5)'>
+          {copied ? 'Copied!' : 'Copy URL'}
+        </Text>
+      </Box>
+    </CopyToClipboard>
+  );
+};
diff --git a/src/app/components/copy-string/index.ts b/src/app/components/copy-string/index.ts
new file mode 100644
index 000000000..b98e4e5a9
--- /dev/null
+++ b/src/app/components/copy-string/index.ts
@@ -0,0 +1 @@
+export * from './CopyString';
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index c8d84e572..d4a2ad94b 100644
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -6,6 +6,7 @@ export * from './checkbox';
 export * from './circular-progress';
 export * from './collection-approve';
 export * from './collection-preview';
+export * from './copy-string';
 export * from './currency-input';
 export * from './currency-select';
 export * from './date-time-picker';
diff --git a/src/app/modules/auctions/index.ts b/src/app/modules/auctions/index.ts
new file mode 100644
index 000000000..23c7929ac
--- /dev/null
+++ b/src/app/modules/auctions/index.ts
@@ -0,0 +1 @@
+export * from './pages';
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/ActiveAuctionLandingPage.tsx b/src/app/modules/auctions/pages/active-auction-landing-page/ActiveAuctionLandingPage.tsx
new file mode 100644
index 000000000..47049043c
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/ActiveAuctionLandingPage.tsx
@@ -0,0 +1,17 @@
+import { Box } from '@chakra-ui/react';
+import { OpenGraph } from '@app/components';
+import { ActionSection, CreatorSection, HeroSection, TiersSection } from './components';
+
+export const ActiveAuctionLandingPage = () => {
+
+  return (
+    <Box layerStyle={'StoneBG'}>
+      {/* TODO - set open graph correctly */}
+      {/* <OpenGraph title={'Universe Minting - Products - Auction House'} /> */}
+      <HeroSection />
+      <TiersSection />
+      <CreatorSection />
+      <ActionSection />
+    </Box>
+  );
+};
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/action-section/ActionSection.styles.tsx b/src/app/modules/auctions/pages/active-auction-landing-page/components/action-section/ActionSection.styles.tsx
new file mode 100644
index 000000000..9a95012a0
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/action-section/ActionSection.styles.tsx
@@ -0,0 +1,28 @@
+import { BoxProps, ButtonProps, ContainerProps, HeadingProps, TextProps } from '@chakra-ui/react';
+
+export const WrapperStyle: BoxProps = {
+  bg: 'linear-gradient(103.48deg, rgba(240, 233, 57, 0.16) 0%, rgba(254, 176, 254, 0.16) 49.86%, rgba(66, 164, 255, 0.16) 100%)',
+  padding: '44px 0',
+};
+
+export const ContainerStyle: ContainerProps = {
+  alignItems: 'center',
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'space-between',
+  margin: '0 auto',
+  maxW: '1110px',
+  padding: { base: '0 20px', xl: '0' },
+};
+
+export const HeadingStyle: HeadingProps = {
+  fontSize: '20px',
+  lineHeight: '24px',
+  fontWeight: 600,
+  marginBottom: { base: '20px', md: '0' },
+};
+
+export const ButtonStyle: ButtonProps = {
+  boxShadow: 'lg',
+  w: { base: '100%', md: 'fit-content' },
+};
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/action-section/ActionSection.tsx b/src/app/modules/auctions/pages/active-auction-landing-page/components/action-section/ActionSection.tsx
new file mode 100644
index 000000000..b20246d41
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/action-section/ActionSection.tsx
@@ -0,0 +1,22 @@
+import { Box, Button, Container, Heading } from '@chakra-ui/react';
+import { useCallback } from 'react';
+
+import * as styles from './ActionSection.styles';
+
+export const ActionSection = () => {
+
+  const handlePlaceBid = useCallback(() => {
+    // TODO - BE implementation
+  }, []);
+
+  return (
+    <Box {...styles.WrapperStyle}>
+      <Container {...styles.ContainerStyle}>
+        <Heading {...styles.HeadingStyle}>Bid to win 1 of 3 NFT bundles</Heading>
+        <Button {...styles.ButtonStyle} onClick={handlePlaceBid}>
+          Place a bid
+        </Button>
+      </Container>
+    </Box>
+  );
+};
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/action-section/index.ts b/src/app/modules/auctions/pages/active-auction-landing-page/components/action-section/index.ts
new file mode 100644
index 000000000..3073f471d
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/action-section/index.ts
@@ -0,0 +1 @@
+export * from './ActionSection';
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/creator-section/CreatorSection.styles.tsx b/src/app/modules/auctions/pages/active-auction-landing-page/components/creator-section/CreatorSection.styles.tsx
new file mode 100644
index 000000000..c5aacb1c4
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/creator-section/CreatorSection.styles.tsx
@@ -0,0 +1,39 @@
+import { BoxProps, ButtonProps, ContainerProps, HeadingProps } from "@chakra-ui/react";
+
+export const WrapperStyle: BoxProps = {
+  bg: '#fff',
+  padding: { base: '10px 0 60px 0', lg: '20px 0 120px 0' },
+};
+
+export const ContainerStyle: ContainerProps = {
+  margin: '0 auto',
+  maxW: '1110px',
+  padding: { base: '0 20px', xl: '0' },
+};
+
+export const HeadingStyle: HeadingProps = {
+  fontSize: {
+    lg: '32px',
+    md: '26px',
+    base: '20px',
+  },
+  lineHeight: {
+    lg: '40px',
+    md: '32px',
+    base: '24px',
+  },
+  fontWeight: 600,
+  marginBottom: '8px',
+};
+
+export const SocialButtonStyle: ButtonProps = {
+  padding: '8px',
+  _hover: {
+    bg: 'rgba(0, 0, 0, .04)'
+  },
+  sx: {
+    '.chakra-button__icon': {
+      margin: '0'
+    }
+  }
+};
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/creator-section/CreatorSection.tsx b/src/app/modules/auctions/pages/active-auction-landing-page/components/creator-section/CreatorSection.tsx
new file mode 100644
index 000000000..53ce34a8c
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/creator-section/CreatorSection.tsx
@@ -0,0 +1,43 @@
+import { Box, Button, Container, Heading, Image, Text } from "@chakra-ui/react";
+
+import * as styles from './CreatorSection.styles';
+import React from "react";
+import CreatorAvatarImage from '@assets/images/_MOCK_AUCTION_CREATOR2.png';
+import twitterIcon from "@assets/images/icons_twitter.svg";
+import instagramIcon from '@assets/images/instagram-outlined.svg';
+
+export const CreatorSection = () => {
+
+  return (
+    <Box {...styles.WrapperStyle}>
+      <Container {...styles.ContainerStyle}>
+        <Box display="flex" alignItems={{ base: 'flex-start', md: 'center' }} flexDirection={{ base: 'column', md: 'row' }} gap={{ base: 6, md: 12 }} my={4} fontWeight={700}>
+          <Image
+            src={CreatorAvatarImage}
+            alt={'User'}
+            borderRadius={'12px'}
+            boxSize={{ base: '70px', md: '200px' }}
+          />
+          <Box>
+            <Heading {...styles.HeadingStyle}>About Justin 3LAU</Heading>
+            <Text fontSize="16px" lineHeight="24px" fontWeight={400} color="rgba(0, 0, 0, 0.6)">Cras vel eget vitae quis scelerisque arcu ut. Tristique velit nec sed sit massa. Odio molestie velit purus at blandit. Lacus, fusce imperdiet velit augue neque tincidunt diam fringilla in. Natoque ipsum ipsum eget pellentesque. Magna felis, praesent ornare tincidunt nunc.</Text>
+            <Box display="flex" gap={2} mt={4}>
+              <Button
+                variant="simpleOutline"
+                leftIcon={<Image src={instagramIcon} alt="Arrow" />}
+                mr={1}
+                {...styles.SocialButtonStyle}
+              />
+              <Button
+                variant="simpleOutline"
+                leftIcon={<Image src={twitterIcon} alt="Arrow" />}
+                mr={1}
+                {...styles.SocialButtonStyle}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/creator-section/index.ts b/src/app/modules/auctions/pages/active-auction-landing-page/components/creator-section/index.ts
new file mode 100644
index 000000000..e570ec37a
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/creator-section/index.ts
@@ -0,0 +1 @@
+export * from './CreatorSection';
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/hero-section/HeroSection.styles.tsx b/src/app/modules/auctions/pages/active-auction-landing-page/components/hero-section/HeroSection.styles.tsx
new file mode 100644
index 000000000..f93dadba6
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/hero-section/HeroSection.styles.tsx
@@ -0,0 +1,235 @@
+import { BoxProps, ButtonProps, ContainerProps, HeadingProps, TextProps } from "@chakra-ui/react";
+
+export const WrapperStyle: BoxProps = {
+  bg: 'linear-gradient(103.48deg, rgba(240, 233, 57, 0.16) 0%, rgba(254, 176, 254, 0.16) 49.86%, rgba(66, 164, 255, 0.16) 100%)',
+  padding: '80px 0',
+};
+
+export const SliderArrowsStyle: ButtonProps = {
+  padding: '8px',
+  position: 'absolute',
+  top: '35%',
+  _hover: {
+    bg: '#fff',
+  },
+  sx: {
+    '&.u-left': {
+      left: '-25px',
+    },
+    '&.u-right': {
+      right: '-25px',
+    },
+    '.chakra-button__icon': {
+      margin: '0'
+    }
+  }
+}
+
+export const AuctionItemStyle: BoxProps = {
+  bg: 'transparent',
+  border: '1px solid rgba(0, 0, 0, 0.1)',
+  borderRadius: '12px',
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  margin: '10px',
+  padding: '10px',
+  position: 'relative',
+  _hover: {
+    bg: '#fff',
+  },
+  sx: {
+    '&.u-active': {
+      bg: '#fff',
+      _before: {
+        backgroundImage: 'none',
+        boxShadow: 'none',
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: 'inherit',
+        padding: '3px',
+        background: 'linear-gradient(101deg,#bceb00,#00eaea)',
+        WebkitMask: 'linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)',
+        WebkitMaskComposite: 'xor',
+        maskComposite: 'exclude',
+      },
+    }
+  }
+};
+
+export const ActiveAuctionIconStyle: BoxProps = {
+  borderRadius: '50%',
+  bg: 'linear-gradient(135deg, #BCEB00 15.57%, #00EAEA 84.88%)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '20px',
+  height: '20px',
+  position: 'absolute',
+  top: '-8px',
+  right: '-8px',
+}
+
+export const ContainerStyle: ContainerProps = {
+  margin: '0 auto',
+  maxW: '1110px',
+  padding: { base: '0 20px', md: '0 30px', lg: '0' },
+};
+
+export const TierWrapperStyle: BoxProps = {
+  display: 'flex',
+  flexDirection: {
+    base: 'column',
+    md: 'row',
+  },
+  alignItems: {
+    base: 'flex-start',
+    md: 'center',
+  },
+  sx: {
+    '> *': {
+      flex: '1',
+    }
+  }
+};
+
+export const AuctionHeadingStyle: HeadingProps = {
+  fontSize: {
+    base: '20px',
+    md: '26px',
+  },
+  lineHeight: {
+    base: '24px',
+    md: '32px',
+  },
+  fontWeight: 600,
+};
+
+export const TopBiddersStyle: BoxProps = {
+  bg: '#fff',
+  borderRadius: '12px',
+  boxShadow: '0px 10px 36px rgba(136, 120, 172, 0.14)',
+  marginTop: '20px',
+  paddingTop: '32px',
+  position: 'relative',
+  _before: {
+    backgroundImage: 'none',
+    boxShadow: 'none',
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 'inherit',
+    padding: '3px',
+    background: 'linear-gradient(90deg, #2AD0CA 0%, #E1F664 22.92%, #FEB0FE 46.88%, #ABB3FC 68.23%, #5DF7A4 87.5%, #58C4F6 100%)',
+    WebkitMask: 'linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)',
+    WebkitMaskComposite: 'xor',
+    maskComposite: 'exclude',
+  },
+};
+
+export const BiddersListStyle: BoxProps = {
+  height: '200px',
+  margin: '0 32px',
+  overflow: 'auto'
+};
+
+export const SingleBidderStyle: BoxProps = {
+  borderTop: '1px solid rgba(0, 0, 0, 0.1)',
+  padding: '10px 0',
+  _first: {
+    border: 'none',
+  }
+};
+
+export const SingleBidderVisibleInfoStyle: BoxProps = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+};
+
+export const BidderBadgeStyle: TextProps = {
+  borderRadius: '20px',
+  fontSize: '10px',
+  lineHeight: '12px',
+  fontWeight: '600',
+  padding: '2px 6px',
+  sx: {
+    '&.u-platinum': {
+      border: '1px solid #80CCDF',
+      color: '#80CCDF',
+    },
+
+    '&.u-gold': {
+      border: '1px solid #DDBC45',
+      color:'#DDBC45',
+    },
+
+    '&.u-silver': {
+      border: '1px solid #BCBCBC',
+      color:'#BCBCBC',
+    }
+  }
+};
+
+export const ToggleBidButtonStyle: ButtonProps = {
+  padding: '8px',
+  sx: {
+    '&.u-flipped': {
+      transform: 'rotate(180deg)',
+    },
+    '.chakra-button__icon': {
+      margin: '0'
+    }
+  }
+};
+
+export const UserBidStyle: BoxProps = {
+  border: '1px solid #E5E5E5',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexDirection: {
+    base: 'column',
+    md: 'row',
+  },
+  padding: '32px',
+  sx: {
+    '> *': {
+      width: {
+        base: '100%',
+        md: 'auto',
+      }
+    }
+  }
+};
+
+export const BidButtonStyle: ButtonProps = {
+  boxShadow: 'lg',
+  padding: '11px 16px',
+  w: { base: '100%', md: 'fit-content' },
+};
+
+export const CancelButtonStyle: ButtonProps = {
+  border: '1px solid red',
+  boxShadow: 'none',
+  padding: '11px 12px',
+  '_before': {
+    background: 'transparent'
+  },
+  '_hover': {
+    background: 'rgba(255, 73, 73, 0.1)'
+  },
+  '_focus': {
+    background: 'rgba(255, 73, 73, 0.1)'
+  },
+  '_active': {
+    background: 'rgba(255, 73, 73, 0.1)'
+  }
+};
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/hero-section/HeroSection.tsx b/src/app/modules/auctions/pages/active-auction-landing-page/components/hero-section/HeroSection.tsx
new file mode 100644
index 000000000..7527a6004
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/hero-section/HeroSection.tsx
@@ -0,0 +1,252 @@
+import { Box, Button, Container, Heading, Image, Text, Tooltip } from "@chakra-ui/react";
+import React, { useCallback, useState } from "react";
+import Slider, { CustomArrowProps } from 'react-slick';
+
+import * as styles from './HeroSection.styles';
+import { CopyString, TokenIcon } from "@app/components";
+
+import auctionLPlaceholder from '@assets/images/auction-lp-placeholder.png';
+import auctionTierPlaceholder from '@assets/images/auction-tier-placeholder.png';
+import checkIcon from '@assets/images/check-black.svg';
+import CreatorAvatarImage from '@assets/images/_MOCK_AUCTION_CREATOR2.png';
+import arrowDown from '@assets/images/arrow-down.svg';
+import cancelIcon from '@assets/images/cancel-icon.svg';
+import { TOKENS_MAP } from "@app/constants";
+import { useMedia } from "react-use";
+import { breakpoints } from "@app/theme/constants";
+import leftArrow from "@assets/images/marketplace/bundles-left-arrow.svg";
+import rightArrow from "@assets/images/marketplace/bundles-right-arrow.svg";
+
+const BiddersList = () => {
+  return (
+    <Box {...styles.BiddersListStyle}>
+      { [...Array(8)].map((a, i) =>{
+        return <SingleBidder key={i} />
+      })}
+    </Box>
+  )
+}
+
+const SingleBidder = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleDetails = (() => {
+    setIsVisible(!isVisible)
+  });
+
+  return (
+    <Box {...styles.SingleBidderStyle}>
+      <Box {...styles.SingleBidderVisibleInfoStyle}>
+        <Box display="flex" alignItems="flex-start" flexDirection={{ base: 'column', md: 'row' }} gap={1} fontSize="14px" lineHeight="20px">
+          <Text as='span' fontWeight="600">1. 0x...5492</Text>
+          {/* TODO - Change className accordingly: u-platinum | u-gold | u-silver */}
+          <Text as='span' {...styles.BidderBadgeStyle} className="u-platinum">Platinum</Text>
+        </Box>
+        <Box display="flex" alignItems="center" gap={2} fontSize="14px" lineHeight="20px">
+          <Box display="flex" alignItems={{ base: 'flex-start', md: 'center' }} flexDirection={{ base: 'column', md: 'row' }} gap={1}>
+            <Box display="flex" gap={1}>
+              {/* TODO - display colored token icon if possible */}
+              <TokenIcon ticker={TOKENS_MAP.ETH.ticker} size={20} />
+              <Box as={'strong'} color={'black'}>42</Box>
+            </Box>
+            <Text as='span' color='rgba(0, 0, 0, 0.4)' fontSize="10px" lineHeight="14px">~$48,580</Text>
+          </Box>
+          <Button
+            className={isVisible ? 'u-flipped' : ''}
+            variant="simpleOutline"
+            size="xs"
+            leftIcon={<Image src={arrowDown} alt="Arrow" />}
+            mr={1}
+            onClick={toggleDetails}
+            {...styles.ToggleBidButtonStyle}
+          />
+        </Box>
+      </Box>
+      {
+        isVisible && (
+          <Box display='flex'  alignItems='flex-start' alignContent='flex-start' flexWrap='wrap' my={2}>
+            { [...Array(8)].map((a, i) =>{
+              return <Image
+                key={i}
+                src={auctionTierPlaceholder}
+                alt={'Premium tier'}
+                borderRadius={'12px'}
+                m={1}
+                boxSize="70px"
+              />
+            })}
+          </Box>
+        )
+      }
+    </Box>
+  )
+}
+
+const BiddersBlock = () => {
+
+  const handlePlaceBid = useCallback(() => {
+    // TODO - BE implementation
+  }, []);
+
+  return (
+    <Box {...styles.TopBiddersStyle}>
+      <Box display="flex" alignItems="center" justifyContent="space-between" px="32px" mb={4}>
+        <Heading fontSize="16px" lineHeight="20px">Top 5 bidders</Heading>
+        <Text fontSize="14px" lineHeight="20px" fontWeight={500} textDecoration="underline" cursor="pointer">View all bids</Text>
+      </Box>
+      <BiddersList />
+      <Box gap={2} {...styles.UserBidStyle}>
+        <Box display="flex" gap={2} fontSize="16px" lineHeight="24px">
+          <Text as='span' fontWeight="600">Your bid:</Text>
+          {/* TODO - display colored token icon if possible */}
+          <TokenIcon ticker={TOKENS_MAP.ETH.ticker} size={24} />
+          <Box as={'strong'} color={'black'}>2.3</Box>
+          <Text as='span' color='rgba(0, 0, 0, 0.4)'>(#25 in the list)</Text>
+        </Box>
+        <Box display="flex">
+          <Button {...styles.BidButtonStyle} onClick={handlePlaceBid}>
+            Place a bid
+          </Button>
+          <Tooltip label="Cancel my bid" aria-label='Cancel my bid' fontSize='md'>
+            <Button
+              variant="ghost"
+              leftIcon={<Image src={cancelIcon} alt="Cancel" />}
+              ml={3}
+              onClick={() => {}}
+              {...styles.CancelButtonStyle}
+            />
+          </Tooltip>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+const PrevArrow = (props: CustomArrowProps) => {
+  const { onClick } = props;
+
+  return (
+    <Button
+      className={'u-left'}
+      variant="simpleOutline"
+      size="xs"
+      leftIcon={<Image src={leftArrow} alt="Left arrow" />}
+      onClick={onClick}
+      {...styles.SliderArrowsStyle}
+    />
+  );
+}
+
+const NextArrow = (props: CustomArrowProps) => {
+  const { onClick } = props;
+
+  return (
+    <Button
+      className={'u-right'}
+      variant="simpleOutline"
+      size="xs"
+      leftIcon={<Image src={rightArrow} alt="Right arrow" />}
+      onClick={onClick}
+      {...styles.SliderArrowsStyle}
+    />
+  );
+}
+
+export const HeroSection = () => {
+
+  const isTablet = useMedia(`(max-width: ${breakpoints.lg})`);
+  const isMobile = useMedia(`(max-width: ${breakpoints.md})`);
+
+  const settings = {
+    dots: false,
+    infinite: false,
+    speed: 500,
+    slidesToShow: 4,
+    slidesToScroll: 1,
+    initialSlide: 0,
+    nextArrow: <NextArrow />,
+    prevArrow: <PrevArrow />,
+    responsive: [
+      {
+        breakpoint: 960,
+        settings: {
+          slidesToShow: 2,
+        }
+      }
+    ]
+  };
+
+  return (
+    <Box {...styles.WrapperStyle}>
+      <Container {...styles.ContainerStyle}>
+        { !isMobile && (
+          <Box mb={14}>
+            <Slider {...settings}>
+              { [...Array(10)].map((a, i) =>{
+                return <div key={i}><Box  gap={2} {...styles.AuctionItemStyle} className={i === 2 ? 'u-active' : ''}>
+                  {
+                    i === 2 && (
+                      <Box {...styles.ActiveAuctionIconStyle}>
+                        <Image src={checkIcon} alt="Active" />
+                      </Box>
+                    )
+                  }
+                  <Image
+                    src={auctionLPlaceholder}
+                    alt={'Premium tier'}
+                    borderRadius={'12px'}
+                    boxSize={'40px'}
+                  />
+                  <Box>
+                    <Text fontSize="14px" lineHeight="20px" fontWeight="700">Auction Title Two</Text>
+                    <Text fontSize="12px" lineHeight="18px" color="rgba(0, 0, 0, 0.6)">Ends in 2d : 8h : 10m : 15s</Text>
+                  </Box>
+                </Box></div>
+              })}
+            </Slider>
+          </Box>
+        )}
+        <Box {...styles.TierWrapperStyle}>
+          <Box display='flex' justifyContent='center' alignItems='flex-start' alignContent='flex-start'>
+            <Image
+              src={auctionLPlaceholder}
+              alt={'Premium tier'}
+              borderRadius={'12px'}
+              boxSize={{ base: '100%', lg: '445px' }}
+            />
+          </Box>
+          <Box>
+            <Heading {...styles.AuctionHeadingStyle} mb={3}>Auction Title Two</Heading>
+            <Box display="flex" alignItems="center" gap={2} mb={3}>
+              <Image
+                src={CreatorAvatarImage}
+                alt='Auction creator'
+                borderRadius='50%'
+                boxSize='30px'
+              />
+              <Box display="flex" alignItems="center" gap={1}>
+                <Text fontSize='14px' lineHeight='20px'>by </Text>
+                <Text fontSize='14px' lineHeight='20px' fontWeight={600} textDecoration='underline'>Justin 3LAU</Text>
+              </Box>
+            </Box>
+            <Box display="flex" alignItems={{ base: 'flex-start', lg: 'center' }} flexDirection={{ base: 'column', lg: 'row' }} gap={2} my={4} fontWeight={700}>
+              <Text fontSize='14px' lineHeight='20px' fontWeight={700}>Auction ends in: </Text>
+              <Box display="flex" alignItems="center" gap={2}>
+                <Text border='1px solid rgba(0, 0, 0, 0.1)' borderRadius='10px' p="3px 12px">2d</Text>
+                <Text>:</Text>
+                <Text border='1px solid rgba(0, 0, 0, 0.1)' borderRadius='10px' p="3px 12px">8h</Text>
+                <Text>:</Text>
+                <Text border='1px solid rgba(0, 0, 0, 0.1)' borderRadius='10px' p="3px 12px">10m</Text>
+                <Text>:</Text>
+                <Text border='1px solid rgba(0, 0, 0, 0.1)' borderRadius='10px' p="3px 12px">15s</Text>
+              </Box>
+              <CopyString str="Copy string" />
+            </Box>
+            {!isTablet && <BiddersBlock />}
+          </Box>
+        </Box>
+        {isTablet && <BiddersBlock />}
+      </Container>
+    </Box>
+  );
+};
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/hero-section/index.ts b/src/app/modules/auctions/pages/active-auction-landing-page/components/hero-section/index.ts
new file mode 100644
index 000000000..0fba2be0b
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/hero-section/index.ts
@@ -0,0 +1 @@
+export * from './HeroSection';
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/index.ts b/src/app/modules/auctions/pages/active-auction-landing-page/components/index.ts
new file mode 100644
index 000000000..6d5ec3356
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/index.ts
@@ -0,0 +1,4 @@
+export * from './action-section';
+export * from './creator-section';
+export * from './hero-section';
+export * from './tiers-section';
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/tiers-section/TiersSection.styles.tsx b/src/app/modules/auctions/pages/active-auction-landing-page/components/tiers-section/TiersSection.styles.tsx
new file mode 100644
index 000000000..5078af7ec
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/tiers-section/TiersSection.styles.tsx
@@ -0,0 +1,155 @@
+import { BoxProps, ButtonProps, ContainerProps, HeadingProps, TextProps } from "@chakra-ui/react";
+
+export const WrapperStyle: BoxProps = {
+  bg: '#fff',
+  padding: { base: '60px 0', lg: '120px 0' },
+};
+
+export const ContainerStyle: ContainerProps = {
+  margin: '0 auto',
+  maxW: '1110px',
+  padding: { base: '0 20px', xl: '0' },
+};
+
+export const HeadingWrapperStyle: BoxProps = {
+  textAlign: 'center',
+  marginBottom: '40px',
+  padding: { base: '0 20px', md: '0 80px', xl: '0' },
+};
+
+export const HeadingStyle: HeadingProps = {
+  fontSize: { base: '20px', md: '26px'  },
+  lineHeight: '32px',
+  fontWeight: 600,
+  marginBottom: '8px',
+};
+
+export const TextStyle: TextProps = {
+  color: 'rgba(0, 0, 0, 0.6)',
+  fontSize: '16px',
+  lineHeight: '24px',
+  marginBottom: '20px',
+};
+
+export const TierWrapperStyle: BoxProps = {
+  border: '1px solid rgba(0, 0, 0, 0.05)',
+  boxShadow:'0px 10px 36px rgba(136, 120, 172, 0.14)',
+  borderRadius: '12px',
+  display: 'flex',
+  flexDirection: {
+    base: 'column',
+    md: 'row',
+  },
+  margin: '16px 0',
+  padding: {
+    base: '20px',
+    md: '40px 20px',
+  },
+  sx: {
+    '> *': {
+      flex: '1',
+    }
+  }
+};
+
+export const TierImagesWrapperStyle: BoxProps = {
+  display: 'flex',
+  justifyContent:'space-evenly',
+  maxWidth: {
+    base: '150px',
+    lg: '330px',
+  },
+  marginBottom: {
+    base: '20px',
+    lg: '0',
+  },
+  position: 'relative',
+  sx: {
+    'img': {
+      marginLeft: {
+        base: '-60px',
+        lg: '-80px',
+      },
+      '_first': {
+        marginLeft: '0',
+      }
+    }
+  }
+};
+
+export const MoreImagesBubbleStyle: BoxProps = {
+  background: '#FFFFFF',
+  borderRadius: '50%',
+  boxShadow:'0px 10px 36px rgba(0, 0, 0, 0.1)',
+  fontWeight: '700',
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  position: 'absolute',
+  top: '50%',
+  marginTop: '-22px',
+  right: {
+    base: '-115px',
+    lg: '-80px',
+  },
+  width: '45px',
+  height: '45px',
+  cursor: 'pointer',
+  '_hover': {
+    boxShadow:'0px 10px 36px rgba(0, 0, 0, 0.3)',
+  }
+};
+
+export const TierSymbolStyle: BoxProps = {
+  borderRadius: '50%',
+  display: 'block',
+  height: '24px',
+  width: '24px',
+  marginRight: '8px',
+  sx: {
+    '&.u-platinium': {
+      bg: '#80CCDF',
+    },
+
+    '&.u-gold': {
+      bg:'#DDBC45',
+    },
+
+    '&.u-silver': {
+      bg:'#BCBCBC',
+    }
+  }
+};
+
+export const TierHeadingStyle: HeadingProps = {
+  fontSize: '20px',
+  lineHeight: '24px',
+  fontWeight: 600,
+};
+
+export const TierDetailsWrapperStyle: BoxProps = {
+  display: 'flex',
+  flexWrap: 'wrap',
+};
+
+export const TierDetailStyle: BoxProps = {
+  background: 'rgba(0, 0, 0, 0.05)',
+  borderRadius: '100px',
+  fontSize: '14px',
+  lineHeight: '20px',
+  fontWeight: '700',
+  margin: '4px 8px 4px 0',
+  padding: '6px 16px',
+};
+
+export const TierTextStyle: TextProps = {
+  color: 'rgba(0, 0, 0, 0.6)',
+  fontSize: '14px',
+  lineHeight: '20px',
+};
+
+export const TierButtonStyle: ButtonProps = {
+  boxShadow: 'lg',
+  w: { base: '100%', md: 'fit-content' },
+};
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/tiers-section/TiersSection.tsx b/src/app/modules/auctions/pages/active-auction-landing-page/components/tiers-section/TiersSection.tsx
new file mode 100644
index 000000000..ea5de8783
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/tiers-section/TiersSection.tsx
@@ -0,0 +1,124 @@
+import { Box, Button, Container, Heading, Image, Text } from "@chakra-ui/react";
+
+import * as styles from './TiersSection.styles';
+import React, { useCallback } from "react";
+import auctionTierPlaceholder from '@assets/images/auction-tier-placeholder.png';
+
+export const TiersSection = () => {
+
+  const handlePreviewNFTs = useCallback(() => {
+    // TODO
+  }, []);
+
+  return (
+    <Box {...styles.WrapperStyle}>
+      <Container {...styles.ContainerStyle}>
+        <Box {...styles.HeadingWrapperStyle}>
+          <Heading {...styles.HeadingStyle}>Reward tiers</Heading>
+          <Text {...styles.TextStyle}>Each Tier has different rewards and different winners! Look through the Tiers and the NFTs for each.</Text>
+        </Box>
+        <Box {...styles.TierWrapperStyle}>
+          <Box display='flex' justifyContent='center' alignItems='flex-start' alignContent='flex-start'>
+            <Box {...styles.TierImagesWrapperStyle}>
+              <Image
+                src={auctionTierPlaceholder}
+                alt={'Premium tier'}
+                borderRadius={'12px'}
+                boxSize={{ base: '150px', lg: '200px' }}
+              />
+              <Image
+                src={auctionTierPlaceholder}
+                alt={'Premium tier'}
+                borderRadius={'12px'}
+                boxSize={{ base: '150px', lg: '200px' }}
+              />
+              <Image
+                src={auctionTierPlaceholder}
+                alt={'Premium tier'}
+                borderRadius={'12px'}
+                boxSize={{ base: '150px', lg: '200px' }}
+              />
+              <Box {...styles.MoreImagesBubbleStyle}>
+                <Text as="span" fontSize="16px" lineHeight="16px">+12</Text>
+                <Text as="span" fontSize="12px" lineHeight="12px">more</Text>
+              </Box>
+            </Box>
+          </Box>
+          <Box>
+            <Box display='flex' alignItems='center' mb={4}>
+              <Box {...styles.TierSymbolStyle} className='u-platinium' />
+              <Heading {...styles.TierHeadingStyle}>Platinum tier</Heading>
+            </Box>
+            <Box {...styles.TierDetailsWrapperStyle} mb={4}>
+              <Box {...styles.TierDetailStyle}>Bidders #1-5</Box>
+              <Box {...styles.TierDetailStyle}>NFTs: 24</Box>
+              <Box {...styles.TierDetailStyle}>Reserve price: 0-2.3 ETH</Box>
+            </Box>
+            <Text {...styles.TierTextStyle} mb={6}>Amet nibh risus turpis mattis adipiscing. Vitae sit consectetur odio massa fusce scelerisque. Cras ante quisque urna sagittis eu nunc posuere posuere. Proin integer in purus pellentesque.</Text>
+            <Button {...styles.TierButtonStyle} onClick={handlePreviewNFTs}>
+              Preview NFTs
+            </Button>
+          </Box>
+        </Box>
+        <Box {...styles.TierWrapperStyle}>
+          <Box display='flex' justifyContent='center'>
+            <Box {...styles.TierImagesWrapperStyle}>
+              <Image
+                src={auctionTierPlaceholder}
+                alt={'Gold tier'}
+                borderRadius={'12px'}
+                boxSize={{ base: '150px', lg: '200px' }}
+              />
+              <Image
+                src={auctionTierPlaceholder}
+                alt={'Gold tier'}
+                borderRadius={'12px'}
+                boxSize={{ base: '150px', lg: '200px' }}
+              />
+            </Box>
+          </Box>
+          <Box>
+            <Box display='flex' alignItems='center' mb={4}>
+              <Box {...styles.TierSymbolStyle} className='u-gold' />
+              <Heading {...styles.TierHeadingStyle}>Gold tier</Heading>
+            </Box>
+            <Box {...styles.TierDetailsWrapperStyle} mb={4}>
+              <Box {...styles.TierDetailStyle}>Bidders #6-15</Box>
+              <Box {...styles.TierDetailStyle}>NFTs: 16</Box>
+            </Box>
+            <Text {...styles.TierTextStyle} mb={6}>Amet nibh risus turpis mattis adipiscing. Vitae sit consectetur odio massa fusce scelerisque.</Text>
+            <Button {...styles.TierButtonStyle} onClick={handlePreviewNFTs}>
+              Preview NFTs
+            </Button>
+          </Box>
+        </Box>
+        <Box {...styles.TierWrapperStyle}>
+          <Box display='flex' justifyContent='center'>
+            <Box {...styles.TierImagesWrapperStyle}>
+              <Image
+                src={auctionTierPlaceholder}
+                alt={'Silver tier'}
+                borderRadius={'12px'}
+                boxSize={{ base: '150px', lg: '200px' }}
+              />
+            </Box>
+          </Box>
+          <Box>
+            <Box display='flex' alignItems='center' mb={4}>
+              <Box {...styles.TierSymbolStyle} className='u-silver' />
+              <Heading {...styles.TierHeadingStyle}>Silver tier</Heading>
+            </Box>
+            <Box {...styles.TierDetailsWrapperStyle} mb={4}>
+              <Box {...styles.TierDetailStyle}>Bidders #16-35</Box>
+              <Box {...styles.TierDetailStyle}>NFTs: 19</Box>
+            </Box>
+            <Text {...styles.TierTextStyle} mb={6}>Faucibus et. Sagittis condimentum etiam quisque viverra consequat nec pharetra aenean egestas.</Text>
+            <Button {...styles.TierButtonStyle} onClick={handlePreviewNFTs}>
+              Preview NFTs
+            </Button>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/components/tiers-section/index.ts b/src/app/modules/auctions/pages/active-auction-landing-page/components/tiers-section/index.ts
new file mode 100644
index 000000000..65363ccd5
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/components/tiers-section/index.ts
@@ -0,0 +1 @@
+export * from './TiersSection';
diff --git a/src/app/modules/auctions/pages/active-auction-landing-page/index.ts b/src/app/modules/auctions/pages/active-auction-landing-page/index.ts
new file mode 100644
index 000000000..3ada8241c
--- /dev/null
+++ b/src/app/modules/auctions/pages/active-auction-landing-page/index.ts
@@ -0,0 +1 @@
+export * from './ActiveAuctionLandingPage';
diff --git a/src/app/modules/auctions/pages/index.ts b/src/app/modules/auctions/pages/index.ts
new file mode 100644
index 000000000..736be67de
--- /dev/null
+++ b/src/app/modules/auctions/pages/index.ts
@@ -0,0 +1 @@
+export * from './active-auction-landing-page'
diff --git a/src/assets/images/auction-lp-placeholder.png b/src/assets/images/auction-lp-placeholder.png
new file mode 100644
index 000000000..1cdf8e87d
Binary files /dev/null and b/src/assets/images/auction-lp-placeholder.png differ
diff --git a/src/assets/images/auction-tier-placeholder.png b/src/assets/images/auction-tier-placeholder.png
new file mode 100644
index 000000000..fdc75aa3e
Binary files /dev/null and b/src/assets/images/auction-tier-placeholder.png differ
diff --git a/src/assets/images/cancel-icon.svg b/src/assets/images/cancel-icon.svg
new file mode 100644
index 000000000..84c62e983
--- /dev/null
+++ b/src/assets/images/cancel-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 9.25H14.5C14.0858 9.25 13.75 9.58579 13.75 10C13.75 10.4142 14.0858 10.75 14.5 10.75H16C17.5188 10.75 18.75 9.51878 18.75 8V5C18.75 3.48122 17.5188 2.25 16 2.25H4C2.48122 2.25 1.25 3.48122 1.25 5V8C1.25 9.51878 2.48122 10.75 4 10.75H5.5C5.91421 10.75 6.25 10.4142 6.25 10C6.25 9.58579 5.91421 9.25 5.5 9.25H4C3.30964 9.25 2.75 8.69035 2.75 8L2.75 5C2.75 4.30964 3.30964 3.75 4 3.75L16 3.75C16.6904 3.75 17.25 4.30965 17.25 5V8C17.25 8.69036 16.6904 9.25 16 9.25ZM9.46884 18.5295L5.46967 14.5303C5.17678 14.2374 5.17678 13.7626 5.46967 13.4697C5.76256 13.1768 6.23744 13.1768 6.53033 13.4697L9.25 16.1893V7C9.25 6.58579 9.58579 6.25 10 6.25C10.4142 6.25 10.75 6.58579 10.75 7V16.1893L13.4697 13.4697C13.7626 13.1768 14.2374 13.1768 14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303L10.5308 18.5298L10.5303 18.5303C10.5287 18.532 10.5271 18.5336 10.5254 18.5352C10.4552 18.6041 10.3749 18.6565 10.2892 18.6922M9.46884 18.5295C9.47185 18.5325 9.47488 18.5355 9.47793 18.5385C9.47828 18.5388 9.47863 18.5391 9.47899 18.5395C9.54829 18.6065 9.62732 18.6575 9.71143 18.6925C9.80026 18.7295 9.89774 18.75 10 18.75C10.0129 18.75 10.0258 18.7497 10.0386 18.749C10.1265 18.7446 10.2104 18.725 10.2878 18.6928" fill="#FF4949"/>
+</svg>