diff --git a/.eslintrc.json b/.eslintrc.json
index 2988e2ba..34a9a9cc 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -15,6 +15,12 @@
   },
   "plugins": ["react", "prettier"],
   "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
     "react/react-in-jsx-scope": "off",
     "react/prop-types": 0
   },
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 2ff3cb71..00405d80 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -5,14 +5,14 @@
 
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
 
-  - package-ecosystem: "github-actions"
+  - package-ecosystem: 'github-actions'
     # Workflow files stored in the
     # default location of `.github/workflows`
-    directory: "/"
+    directory: '/'
     schedule:
-      interval: "weekly"
+      interval: 'weekly'
diff --git a/.prettierrc b/.prettierrc
index 639c6972..5ae4e4f6 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,6 +4,5 @@
   "printWidth": 100,
   "singleQuote": true,
   "trailingComma": "none",
-  "jsxBracketSameLine": false,
-  "endOfLine": "lf"
+  "jsxBracketSameLine": false
 }
diff --git a/package-lock.json b/package-lock.json
index 6891fbef..734be377 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "jwt-decode": "^3.1.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.5.0",
         "react-modal": "^3.16.1",
         "react-router-dom": "^6.8.0",
         "react-scripts": "5.0.1",
@@ -25,10 +26,10 @@
         "eslint-config-standard": "^17.1.0",
         "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-n": "^16.6.2",
-        "eslint-plugin-prettier": "^5.2.1",
+        "eslint-plugin-prettier": "^5.2.3",
         "eslint-plugin-promise": "^6.6.0",
         "eslint-plugin-react": "^7.37.1",
-        "prettier": "^3.3.3"
+        "prettier": "^3.5.2"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -7692,9 +7693,9 @@
       }
     },
     "node_modules/eslint-plugin-prettier": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
-      "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==",
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.3.tgz",
+      "integrity": "sha512-qJ+y0FfCp/mQYQ/vWQ3s7eUlFEL4PyKfAJxsnYTJ4YT73nsJBWqmEpFryxV9OeUiqmsTsYJ5Y+KDNaeP31wrRw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -14525,9 +14526,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.2.tgz",
+      "integrity": "sha512-lc6npv5PH7hVqozBR7lkBNOGXV9vMwROAPlumdBkX0wTbbzPu/U1hk5yL8p2pt4Xoc+2mkT8t/sow2YrV/M5qg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -14946,6 +14947,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 249b6b05..df688dd8 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.5.0",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
@@ -47,9 +48,9 @@
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-promise": "^6.6.0",
     "eslint-plugin-react": "^7.37.1",
-    "prettier": "^3.3.3"
+    "prettier": "^3.5.2"
   }
 }
diff --git a/public/index.html b/public/index.html
index aa069f27..d79d7a78 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,14 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/App.css b/src/App.css
index ec62bd1a..8277af26 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,7 +7,7 @@
   grid-template-columns: 151px 2fr 1fr;
   grid-template-rows: 96px auto;
   background-color: #f0f5fa;
-  height: 100vh;
+  min-height: 100vh;
 }
 
 .ReactModal__Body--open,
diff --git a/src/App.js b/src/App.js
index 136c3a15..5d08eb2b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,43 +1,77 @@
 import './App.css';
+import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import Dashboard from './pages/dashboard';
+import CohortTeacher from './pages/cohortTeacher';
 import Login from './pages/login';
 import Register from './pages/register';
 import Loading from './pages/loading';
+import Notes from './pages/notes';
+import Welcome from './pages/welcome';
 import Verification from './pages/verification';
 import { AuthProvider, ProtectedRoute } from './context/auth';
 import { ModalProvider } from './context/modal';
-import Welcome from './pages/welcome';
+import { UserProvider } from './context/user';
+import StudentProfile from './pages/profile/studentProfile';
 
 const App = () => {
   return (
     <>
       <AuthProvider>
-        <ModalProvider>
-          <Routes>
-            <Route path="login" element={<Login />} />
-            <Route path="register" element={<Register />} />
-            <Route path="loading" element={<Loading />} />
-            <Route path="verification" element={<Verification />} />
+        <UserProvider>
+          <ModalProvider>
+            <Routes>
+              <Route path="login" element={<Login />} />
+              <Route path="register" element={<Register />} />
+              <Route path="loading" element={<Loading />} />
+              <Route path="verification" element={<Verification />} />
 
-            <Route
-              index
-              element={
-                <ProtectedRoute>
-                  <Dashboard />
-                </ProtectedRoute>
-              }
-            />
-            <Route
-              path="welcome"
-              element={
-                <ProtectedRoute disabledNav={true}>
-                  <Welcome />
-                </ProtectedRoute>
-              }
-            />
-          </Routes>
-        </ModalProvider>
+              <Route
+                index
+                element={
+                  <ProtectedRoute>
+                    <Dashboard />
+                  </ProtectedRoute>
+                }
+              />
+              <Route
+                index
+                path="cohort"
+                element={
+                  <ProtectedRoute>
+                    <CohortTeacher />
+                  </ProtectedRoute>
+                }
+              />
+              <Route
+                index
+                path="profile"
+                element={
+                  <ProtectedRoute>
+                    <StudentProfile />
+                  </ProtectedRoute>
+                }
+              />
+              <Route
+                index
+                path="notes"
+                element={
+                  <ProtectedRoute requiredRole="TEACHER">
+                    <Notes />
+                  </ProtectedRoute>
+                }
+              />
+              <Route
+                path="welcome"
+                element={
+                  <ProtectedRoute disabledNav={true}>
+                    <Welcome />
+                  </ProtectedRoute>
+                }
+              />
+            </Routes>
+          </ModalProvider>
+        </UserProvider>
       </AuthProvider>
     </>
   );
diff --git a/src/assets/icons/clipboardIcon.js b/src/assets/icons/clipboardIcon.js
new file mode 100644
index 00000000..819e329f
--- /dev/null
+++ b/src/assets/icons/clipboardIcon.js
@@ -0,0 +1,18 @@
+/* eslint-disable prettier/prettier */
+import React from 'react';
+
+const ClipboardIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 33 36"
+      width="50"
+      height="56"
+      fill="currentColor"
+    >
+      <path d="M16 2H8C7.45 2 7 2.45 7 3V4H5C4.45 4 4 4.45 4 5V21C4 21.55 4.45 22 5 22H19C19.55 22 20 21.55 20 21V5C20 4.45 19.55 4 19 4H17V3C17 2.45 16.55 2 16 2zM9 4H15V3H9V4zM6 6H18V20H6V6z" />
+    </svg>
+  );
+};
+
+export default ClipboardIcon;
diff --git a/src/assets/icons/commentIcon.js b/src/assets/icons/commentIcon.js
new file mode 100644
index 00000000..24c5a2ac
--- /dev/null
+++ b/src/assets/icons/commentIcon.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const CommentIcon = ({ fill = 'none', stroke = '#000', strokeWidth = 2 }) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill={fill} xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10z"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+};
+
+export default CommentIcon;
diff --git a/src/assets/icons/fileIcon.js b/src/assets/icons/fileIcon.js
new file mode 100644
index 00000000..98240fa3
--- /dev/null
+++ b/src/assets/icons/fileIcon.js
@@ -0,0 +1,13 @@
+/* eslint-disable prettier/prettier */
+const FileIcon = () => {
+  return (
+    <svg width="33" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM13 9V3.5L18.5 9H13Z"
+        fill="#000046"
+      />
+    </svg>
+  );
+};
+
+export default FileIcon;
diff --git a/src/assets/icons/heartIcon.js b/src/assets/icons/heartIcon.js
new file mode 100644
index 00000000..fe1105e0
--- /dev/null
+++ b/src/assets/icons/heartIcon.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const HeartIcon = ({ fill = 'none', stroke = '#000', strokeWidth = 2 }) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill={fill} xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+};
+
+export default HeartIcon;
diff --git a/src/assets/icons/noteIcon.js b/src/assets/icons/noteIcon.js
new file mode 100644
index 00000000..2a46dcd6
--- /dev/null
+++ b/src/assets/icons/noteIcon.js
@@ -0,0 +1,18 @@
+/* eslint-disable prettier/prettier */
+import React from 'react';
+
+const NoteIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 20"
+      width="45"
+      height="50"
+      fill="currentColor"
+    >
+      <path d="M3 3h18v18H3V3zm2 2v14h14V5H5zm2 3h10v2H7V8zm0 4h10v2H7v-2zm0 4h6v2H7v-2z" />
+    </svg>
+  );
+};
+
+export default NoteIcon;
diff --git a/src/components/createPostModal/index.js b/src/components/createPostModal/index.js
index f19e5f1d..d87c270f 100644
--- a/src/components/createPostModal/index.js
+++ b/src/components/createPostModal/index.js
@@ -1,36 +1,47 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 import useModal from '../../hooks/useModal';
+import ProfileCircle from '../profileCircle';
+import { UserContext } from '../../context/user';
+import { AuthContext } from '../../context/auth';
+import { post } from '../../service/apiClient';
 import './style.css';
 import Button from '../button';
 
