diff --git a/frontend/src/Router.jsx b/frontend/src/Router.jsx
index 46b384e..ef75c17 100644
--- a/frontend/src/Router.jsx
+++ b/frontend/src/Router.jsx
@@ -27,6 +27,11 @@ import ContentTutorialsByWeek from './page/Content/ContentTutorialsByWeek';
 import ContentTutorialsByTopic from './page/Content/ContentTutorialsByTopic';
 import AssessmentsAssignments from './page/Assessments/AssessmentsAssignments';
 import AssessmentsExam from './page/Assessments/AssessmentsExam';
+import StyleBase from './page/Style/StyleBase';
+import StyleHtml from './page/Style/StyleHtml';
+import StyleCSS from './page/Style/StyleCSS';
+import StyleJavascript from './page/Style/StyleJavascript';
+import StyleReactJS from './page/Style/StyleReact';
 import HelpBase from './page/Help/HelpBase';
 import HelpStyle from './page/Help/HelpStyle';
 import HelpInstallation from './page/Help/HelpInstallation';
@@ -90,6 +95,12 @@ const Router = () => {
             <Route path="reactjs" element={<HelpResourcesReact />} />
           </Route>
         </Route>
+        <Route path="style" element={<StyleBase />}>
+          <Route path="html" element={<StyleHtml />} />
+          <Route path="css" element={<StyleCSS />} />
+          <Route path="javascript" element={<StyleJavascript />} />
+          <Route path="reactjs" element={<StyleReactJS />} />
+        </Route>
         <Route path="grades" element={<Grades />}></Route>
         <Route path="course-outline" element={<CourseOutline />}></Route>
       </Route>
diff --git a/frontend/src/component/NavList.jsx b/frontend/src/component/NavList.jsx
index 86b95d4..2b5b7df 100644
--- a/frontend/src/component/NavList.jsx
+++ b/frontend/src/component/NavList.jsx
@@ -103,8 +103,7 @@ export const getPrimaryNavList = (term) => {
         },
         {
           title: 'Style Guide',
-          route: `https://nw-syd-gitlab.cseunsw.tech/COMP6080/${term}/style`,
-          external: true,
+          route: `/style`,
           Icon: PaletteIcon,
           description: 'View our style guide for different languages in the course',
         },
diff --git a/frontend/src/page/Style/StyleBase.jsx b/frontend/src/page/Style/StyleBase.jsx
new file mode 100644
index 0000000..54019a2
--- /dev/null
+++ b/frontend/src/page/Style/StyleBase.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+import Divider from '@mui/material/Divider';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import LoopIcon from '@mui/icons-material/Loop';
+import PodcastsIcon from '@mui/icons-material/Podcasts';
+import PaletteIcon from '@mui/icons-material/Palette';
+import BuildIcon from '@mui/icons-material/Build';
+import CodeIcon from '@mui/icons-material/Code';
+
+import SubNavWrapper from '../../component/SubNavWrapper';
+import makePage from '../../component/makePage';
+
+import { Context, useContext } from '../../context';
+
+const HelpResources = ({ }) => {
+
+  const { getters } = useContext(Context);
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    if (pathname.endsWith('/style')) {
+      navigate(`/${getters.term}/style/html`);
+    }
+  }, []);
+
+  const menu = [
+    {
+      title: 'HTML',
+      icon: <CodeIcon />,
+      subRoute: 'html',
+    },
+    {
+      title: 'CSS',
+      icon: <PaletteIcon />,
+      subRoute: 'css',
+    },
+    {
+      title: 'Javascript',
+      icon: <BuildIcon />,
+      subRoute: 'javascript',
+    },
+    {
+      title: 'ReactJS',
+      icon: <LoopIcon />,
+      subRoute: 'reactjs',
+    },
+  ];
+
+  return (
+    <SubNavWrapper baseUrl={'/style'} menu={menu}>
+      <Outlet />
+    </SubNavWrapper>
+  );
+};
+
+export default HelpResources
\ No newline at end of file
diff --git a/frontend/src/page/Style/StyleCSS.jsx b/frontend/src/page/Style/StyleCSS.jsx
new file mode 100644
index 0000000..80c879a
--- /dev/null
+++ b/frontend/src/page/Style/StyleCSS.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+
+import makePage from '../../component/makePage';
+
+const StyleCss = ({}) => {
+  return (
+    <>
+      <Typography variant="body1" gutterBottom>
+        Test
+      </Typography>
+       
+    </>
+  );
+};
+
+export default makePage(StyleCss, {
+  loginRequired: true,
+  title: 'CSS Style',
+});
\ No newline at end of file
diff --git a/frontend/src/page/Style/StyleHtml.jsx b/frontend/src/page/Style/StyleHtml.jsx
new file mode 100644
index 0000000..6d0e829
--- /dev/null
+++ b/frontend/src/page/Style/StyleHtml.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+
+import makePage from '../../component/makePage';
+
+const StyleHtmlCss = ({}) => {
+  return (
+    <>
+      <Typography variant="body1" gutterBottom>
+        Test
+      </Typography>
+       
+    </>
+  );
+};
+
+export default makePage(StyleHtmlCss, {
+  loginRequired: true,
+  title: 'HTML/CSS Style',
+});
\ No newline at end of file
diff --git a/frontend/src/page/Style/StyleJavascript.jsx b/frontend/src/page/Style/StyleJavascript.jsx
new file mode 100644
index 0000000..f4bc704
--- /dev/null
+++ b/frontend/src/page/Style/StyleJavascript.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+
+import makePage from '../../component/makePage';
+
+const StyleJavascript = ({}) => {
+  return (
+    <>
+      <Typography variant="body1" gutterBottom>
+        Test
+      </Typography>
+       
+    </>
+  );
+};
+
+export default makePage(StyleJavascript, {
+  loginRequired: true,
+  title: 'Javascript Style',
+});
\ No newline at end of file
diff --git a/frontend/src/page/Style/StyleReact.jsx b/frontend/src/page/Style/StyleReact.jsx
new file mode 100644
index 0000000..0e6be1e
--- /dev/null
+++ b/frontend/src/page/Style/StyleReact.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+
+import makePage from '../../component/makePage';
+
+const StyleReactJS = ({}) => {
+  return (
+    <>
+      <Typography variant="body1" gutterBottom>
+        Test
+      </Typography>
+       
+    </>
+  );
+};
+
+export default makePage(StyleReactJS, {
+  loginRequired: true,
+  title: 'ReactJS Style',
+});
\ No newline at end of file