diff --git a/components/Hero/Hero.js b/components/Hero/Hero.js
index 35179db..6bcd904 100644
--- a/components/Hero/Hero.js
+++ b/components/Hero/Hero.js
@@ -1,104 +1,103 @@
-import React from "react"
-import Link from 'next/link'
-import PropTypes from "prop-types"
+import React from "react";
 import {
+    chakra,
     Box,
+    useColorModeValue,
     Button,
-    Flex,
-    Image,
-    Heading,
     Stack,
+    Image,
     Text,
-} from "@chakra-ui/react"
-import AuthButton from '../AuthButton'
-import { signIn } from "next-auth/client"
+    Icon,
+} from "@chakra-ui/react";
+import { signIn } from 'next-auth/client'
 
-export default function Hero({
-    title,
-    subtitle,
-    image,
-    ctaLink,
-    ctaText,
-    ...rest
-}) {
+const Hero = () => {
     return (
-        <Flex
-            align="center"
-            justify={{ base: "center", md: "space-around", xl: "space-between" }}
-            direction={{ base: "column-reverse", md: "row" }}
-            wrap="no-wrap"
-            minH="70vh"
-            px={8}
-            mb={16}
-            {...rest}
-        >
-            <Stack
-                spacing={4}
-                w={{ base: "80%", md: "40%" }}
-                align={["center", "center", "flex-start", "flex-start"]}
+        <Box px={8} py={24} mx="auto">
+            <Box
+                w={{ base: "full", md: 11 / 12, xl: 9 / 12 }}
+                mx="auto"
+                textAlign={{ base: "left", md: "center" }}
             >
-                <Heading
-                    as="h1"
-                    size="xl"
+                <chakra.h1
+                    mb={6}
+                    fontSize={{ base: "4xl", md: "6xl" }}
                     fontWeight="bold"
-                    color="primary.800"
-                    textAlign={["center", "center", "left", "left"]}
+                    lineHeight="none"
+                    letterSpacing={{ base: "normal", md: "tight" }}
+                    color={useColorModeValue("gray.900", 'gray.100')}
                 >
-                    {title}
-                </Heading>
-                <Heading
-                    as="h2"
-                    size="md"
-                    color="primary.800"
-                    opacity="0.8"
-                    fontWeight="normal"
-                    lineHeight={1.5}
-                    textAlign={["center", "center", "left", "left"]}
-                >
-                    {subtitle}
-                </Heading>
-                <Link href={ctaLink}>
-                    <Button
-                        backgroundColor='teal'
-                        borderRadius="8px"
-                        py="4"
-                        px="4"
-                        lineHeight="1"
-                        size="md"
+                    Your favorite{" "}
+                    <Text
+                        display={{ base: "block", lg: "inline" }}
+                        w="full"
+                        bgClip="text"
+                        bgGradient="linear(to-r, green.400,purple.500)"
+                        fontWeight="extrabold"
                     >
-                        {ctaText}
-                    </Button>
-                </Link>
-                <Text
-                    fontSize="xs"
-                    mt={2}
-                    textAlign="center"
-                    color="primary.800"
-                    opacity="0.6"
+                        CODM
+                    </Text>{" "}
+                    bot.
+                </chakra.h1>
+                <chakra.p
+                    px={{ base: 0, lg: 24 }}
+                    mb={6}
+                    fontSize={{ base: "lg", md: "xl" }}
+                    color={useColorModeValue("gray.600", 'gray.300')}
                 >
-                    No credit card required.
-                </Text>
-            </Stack>
-            <Box w={{ base: "80%", sm: "60%", md: "50%" }} mb={{ base: 12, md: 0 }}>
-                <Image src={image} size="100%" rounded="1rem" shadow="2xl" />
+                    Your favorite CODM bot. Cath.exe is packed to the brim with commands for moderation, stats and of course, CODM.
+                </chakra.p>
+                <Stack
+                    direction={{ base: "column", sm: "row" }}
+                    mb={{ base: 4, md: 8 }}
+                    spacing={2}
+                    justifyContent={{ sm: "left", md: "center" }}
+                >
+                    <Button
+                        as="a"
+                        variant="solid"
+                        colorScheme="blue"
+                        display="inline-flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        w={{ base: "full", sm: "auto" }}
+                        mb={{ base: 2, sm: 0 }}
+                        href={"https://discord.com/api/oauth2/authorize?client_id=800966959268364288&permissions=4231314550&scope=bot%20applications.commands"}
+                        size="lg"
+                    >
+                        Invite Cath
+                        <Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                fillRule="evenodd"
+                                d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                                clipRule="evenodd"
+                            />
+                        </Icon>
+                    </Button>
+                    <Button
+                        as="a"
+                        colorScheme="gray"
+                        display="inline-flex"
+                        alignItems="center"
+                        justifyContent="center"
+                        w={{ base: "full", sm: "auto" }}
+                        mb={{ base: 2, sm: 0 }}
+                        onClick={() => { signIn() }}
+                        size="lg"
+                    >
+                        Sign Up
+                        <Icon boxSize={4} ml={1} viewBox="0 0 20 20" fill="currentColor">
+                            <path
+                                fillRule="evenodd"
+                                d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
+                                clipRule="evenodd"
+                            />
+                        </Icon>
+                    </Button>
+                </Stack>
             </Box>
-        </Flex>
-    )
-}
+        </Box>
+    );
+};
 
