Index: reactapp/src/App.js
===================================================================
--- reactapp/src/App.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
+++ reactapp/src/App.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
@@ -6,4 +6,7 @@
 import Home from "./Pages/Home";
 import UserDashboard from "./Pages/UserDashboard";
+import Subject from "./Pages/Subject";
+import University from "./Pages/University";
+import Faculty from "./Pages/Faculty";
 import { useEffect, useState, useMemo } from "react";
 import AuthApi from "./api/AuthApi";
@@ -11,4 +14,5 @@
 import axios from "./api/axios";
 import JSOG from "jsog";
+import NotFound from "./Pages/NotFound";
 
 export default function App() {
@@ -77,4 +81,7 @@
               />
             </Route>
+            <Route path="university/:universityId" element={<University />} />
+            <Route path="faculty/:facultyId" element={<Faculty />} />
+            <Route path="subject/:subjectId" element={<Subject />} />
             <Route path="search" element={<SearchResults />}></Route>
             <Route
@@ -87,4 +94,5 @@
             ></Route>
           </Route>
+          <Route path="*" element={<NotFound />} />
         </Routes>
       </BrowserRouter>
Index: reactapp/src/Components/Styled/EntityList.style.js
===================================================================
--- reactapp/src/Components/Styled/EntityList.style.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
+++ reactapp/src/Components/Styled/EntityList.style.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+export const EntityUl = styled.ul`
+  list-style: none;
+  padding-left: 5px;
+`;
+
+export const EntityLi = styled.li`
+  padding: 10px;
+  margin: 15px 0px;
+  font-size: 18px;
+  font-weight: bold;
+  background-color: ${(props) => props.bgcolor};
+  box-shadow: 2px 2px 5px #aaaaaa;
+  position: relative;
+`;
+
+export const EntityParam = styled.p`
+  position: absolute;
+  right: 30px;
+  top: 10px;
+  font-style: italic;
+  font-size: 16px;
+`;
+
+export const EntityTypeSelector = styled.div`
+  box-shadow: ${(props) => props.boxshadow};
+  width: 50%;
+  height: 50px;
+  opacity: 0.6;
+  margin: 15px 10px;
+  margin-bottom: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: bold;
+  background-color: ${(props) => props.backgroundcolor};
+  color: ${(props) => props.color};
+  letter-spacing: 2px;
+  transition: 0.4s;
+  &:hover {
+    box-shadow: ${(props) => props.boxshadowhover};
+    font-weight: bold;
+    cursor: ${(props) => props.cursor};
+    opacity: ${(props) => props.opacityhover};
+  }
+`;
Index: reactapp/src/Components/Styled/Main.style.js
===================================================================
--- reactapp/src/Components/Styled/Main.style.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
+++ reactapp/src/Components/Styled/Main.style.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
@@ -22,2 +22,7 @@
   color: black;
 `;
+
+export const CurrentPageNav = styled.div`
+  font-style: italic;
+  font-size: 14px;
+`;
Index: reactapp/src/Components/Styled/OpinionCard.style.js
===================================================================
--- reactapp/src/Components/Styled/OpinionCard.style.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
+++ reactapp/src/Components/Styled/OpinionCard.style.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
@@ -8,5 +8,5 @@
   margin-bottom: 20px;
   padding: 10px;
-  border: 1px solid black;
+  box-shadow: 2px 2px 10px #aaaaaa;
 `;
 
Index: reactapp/src/Components/Styled/ProfessorCard.style.js
===================================================================
--- reactapp/src/Components/Styled/ProfessorCard.style.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
+++ reactapp/src/Components/Styled/ProfessorCard.style.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
@@ -2,9 +2,9 @@
 
 export const ProfessorCard = styled.div`
-  background-color: papayawhip;
+  background-color: cornsilk;
   width: auto;
   padding: 10px;
   margin-bottom: 30px;
-  margin-top: 140px;
+  margin-top: 40px;
 `;
 
Index: reactapp/src/Components/Styled/SubjectsAccordion.style..js
===================================================================
--- reactapp/src/Components/Styled/SubjectsAccordion.style..js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
+++ reactapp/src/Components/Styled/SubjectsAccordion.style..js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+export const SubjectsAccordionDiv = styled.div`
+  height: ${(props) => props.height};
+  opacity: ${(props) => props.opacity};
+  transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
+  margin-left: 20px;
+`;
+
+export const AccordionTitle = styled.div`
+  padding: 10px;
+  margin: 15px 0px;
+  font-size: 18px;
+  font-weight: bold;
+  background-color: cornsilk;
+  box-shadow: 2px 2px 5px #aaaaaa;
+  position: relative;
+  cursor: pointer;
+`;
+
+export const OpenAccordionSymbol = styled.span`
+  font-size: 24px;
+  position: absolute;
+  right: 15px;
+  bottom: 7px;
+  color: grey;
+`;
Index: reactapp/src/Components/SubjectsAccordion.js
===================================================================
--- reactapp/src/Components/SubjectsAccordion.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
+++ reactapp/src/Components/SubjectsAccordion.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import {
+  AccordionTitle,
+  SubjectsAccordionDiv,
+  OpenAccordionSymbol,
+} from "./Styled/SubjectsAccordion.style.";
+import { EntityLi, EntityUl, EntityParam } from "./Styled/EntityList.style";
+
+const SubjectsAccordion = (props) => {
+  const [height, setHeight] = useState("0");
+  const [opacity, setOpacity] = useState(0);
+  const handleClick = () => {
+    if (height === "0") {
+      setHeight("auto");
+      setOpacity(1);
+    } else {
+      setHeight("0");
+      setOpacity(0);
+    }
+  };
+  return (
+    <div onClick={() => handleClick()}>
+      <AccordionTitle>
+        {props.title.studyProgrammeName} ({props.title.cycle}. циклус)
+        <OpenAccordionSymbol>&#9662;</OpenAccordionSymbol>
+      </AccordionTitle>
+      <SubjectsAccordionDiv height={height} opacity={opacity}>
+        <EntityUl>
+          {props.content.map((item) => {
+            let totalPosts = item.threads.length;
+            return (
+              <EntityLi key={item.subjectName} bgcolor="cornsilk">
+                <a href={"/subject/" + item.subjectId}>{item.subjectName}</a>
+                <EntityParam>
+                  {totalPosts !== 1 ? (
+                    totalPosts !== 0 ? (
+                      <span
+                        style={{
+                          fontWeight: "normal",
+                          opacity: totalPosts === 0 ? "0.5" : "1",
+                        }}
+                      >
+                        <span
+                          style={{
+                            fontWeight: "bold",
+                            opacity: totalPosts === 0 ? "0.5" : "1",
+                          }}
+                        >
+                          {totalPosts}
+                        </span>{" "}
+                        мислења
+                      </span>
+                    ) : (
+                      <span
+                        style={{
+                          fontWeight: "normal",
+                          opacity: totalPosts === 0 ? "0.5" : "1",
+                        }}
+                      >
+                        <span
+                          style={{
+                            fontWeight: "bold",
+                            opacity: totalPosts === 0 ? "0.5" : "1",
+                          }}
+                        >
+                          {totalPosts}
+                        </span>{" "}
+                        мислења
+                      </span>
+                    )
+                  ) : (
+                    <span style={{ fontWeight: "normal" }}>
+                      <span style={{ fontWeight: "bold" }}>{totalPosts}</span>{" "}
+                      мислење
+                    </span>
+                  )}
+                </EntityParam>
+              </EntityLi>
+            );
+          })}
+        </EntityUl>
+      </SubjectsAccordionDiv>
+    </div>
+  );
+};
+
+export default SubjectsAccordion;
Index: reactapp/src/Pages/Faculty.js
===================================================================
--- reactapp/src/Pages/Faculty.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
+++ reactapp/src/Pages/Faculty.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
@@ -0,0 +1,235 @@
+import React, { useState, useEffect } from "react";
+import { useParams, Outlet } from "react-router-dom";
+import JSOG from "jsog";
+import {
+  ProfessorCard,
+  ProfessorCardName,
+  ProfessorCardSeparator,
+  ProfessorCardDetails,
+} from "../Components/Styled/ProfessorCard.style";
+import {
+  EntityUl,
+  EntityLi,
+  EntityParam,
+  EntityTypeSelector,
+} from "../Components/Styled/EntityList.style";
+import SubjectsAccordion from "../Components/SubjectsAccordion";
+import { CurrentPageNav } from "../Components/Styled/Main.style";
+
+const Faculty = () => {
+  let params = useParams();
+  const [loadedProfessors, setLoadedProfessors] = useState(false);
+  const [loadedStudyProgrammes, setLoadedStudyProgrammes] = useState(false);
+  const [professors, setProfessors] = useState(null);
+  const [studyProgrammes, setStudyProgrammes] = useState(null);
+  const [fetchError, setFetchError] = useState(false);
+  const [entityType, setEntityType] = useState(0);
+
+  useEffect(() => {
+    const urlProfessors = `http://192.168.0.17:8080/public/professors?facultyId=${params.facultyId}`;
+    const urlStudyProgrammes = `http://192.168.0.17:8080/public/study_programmes?facultyId=${params.facultyId}`;
+
+    const fetchDataProfessors = async () => {
+      try {
+        const response = await fetch(urlProfessors);
+        let cyclicGraph = await response.json();
+        let jsogStructure = JSOG.encode(cyclicGraph);
+        cyclicGraph = JSOG.decode(jsogStructure);
+        setProfessors(cyclicGraph);
+        setLoadedProfessors(true);
+      } catch (error) {
+        setFetchError(true);
+      }
+    };
+
+    const fetchDataStudyProgrammes = async () => {
+      try {
+        const response2 = await fetch(urlStudyProgrammes);
+        let cyclicGraph2 = await response2.json();
+        let jsogStructure2 = JSOG.encode(cyclicGraph2);
+        cyclicGraph2 = JSOG.decode(jsogStructure2);
+        setStudyProgrammes(cyclicGraph2);
+        setLoadedStudyProgrammes(true);
+      } catch (error) {
+        setFetchError(true);
+      }
+    };
+
+    fetchDataProfessors();
+    fetchDataStudyProgrammes();
+  }, [params.facultyId]);
+
+  return loadedProfessors ? (
+    entityType === 0 ? (
+      <>
+        <CurrentPageNav>
+          &#187;{" "}
+          <a
+            href={
+              "/university/" + professors[0].faculty.university.universityId
+            }
+          >
+            {professors[0].faculty.university.universityName}
+          </a>{" "}
+          &#187; <a href="#">{professors[0].faculty.facultyName}</a>
+        </CurrentPageNav>
+        <ProfessorCard>
+          <ProfessorCardName>
+            {professors[0].faculty.facultyName}
+          </ProfessorCardName>
+          <ProfessorCardSeparator />
+          <ProfessorCardDetails fontSize="20px">
+            {professors[0].faculty.university.universityName}
+          </ProfessorCardDetails>
+        </ProfessorCard>
+        <div style={{ display: "flex" }}>
+          <EntityTypeSelector
+            backgroundcolor="rgba(0, 102, 204, 1)"
+            color="white"
+            boxshadow="none"
+            boxshadowhover="none"
+            opacityhover="0.6"
+            cursor="auto"
+          >
+            Прикажи професори
+          </EntityTypeSelector>
+          <EntityTypeSelector
+            boxshadow="2px 2px 5px #aaaaaa"
+            cursor="pointer"
+            boxshadowhover="2px 2px 10px #aaaaaa"
+            opacityhover="1"
+            onClick={() => setEntityType(1)}
+          >
+            Прикажи предмети
+          </EntityTypeSelector>
+        </div>
+        <div key={params.facultyId}>
+          {professors.map((professor) => {
+            let totalPosts = professor.relatedOpinions.length;
+
+            return (
+              <EntityUl key={professor.professorId}>
+                <EntityLi bgcolor="cornsilk">
+                  <a href={"/professor/" + professor.professorId}>
+                    {professor.professorName}
+                  </a>
+                  <EntityParam>
+                    {totalPosts !== 1 ? (
+                      totalPosts !== 0 ? (
+                        <span
+                          style={{
+                            fontWeight: "normal",
+                            opacity: totalPosts === 0 ? "0.5" : "1",
+                          }}
+                        >
+                          <span
+                            style={{
+                              fontWeight: "bold",
+                              opacity: totalPosts === 0 ? "0.5" : "1",
+                            }}
+                          >
+                            {totalPosts}
+                          </span>{" "}
+                          мислења
+                        </span>
+                      ) : (
+                        <span
+                          style={{
+                            fontWeight: "normal",
+                            opacity: totalPosts === 0 ? "0.5" : "1",
+                          }}
+                        >
+                          <span
+                            style={{
+                              fontWeight: "bold",
+                              opacity: totalPosts === 0 ? "0.5" : "1",
+                            }}
+                          >
+                            {totalPosts}
+                          </span>{" "}
+                          мислења
+                        </span>
+                      )
+                    ) : (
+                      <span style={{ fontWeight: "normal" }}>
+                        <span style={{ fontWeight: "bold" }}>{totalPosts}</span>{" "}
+                        мислење
+                      </span>
+                    )}
+                  </EntityParam>
+                </EntityLi>
+              </EntityUl>
+            );
+          })}
+        </div>
+      </>
+    ) : (
+      loadedStudyProgrammes && (
+        <>
+          <CurrentPageNav>
+            <a
+              href={
+                "/university/" + professors[0].faculty.university.universityId
+              }
+            >
+              {professors[0].faculty.university.universityName}
+            </a>{" "}
+            / <a href="#">{professors[0].faculty.facultyName}</a>
+          </CurrentPageNav>
+          <ProfessorCard>
+            <ProfessorCardName>
+              {professors[0].faculty.facultyName}
+            </ProfessorCardName>
+            <ProfessorCardSeparator />
+            <ProfessorCardDetails fontSize="20px">
+              {professors[0].faculty.university.universityName}
+            </ProfessorCardDetails>
+          </ProfessorCard>
+          <div style={{ display: "flex" }}>
+            <EntityTypeSelector
+              boxshadow="2px 2px 5px #aaaaaa"
+              cursor="pointer"
+              boxshadowhover="2px 2px 10px #aaaaaa"
+              opacityhover="1"
+              onClick={() => setEntityType(0)}
+            >
+              Прикажи професори
+            </EntityTypeSelector>
+            <EntityTypeSelector
+              backgroundcolor="rgba(0, 102, 204, 1)"
+              color="white"
+              boxshadow="none"
+              boxshadowhover="none"
+              opacityhover="0.6"
+              cursor="auto"
+            >
+              Прикажи предмети
+            </EntityTypeSelector>
+          </div>
+          <div key={params.facultyId}>
+            {studyProgrammes.map((studyProgramme) => {
+              return (
+                <SubjectsAccordion
+                  key={studyProgramme.studyProgrammeId}
+                  title={studyProgramme}
+                  content={studyProgramme.subjects}
+                ></SubjectsAccordion>
+              );
+            })}
+          </div>
+        </>
+      )
+    )
+  ) : !fetchError ? (
+    <div>
+      <p style={{ marginTop: "140px" }}>се вчитува...</p>
+      <Outlet />
+    </div>
+  ) : (
+    <div style={{ marginTop: "140px" }}>
+      <h1 style={{ textAlign: "center" }}>Страницата не е пронајдена.</h1>
+    </div>
+  );
+};
+
+export default Faculty;
Index: reactapp/src/Pages/NotFound.js
===================================================================
--- reactapp/src/Pages/NotFound.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
+++ reactapp/src/Pages/NotFound.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
@@ -0,0 +1,23 @@
+import React from "react";
+import { MainWrapper } from "../Components/Styled/Main.style";
+import { MainTitle } from "../Components/Styled/Main.style";
+
+const NotFound = () => {
+  return (
+    <MainWrapper>
+      <style>
+        {
+          "body { background-color: papayawhip;} * {margin: 0; padding: 0; box-sizing: border-box;}"
+        }
+      </style>
+      <a href="/">
+        <MainTitle>profesori.mk</MainTitle>
+      </a>{" "}
+      <div style={{ marginTop: "140px" }}>
+        <h1 style={{ textAlign: "center" }}>Страницата не е пронајдена.</h1>
+      </div>
+    </MainWrapper>
+  );
+};
+
+export default NotFound;
Index: reactapp/src/Pages/Professor.js
===================================================================
--- reactapp/src/Pages/Professor.js	(revision cae16b5c1413e5ea9894a407fe51545353de6dcc)
+++ reactapp/src/Pages/Professor.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
@@ -23,4 +23,5 @@
 import { useNavigate } from "react-router-dom";
 import axios from "../api/axios";
+import { CurrentPageNav } from "../Components/Styled/Main.style";
 
 function Professor(user, userLoaded) {
@@ -34,4 +35,5 @@
   const [postTitle, setPostTitle] = useState("");
   const [postContent, setPostContent] = useState("");
+  const [fetchError, setFetchError] = useState(false);
 
   useEffect(() => {
@@ -47,5 +49,5 @@
         setLoaded(true);
       } catch (error) {
-        console.log("Fetching error", error);
+        setFetchError(true);
       }
     };
@@ -95,4 +97,15 @@
     return (
       <div>
+        <CurrentPageNav>
+          &#187;{" "}
+          <a href={"/university/" + professor.faculty.university.universityId}>
+            {professor.faculty.university.universityName}
+          </a>{" "}
+          &#187;{" "}
+          <a href={"/faculty/" + professor.faculty.facultyId}>
+            {professor.faculty.facultyName}
+          </a>{" "}
+          &#187; <a href="#">{professor.professorName}</a>
+        </CurrentPageNav>
         <ProfessorCard>
           <ProfessorCardName>{professor.professorName}</ProfessorCardName>
@@ -168,5 +181,5 @@
       </div>
     );
-  } else {
+  } else if (!fetchError) {
     return (
       <div>
@@ -175,4 +188,10 @@
       </div>
     );
+  } else {
+    return (
+      <div style={{ marginTop: "140px" }}>
+        <h1 style={{ textAlign: "center" }}>Страницата не е пронајдена.</h1>
+      </div>
+    );
   }
 }
