diff --git a/admin-portal-frontend/src/app/Profile Icon.png b/admin-portal-frontend/src/app/Profile Icon.png
new file mode 100644
index 0000000..33b031a
Binary files /dev/null and b/admin-portal-frontend/src/app/Profile Icon.png differ
diff --git a/admin-portal-frontend/src/app/RightArrowComponent.tsx b/admin-portal-frontend/src/app/RightArrowComponent.tsx
new file mode 100644
index 0000000..6b78de5
--- /dev/null
+++ b/admin-portal-frontend/src/app/RightArrowComponent.tsx
@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+
+const RightArrowComponent: FC = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="23" height="24" viewBox="0 0 23 24" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.01513 17.3372C8.6486 16.9706 8.6486 16.3764 9.01513 16.0099L13.0442 11.9808L9.01513 7.95179C8.6486 7.58527 8.6486 6.99102 9.01513 6.6245C9.38165 6.25798 9.9759 6.25798 10.3424 6.6245L15.0351 11.3172C15.4016 11.6837 15.4016 12.278 15.0351 12.6445L10.3424 17.3372C9.9759 17.7037 9.38165 17.7037 9.01513 17.3372Z" fill="black"/>
+  </svg>
+);
+
+export default RightArrowComponent;
+
+
diff --git a/admin-portal-frontend/src/app/api/categories.tsx b/admin-portal-frontend/src/app/api/categories.tsx
new file mode 100644
index 0000000..879dcc8
--- /dev/null
+++ b/admin-portal-frontend/src/app/api/categories.tsx
@@ -0,0 +1,26 @@
+export interface CategoriesData {
+    title: string;
+    items: [],
+    type: String
+  }
+  
+  const port = process.env.DEV_PORT || 3001;
+  const CATEGORIES_URL = `http://localhost:${port}/api/categories`;
+  
+  export const getAllCategories = async () => {
+    try {
+      const response = await fetch(CATEGORIES_URL, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      let data = await response.json();
+      data = data.categories;
+      console.log(data);
+      return data;
+    } catch (error) {
+      console.log(error)
+      return [];
+    }
+  };
diff --git a/admin-portal-frontend/src/app/components/BlankPageComponent.tsx b/admin-portal-frontend/src/app/components/BlankPageComponent.tsx
new file mode 100644
index 0000000..8187283
--- /dev/null
+++ b/admin-portal-frontend/src/app/components/BlankPageComponent.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+
+interface Props {
+    category?: string;
+  }
+
+const BlankPageComponent: FC<Props> = ({ category }) => {
+    return (
+        <div>
+            <p>This is the blank page </p>
+        </div>
+    );
+};
+
+export default BlankPageComponent;
diff --git a/admin-portal-frontend/src/app/components/VerticalNavBar.tsx b/admin-portal-frontend/src/app/components/VerticalNavBar.tsx
index 523d548..2a0f607 100644
--- a/admin-portal-frontend/src/app/components/VerticalNavBar.tsx
+++ b/admin-portal-frontend/src/app/components/VerticalNavBar.tsx
@@ -2,14 +2,15 @@
 
 import styles from './VerticalNavBarStyles';
 import HomeComponent from './HomeComponent';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import Accordion from 'react-bootstrap/Accordion';
 import 'bootstrap/dist/css/bootstrap.css';
 import { Card } from 'react-bootstrap';
 import GpComponent from './GPComponent';
 import SearchComponent from './SearchComponent';
+import { getAllCategories } from '../api/categories';
+import { NavLink } from 'react-router-dom';
 
-  
   const VerticalNavBar: React.FC = () => {
       
       interface CustomAccordionProps {
@@ -26,6 +27,24 @@ import SearchComponent from './SearchComponent';
         );
       }
 
+      interface Category {
+        _id: string;
+        title: String;
+        items: [];
+        type: String;
+      }
+      
+      const [items, setItems] = useState<Category[]>([]);
+      useEffect(() => {
+        (async () => {
+          const categories = await getAllCategories();
+          setItems(categories);
+        })();
+      }, []);
+
+      const generalPrinciples = items.filter(category => category.type === 'General Principle');
+
+
     return (
 
       
@@ -82,19 +101,19 @@ import SearchComponent from './SearchComponent';
               </div>
             </Accordion.Header>
             <Accordion.Body>
-            <ul style={{ listStyleType: 'none' }}>
-              <li style={styles.listItem}>All</li>
-              <li style={styles.listItem}>Emergency Action Plan</li>
-              <li style={styles.listItem}>Trauma Centers</li>
-              <li style={styles.listItem}>Burn Centers</li>
-              <li style={styles.listItem}>Stroke Centers</li>
-              <li style={styles.listItem}>Serious On-Field Injury</li>
-              <li style={styles.listItem}>Catastrophic Incident</li>
-              <li style={styles.listItem}>Adminstering Medication</li>
-              <li style={styles.listItem}>Muscle Injuries</li>
-              <li style={styles.listItem}>Ligament Injuries</li>
-              <li style={styles.listItem}>Dislocations/Sublaxations</li>
-              <li style={styles.listItem}>Fractures</li>
+
+            <ul>
+              {generalPrinciples.map(category => (
+                <li style={styles.listItem} key={category._id}>
+                  <NavLink to={`/category/${category._id}`} style={({ isActive }) => {
+                    return {
+                      textDecoration: 'none',
+                      fontWeight: isActive ? "bold" : "",
+                      color: isActive ? "var(--DFM-Navy, #182B49)" : "var(--Neutral-Gray6, #484848)",
+                    };
+                }} className="active">{category.title}</NavLink>
+                              </li>
+                ))}
             </ul>
 
             </Accordion.Body>
@@ -110,5 +129,6 @@ import SearchComponent from './SearchComponent';
       </div>
     );
   };
