diff --git a/.eslintrc.json b/.eslintrc.json
index 2988e2ba..6b70ab54 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -23,4 +23,4 @@
       "version": "detect"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 136c3a15..d92e7c64 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,9 @@ import Verification from './pages/verification';
 import { AuthProvider, ProtectedRoute } from './context/auth';
 import { ModalProvider } from './context/modal';
 import Welcome from './pages/welcome';
+import UserProfile from './pages/profilePage';
+import Cohort from './pages/cohort';
+import Search from './pages/search';
 
 const App = () => {
   return (
@@ -20,6 +23,24 @@ const App = () => {
             <Route path="loading" element={<Loading />} />
             <Route path="verification" element={<Verification />} />
 
+            <Route
+              path="dashboard/search/:searchQuery"
+              element={
+                <ProtectedRoute>
+                  <Search />
+                </ProtectedRoute>
+              }
+            />
+
+            <Route
+              path="dashboard/search/"
+              element={
+                <ProtectedRoute>
+                  <Search />
+                </ProtectedRoute>
+              }
+            />
+
             <Route
               index
               element={
@@ -28,6 +49,16 @@ const App = () => {
                 </ProtectedRoute>
               }
             />
+
+            <Route
+              path="/cohort"
+              element={
+                <ProtectedRoute>
+                  <Cohort />
+                </ProtectedRoute>
+              }
+            />
+
             <Route
               path="welcome"
               element={
@@ -36,6 +67,22 @@ const App = () => {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="/profile/:profileId"
+              element={
+                <ProtectedRoute>
+                  <UserProfile isEditMode={false} />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/profile/:profileId/edit"
+              element={
+                <ProtectedRoute>
+                  <UserProfile isEditMode={true} />
+                </ProtectedRoute>
+              }
+            />
           </Routes>
         </ModalProvider>
       </AuthProvider>
diff --git a/src/assets/icons/arrowLeftIcon.js b/src/assets/icons/arrowLeftIcon.js
new file mode 100644
index 00000000..f4b9e9d5
--- /dev/null
+++ b/src/assets/icons/arrowLeftIcon.js
@@ -0,0 +1,11 @@
+const arrowLeftIcon = () => (
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="24" cy="24" r="20" fill="#F0F5FA" />
+    <path
+      d="M24 36L12 24L24 12L25.575 13.575L16.275 22.875H36V25.125H16.275L25.575 34.425L24 36Z"
+      fill="#64648C"
+    />
+  </svg>
+);
+
+export default arrowLeftIcon;
diff --git a/src/components/createCohortModal/index.js b/src/components/createCohortModal/index.js
new file mode 100644
index 00000000..82b48867
--- /dev/null
+++ b/src/components/createCohortModal/index.js
@@ -0,0 +1,74 @@
+import useModal from '../../hooks/useModal';
+import { useState } from 'react';
+import Button from '../button';
+
+const CreateCohortModal = () => {
+  const { closeModal } = useModal();
+  const [title, setTitle] = useState('');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+
+  const onChange = (e) => {
+    const { name, value } = e.target;
+    if (name === 'title') setTitle(value);
+    if (name === 'startDate') setStartDate(value);
+    if (name === 'endDate') setEndDate(value);
+  };
+
+  const onSubmit = () => {
+    console.log('Submit button was clicked! Closing modal in 2 seconds...');
+    console.log(title);
+    console.log(startDate);
+    console.log(endDate);
+    setTimeout(() => {
+      closeModal();
+    }, 2000);
+  };
+
+  const today = new Date().toISOString().split('T')[0];
+
+  return (
+    <div>
+      <section>
+        <input
+          type="text"
+          name="title"
+          value={title}
+          onChange={onChange}
+          placeholder="Cohort Title"
+        />
+      </section>
+      <section>
+        <input
+          type="date"
+          name="startDate"
+          value={startDate}
+          onChange={onChange}
+          placeholder="Start Date"
+          min={today}
+        />
+      </section>
+      <section>
+        <input
+          type="date"
+          name="endDate"
+          value={endDate}
+          onChange={onChange}
+          placeholder="End Date"
+          min={today}
+        />
+      </section>
+
+      <section className="create-port-actions">
+        <Button
+          onClick={onSubmit}
+          text="Create Cohort"
+          classes={`${title.length ? 'blue' : 'offwhite'} width-full`}
+          disabled={!title.length}
+        />
+      </section>
+    </div>
+  );
+};
+
+export default CreateCohortModal;
diff --git a/src/components/createCohortModal/style.css b/src/components/createCohortModal/style.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/errorMessage/_errorMessage.css b/src/components/errorMessage/_errorMessage.css
new file mode 100644
index 00000000..0f1bc2c4
--- /dev/null
+++ b/src/components/errorMessage/_errorMessage.css
@@ -0,0 +1,12 @@
+.simple-error-message {
+  background: var(--color-offwhite);
+  padding: 24px;
+  border-radius: 8px;
+  width: 100%;
+  margin-bottom: 25px;
+  /* 
+    The value for red color below is taken from the style guide in the Figma Design Document.
+    It could be implemented as a global CSS variable in the _globals.css file instead.
+  */
+  border: 1px #f00000 solid;
+}
diff --git a/src/components/errorMessage/index.js b/src/components/errorMessage/index.js
new file mode 100644
index 00000000..0ff02ec1
--- /dev/null
+++ b/src/components/errorMessage/index.js
@@ -0,0 +1,7 @@
+import './_errorMessage.css';
+
+const ErrorMessage = ({ message }) => {
+  return <div className={`simple-error-message`}>{message}</div>;
+};
+
+export default ErrorMessage;
diff --git a/src/components/form/textInput/index.js b/src/components/form/textInput/index.js
index 39da3cae..b4121a40 100644
--- a/src/components/form/textInput/index.js
+++ b/src/components/form/textInput/index.js
@@ -1,9 +1,110 @@
-import { useState } from 'react';
+import './textInput.css';
+import { useEffect, useState } from 'react';
 
-const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
+/**
+ * validChars: Characters that are allowed in the input, the user can't type characters that are not included in validChars
+ * -
+ * pattern: Required pattern/format for email or password.
+ * patternDescription: Requirements can be passed in via patternDescription, it will be displayed as help messages to the user if the input doesn't match the pattern
+ */
+const TextInput = ({
+  value,
+  onChange,
+  name,
+  label,
+  icon,
+  type = 'text',
+  isRequired = false,
+  validChars = 'A-Za-z0-9@_-',
+  pattern = null,
+  patternDescription = null,
+  minLength = 0,
+  maxLength = 50,
+  isLocked = false
+}) => {
   const [input, setInput] = useState('');
+  const [error, setError] = useState('');
   const [showpassword, setShowpassword] = useState(false);
-  if (type === 'password') {
+
+  useEffect(() => {
+    if (isRequired) {
+      if (value != null) {
+        if (value.length === 0) {
+          setError(`${label.slice(0, -1)} is required`);
+        } else {
+          setError('');
+        }
+      }
+    }
+  }, [isRequired, value]);
+
+  const validateInput = (value, event) => {
+    const regex = new RegExp(`^[${validChars}]+$`);
+    const isValid = regex.test(value) && value.length <= maxLength;
+    if (!isRequired) {
+      onChange(event);
+    } else if (value.length === 0 && isRequired) {
+      setError(`${label.slice(0, -1)} is required`);
+      onChange(event);
+    } else if (!isValid) {
+      setError(
+        `Input must be up to ${maxLength} characters long and contain only: ${validChars.split('').join(', ')}`
+      );
+    } else if (pattern && !pattern.test(value)) {
+      if (patternDescription) {
+        setError(`${patternDescription}`);
+      } else {
+        setError(`Input must match the pattern: ${pattern}`);
+      }
+      onChange(event);
+    } else if (value.length < minLength) {
+      setError(`Input must be at least ${minLength} characters long`);
+      onChange(event);
+    } else {
+      setError('');
+    }
+    return isValid;
+  };
+
+  const handleChange = (event) => {
+    const { value } = event.target;
+    if (validateInput(value, event)) {
+      onChange(event);
+    }
+    setInput(value);
+  };
+
+  if (isLocked && type === 'password') {
+    return (
+      <div className="inputwrapper">
+        <label htmlFor={name}>{label}</label>
+        <input type={type} name={name} value={value} readOnly={true} />
+        {showpassword && <input type="text" name={name} value={value} className="passwordreveal" />}
+        <button
+          className={`showpasswordbutton-duo formbutton ${showpassword === true && '__faded'}`}
+          onClick={(e) => {
+            e.preventDefault();
+            setShowpassword(!showpassword);
+          }}
+        >
+          <EyeLogo />
+        </button>
+        <button className={`lockbutton formbutton`}>
+          <LockLogo />
+        </button>
+      </div>
+    );
+  } else if (isLocked) {
+    return (
+      <div className="inputwrapper">
+        <label htmlFor={name}>{label}</label>
+        <input type={type} name={name} value={value} readOnly={true} />
+        <button className={`lockbutton formbutton`}>
+          <LockLogo />
+        </button>
+      </div>
+    );
+  } else if (type === 'password') {
     return (
       <div className="inputwrapper">
         <label htmlFor={name}>{label}</label>
@@ -11,10 +112,8 @@ const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
           type={type}
           name={name}
           value={value}
-          onChange={(e) => {
-            onChange(e);
-            setInput(e.target.value);
-          }}
+          onChange={handleChange}
+          className={error && 'input-error'}
         />
         {showpassword && <input type="text" name={name} value={input} className="passwordreveal" />}
         <button
@@ -26,6 +125,23 @@ const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
         >
           <EyeLogo />
         </button>
+        {error && <span className="error-message">{error}</span>}
+      </div>
+    );
+  } else if (type === 'email') {
+    return (
+      <div className="inputwrapper">
+        {label && <label htmlFor={name}>{label}</label>}
+        <input
+          type={type}
+          name={name}
+          value={value}
+          onChange={handleChange}
+          pattern={pattern}
+          className={(error && 'input-error') || (icon && 'input-has-icon')}
+        />
+        {icon && <span className="input-icon">{icon}</span>}
+        {error && <span className="error-message">{error}</span>}
       </div>
     );
   } else {
@@ -36,10 +152,11 @@ const TextInput = ({ value, onChange, name, label, icon, type = 'text' }) => {
           type={type}
           name={name}
           value={value}
-          onChange={onChange}
-          className={icon && 'input-has-icon'}
+          onChange={handleChange}
+          className={(error && 'input-error') || (icon && 'input-has-icon')}
         />
         {icon && <span className="input-icon">{icon}</span>}
+        {error && <span className="error-message">{error}</span>}
       </div>
     );
   }
@@ -56,4 +173,15 @@ const EyeLogo = () => {
   );
 };
 
+const LockLogo = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" width="32" height="32">
+      <path
+        fill="#64648C"
+        d="M16 2C12.686 2 10 4.686 10 8v6H8c-1.104 0-2 .896-2 2v12c0 1.104.896 2 2 2h16c1.104 0 2-.896 2-2V16c0-1.104-.896-2-2-2h-2V8c0-3.314-2.686-6-6-6zm0 2c2.206 0 4 1.794 4 4v6h-8V8c0-2.206 1.794-4 4-4zm-6 12h12v12H10V16zm6 2c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z"
+      />
+    </svg>
+  );
+};
+
 export default TextInput;
diff --git a/src/components/form/textInput/textInput.css b/src/components/form/textInput/textInput.css
new file mode 100644
index 00000000..ea50f85a
--- /dev/null
+++ b/src/components/form/textInput/textInput.css
@@ -0,0 +1,3 @@
+.error-message {
+  font-size: 0.8rem;
+}
\ No newline at end of file
diff --git a/src/components/header/index.js b/src/components/header/index.js
index c591f1e1..d84fd761 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -5,17 +5,26 @@ import Card from '../card';
 import ProfileIcon from '../../assets/icons/profileIcon';
 import CogIcon from '../../assets/icons/cogIcon';
 import LogoutIcon from '../../assets/icons/logoutIcon';
-import { NavLink } from 'react-router-dom';
-import { useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+
+// eslint-disable-next-line camelcase
+import jwt_decode from 'jwt-decode';
 
 const Header = () => {
   const { token, onLogout } = useAuth();
   const [isMenuVisible, setIsMenuVisible] = useState(false);
+  const location = useLocation();
+  const { userId } = jwt_decode(token);
 
   const onClickProfileIcon = () => {
     setIsMenuVisible(!isMenuVisible);
   };
 
+  useEffect(() => {
+    setIsMenuVisible(false);
+  }, [location]);
+
   if (!token) {
     return null;
   }
@@ -45,7 +54,7 @@ const Header = () => {
             <section className="user-panel-options border-top">
               <ul>
                 <li>
-                  <NavLink to="/">
+                  <NavLink to={`/profile/${userId}`}>
                     <ProfileIcon /> <p>Profile</p>
                   </NavLink>
                 </li>
diff --git a/src/components/navigation/index.js b/src/components/navigation/index.js
index b31393a8..1960057d 100644
--- a/src/components/navigation/index.js
+++ b/src/components/navigation/index.js
@@ -5,8 +5,12 @@ import ProfileIcon from '../../assets/icons/profileIcon';
 import useAuth from '../../hooks/useAuth';
 import './style.css';
 
+// eslint-disable-next-line camelcase
+import jwt_decode from 'jwt-decode';
+
 const Navigation = () => {
   const { token } = useAuth();
+  const { userId } = jwt_decode(token);
 
   if (!token) {
     return null;
@@ -22,13 +26,13 @@ const Navigation = () => {
           </NavLink>
         </li>
         <li>
-          <NavLink to="/">
+          <NavLink to={`/profile/${userId}`}>
             <ProfileIcon />
             <p>Profile</p>
           </NavLink>
         </li>
         <li>
-          <NavLink to="/">
+          <NavLink to="/cohort" replace state={{ pathname: '/cohort' }}>
             <CohortIcon />
             <p>Cohort</p>
           </NavLink>
diff --git a/src/components/post/index.js b/src/components/post/index.js
index 337ca5a6..6558a49f 100644
--- a/src/components/post/index.js
+++ b/src/components/post/index.js
@@ -1,12 +1,17 @@
+import { useState } from 'react';
 import useModal from '../../hooks/useModal';
 import Card from '../card';
-import Comment from '../comment';
+// import Comment from '../comment';
 import EditPostModal from '../editPostModal';
 import ProfileCircle from '../profileCircle';
 import './style.css';
 
-const Post = ({ name, date, content, comments = [], likes = 0 }) => {
+const Post = ({ name, date, content, initialComments = [], initialLikes = 0 }) => {
   const { openModal, setModal } = useModal();
+  const [comments, setComments] = useState(initialComments);
+  const [comment, setComment] = useState('');
+  const [likes, setLikes] = useState(initialLikes);
+  const [isLiked, setIsLiked] = useState(false);
 
   const userInitials = name.match(/\b(\w)/g);
 
@@ -15,6 +20,24 @@ const Post = ({ name, date, content, comments = [], likes = 0 }) => {
     openModal();
   };
 
+  const handleSubmit = (event) => {
+    const newCommentObj = {
+      commentName: name,
+      content: comment
+    };
+    setComments([...comments, newCommentObj]);
+    setComment('');
+  };
+
+  const toggleLike = () => {
+    if (isLiked) {
+      setLikes(likes - 1);
+    } else {
+      setLikes(likes + 1);
+    }
+    setIsLiked(!isLiked);
+  };
+
   return (
     <Card>
       <article className="post">
@@ -39,17 +62,48 @@ 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>
+            <button id="like-button" className={isLiked ? 'liked' : ''} onClick={toggleLike}>
+              {isLiked ? 'Liked' : 'Like'}
+            </button>
           </div>
 
           <p>{!likes && 'Be the first to like this'}</p>
         </section>
 
-        <section>
+        {/* <section>
           {comments.map((comment) => (
-            <Comment key={comment.id} name={comment.name} content={comment.content} />
+            <div className="user-name" key={comment.id}>
+              <ProfileCircle initials={userInitials} />
+              <div className="comment-section">
+                <Comment key={comment.id} name={comment.commentName} content={comment.content} />
+              </div>
+            </div>
           ))}
+        </section> */}
+        <section>
+          {comments.map((comment, index) => (
+            <div className="comment-item" key={index}>
+              <ProfileCircle initials={'AJ'} />
+              <div className="comment-box">
+                <p className="comment-name">{'Alex Jameson'}</p>
+                <p className="comment-text">{comment.content}</p>
+              </div>
+            </div>
+          ))}
+        </section>
+        <section className="comment-section">
+          <div className="user-name">
+            <ProfileCircle initials={'AJ'} />
+          </div>
+          <div className="comment-input">
+            <input
+              type="text"
+              placeholder="Write something nice..."
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+            />
+            <button onClick={handleSubmit}>Comment</button>
+          </div>
         </section>
       </article>
     </Card>
diff --git a/src/components/post/style.css b/src/components/post/style.css
index 3eff5afc..a77f808d 100644
--- a/src/components/post/style.css
+++ b/src/components/post/style.css
@@ -29,6 +29,14 @@
   background: #f0f5fa;
 }
 
+.edit-icon:hover {
+  background-color: #3068a5;
+}
+
+.edit-icon:active {
+  background-color: #052e5a;
+}
+
 .edit-icon p {
   text-align: center;
   font-size: 20px;
@@ -40,11 +48,106 @@
   padding: 20px 10px;
 }
 
+.post-interactions-container p {
+  text-align: right;
+}
+
+#comment-field {
+  background-color: rgb(219, 208, 192);
+  display: flex;
+  padding-left: 100px;
+
+
+  border-top: 1px solid #ccc; 
+}
+
+.comment-section {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  border-top: 1px solid #ccc; 
+}
+ 
+.comment-section .user-name {
+  margin-right: 10px; 
+}
+ 
+.comment-section .comment-input {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+ 
+.comment-section .comment-input input {
+  width: 100%;
+  padding: 8px;
+  margin-right: 10px;
+  background-color: #f0f0f0; 
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+ 
+.comment-section .comment-input button {
+  padding: 8px 16px;
+}
+
+.user-name .comment-section {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  border-top: 1px solid #ccc; 
+}
+
+#like-button {
+  background-color: transparent;
+  border: none;
+  color: #3068a5;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 8px 16px;
+}
+ 
+#like-button.liked {
+  color: #10c756; 
+  font-weight: bold;
+}
+ 
+#like-button:hover {
+  text-decoration: underline;
+}
+ 
 .post-interactions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+  display: flex;
+  align-items: center;
+}
+ 
+.post-interactions button {
+  margin-right: 10px;
 }
 
-.post-interactions-container p {
-  text-align: right;
+.comment-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 15px;
+}
+
+.comment-item .profile-circle {
+  margin-right: 10px;
+}
+
+.comment-box {
+  background-color: #f0f0f0; 
+  padding: 10px;
+  border-radius: 8px;
+  flex: 1; 
+}
+ 
+.comment-name {
+  font-weight: bold;
+  margin: 0 0 5px 0;
+}
+ 
+.comment-text {
+  margin: 0;
 }
+ 
\ No newline at end of file
diff --git a/src/components/posts/index.js b/src/components/posts/index.js
index 79756c41..0f1ee8b1 100644
--- a/src/components/posts/index.js
+++ b/src/components/posts/index.js
@@ -7,6 +7,7 @@ const Posts = () => {
 
   useEffect(() => {
     getPosts().then(setPosts);
+    console.log(getPosts());
   }, []);
 
   return (
diff --git a/src/components/stepper/index.js b/src/components/stepper/index.js
index c9e5f259..553db15a 100644
--- a/src/components/stepper/index.js
+++ b/src/components/stepper/index.js
@@ -2,9 +2,9 @@ import Steps from './steps';
 import Card from '../card';
 import Button from '../button';
 import './style.css';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
-const Stepper = ({ header, children, onComplete }) => {
+const Stepper = ({ header, children, onComplete, validate }) => {
   const [currentStep, setCurrentStep] = useState(0);
 
   const onBackClick = () => {
@@ -16,10 +16,9 @@ const Stepper = ({ header, children, onComplete }) => {
   const onNextClick = () => {
     if (currentStep === children.length - 1) {
       onComplete();
-      return;
+    } else if (validate(currentStep + 1)) {
+      setCurrentStep(currentStep + 1);
     }
-
-    setCurrentStep(currentStep + 1);
   };
 
   return (
diff --git a/src/components/stepper/style.css b/src/components/stepper/style.css
index 8982959e..bb43047f 100644
--- a/src/components/stepper/style.css
+++ b/src/components/stepper/style.css
@@ -1,4 +1,5 @@
 .stepper-buttons {
+  margin-top: 1rem;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
diff --git a/src/context/auth.js b/src/context/auth.js
index 47cd66c9..489fcedf 100644
--- a/src/context/auth.js
+++ b/src/context/auth.js
@@ -4,7 +4,7 @@ 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';
+import { updateProfile, getUserData, login, register } from '../service/apiClient';
 
 // eslint-disable-next-line camelcase
 import jwt_decode from 'jwt-decode';
@@ -15,56 +15,131 @@ const AuthProvider = ({ children }) => {
   const navigate = useNavigate();
   const location = useLocation();
   const [token, setToken] = useState(null);
+  const [userCredentials, setUserCredentials] = useState({ email: '', password: '' });
+  const [role, setRole] = useState(null);
 
   useEffect(() => {
     const storedToken = localStorage.getItem('token');
+    const storedRole = localStorage.getItem('role');
 
-    if (storedToken) {
+    const storedUserCredentials = JSON.parse(localStorage.getItem('userCredentials'));
+
+    if (storedToken && storedRole && storedUserCredentials) {
       setToken(storedToken);
-      navigate(location.state?.from?.pathname || '/');
+      setRole(storedRole);
+      setUserCredentials(storedUserCredentials);
+      navigate(location.pathname || '/');
+    } else {
+      navigate('/login');
     }
-  }, [location.state?.from?.pathname, navigate]);
+  }, []);
 
   const handleLogin = async (email, password) => {
     const res = await login(email, password);
 
-    if (!res.data.token) {
+    if (!res.data.token || !res.data.user.role) {
       return navigate('/login');
     }
 
     localStorage.setItem('token', res.data.token);
+    localStorage.setItem('role', res.data.user.role);
+    localStorage.setItem('userCredentials', JSON.stringify({ email, password }));
 
-    setToken(res.token);
-    navigate(location.state?.from?.pathname || '/');
+    setToken(res.data.token);
+    setRole(res.data.user.role);
+    setUserCredentials({ email, password });
+    navigate('/');
   };
 
   const handleLogout = () => {
     localStorage.removeItem('token');
+    localStorage.removeItem('role');
+    localStorage.removeItem('userCredentials');
     setToken(null);
+    setRole(null);
+    setUserCredentials({ email: '', password: '' });
   };
 
-  const handleRegister = async (email, password) => {
+  const handleRegister = async (email, password, setErrorMessage) => {
     const res = await register(email, password);
+
+    if (res.status === 'fail') {
+      if (res.data.email) {
+        setErrorMessage(res.data.email);
+      }
+      return navigate('/register');
+    }
+
+    localStorage.setItem('token', res.data.token);
+    localStorage.setItem('role', res.data.user.role);
+    localStorage.setItem('userCredentials', JSON.stringify({ email, password }));
+
     setToken(res.data.token);
+    setRole(res.data.user.role);
+    setUserCredentials({ email, password });
 
     navigate('/verification');
   };
 
-  const handleCreateProfile = async (firstName, lastName, githubUrl, bio) => {
-    const { userId } = jwt_decode(token);
-
-    await createProfile(userId, firstName, lastName, githubUrl, bio);
+  const handleUpdateProfile = async (
+    firstName,
+    lastName,
+    bio,
+    username,
+    githubUsername,
+    profilePicture,
+    mobile,
+    id
+  ) => {
+    if (id == null) {
+      const { userId } = jwt_decode(token);
+      await updateProfile(
+        userId,
+        firstName,
+        lastName,
+        bio,
+        username,
+        githubUsername,
+        profilePicture,
+        mobile
+      );
+    } else {
+      await updateProfile(
+        id,
+        firstName,
+        lastName,
+        bio,
+        username,
+        githubUsername,
+        profilePicture,
+        mobile
+      );
+    }
 
     localStorage.setItem('token', token);
+    localStorage.setItem('role', role);
     navigate('/');
   };
 
+  const handleGetUserById = async (id) => {
+    if (id == null) {
+      const { userId } = jwt_decode(token);
+
+      return await getUserData(userId);
+    } else {
+      return await getUserData(id);
+    }
+  };
+
   const value = {
     token,
+    userCredentials,
+    role,
     onLogin: handleLogin,
     onLogout: handleLogout,
     onRegister: handleRegister,
-    onCreateProfile: handleCreateProfile
+    onUpdateProfile: handleUpdateProfile,
+    onGetUser: handleGetUserById
   };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
@@ -73,7 +148,6 @@ const AuthProvider = ({ children }) => {
 const ProtectedRoute = ({ children }) => {
   const { token } = useAuth();
   const location = useLocation();
-
   if (!token) {
     return <Navigate to={'/login'} replace state={{ from: location }} />;
   }
diff --git a/src/pages/cohort/index.js b/src/pages/cohort/index.js
new file mode 100644
index 00000000..724540ac
--- /dev/null
+++ b/src/pages/cohort/index.js
@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+// import Card from '../../components/card';
+import './style.css';
+import { getCohorts } from '../../service/apiClient';
+import useAuth from '../../hooks/useAuth';
+// eslint-disable-next-line camelcase
+import jwt_decode from 'jwt-decode';
+import { useLocation } from 'react-router-dom';
+import TeacherView from './teacher';
+import StudentView from './student';
+
+const Cohort = () => {
+  const { token, role } = useAuth();
+  const [cohort, setCohort] = useState([]);
+  const [students, setStudents] = useState([]);
+  const [teachers, setTeachers] = useState([]);
+  const [selectedCohort, setSelectedCohort] = useState({});
+  const location = useLocation();
+  const { userId } = jwt_decode(token);
+
+  const fetchCohorts = async (cohortId) => {
+    const allCohorts = await getCohorts();
+    const userCohorts = [];
+
+    // Filter cohorts to include only those the user belongs to
+    allCohorts.forEach((cohort) => {
+      if (cohort.users.some((user) => user.id === userId)) {
+        userCohorts.push(cohort);
+      }
+    });
+
+    setCohort(userCohorts);
+
+    // Find the cohort by ID if specified; otherwise, default to the first cohort
+    const initialCohort = userCohorts.find((cohort) => cohort.id === cohortId) || userCohorts[0];
+
+    if (initialCohort) {
+      setSelectedCohort(initialCohort);
+      setStudents(initialCohort.users.filter((user) => user.role === 'STUDENT'));
+      setTeachers(initialCohort.users.filter((user) => user.role === 'TEACHER'));
+    }
+  };
+
+  useEffect(() => {
+    const cohortId = location.state?.cohortId;
+    console.log(cohortId);
+    fetchCohorts(cohortId);
+  }, [location.state]);
+
+  const handleCohortChange = (event) => {
+    const selectedCohortId = event.target.value;
+    const selectedCohort = cohort.find((c) => c.id === parseInt(selectedCohortId));
+    setSelectedCohort(selectedCohort);
+    setStudents(selectedCohort.users.filter((user) => user.role === 'STUDENT'));
+    setTeachers(selectedCohort.users.filter((user) => user.role === 'TEACHER'));
+  };
+
+  return (
+    <>
+      {role === 'TEACHER' ? (
+        <TeacherView
+          cohort={cohort}
+          handleCohortChange={handleCohortChange}
+          selectedCohort={selectedCohort}
+          students={students}
+          teachers={teachers}
+        />
+      ) : (
+        <StudentView
+          cohort={cohort}
+          handleCohortChange={handleCohortChange}
+          selectedCohort={selectedCohort}
+          students={students}
+          teachers={teachers}
+        />
+      )}
+    </>
+  );
+};
+
+export default Cohort;
diff --git a/src/pages/cohort/student.js b/src/pages/cohort/student.js
new file mode 100644
index 00000000..9462d4ff
--- /dev/null
+++ b/src/pages/cohort/student.js
@@ -0,0 +1,163 @@
+import Card from '../../components/card';
+
+const StudentView = ({ cohort, handleCohortChange, selectedCohort, students, teachers }) => {
+  if (cohort.length === 0) {
+    return (
+      <div className="loading">
+        <h4>Fetching Cohorts</h4>
+        <div className="loadingscreen-loader">
+          <span></span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <main>
+        <Card>
+          <div className="cohort-title">
+            <h3>My Cohort</h3>
+          </div>
+
+          <div className="post-details cohort-div">
+            <div className="profile-icon">
+              <p>&lt; &gt;</p>
+            </div>
+            <div className="post-user-name">
+              {/* This is a drop down menu so the user can change which cohort to view. */}
+              <div className="cohort-dropdown">
+                <select
+                  id="cohort-select"
+                  onChange={handleCohortChange}
+                  className="cohort-select"
+                  value={selectedCohort?.id || ''}
+                >
+                  {cohort.map((c) => (
+                    <option key={c.id} value={c.id} className="cohort-option">
+                      {c.name}, Cohort {c.id}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <small className="start-and-end-date">
+                {new Date(selectedCohort.startDate).toLocaleString('default', {
+                  month: 'long',
+                  year: 'numeric'
+                })}{' '}
+                -{' '}
+                {/* ADD space between the dash, ESLINT removs it, therefore I Added {' '}  and {' '} */}
+                {new Date(selectedCohort.endDate).toLocaleString('default', {
+                  month: 'long',
+                  year: 'numeric'
+                })}
+              </small>
+            </div>
+          </div>
+          {/* This is where the list of students will go, User-list is the parent div for all the students */}
+          <div className="user-list">
+            {/* 
+                This is a student card and it uses the profile-icon of the first letter.  
+                Loop then through and fetch all the user data from the cohort. */}
+            {students.length > 0 ? (
+              students.map((user) => {
+                return user.role === 'STUDENT' ? (
+                  <div className="student-card" key={user.id}>
+                    <div className="post-details">
+                      <div className="profile-icon">
+                        <p>
+                          {user.profile.firstName.charAt(0) + '' + user.profile.lastName.charAt(0)}
+                        </p>
+                      </div>
+                      <div className="post-user-name cohort-student-name">
+                        <p>
+                          {user.profile.firstName} {user.profile.lastName}
+                        </p>
+                      </div>
+                      {/* This is the button to view the profile of the student and need to implement action of button. */}
+                      <div className="student-action-button">
+                        <button className="cohort-action-button">
+                          <svg
+                            width="48"
+                            height="48"
+                            viewBox="0 0 48 48"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <circle cx="24" cy="24" r="20" fill="#F0F5FA" />
+                            <path
+                              d="M15 26C16.1046 26 17 25.1046 17 24C17 22.8954 16.1046 22 15 22C13.8954 22 13 22.8954 13 24C13 25.1046 13.8954 26 15 26ZM26 24C26 25.1046 25.1046 26 24 26C22.8954 26 22 25.1046 22 24C22 22.8954 22.8954 22 24 22C25.1046 22 26 22.8954 26 24ZM35 24C35 25.1046 34.1046 26 33 26C31.8954 26 31 25.1046 31 24C31 22.8954 31.8954 22 33 22C34.1046 22 35 22.8954 35 24Z"
+                              fill="#64648C"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ) : null;
+              }, [])
+            ) : (
+              <h3>No students in this Cohort</h3>
+            )}
+          </div>
+        </Card>
+      </main>
+
+      <aside>
+        <Card>
+          <div className="teachers-section">
+            <div className="cohort-title">
+              <h3>Teachers</h3>
+            </div>
+            {/* This is where the list of teachers will go. Each section is a teacher. */}
+            {teachers.length >= 1 ? (
+              teachers.map((teacher) => {
+                return (
+                  <section className="post-details" key={teacher.id}>
+                    <div className="profile-icon">
+                      <p>
+                        {teacher.profile.firstName.charAt(0) +
+                          '' +
+                          teacher.profile.lastName.charAt(0)}
+                      </p>
+                    </div>
+
+                    <div className="post-user-name">
+                      <p>
+                        {teacher.profile.firstName} {teacher.profile.lastName}
+                      </p>
+                      <small>Software Developer</small>
+                    </div>
+                    <div className="teacher-action-button">
+                      <button className="cohort-action-button">
+                        <svg
+                          width="48"
+                          height="48"
+                          viewBox="0 0 48 48"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="cohort-action-button"
+                        >
+                          <circle cx="24" cy="24" r="20" fill="#F0F5FA" />
+                          <path
+                            d="M15 26C16.1046 26 17 25.1046 17 24C17 22.8954 16.1046 22 15 22C13.8954 22 13 22.8954 13 24C13 25.1046 13.8954 26 15 26ZM26 24C26 25.1046 25.1046 26 24 26C22.8954 26 22 25.1046 22 24C22 22.8954 22.8954 22 24 22C25.1046 22 26 22.8954 26 24ZM35 24C35 25.1046 34.1046 26 33 26C31.8954 26 31 25.1046 31 24C31 22.8954 31.8954 22 33 22C34.1046 22 35 22.8954 35 24Z"
+                            fill="#64648C"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </section>
+                );
+              })
+            ) : (
+              <h3>No teachers in this Cohort</h3>
+            )}
+          </div>
+        </Card>
+      </aside>
+    </>
+  );
+};
+
+export default StudentView;
diff --git a/src/pages/cohort/style.css b/src/pages/cohort/style.css
new file mode 100644
index 00000000..3beb6a33
--- /dev/null
+++ b/src/pages/cohort/style.css
@@ -0,0 +1,58 @@
+.cohort-title {
+  height: 56px;
+  border-bottom: 1px solid #dce1f0;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.cohort-div {
+  border-bottom: 1px solid #dce1f0;
+  height: 72px;
+}
+
+.student-card {
+  height: 72px;
+  width: 365px;
+  padding-right: 1.5rem;
+}
+
+.user-list {
+  margin-top: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(365px, 1fr));
+}
+
+.cohort-student-name {
+  margin-top: 10px;
+}
+
+.cohort-action-button {
+  padding: 0px 0px !important;
+  margin-top: 5px;
+}
+
+.loading {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.cohort-option {
+    font-size: 1rem;
+}
+
+.cohort-select {
+    font-size: 24px;
+}
+
+.cohort-dropdown {
+    margin-right: 2rem;
+}
+
+.start-and-end-date{
+    margin-left: 5px !important;
+}
\ No newline at end of file
diff --git a/src/pages/cohort/teacher.js b/src/pages/cohort/teacher.js
new file mode 100644
index 00000000..e9a81725
--- /dev/null
+++ b/src/pages/cohort/teacher.js
@@ -0,0 +1,185 @@
+import Card from '../../components/card';
+import CreateCohortModal from '../../components/createCohortModal';
+import useModal from '../../hooks/useModal';
+
+const TeacherView = ({ cohort, handleCohortChange, selectedCohort, students, teachers }) => {
+  // Use the useModal hook to get the openModal and setModal functions
+  const { openModal, setModal } = useModal();
+
+  // 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 Cohort', <CreateCohortModal />); // CreatePostModal is just a standard React component, nothing special
+
+    // Open the modal!
+    openModal();
+  };
+
+  if (cohort.length === 0) {
+    return (
+      <div className="loading">
+        <div>
+          <h3>Cohorts cannot be found</h3>
+          <button className="cohort-action-button" onClick={showModal}>
+            Create a new Cohort
+          </button>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <>
+      <main>
+        <Card>
+          <div className="cohort-title">
+            <h3>My Cohort</h3>
+            <div>
+              <div>
+                <button className="cohort-action-button" onClick={showModal}>
+                  Create Cohort
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="post-details cohort-div">
+            <div className="profile-icon">
+              <p>&lt; &gt;</p>
+            </div>
+            <div className="post-user-name">
+              {/* This is a drop down menu so the user can change which cohort to view. */}
+              <div className="cohort-dropdown">
+                <select
+                  id="cohort-select"
+                  onChange={handleCohortChange}
+                  className="cohort-select"
+                  value={selectedCohort?.id || ''}
+                >
+                  {cohort.map((c) => (
+                    <option key={c.id} value={c.id} className="cohort-option">
+                      {c.name}, Cohort {c.id}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <small className="start-and-end-date">
+                {new Date(selectedCohort.startDate).toLocaleString('default', {
+                  month: 'long',
+                  year: 'numeric'
+                })}{' '}
+                -{' '}
+                {/* ADD space between the dash, ESLINT removs it, therefore I Added {' '}  and {' '} */}
+                {new Date(selectedCohort.endDate).toLocaleString('default', {
+                  month: 'long',
+                  year: 'numeric'
+                })}
+              </small>
+            </div>
+          </div>
+          {/* This is where the list of students will go, User-list is the parent div for all the students */}
+          <div className="user-list">
+            {/* 
+            This is a student card and it uses the profile-icon of the first letter.  
+            Loop then through and fetch all the user data from the cohort. */}
+            {students.length > 0 ? (
+              students.map((user) => {
+                return user.role === 'STUDENT' ? (
+                  <div className="student-card" key={user.id}>
+                    <div className="post-details">
+                      <div className="profile-icon">
+                        <p>
+                          {user.profile.firstName.charAt(0) + '' + user.profile.lastName.charAt(0)}
+                        </p>
+                      </div>
+                      <div className="post-user-name cohort-student-name">
+                        <p>
+                          {user.profile.firstName} {user.profile.lastName}
+                        </p>
+                      </div>
+                      {/* This is the button to view the profile of the student and need to implement action of button. */}
+                      <div className="student-action-button">
+                        <button className="cohort-action-button">
+                          <svg
+                            width="48"
+                            height="48"
+                            viewBox="0 0 48 48"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <circle cx="24" cy="24" r="20" fill="#F0F5FA" />
+                            <path
+                              d="M15 26C16.1046 26 17 25.1046 17 24C17 22.8954 16.1046 22 15 22C13.8954 22 13 22.8954 13 24C13 25.1046 13.8954 26 15 26ZM26 24C26 25.1046 25.1046 26 24 26C22.8954 26 22 25.1046 22 24C22 22.8954 22.8954 22 24 22C25.1046 22 26 22.8954 26 24ZM35 24C35 25.1046 34.1046 26 33 26C31.8954 26 31 25.1046 31 24C31 22.8954 31.8954 22 33 22C34.1046 22 35 22.8954 35 24Z"
+                              fill="#64648C"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ) : null;
+              }, [])
+            ) : (
+              <h3>No students in this Cohort</h3>
+            )}
+          </div>
+        </Card>
+      </main>
+
+      <aside>
+        <Card>
+          <div className="teachers-section">
+            <div className="cohort-title">
+              <h3>Teachers</h3>
+            </div>
+            {/* This is where the list of teachers will go. Each section is a teacher. */}
+            {teachers.length >= 1 ? (
+              teachers.map((teacher) => {
+                return (
+                  <section className="post-details" key={teacher.id}>
+                    <div className="profile-icon">
+                      <p>
+                        {teacher.profile.firstName.charAt(0) +
+                          '' +
+                          teacher.profile.lastName.charAt(0)}
+                      </p>
+                    </div>
+
+                    <div className="post-user-name">
+                      <p>
+                        {teacher.profile.firstName} {teacher.profile.lastName}
+                      </p>
+                      <small>Software Developer</small>
+                    </div>
+                    <div className="teacher-action-button">
+                      <button className="cohort-action-button">
+                        <svg
+                          width="48"
+                          height="48"
+                          viewBox="0 0 48 48"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="cohort-action-button"
+                        >
+                          <circle cx="24" cy="24" r="20" fill="#F0F5FA" />
+                          <path
+                            d="M15 26C16.1046 26 17 25.1046 17 24C17 22.8954 16.1046 22 15 22C13.8954 22 13 22.8954 13 24C13 25.1046 13.8954 26 15 26ZM26 24C26 25.1046 25.1046 26 24 26C22.8954 26 22 25.1046 22 24C22 22.8954 22.8954 22 24 22C25.1046 22 26 22.8954 26 24ZM35 24C35 25.1046 34.1046 26 33 26C31.8954 26 31 25.1046 31 24C31 22.8954 31.8954 22 33 22C34.1046 22 35 22.8954 35 24Z"
+                            fill="#64648C"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </section>
+                );
+              })
+            ) : (
+              <h3>No teachers in this Cohort</h3>
+            )}
+          </div>
+        </Card>
+      </aside>
+    </>
+  );
+};
+
+export default TeacherView;
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
index 54606849..721d358a 100644
--- a/src/pages/dashboard/index.js
+++ b/src/pages/dashboard/index.js
@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useNavigate, NavLink } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 import SearchIcon from '../../assets/icons/searchIcon';
 import Button from '../../components/button';
 import Card from '../../components/card';
@@ -6,24 +7,52 @@ import CreatePostModal from '../../components/createPostModal';
 import TextInput from '../../components/form/textInput';
 import Posts from '../../components/posts';
 import useModal from '../../hooks/useModal';
+import StudentSearchResults from './search';
+import useAuth from '../../hooks/useAuth';
 import './style.css';
+import { getCohorts } from '../../service/apiClient';
+
+// eslint-disable-next-line camelcase
+import jwt_decode from 'jwt-decode';
 
 const Dashboard = () => {
   const [searchVal, setSearchVal] = useState('');
+  const { role } = useAuth();
+  const navigate = useNavigate(); // Added this line
+  const [cohorts, setCohorts] = useState([]);
+  const { token } = useAuth();
+
+  useEffect(() => {
+    const fetchCohorts = async () => {
+      const allCohorts = await getCohorts();
+      const cohortToAdd = [];
+      const { userId } = jwt_decode(token);
+      // Map out the cohorts to check if the user is in the cohort
+      allCohorts.forEach((cohort) => {
+        if (cohort.users.some((user) => user.id === userId)) {
+          cohortToAdd.push(cohort);
+        }
+      });
+      // SET STARTING POINT OF THE COHORT TO THE FIRST COHORT IN THE ARRAY
+      setCohorts(cohortToAdd);
+    };
+    fetchCohorts();
+  }, []);
 
   const onChange = (e) => {
-    setSearchVal(e.target.value);
+    const value = e.target.value;
+    setSearchVal(value);
+  };
+
+  const onSearch = (e) => {
+    e.preventDefault();
+    navigate(`/dashboard/search/${searchVal}`);
   };
 
-  // Use the useModal hook to get the openModal and setModal functions
   const { openModal, setModal } = useModal();
 
-  // 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 />);
     openModal();
   };
 
@@ -44,13 +73,48 @@ const Dashboard = () => {
 
       <aside>
         <Card>
-          <form onSubmit={(e) => e.preventDefault()}>
-            <TextInput icon={<SearchIcon />} value={searchVal} name="Search" onChange={onChange} />
+          <form onSubmit={onSearch}>
+            <TextInput
+              icon={<SearchIcon />}
+              value={searchVal}
+              name="Search"
+              onChange={onChange}
+              placeholder="Search for people"
+            />
           </form>
+          {role === 'teacher' ? (
+            <p className="teacher-view-message">Teacher-specific view goes here</p>
+          ) : (
+            <StudentSearchResults searchVal={searchVal} />
+          )}
         </Card>
-
         <Card>
-          <h4>My Cohort</h4>
+          <div className="cohort-title dashboard-cohort-title">
+            <h4>Cohorts</h4>
+          </div>
+          <div className="dashboard-cohort">
+            {cohorts.map((cohort) => {
+              return (
+                <NavLink
+                  to="/cohort"
+                  state={{ cohortId: cohort.id }}
+                  key={cohort.id}
+                  className={'cohort-nav-link'}
+                >
+                  <div className="post-details cohort-div">
+                    <div className="profile-icon">
+                      <p>&lt; &gt;</p>
+                    </div>
+                    <div className="post-user-name cohort-student-name">
+                      <p>
+                        {cohort.name} {cohort.id}
+                      </p>
+                    </div>
+                  </div>
+                </NavLink>
+              );
+            }, [])}
+          </div>
         </Card>
       </aside>
     </>
diff --git a/src/pages/dashboard/search/index.js b/src/pages/dashboard/search/index.js
new file mode 100644
index 00000000..198575cc
--- /dev/null
+++ b/src/pages/dashboard/search/index.js
@@ -0,0 +1,69 @@
+import ProfileCircle from '../../../components/profileCircle';
+import { useState, useEffect } from 'react';
+import './style.css';
+import { getUsers } from '../../../service/apiClient';
+
+const StudentSearchResults = ({ searchVal }) => {
+  const [profiles, setProfiles] = useState([]);
+  const [searchUsers, setSearchUsers] = useState([]);
+  const hasResults = searchUsers.length > 0;
+  const displayUsers = searchUsers.slice(0, 10); // Show up to 10 users
+
+  useEffect(() => {
+    if (searchVal.length > 0) {
+      const filteredUsers = profiles.filter((user) =>
+        `${user.firstName} ${user.lastName}`.toLowerCase().includes(searchVal.toLowerCase())
+      );
+      setSearchUsers(filteredUsers);
+    } else {
+      setSearchUsers([]); // Clear search results if input is empty
+    }
+  }, [searchVal]); // Only runs when searchVal changes
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      const allUsers = await getUsers();
+      setProfiles(allUsers);
+    };
+    fetchUsers();
+  }, []); // Add an empty dependency array to run only once
+
+  // Don't render anything if searchVal is empty
+  if (!searchVal.trim()) {
+    return null;
+  }
+
+  return (
+    <div className="search-results">
+      <p>People</p>
+      <hr className="search-results-line" />
+
+      {hasResults ? (
+        <>
+          {displayUsers.map((user) => (
+            <div key={user.id} className="search-user">
+              <div className="profile-circle-container">
+                <ProfileCircle initials={`${user.firstName[0]}${user.lastName[0]}`} />
+              </div>
+              <div className="user-details">
+                <p>
+                  {user.firstName} {user.lastName}
+                </p>
+                <p>{user.specialism}</p>
+              </div>
+            </div>
+          ))}
+          {searchUsers.length > 10 && <button className="show-all-button">All results</button>}
+        </>
+      ) : (
+        <p className="no-results-message">
+          Sorry, no results found
+          <br />
+          Try changing your search term
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default StudentSearchResults;
diff --git a/src/pages/dashboard/search/style.css b/src/pages/dashboard/search/style.css
new file mode 100644
index 00000000..dd9193e2
--- /dev/null
+++ b/src/pages/dashboard/search/style.css
@@ -0,0 +1,61 @@
+.search-results {
+    padding: 0.5rem;
+    background-color: #ffffff;
+    border-radius: 5px;
+    /* Remove max-height to prevent auto-scroll for under 10 users */
+    max-height: 100%;
+    overflow-y: auto;
+  }
+  
+  .search-user {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    cursor: pointer;
+  }
+  
+  .search-user:hover {
+    background-color: #ffffff;
+  }
+  
+  .search-user p {
+    margin: 0;
+  }
+  
+  .profile-circle-container {
+    margin-right: 0.5rem; /* Space between profile and text */
+  }
+  
+  .user-details {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .search-results-line {
+    border: none;
+    border-top: 2px solid rgb(210, 210, 210); 
+    margin: 0.5rem 0; 
+    opacity: 0.8; 
+  }  
+  
+  .show-all-button,
+  .edit-search-button {
+    width: 100%;
+    margin-top: 0.5rem;
+    padding: 0.5rem;
+    background-color: #d7dce3;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  
+  .show-all-button:hover,
+  .edit-search-button:hover {
+    background-color: #666;
+  }
+  
+  .no-results-message {
+    margin-bottom: 0.5rem;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/dashboard/style.css b/src/pages/dashboard/style.css
index f55ef0a7..3045e9e1 100644
--- a/src/pages/dashboard/style.css
+++ b/src/pages/dashboard/style.css
@@ -19,3 +19,22 @@ aside {
   max-width: 100% !important;
   background-color: var(--color-blue5);
 }
+
+.cohort-nav-link {
+  text-decoration: none;
+}
+
+.cohort-div {
+  margin-top: 15px;
+}
+
+.dashboard-cohort  {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(365px, 1fr));
+  max-height: 400px;
+  overflow: auto;
+}
+
+.dashboard-cohort-title {
+  margin-bottom: 0rem !important;
+}
\ No newline at end of file
diff --git a/src/pages/profilePage/components/BasicInfoForm.jsx b/src/pages/profilePage/components/BasicInfoForm.jsx
new file mode 100644
index 00000000..1aa9a705
--- /dev/null
+++ b/src/pages/profilePage/components/BasicInfoForm.jsx
@@ -0,0 +1,61 @@
+import { useContext } from 'react';
+import { ProfileContext } from '..';
+import Form from '../../../components/form';
+import TextInput from '../../../components/form/textInput';
+import ProfileCircle from '../../../components/profileCircle';
+
+const BasicInfoForm = () => {
+  const { handleInputChange, profile, initials, isEditMode } = useContext(ProfileContext);
+
+  return (
+    <div className="profile-grid-section">
+      <Form>
+        <hr className="section-divider" />
+        <h3 className="profile-info-header">Basic Info</h3>
+        <div className={`profile-grid-section ${isEditMode ? '' : 'read-only'}`}>
+          <div className="photo-section">
+            <span className="photo-label">Photo</span>
+            <div className="profile-circle-wrapper">
+              <ProfileCircle initials={initials} />
+              <span className="add-headshot">Add headshot</span>
+            </div>
+          </div>
+          <TextInput
+            name="firstName"
+            label="First Name*"
+            value={profile.firstName}
+            onChange={handleInputChange}
+            type="text"
+            isRequired={true}
+          />
+          <TextInput
+            name="lastName"
+            label="Last Name*"
+            value={profile.lastName}
+            onChange={handleInputChange}
+            type="text"
+            isRequired={true}
+          />
+          <TextInput
+            name="username"
+            label="Username*"
+            value={profile.username}
+            onChange={handleInputChange}
+            type="text"
+            isRequired={true}
+          />
+          <TextInput
+            name="githubUsername"
+            label="Github Username*"
+            value={profile.githubUsername}
+            onChange={handleInputChange}
+            type="text"
+            isRequired={true}
+          />
+        </div>
+      </Form>
+    </div>
+  );
+};
+
+export default BasicInfoForm;
diff --git a/src/pages/profilePage/components/BioForm.jsx b/src/pages/profilePage/components/BioForm.jsx
new file mode 100644
index 00000000..88339ec3
--- /dev/null
+++ b/src/pages/profilePage/components/BioForm.jsx
@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import Form from '../../../components/form';
+import { ProfileContext } from '..';
+
+const BioForm = () => {
+  const { profile, handleBioChange, isEditMode } = useContext(ProfileContext);
+  const maxLength = 300;
+  const isMaxLengthReached = profile.bio.length >= maxLength;
+
+  return (
+    <div className="profile-grid-section-bio">
+      <div className="profile-grid-section">
+        <Form>
+          <hr className="section-divider" />
+          <h3 className="profile-info-header">Bio</h3>
+          <label htmlFor="bio">Bio</label>
+          <div className={`profile-grid-section ${isEditMode ? '' : 'read-only'}`}>
+            <textarea
+              onChange={handleBioChange}
+              name="bio"
+              value={profile.bio}
+              placeholder="Tell us about yourself, your professional interests and educational highlights to date..."
+              maxLength={300}
+              id="bio"
+            ></textarea>
+            <div className="info-container">
+              <p className="info-text">{profile.bio.length}/300</p>
+              {isMaxLengthReached && <p className="error-text">Max length is 300 characters</p>}
+            </div>
+          </div>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default BioForm;
diff --git a/src/pages/profilePage/components/ContactInfoForm.jsx b/src/pages/profilePage/components/ContactInfoForm.jsx
new file mode 100644
index 00000000..b195c457
--- /dev/null
+++ b/src/pages/profilePage/components/ContactInfoForm.jsx
@@ -0,0 +1,48 @@
+import React, { useContext } from 'react';
+import { ProfileContext } from '..';
+import Form from '../../../components/form';
+import TextInput from '../../../components/form/textInput';
+
+const ContactInfoForm = () => {
+  const { profile, handleInputChange, isEditMode } = useContext(ProfileContext);
+
+  return (
+    <div className="profile-grid-section">
+      <Form>
+        <hr className="section-divider" />
+        <h3 className="profile-info-header">Contact Info</h3>
+        <div className={`profile-grid-section ${isEditMode ? '' : 'read-only'}`}>
+          <TextInput
+            name="email"
+            label="Email*"
+            value={profile.email}
+            onChange={handleInputChange}
+            type="email"
+            isRequired={true}
+            validChars="A-Za-z0-9@."
+          />
+          <TextInput
+            name="mobile"
+            label="Mobile*"
+            value={profile.mobile}
+            onChange={handleInputChange}
+            type="text"
+            validChars="0-9()+-"
+            isRequired={true}
+          />
+          <TextInput
+            name="password"
+            label="Password*"
+            value={profile.password}
+            onChange={handleInputChange}
+            type="password"
+            isRequired={true}
+            validChars="A-Za-z0-9 -"
+          />
+        </div>
+      </Form>
+    </div>
+  );
+};
+
+export default ContactInfoForm;
diff --git a/src/pages/profilePage/components/ProfileHeader.jsx b/src/pages/profilePage/components/ProfileHeader.jsx
new file mode 100644
index 00000000..cfc757a3
--- /dev/null
+++ b/src/pages/profilePage/components/ProfileHeader.jsx
@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+import { ProfileContext } from '..';
+import ProfileCircle from '../../../components/profileCircle';
+
+const ProfileHeader = () => {
+  const { initials, profile } = useContext(ProfileContext);
+  return (
+    <section className="profile-info-header">
+      <ProfileCircle initials={initials} />
+      <div className="profile-info">
+        <h3>
+          {profile.firstName} {profile.lastName}
+        </h3>
+        <p>{profile.role}</p>
+      </div>
+    </section>
+  );
+};
+
+export default ProfileHeader;
diff --git a/src/pages/profilePage/components/TrainingInfoForm.jsx b/src/pages/profilePage/components/TrainingInfoForm.jsx
new file mode 100644
index 00000000..2124ac74
--- /dev/null
+++ b/src/pages/profilePage/components/TrainingInfoForm.jsx
@@ -0,0 +1,74 @@
+import { useContext } from 'react';
+import { ProfileContext } from '..';
+import Form from '../../../components/form';
+import TextInput from '../../../components/form/textInput';
+
+const TrainingInfoForm = () => {
+  const { profile, handleInputChange, formatRole, isEditMode, isCurrentUserTeacher } =
+    useContext(ProfileContext);
+
+  return (
+    <div className="profile-grid-section">
+      <Form>
+        <hr className="section-divider" />
+        <h3 className="profile-info-header">Training Info</h3>
+        <div
+          className={`profile-grid-section ${isEditMode && isCurrentUserTeacher ? '' : 'read-only'}`}
+        >
+          <TextInput
+            name="role"
+            label="Role*"
+            value={formatRole(profile.role)}
+            onChange={handleInputChange}
+            type="text"
+            isLocked={isEditMode && !isCurrentUserTeacher}
+            isRequired={true}
+            validChars="A-Za-z0-9 -"
+          />
+          <TextInput
+            name="specialism"
+            label="Specialism*"
+            value={profile.specialism}
+            onChange={handleInputChange}
+            type="text"
+            isLocked={isEditMode && !isCurrentUserTeacher}
+            isRequired={true}
+            validChars="A-Za-z0-9 -"
+          />
+          <TextInput
+            name="cohortId"
+            label="Cohort*"
+            value={profile.cohortId}
+            onChange={handleInputChange}
+            type="text"
+            isLocked={isEditMode && !isCurrentUserTeacher}
+            isRequired={true}
+            validChars="A-Za-z0-9 -"
+          />
+          <TextInput
+            name="startDate"
+            label="Start Date*"
+            value={profile.startDate}
+            onChange={handleInputChange}
+            type="text"
+            isLocked={isEditMode && !isCurrentUserTeacher}
+            isRequired={true}
+            validChars="A-Za-z0-9 -"
+          />
+          <TextInput
+            name="endDate"
+            label="End Date*"
+            value={profile.endDate}
+            onChange={handleInputChange}
+            type="text"
+            isLocked={isEditMode && !isCurrentUserTeacher}
+            isRequired={true}
+            validChars="A-Za-z0-9 -"
+          />
+        </div>
+      </Form>
+    </div>
+  );
+};
+
+export default TrainingInfoForm;
diff --git a/src/pages/profilePage/index.js b/src/pages/profilePage/index.js
new file mode 100644
index 00000000..b84c15eb
--- /dev/null
+++ b/src/pages/profilePage/index.js
@@ -0,0 +1,151 @@
+import { createContext, useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { user } from '../../service/mockData';
+import Card from '../../components/card';
+import './profilePage.css';
+import ProfileHeader from './components/ProfileHeader';
+import BasicInfoForm from './components/BasicInfoForm';
+import TrainingInfoForm from './components/TrainingInfoForm';
+import ContactInfoForm from './components/ContactInfoForm';
+import BioForm from './components/BioForm';
+import Button from '../../components/button';
+
+// eslint-disable-next-line camelcase
+import jwt_decode from 'jwt-decode';
+import useAuth from '../../hooks/useAuth';
+
+export const ProfileContext = createContext();
+
+const UserProfile = ({ isEditMode }) => {
+  const navigate = useNavigate();
+  const { profileId } = useParams();
+  const [profile, setProfile] = useState(null);
+  const [rollbackProfile, setRoolbackProfile] = useState(null);
+  const [initials, setInitials] = useState('');
+  const [isCurrentUserProfile, setIsCurrentUserProfile] = useState(false);
+  const [isCurrentUserTeacher, setIsCurrentUserTeacher] = useState(false);
+
+  const { token, role } = useAuth();
+  const { userId } = jwt_decode(token);
+
+  const fetchProfile = () => {
+    setProfile(user.user);
+    setRoolbackProfile(user.user);
+    setInitials(user.user.firstName[0] + user.user.lastName[0]);
+    /*     try {
+      const data = await get(`profiles/${profileId}`);
+      setProfile(data);
+      const initials = data.user.firstName[0] + data.user.lastName[0];
+      setInitials(initials);
+    } catch (error) {
+      console.error('Error fetching profile data:', error);
+    } */
+  };
+
+  useEffect(() => {
+    fetchProfile();
+    if (userId === Number(profileId)) {
+      setIsCurrentUserProfile(true);
+    }
+    if (role === 'TEACHER') {
+      setIsCurrentUserTeacher(true);
+    }
+  }, [profileId]);
+
+  const handleSubmit = (e) => {
+    // Handle form submission
+    e.preventDefault();
+    navigate(`/profile/${userId}`);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setProfile((prevProfile) => ({
+      ...prevProfile,
+      [name]: value
+    }));
+  };
+
+  const handleBioChange = (event) => {
+    handleInputChange(event);
+  };
+
+  const handleCancel = () => {
+    setProfile(rollbackProfile);
+    navigate(`/profile/${userId}`);
+  };
+
+  const formatRole = (role) => {
+    if (!role) return '';
+    return role.charAt(0).toUpperCase() + role.slice(1).toLowerCase();
+  };
+
+  if (!profile) {
+    return <h1>Loading...</h1>;
+  }
+
+  const contextValues = {
+    profile,
+    setProfile,
+    initials,
+    setInitials,
+    handleSubmit,
+    handleInputChange,
+    formatRole,
+    handleBioChange,
+    isEditMode,
+    isCurrentUserProfile,
+    isCurrentUserTeacher
+  };
+
+  return (
+    <main className="profile-page-main">
+      <h2 className="profile-header">Profile</h2>
+      <ProfileContext.Provider value={contextValues}>
+        <Card>
+          <ProfileHeader />
+          <section className="profile-grid">
+            <BasicInfoForm />
+            <TrainingInfoForm />
+            <ContactInfoForm />
+            <BioForm />
+            <p className="info-text required-text">*Required</p>
+            {isEditMode ? (
+              <>
+                <div className="button-group">
+                  <Button
+                    text="Cancel"
+                    type="button"
+                    classes="button cancel-button"
+                    onClick={handleCancel}
+                  />
+
+                  <Button
+                    text="Submit"
+                    type="submit"
+                    classes="button submit-button"
+                    onClick={handleSubmit}
+                  />
+                </div>
+              </>
+            ) : (
+              (isCurrentUserProfile || isCurrentUserTeacher) && (
+                <Button
+                  text="Edit"
+                  type="button"
+                  classes="button edit-button"
+                  onClick={() => {
+                    navigate(`/profile/${profileId}/edit`);
+                  }}
+                />
+              )
+            )}
+          </section>
+        </Card>
+      </ProfileContext.Provider>
+    </main>
+  );
+};
+
+export default UserProfile;
diff --git a/src/pages/profilePage/profilePage.css b/src/pages/profilePage/profilePage.css
new file mode 100644
index 00000000..67e5a73d
--- /dev/null
+++ b/src/pages/profilePage/profilePage.css
@@ -0,0 +1,182 @@
+.profile-page-main {
+  grid-column: 2 / span 2; /* Occupy the last two columns */
+  grid-row: 2; /* Occupy row 2 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.profile-header {
+  margin-top: 10px;
+  align-self: flex-start;
+  margin: 24px;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 48px;
+}
+
+.profile-info-header {
+  display: flex;
+  align-items: center;
+}
+
+.profile-info-header .profile-icon {
+  width: 80px;
+  height: 80px;
+}
+
+.profile-info-header .profile-icon p {
+  line-height: 77px;
+  font-size: 32px;
+  font-weight: 400;
+  align-items: center;
+}
+
+.profile-info {
+  margin-left: 16px;
+}
+
+.profile-info h3 {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 40px;
+  margin: 0;
+}
+
+.profile-info p {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 24px;
+  color: var(--color-blue1);
+  margin: 0;
+}
+
+.profile-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  width: 100%;
+}
+
+.profile-grid-section h3 {
+  margin-bottom: 32px; /* Add space below section headers */
+}
+
+.profile-grid-section {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.profile-grid-section.read-only input,
+.profile-grid-section.read-only textarea {
+  pointer-events: none; /* Disable all mouse events */
+}
+
+.photo-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.photo-label {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--color-blue1);
+  margin-left: 2px;
+}
+
+.profile-circle-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.add-headshot {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: #888;
+  margin-left: 16px; /* Add space between profile circle and add headshot text */
+}
+
+.profile-grid-section-bio .profile-grid-section {
+  gap: 0;
+}
+
+.section-divider {
+  border: none;
+  border-top: 1px solid var(--color-blue5);
+  margin: 32px 0; /* Add vertical space around the divider */
+}
+
+textarea {
+  height: 287px; /* Set the height of the textarea */
+  resize: none; /* Förhindrar användaren från att ändra storlek på textarea */
+  margin: 0;
+}
+
+.info-container {
+  display: flex;
+  align-items: center; /* Justera avståndet mellan texten och felmeddelandet */
+}
+
+.info-text,
+.error-text {
+  color: var(--color-blue1);
+  font-size: 16px;
+  line-height: 24px;
+  margin-left: 10px;
+}
+
+.error-text {
+  margin-left: auto;
+  margin-right: 10px;
+}
+
+.required-text {
+  margin-left: 0;
+}
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  gap: 16px;
+}
+
+.button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  padding: 14px 24px;
+
+  border-radius: 8px;
+
+  font-style: normal;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 28px;
+  text-align: center;
+
+  flex: none;
+  order: 0;
+  flex-grow: 1;
+}
+
+.edit-button,
+.submit-button {
+  background: var(--color-blue);
+  color: #ffffff;
+}
+
+.cancel-button {
+  background: var(--color-offwhite);
+  color: var(--color-blue1);
+}
diff --git a/src/pages/register/index.js b/src/pages/register/index.js
index 5cc70e32..af6cbb04 100644
--- a/src/pages/register/index.js
+++ b/src/pages/register/index.js
@@ -3,11 +3,35 @@ import Button from '../../components/button';
 import TextInput from '../../components/form/textInput';
 import useAuth from '../../hooks/useAuth';
 import CredentialsCard from '../../components/credentials';
+import ErrorMessage from '../../components/errorMessage';
 import './register.css';
 
 const Register = () => {
   const { onRegister } = useAuth();
   const [formData, setFormData] = useState({ email: '', password: '' });
+  const [errorMessage, setErrorMessage] = useState('');
+
+  // Email validation
+  const emailPatternDescription = 'Please enter a valid email address';
+  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+  const emailRegexValidChars = 'A-Za-z0-9@._-';
+  const isValidEmail = formData.email.match(emailRegex);
+
+  // Password validation
+  // The password should not be less than 8 characters in length
+  // The password should contain at least one uppercase character: /(?=.*[A-Z])/
+  // The password should contain at least one number: /(?=.*[0-9])/
+  // The password should contain at least one special character: /(?=.*[!@#$%^&*])/
+  const patternDescription =
+    'Password must contain at least one uppercase letter, one number, and one special character';
+  const passwordRegex = /^(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])/;
+  const passwordRegexValidChars = 'A-Za-z0-9@._\\-!@#\\$%\\^&\\*';
+  const hasValidLength = formData.password.length >= 8;
+  const isValidPassword = passwordRegex.test(formData.password) && hasValidLength;
+
+  // Form validation
+  const isRequiredFieldsProvided = formData.email && formData.password;
+  const isFormDataValid = isRequiredFieldsProvided && isValidEmail && isValidPassword;
 
   const onChange = (e) => {
     const { name, value } = e.target;
@@ -31,6 +55,10 @@ const Register = () => {
               type="email"
               name="email"
               label={'Email *'}
+              isRequired={true}
+              validChars={emailRegexValidChars}
+              pattern={emailRegex}
+              patternDescription={emailPatternDescription}
             />
             <TextInput
               value={formData.password}
@@ -38,11 +66,20 @@ const Register = () => {
               name="password"
               label={'Password *'}
               type={'password'}
+              isRequired={true}
+              validChars={passwordRegexValidChars}
+              pattern={passwordRegex}
+              patternDescription={patternDescription}
+              minLength={8}
             />
           </form>
+          {errorMessage && <ErrorMessage message={errorMessage} />}
+          <div className={`text-register-info`}>*Required</div>
           <Button
             text="Sign up"
-            onClick={() => onRegister(formData.email, formData.password)}
+            onClick={() => onRegister(formData.email, formData.password, setErrorMessage)}
+            // Prevent user from submitting form if email or password (required fields) are empty
+            disabled={!isFormDataValid}
             classes="green width-full"
           />
         </div>
diff --git a/src/pages/register/register.css b/src/pages/register/register.css
index 71537440..8387a4b5 100644
--- a/src/pages/register/register.css
+++ b/src/pages/register/register.css
@@ -7,3 +7,9 @@
   gap: 24px;
   margin-bottom: 40px;
 }
+
+.text-register-info {
+  /* font-size: 0.85em; */
+  color: var(--color-blue2);
+  margin-bottom: 32px;
+}
diff --git a/src/pages/search/index.js b/src/pages/search/index.js
new file mode 100644
index 00000000..586b09b6
--- /dev/null
+++ b/src/pages/search/index.js
@@ -0,0 +1,107 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import ProfileCircle from '../../components/profileCircle';
+import SearchIcon from '../../assets/icons/searchIcon';
+import TextInput from '../../components/form/textInput';
+import Card from '../../components/card';
+import ArrowLeftIcon from '../../assets/icons/arrowLeftIcon';
+import { getUsers } from '../../service/apiClient';
+import './style.css';
+
+const Search = () => {
+  const { searchQuery } = useParams();
+  const [searchVal, setSearchVal] = useState(searchQuery);
+  const [searchUsers, setSearchUsers] = useState([]);
+  const navigate = useNavigate();
+  const [profiles, setProfiles] = useState([]);
+
+  useEffect(() => {
+    if (searchQuery.length > 0) {
+      const filteredUsers = profiles.filter((user) =>
+        `${user.firstName} ${user.lastName}`.toLowerCase().includes(searchVal.toLowerCase())
+      );
+      setSearchUsers(filteredUsers);
+    } else {
+      setSearchUsers([]); // Clear search results if input is empty
+    }
+  }, [profiles]);
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      const allUsers = await getUsers();
+      setProfiles(allUsers);
+    };
+    fetchUsers();
+  }, []); // Add an empty dependency array to run only once
+
+  console.log(profiles);
+
+  const onSearch = (e) => {
+    e.preventDefault();
+    navigate(`/dashboard/search/${searchVal}`);
+  };
+
+  const onChange = (e) => {
+    e.preventDefault();
+    const value = e.target.value;
+    setSearchVal(value);
+  };
+
+  const handleBackToDashboard = () => {
+    navigate('/');
+  };
+
+  return (
+    <main>
+      <div className="search-results-page">
+        <div className="search-results-header-container">
+          <button className="back-button" onClick={handleBackToDashboard}>
+            <ArrowLeftIcon />
+          </button>
+          <h2 className="search-results-header">Search Results</h2>
+        </div>
+
+        <Card>
+          <form onSubmit={onSearch}>
+            <TextInput
+              icon={<SearchIcon />}
+              value={searchVal}
+              onChange={onChange}
+              name="Search"
+              placeholder="Search for people"
+            />
+          </form>
+        </Card>
+        <Card>
+          <p>People</p>
+          <hr className="search-results-line" />
+          {searchUsers.length > 0 && searchQuery !== undefined ? (
+            <div className="search-results-list">
+              {searchUsers.map((user) => (
+                <div key={user.id} className="search-user">
+                  <div className="profile-circle-container">
+                    <ProfileCircle initials={`${user.firstName[0]}${user.lastName[0]}`} />
+                  </div>
+                  <div className="user-details">
+                    <p className="user-name">
+                      {user.firstName} {user.lastName}
+                    </p>
+                    <p className="user-specialism">{user.specialism}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="no-results-message">
+              Sorry, no results found
+              <br />
+              Try changing your search term
+            </p>
+          )}
+        </Card>
+      </div>
+    </main>
+  );
+};
+
+export default Search;
diff --git a/src/pages/search/style.css b/src/pages/search/style.css
new file mode 100644
index 00000000..75c9316d
--- /dev/null
+++ b/src/pages/search/style.css
@@ -0,0 +1,10 @@
+.search-results-header-container {
+  display: flex;
+  align-items: center;
+}
+.search-results-page {
+    margin : 20;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
\ No newline at end of file
diff --git a/src/pages/welcome/index.js b/src/pages/welcome/index.js
index 85af11ab..3c8a6b58 100644
--- a/src/pages/welcome/index.js
+++ b/src/pages/welcome/index.js
@@ -1,20 +1,64 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Stepper from '../../components/stepper';
 import useAuth from '../../hooks/useAuth';
 import StepOne from './stepOne';
-import StepTwo from './stepTwo';
+import StepFour from './stepFour';
 import './style.css';
+import StepTwo from './stepTwo';
+import StepThree from './stepThree';
 
 const Welcome = () => {
-  const { onCreateProfile } = useAuth();
+  const { onUpdateProfile, onGetUser, userCredentials } = useAuth();
 
   const [profile, setProfile] = useState({
     firstName: '',
     lastName: '',
+    username: '',
     githubUsername: '',
-    bio: ''
+    bio: '',
+    profilePicture: '',
+    email: userCredentials.email,
+    mobile: '',
+    password: userCredentials.password,
+    role: 'Student',
+    specialism: 'Software Developer',
+    cohort: 'Cohort 4',
+    startDate: 'January 2023',
+    endDate: 'June 2023'
   });
 
+  useEffect(() => {
+    const setData = (data) => {
+      if (data !== '') {
+        return data;
+      }
+      return '';
+    };
+    const fetchUserData = async () => {
+      try {
+        const userData = await onGetUser();
+        console.log(userData);
+        // Set the profile to the user data given.
+        setProfile((prevProfile) => ({
+          ...prevProfile,
+          firstName: setData(userData.firstName),
+          lastName: setData(userData.lastName),
+          username: setData(userData.username),
+          githubUsername: setData(userData.githubUsername),
+          bio: setData(userData.biography),
+          profilePicture: setData(userData.profilePicture),
+          mobile: setData(userData.mobile),
+          role: setData(userData.role),
+          specialism: setData(userData.specialism)
+        }));
+      } catch (error) {
+        console.error('Failed to fetch user data:', error);
+      }
+    };
+
+    fetchUserData();
+  }, []);
+
   const onChange = (event) => {
     const { name, value } = event.target;
 
@@ -24,8 +68,66 @@ const Welcome = () => {
     });
   };
 
+  const validate = (step) => {
+    switch (step) {
+      case 0:
+        if (
+          !profile.firstName ||
+          !profile.lastName ||
+          !profile.username ||
+          !profile.githubUsername ||
+          !profile.mobile ||
+          !profile.role ||
+          !profile.specialism ||
+          !profile.cohort ||
+          !profile.startDate ||
+          !profile.endDate
+        ) {
+          return false;
+        }
+        break;
+      case 1:
+        if (
+          !profile.firstName ||
+          !profile.lastName ||
+          !profile.username ||
+          !profile.githubUsername
+        ) {
+          return false;
+        }
+        break;
+      case 2:
+        if (!profile.mobile) {
+          return false;
+        }
+        break;
+      case 3:
+        if (
+          !profile.role ||
+          !profile.specialism ||
+          !profile.cohort ||
+          !profile.startDate ||
+          !profile.endDate
+        ) {
+          return false;
+        }
+        break;
+    }
+    return true;
+  };
+
   const onComplete = () => {
-    onCreateProfile(profile.firstName, profile.lastName, profile.githubUsername, profile.bio);
+    if (validate(0)) {
+      onUpdateProfile(
+        profile.firstName,
+        profile.lastName,
+        profile.bio,
+        profile.username,
+        profile.githubUsername,
+        profile.profilePicture,
+        profile.mobile
+      );
+    }
   };
 
   return (
@@ -35,9 +137,11 @@ const Welcome = () => {
         <p className="text-blue1">Create your profile to get started</p>
       </div>
 
-      <Stepper header={<WelcomeHeader />} onComplete={onComplete}>
+      <Stepper header={<WelcomeHeader />} onComplete={onComplete} validate={validate}>
         <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..7851e65a
--- /dev/null
+++ b/src/pages/welcome/stepFour/index.js
@@ -0,0 +1,28 @@
+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">
+          <label>
+            Bio
+            <textarea
+              name="bio"
+              value={data.bio}
+              onChange={setData}
+              placeholder="Tell us about yourself, your professional and educational highlights to date..."
+              maxLength={300}
+            ></textarea>
+            {data.bio == null ? `0 / 300` : `${data.bio.length} / 300`}
+          </label>
+        </div>
+      </Form>
+    </>
+  );
+};
+
+export default StepFour;
diff --git a/src/pages/welcome/stepOne/index.js b/src/pages/welcome/stepOne/index.js
index 317940f8..bf0acca4 100644
--- a/src/pages/welcome/stepOne/index.js
+++ b/src/pages/welcome/stepOne/index.js
@@ -1,8 +1,40 @@
+import { useEffect, useState } from 'react';
 import ProfileIcon from '../../../assets/icons/profileIcon';
 import Form from '../../../components/form';
 import TextInput from '../../../components/form/textInput';
 
-const StepOne = ({ data, setData }) => {
+const StepOne = ({ data, setData, errors }) => {
+  const [uploadedImageHex, setUploadedImageHex] = useState(data.profilePicture);
+  const [isPopupVisible, setIsPopupVisible] = useState(false);
+
+  const handleImageUpload = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
+        setUploadedImageHex(base64String);
+        setData({ target: { name: 'profilePicture', value: base64String } });
+        setIsPopupVisible(false);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  useEffect(() => {
+    if (data.profilePicture != null) {
+      setUploadedImageHex(data.profilePicture);
+    }
+  }, [data.profilePicture]);
+
+  const handleUploadPressed = () => {
+    setIsPopupVisible(true);
+  };
+
+  const handleCancel = () => {
+    setIsPopupVisible(false);
+  };
+
   return (
     <>
       <div className="welcome-formheader">
@@ -12,24 +44,76 @@ const StepOne = ({ data, setData }) => {
         <div className="welcome-form-profileimg">
           <p className="text-blue1">Photo</p>
           <div className="welcome-form-profileimg-input">
-            <ProfileIcon colour="#28C846" background="#64DC78" />
-            <p className="text-blue1">Add headshot</p>
+            {uploadedImageHex ? (
+              <img
+                className="welcome-form-profileimg-icon"
+                src={`data:image/png;base64,${uploadedImageHex}`}
+                alt="Profile"
+              />
+            ) : (
+              <ProfileIcon colour="#28C846" background="#64DC78" />
+            )}
+            <button
+              className="welcome-form-profileimg-addimg-button"
+              type="button"
+              onClick={handleUploadPressed}
+            >
+              Add Photo
+            </button>
           </div>
           <p className="welcome-form-profileimg-error">Please upload a valid image file</p>
         </div>
+        {isPopupVisible && (
+          <div className="popup">
+            <div className="popup-content">
+              <h3>Upload photo</h3>
+              <p>Choose a file to upload as your profile picture.</p>
+              <div className="popup-options">
+                <button type="button" onClick={handleCancel}>
+                  Cancel
+                </button>
+                <label htmlFor="file-upload" className="custom-file-upload">
+                  Choose file
+                </label>
+                <input
+                  id="file-upload"
+                  type="file"
+                  accept="image/png, image/jpeg"
+                  onChange={handleImageUpload}
+                  style={{ display: 'none' }}
+                />
+              </div>
+            </div>
+          </div>
+        )}
         <div className="welcome-form-inputs">
           <TextInput
             onChange={setData}
             value={data.firstName}
             name="firstName"
-            label={'First name'}
+            label={'First name*'}
+            isRequired={true}
+          />
+          <TextInput
+            onChange={setData}
+            value={data.lastName}
+            name="lastName"
+            label={'Last name*'}
+            isRequired={true}
+          />
+          <TextInput
+            onChange={setData}
+            value={data.username}
+            name="username"
+            label={'Username*'}
+            isRequired={true}
           />
-          <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*'}
+            isRequired={true}
           />
           <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..8b0f84c4
--- /dev/null
+++ b/src/pages/welcome/stepThree/index.js
@@ -0,0 +1,34 @@
+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*'} isLocked={true} />
+          <TextInput
+            value={data.specialism}
+            name="specialism"
+            label={'Specialism*'}
+            isLocked={true}
+          />
+          <TextInput value={data.cohort} name="cohort" label={'Cohort*'} isLocked={true} />
+          <TextInput
+            value={data.startDate}
+            name="startDate"
+            label={'Start Date*'}
+            isLocked={true}
+          />
+          <TextInput value={data.endDate} name="endDate" label={'End Date*'} isLocked={true} />
+          <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..50b06462 100644
--- a/src/pages/welcome/stepTwo/index.js
+++ b/src/pages/welcome/stepTwo/index.js
@@ -1,14 +1,31 @@
 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 info</h3>
       </div>
       <Form className="welcome-form">
         <div className="welcome-form-inputs">
-          <textarea name="bio" value={data.bio} onChange={setData}></textarea>
+          <TextInput value={data.email} name="email" label={'Email*'} isLocked={true} />
+          <TextInput
+            onChange={setData}
+            value={data.mobile}
+            name="mobile"
+            label={'Mobile*'}
+            isRequired={true}
+            validChars="0-9+ -"
+            maxLength={25}
+          />
+          <TextInput
+            value={data.password}
+            name="password"
+            label={'Password*'}
+            isLocked={true}
+            type="password"
+          />
           <p className="text-blue1">*Required</p>
         </div>
       </Form>
diff --git a/src/pages/welcome/style.css b/src/pages/welcome/style.css
index 7ff35605..7cf4dfc1 100644
--- a/src/pages/welcome/style.css
+++ b/src/pages/welcome/style.css
@@ -1,3 +1,10 @@
+.welcome-form {
+  height: 30vh;
+  width: 80vw;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
 .welcome-titleblock {
   margin-bottom: 32px;
 }
@@ -19,6 +26,11 @@
   gap: 16px;
   align-items: center;
 }
+.welcome-form-profileimg-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+}
 .welcome-form-profileimg-error {
   color: transparent;
 }
@@ -42,3 +54,89 @@
   grid-template-columns: 1fr 1fr;
   gap: 24px;
 }
+.welcome-form-profileimg-addimg-button {
+  background-color: #f0f5fa;
+  color: #64648c;
+  border-radius: 4px;
+  padding: 2px 4px;
+  border-width: 0;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+  white-space: nowrap;
+}
+.welcome-form-profileimg-addimg-button:hover {
+  background-color: #000046;
+  color: #ffffff;
+  border-radius: 4px;
+}
+
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  z-index: 100;
+}
+
+.popup-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+  height: 15rem;
+}
+
+.popup-content h3 {
+  text-align: left;
+}
+.popup-content p {
+  text-align: left;
+}
+
+.popup-options {
+  display: flex;
+  gap: 10px;
+}
+
+.popup-options button {
+  flex: 1;
+  background-color: #f0f5fa;
+  color: #64648c;
+  border-radius: 4px;
+  padding: 2px 4px;
+  border-width: 0;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+}
+.popup-options button:hover {
+  background-color: #000046;
+  color: #ffffff;
+}
+
+.custom-file-upload {
+  display: inline-block;
+  flex: 1;
+  font-size: larger;
+  padding: 14px 24px;
+  cursor: pointer;
+  background-color: #000046;
+  color: #ffffff;
+  border-radius: 4px;
+  border-width: 0;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+}
+.custom-file-upload:hover {
+  background-color: #f0f5fa;
+  color: #64648c;
+}
diff --git a/src/service/apiClient.js b/src/service/apiClient.js
index 5f3cdbcf..9664c720 100644
--- a/src/service/apiClient.js
+++ b/src/service/apiClient.js
@@ -5,12 +5,44 @@ async function login(email, password) {
 }
 
 async function register(email, password) {
-  await post('users', { email, password }, false);
+  const res = await post('users', { email, password }, false);
+
+  if (res.status === 'fail') {
+    return res;
+  }
+
   return await login(email, password);
 }
 
-async function createProfile(userId, firstName, lastName, githubUrl, bio) {
-  return await patch(`users/${userId}`, { firstName, lastName, githubUrl, bio });
+async function updateProfile(
+  userId,
+  firstName,
+  lastName,
+  bio,
+  username,
+  githubUsername,
+  profilePicture,
+  mobile
+) {
+  return await patch(`users/${userId}`, {
+    firstName,
+    lastName,
+    bio,
+    username,
+    githubUsername,
+    profilePicture,
+    mobile
+  });
+}
+
+async function getUserData(userId) {
+  const res = await get(`users/${userId}`);
+  return res.data.user;
+}
+
+async function getUsers() {
+  const res = await get(`users`);
+  return res.data.users;
 }
 
 async function getPosts() {
@@ -18,6 +50,11 @@ async function getPosts() {
   return res.data.posts;
 }
 
+async function getCohorts() {
+  const res = await get('cohorts');
+  return res.data.cohorts;
+}
+
 async function post(endpoint, data, auth = true) {
   return await request('POST', endpoint, data, auth);
 }
@@ -52,4 +89,4 @@ async function request(method, endpoint, data, auth = true) {
   return response.json();
 }
 
-export { login, getPosts, register, createProfile };
+export { login, getPosts, register, updateProfile, getCohorts, getUserData, getUsers };
diff --git a/src/service/mockData.js b/src/service/mockData.js
index d49e98a4..0ef02b5c 100644
--- a/src/service/mockData.js
+++ b/src/service/mockData.js
@@ -8,7 +8,14 @@ const user = {
     firstName: 'Joe',
     lastName: 'Bloggs',
     bio: 'Lorem ipsum dolor sit amet.',
-    githubUrl: 'https://github.com/vherus'
+    githubUrl: 'https://github.com/vherus',
+    githubUsername: 'vherus',
+    specialism: 'Full Stack',
+    startDate: 'January 2020',
+    endDate: 'June 2020',
+    username: 'test-user',
+    mobile: '0123456789',
+    password: 'password'
   }
 };
 
diff --git a/src/styles/_form.css b/src/styles/_form.css
index 419cfb63..a9639892 100644
--- a/src/styles/_form.css
+++ b/src/styles/_form.css
@@ -21,6 +21,20 @@ form label {
   position: relative;
 }
 
+.input-error {
+  border: 1px solid red;
+}
+.input-error:focus {
+  border: 1px solid red;
+}
+
+.passwordreveal-error {
+  border: 1px solid red;
+}
+.passwordreveal-error:focus {
+  border: 1px solid red;
+}
+
 .input-icon {
   position: absolute;
   left: 16px;
@@ -31,7 +45,7 @@ form label {
   padding-right: 10px;
 }
 
-.showpasswordbutton {
+.lockbutton {
   position: absolute;
   bottom: 28px;
   right: 16px;
@@ -40,6 +54,16 @@ form label {
   transform: translateY(19px);
   transition: all 0.2s ease;
 }
+
+.showpasswordbutton {
+  position: absolute;
+  top: 20px;
+  right: 16px;
+  z-index: 2;
+  background: none;
+  transform: translateY(19px);
+  transition: all 0.2s ease;
+}
 .showpasswordbutton:hover {
   opacity: 0.7;
 }
@@ -47,9 +71,25 @@ form label {
   opacity: 0.4;
 }
 
+.showpasswordbutton-duo {
+  position: absolute;
+  bottom: 28px;
+  right: 50px;
+  z-index: 2;
+  background: none;
+  transform: translateY(19px);
+  transition: all 0.2s ease;
+}
+.showpasswordbutton-duo:hover {
+  opacity: 0.7;
+}
+.showpasswordbutton-duo.__faded {
+  opacity: 0.4;
+}
+
 .passwordreveal {
   position: absolute;
-  bottom: 0;
+  /* bottom: 0; */
   right: 0;
   width: 100%;
   z-index: 1;