Index: reactapp/src/Pages/Subject.js
===================================================================
--- reactapp/src/Pages/Subject.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
+++ reactapp/src/Pages/Subject.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
@@ -0,0 +1,9 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+
+const Subject = () => {
+  let params = useParams();
+  return <div>Subject {params.subjectId}</div>;
+};
+
+export default Subject;
Index: reactapp/src/Pages/University.js
===================================================================
--- reactapp/src/Pages/University.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
+++ reactapp/src/Pages/University.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from "react";
+import { useParams, Outlet } from "react-router-dom";
+import JSOG from "jsog";
+import {
+  ProfessorCard,
+  ProfessorCardName,
+  ProfessorCardSeparator,
+  ProfessorCardDetails,
+} from "../Components/Styled/ProfessorCard.style";
+import {
+  EntityUl,
+  EntityLi,
+  EntityParam,
+} from "../Components/Styled/EntityList.style";
+import { CurrentPageNav } from "../Components/Styled/Main.style";
+
+const University = () => {
+  let params = useParams();
+  const [loaded, setLoaded] = useState(false);
+  const [faculties, setFaculties] = useState(false);
+  const [fetchError, setFetchError] = useState(false);
+
+  useEffect(() => {
+    const url = `http://192.168.0.17:8080/public/faculties?universityId=${params.universityId}`;
+
+    const fetchData = async () => {
+      try {
+        const response = await fetch(url);
+        var cyclicGraph = await response.json();
+        var jsogStructure = JSOG.encode(cyclicGraph);
+        cyclicGraph = JSOG.decode(jsogStructure);
+        setFaculties(cyclicGraph);
+        setLoaded(true);
+      } catch (error) {
+        setFetchError(true);
+      }
+    };
+    fetchData();
+  }, [params.universityId]);
+
+  return loaded ? (
+    <>
+      <CurrentPageNav>
+        &#187; <a href="#">{faculties[0].university.universityName}</a>
+      </CurrentPageNav>
+      <ProfessorCard>
+        <ProfessorCardName>
+          {faculties[0].university.universityName}
+        </ProfessorCardName>
+        <ProfessorCardSeparator />
+        <ProfessorCardDetails fontSize="20px">
+          {faculties[0].university.city.cityName}
+        </ProfessorCardDetails>
+      </ProfessorCard>
+      <div key={params.universityId}>
+        {faculties.map((faculty) => {
+          let totalPosts = 0;
+          let totalSections = 0;
+          faculty.professors.map((professor) => {
+            totalPosts += professor.relatedOpinions.length;
+            totalSections++;
+          });
+          faculty.studyProgrammes.map((studyProgramme) => {
+            studyProgramme.subjects.map((subject) => {
+              totalPosts += subject.threads.length;
+              totalSections++;
+            });
+          });
+
+          return (
+            <EntityUl key={faculty.facultyId}>
+              <EntityLi bgcolor="cornsilk">
+                <a href={"/faculty/" + faculty.facultyId}>
+                  {faculty.facultyName}
+                </a>
+                <EntityParam>
+                  {totalSections}{" "}
+                  {totalSections !== 1 ? (
+                    <span style={{ fontWeight: "normal" }}>секции,</span>
+                  ) : (
+                    <span style={{ fontWeight: "normal" }}>секција</span>
+                  )}
+                  <span style={{ opacity: totalPosts === 0 ? "0.5" : "1" }}>
+                    {totalPosts}
+                  </span>{" "}
+                  {totalPosts !== 1 ? (
+                    <span
+                      style={{
+                        fontWeight: "normal",
+                        opacity: totalPosts === 0 ? "0.5" : "1",
+                      }}
+                    >
+                      мислења
+                    </span>
+                  ) : (
+                    <span style={{ fontWeight: "normal" }}>мислење</span>
+                  )}
+                </EntityParam>
+              </EntityLi>
+            </EntityUl>
+          );
+        })}
+      </div>
+    </>
+  ) : !fetchError ? (
+    <div>
+      <p style={{ marginTop: "140px" }}>се вчитува...</p>
+      <Outlet />
+    </div>
+  ) : (
+    <div style={{ marginTop: "140px" }}>
+      <h1 style={{ textAlign: "center" }}>Страницата не е пронајдена.</h1>
+    </div>
+  );
+};
+
+export default University;