+
   
   export default VerticalNavBar;
\ No newline at end of file
diff --git a/admin-portal-frontend/src/app/icons/Home.png b/admin-portal-frontend/src/app/icons/Home.png
new file mode 100644
index 0000000..445b9ae
Binary files /dev/null and b/admin-portal-frontend/src/app/icons/Home.png differ
diff --git a/admin-portal-frontend/src/app/icons/gen principles.png b/admin-portal-frontend/src/app/icons/gen principles.png
new file mode 100644
index 0000000..573f28b
Binary files /dev/null and b/admin-portal-frontend/src/app/icons/gen principles.png differ
diff --git a/admin-portal-frontend/src/app/icons/ic_search.png b/admin-portal-frontend/src/app/icons/ic_search.png
new file mode 100644
index 0000000..ae1752a
Binary files /dev/null and b/admin-portal-frontend/src/app/icons/ic_search.png differ
diff --git a/admin-portal-frontend/src/app/page.tsx b/admin-portal-frontend/src/app/page.tsx
index 67d77fb..0273476 100644
--- a/admin-portal-frontend/src/app/page.tsx
+++ b/admin-portal-frontend/src/app/page.tsx
@@ -1,15 +1,28 @@
+'use client'
 import HorizontalNavBar from './components/HorizontalNavbar'
-import React from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import VerticalNavBar from './components/VerticalNavBar';
 import styles from './pageStyles'
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import BlankPageComponent from './components/BlankPageComponent';
 
 const AnotherPage: React.FC = () => {
-
   return (
     <div>
-      <div style={styles.verticalNavBar}>
-        <VerticalNavBar/>
-      </div>
+      <Router>
+        <div style={styles.verticalNavBar}>
+          <VerticalNavBar/>
+          <Routes>
+            <Route path="/category/:id" element={
+              <div style={styles.blankPage}>
+                <BlankPageComponent/>
+              </div>
+            } />
+          </Routes>
+        </div>
+        
+
+      </Router>
       <div style={styles.horizontalNavBar}>
         <HorizontalNavBar />
       </div>
diff --git a/admin-portal-frontend/src/app/pageStyles.tsx b/admin-portal-frontend/src/app/pageStyles.tsx
index 6c14721..31a36e4 100644
--- a/admin-portal-frontend/src/app/pageStyles.tsx
+++ b/admin-portal-frontend/src/app/pageStyles.tsx
@@ -11,6 +11,14 @@ const styles = {
       zIndex: 1,
       position: 'absolute' as const
     },
+    blankPage: {
+      position: 'absolute' as const,
+      zIndex: 2,
+      backgroundColor: 'white',
+      top: '50vh',
+      left: '50vw',
+      bottom: '50vh',
+    },
   };
   
 export default styles;