diff --git a/client/package-lock.json b/client/package-lock.json
index 892659f7..16c618bb 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11797,6 +11797,14 @@
       "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-2.7.0.tgz",
       "integrity": "sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA=="
     },
+    "react-icons": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.10.0.tgz",
+      "integrity": "sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==",
+      "requires": {
+        "camelcase": "^5.0.0"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/client/package.json b/client/package.json
index f8fc9ace..e72af59c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -27,6 +27,7 @@
     "react-datepicker": "^2.16.0",
     "react-dom": "^16.13.1",
     "react-ga": "^2.7.0",
+    "react-icons": "^3.10.0",
     "react-items-carousel": "^2.8.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
diff --git a/client/src/containers/SearchPage/index.js b/client/src/containers/SearchPage/index.js
index 339b261f..d92c1067 100644
--- a/client/src/containers/SearchPage/index.js
+++ b/client/src/containers/SearchPage/index.js
@@ -1,8 +1,12 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import { Select, Pagination, Empty, notification } from 'antd';
+import { FaGraduationCap } from 'react-icons/fa';
+import { AiFillMail } from 'react-icons/ai';
 import './style.css';
 import UserContainer from '../../components/UserContainer';
 import logo from '../../assets/images/logo.png';
+import leftSvg from '../../assets/images/Group 2423.svg';
 
 const axios = require('axios');
 
@@ -196,6 +200,7 @@ class SearchPage extends Component {
         displayStudent: fillterdStudent,
         showCohorts: false,
         ...filterStudentPagination,
+        studentProjectData: [],
       });
     }
   };
