diff --git a/src/App.tsx b/src/App.tsx
index ea2ce461..9ba7c81d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -78,6 +78,15 @@ function App() {
   const toSecondLesson = () => {
     setPage("lesson/tcp_lesson");
   };
+
+  const toThirdLesson = () => {
+    setPage("lesson/dns_lesson");
+  };
+
+  const toFourthLesson = () => {
+    setPage("lesson/ip_lesson");
+  };
+
   return (
     <div className={darkMode ? "dark-theme" : ""}>
       <Routes>
@@ -183,6 +192,8 @@ function App() {
               backToHomeHandler={backToHome}
               goToFirstLesson={toFirstLesson}
               goToSecondLesson={toSecondLesson}
+              goToThirdLesson={toThirdLesson}
+              goToFourthLesson={toFourthLesson}
               SettingsHandler={toSettingsPage}
             />
           }
diff --git a/src/Components/Progress.tsx b/src/Components/Progress.tsx
index fe5955b7..62502349 100644
--- a/src/Components/Progress.tsx
+++ b/src/Components/Progress.tsx
@@ -17,6 +17,8 @@ interface Props {
     backToHomeHandler: () => void;
     goToFirstLesson: () => void;
     goToSecondLesson: () => void;
+    goToThirdLesson: () => void;
+    goToFourthLesson: () => void;
 }
 
 function Progress({ ProfileHandler,
@@ -26,11 +28,13 @@ function Progress({ ProfileHandler,
     backToHomeHandler,
     SettingsHandler,
     goToFirstLesson,
-    goToSecondLesson }: Props) {
+    goToSecondLesson,
+    goToThirdLesson,
+    goToFourthLesson }: Props) {
 
     return (
         <div style={{ margin: 0, padding: 0, height: '100vh', position: 'relative' }}>
-            <NavigationBar 
+            <NavigationBar
                 ProfileHandler={ProfileHandler}
                 getStartedHandler={getStartedHandler}
                 InventoryHandler={InventoryHandler}
@@ -41,13 +45,13 @@ function Progress({ ProfileHandler,
 
             <div className="white-half" style={{ width: '80%', height: '100%', backgroundColor: 'white', position: 'absolute', left: '20%' }}>
 
-                <Navigation 
+                <Navigation
                     username="Kelvin"
                     redirects={
                         [
                             { page_name: 'Home', page_handler: backToHomeHandler },
                             { page_name: 'Profile', page_handler: ProgressHandler }
-                        ]} 
+                        ]}
                 />
 
                 <div id="progress-group">
@@ -93,11 +97,21 @@ function Progress({ ProfileHandler,
                     <div id="down-arrow"></div>
                 </div>
 
-                <div id="lesson3-box">
+                <div id="lesson3-box" onClick={goToThirdLesson}>
                     <div id="unlocked-border"></div>
-                    <div id="locked-border">
+                    <div id="unlocked-inner-border">
                         <div id="lesson-text">LESSON 3</div>
-                        <div id="lesson-name">"Topic"</div>
+                        <div id="lesson-name">DNS</div>
+                    </div>
+                    <div id="down-arrow"></div>
+                </div>
+
+
+                <div id="lesson4-box" onClick={goToFourthLesson}>
+                    <div id="unlocked-border"></div>
+                    <div id="unlocked-inner-border">
+                        <div id="lesson-text">LESSON 4</div>
+                        <div id="lesson-name">SHESH</div>
                     </div>
                     <div id="down-arrow"></div>
                 </div>
diff --git a/src/Styles/Progress.modules.css b/src/Styles/Progress.modules.css
index 27a1fb27..3ca2e827 100644
--- a/src/Styles/Progress.modules.css
+++ b/src/Styles/Progress.modules.css
@@ -169,6 +169,14 @@
     top: 105%;
 }
 
+#lesson4-box {
+    position: absolute;
+    width: 20%;
+    height: 18%;
+    left: 10%;
+    top: 140%;
+}
+
 #unlocked-border {
     box-sizing: border-box;