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..4412c842 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,10 +25,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 +7692,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 +14525,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": {
diff --git a/package.json b/package.json
index 249b6b05..ba282b30 100644
--- a/package.json
+++ b/package.json
@@ -47,9 +47,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..e6d78b13 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,43 +1,56 @@
 import './App.css';
 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 Verification from './pages/verification';
 import { AuthProvider, ProtectedRoute } from './context/auth';
 import { ModalProvider } from './context/modal';
+import { UserProvider } from './context/user';
 import Welcome from './pages/welcome';
 
 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
+                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/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/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..228d2b67 100644
--- a/src/components/createPostModal/index.js
+++ b/src/components/createPostModal/index.js
@@ -1,15 +1,24 @@
-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 = () => {
   // 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);
   };
@@ -17,20 +26,28 @@ const CreatePostModal = () => {
   const onSubmit = () => {
     setMessage('Submit button was clicked! Closing modal in 2 seconds...');
 
+    post('posts', { 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>
 
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/navigation/index.js b/src/components/navigation/index.js
index b31393a8..13dff42e 100644
--- a/src/components/navigation/index.js
+++ b/src/components/navigation/index.js
@@ -2,8 +2,11 @@ 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';
 
 const Navigation = () => {
   const { token } = useAuth();
@@ -28,11 +31,37 @@ const Navigation = () => {
           </NavLink>
         </li>
         <li>
-          <NavLink to="/">
+          <NavLink to="/cohort">
             <CohortIcon />
             <p>Cohort</p>
           </NavLink>
         </li>
+        <li>
+          <NavLink to="/">
+            <FileIcon />
+            <p>Exercises</p>
+          </NavLink>
+        </li>
+        <li>
+          <NavLink to="/">
+            <NoteIcon />
+            <p>Notes</p>
+          </NavLink>
+        </li>
+        <li>
+          <NavLink to="/">
+            <ClipboardIcon />
+            <p>Logs</p>
+          </NavLink>
+        </li>
+        {/* {user?.role === 'TEACHER' && (
+          <li>
+            <NavLink to="/notes">
+              <NoteIcon />
+              <p>Notes</p>
+            </NavLink>
+          </li>
+        )} */}
       </ul>
     </nav>
   );
diff --git a/src/components/post/index.js b/src/components/post/index.js
index 337ca5a6..2724336a 100644
--- a/src/components/post/index.js
+++ b/src/components/post/index.js
@@ -1,17 +1,20 @@
+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';
 
-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 +29,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">
diff --git a/src/components/posts/index.js b/src/components/posts/index.js
index 79756c41..9614a75f 100644
--- a/src/components/posts/index.js
+++ b/src/components/posts/index.js
@@ -15,6 +15,8 @@ const Posts = () => {
         return (
           <Post
             key={post.id}
+            postId={post.id}
+            authorId={post.author.id}
             name={`${post.author.firstName} ${post.author.lastName}`}
             date={post.createdAt}
             content={post.content}
diff --git a/src/context/auth.js b/src/context/auth.js
index 47cd66c9..6b7f8613 100644
--- a/src/context/auth.js
+++ b/src/context/auth.js
@@ -21,9 +21,9 @@ const AuthProvider = ({ children }) => {
 
     if (storedToken) {
       setToken(storedToken);
-      navigate(location.state?.from?.pathname || '/');
+      navigate(location?.pathname || '/');
     }
-  }, [location.state?.from?.pathname, navigate]);
+  }, [location?.pathname, navigate]);
 
   const handleLogin = async (email, password) => {
     const res = await login(email, password);
@@ -34,8 +34,8 @@ const AuthProvider = ({ children }) => {
 
     localStorage.setItem('token', res.data.token);
 
-    setToken(res.token);
-    navigate(location.state?.from?.pathname || '/');
+    setToken(res.data.token);
+    navigate('/');
   };
 
   const handleLogout = () => {
@@ -50,10 +50,35 @@ const AuthProvider = ({ children }) => {
     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('/');
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..962fa54d 100644
--- a/src/pages/dashboard/index.js
+++ b/src/pages/dashboard/index.js
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useContext } from 'react';
 import SearchIcon from '../../assets/icons/searchIcon';
 import Button from '../../components/button';
 import Card from '../../components/card';
@@ -6,10 +6,20 @@ import CreatePostModal from '../../components/createPostModal';
 import TextInput from '../../components/form/textInput';
 import Posts from '../../components/posts';
 import useModal from '../../hooks/useModal';
+import ProfileCircle from '../../components/profileCircle';
+import { UserContext } from '../../context/user';
 import './style.css';
 
 const Dashboard = () => {
   const [searchVal, setSearchVal] = useState('');
+  const user = useContext(UserContext);
+
+  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);
@@ -33,7 +43,7 @@ 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>
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..8048b3e9 100644
--- a/src/service/apiClient.js
+++ b/src/service/apiClient.js
@@ -9,8 +9,38 @@ 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.user;
 }
 
 async function getPosts() {
@@ -52,4 +82,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 };
