diff --git a/components/roadmap/roadmap-error.tsx b/components/roadmap/roadmap-error.tsx
index 532a630c6..f776da99e 100644
--- a/components/roadmap/roadmap-error.tsx
+++ b/components/roadmap/roadmap-error.tsx
@@ -20,7 +20,7 @@ export function RoadmapError(props: RoadmapProps) {
       color='white'
     >
       <Heading mb='4px' size='md'>Oops! There&apos;s an error</Heading>
-      <Text>Try refreshing or <Link target='_blank' fontWeight={700} textDecoration={'underline'} fontSize='14px' href={siteConfig.url.issue}>report a bug</Link> and use the <Link fontWeight={700} textDecoration={'underline'} href={`/${roadmap.id}`}>non-interactive version</Link></Text>
+      <Text>Try refreshing or <Link target='_blank' fontWeight={700} textDecoration={'underline'} fontSize='14px' href={siteConfig.url.issue}>report a bug</Link> and use the <Link fontWeight={700} textDecoration={'underline'} href={`/roadmaps/${roadmap.id}.png`}>non-interactive version</Link></Text>
     </Container>
   );
 }
diff --git a/components/roadmap/roadmap-page-header.tsx b/components/roadmap/roadmap-page-header.tsx
index ef2190ae9..83ab2c1f0 100644
--- a/components/roadmap/roadmap-page-header.tsx
+++ b/components/roadmap/roadmap-page-header.tsx
@@ -20,9 +20,6 @@ type RoadmapPageHeaderType = {
 
 export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
   const { roadmap } = props;
-  const router = useRouter()
-
-  const isInteractive = router.pathname.includes('/interactive');
 
   return (
     <Box
@@ -92,22 +89,6 @@ export function RoadmapPageHeader(props: RoadmapPageHeaderType) {
               Subscribe
             </Button>
           </Stack>
-          {roadmap.id === 'frontend' && !isInteractive && (
-            <Button
-              d={['none', 'flex', 'flex']}
-              as={Link}
-              href={'/frontend/interactive'}
-              size="xs"
-              py="14px"
-              px="10px"
-              variant="solid"
-              _hover={{ textDecoration: 'none' }}
-              colorScheme="purple"
-            >
-              <Text as='span' d={['none', 'none', 'inline']}>✨ Interactive Version (Beta)</Text>
-              <Text as='span' d={['inline', 'inline', 'none']}>✨ Try Beta</Text>
-            </Button>
-          )}
         </Flex>
       </Container>
     </Box>
diff --git a/content/roadmaps/100-frontend/content/101-html/readme.md b/content/roadmaps/100-frontend/content/101-html/readme.md
index 647811ad7..1d42b1287 100644
--- a/content/roadmaps/100-frontend/content/101-html/readme.md
+++ b/content/roadmaps/100-frontend/content/101-html/readme.md
@@ -1 +1,8 @@
 # HTML
+
+HTML stands for Hyper Text Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>
diff --git a/pages/[roadmap]/index.tsx b/pages/[roadmap]/index.tsx
index 3feadc784..837cad25c 100644
--- a/pages/[roadmap]/index.tsx
+++ b/pages/[roadmap]/index.tsx
@@ -8,6 +8,7 @@ import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
 import MdRenderer from '../../components/md-renderer';
 import Helmet from '../../components/helmet';
 import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
+import { InteractiveRoadmapRenderer } from './interactive';
 
 type RoadmapProps = {
   roadmap: RoadmapType;
@@ -15,6 +16,11 @@ type RoadmapProps = {
 
 function ImageRoadmap(props: RoadmapProps) {
   const { roadmap } = props;
+
+  if (roadmap.id === 'frontend') {
+    return <InteractiveRoadmapRenderer roadmap={roadmap} />;
+  }
+
   if (!roadmap.imageUrl) {
     return null;
   }
diff --git a/pages/[roadmap]/interactive.tsx b/pages/[roadmap]/interactive.tsx
index 08170c4b2..140c38b0c 100644
--- a/pages/[roadmap]/interactive.tsx
+++ b/pages/[roadmap]/interactive.tsx
@@ -17,8 +17,11 @@ type RoadmapProps = {
   roadmap: RoadmapType;
 };
 
-function RoadmapRenderer(props: RoadmapProps) {
+export function InteractiveRoadmapRenderer(props: RoadmapProps) {
   const { roadmap } = props;
+  if (!roadmap.jsonUrl) {
+    return null;
+  }
 
   const { loading: isLoading, error: hasErrorLoading, get } = useFetch();
 
@@ -132,7 +135,7 @@ export default function InteractiveRoadmap(props: RoadmapProps) {
       />
       <Box mb="60px">
         <RoadmapPageHeader roadmap={roadmap} />
-        <RoadmapRenderer roadmap={roadmap} />
+        <InteractiveRoadmapRenderer roadmap={roadmap} />
       </Box>
 
       <OpensourceBanner />