diff --git a/src/pages/search/StudentSearchView.css b/src/pages/search/StudentSearchView.css
index de701c3..68fbad6 100644
--- a/src/pages/search/StudentSearchView.css
+++ b/src/pages/search/StudentSearchView.css
@@ -17,28 +17,40 @@
 
 /* Own grid for spacing the avatar and the name stuff */
 .search-result-avatar-name {
-    display: grid;
-    grid-template-columns: auto auto;
-    gap: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem; /* space between photo and text */
 }
 
+.search-result-avatar-name p {
+  text-align: left; /* ensures text stays left-aligned */
+}
+
+
 /* Each user item in result list */
 .search-result-student {
   display: grid;
-  grid-template-columns: auto auto 1fr;
+  grid-template-columns: 1.2fr 1fr; /* avatar+name in col1, profile in col2 */
   gap: 3.5rem;
   align-items: center;
-  justify-items: center;
-  margin-bottom: 15px;
+  margin-bottom: 5px;
+}
+
+.search-result-student > :nth-child(2) {
+  justify-self: start;
 }
 .search-result-teacher {
   display: grid;
-  grid-template-columns: auto auto 1fr 1fr 1fr 0.5fr;
+  grid-template-columns: auto 2.5fr 1fr 1fr 1fr 0.5fr;
   gap: 1rem;
   align-items: center;
   justify-items: center;
-  margin-bottom: 15px;
+  margin-bottom: 5px;
 }
+.search-result-teacher > :nth-child(2) {
+  justify-self: start;
+}
+
 
 /* Fade hover effect */
 /* Shared hoverable item styles */
@@ -46,14 +58,14 @@
 .search-result-teacher {
   background-color: #ffffff;
   border-radius: 10px;
-  padding: 12px;
+  padding: 6px;
   transition: all 0.3s ease-out; /* default: slower exit */
 }
 
 .search-result-student:hover,
 .search-result-teacher:hover {
   background-color: #f0f6ff;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
   transition: all 0.01s ease-in; /* faster entry */
 }
 
diff --git a/src/pages/search/StudentSearchView.jsx b/src/pages/search/StudentSearchView.jsx
index 71406e6..5f56728 100644
--- a/src/pages/search/StudentSearchView.jsx
+++ b/src/pages/search/StudentSearchView.jsx
@@ -9,6 +9,7 @@ import { getUsersByName } from '../../service/apiClient';
 import './StudentSearchView.css';
 import { SlOptions } from 'react-icons/sl';
 import useAuth from '../../hooks/useAuth';
