diff --git a/public/locales/fr/ues.json.ts b/public/locales/fr/ues.json.ts
index 7c172c5..0dd040d 100644
--- a/public/locales/fr/ues.json.ts
+++ b/public/locales/fr/ues.json.ts
@@ -2,7 +2,7 @@
 // For more information, check the common.json.ts file
 
 export default {
-  'browser': 'Guide des UEs',
+  browser: 'Guide des UEs',
   'filter.search': 'Recherche dans le guide des UEs',
   'filter.search.title': 'Recherche dans le guide des UEs',
   'filter.creditType.title': 'Type de crédits',
@@ -11,31 +11,51 @@ export default {
   'filter.semester.title': 'Semestre',
   'filter.semester.autumn': 'Automne',
   'filter.semester.spring': 'Printemps',
+  'overview.credits': 'Crédits',
+  'overview.minors': 'Mineures',
+  'overview.taughtIn': 'Enseigné en',
+  'overview.requirements': 'prérequis',
+  'detailed.siepLink': 'Voir sur le SIEP',
   'detailed.inscriptionCode': "Code d'inscription",
-  'detailed.workTime': 'Temps de travail',
-  'detailed.workTime.project': 'Projet',
-  'detailed.semester': "Prochain semestre d'ouverture",
+  'detailed.inscriptionCode.copy': 'Copier dans le presse-papier',
+  'detailed.inscriptionCode.empty': "Le code d'inscription n'a pas encore été publié",
+  'detailed.worktime.hour': 'h',
+  'detailed.worktime.cm': 'CM',
+  'detailed.worktime.cm.tooltip': 'Cours Magistral',
+  'detailed.worktime.td': 'TD',
+  'detailed.worktime.td.tooltip': 'Travaux dirigés',
+  'detailed.worktime.tp': 'TP',
+  'detailed.worktime.tp.tooltip': 'Travaux pratiques',
+  'detailed.worktime.the': 'THE',
+  'detailed.worktime.the.tooltip': 'Travail hors encadrement',
+  'detailed.worktime.project': 'Projet',
+  'detailed.worktime.internship': 'stage',
+  'detailed.semester': 'Ouvert en',
   'detailed.semester.none': "Pas de semestre d'ouverture prévu",
   'detailed.description': 'Description',
   'detailed.program': 'Programme',
   'detailed.objectives': 'Objectifs',
-  'detailed.taughtIn': "Langue d'enseignement",
+  'detailed.taughtIn': 'Langue',
   'detailed.minors': 'Mineurs',
+  'detailed.minors.none': 'Cette UE ne compte dans aucun mineur',
   'detailed.credits': 'Crédits',
   'detailed.noWorkingTimeInfo': 'Aucune information sur le temps de travail',
-  'detailed.branchOptions': 'Niveau',
+  'detailed.dfpdata': 'Inscription',
+  'detailed.branchOptions': 'Profil',
   'detailed.requirements': 'Pré-requis',
   'detailed.requirements.none': 'Aucun pré-requis',
+  'detailed.rates.title': 'Avis des étudiants',
+  'detailed.rates.error': 'Une erreur est survenue lors du chargement des avis',
+  'detailed.rates.delete': 'Supprimer mon avis',
   'detailed.comments.loginRequired': 'Connexion requise pour voir les commentaires',
   'detailed.comments.author.anonymous': 'Anonyme',
   'detailed.comments.author.deleted': 'Utilisateur supprimé',
   'detailed.comments.writtenDate': 'Écrit le {{date}}',
   'detailed.comments.conversation.see': 'Voir la conversation ({{responseCount}} réponses)',
   'detailed.comments.conversation.see.empty': 'Répondre',
-  'detailed.comments.resume':
-    "Commentaire de {{authorFirstName}} {{authorLastName}} sur l'UE {{ue}} au semestre {{semester}} ({{date}})",
+  'detailed.comments.resume': "Commentaire sur l'UE {{ue}}",
+  'detailed.comments.semester': 'Semestre {{semester}}',
   'detailed.comments.updatedAt': 'Mis à jour le {{date}}',
-  'detailed.comments.resume.anonymous': "Commentaire anonyme sur l'UE {{ue}} au semestre {{semester}} ({{date}})",
   'detailed.comments.answers.answerTitle': 'Répondre dans ce fil de discussion',
   'detailed.comments.answers.answerButton': 'Envoyer',
   'detailed.comments.answers.answerEntry': 'Tapez votre réponse ici',
diff --git a/src/api/api.ts b/src/api/api.ts
index e1f6f7c..eab3be6 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -8,6 +8,7 @@ import { StatusCodes } from 'http-status-codes';
 export enum ResponseError {
   'not_json',
   'timeout',
+  'aborted',
   'unknown',
 }
 
@@ -65,8 +66,10 @@ export class ResponseHandler<T, R = undefined> {
       : () => R | void;
   }> = {};
   private readonly promise: Promise<R | void>;
+  public readonly abortController: AbortController;
 
-  constructor(rawResponse: Promise<APIResponse<T>>) {
+  constructor(rawResponse: Promise<APIResponse<T>>, abortController: AbortController) {
+    this.abortController = abortController;
     this.promise = rawResponse.then((response) => {
       if ('error' in response) {
         return this.handlers[response.error]
@@ -103,7 +106,7 @@ export class ResponseHandler<T, R = undefined> {
  * @param rawResponse The raw response from the API.
  */
 function formatResponse<T>(rawResponse: RawResponseType<T>): T {
-  if (typeof rawResponse === 'string' && !isNaN(Date.parse(rawResponse))) {
+  if (typeof rawResponse === 'string' && rawResponse.search(/^\d{4}(?:-\d{2}){2}T(?:\d{2}:){2}\d{2}\.\d{3}Z$/) === 0) {
     return new Date(rawResponse) as T;
   } else if (Array.isArray(rawResponse)) {
     return rawResponse.map(formatResponse) as T;
@@ -132,6 +135,7 @@ async function internalRequestAPI<RequestType>(
   timeoutMillis: number,
   version: string,
   isFile: true,
+  abortController: AbortController,
 ): Promise<APIResponse<Blob>>;
 async function internalRequestAPI<RequestType, ResponseType>(
   method: string,
@@ -140,6 +144,7 @@ async function internalRequestAPI<RequestType, ResponseType>(
   timeoutMillis: number,
   version: string,
   isFile: boolean,
+  abortController: AbortController,
 ): Promise<APIResponse<ResponseType>>;
 async function internalRequestAPI<RequestType, ResponseType>(
   method: string,
@@ -148,6 +153,7 @@ async function internalRequestAPI<RequestType, ResponseType>(
   timeoutMillis: number,
   version: string,
   isFile: boolean,
+  abortController: AbortController,
 ): Promise<APIResponse<ResponseType | Blob>> {
   // Generate headers
   const headers = new Headers();
@@ -155,7 +161,6 @@ async function internalRequestAPI<RequestType, ResponseType>(
   if (!isFile) headers.append('Content-Type', 'application/json');
 
   // Add timeout to the request
-  const abortController = new AbortController();
   const timeout = setTimeout(() => {
     abortController.abort();
   }, timeoutMillis);
@@ -194,6 +199,7 @@ async function internalRequestAPI<RequestType, ResponseType>(
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (error: any) {
+    if (error === 'query-update') return { error: ResponseError.aborted };
     if (error instanceof Error && error.name === 'AbortError') {
       console.error('Request timed out');
       return { error: ResponseError.timeout };
@@ -241,7 +247,11 @@ function requestAPI<RequestType, ResponseType>(
     isFile = false,
   }: { timeoutMillis?: number; version?: string; isFile?: boolean } = {},
 ): ResponseHandler<ResponseType> {
-  return new ResponseHandler(internalRequestAPI(method, route, body, timeoutMillis, version, isFile));
+  const abortController = new AbortController();
+  return new ResponseHandler(
+    internalRequestAPI(method, route, body, timeoutMillis, version, isFile, abortController),
+    abortController,
+  );
 }
 
 // Set the authorization header with the given token for next requests
diff --git a/src/api/pagination.hook.ts b/src/api/pagination.hook.ts
index f311ce0..9f8936f 100644
--- a/src/api/pagination.hook.ts
+++ b/src/api/pagination.hook.ts
@@ -7,6 +7,7 @@ type PaginationHook<T> = {
   total: number;
   updateFilters: (query: Record<string, string>) => void;
   fetchNextItems: () => void;
+  invalidateItems: () => void;
 };
 
 /**
@@ -15,6 +16,7 @@ type PaginationHook<T> = {
 export function usePaginationLoader<T>(path: string): PaginationHook<T> {
   const [items, setItems] = useState<T[]>([]);
   const [total, setTotal] = useState(0);
+  const [abortController, setAbortController] = useState<AbortController | null>(null);
   const searching = useRef(false);
   const lastSearch = useRef<Record<string, string>>({});
   const itemsPerPage = useRef(0);
@@ -22,44 +24,55 @@ export function usePaginationLoader<T>(path: string): PaginationHook<T> {
 
   const api = useAPI();
 
-  const updateItems = (query: Record<string, string>) => {
-    if (searching.current) return;
-    else searching.current = true;
-
+  const invalidateItems = () => {
+    searching.current = true;
     setItems([...Array(itemsPerPage.current || 20).fill(null)]);
+  };
+
+  const updateItems = (query: Record<string, string>) => {
     const { page, ...queryData } = query;
-    api
-      .get<Pagination<T>>(`${path}?${new URLSearchParams(query)}`)
-      .on('success', (body) => {
-        setTotal(body.itemCount);
-        setItems(body.items);
-        itemsPerPage.current = body.itemsPerPage;
-        lastSearch.current = queryData;
-        searching.current = false;
-        pageIndex.current = (page && Number(page)) || 1;
-      })
-      .on('error', () => (searching.current = false))
-      .on('failure', () => (searching.current = false));
+    if (abortController?.signal?.aborted === false) abortController.abort('query-update');
+    setAbortController(
+      api
+        .get<Pagination<T>>(`${path}?${new URLSearchParams(query)}`)
+        .on('success', (body) => {
+          setTotal(body.itemCount);
+          setItems(body.items);
+          itemsPerPage.current = body.itemsPerPage;
+          lastSearch.current = queryData;
+          searching.current = false;
+          pageIndex.current = (page && Number(page)) || 1;
+        })
+        .on('error', () => (searching.current = false))
+        .on('failure', () => (searching.current = false)).abortController,
+    );
   };
 
   const fetchNextPage = () => {
-    if (searching.current || items.length >= total) return;
-    else searching.current = true;
-
+    if (items.length >= total) return;
+    searching.current = true;
     const pendingItemCount = Math.min(itemsPerPage.current, total - items.length);
     setItems((prev) => [...prev, ...Array(pendingItemCount).fill(null)]);
-    api
-      .get<Pagination<T>>(
-        `${path}?${new URLSearchParams({ ...lastSearch.current, page: String(pageIndex.current + 1) })}`,
-      )
-      .on('success', (body) => {
-        pageIndex.current++;
-        setTotal(body.itemCount);
-        setItems((prev) => [...prev.slice(0, prev.length - pendingItemCount), ...body.items]);
-        searching.current = false;
-      })
-      .on('error', () => (searching.current = false))
-      .on('failure', () => (searching.current = false));
+    setAbortController(
+      api
+        .get<Pagination<T>>(
+          `${path}?${new URLSearchParams({ ...lastSearch.current, page: String(pageIndex.current + 1) })}`,
+        )
+        .on('success', (body) => {
+          pageIndex.current++;
+          setTotal(body.itemCount);
+          setItems((prev) => [...prev.slice(0, prev.length - pendingItemCount), ...body.items]);
+          searching.current = false;
+        })
+        .on('error', () => (searching.current = false))
+        .on('failure', () => (searching.current = false)).abortController,
+    );
+  };
+  return {
+    items,
+    total,
+    updateFilters: updateItems,
+    fetchNextItems: fetchNextPage,
+    invalidateItems,
   };
-  return { items, total, updateFilters: updateItems, fetchNextItems: fetchNextPage };
 }
diff --git a/src/api/ue/ue.interface.ts b/src/api/ue/ue.interface.ts
index 9e487ec..0010275 100644
--- a/src/api/ue/ue.interface.ts
+++ b/src/api/ue/ue.interface.ts
@@ -1,15 +1,10 @@
 export interface UE {
   code: string;
-  inscriptionCode: string;
   name: string;
   info: {
-    requirements: Array<{ code: string }>;
-    comment: string;
-    degree: string;
-    languages: string;
-    minors: string;
-    objectives: string;
-    program: string;
+    requirements: Array<string>;
+    languages: Array<string>;
+    minors: Array<string>;
   };
   credits: Array<{
     credits: number;
@@ -17,14 +12,14 @@ export interface UE {
       code: string;
       name: string;
     };
-  }>;
-  branchOption: Array<{
-    code: string;
-    name: string;
-    branch: {
+    branchOption: Array<{
       code: string;
       name: string;
-    };
+      branch: {
+        code: string;
+        name: string;
+      };
+    }>;
   }>;
   openSemester: Array<{
     code: string;
@@ -33,16 +28,51 @@ export interface UE {
   }>;
 }
 
-export interface DetailedUE extends UE {
-  validationRate: number;
-  workTime: {
-    cm: number;
-    td: number;
-    tp: number;
-    the: number;
-    project: number;
-    internship: number;
-  };
+export interface DetailedUE {
+  code: string;
+  creationYear: number;
+  updateYear: number;
+  ueofs: Array<{
+    name: string;
+    code: string;
+    siepId: string;
+    inscriptionCode: string;
+    credits: Array<{
+      credits: number;
+      category: {
+        code: string;
+        name: string;
+      };
+      branchOptions: Array<{
+        code: string;
+        name: string;
+        branch: {
+          code: string;
+          name: string;
+        };
+      }>;
+    }>;
+    info: {
+      objectives: string;
+      program: string;
+      language: string;
+      minors: Array<string>;
+      requirements: Array<string>;
+    };
+    openSemester: Array<{
+      code: string;
+      start: Date;
+      end: Date;
+    }>;
+    workTime: {
+      cm: number;
+      td: number;
+      tp: number;
+      the: number;
+      project: boolean;
+      internship: number;
+    };
+  }>;
   starVotes: {
     [criterionId: string]: number;
   };
diff --git a/src/app/ues/[code]/comments/[commentId]/page.tsx b/src/app/ues/[code]/comments/[commentId]/page.tsx
index aafdd31..548b2e3 100644
--- a/src/app/ues/[code]/comments/[commentId]/page.tsx
+++ b/src/app/ues/[code]/comments/[commentId]/page.tsx
@@ -14,6 +14,11 @@ import { editCommentReply } from '@/api/commentReply/editCommentReply';
 import { useAPI } from '@/api/api';
 import { sendCommentReply } from '@/api/commentReply/sendCommentReply';
 import { usePageSettings } from '@/module/pageSettings';
+import Enter from '@/icons/Enter';
+import User from '@/icons/User';
+import Comment from '@/icons/Comment';
+import Clock from '@/icons/Clock';
+import Link from '@/components/UI/Link';
 
 function CommentEditorFooter(originalComment: string, onUpdate: (text: string) => void, t: TFunction) {
   return function CommentEditorFooter({ text, disable }: { text: string; disable: () => void }) {
@@ -46,55 +51,72 @@ export default function CommentDetailsPage() {
   return (
     <div className={styles.page}>
       <h1>
-        {comment.isAnonymous
-          ? t('ues:detailed.comments.resume.anonymous', {
-              ue: ue.code,
-              semester: comment.semester.code,
-              date: comment.createdAt.toLocaleDateString(),
-            })
-          : t('ues:detailed.comments.resume', {
-              authorFirstName: comment.author.firstName,
-              authorLastName: comment.author.lastName,
-              ue: ue.code,
-              semester: comment.semester.code,
-              date: comment.createdAt.toLocaleDateString(),
-            })}
+        {t('ues:detailed.comments.resume', {
+          ue: ue.code,
+        })}
       </h1>
-      {comment.updatedAt && (
-        <p className={styles.updateDate}>
-          {t('ues:detailed.comments.updatedAt', { date: comment.updatedAt.toLocaleDateString() })}
-        </p>
-      )}
+      <div className={styles.meta}>
+        {!comment.isAnonymous && (
+          <div>
+            <User />
+            <Link href={`/users/${comment.author.id}`} noStyle>
+              {comment.author.firstName} {comment.author.lastName}
+            </Link>
+          </div>
+        )}
+        <div>
+          <Comment />
+          {t('ues:detailed.comments.semester', { semester: comment.semester.code })}
+        </div>
+        <div>
+          <Clock />
+          <div>
+            <div>{t('ues:detailed.comments.writtenDate', { date: comment.createdAt.toLocaleDateString() })}</div>
+            {comment.updatedAt && (
+              <div>{t('ues:detailed.comments.updatedAt', { date: comment.updatedAt.toLocaleDateString() })}</div>
+            )}
+          </div>
+        </div>
+      </div>
       <p className={styles.body}>{comment.body}</p>
       <div className={styles.comments}>
         {comment.answers.map((answer, i) => (
           <div key={answer.id} className={styles.comment}>
-            <p className={styles.author}>
-              {answer.author
-                ? `${answer.author.firstName} ${answer.author.lastName}`
-                : t('ues:detailed.comments.author.deleted')}
-            </p>
-            <p className={styles.date}>
-              {t('ues:detailed.comments.writtenDate', { date: answer.createdAt.toLocaleDateString() })}
-            </p>
-            <EditableText
-              className={styles.body}
-              text={answer.body}
-              EditingFooter={CommentEditorFooter(
-                answer.body,
-                async (body) => {
-                  const newAnswer = await editCommentReply(api, answer.id, body).toPromise();
-                  if (!newAnswer) return false;
-                  setComment({
-                    ...comment,
-                    answers: [...comment.answers.slice(0, i), newAnswer, ...comment.answers.slice(i + 1)],
-                  });
-                  return true;
-                },
-                t,
-              )}
-              enabled={answer.author.id === user.id}
-            />
+            <div className={styles.sideIcon}>
+              <Enter className={styles.answerIcon} />
+            </div>
+            <div>
+              <p className={styles.author}>
+                {answer.author ? (
+                  <Link href={`/users/${answer.author.id}`} noStyle>
+                    {answer.author.firstName} {answer.author.lastName}
+                  </Link>
+                ) : (
+                  t('ues:detailed.comments.author.deleted')
+                )}
+              </p>
+              <p className={styles.date}>
+                {t('ues:detailed.comments.writtenDate', { date: answer.createdAt.toLocaleDateString() })}
+              </p>
+              <EditableText
+                className={styles.body}
+                text={answer.body}
+                EditingFooter={CommentEditorFooter(
+                  answer.body,
+                  async (body) => {
+                    const newAnswer = await editCommentReply(api, answer.id, body).toPromise();
+                    if (!newAnswer) return false;
+                    setComment({
+                      ...comment,
+                      answers: [...comment.answers.slice(0, i), newAnswer, ...comment.answers.slice(i + 1)],
+                    });
+                    return true;
+                  },
+                  t,
+                )}
+                enabled={answer.author.id === user.id}
+              />
+            </div>
           </div>
         ))}
       </div>
diff --git a/src/app/ues/[code]/comments/[commentId]/style.module.scss b/src/app/ues/[code]/comments/[commentId]/style.module.scss
index 385db2c..71b5401 100644
--- a/src/app/ues/[code]/comments/[commentId]/style.module.scss
+++ b/src/app/ues/[code]/comments/[commentId]/style.module.scss
@@ -9,8 +9,19 @@
     color: $ung-light-blue;
   }
 
-  & > .body {
-    margin-top: 1.5rem;
+  .meta {
+    margin: 1rem 0;
+
+    svg {
+      width: 1em;
+      height: 1.1em;
+      vertical-align: bottom;
+    }
+    & > * {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: 5px;
+    }
   }
 
   .updateDate {
@@ -19,56 +30,61 @@
     margin-top: 0.3rem;
   }
 
-  .thoughts {
+  .answerTitle {
+    margin-top: 3rem;
+    margin-bottom: 1rem;
+    color: $ung-dark-grey;
+  }
+
+  p.body {
+    text-align: justify;
+  }
+
+  .comments {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 1rem;
+    padding: 1rem 0;
+
     .comment {
-      margin: 30px 0;
+      display: flex;
+      flex-flow: row nowrap;
+      gap: 1em;
+      padding: 0 1em;
+
+      .sideIcon {
+        width: 12px;
+        height: 12px;
+        margin-top: 0.5em;
+        padding: 5px;
+        box-sizing: content-box;
+        border-radius: 50%;
+        border: 1px solid $navigation-item-tooltip-color;
+
+        .answerIcon {
+          width: 12px;
+          height: 12px;
+          color: $ung-light-grey;
+          transform: scaleY(-1) translateY(25%);
+        }
+      }
 
       .author {
+        color: $ung-light-blue;
         font-weight: bold;
-        font-size: 1.2rem;
-        color: $ung-dark-grey;
-        margin-bottom: 0.2rem;
       }
 
       .date {
-        font-weight: bold;
+        font-style: italic;
         color: $ung-light-grey;
       }
 
       .body {
-        margin-left: 1rem;
-        margin-top: 0.5rem;
-        padding-left: 0.7rem;
-        position: relative;
-
-        &:after {
-          content: '';
-          position: absolute;
-          left: 0;
-          top: 0;
-          height: 100%;
-          width: 3px;
-          background: linear-gradient(90deg, $ung-dark-grey, rgba($ung-dark-grey, 0.5));
-        }
-
-        .button {
-          right: 0;
-        }
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-        //background-color: red;
+        text-align: justify;
       }
     }
   }
 
-  .answerTitle {
-    margin-top: 3rem;
-    margin-bottom: 1rem;
-    color: $ung-dark-grey;
-  }
-
   .input {
     width: 100%;
     flex-grow: 1;
@@ -84,4 +100,4 @@
       position: relative;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/ues/[code]/page.tsx b/src/app/ues/[code]/page.tsx
index 220bd47..40308b1 100644
--- a/src/app/ues/[code]/page.tsx
+++ b/src/app/ues/[code]/page.tsx
@@ -14,7 +14,7 @@ import doUERate from '@/api/ueRate/doUERate';
 import deleteUERate from '@/api/ueRate/deleteUERate';
 import StarRating from '@/components/StarRating';
 import TextArea from '@/components/UI/TextArea';
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import sendComment from '@/api/comment/sendComment';
 import { useAPI } from '@/api/api';
 import { usePageSettings } from '@/module/pageSettings';
@@ -22,13 +22,18 @@ import useAnnals from '@/api/annals/fetchAnnals';
 import useAnnalMetadata from '@/api/annals/fetchMetadata';
 import ExamList from '@/components/ues/ExamList';
 import ExamSender from '@/components/ues/ExamSender';
+import Tooltip from '@/components/UI/Tooltip';
+import Link from '@/components/UI/Link';
+import { UserType } from '@/module/user';
 
 export default function UEDetailsPage() {
   usePageSettings({});
   const params = useParams<{ code: string }>();
   const { t } = useAppTranslation();
   const logged = useAppSelector((state) => state.session.logged);
+  const type = useAppSelector((state) => state.user?.type);
   const [ue, refreshUE] = useUE(params.code as string);
+  const [ueofIndex, setUeofIndex] = useState(0);
   const criteria = useUERateCriteria();
   const [myRates, setMyRates] = useGetRate(params.code);
   const [writtingComment, setWrittingComment] = useState<string>('');
@@ -37,9 +42,7 @@ export default function UEDetailsPage() {
   const [isAnnalUploaderOpen, setAnnalUploaderOpen] = useState(false);
   const api = useAPI();
 
-  if (!ue || !criteria || (!myRates && logged)) {
-    return false;
-  }
+  if (!ue) return false;
 
   const onRate = async (criterionId: string, hasAlreadyRated: boolean, rate: number) => {
     const newRate = await doUERate(api, params.code, criterionId as string, rate).toPromise();
@@ -62,60 +65,181 @@ export default function UEDetailsPage() {
     refreshUE();
   };
 
+  const clipboardCopy = (text: string) => {
+    navigator.clipboard.writeText(text);
+  };
+
+  const setUeof = (ueof: number | string) => {
+    if (typeof ueof === 'number') setUeofIndex(ueof);
+  };
+
   return (
     <div className={styles.page}>
-      <h1>{ue.code}</h1>
-      <p>{ue.name}</p>
+      <div className={styles.tabs}>
+        {ue.ueofs.map((ueof, index) => (
+          <div className={styles.tab} data-active={index == ueofIndex} key={ueof.code} onClick={() => setUeof(index)}>
+            {ueof.code}
+          </div>
+        ))}
+      </div>
+      <div className={styles.header}>
+        <div>
+          <h1>{ue.code}</h1>
+          <p>{ue.ueofs[ueofIndex].name}</p>
+        </div>
+        <div className={styles.worktime}>
+          {ue.ueofs[ueofIndex].workTime ? (
+            <>
+              {ue.ueofs[ueofIndex].workTime.cm ? (
+                <div>
+                  <div>
+                    {ue.ueofs[ueofIndex].workTime.cm}
+                    <span>{t('ues:detailed.worktime.hour')}</span>
+                  </div>
+                  <Tooltip content={t('ues:detailed.worktime.cm.tooltip')}>
+                    <div>{t('ues:detailed.worktime.cm')}</div>
+                  </Tooltip>
+                </div>
+              ) : (
+                <></>
+              )}
+              {ue.ueofs[ueofIndex].workTime.td ? (
+                <div>
+                  <div>
+                    {ue.ueofs[ueofIndex].workTime.td}
+                    <span>{t('ues:detailed.worktime.hour')}</span>
+                  </div>
+                  <Tooltip content={t('ues:detailed.worktime.td.tooltip')}>
+                    <div>{t('ues:detailed.worktime.td')}</div>
+                  </Tooltip>
+                </div>
+              ) : (
+                <></>
+              )}
+              {ue.ueofs[ueofIndex].workTime.tp ? (
+                <div>
+                  <div>
+                    {ue.ueofs[ueofIndex].workTime.tp}
+                    <span>{t('ues:detailed.worktime.hour')}</span>
+                  </div>
+                  <Tooltip content={t('ues:detailed.worktime.tp.tooltip')}>
+                    <div>{t('ues:detailed.worktime.tp')}</div>
+                  </Tooltip>
+                </div>
+              ) : (
+                <></>
+              )}
+              {ue.ueofs[ueofIndex].workTime.the ? (
+                <div>
+                  <div>
+                    {ue.ueofs[ueofIndex].workTime.the}
+                    <span>{t('ues:detailed.worktime.hour')}</span>
+                  </div>
+                  <Tooltip content={t('ues:detailed.worktime.the.tooltip')}>
+                    <div>{t('ues:detailed.worktime.the')}</div>
+                  </Tooltip>
+                </div>
+              ) : (
+                <></>
+              )}
+              {ue.ueofs[ueofIndex].workTime.internship ? (
+                <div>
+                  <div>
+                    {ue.ueofs[ueofIndex].workTime.internship}
+                    <span>{t('ues:detailed.worktime.hour')}</span>
+                  </div>
+                  <div>{t('ues:detailed.worktime.internship')}</div>
+                </div>
+              ) : (
+                <></>
+              )}
+              {ue.ueofs[ueofIndex].workTime.project ? (
+                <div>
+                  <div>{Number(ue.ueofs[ueofIndex].workTime.project)}</div>
+                  <div>{t('ues:detailed.worktime.project')}</div>
+                </div>
+              ) : (
+                <></>
+              )}
+            </>
+          ) : (
+            t('ues:detailed.noWorkingTimeInfo')
+          )}
+        </div>
+      </div>
       <div className={styles.divider} />
       {!isAnnalUploaderOpen ? (
         <>
           <div className={styles.info}>
-            <div className={styles.generalInfo}>
-              <h2>Informations générales</h2>
-              <p>
-                {t('ues:detailed.description')} : {ue.info.comment}
-                <br />
-                {t('ues:detailed.program')} : {ue.info.program}
-                <br />
-                {t('ues:detailed.objectives')} : {ue.info.objectives}
-                <br />
-                {t('ues:detailed.taughtIn')} : {ue.info.languages}
-                <br />
-                {t('ues:detailed.minors')} : {ue.info.minors}
-                <br />
-                {t('ues:detailed.credits')} :{' '}
-                {ue.credits.map((credits) => `${credits.credits}${credits.category.code}`).join(', ')}
-              </p>
+            <div>{t('ues:detailed.program')}</div>
+            <div>{ue.ueofs[ueofIndex].info.program}</div>
+            <div>{t('ues:detailed.objectives')}</div>
+            <div>{ue.ueofs[ueofIndex].info.objectives}</div>
+            <div>{t('ues:detailed.taughtIn')}</div>
+            <div>{ue.ueofs[ueofIndex].info.language}</div>
+            <div>{t('ues:detailed.minors')}</div>
+            <div className={(!ue.ueofs[ueofIndex].info.minors.length && styles.empty) || ''}>
+              {ue.ueofs[ueofIndex].info.minors.length
+                ? ue.ueofs[ueofIndex].info.minors.join(', ')
+                : t('ues:detailed.minors.none')}
             </div>
-            <div className={styles.workTime}>
-              <h2>{t('ues:detailed.workTime')}</h2>
-              {ue.workTime ? (
-                <>
-                  <p>CM : {ue.workTime.cm}</p>
-                  <p>TD : {ue.workTime.td}</p>
-                  <p>TP : {ue.workTime.tp}</p>
-                  <p>
-                    {t('ues:detailed.workTime.project')} : {ue.workTime.project}
-                  </p>
-                  <p>THE : {ue.workTime.the}</p>
-                </>
-              ) : (
-                t('ues:detailed.noWorkingTimeInfo')
-              )}
+            <div>{t('ues:detailed.credits')}</div>
+            <div>
+              {Array.from(
+                new Set(ue.ueofs[ueofIndex].credits.map((credits) => `${credits.credits} ${credits.category.code}`)),
+              ).join(', ')}
             </div>
-            <div className={styles.takeUEInfo}>
-              <h2>Information pour faire l'UE</h2>
-              {t('ues:detailed.semester')} :{' '}
-              {ue.openSemester.find((semester) => new Date(semester.start).getTime() > Date.now())?.code ??
-                t('ues:detailed.semester.none')}{' '}
-              <br />
-              {t('ues:detailed.inscriptionCode')} : {ue.inscriptionCode} <br />
-              {t('ues:detailed.branchOptions')} : {ue.branchOption.map((branchOption) => branchOption.code).toString()}{' '}
-              <br />
-              {t('ues:detailed.requirements')} :{' '}
-              {ue.info.requirements.length === 0
-                ? t('ues:detailed.requirements.none')
-                : ue.info.requirements.toString()}
+          </div>
+          <div className={styles.takeUEInfo}>
+            <h2>{t('ues:detailed.dfpdata')}</h2>
+            <div className={styles.info}>
+              <div>{t('ues:detailed.semester')}</div>
+              <div>
+                {ue.ueofs[ueofIndex].openSemester
+                  .filter((semester) => new Date(semester.end).getTime() > Date.now())
+                  .map((semester) => semester.code)
+                  .join(', ') || t('ues:detailed.semester.none')}{' '}
+              </div>
+              <div>{t('ues:detailed.siepLink')}</div>
+              <div>
+                <Link
+                  external={true}
+                  href={`https://siep.utt.fr/faces/AccesDirectNonAuth.xhtml?ir=942854&io=${ue.ueofs[ueofIndex].siepId}`}>
+                  {ue.ueofs[ueofIndex].code}
+                </Link>
+              </div>
+              <div>{t('ues:detailed.inscriptionCode')}</div>
+              <div className={ue.ueofs[ueofIndex].inscriptionCode ? '' : styles.empty}>
+                {ue.ueofs[ueofIndex].inscriptionCode ? (
+                  <Tooltip content={t('ues:detailed.inscriptionCode.copy')}>
+                    <span
+                      className={styles.clipboardCopy}
+                      onClick={() => clipboardCopy(ue.ueofs[ueofIndex].inscriptionCode)}>
+                      {ue.ueofs[ueofIndex].inscriptionCode}
+                    </span>
+                  </Tooltip>
+                ) : (
+                  t('ues:detailed.inscriptionCode.empty')
+                )}
+              </div>
+              <div>{t('ues:detailed.branchOptions')}</div>
+              <div>
+                {ue.ueofs[ueofIndex].credits
+                  .flatMap((credit) => credit.branchOptions.map((branchOption) => branchOption.code))
+                  .join(', ')}
+              </div>
+              <div>{t('ues:detailed.requirements')}</div>
+              <div>
+                {ue.ueofs[ueofIndex].info.requirements.length === 0
+                  ? t('ues:detailed.requirements.none')
+                  : ue.ueofs[ueofIndex].info.requirements
+                      .map((req) => (
+                        <Link key={req} href={`/ues/${req}`}>
+                          {req}
+                        </Link>
+                      ))
+                      .reduce((prev, curr) => (prev.length ? [...prev, ', ', curr] : [curr]), [] as ReactNode[])}
+              </div>
             </div>
           </div>
           <ExamList
@@ -124,48 +248,54 @@ export default function UEDetailsPage() {
             annalSemesters={annalSemesters}
             annalTypes={annalTypes}
           />
-          <div className={styles.thoughts}>
-            <h2>Avis des étudiants</h2>
-            <div className={styles.rates}>
-              {Object.entries(ue.starVotes).map(([id, value]) => {
-                const myRate = myRates?.find((rate) => rate.criterionId === id);
-                return (
-                  <div key={id} className={styles.criterion}>
-                    <h3>{criteria.find((criterion): criterion is UERateCriterion => criterion.id === id)?.name}</h3>
-                    <StarRating stars={5} value={value} />
-                    {myRates && (
-                      <>
-                        <StarRating
-                          stars={5}
-                          value={myRate?.value ?? 0}
-                          onClick={(rate) => onRate(id as string, !!myRate, rate)}
-                        />
-                        {myRate && (
-                          <Button className={styles.deleteRate} onClick={() => deleteRate(id as string)}>
-                            Supprimer mon avis
-                          </Button>
-                        )}
-                      </>
-                    )}
+          {logged && (type === UserType.STUDENT || type === UserType.FORMER_STUDENT) && (
+            <div className={styles.thoughts}>
+              <h2>{t('ues:detailed.rates.title')}</h2>
+              <div className={[styles.rates, !criteria && styles.error].filter((c) => c).join(' ')}>
+                {criteria && ue.starVotes
+                  ? Object.entries(ue.starVotes).map(([id, value]) => {
+                      const myRate = myRates?.find((rate) => rate.criterionId === id);
+                      return (
+                        <div key={id} className={styles.criterion}>
+                          <h3>
+                            {criteria.find((criterion): criterion is UERateCriterion => criterion.id === id)?.name}
+                          </h3>
+                          <StarRating stars={5} value={value} />
+                          {myRates && (
+                            <>
+                              <StarRating
+                                stars={5}
+                                value={myRate?.value ?? 0}
+                                onClick={(rate) => onRate(id as string, !!myRate, rate)}
+                              />
+                              {myRate && (
+                                <Button className={styles.deleteRate} onClick={() => deleteRate(id as string)}>
+                                  {t('ues:detailed.rates.delete')}
+                                </Button>
+                              )}
+                            </>
+                          )}
+                        </div>
+                      );
+                    })
+                  : t('ues:detailed.rates.error')}
+              </div>
+              {logged && (type === UserType.STUDENT || type === UserType.FORMER_STUDENT) ? (
+                <>
+                  <div className={styles.writeComment}>
+                    {t('ues:detailed.comments.write')}
+                    <TextArea value={writtingComment} onChange={setWrittingComment} />
+                    <Button onClick={() => sendComment(api, ue.code, writtingComment, false)}>
+                      {t('ues:detailed.comments.write.send')}
+                    </Button>
                   </div>
-                );
-              })}
+                  <Comments code={params.code} />
+                </>
+              ) : (
+                t('ues:detailed.comments.loginRequired')
+              )}
             </div>
-            {logged ? (
-              <>
-                <div className={styles.writeComment}>
-                  {t('ues:detailed.comments.write')}
-                  <TextArea value={writtingComment} onChange={setWrittingComment} />
-                  <Button onClick={() => sendComment(api, ue.code, writtingComment, false)}>
-                    {t('ues:detailed.comments.write.send')}
-                  </Button>
-                </div>
-                <Comments code={params.code as string} />
-              </>
-            ) : (
-              t('ues:detailed.comments.loginRequired')
-            )}
-          </div>
+          )}
         </>
       ) : (
         <ExamSender
diff --git a/src/app/ues/[code]/style.module.scss b/src/app/ues/[code]/style.module.scss
index 7438273..1e4fa6b 100644
--- a/src/app/ues/[code]/style.module.scss
+++ b/src/app/ues/[code]/style.module.scss
@@ -1,6 +1,50 @@
 @import '@/variables';
 
 .page {
+  margin-top: 2em;
+
+  .header {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 1em;
+    justify-content: space-between;
+
+    .worktime {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: 0.5rem;
+
+      & > * {
+        width: 4rem;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: center;
+        align-items: center;
+        font-weight: bold;
+
+        & > :nth-child(1) {
+          font-size: 2em;
+
+          span {
+            font-size: 0.5em;
+          }
+        }
+
+        & > :nth-child(2) {
+          text-transform: uppercase;
+          color: $ung-light-grey;
+          text-align: center;
+        }
+      }
+
+      .noWorkingTimeInfo {
+        width: auto;
+        font-style: italic;
+        color: $ung-light-grey;
+      }
+    }
+  }
+
   h1 {
     color: $ung-light-blue;
     font-size: 2.5rem;
@@ -13,6 +57,51 @@
     font-size: 1.2rem;
   }
 
+  h1 + p {
+    font-size: 1.8rem;
+  }
+
+  .tabs {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 0;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: stretch;
+    margin: 0 0 2px 0;
+    justify-content: stretch;
+    user-select: none;
+    border-bottom: 2px solid $ung-dark-grey;
+
+    .tab {
+      flex: 1 0 200px;
+      text-align: center;
+      padding: 10px 8px 8px;
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+      border-bottom: 4px solid $ung-dark-grey;
+      background-color: $ung-light-grey;
+      color: $light-gray;
+
+      &[data-active='true'] {
+        background-color: $ung-light-blue;
+        border-bottom-color: $light-gray;
+        &::before {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          border-left: 6px solid transparent;
+          border-bottom: 5px solid $light-gray;
+          border-right: 6px solid transparent;
+        }
+      }
+    }
+  }
+
   .divider {
     width: 40%;
     height: 3px;
@@ -20,28 +109,47 @@
     margin-top: 10px;
   }
 
+  .info,
+  .takeUEInfo {
+    padding: 1rem 0;
+    white-space: pre-line;
+  }
+
+  .takeUEInfo .info {
+    grid-template-columns: 20ch 1fr;
+
+    .clipboardCopy {
+      cursor: pointer;
+      display: inline-block;
+    }
+  }
+
   .info {
-    display: flex;
-    gap: 2rem;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin: 5rem 0;
-
-    .generalInfo,
-    .workTime,
-    .takeUEInfo {
-      border: $ung-dark-grey 3px solid;
-      border-radius: 20px;
-      padding: 3rem;
-
-      & > h2 {
-        text-align: center;
-        margin-bottom: 0.5rem;
-      }
+    display: grid;
+    grid-template-columns: 15ch 1fr;
+    gap: 8px;
+
+    .empty {
+      color: $ung-light-grey;
+      font-style: italic;
+    }
+
+    & > :nth-child(2n + 1) {
+      font-weight: bold;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    & > :nth-child(2n) {
+      text-align: justify;
     }
   }
 
   .thoughts {
+    position: relative;
+    padding: 2rem 0;
+
     & > h2 {
       margin-bottom: 1rem;
       color: $ung-light-blue;
@@ -53,6 +161,12 @@
       gap: 10%;
       justify-content: center;
 
+      &.error {
+        display: block;
+        font-style: italic;
+        color: $ung-light-grey;
+      }
+
       .criterion {
         margin-top: 30px;
 
diff --git a/src/app/ues/page.tsx b/src/app/ues/page.tsx
index b856c33..214a230 100644
--- a/src/app/ues/page.tsx
+++ b/src/app/ues/page.tsx
@@ -12,6 +12,7 @@ import { Branch } from '@/api/branch/branch.interface';
 import { useBranches, useCreditCategories } from '@/module/constantData';
 import { useMemo } from 'react';
 import { CreditCategory } from '@/api/credit/credit.interface';
+import Tooltip from '@/components/UI/Tooltip';
 
 /**
  * The different filters that exist.
@@ -80,7 +81,13 @@ function useUeFilters(creditCategories: CreditCategory[] | null, branches: Branc
 export default function Page() {
   usePageSettings({});
   const { t } = useAppTranslation();
-  const { items: ues, total: totalUesCount, updateFilters: updateUEs, fetchNextItems } = useUEs();
+  const {
+    items: ues,
+    total: totalUesCount,
+    updateFilters: updateUEs,
+    fetchNextItems,
+    invalidateItems: invalidateItems,
+  } = useUEs();
   const branches = useBranches();
   const creditCategories = useCreditCategories();
   const ueFilters = useUeFilters(creditCategories, branches);
@@ -89,7 +96,11 @@ export default function Page() {
     <div className={styles.page}>
       <h1>{t('ues:browser')}</h1>
       <div className={styles.content}>
-        <FilteredSearch<FilterNames, UEFiltersType> filtersData={ueFilters} updateSearch={updateUEs} />
+        <FilteredSearch<FilterNames, UEFiltersType>
+          filtersData={ueFilters}
+          updateSearch={updateUEs}
+          invalidateItems={invalidateItems}
+        />
         <div className={styles.results}>
           <ResultsList
             data={ues}
@@ -97,8 +108,55 @@ export default function Page() {
             baseRedirectUrl={'/ues'}
             onEndReached={fetchNextItems}
             itemFactory={({ item }) => (
-              <div className={!item ? styles.glimmer : ''}>
-                <h2>{item?.code}</h2>
+              <div className={!item ? styles.glimmer : styles.container}>
+                <div className={styles.headerLayout}>
+                  <h2>{item?.code}</h2>
+                  <div className={styles.metaContainer}>
+                    <div className={styles.sideData}>
+                      <div className={styles.credits}>
+                        <span className={styles.label}>{t('ues:overview.credits')}</span>
+                        {item?.credits
+                          ?.sort((a, b) => a.category.name > b.category.name)
+                          .map((credit, i) => (
+                            <div key={`${credit.category.code}-${i}`}>
+                              {credit.credits}
+                              <span className={styles.categoryLabel}>
+                                <Tooltip position="below" content={credit.category.name}>
+                                  {credit.category.code}
+                                </Tooltip>
+                              </span>
+                            </div>
+                          ))}
+                      </div>
+                      <div className={styles.languages}>
+                        <span className={[styles.taughtIn, styles.label].join(' ')}>{t('ues:overview.taughtIn')}</span>
+                        {item?.info.languages.map((language) => <span key={language}>{language}</span>)}
+                      </div>
+                    </div>
+                    <div className={styles.sideData}>
+                      {item?.info.minors.length ? (
+                        <div className={styles.minors}>
+                          <span className={[styles.label, styles.categoryLabel].join(' ')}>
+                            {t('ues:overview.minors')}
+                          </span>
+                          {item?.info.minors.map((minor) => <span key={minor}>{minor}</span>)}
+                        </div>
+                      ) : (
+                        ''
+                      )}
+                      {item?.info?.requirements?.length ? (
+                        <div className={[styles.requirements, styles.categoryLabel].join(' ')}>
+                          <Tooltip position="left" content={item?.info?.requirements?.join(', ')}>
+                            {item?.info?.requirements?.length}{' '}
+                            <span className={styles.label}>{t('ues:overview.requirements')}</span>
+                          </Tooltip>
+                        </div>
+                      ) : (
+                        ''
+                      )}
+                    </div>
+                  </div>
+                </div>
                 <p>{item?.name}</p>
               </div>
             )}
diff --git a/src/app/ues/style.module.scss b/src/app/ues/style.module.scss
index a37de5b..eb01039 100644
--- a/src/app/ues/style.module.scss
+++ b/src/app/ues/style.module.scss
@@ -25,13 +25,79 @@
       flex-grow: 1;
       height: 100%;
 
+      .container {
+        width: 100%;
+      }
+
+      .headerLayout,
+      .glimmer {
+        width: 100%;
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-between;
+
+        .metaContainer {
+          display: flex;
+          flex-flow: column wrap;
+          align-items: end;
+
+          .sideData {
+            width: 100%;
+            display: flex;
+            gap: 1ch;
+            flex-flow: row wrap;
+            justify-content: end;
+          }
+
+          .label {
+            text-transform: uppercase;
+            font-size: 0.8em;
+            color: $ung-light-grey;
+          }
+
+          .credits,
+          .languages,
+          .minors,
+          .requirements {
+            display: flex;
+            flex-flow: row wrap;
+            gap: 0.5ch;
+            align-items: baseline;
+
+            .categoryLabel {
+              margin-left: 0.2ch;
+            }
+          }
+        }
+      }
+
       .glimmer {
         p,
         h2 {
           @extend .glimmer-animated;
+          &:nth-child(1) {
+            width: 4.5ch;
+          }
           &:nth-child(2) {
-            width: 24ch;
+            width: calc(100% - 12ch);
+          }
+        }
+        .sideData {
+          @extend .glimmer-animated;
+          &:nth-child(1) {
+            width: 15ch;
           }
+          &:nth-child(2) {
+            width: 10ch;
+          }
+
+          > * {
+            visibility: hidden;
+          }
+        }
+        p {
+          height: 1em;
+          background-size: 115% 1em;
         }
         h2 {
           height: 1.02em;
diff --git a/src/components/UI/Link.module.scss b/src/components/UI/Link.module.scss
index 81d6285..11a80a0 100644
--- a/src/components/UI/Link.module.scss
+++ b/src/components/UI/Link.module.scss
@@ -1,5 +1,12 @@
 @import '@/variables';
 
+.link .icon {
+  display: inline-block;
+  position: absolute;
+  width: 0.8em;
+  vertical-align: super;
+}
+
 .link.noStyle {
   color: inherit;
   text-decoration: none;
diff --git a/src/components/UI/Link.tsx b/src/components/UI/Link.tsx
index 409b7aa..80c6ba6 100644
--- a/src/components/UI/Link.tsx
+++ b/src/components/UI/Link.tsx
@@ -2,21 +2,28 @@ import styles from './Link.module.scss';
 import { ReactNode } from 'react';
 import ReactLink from 'next/link';
 import { Url } from 'next/dist/shared/lib/router/router';
+import ExternalLink from '@/icons/ExternalLink';
 
 export default function Link({
   children,
   href,
   className = '',
   noStyle = false,
+  external = false,
 }: {
   children?: ReactNode;
   href: Url;
   className?: string;
   noStyle?: boolean;
+  external?: boolean;
 }) {
   return (
-    <ReactLink href={href} className={`${styles.link} ${className} ${noStyle ? styles.noStyle : ''}`}>
+    <ReactLink
+      href={href}
+      className={`${styles.link} ${className} ${noStyle ? styles.noStyle : ''}`}
+      target={external ? '_blank' : ''}>
       <span>{children}</span>
+      {external ? <ExternalLink className={styles.icon} /> : <></>}
     </ReactLink>
   );
 }
diff --git a/src/components/UI/Tooltip.module.scss b/src/components/UI/Tooltip.module.scss
index 83267a7..eae8ad6 100644
--- a/src/components/UI/Tooltip.module.scss
+++ b/src/components/UI/Tooltip.module.scss
@@ -3,14 +3,12 @@
 .tooltipContainer {
   position: relative;
   display: inline-block;
+  cursor: help;
 
   & > .tooltip {
     display: none;
     background-color: $ung-dark-grey;
     position: absolute;
-    left: calc(100% + 6px);
-    top: 0.65em;
-    transform: translateY(-50%);
     border-radius: 4px;
     padding: 1px 4px;
     text-transform: uppercase;
@@ -18,18 +16,68 @@
     font-weight: bold;
     color: $light-gray;
     text-wrap: nowrap;
+    z-index: 100;
+    pointer-events: none;
+
+    &.left {
+      right: calc(100% + 6px);
+      &::before {
+        right: -6px;
+        top: 50%;
+        transform: translateY(-50%);
+        border-top: 5px solid transparent;
+        border-left: 7px solid $ung-dark-grey;
+        border-bottom: 5px solid transparent;
+      }
+    }
+
+    &.above {
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+      &::before {
+        bottom: -6px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-left: 5px solid transparent;
+        border-top: 7px solid $ung-dark-grey;
+        border-right: 5px solid transparent;
+      }
+    }
+
+    &.right {
+      left: calc(100% + 6px);
+      top: 0.65em;
+      transform: translateY(-50%);
+      &::before {
+        left: -6px;
+        top: 50%;
+        transform: translateY(-50%);
+        border-top: 5px solid transparent;
+        border-right: 7px solid $ung-dark-grey;
+        border-bottom: 5px solid transparent;
+      }
+    }
+
+    &.below {
+      bottom: -1.65em;
+      left: 50%;
+      transform: translateX(-50%);
+      &::before {
+        top: -6px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-left: 5px solid transparent;
+        border-bottom: 7px solid $ung-dark-grey;
+        border-right: 5px solid transparent;
+      }
+    }
 
     &::before {
       content: '';
       width: 0;
       height: 0;
-      border-top: 5px solid transparent;
-      border-right: 7px solid $ung-dark-grey;
-      border-bottom: 5px solid transparent;
-      left: -6px;
       position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
     }
   }
 
diff --git a/src/components/UI/Tooltip.tsx b/src/components/UI/Tooltip.tsx
index b5f1fcd..3fdc5af 100644
--- a/src/components/UI/Tooltip.tsx
+++ b/src/components/UI/Tooltip.tsx
@@ -1,19 +1,23 @@
 import styles from './Tooltip.module.scss';
 import { ReactNode } from 'react';
 
+export type TooltipPosition = 'left' | 'above' | 'right' | 'below';
+
 export default function Tooltip({
   children = false,
   className = '',
   content = '',
+  position = 'right',
 }: {
   className?: string | string[];
   content: string;
   children: ReactNode;
+  position?: TooltipPosition;
 }) {
   return (
     <div className={[styles.tooltipContainer, className].flat().join(' ')}>
       {children}
-      <div className={styles.tooltip}>{content}</div>
+      <div className={[styles.tooltip, styles[position]].join(' ')}>{content}</div>
     </div>
   );
 }
diff --git a/src/components/filteredSearch/FilteredSearch.tsx b/src/components/filteredSearch/FilteredSearch.tsx
index ea86f4c..c156d0a 100644
--- a/src/components/filteredSearch/FilteredSearch.tsx
+++ b/src/components/filteredSearch/FilteredSearch.tsx
@@ -103,9 +103,11 @@ export default function FilteredSearch<
 >({
   filtersData,
   updateSearch,
+  invalidateItems,
 }: {
   filtersData: FiltersDataType<FilterNames, FiltersType>;
   updateSearch: (filters: Record<string, string>) => void;
+  invalidateItems: () => void;
 }) {
   // The filters currently used.
   const [filters, _setFilters] = useState<Array<FilterInstance<FilterNames, FiltersType>>>(
@@ -135,9 +137,10 @@ export default function FilteredSearch<
     });
   }, [searchParams]);
 
-  // When filters are modified, update the search after 1 second.
+  // When filters are modified, update the search after 1/3 second.
   useEffect(() => {
     const now = Date.now();
+    invalidateItems();
     switch (updateType.current) {
       case FilterUpdateType.Instant:
         lastUpdate.value = now;
@@ -149,7 +152,7 @@ export default function FilteredSearch<
           if (lastUpdate.value === now) {
             callUpdateSearch();
           }
-        }, 300);
+        }, 333);
         break;
     }
     updateType.current = FilterUpdateType.NoUpdate;
diff --git a/src/icons/Comment.tsx b/src/icons/Comment.tsx
new file mode 100644
index 0000000..b670680
--- /dev/null
+++ b/src/icons/Comment.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Comment() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="none">
+      <path d="M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H11.999C11.9997 21 12.0003 21 12.001 21H19C20.1046 21 21 20.1046 21 19V12.001C21 12.0003 21 11.9997 21 11.999V5C21 3.89543 20.1046 3 19 3H5ZM19 11.5858L11.5858 19H5V5H19V11.5858ZM14.4142 19L19 14.4142V19H14.4142Z"></path>
+    </svg>
+  );
+}
diff --git a/src/icons/Enter.tsx b/src/icons/Enter.tsx
new file mode 100644
index 0000000..c70f07d
--- /dev/null
+++ b/src/icons/Enter.tsx
@@ -0,0 +1,14 @@
+export default function Enter({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="currentColor" viewBox="0 0 24 24" stroke="none">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M3 14C3 13.4477 3.44772 13 4 13L16 13C17.6569 13 19 11.6569 19 10L19 6C19 5.44771 19.4477 5 20 5C20.5523 5 21 5.44771 21 6L21 10C21 12.7614 18.7614 15 16 15L4 15C3.44772 15 3 14.5523 3 14Z"></path>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M3.29289 14.7071C2.90237 14.3166 2.90237 13.6834 3.29289 13.2929L7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289C9.09763 9.68342 9.09763 10.3166 8.70711 10.7071L5.41421 14L8.70711 17.2929C9.09763 17.6834 9.09763 18.3166 8.70711 18.7071C8.31658 19.0976 7.68342 19.0976 7.29289 18.7071L3.29289 14.7071Z"></path>
+    </svg>
+  );
+}
diff --git a/src/icons/ExternalLink.tsx b/src/icons/ExternalLink.tsx
new file mode 100644
index 0000000..10418ed
--- /dev/null
+++ b/src/icons/ExternalLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function ExternalLink({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path d="M14 5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V6.414l-9.293 9.293a1 1 0 0 1-1.414-1.414L17.586 5H14zM3 7a2 2 0 0 1 2-2h5a1 1 0 1 1 0 2H5v12h12v-5a1 1 0 1 1 2 0v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" />
+    </svg>
+  );
+}
diff --git a/src/icons/index.ts b/src/icons/index.ts
index 559fcdf..2bc89cb 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -21,6 +21,9 @@ import CircleCheck from './CircleCheck';
 import CircleWarning from './CircleWarning';
 import Clock from './Clock';
 import Rotate from './Rotate';
+import Enter from './Enter';
+import Comment from './Comment';
+import ExternalLink from './ExternalLink';
 
 const Icons = {
   Book,
@@ -29,6 +32,9 @@ const Icons = {
   CircleWarning,
   Clock,
   Collapse,
+  Comment,
+  Enter,
+  ExternalLink,
   Home,
   Language,
   LeftArrow,