-Hero.propTypes = {
-    title: PropTypes.string,
-    subtitle: PropTypes.string,
-    image: PropTypes.string,
-    ctaText: PropTypes.string,
-    ctaLink: PropTypes.string,
-}
-
-Hero.defaultProps = {
-    title: "Hero",
-    subtitle:
-        "This is the subheader section where you describe the basic benefits of your product",
-    image: "https://source.unsplash.com/collection/404339/800x600",
-    ctaText: "Create your account now",
-    ctaLink: "",
-}
+export default Hero;
diff --git a/components/Sidebar/Sidebar.js b/components/Sidebar/Sidebar.js
new file mode 100644
index 0000000..a65f80b
--- /dev/null
+++ b/components/Sidebar/Sidebar.js
@@ -0,0 +1,177 @@
+import {
+    Avatar,
+    Box,
+    Collapse,
+    Drawer,
+    DrawerContent,
+    DrawerOverlay,
+    Flex,
+    Icon,
+    IconButton,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Text,
+    useColorModeValue,
+    useDisclosure,
+} from "@chakra-ui/react";
+import { FaBell } from "react-icons/fa";
+import { AiFillGift } from "react-icons/ai";
+import { FiMenu, FiSearch } from "react-icons/fi";
+import { HiCode } from "react-icons/hi";
+import { MdKeyboardArrowRight, MdHome } from "react-icons/md";
+import React from "react";
+
+export default function Sidebar({children}) {
+    const sidebar = useDisclosure();
+    const integrations = useDisclosure();
+
+    const NavItem = (props) => {
+        const { icon, children, ...rest } = props;
+        return (
+            <Flex
+                align="center"
+                px="4"
+                pl="4"
+                py="3"
+                cursor="pointer"
+                color={useColorModeValue("inherit", "gray.400")}
+                _hover={{
+                    bg: useColorModeValue("gray.100", "gray.900"),
+                    color: useColorModeValue("gray.900", "gray.200"),
+                }}
+                role="group"
+                fontWeight="semibold"
+                transition=".15s ease"
+                {...rest}
+            >
+                {icon && (
+                    <Icon
+                        mr="2"
+                        boxSize="4"
+                        _groupHover={{
+                            color: useColorModeValue("gray.600", "gray.300"),
+                        }}
+                        as={icon}
+                    />
+                )}
+                {children}
+            </Flex>
+        );
+    };
+
+    const SidebarContent = (props) => (
+        <Box
+            as="nav"
+            pos="fixed"
+            top="0"
+            left="0"
+            zIndex="sticky"
+            h="full"
+            pb="10"
+            overflowX="hidden"
+            overflowY="auto"
+            bg={useColorModeValue("white", "gray.800")}
+            borderColor={useColorModeValue("inherit", "gray.700")}
+            borderRightWidth="1px"
+            w="60"
+            {...props}
+        >
+            <Flex px="4" py="5" align="center">
+                <Text
+                    fontSize="2xl"
+                    ml="2"
+                    color={useColorModeValue("brand.500", "white")}
+                    fontWeight="semibold"
+                >
+                    Cath.exe
+                </Text>
+            </Flex>
+            <Flex
+                direction="column"
+                as="nav"
+                fontSize="sm"
+                color="gray.600"
+                aria-label="Main Navigation"
+            >
+                <NavItem icon={MdHome}>Home</NavItem>
+                <NavItem icon={HiCode} onClick={integrations.onToggle}>
+                    Control Panel
+                    <Icon
+                        as={MdKeyboardArrowRight}
+                        ml="auto"
+                        transform={integrations.isOpen && "rotate(90deg)"}
+                    />
+                </NavItem>
+                <Collapse in={integrations.isOpen}>
+                    <NavItem pl="12" py="2">
+                        Main
+                    </NavItem>
+                    <NavItem pl="12" py="2">
+                        Commands
+                    </NavItem>
+                </Collapse>
+                <NavItem icon={AiFillGift}>Coming Soon</NavItem>
+            </Flex>
+        </Box>
+    );
+    return (
+        <Box
+            as="section"
+            bg={useColorModeValue("gray.50", "gray.700")}
+            minH="100vh"
+        >
+            <SidebarContent display={{ base: "none", md: "unset" }} />
+            <Drawer
+                isOpen={sidebar.isOpen}
+                onClose={sidebar.onClose}
+                placement="left"
+            >
+                <DrawerOverlay />
+                <DrawerContent>
+                    <SidebarContent w="full" borderRight="none" />
+                </DrawerContent>
+            </Drawer>
+            <Box ml={{ base: 0, md: 60 }} transition=".3s ease">
+                <Flex
+                    as="header"
+                    align="center"
+                    justify="space-between"
+                    w="full"
+                    px="4"
+                    bg={useColorModeValue("white", "gray.800")}
+                    borderBottomWidth="1px"
+                    borderColor={useColorModeValue("inherit", "gray.700")}
+                    h="14"
+                >
+                    <IconButton
+                        aria-label="Menu"
+                        display={{ base: "inline-flex", md: "none" }}
+                        onClick={sidebar.onOpen}
+                        icon={<FiMenu />}
+                        size="sm"
+                    />
+                    <InputGroup w="96" display={{ base: "none", md: "flex" }}>
+                        <InputLeftElement color="gray.500" children={<FiSearch />} />
+                        <Input placeholder="Search for articles..." />
+                    </InputGroup>
+
+                    <Flex align="center">
+                        <Icon color="gray.500" as={FaBell} cursor="pointer" />
+                        <Avatar
+                            ml="4"
+                            size="sm"
+                            name="anubra266"
+                            src="https://avatars.githubusercontent.com/u/30869823?v=4"
+                            cursor="pointer"
+                        />
+                    </Flex>
+                </Flex>
+
+                <Box as="main" p="4" background={'#1a202c'}>
+                    {children}
+                </Box>
+            </Box>
+        </Box>
+    );
+}
diff --git a/components/Testimonials/Testimonials.js b/components/Testimonials/Testimonials.js
new file mode 100644
index 0000000..f00101c
--- /dev/null
+++ b/components/Testimonials/Testimonials.js
@@ -0,0 +1,169 @@
+import {
+    Avatar,
+    Box,
+    chakra,
+    Container,
+    Flex,
+    Icon,
+    SimpleGrid,
+    useColorModeValue,
+} from '@chakra-ui/react';
+
+const testimonials = [
+    {
+        name: 'John Doe',
+        role: 'Chief Marketing Officer',
+        content:
+            'Remarkable',
+        avatar:
+            'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80',
+    },
+    {
+        name: 'John Doe',
+        role: 'Chief Marketing Officer',
+        content:
+            'Remarkable',
+        avatar:
+            'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80',
+    },
+    {
+        name: 'John Doe',
+        role: 'Chief Marketing Officer',
+        content:
+            'Remarkable',
+        avatar:
+            'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80',
+    },
+    {
+        name: 'John Doe',
+        role: 'Chief Marketing Officer',
+        content:
+            'Remarkable',
+        avatar:
+            'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80',
+    },
+];
+
+const backgrounds = [
+    `url("data:image/svg+xml, %3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'560\' height=\'185\' viewBox=\'0 0 560 185\' fill=\'none\'%3E%3Cellipse cx=\'102.633\' cy=\'61.0737\' rx=\'102.633\' ry=\'61.0737\' fill=\'%23ED64A6\' /%3E%3Cellipse cx=\'399.573\' cy=\'123.926\' rx=\'102.633\' ry=\'61.0737\' fill=\'%23F56565\' /%3E%3Cellipse cx=\'366.192\' cy=\'73.2292\' rx=\'193.808\' ry=\'73.2292\' fill=\'%2338B2AC\' /%3E%3Cellipse cx=\'222.705\' cy=\'110.585\' rx=\'193.808\' ry=\'73.2292\' fill=\'%23ED8936\' /%3E%3C/svg%3E")`,
+    `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='457.367' cy='123.926' rx='102.633' ry='61.0737' transform='rotate(-180 457.367 123.926)' fill='%23ED8936'/%3E%3Cellipse cx='160.427' cy='61.0737' rx='102.633' ry='61.0737' transform='rotate(-180 160.427 61.0737)' fill='%2348BB78'/%3E%3Cellipse cx='193.808' cy='111.771' rx='193.808' ry='73.2292' transform='rotate(-180 193.808 111.771)' fill='%230BC5EA'/%3E%3Cellipse cx='337.295' cy='74.415' rx='193.808' ry='73.2292' transform='rotate(-180 337.295 74.415)' fill='%23ED64A6'/%3E%3C/svg%3E")`,
+    `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='102.633' cy='61.0737' rx='102.633' ry='61.0737' fill='%23ED8936'/%3E%3Cellipse cx='399.573' cy='123.926' rx='102.633' ry='61.0737' fill='%2348BB78'/%3E%3Cellipse cx='366.192' cy='73.2292' rx='193.808' ry='73.2292' fill='%230BC5EA'/%3E%3Cellipse cx='222.705' cy='110.585' rx='193.808' ry='73.2292' fill='%23ED64A6'/%3E%3C/svg%3E")`,
+    `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='457.367' cy='123.926' rx='102.633' ry='61.0737' transform='rotate(-180 457.367 123.926)' fill='%23ECC94B'/%3E%3Cellipse cx='160.427' cy='61.0737' rx='102.633' ry='61.0737' transform='rotate(-180 160.427 61.0737)' fill='%239F7AEA'/%3E%3Cellipse cx='193.808' cy='111.771' rx='193.808' ry='73.2292' transform='rotate(-180 193.808 111.771)' fill='%234299E1'/%3E%3Cellipse cx='337.295' cy='74.415' rx='193.808' ry='73.2292' transform='rotate(-180 337.295 74.415)' fill='%2348BB78'/%3E%3C/svg%3E")`,
+];
+
+function TestmonialCard(props) {
+    const { name, role, content, avatar, index } = props;
+    return (
+        <Flex
+            _hover={{ backgroundColor: 'gray.700' }}
+            boxShadow={'lg'}
+            maxW={'640px'}
+            direction={{ base: 'column-reverse', md: 'row' }}
+            width={'full'}
+            rounded={'xl'}
+            p={10}
+            justifyContent={'space-between'}
+            position={'relative'}
+            bg={useColorModeValue('white', 'gray.900')}
+            _after={{
+                content: '""',
+                position: 'absolute',
+                height: '21px',
+                width: '29px',
+                left: '35px',
+                top: '-10px',
+                backgroundSize: 'cover',
+            }}
+            _before={{
+                content: '""',
+                position: 'absolute',
+                zIndex: '-1',
+                height: 'full',
+                maxW: '640px',
+                width: 'full',
+                filter: 'blur(40px)',
+                transform: 'scale(0.98)',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: 'cover',
+                top: 0,
+                left: 0,
+                backgroundImage: backgrounds[index % 4],
+            }}>
+            <Flex
+                direction={'column'}
+                textAlign={'left'}
+                justifyContent={'space-between'}>
+                <chakra.p
+                    fontWeight={'medium'}
+                    fontSize={'15px'}
+                    pb={4}>
+                    {content}
+                </chakra.p>
+                <chakra.p fontWeight={'bold'} fontSize={14}>
+                    {name}
+                    <chakra.span
+                        fontWeight={'medium'}
+                        color={'gray.500'}>
+                        {' '}
+                        - {role}
+                    </chakra.span>
+                </chakra.p>
+            </Flex>
+            <Avatar
+                src={avatar}
+                height={'80px'}
+                width={'80px'}
+                alignSelf={'center'}
+                m={{ base: '0 0 35px 0', md: '0 0 0 50px' }}
+            />
+        </Flex>
+    );
+}
+
+export default function GridBlurredBackdrop() {
+    return (
+        <Flex
+            textAlign={'center'}
+            pt={10}
+            justifyContent={'center'}
+            direction={'column'}
+            width={'full'}>
+            <Box width={{ base: 'full', sm: 'lg', lg: 'xl' }} margin={'auto'}>
+                <chakra.h3
+                    fontWeight={'bold'}
+                    fontSize={20}
+                    textTransform={'uppercase'}
+                    color={'purple.400'}>
+                    Users love Cath
+                </chakra.h3>
+                <chakra.h1
+                    py={5}
+                    fontSize={48}
+                    fontWeight={'bold'}
+                    color={useColorModeValue('gray.700', 'gray.50')}>
+                    You're in good company
+                </chakra.h1>
+                <chakra.h2
+                    margin={'auto'}
+                    width={'70%'}
+                    fontWeight={'medium'}
+                    color={useColorModeValue('gray.500', 'gray.400')}>
+                    See why over{' '}
+                    <chakra.strong color={useColorModeValue('gray.700', 'gray.50')}>
+                        110000+
+                    </chakra.strong>{' '}
+                    users use Cath in their servers
+                </chakra.h2>
+            </Box>
+            <SimpleGrid
+                columns={{ base: 1, xl: 2 }}
+                spacing={'20'}
+                mt={16}
+                mx={'auto'}>
+                {testimonials.map((cardInfo, index) => (
+                    <TestmonialCard {...cardInfo} index={index} />
+                ))}
+            </SimpleGrid>
+        </Flex>
+    );
+}
diff --git a/pages/_app.js b/pages/_app.js
index 3211eac..5782d9f 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,18 +1,22 @@
 import '../styles/globals.css'
 import Head from 'next/head'