@@ -457,7 +462,11 @@ class SearchPage extends Component {
             </div>
           </div>
 
-          <div className="display-cohort">
+          <div
+            className={`${
+              studentProjectData.length ? 'one-student' : ''
+            } ${'display-cohort'}`}
+          >
             {total !== 0 ? (
               <>
                 {!showProjectSection // 1- show Student Section
@@ -466,81 +475,137 @@ class SearchPage extends Component {
                       listCohorts.map((cohort) => (
                         <div className="cohort">
                           <div className="cohort-img">
-                            <img src={cohort.img_url} alt={cohort.name} />
+                            <img
+                              src={cohort.img_url}
+                              alt={cohort.name}
+                              title={cohort.name}
+                            />
                           </div>
                           <div className="cohort-details">
                             <h3 className="cohort-name">
-                              Cohort Name: {cohort.name}{' '}
+                              Cohort Name:{' '}
+                              <Link
+                                to={`/cohorts/${cohort.id}/projects?type=internal`}
+                                title={`${cohort.name} Details `}
+                              >
+                                {cohort.name}
+                              </Link>
                             </h3>
                             <h4> {cohort.description} </h4>
                           </div>
-                          <a
-                            href={cohort.github_link}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            Github Page
-                          </a>
+                          <div className="cohort-link">
+                            <a
+                              href={cohort.github_link}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                            >
+                              Github Page
+                            </a>
+                          </div>
                         </div>
                       ))
                     : // B- show students in student section
                       listStudents.map((student) => (
-                        <div className="student">
-                          <div className="student-img">
+                        <div
+                          className={`${
+                            studentProjectData.length ? 'one-student' : ''
+                          } ${'cohort'}`}
+                        >
+                          <div className="cohort-img">
                             <img src={student.img_url} alt={student.name} />
                           </div>
-                          <div className="student-details">
-                            <h3 className="student-name">{student.name} </h3>
+                          <div className="cohort-details student-details">
+                            <h3 className="student-name">
+                              <Link
+                                to={`/alumni/${student.id}`}
+                                title={`${student.name} Details `}
+                              >
+                                {student.name}
+                              </Link>
+                            </h3>
+                            <div className="student-cohort-name">
+                              <FaGraduationCap /> &nbsp;
+                              <h4>
+                                <Link
+                                  to={`/cohorts/${student.cohort_id}/projects?type=internal`}
+                                  title={`${this.getCohortNameFromId(
+                                    student,
+                                    allCohortData
+                                  )} Details `}
+                                >
+                                  {this.getCohortNameFromId(
+                                    student,
+                                    allCohortData
+                                  )}
+                                </Link>
+                              </h4>
+                            </div>
+                            <div className="student-email">
+                              <AiFillMail /> &nbsp; <h4>{student.email}</h4>
+                            </div>
+                            {studentProjectData.length ? (
+                              <div className="student-projects">
+                                <h3>Projects:</h3>
+                                {displayStudent.length === 1 &&
+                                  studentProjectData.map((project, index) => (
+                                    <h4>
+                                      {`${index + 1}-${project.project_type}`}{' '}
+                                      Project: &nbsp;
+                                      <Link
+                                        to={`/cohorts/${studentProjectData.cohort_id}/projects/${studentProjectData.project_id}`}
+                                        title={`${project.name} Page `}
+                                      >
+                                        {project.name}
+                                      </Link>
+                                    </h4>
+                                  ))}
+                              </div>
+                            ) : null}
+                          </div>
+                          <div className="cohort-link">
+                            <a
+                              href={student.github_link}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="cohort-link"
+                            >
+                              Github Page
+                            </a>
                           </div>
-                          {studentProjectData.length ? (
-                            <>
-                              {displayStudent.length === 1 &&
-                                studentProjectData.map((project) => (
-                                  <h5>
-                                    {project.project_type} Project:{' '}
-                                    {project.name}
-                                  </h5>
-                                ))}
-                            </>
-                          ) : null}
-                          <h4>
-                            Cohort Name
-                            {this.getCohortNameFromId(student, allCohortData)}
-                          </h4>
-                          <h4>{student.email}</h4>
-                          <a
-                            href={student.github_link}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            Github Page
-                          </a>
                         </div>
                       ))
                   : // 2- show Project Section
                     listProjects.map((project) => (
-                      <div className="project">
-                        <div className="project-img">
+                      <div className="cohort search-project">
+                        <div className="cohort-img">
                           <img src={project.img_url} alt={project.name} />
                         </div>
-                        <div className="project-details">
-                          <h3 className="project-name">{project.name} </h3>
+                        <div className="cohort-details">
+                          <Link
+                            to={`/cohorts/${project.cohort_id}/projects/${project.id}`}
+                            title={`${project.name} Page `}
+                          >
+                            {project.name}
+                          </Link>
+                          <h3 className="cohort-name">{project.name} </h3>
+                          <h4>{project.project_type}</h4>
+                        </div>
+                        <div className="cohort-link small-font">
+                          <a
+                            href={project.website_link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            Website Page
+                          </a>
+                          <a
+                            href={project.github_link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            Github Page
+                          </a>
                         </div>
-                        <h5>{project.project_type}</h5>
-                        <a
-                          href={project.website_link}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          Website Page
-                        </a>
-                        <a
-                          href={project.github_link}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          Github Page
-                        </a>
                       </div>
                     ))}
 
@@ -563,6 +628,7 @@ class SearchPage extends Component {
               <Empty />
             )}
           </div>
+          <img src={leftSvg} alt="background" className="search-svg" />
         </div>
       </UserContainer>
     );
diff --git a/client/src/containers/SearchPage/style.css b/client/src/containers/SearchPage/style.css
index ca458e45..e8ffaf9e 100644
--- a/client/src/containers/SearchPage/style.css
+++ b/client/src/containers/SearchPage/style.css
@@ -1,15 +1,16 @@
 .search-page {
+  margin: 120px 8% 0;
   display: flex;
-  margin-top: 120px;
-  margin-left: 150px;
+  flex-wrap: wrap;
+  justify-content: space-around;
 }
 
 .search-form {
-  width: 300px;
   border: 1px solid #707070;
   box-shadow: var(--card-shadow);
   border-radius: 0px 0px 5px 5px;
   text-align: left;
+  width: 25%;
   height: 400px;
 }
 
@@ -43,51 +44,67 @@
 }
 
 .display-cohort {
-  margin-left: 45px;
-  width: 720px;
+  width: 65%;
 }
 
 .cohort {
   display: flex;
   height: 120px;
-  box-shadow: 0px 0px 17px #AFAFAF29;
+  box-shadow: 0px 0px 17px #afafaf29;
   margin-bottom: 15px;
   align-items: center;
   border-radius: 5px;
   border-right: 6px solid var(--main-color);
-  padding-right: 30px;
 }
 
 .cohort-img img {
-  width: 75px;
+  max-width: 100%;
   border-radius: 50%;
+  max-height: 100%;
 }
 
 .cohort-img {
-  padding: 22px 30px;
-  flex: 0.5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 20px;
+  width: 20%;
+  height: 100%;
 }
 
 .cohort-name {
   font-weight: bold;
 }
 
+.cohort-name a {
+  color: var(--main-color);
+}
+
 .cohort-details {
   padding: 22px 0;
-  flex: 1.5;
+  width: 50%;
 }
 
-.cohort a {
-  width: 220px;
-  margin-left: 25px;
-  padding: 11px 0;
+.cohort-link {
+  width: 30%;
+}
+
+.cohort .cohort-link a {
+  width: 80%;
+  display: inline-block;
+  padding: 9px;
   background-color: var(--main-color);
-  color: white;
-  box-shadow: 0px 3px 6px #AFAFAF29;
+  color: var(--main-white);
+  box-shadow: 0px 3px 6px #afafaf29;
   border-radius: 5px;
 }
 
-.show, .hide {
+.cohort .small-font a {
+  margin: 6px 0;
+}
+
+.show,
+.hide {
   padding: 0 30px;
   height: 50%;
 }
@@ -102,64 +119,70 @@
   color: #d9d9d9;
 }
 
-.student {
+.student-details .student-name a {
+  color: var(--content-blue-green);
+  font-weight: bold;
+}
+
+.student-details .student-cohort-name,
+.student-details .student-email {
   display: flex;
-  height: 120px;
-  box-shadow: 0px 0px 17px #AFAFAF29;
-  margin-bottom: 15px;
   align-items: center;
-  border-radius: 5px;
-  border-right: 6px solid var(--main-color);
-  padding-right: 30px;
 }
 
-.student a {
-  width: 220px;
-  margin-left: 25px;
-  padding: 11px 0;
-  background-color: #E8505B;
-  color: white;
-  box-shadow: 0px 3px 6px #AFAFAF29;
-  border-radius: 5px;
+.student-details .student-projects {
+  padding: 10px 0 0 17px;
 }
 
-.student-img img {
-  width: 75px;
-  border-radius: 50%;
+.student-details .student-projects h3 {
+  margin: 0;
 }
 
-.student-img {
-  padding: 22px 30px;
-  flex: 0.5;
+.student-details .student-projects h4 {
+  padding-left: 10px;
+}
+
+.one-student {
+  height: auto;
+}
+.student-details .student-cohort-name svg {
+  color: var(--main-color);
+}
+
+.student-details .student-cohort-name a {
+  color: var(--pagination-color);
+}
+
+.student-details .student-email svg {
+  color: var(--main-color);
 }
 
 .student-details {
-  padding: 22px 0;
-  flex: 1.5;
+  text-align: left;
 }
 
-.student-name {
-  font-weight: bold;
+.student-details h4 {
+  margin-bottom: 0;
 }
 
 .project {
   display: flex;
   height: 120px;
-  box-shadow: 0px 0px 17px #AFAFAF29;
+  box-shadow: 0px 0px 17px #afafaf29;
   margin-bottom: 15px;
   align-items: center;
   border-radius: 5px;
-  border-right: 6px solid #E8505B;
+  border-right: 6px solid var(--main-color);
   padding-right: 30px;
 }
 
-.project a {
+.project .project-link {
   width: 220px;
   margin-left: 25px;
   padding: 11px 0;
-  background-color: #E8505B;
-  color: white;
-  box-shadow: 0px 3px 6px #AFAFAF29;
+  background-color: var(--main-color);
+  color: var(--main-white);
+  box-shadow: 0px 3px 6px #afafaf29;
   border-radius: 5px;
 }
 
@@ -181,3 +204,117 @@
 .project-name {
   font-weight: bold;
 }
+
+.search-svg {
+  position: absolute;
+  left: 2%;
+  bottom: 2%;
+  height: 20%;
+}
+
+@media (max-width: 1200px) {
+  .search-page {
+    margin: 120px 4% 0;
+  }
+  .cohort {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 992px) {
+  .display-cohort {
+    width: 58%;
+  }
+  .search-form {
+    width: 32%;
+  }
+  .cohort {
+    font-size: 13px;
+  }
+  .cohort .small-font {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 768px) {
+  .display-cohort {
+    width: 100%;
+  }
+  .search-form {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    height: 205px;
+    margin-bottom: 30px;
+  }
+  .search-form .show {
+    width: 50%;
+    height: 100%;
+    border-right: 0;
+    border-top: 6px solid var(--main-color);
+  }
+  .search-form .hide {
+    width: 50%;
+    height: 100%;
+  }
+  .search-form .ant-select:last-child {
+    margin-bottom: 20px;
+  }
+}
+
+@media (max-width: 576px) {
+  .search-page {
+    margin: 120px 10% 0;
+  }
+  .display-cohort {
+    width: 100%;
+  }
+  .search-form {
+    width: 100%;
+    height: auto;
+    margin-bottom: 30px;
+  }
+  .search-form .show {
+    width: 100%;
+    height: auto;
+    border-top: 0;
+    border-right: 6px solid var(--main-color);
+  }
+  .search-form .hide {
+    width: 100%;
+    height: auto;
+  }
+  .search-form .ant-select:last-child {
+    margin-bottom: 20px;
+  }
+  .one-student {
+    flex-wrap: wrap;
+    padding: 20px 30px;
+  }
+
+  .one-student .cohort-img,
+  .one-student .student-details,
+  .one-student .cohort-link {
+    width: 100%;
+  }
+
+  .one-student .student-details {
+    margin: 0 auto;
+    width: 80%;
+  }
+
+  .search-svg {
+    display: none;
+  }
+  .student-details .student-email h4 {
+    font-size: 9px;
+  }
+
+  .cohort .cohort-link {
+    font-size: 8px;
+  }
+
+  .search-project .cohort-img {
+    width: 30%;
+  }
+}