-const CreatePostModal = () => {
+const CreatePostModal = ({ onPostCreate }) => {
   // Use the useModal hook to get the closeModal function so we can close the modal on user interaction
   const { closeModal } = useModal();
+  const auth = useContext(AuthContext);
+  const user = useContext(UserContext);
 
-  const [message, setMessage] = useState(null);
   const [text, setText] = useState('');
 
+  const name = `${user.firstName} ${user.lastName}`;
+  const userInitials = name.match(/\b(\w)/g);
+
   const onChange = (e) => {
     setText(e.target.value);
   };
 
-  const onSubmit = () => {
-    setMessage('Submit button was clicked! Closing modal in 2 seconds...');
+  const onSubmit = async () => {
+    await post('posts', { content: text, userId: user.id }, true, auth.token);
+    setText('');
 
-    setTimeout(() => {
-      setMessage(null);
-      closeModal();
-    }, 2000);
+    onPostCreate();
+    closeModal();
   };
 
+  if (!user) {
+    return <p>Loading...</p>;
+  }
+
   return (
     <>
       <section className="create-post-user-details">
         <div className="profile-icon">
-          <p>AJ</p>
+          <ProfileCircle initials={userInitials} />
         </div>
         <div className="post-user-name">
-          <p>Alex J</p>
+          <p>{`${user.firstName} ${user.lastName}`}</p>
         </div>
       </section>
 
@@ -46,8 +57,6 @@ const CreatePostModal = () => {
           disabled={!text.length}
         />
       </section>
-
-      {message && <p>{message}</p>}
     </>
   );
 };
diff --git a/src/components/dashboardStudent/index.js b/src/components/dashboardStudent/index.js
new file mode 100644
index 00000000..8b909dd8
--- /dev/null
+++ b/src/components/dashboardStudent/index.js
@@ -0,0 +1,25 @@
+import Card from '../card';
+
+import ProfileCircle from '../profileCircle';
+
+import './style.css';
+
+const dashboardStudent = ({ name, specialism }) => {
+  const userInitials = name.match(/\b(\w)/g);
+
+  return (
+    <Card>
+      <article className="post">
+        <section className="post-details">
+          <ProfileCircle initials={userInitials} />
+          <div className="post-user-name">
+            <p>{name}</p>
+            <small>{specialism}</small>
+          </div>
+        </section>
+      </article>
+    </Card>
+  );
+};
+
+export default dashboardStudent;
diff --git a/src/components/dashboardStudent/style.css b/src/components/dashboardStudent/style.css
new file mode 100644
index 00000000..d19d8812
--- /dev/null
+++ b/src/components/dashboardStudent/style.css
@@ -0,0 +1,60 @@
+.post {
+    display: grid;
+    row-gap: 20px;
+  }
+  
+  .post-details {
+    display: grid;
+    grid-template-columns: 56px auto 48px;
+    column-gap: 20px;
+  }
+  
+  .post-user-name {
+    padding-top: 4px;
+  }
+  
+  .post-user-name p {
+    font-weight: 600;
+    font-size: 1.1rem;
+  }
+  
+  .post-user-name small {
+    color: #64648c;
+  }
+  
+  .edit-icon {
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    background: #f0f5fa;
+    cursor: pointer;
+  }
+  
+  .edit-icon p {
+    text-align: center;
+    font-size: 20px;
+  }
+  
+  .post-interactions-container {
+    display: grid;
+    grid-template-columns: 2fr 2fr;
+    padding: 20px 10px;
+  }
+  
+  .post-interactions {
+    display: grid;
+    justify-content: center;
+    align-items: flex-start;
+    grid-template-columns: 1fr 1fr;
+  }
+  
+  .post-item {
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    grid-template-columns: 30px 1fr;
+  }
+  .post-interactions-container p {
+    text-align: right;
+  }
+  
\ No newline at end of file
diff --git a/src/components/editPostModal/index.js b/src/components/editPostModal/index.js
index 1292ce17..62738bc1 100644
--- a/src/components/editPostModal/index.js
+++ b/src/components/editPostModal/index.js
@@ -1,13 +1,23 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 import useModal from '../../hooks/useModal';
+import ProfileCircle from '../profileCircle';
+import { UserContext } from '../../context/user';
+import { AuthContext } from '../../context/auth';
+import { patch } from '../../service/apiClient';
 import './style.css';
 import Button from '../button';
 
-const EditPostModal = () => {
+const EditPostModal = ({ postId }) => {
   const { closeModal } = useModal();
+  const auth = useContext(AuthContext);
+  const user = useContext(UserContext);
+
   const [message, setMessage] = useState(null);
   const [text, setText] = useState('');
 
+  const name = `${user.firstName} ${user.lastName}`;
+  const userInitials = name.match(/\b(\w)/g);
+
   const onChange = (e) => {
     setText(e.target.value);
   };
@@ -15,20 +25,28 @@ const EditPostModal = () => {
   const onSubmit = () => {
     setMessage('Submit button was clicked! Closing modal in 2 seconds...');
 
+    patch(`posts/${postId}`, { text }, true, auth.token).then(() => {
+      setText('');
+    });
+
     setTimeout(() => {
       setMessage(null);
       closeModal();
     }, 2000);
   };
 
+  if (!user) {
+    return <p>Loading...</p>;
+  }
+
   return (
     <>
       <section className="create-post-user-details">
         <div className="profile-icon">
-          <p>AJ</p>
+          <ProfileCircle initials={userInitials} />
         </div>
         <div className="post-user-name">
-          <p>Alex J</p>
+          <p>{`${user.firstName} ${user.lastName}`}</p>
         </div>
       </section>
 
@@ -39,7 +57,7 @@ const EditPostModal = () => {
       <section className="create-post-actions">
         <Button
           onClick={onSubmit}
-          text="Post"
+          text="Update Post"
           classes={`${text.length ? 'blue' : 'offwhite'} width-full`}
           disabled={!text.length}
         />
diff --git a/src/components/header/index.js b/src/components/header/index.js
index c591f1e1..db19e2b6 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -5,27 +5,33 @@ import Card from '../card';
 import ProfileIcon from '../../assets/icons/profileIcon';
 import CogIcon from '../../assets/icons/cogIcon';
 import LogoutIcon from '../../assets/icons/logoutIcon';
+import { UserContext } from '../../context/user';
 import { NavLink } from 'react-router-dom';
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 
 const Header = () => {
   const { token, onLogout } = useAuth();
   const [isMenuVisible, setIsMenuVisible] = useState(false);
-
-  const onClickProfileIcon = () => {
-    setIsMenuVisible(!isMenuVisible);
-  };
+  const user = useContext(UserContext);
 
   if (!token) {
     return null;
   }
 
+  const name = user ? `${user.firstName} ${user.lastName}` : 'Guest';
+  const userInitials = user ? name.match(/\b(\w)/g) : ['G'];
+
+  const onClickProfileIcon = () => {
+    setIsMenuVisible(!isMenuVisible);
+    console.log(user);
+  };
+
   return (
     <header>
       <FullLogo textColour="white" />
 
       <div className="profile-icon" onClick={onClickProfileIcon}>
-        <p>AJ</p>
+        <p>{userInitials}</p>
       </div>
 
       {isMenuVisible && (
@@ -33,34 +39,57 @@ const Header = () => {
           <Card>
             <section className="post-details">
               <div className="profile-icon">
-                <p>AJ</p>
+                <p>{userInitials}</p>
               </div>
 
               <div className="post-user-name">
-                <p>Alex Jameson</p>
-                <small>Software Developer, Cohort 3</small>
+                <p>{user ? `${user.firstName} ${user.lastName}` : 'Guest User'}</p>
+                <small>
+                  {user
+                    ? `${user.specialism ?? 'Specialism'}, ${user.cohort?.id ?? 'Cohort Id'}`
+                    : 'No details available'}
+                </small>
               </div>
             </section>
 
-            <section className="user-panel-options border-top">
-              <ul>
-                <li>
-                  <NavLink to="/">
-                    <ProfileIcon /> <p>Profile</p>
-                  </NavLink>
-                </li>
-                <li>
-                  <NavLink to="/">
-                    <CogIcon /> <p>Settings &amp; Privacy</p>
-                  </NavLink>
-                </li>
-                <li>
-                  <NavLink to="#" onClick={onLogout}>
-                    <LogoutIcon /> <p>Log out</p>
-                  </NavLink>
-                </li>
-              </ul>
-            </section>
+            {!user && ( // If user is null, show login/register options
+              <section className="user-panel-options border-top">
+                <ul>
+                  <li>
+                    <NavLink to="/login">
+                      <ProfileIcon /> <p>Login</p>
+                    </NavLink>
+                  </li>
+                  <li>
+                    <NavLink to="/register">
+                      <CogIcon /> <p>Register</p>
+                    </NavLink>
+                  </li>
+                </ul>
+              </section>
+            )}
+
+            {user && ( // If user exists, show profile/settings/logout options
+              <section className="user-panel-options border-top">
+                <ul>
+                  <li>
+                    <NavLink to="/">
+                      <ProfileIcon /> <p>Profile</p>
+                    </NavLink>
+                  </li>
+                  <li>
+                    <NavLink to="/">
+                      <CogIcon /> <p>Settings &amp; Privacy</p>
+                    </NavLink>
+                  </li>
+                  <li>
+                    <NavLink to="#" onClick={onLogout}>
+                      <LogoutIcon /> <p>Log out</p>
+                    </NavLink>
+                  </li>
+                </ul>
+              </section>
+            )}
           </Card>
         </div>
       )}
diff --git a/src/components/navigation/index.js b/src/components/navigation/index.js
index b31393a8..b32eb19f 100644
--- a/src/components/navigation/index.js
+++ b/src/components/navigation/index.js
@@ -1,12 +1,18 @@
+import React, { useContext } from 'react';
 import { NavLink } from 'react-router-dom';
 import CohortIcon from '../../assets/icons/cohortIcon';
 import HomeIcon from '../../assets/icons/homeIcon';
 import ProfileIcon from '../../assets/icons/profileIcon';
+import FileIcon from '../../assets/icons/fileIcon';
 import useAuth from '../../hooks/useAuth';
 import './style.css';
+import NoteIcon from '../../assets/icons/noteIcon';
+import ClipboardIcon from '../../assets/icons/clipboardIcon';
+import { UserContext } from '../../context/user';
 
 const Navigation = () => {
   const { token } = useAuth();
+  const user = useContext(UserContext);
 
   if (!token) {
     return null;
@@ -22,17 +28,39 @@ const Navigation = () => {
           </NavLink>
         </li>
         <li>
-          <NavLink to="/">
+          <NavLink to={`/profile`}>
             <ProfileIcon />
             <p>Profile</p>
           </NavLink>
         </li>
         <li>
-          <NavLink to="/">
+          <NavLink to="/cohort">
             <CohortIcon />
             <p>Cohort</p>
           </NavLink>
         </li>
+        <li>
+          <NavLink to="/">
+            <FileIcon />
+            <p>Exercises</p>
+          </NavLink>
+        </li>
+        {user && user.role === 'TEACHER' && (
+          <li>
+            <NavLink to="/notes">
+              <NoteIcon />
+              <p>Notes</p>
+            </NavLink>
+          </li>
+        )}
+        {user && user.role === 'TEACHER' && (
+          <li>
+            <NavLink to="/">
+              <ClipboardIcon />
+              <p>Logs</p>
+            </NavLink>
+          </li>
+        )}
       </ul>
     </nav>
   );
diff --git a/src/components/post/index.js b/src/components/post/index.js
index 337ca5a6..307b1126 100644
--- a/src/components/post/index.js
+++ b/src/components/post/index.js
@@ -1,17 +1,22 @@
+import { useContext } from 'react';
 import useModal from '../../hooks/useModal';
 import Card from '../card';
 import Comment from '../comment';
 import EditPostModal from '../editPostModal';
 import ProfileCircle from '../profileCircle';
+import { UserContext } from '../../context/user';
 import './style.css';
+import HeartIcon from '../../assets/icons/heartIcon';
+import CommentIcon from '../../assets/icons/commentIcon';
 
-const Post = ({ name, date, content, comments = [], likes = 0 }) => {
+const Post = ({ postId, authorId, name, date, content, comments = [], likes = 0 }) => {
   const { openModal, setModal } = useModal();
+  const user = useContext(UserContext);
 
   const userInitials = name.match(/\b(\w)/g);
 
   const showModal = () => {
-    setModal('Edit post', <EditPostModal />);
+    setModal('Edit post', <EditPostModal postId={postId} />);
     openModal();
   };
 
@@ -26,9 +31,11 @@ const Post = ({ name, date, content, comments = [], likes = 0 }) => {
             <small>{date}</small>
           </div>
 
-          <div className="edit-icon">
-            <p onClick={showModal}>...</p>
-          </div>
+          {user && user.id === authorId && (
+            <div className="edit-icon">
+              <p onClick={showModal}>...</p>
+            </div>
+          )}
         </section>
 
         <section className="post-content">
@@ -39,8 +46,14 @@ const Post = ({ name, date, content, comments = [], likes = 0 }) => {
           className={`post-interactions-container border-top ${comments.length ? 'border-bottom' : null}`}
         >
           <div className="post-interactions">
-            <div>Like</div>
-            <div>Comment</div>
+            <div className="post-item">
+              <HeartIcon />
+              <div>Like</div>
+            </div>
+            <div className="post-item">
+              <CommentIcon />
+              <div>Comment</div>
+            </div>
           </div>
 
           <p>{!likes && 'Be the first to like this'}</p>
@@ -51,6 +64,12 @@ const Post = ({ name, date, content, comments = [], likes = 0 }) => {
             <Comment key={comment.id} name={comment.name} content={comment.content} />
           ))}
         </section>
+
+        <section>
+          <form>
+            <input type="text" placeholder="Write a comment..." />
+          </form>
+        </section>
       </article>
     </Card>
   );
diff --git a/src/components/post/style.css b/src/components/post/style.css
index 3eff5afc..e1c5aa19 100644
--- a/src/components/post/style.css
+++ b/src/components/post/style.css
@@ -27,6 +27,7 @@
   width: 40px;
   height: 40px;
   background: #f0f5fa;
+  cursor: pointer;
 }
 
 .edit-icon p {
@@ -36,15 +37,23 @@
 
 .post-interactions-container {
   display: grid;
-  grid-template-columns: 1fr 3fr;
+  grid-template-columns: 2fr 2fr;
   padding: 20px 10px;
 }
 
 .post-interactions {
   display: grid;
+  justify-content: center;
+  align-items: flex-start;
   grid-template-columns: 1fr 1fr;
 }
 
+.post-item {
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  grid-template-columns: 30px 1fr;
+}
 .post-interactions-container p {
   text-align: right;
 }
diff --git a/src/components/posts/index.js b/src/components/posts/index.js
index 79756c41..6fa4afb8 100644
--- a/src/components/posts/index.js
+++ b/src/components/posts/index.js
@@ -1,21 +1,15 @@
-import { useEffect, useState } from 'react';
 import Post from '../post';
-import { getPosts } from '../../service/apiClient';
-
-const Posts = () => {
-  const [posts, setPosts] = useState([]);
-
-  useEffect(() => {
-    getPosts().then(setPosts);
-  }, []);
 
+const Posts = ({ posts }) => {
   return (
     <>
       {posts.map((post) => {
         return (
           <Post
             key={post.id}
-            name={`${post.author.firstName} ${post.author.lastName}`}
+            postId={post.id}
+            authorId={post.user.id}
+            name={`${post.user.firstName} ${post.user.lastName}`}
             date={post.createdAt}
             content={post.content}
             comments={post.comments}
diff --git a/src/context/auth.js b/src/context/auth.js
index 47cd66c9..d9912198 100644
--- a/src/context/auth.js
+++ b/src/context/auth.js
@@ -1,13 +1,12 @@
+/* eslint-disable camelcase */
 import { createContext, useEffect, useState } from 'react';
 import { useNavigate, useLocation, Navigate } from 'react-router-dom';
+import jwt_decode from 'jwt-decode';
+import { createProfile, login, register } from '../service/apiClient';
+import useAuth from '../hooks/useAuth';
 import Header from '../components/header';
 import Modal from '../components/modal';
 import Navigation from '../components/navigation';
-import useAuth from '../hooks/useAuth';
-import { createProfile, login, register } from '../service/apiClient';
-
-// eslint-disable-next-line camelcase
-import jwt_decode from 'jwt-decode';
 
 const AuthContext = createContext();
 
@@ -15,18 +14,22 @@ const AuthProvider = ({ children }) => {
   const navigate = useNavigate();
   const location = useLocation();
   const [token, setToken] = useState(null);
+  const [user, setUser] = useState(null);
 
   useEffect(() => {
     const storedToken = localStorage.getItem('token');
 
     if (storedToken) {
       setToken(storedToken);
-      navigate(location.state?.from?.pathname || '/');
+      const decodedUser = jwt_decode(storedToken);
+      setUser(decodedUser);
+      navigate(location?.pathname || '/');
     }
-  }, [location.state?.from?.pathname, navigate]);
+  }, [location?.pathname, navigate]);
 
   const handleLogin = async (email, password) => {
     const res = await login(email, password);
+    console.log('res', res);
 
     if (!res.data.token) {
       return navigate('/login');
@@ -34,26 +37,58 @@ const AuthProvider = ({ children }) => {
 
     localStorage.setItem('token', res.data.token);
 
-    setToken(res.token);
-    navigate(location.state?.from?.pathname || '/');
+    setToken(res.data.token);
+    const decodedUser = jwt_decode(res.data.token);
+    console.log('decodedUser', decodedUser);
+    setUser(decodedUser);
+    console.log('userloggedib', user);
+    navigate('/');
   };
 
   const handleLogout = () => {
     localStorage.removeItem('token');
     setToken(null);
+    setUser(null);
   };
 
   const handleRegister = async (email, password) => {
     const res = await register(email, password);
+    localStorage.setItem('token', res.data.token);
     setToken(res.data.token);
-
+    const decodedUser = jwt_decode(res.data.token);
+    setUser(decodedUser);
     navigate('/verification');
   };
 
-  const handleCreateProfile = async (firstName, lastName, githubUrl, bio) => {
+  const handleCreateProfile = async (
+    firstName,
+    lastName,
+    githubUrl,
+    bio,
+    email,
+    mobile,
+    role,
+    specialism,
+    cohort,
+    startDate,
+    endDate
+  ) => {
     const { userId } = jwt_decode(token);
 
-    await createProfile(userId, firstName, lastName, githubUrl, bio);
+    await createProfile(
+      userId,
+      firstName,
+      lastName,
+      githubUrl,
+      bio,
+      email,
+      mobile,
+      role,
+      specialism,
+      cohort,
+      startDate,
+      endDate
+    );
 
     localStorage.setItem('token', token);
     navigate('/');
@@ -61,6 +96,7 @@ const AuthProvider = ({ children }) => {
 
   const value = {
     token,
+    user,
     onLogin: handleLogin,
     onLogout: handleLogout,
     onRegister: handleRegister,
@@ -70,12 +106,16 @@ const AuthProvider = ({ children }) => {
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 };
 
-const ProtectedRoute = ({ children }) => {
-  const { token } = useAuth();
+const ProtectedRoute = ({ children, requiredRole }) => {
+  const { token, user } = useAuth();
   const location = useLocation();
 
   if (!token) {
-    return <Navigate to={'/login'} replace state={{ from: location }} />;
+    return <Navigate to="/login" replace state={{ from: location }} />;
+  }
+
+  if (requiredRole && user?.role !== requiredRole) {
+    return <Navigate to="/not-authorized" replace />;
   }
 
   return (
diff --git a/src/context/user.js b/src/context/user.js
new file mode 100644
index 00000000..26f477be
--- /dev/null
+++ b/src/context/user.js
@@ -0,0 +1,22 @@
+import { createContext, useState, useEffect, useContext } from 'react';
+import { getUserDetails } from '../service/apiClient';
+import { AuthContext } from './auth';
+import jwtDecode from 'jwt-decode';
+
+const UserContext = createContext();
+
+const UserProvider = ({ children }) => {
+  const { token } = useContext(AuthContext);
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    if (token) {
+      const { userId } = jwtDecode(token);
+      getUserDetails(userId).then(setUser);
+    }
+  }, [token]);
+
+  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
+};
+
+export { UserContext, UserProvider };
diff --git a/src/pages/cohortTeacher/index.js b/src/pages/cohortTeacher/index.js
new file mode 100644
index 00000000..7d6f8392
--- /dev/null
+++ b/src/pages/cohortTeacher/index.js
@@ -0,0 +1,7 @@
+export default function CohortTeacher() {
+  return (
+    <div>
+      <h1>Cohort Teacher</h1>
+    </div>
+  );
+}
diff --git a/src/pages/cohortTeacher/style.css b/src/pages/cohortTeacher/style.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
index 54606849..71da4148 100644
--- a/src/pages/dashboard/index.js
+++ b/src/pages/dashboard/index.js
@@ -1,29 +1,67 @@
-import { useState } from 'react';
+import { useState, useContext, useEffect } from 'react';
 import SearchIcon from '../../assets/icons/searchIcon';
 import Button from '../../components/button';
 import Card from '../../components/card';
 import CreatePostModal from '../../components/createPostModal';
 import TextInput from '../../components/form/textInput';
 import Posts from '../../components/posts';
+import DashboardStudent from '../../components/dashboardStudent';
 import useModal from '../../hooks/useModal';
+import ProfileCircle from '../../components/profileCircle';
+import { UserContext } from '../../context/user';
 import './style.css';
+import { users } from '../../service/mockData';
+import { getPosts } from '../../service/apiClient';
 
 const Dashboard = () => {
+  const user = useContext(UserContext);
   const [searchVal, setSearchVal] = useState('');
+  console.log('Usersindash:', user);
+
+  const [posts, setPosts] = useState([]);
+
+  useEffect(() => {
+    updatePosts();
+  }, []);
+
+  const updatePosts = () => {
+    getPosts().then((posts) => {
+      const sortedPosts = posts.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+      setPosts(sortedPosts);
+      console.log('Posts:', posts);
+      console.log('hello');
+    });
+  };
+
+  const { openModal, setModal } = useModal();
+
+  if (!user) {
+    return <p>Loading...</p>;
+  }
+
+  const name = `${user.firstName} ${user.lastName}`;
+  const userInitials = name.match(/\b(\w)/g);
 
   const onChange = (e) => {
     setSearchVal(e.target.value);
   };
 
-  // Use the useModal hook to get the openModal and setModal functions
-  const { openModal, setModal } = useModal();
+  // Separate users based on their role and cohortId
+  const students = users.filter((user) => user.role === 'STUDENT');
+  const teachers = users.filter((user) => user.role === 'TEACHER');
+  const myCohortStudents = students.filter((student) => student.cohortId === user.cohortId);
 
+  console.log('Students:', user);
   // Create a function to run on user interaction
   const showModal = () => {
-    // Use setModal to set the header of the modal and the component the modal should render
-    setModal('Create a post', <CreatePostModal />); // CreatePostModal is just a standard React component, nothing special
-
-    // Open the modal!
+    setModal(
+      'Create a post',
+      <CreatePostModal
+        onPostCreate={() => {
+          updatePosts();
+        }}
+      />
+    );
     openModal();
   };
 
@@ -33,13 +71,13 @@ const Dashboard = () => {
         <Card>
           <div className="create-post-input">
             <div className="profile-icon">
-              <p>AJ</p>
+              <ProfileCircle initials={userInitials} />
             </div>
             <Button text="What's on your mind?" onClick={showModal} />
           </div>
         </Card>
 
-        <Posts />
+        <Posts posts={posts} />
       </main>
 
       <aside>
@@ -49,9 +87,48 @@ const Dashboard = () => {
           </form>
         </Card>
 
-        <Card>
-          <h4>My Cohort</h4>
-        </Card>
+        {user.role === 'STUDENT' && (
+          <>
+            <Card>
+              <h4>My Cohort</h4>
+              {myCohortStudents.map((student) => (
+                <DashboardStudent
+                  key={student.id}
+                  name={`${student.firstName} ${student.lastName}`}
+                  specialism={student.specialism}
+                />
+              ))}
+            </Card>
+          </>
+        )}
+
+        {user.role === 'TEACHER' && (
+          <>
+            <Card>
+              <h4>Cohort</h4>
+            </Card>
+            <Card>
+              <h4>Students</h4>
+              {students.map((student) => (
+                <DashboardStudent
+                  key={student.id}
+                  name={`${student.firstName} ${student.lastName}`}
+                  specialism={student.specialism}
+                />
+              ))}
+            </Card>
+            <Card>
+              <h4>Teachers</h4>
+              {teachers.map((teacher) => (
+                <DashboardStudent
+                  key={teacher.id}
+                  name={`${teacher.firstName} ${teacher.lastName}`}
+                  specialism={teacher.specialism}
+                />
+              ))}
+            </Card>
+          </>
+        )}
       </aside>
     </>
   );
diff --git a/src/pages/notes/index.js b/src/pages/notes/index.js
new file mode 100644
index 00000000..4b16e1e9
--- /dev/null
+++ b/src/pages/notes/index.js
@@ -0,0 +1,7 @@
+export default function Notes() {
+  return (
+    <div>
+      <h1>Notes</h1>
+    </div>
+  );
+}
diff --git a/src/pages/notes/notes.css b/src/pages/notes/notes.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/profile/studentProfile/index.js b/src/pages/profile/studentProfile/index.js
new file mode 100644
index 00000000..ab777f21
--- /dev/null
+++ b/src/pages/profile/studentProfile/index.js
@@ -0,0 +1,251 @@
+/* eslint-disable prettier/prettier */
+import { useState, useEffect, useContext } from 'react';
+import ProfileIcon from '../../../assets/icons/profileIcon';
+import { FaEye, FaEyeSlash, FaLock } from 'react-icons/fa'; // run cmd: npm install react-icons
+import '../style.css';
+// import { useParams } from 'react-router-dom';
+import { UserContext } from '../../../context/user';
+
+const StudentProfile = () => {
+  const [storedProfile, setStoredProfile] = useState();
+  const [profile, setProfile] = useState();
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  // const { id } = useParams();
+
+  const user = useContext(UserContext);
+
+  const bioPlaceholder =
+    'Tell us about yourself, your professional and educational highlights to date...';
+
+  useEffect(() => {
+    setProfile(user);
+    setStoredProfile(user);
+  }, []);
+
+  const handleChange = (e) => {
+    e.preventDefault();
+    setProfile({ ...profile, [e.target.name]: e.target.value });
+  };
+
+  const handleCancel = () => {
+    setProfile(storedProfile);
+  };
+
+  const handleSubmit = (e) => {
+    setStoredProfile(profile);
+    fetch(`profiles/${user.id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(profile)
+    });
+  };
+
+  if (!profile)
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          height: '100vh',
+          fontSize: '3rem',
+          fontWeight: 'bold'
+        }}
+      >
+        Loading...
+      </div>
+    );
+
+  return (
+    <div className="profile-container">
+      <div className="profile-header">
+        <h3>Profile</h3>
+      </div>
+      <div className="profile-content">
+        <div className="profile-content-header">
+          <ProfileIcon className="profile-img-big" />
+          <div>
+            <h2>
+              {storedProfile.firstName} {storedProfile.lastName}
+            </h2>
+            <p>{storedProfile.jobTitle}</p>
+          </div>
+        </div>
+        <div className="profile-content-body">
+          <div className="profile-content-left">
+            <div className="profile-content-basic">
+              <h4 style={{ paddingLeft: '15px' }}>Basic Info</h4>
+              <div className="profil-content-row">
+                <div className="profile-content-bio-header">
+                  <div>
+                    <ProfileIcon className="profile-img-small" />
+                  </div>
+                  <div>Add Headshot</div>{' '}
+                  {/* Add onClick into this on if you want to add photo function */}
+                </div>
+              </div>
+              <form>
+                <div className="profil-content-row">
+                  <label>
+                    First Name*
+                    <input
+                      type="text"
+                      name="firstName"
+                      value={profile.firstName}
+                      onChange={handleChange}
+                    />
+                  </label>
+                </div>
+                <div className="profil-content-row">
+                  <label>
+                    Last Name*
+                    <input
+                      type="text"
+                      name="lastName"
+                      value={profile.lastName}
+                      onChange={handleChange}
+                    />
+                  </label>
+                </div>
+                <div className="profil-content-row">
+                  <label>
+                    Username*
+                    <input
+                      type="text"
+                      name="username"
+                      value={profile.username}
+                      onChange={handleChange}
+                    />
+                  </label>
+                </div>
+                <div className="profil-content-row">
+                  <label>
+                    Github Username*
+                    <input
+                      type="text"
+                      name="githubUsername"
+                      value={profile.githubUsername}
+                      onChange={handleChange}
+                    />
+                  </label>
+                </div>
+              </form>
+            </div>
+            <div className="profile-content-contact">
+              <h4 style={{ paddingLeft: '15px' }}>Contact Info</h4>
+              <form>
+                <label>
+                  Email*
+                  <input type="email" name="email" value={profile.email} onChange={handleChange} />
+                </label>
+                <label>
+                  Mobile*
+                  <input type="tel" name="mobile" value={profile.mobile} onChange={handleChange} />
+                </label>
+                <label>
+                  Password*
+                  <div className="password-container">
+                    <input
+                      type={passwordVisible ? 'text' : 'password'}
+                      name="password"
+                      value={profile.password}
+                      onChange={handleChange}
+                    />
+                    {passwordVisible ? (
+                      <FaEyeSlash
+                        className="password-toggle"
+                        onClick={() => setPasswordVisible(false)}
+                      />
+                    ) : (
+                      <FaEye className="password-toggle" onClick={() => setPasswordVisible(true)} />
+                    )}
+                  </div>
+                </label>
+              </form>
+            </div>
+            <div className="profile-content-bottom">
+              <p className="profile-bottom-text">* Required</p>
+            </div>
+          </div>
+          <div className="profile-content-right">
+            <div className="profile-content-training">
+              <h4 style={{ paddingLeft: '15px' }}>Training Info</h4>
+              <form>
+                <div className="profil-content-row">
+                  <label>
+                    Role*
+                    <div className="locked-input">
+                      <input type="text" name="role" value={profile.role} disabled />
+                      <FaLock className="lock-icon" />
+                    </div>
+                  </label>
+                </div>
+                <div className="profil-content-row">
+                  <label>
+                    Specialism*
+                    <div className="locked-input">
+                      <input type="text" name="specialism" value={profile.specialism} disabled />
+                      <FaLock className="lock-icon" />
+                    </div>
+                  </label>
+                </div>
+                <div className="profil-content-row">
+                  <label>
+                    Cohort*
+                    <div className="locked-input">
+                      <input type="text" name="cohort" value={"hasd"} disabled />
+                      <FaLock className="lock-icon" />
+                    </div>
+                  </label>
+                </div>
+                <div className="profil-content-row">
+                  <label>
+                    Start Date*
+                    <div className="locked-input">
+                      <input type="date" name="startDate" value={profile.startDate} disabled />
+                      <FaLock className="lock-icon" />
+                    </div>
+                  </label>
+                </div>
+                <div className="profil-content-row">
+                  <label>
+                    End Date*
+                    <div className="locked-input">
+                      <input type="date" name="endDate" value={profile.endDate} disabled />
+                      <FaLock className="lock-icon" />
+                    </div>
+                  </label>
+                </div>
+              </form>
+            </div>
+            <div className="profile-content-bio">
+              <h4 style={{ paddingLeft: '15px' }}>Bio</h4>
+              <textarea
+                className="profile-bio"
+                name="bio"
+                value={profile.bio || ''}
+                onChange={handleChange}
+                placeholder={profile.bio ? '' : bioPlaceholder}
+                maxLength={300}
+              />
+              <p className="bio-length-text">
+                {' '}
+                {profile.bio ? `${profile.bio.length}/300` : `0/300`}{' '}
+              </p>
+            </div>
+            <div className="profile-content-bottom">
+              <button className="cancel-button" type="button" onClick={handleCancel}>
+                <p className="cancel-button-text">Cancel</p>
+              </button>
+              <button className="save-button" type="button" onClick={handleSubmit}>
+                <p className="save-button-text">Save</p>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StudentProfile;
diff --git a/src/pages/profile/style.css b/src/pages/profile/style.css
new file mode 100644
index 00000000..1365a73f
--- /dev/null
+++ b/src/pages/profile/style.css
@@ -0,0 +1,200 @@
+.profile-container {
+  background-color: #f0f5fa;
+}
+
+.profile-header {
+  color: white;
+  padding: 15px;
+  margin-left: 10px;
+  text-align: left; 
+}
+
+.profile-content {
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  min-width: fit-content;
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  border-radius: 30px;
+}
+
+.profile-content-header {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  border-bottom: 1px solid lightgray; 
+  padding-bottom: 15px;
+  margin-bottom: 15px;
+}
+
+.profile-img-big {
+  width: 150px;
+  height: 150px;
+  margin: 30px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.profile-img-small {
+  width: 60px;
+  height: 60px;
+  margin: 30px;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+/* Profile Body */
+.profile-content-body {
+  display: flex;
+  gap: 20px;
+}
+
+.profile-content-left,
+.profile-content-right {
+  flex: 1;
+}
+
+.profil-content-row {
+  min-height: 100px;
+}
+
+.profile-content-bio-header {
+  display: flex;
+  flex-direction: row;
+  padding: 20px;
+  gap: 10px;
+  align-items: center;
+}
+
+.profile-content-basic,
+.profile-content-training {
+  border-bottom: 1px solid lightgray; 
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  min-height: 560px;
+}
+
+.profile-content-contact,
+.profile-content-bio {
+  border-bottom: 1px solid lightgray; 
+  margin-bottom: 20px;
+  min-height: 335px;
+}
+
+.profile-content-bottom {
+ min-height: 100px;
+}
+
+.password-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.password-container input {
+  width: 100%;
+  padding-right: 40px;
+}
+
+.password-toggle {
+  position: absolute;
+  right: 20px;
+  cursor: pointer;
+  color: #555;
+  font-size: 1.2rem;
+}
+
+.locked-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+
+.lock-icon {
+  position: absolute;
+  right: 10px;
+  color: #999;
+  font-size: 1.2rem;
+}
+
+/* Form Styles */
+form {
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  display: block; 
+  margin-bottom: 5px; 
+}
+
+input,
+textarea {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+textarea {
+  height: 80px;
+  resize: none;
+}
+
+.profile-bio {
+  min-height: 250px;
+  margin-left: 15px;
+}
+
+.bio-length-text {
+  font-size: 0.9rem;
+  color: rgb(172, 172, 172);
+  margin-top: 5px;
+  margin-left: 15px;
+}
+
+.profile-bottom-text {
+  color: #868686;
+  margin-left: 20px;
+}
+
+.cancel-button {
+  background-color: #dbdbdb;
+  margin-right: 20px;
+}
+
+.cancel-button-text {
+}
+
+.cancel-button:hover {
+  background-color: #b4b4b4;
+}
+
+.save-button {
+  background-color: #00005c;
+}
+
+.save-button-text {
+  color: white;
+}
+
+.save-button:hover {
+  background-color: #0000b4;
+}
diff --git a/src/pages/profile/teacherProfile/index.js b/src/pages/profile/teacherProfile/index.js
new file mode 100644
index 00000000..57215d74
--- /dev/null
+++ b/src/pages/profile/teacherProfile/index.js
@@ -0,0 +1,261 @@
+/* eslint-disable prettier/prettier */
+import { useState, useEffect } from 'react';
+import ProfileIcon from '../../../assets/icons/profileIcon';
+import { FaEye, FaEyeSlash, FaLock } from 'react-icons/fa'; // run cmd: npm install react-icons
+import '../style.css';
+import { useParams } from 'react-router-dom';
+
+const TeacherProfile = () => {
+  const [storedProfile, setStoredProfile] = useState();
+  const [profile, setProfile] = useState();
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  const { id } = useParams(); 
+
+  const bioPlaceholder =
+    'Tell us about yourself, your professional and educational highlights to date...';
+
+    useEffect(() => {
+      fetch(`profileUrl/${id}`)
+        .then(response => response.json())
+        .then(setStoredProfile)
+        .then(setProfile)
+    }, []);
+
+  const handleChange = (e) => {
+    e.preventDefault();
+    setProfile({ ...profile, [e.target.name]: e.target.value });
+  };
+
+  const handleCancel = () => {
+    setProfile(storedProfile);
+  };
+
+  const handleSubmit = (e) => {
+    setStoredProfile(profile);
+    fetch(`putURL/${id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(profile)
+    });
+  };
+
+  if (!profile)  return (
+    <div 
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        fontSize: '3rem',
+        fontWeight: 'bold'
+      }}
+    >
+      Loading...
+    </div>
+  );
+
+  return (
+    <div className="profile-container">
+      <div className="profile-header">
+        <h3>Profile Teacher</h3>
+      </div>
+      <div className="profile-content">
+        <div className="profile-content-header">
+          <ProfileIcon className="profile-img-big" />
+          <div>
+            <h2>
+              {storedProfile.firstName} {storedProfile.lastName}
+            </h2>
+            <p>{storedProfile.jobTitle}</p>
+          </div>
+        </div>
+        <div className="profile-content-body">
+          <div className="profile-content-left">
+            <div className="profile-content-basic">
+              <h4 style={{ paddingLeft: "15px" }}>Basic Info</h4>
+              <div className="profil-content-row">
+                <div className="profile-content-bio-header">
+                  <div>
+                    <ProfileIcon className="profile-img-small" />
+                  </div>
+                  <div>Add Headshot</div> {/* Add onClick into this on if you want to add photo function */ }
+                </div>
+              </div>
+              <form>
+                <div className="profil-content-row">
+                  <label>
+                    First Name*
+                    <input
+                      type="text"
+                      name="firstName"
+                      value={profile.firstName}
+                      onChange={handleChange}
+                    />
+                  </label>
+                </div>
+                <div className="profil-content-row">
+                  <label>
+                    Last Name*
+                    <input
+                      type="text"
+                      name="lastName"
+                      value={profile.lastName}
+                      onChange={handleChange}
+                    />
+                  </label>
+                </div>
+                <div className="profil-content-row">
+                  <label>
+                    Username*
+                    <input
+                      type="text"
+                      name="username"
+                      value={profile.username}
+                      onChange={handleChange}
+                    />
+                  </label>
+                </div>
+                <div className="profil-content-row">
+                  <label>
+                    Github Username*
+                    <input
+                      type="text"
+                      name="githubUsername"
+                      value={profile.githubUsername}
+                      onChange={handleChange}
+                    />
+                  </label>
+                </div>
+              </form>
+            </div>
+            <div className="profile-content-contact">
+              <h4 style={{ paddingLeft: "15px" }}>Contact Info</h4>
+              <form>
+                <label>
+                  Email*
+                  <input
+                    type="email"
+                    name="email"
+                    value={profile.email}
+                    onChange={handleChange}
+                  />
+                </label>
+                <label>
+                  Mobile*
+                  <input
+                    type="tel"
+                    name="mobile"
+                    value={profile.mobile}
+                    onChange={handleChange}
+                  />
+                </label>
+                <label>
+                  Password*
+                  <div className="password-container">
+                    <input
+                      type={passwordVisible ? 'text' : 'password'}
+                      name="password"
+                      value={profile.password}
+                      onChange={handleChange}
+                    />
+                    {passwordVisible ? (
+                      <FaEyeSlash className="password-toggle" onClick={() => setPasswordVisible(false)} />
+                    ) : (
+                      <FaEye className="password-toggle" onClick={() => setPasswordVisible(true)} />
+                    )}
+                  </div>
+                </label>
+              </form>
+            </div>
+            <div className='profile-content-bottom'>
+              <p className="profile-bottom-text">* Required</p>
+            </div>
+          </div>
+          <div className="profile-content-right">
+            <div className="profile-content-training">
+              <h4 style={{ paddingLeft: "15px" }}>Professional Info</h4>
+              <form>
+                <div className="profil-content-row">
+                  <label>
+                    Role*
+                    <div className="locked-input">
+                      <input
+                        type="text"
+                        name="role"
+                        value={profile.role}
+                        disabled
+                      />
+                      <FaLock className="lock-icon" />
+                    </div>
+                  </label>
+                </div>
+                <div className="profil-content-row">
+                  <label>
+                    Specialism*
+                    <div className="locked-input">
+                      <input
+                        type="text"
+                        name="specialism"
+                        value={profile.specialism}
+                        disabled
+                      />
+                      <FaLock className="lock-icon" />
+                    </div>
+                  </label>
+                </div>
+                <div className="profil-content-row">
+                  <label>
+                    Job Title*
+                    <div className="locked-input">
+                      <input
+                        type="text"
+                        name="cohort"
+                        value={profile.jobTitle}
+                        disabled
+                      />
+                      <FaLock className="lock-icon" />
+                    </div>
+                  </label>
+                </div>
+              </form>
+            </div>
+            <div className="profile-content-bio">
+              <h4 style={{ paddingLeft: "15px" }}>Bio</h4>
+              <textarea
+                className="profile-bio"
+                name="bio"
+                value={profile.bio || ''}
+                onChange={handleChange}
+                placeholder={profile.bio ? '' : bioPlaceholder}
+                maxLength={300}
+              />
+              <p className="bio-length-text">
+                {' '}
+                {profile.bio ? `${profile.bio.length}/300` : `0/300`}{' '}
+              </p>
+            </div>
+            <div className='profile-content-bottom'>
+              <button
+                className='cancel-button'
+                type='button'
+                onClick={handleCancel}
+              >
+                <p className='cancel-button-text'>Cancel</p>
+              </button>
+              <button
+                className='save-button'
+                type='button'
+                onClick={handleSubmit}
+              >
+                <p className='save-button-text'>Save</p>
+              </button>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeacherProfile;
diff --git a/src/pages/register/index.js b/src/pages/register/index.js
index 5cc70e32..70ef6fa4 100644
--- a/src/pages/register/index.js
+++ b/src/pages/register/index.js
@@ -8,12 +8,49 @@ import './register.css';
 const Register = () => {
   const { onRegister } = useAuth();
   const [formData, setFormData] = useState({ email: '', password: '' });
+  const [errors, setErrors] = useState({ email: '', password: '' });
+
+  const validateEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const validatePassword = (password) => {
+    return (
+      password.length >= 8 &&
+      /[A-Z]/.test(password) &&
+      /\d/.test(password) &&
+      /[!@#$%^&*(),.?":{}|<>]/.test(password)
+    );
+  };
 
   const onChange = (e) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
   };
 
+  const handleSubmit = () => {
+    let emailError = '';
+    let passwordError = '';
+
+    if (!validateEmail(formData.email)) {
+      emailError = 'Invalid email format';
+    }
+
+    if (!validatePassword(formData.password)) {
+      passwordError =
+        'Password must be at least 8 characters long, contain one uppercase letter, one number, and one special character';
+    }
+
+    if (emailError || passwordError) {
+      setErrors({ email: emailError, password: passwordError });
+      return;
+    }
+
+    setErrors({ email: '', password: '' });
+    onRegister(formData.email, formData.password);
+  };
+
   return (
     <div className="bg-blue register credentialpage">
       <CredentialsCard
@@ -31,6 +68,7 @@ const Register = () => {
               type="email"
               name="email"
               label={'Email *'}
+              error={errors.email}
             />
             <TextInput
               value={formData.password}
@@ -38,13 +76,10 @@ const Register = () => {
               name="password"
               label={'Password *'}
               type={'password'}
+              error={errors.password}
             />
           </form>
-          <Button
-            text="Sign up"
-            onClick={() => onRegister(formData.email, formData.password)}
-            classes="green width-full"
-          />
+          <Button text="Sign up" onClick={handleSubmit} classes="green width-full" />
         </div>
       </CredentialsCard>
     </div>
diff --git a/src/pages/welcome/index.js b/src/pages/welcome/index.js
index 85af11ab..d2f23587 100644
--- a/src/pages/welcome/index.js
+++ b/src/pages/welcome/index.js
@@ -4,6 +4,8 @@ import useAuth from '../../hooks/useAuth';
 import StepOne from './stepOne';
 import StepTwo from './stepTwo';
 import './style.css';
+import StepThree from './stepThree';
+import StepFour from './stepFour';
 
 const Welcome = () => {
   const { onCreateProfile } = useAuth();
@@ -12,7 +14,14 @@ const Welcome = () => {
     firstName: '',
     lastName: '',
     githubUsername: '',
-    bio: ''
+    bio: '',
+    email: '',
+    mobile: '',
+    role: 'Student',
+    specialism: 'Software Development',
+    cohort: 'Cohort 4',
+    startDate: 'January 2025',
+    endDate: 'May 2025'
   });
 
   const onChange = (event) => {
@@ -25,7 +34,20 @@ const Welcome = () => {
   };
 
   const onComplete = () => {
-    onCreateProfile(profile.firstName, profile.lastName, profile.githubUsername, profile.bio);
+    console.log(profile);
+    onCreateProfile(
+      profile.firstName,
+      profile.lastName,
+      profile.githubUsername,
+      profile.bio,
+      profile.email,
+      profile.mobile,
+      profile.role,
+      profile.specialism,
+      profile.cohort,
+      profile.startDate,
+      profile.endDate
+    );
   };
 
   return (
@@ -38,6 +60,8 @@ const Welcome = () => {
       <Stepper header={<WelcomeHeader />} onComplete={onComplete}>
         <StepOne data={profile} setData={onChange} />
         <StepTwo data={profile} setData={onChange} />
+        <StepThree data={profile} setData={onChange} />
+        <StepFour data={profile} setData={onChange} />
       </Stepper>
     </main>
   );
diff --git a/src/pages/welcome/stepFour/index.js b/src/pages/welcome/stepFour/index.js
new file mode 100644
index 00000000..2509af13
--- /dev/null
+++ b/src/pages/welcome/stepFour/index.js
@@ -0,0 +1,20 @@
+import Form from '../../../components/form';
+
+const StepFour = ({ data, setData }) => {
+  return (
+    <>
+      <div className="welcome-formheader">
+        <h3>Bio</h3>
+      </div>
+      <Form className="welcome-form">
+        <div className="welcome-form-inputs">
+          <textarea name="bio" value={data.bio} onChange={setData} maxLength={300}></textarea>
+          <p className="text-blue1">*Required</p>
+          <p className="text-blue1">{data.bio.length}/300</p>
+        </div>
+      </Form>
+    </>
+  );
+};
+
+export default StepFour;
diff --git a/src/pages/welcome/stepOne/index.js b/src/pages/welcome/stepOne/index.js
index 317940f8..44f4f68c 100644
--- a/src/pages/welcome/stepOne/index.js
+++ b/src/pages/welcome/stepOne/index.js
@@ -22,14 +22,19 @@ const StepOne = ({ data, setData }) => {
             onChange={setData}
             value={data.firstName}
             name="firstName"
-            label={'First name'}
+            label={'First name*'}
+          />
+          <TextInput
+            onChange={setData}
+            value={data.lastName}
+            name="lastName"
+            label={'Last name*'}
           />
-          <TextInput onChange={setData} value={data.lastName} name="lastName" label={'Last name'} />
           <TextInput
             onChange={setData}
             value={data.githubUsername}
             name="githubUsername"
-            label={'Github Username'}
+            label={'Github Username*'}
           />
           <p className="text-blue1">*Required</p>
         </div>
diff --git a/src/pages/welcome/stepThree/index.js b/src/pages/welcome/stepThree/index.js
new file mode 100644
index 00000000..c9894fbd
--- /dev/null
+++ b/src/pages/welcome/stepThree/index.js
@@ -0,0 +1,24 @@
+import Form from '../../../components/form';
+import TextInput from '../../../components/form/textInput';
+
+const StepThree = ({ data, setData }) => {
+  return (
+    <>
+      <div className="welcome-formheader">
+        <h3>Training info</h3>
+      </div>
+      <Form className="welcome-form">
+        <div className="welcome-form-inputs">
+          <TextInput value={data.role} name="role" label={'Role*'} readOnly />
+          <TextInput value={data.specialism} name="specialism" label={'Specialism*'} readOnly />
+          <TextInput value={data.cohort} name="cohort" label={'Cohort*'} readOnly />
+          <TextInput value={data.startDate} name="startDate" label={'Start Date*'} readOnly />
+          <TextInput value={data.endDate} name="endDate" label={'End Date*'} readOnly />
+          <p className="text-blue1">*Required</p>
+        </div>
+      </Form>
+    </>
+  );
+};
+
+export default StepThree;
diff --git a/src/pages/welcome/stepTwo/index.js b/src/pages/welcome/stepTwo/index.js
index f40dad3e..fd224c20 100644
--- a/src/pages/welcome/stepTwo/index.js
+++ b/src/pages/welcome/stepTwo/index.js
@@ -1,14 +1,15 @@
 import Form from '../../../components/form';
-
+import TextInput from '../../../components/form/textInput';
 const StepTwo = ({ data, setData }) => {
   return (
     <>
       <div className="welcome-formheader">
-        <h3>Bio</h3>
+        <h3>Contact Information</h3>
       </div>
       <Form className="welcome-form">
         <div className="welcome-form-inputs">
-          <textarea name="bio" value={data.bio} onChange={setData}></textarea>
+          <TextInput onChange={setData} value={data.email} name="email" label={'Email*'} />
+          <TextInput onChange={setData} value={data.mobile} name="mobile" label={'Mobile*'} />
           <p className="text-blue1">*Required</p>
         </div>
       </Form>
diff --git a/src/service/apiClient.js b/src/service/apiClient.js
index 5f3cdbcf..6aa33822 100644
--- a/src/service/apiClient.js
+++ b/src/service/apiClient.js
@@ -9,12 +9,43 @@ async function register(email, password) {
   return await login(email, password);
 }
 
-async function createProfile(userId, firstName, lastName, githubUrl, bio) {
-  return await patch(`users/${userId}`, { firstName, lastName, githubUrl, bio });
+async function createProfile(
+  userId,
+  firstName,
+  lastName,
+  githubUrl,
+  bio,
+  email,
+  mobile,
+  role,
+  specialism,
+  cohort,
+  startDate,
+  endDate
+) {
+  return await patch(`users/${userId}`, {
+    firstName,
+    lastName,
+    githubUrl,
+    bio,
+    email,
+    mobile,
+    role,
+    specialism,
+    cohort,
+    startDate,
+    endDate
+  });
+}
+
+async function getUserDetails(userId) {
+  const res = await get(`users/${userId}`);
+  return res.data;
 }
 
 async function getPosts() {
   const res = await get('posts');
+  console.log('Posts:', res.data.posts);
   return res.data.posts;
 }
 
@@ -52,4 +83,4 @@ async function request(method, endpoint, data, auth = true) {
   return response.json();
 }
 
-export { login, getPosts, register, createProfile };
+export { login, getPosts, register, createProfile, getUserDetails, post, patch };
diff --git a/src/service/mockData.js b/src/service/mockData.js
index d49e98a4..afe646b0 100644
--- a/src/service/mockData.js
+++ b/src/service/mockData.js
@@ -1,16 +1,65 @@
-const user = {
-  token: 'test-token',
-  user: {
+const users = [
+  {
+    token: 'test-token',
     id: 1,
     email: 'test@email.com',
     cohortId: 1,
     role: 'STUDENT',
     firstName: 'Joe',
     lastName: 'Bloggs',
+    specialism: 'Full Stack',
+    bio: 'Lorem ipsum dolor sit amet.',
+    githubUrl: 'https://github.com/vherus'
+  },
+  {
+    token: 'test-token',
+    id: 2,
+    email: 'test2@email.com',
+    cohortId: 1,
+    role: 'STUDENT',
+    firstName: 'John',
+    lastName: 'Doe',
+    specialism: 'Software Development',
+    bio: 'Lorem ipsum dolor sit amet.',
+    githubUrl: 'https://github.com/vherus'
+  },
+  {
+    token: 'test-token',
+    id: 3,
+    email: 'teacher1@test.com',
+    cohortId: 1,
+    role: 'TEACHER',
+    firstName: 'Jane',
+    lastName: 'Smith',
+    specialism: 'Cloud Computing',
+    bio: 'Lorem ipsum dolor sit amet.',
+    githubUrl: 'https://github.com/vherus'
+  },
+  {
+    token: 'test-token',
+    id: 4,
+    email: 'teacher2@test.com',
+    cohortId: 2,
+    role: 'TEACHER',
+    firstName: 'Rick',
+    lastName: 'Sanchez',
+    specialism: 'Full Stack',
+    bio: 'Lorem ipsum dolor sit amet.',
+    githubUrl: 'https://github.com/vherus'
+  },
+  {
+    token: 'test-token',
+    id: 5,
+    email: 'test2@email.com',
+    cohortId: 1,
+    role: 'STUDENT',
+    firstName: 'Steven',
+    lastName: 'Man',
+    specialism: 'Software Development',
     bio: 'Lorem ipsum dolor sit amet.',
     githubUrl: 'https://github.com/vherus'
   }
-};
+];
 
 const posts = [
   {
@@ -61,4 +110,4 @@ const posts = [
   }
 ];
 
-export { user, posts };
+export { users, posts };