-import { Provider } from 'next-auth/client'
+import { Provider, useSession } from 'next-auth/client'
 import { ChakraProvider } from "@chakra-ui/react"
 import Header from '../components/Nav/Header'
 import theme from '../chakra_config/theme'
 import { ColorModeScript } from "@chakra-ui/react"
+import Sidebar from '../components/Sidebar/Sidebar'
 
 function MyApp({ Component, pageProps }) {
+
+  const [session, loading] = useSession()
+
   return (
     <Provider>
       <ChakraProvider>
         <Head>
           <title>Cath Dashboard</title>
-          <link rel="icon" href="/logo.png" type="image/png"/>
+          <link rel="icon" href="/logo.png" type="image/png" />
         </Head>
         <ColorModeScript initialColorMode={theme.config.initialColorMode} />
         <Header/>
@@ -24,4 +28,4 @@ function MyApp({ Component, pageProps }) {
   )
 }
 
-export default MyApp
+export default MyApp
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index de75526..07eaab9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -7,6 +7,8 @@ import { Features } from '../components/Features/Features'
 import { Footer } from '../components/Footer/Footer'
 import { motion } from 'framer-motion'
 import StatCard from '../components/StatCard'
+import Testimonials from '../components/Testimonials/Testimonials'
+import AuthButton from '../components/AuthButton'
 
 export default function Home() {
 
@@ -29,8 +31,9 @@ export default function Home() {
 
     <>
       {!session && <>
-        <Hero title='Cath.exe' subtitle='Your favorite CODM bot. Cath.exe is packed to the brim with commands for moderation, stats and of course, CODM.' ctaText='Add Cath to your server' image='/logo.png' ctaLink={"https://discord.com/api/oauth2/authorize?client_id=800966959268364288&permissions=4231314550&scope=bot%20applications.commands"}/>
+        <Hero/>
         <Features />
+        <Testimonials/>
         <CTA />
         <Footer />
       </>