+import Loader from '../../components/loader/Loader';
 
 const StudentSearchView = () => {
   const { user } = useAuth();
@@ -20,6 +21,7 @@ const StudentSearchView = () => {
   const [searchVal, setSearchVal] = useState('');
   const [results, setResults] = useState([]);
   const [filteredResults, setFilteredResults] = useState([]);
+  const [loading, setLoading] = useState(true);
 
   // Pagination stuff
   const [currentPage, setCurrentPage] = useState(1);
@@ -35,12 +37,15 @@ const StudentSearchView = () => {
   useEffect(() => {
     const fetchUsers = async () => {
       try {
+        setLoading(true);
         const response = await getUsersByName(initialQuery);
         const jsonData = await response.json();
         setResults(jsonData.data.users);
         setFilteredResults(jsonData.data.users);
       } catch (err) {
         console.error('Error getting users: ', err);
+      } finally {
+        setLoading(false);
       }
     };
 
@@ -88,72 +93,91 @@ const StudentSearchView = () => {
           </form>
 
           <div className="search-results">
-            {filteredResults.length === 0 && <p>No users found.</p>}
-
-            {currentResults.map((u) => {
-              if (!u.firstName) {
-                // return <></>; // Makes pagination look weird.
-              }
+            {loading ? (
+              <Loader isLoading={loading} />
+            ) : filteredResults.length === 0 ? (
+              <p>No users found.</p>
+            ) : (
+              currentResults.map((u) => {
+                if (!u.firstName) {
+                  // return <></>; // Makes pagination look weird.
+                }
+
+                // Teacher
+                if (user.role === 1 || user.role === '1') {
+                  return (
+                    <div key={u.id} className={'search-result-teacher'}>
+                      <div
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => navigate(`/profile/${u.id}`)}
+                      >
+                        <ProfileCircle
+                          fullName={`${u.firstName} ${u.lastName}`}
+                          photoUrl={u.photo}
+                        />
+                      </div>
+                      <div>
+                        <p className="search-user-cohort">
+                          {u.firstName} {u.lastName}
+                        </p>
+                        {/* Empty cohorts get a random cohort to ensure nice formatting */}
+                        <p>
+                          {u.cohort?.title
+                            ? `${u.specialism}, ${u.cohort?.title}`
+                            : `${u.specialism}`}
+                        </p>
+                      </div>
+                      <div
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => navigate(`/profile/${u.id}`)}
+                      >
+                        Profile
+                      </div>
+                      <div>Add note</div>
+                      <div>Move to cohort</div>
+                      <div className="options-button">
+                        <SlOptions />
+                      </div>
+                    </div>
+                  );
+                }
 
-              // Teacher
-              if (user.role === 1 || user.role === '1') {
+                // Student
                 return (
-                  <div key={u.id} className={'search-result-teacher'}>
-                    <div style={{ cursor: 'pointer' }} onClick={() => navigate(`/profile/${u.id}`)}>
-                      <ProfileCircle fullName={`${u.firstName} ${u.lastName}`} photoUrl={u.photo} />
-                    </div>
-                    <div>
-                      <p className="search-user-cohort">
-                        {u.firstName} {u.lastName}
-                      </p>
-                      {/* Empty cohorts get a random cohort to ensure nice formatting */}
-                      <p>
-                        {u.cohort?.title
-                          ? `${u.specialism}, ${u.cohort?.title}`
-                          : `${u.specialism}`}
-                      </p>
+                  <div key={u.id} className="search-result-student">
+                    <div className="search-result-avatar-name">
+                      <div
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => navigate(`/profile/${u.id}`)}
+                      >
+                        <ProfileCircle
+                          fullName={`${u.firstName} ${u.lastName}`}
+                          photoUrl={u.photo}
+                        />
+                      </div>
+                      <div>
+                        <p className="search-user-cohort">
+                          {u.firstName} {u.lastName}
+                        </p>
+                        {/* Empty cohorts get a random cohort to ensure nice formatting */}
+                        <p>
+                          {u.cohort?.title
+                            ? `${u.specialism}, ${u.cohort?.title}`
+                            : `${u.specialism}`}
+                        </p>
+                      </div>
                     </div>
-                    <div style={{ cursor: 'pointer' }} onClick={() => navigate(`/profile/${u.id}`)}>
+                    <div
+                      className="search-result-profile"
+                      style={{ cursor: 'pointer' }}
+                      onClick={() => navigate(`/profile/${u.id}`)}
+                    >
                       Profile
                     </div>
-                    <div>Add note</div>
-                    <div>Move to cohort</div>
-                    <div className="options-button">
-                      <SlOptions />
-                    </div>
                   </div>
                 );
-              }
-
-              // Student
-              return (
-                <div key={u.id} className="search-result-student">
-                  <div className="search-result-avatar-name">
-                    <div style={{ cursor: 'pointer' }} onClick={() => navigate(`/profile/${u.id}`)}>
-                      <ProfileCircle fullName={`${u.firstName} ${u.lastName}`} photoUrl={u.photo} />
-                    </div>
-                    <div>
-                      <p className="search-user-cohort">
-                        {u.firstName} {u.lastName}
-                      </p>
-                      {/* Empty cohorts get a random cohort to ensure nice formatting */}
-                      <p>
-                        {u.cohort?.title
-                          ? `${u.specialism}, ${u.cohort?.title}`
-                          : `${u.specialism}`}
-                      </p>
-                    </div>
-                  </div>
-                  <div
-                    className="search-result-profile"
-                    style={{ cursor: 'pointer' }}
-                    onClick={() => navigate(`/profile/${u.id}`)}
-                  >
-                    Profile
-                  </div>
-                </div>
-              );
-            })}
+              })
+            )}
           </div>
           {totalPages > 1 && (
             <div className="pagination">