diff --git a/components/links-list-item.tsx b/components/links-list-item.tsx
index 9fa6fda63..0a210a42e 100644
--- a/components/links-list-item.tsx
+++ b/components/links-list-item.tsx
@@ -5,15 +5,16 @@ type LinksListItemProps = {
   title: string;
   subtitle: string;
   badgeText?: string;
-  icon?: React.ReactChild
+  icon?: React.ReactChild;
+  hideSubtitleOnMobile?: boolean;
 };
 
 export function LinksListItem(props: LinksListItemProps) {
-  const { title, subtitle, badgeText, icon } = props;
+  const { title, subtitle, badgeText, icon, hideSubtitleOnMobile = false } = props;
 
   return (
     <Link
-      fontSize='15px'
+      fontSize={['14px', '14px', '15px']}
       py='9px'
       d='flex'
       flexDirection={['column', 'row', 'row']}
@@ -37,7 +38,8 @@ export function LinksListItem(props: LinksListItemProps) {
         {badgeText &&
         <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
       </Flex>
-      <Text mt={['4px', 0]} as='span' fontSize='12px' color='gray.500'>{subtitle}</Text>
+      <Text d={[hideSubtitleOnMobile ? 'none' : 'inline', 'inline']} mt={['3px', 0]} as='span'
+            fontSize={['11px', '11px', '12px']} color='gray.500'>{subtitle}</Text>
     </Link>
   );
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index 76c524f50..86e8933e9 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -15,18 +15,19 @@ export default function Home() {
       <GlobalHeader />
       <Box>
         <Container maxW='container.md'>
-          <Box py='35px'>
-            <Heading fontSize='28px' mb='15px'>Hey there! 👋</Heading>
-            <Text fontSize='16px' mb='10px'>
+          <Box py={['23px', '23px', '35px']}>
+            <Heading fontSize={['22px', '22px', '28px']} mb={['8px', '8px', '15px']}>Hey there! 👋</Heading>
+            <Text fontSize={['14px', '14px', '16px']} mb='10px'>
               <Text fontWeight={500} as='span'>roadmap.sh</Text> is a community effort to create roadmaps, guides and
               other educational content
               to help guide the developers in picking up the path and guide their learnings.
             </Text>
 
-            <Text fontSize='16px'>We also have a <Link textDecoration={'underline'} href={'#'} fontWeight={600}>YouTube
+            <Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'} href={'#'}
+                                                                           fontWeight={600}>YouTube
               channel</Link> which we hope you are going to love.</Text>
           </Box>
-          <SimpleGrid columns={{ xl: 3, md: 3, sm: 2, base: 1 }} spacing={['10px', '10px', '15px']}>
+          <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']}>
             <HomeRoadmapItem colorIndex={0} title={'Frontend'}
                              subtitle={'Step by step guide to becoming a frontend developer in 2021'} />
             <HomeRoadmapItem colorIndex={1} title={'Backend'}
@@ -45,8 +46,8 @@ export default function Home() {
 
       <Box>
         <Container maxW='container.md' position='relative'>
-          <Box pt='60px' mb='20px'>
-            <Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading>
+          <Box pt='60px' mb={['10px', '15px', '20px']}>
+            <Heading color='green.500' fontSize={['20px', '20px', '25px']} mb='5px'>Visual Guides</Heading>
           </Box>
 
           <LinksList>
@@ -73,25 +74,29 @@ export default function Home() {
           </Box>
 
           <LinksList>
-            <LinksListItem title='Transport Protocols: TCP vs UDP' subtitle='15 minutes' icon={<VideoIcon
-              style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-            <LinksListItem title='OSI Model Explained' subtitle='10 minutes' icon={<VideoIcon
-              style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-            <LinksListItem title='Creating a React App' badgeText='pro' subtitle='15 minutes' icon={<VideoIcon
+            <LinksListItem hideSubtitleOnMobile title='Transport Protocols: TCP vs UDP' subtitle='15 minutes'
+                           icon={<VideoIcon
+                             style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
+            <LinksListItem hideSubtitleOnMobile title='OSI Model Explained' subtitle='10 minutes' icon={<VideoIcon
               style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-            <LinksListItem title='DOM vs Shadow DOM vs Virtual DOM' badgeText='pro' subtitle='15 minutes'
+            <LinksListItem hideSubtitleOnMobile title='Creating a React App' badgeText='pro' subtitle='15 minutes'
+                           icon={<VideoIcon
+                             style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
+            <LinksListItem hideSubtitleOnMobile title='DOM vs Shadow DOM vs Virtual DOM' badgeText='pro'
+                           subtitle='15 minutes'
                            icon={<VideoIcon
                              style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-            <LinksListItem title='Everything you need to know about HTTP caching' badgeText='pro' subtitle='10 minutes'
+            <LinksListItem hideSubtitleOnMobile title='Everything you need to know about HTTP caching' badgeText='pro'
+                           subtitle='10 minutes'
                            icon={<VideoIcon
                              style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-            <LinksListItem title='Content Delivery Networks' subtitle='5 minutes' icon={<VideoIcon
+            <LinksListItem hideSubtitleOnMobile title='Content Delivery Networks' subtitle='5 minutes' icon={<VideoIcon
               style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-            <LinksListItem title='Load Balancers in Depth' subtitle='15 minutes' icon={<VideoIcon
+            <LinksListItem hideSubtitleOnMobile title='Load Balancers in Depth' subtitle='15 minutes' icon={<VideoIcon
               style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-            <LinksListItem title='DNS and how does it work?' subtitle='2 minutes' icon={<VideoIcon
+            <LinksListItem hideSubtitleOnMobile title='DNS and how does it work?' subtitle='2 minutes' icon={<VideoIcon
               style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
-            <LinksListItem title='JavaScript Fetch API' subtitle='22 minutes' icon={<VideoIcon
+            <LinksListItem hideSubtitleOnMobile title='JavaScript Fetch API' subtitle='22 minutes' icon={<VideoIcon
               style={{ marginRight: '7px', width: '18px', height: '18px', color: '#9c9c9c' }} />} />
 
             <DimmedMore text={'View all Videos'} />
diff --git a/pages/roadmaps/components/home-roadmap-item.tsx b/pages/roadmaps/components/home-roadmap-item.tsx
index 4b948551d..847dfc2a7 100644
--- a/pages/roadmaps/components/home-roadmap-item.tsx
+++ b/pages/roadmaps/components/home-roadmap-item.tsx
@@ -39,8 +39,8 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
         </Tooltip>
       )}
 
-      <Heading fontSize='22px' mb='5px'>{title}</Heading>
-      <Text color='gray.200' fontSize='13px'>{subtitle}</Text>
+      <Heading fontSize={['17px', '17px', '22px']} mb='5px'>{title}</Heading>
+      <Text color='gray.200' fontSize={[ '13px']}>{subtitle}</Text>
     </Link>
   );
 }