Index: reactapp/src/Components/Logout.js
===================================================================
--- reactapp/src/Components/Logout.js	(revision af801e3ae2a87e526d2053085fdbb077aafd6741)
+++ reactapp/src/Components/Logout.js	(revision 9bf1f8db5dd66185ddc4f7d093582ff73006f66b)
@@ -3,5 +3,4 @@
 import Cookies from "js-cookie";
 import { LogoutButton } from "./Styled/UserDetails.style";
-import { Navigate } from "react-router-dom";
 
 function Logout() {
@@ -13,5 +12,5 @@
   };
 
-  return <LogoutButton onClick={handleLogout}>Одјави се</LogoutButton>;
+  return <LogoutButton onClick={handleLogout} style={{color:"black"}}>Одјави се</LogoutButton>;
 }
 
Index: reactapp/src/Components/OpinionTree.js
===================================================================
--- reactapp/src/Components/OpinionTree.js	(revision af801e3ae2a87e526d2053085fdbb077aafd6741)
+++ reactapp/src/Components/OpinionTree.js	(revision 9bf1f8db5dd66185ddc4f7d093582ff73006f66b)
@@ -26,5 +26,5 @@
 import axios from "../api/axios";
 
-function OpinionTree({ professor }) {
+const OpinionTree = ({professor, relatedOpinions}) => {
   var renderedOpinionIds = [];
   var postCount; // za da ne go pokazuva ispod postot
@@ -35,5 +35,9 @@
   const [replyModalDisplay, setReplyModalDisplay] = useState("none");
   const [replyContent, setReplyContent] = useState("");
-  const [postForModal, setPostForModal] = useState(null);
+  const [postForReplyModal, setPostForReplyModal] = useState(null);
+  const [reportModalDisplay, setReportModalDisplay] = useState("none");
+  const [reportContent, setReportContent] = useState("")
+  const [postForReportModal, setPostForReportModal] = useState(null);
+
   const [user, setUser] = useState(null);
   const [loadedUser, setLoadedUser] = useState(false);
@@ -42,5 +46,5 @@
 
   useEffect(() => {
-    const url = `http://192.168.0.29:8080/secure/currentUser`;
+    const url = `http://192.168.1.254:8080/secure/currentUser`;
 
     const fetchUser = async () => {
@@ -68,5 +72,5 @@
       ) {
         const response = await axios(
-          `http://192.168.0.29:8080/secure/upvoteOpinion/${post.postId}`,
+          `http://192.168.1.254:8080/secure/upvoteOpinion/${post.postId}`,
           {
             method: "get",
@@ -91,5 +95,5 @@
       ) {
         const response = await axios(
-          `http://192.168.0.29:8080/secure/downvoteOpinion/${post.postId}`,
+          `http://192.168.1.254:8080/secure/downvoteOpinion/${post.postId}`,
           {
             method: "get",
@@ -110,5 +114,5 @@
     if (auth) {
       setReplyModalDisplay("block");
-      setPostForModal(opinion);
+      setPostForReplyModal(opinion);
       document.body.style.overflowY = "hidden";
     } else {
@@ -116,12 +120,27 @@
     }
   };
+
+  const handleReport = (opinion) => {
+    if (auth) {
+      setReportModalDisplay("block");
+      setPostForReportModal(opinion);
+      document.body.style.overflowY = "hidden";
+    } else {
+      navigate("/login");
+    }
+  }
 
   const handleModalCloseClick = () => {
     setReplyModalDisplay("none");
+    setReportModalDisplay("none");
     document.body.style.overflowY = "auto";
   };
 
-  const handleContentChange = (e) => {
+  const handleReplyContentChange = (e) => {
     setReplyContent(e.target.value);
+  };
+
+  const handleReportContentChange = (e) => {
+    setReportContent(e.target.value);
   };
 
@@ -131,5 +150,5 @@
     if (!replyContent.length < 1) {
       const response = await axios(
-        `http://192.168.0.29:8080/secure/professor/${professor.professorId}/replyToOpinion/${postId}`,
+        `http://192.168.1.254:8080/secure/professor/${professor.professorId}/replyToOpinion/${postId}`,
         {
           method: "post",
@@ -147,7 +166,28 @@
   };
 
+  const handleReportSubmit = async (e, postId) => {
+    e.preventDefault();
+
+    if (!reportContent.length < 1) {
+      const response = await axios(
+          `http://192.168.1.254:8080/secure/reportOpinion/${postId}`,
+          {
+            method: "post",
+            data: {
+              description: reportContent,
+            },
+            withCredentials: true,
+          }
+      );
+      setErrorMessage("");
+      window.location.reload();
+    } else {
+      setErrorMessage("Полето за содржина не смее да биде празно");
+    }
+  };
+
   function displayChildPosts(child, parentPostAuthorUsername, replyIndent) {
     if (child == null) return;
-    postCount = renderedOpinionIds.push(child.postId);
+    if (!renderedOpinionIds.includes(child.postId)) {postCount = renderedOpinionIds.push(child.postId);}
     return (
       <div key={child.postId}>
@@ -158,5 +198,5 @@
               му реплицирал на {parentPostAuthorUsername}
             </p>
-            <p style={{ marginBottom: "10px", maxWidth: "90%" }}>
+            <p style={{ marginBottom: "10px", maxWidth: "85%" }}>
               {child.content}
             </p>
@@ -228,4 +268,11 @@
                 onClick={() => handleReply(child)}
               />
+
+              <StyledFontAwesomeIcon
+                  icon={solid("flag")}
+                  right={130 + "px"}
+                  color="darkgrey"
+                  onClick={() => handleReport(child)}
+              />
             </div>
           </OpinionReplyCardContent>
@@ -244,6 +291,6 @@
   return (
     <div className="opinionTree">
-      {professor.relatedOpinions.map((opinion) => {
-        if (!renderedOpinionIds.includes(opinion.postId)) {
+      {relatedOpinions.map((opinion) => {
+        if (!renderedOpinionIds.includes(opinion.postId) && opinion.parent === null) {
           postCount = renderedOpinionIds.push(opinion.postId);
           return (
@@ -257,5 +304,5 @@
                     напишал
                   </p>
-                  <p style={{ marginBottom: "10px", maxWidth: "90%" }}>
+                  <p style={{ marginBottom: "10px", maxWidth: "85%" }}>
                     {opinion.content}
                   </p>
@@ -335,4 +382,11 @@
                       onClick={() => handleReply(opinion)}
                     />
+
+                    <StyledFontAwesomeIcon
+                        icon={solid("flag")}
+                        right={130 + "px"}
+                        color="darkgrey"
+                        onClick={() => handleReport(opinion)}
+                    />
                   </div>
                 </OpinionCardContent>
@@ -346,5 +400,5 @@
         return null;
       })}
-      {postForModal && (
+      {postForReplyModal && (
         <Modal display={replyModalDisplay}>
           <ModalContent>
@@ -352,8 +406,8 @@
               <ModalClose onClick={handleModalCloseClick}>&times;</ModalClose>
               <h3 style={{ marginTop: "5px" }}>
-                Реплика на {postForModal.author.username}
+                Реплика на {postForReplyModal.author.username}
               </h3>
             </ModalHeader>
-            <form onSubmit={(e) => handleReplySubmit(e, postForModal.postId)}>
+            <form onSubmit={(e) => handleReplySubmit(e, postForReplyModal.postId)}>
               <ModalBody>
                 <label htmlFor="content">
@@ -364,5 +418,5 @@
                     cols="100"
                     value={replyContent}
-                    onChange={handleContentChange}
+                    onChange={handleReplyContentChange}
                     spellCheck={false}
                   />
@@ -379,4 +433,37 @@
         </Modal>
       )}
+      {postForReportModal && (
+          <Modal display={reportModalDisplay}>
+            <ModalContent>
+              <ModalHeader>
+                <ModalClose onClick={handleModalCloseClick}>&times;</ModalClose>
+                <h3 style={{ marginTop: "5px" }}>
+                  Пријава за мислење #{postForReportModal.postId}
+                </h3>
+              </ModalHeader>
+              <form onSubmit={(e) => handleReportSubmit(e, postForReportModal.postId)}>
+                <ModalBody>
+                  <label htmlFor="content">
+                    <b>Наведете причина</b>:
+                    <ModalTextarea
+                        id="content"
+                        rows="8"
+                        cols="100"
+                        value={reportContent}
+                        onChange={handleReportContentChange}
+                        spellCheck={false}
+                    />
+                  </label>
+                </ModalBody>
+                <p
+                    style={{ color: "red", marginLeft: "15px", marginTop: "10px" }}
+                >
+                  {errorMessage}
+                </p>
+                <ModalFooter type="submit">ПРИЈАВИ</ModalFooter>
+              </form>
+            </ModalContent>
+          </Modal>
+      )}
     </div>
   );
Index: reactapp/src/Components/Root.js
===================================================================
--- reactapp/src/Components/Root.js	(revision 9bf1f8db5dd66185ddc4f7d093582ff73006f66b)
+++ reactapp/src/Components/Root.js	(revision 9bf1f8db5dd66185ddc4f7d093582ff73006f66b)
@@ -0,0 +1,38 @@
+import React, { useContext, useEffect, useState } from "react";
+import { MainWrapper, MainTitle } from "./Styled/Main.style";
+import { Outlet } from "react-router-dom";
+import Search from "./Search";
+import UserHeader from "./UserHeader";
+import AuthApi from "../api/AuthApi";
+import Logout from "./Logout";
+import {LogoutButton} from "./Styled/UserDetails.style";
+
+function Root({ user, userLoaded }) {
+  const { auth, setAuth } = useContext(AuthApi);
+
+  return (
+    <MainWrapper>
+      <style>
+        @import
+        url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
+      </style>
+      <style>
+        {
+          "body { background-color: papayawhip;} * {margin: 0; padding: 0; box-sizing: border-box;}"
+        }
+      </style>
+      <a href="/">
+        <MainTitle>profesori.mk</MainTitle>
+      </a>{" "}
+        <div style={{ float: "left", marginTop: 20, marginLeft: 40 }}>
+            {!auth && <a href="/login"><LogoutButton style={{textDecoration:"underline", color:"black"}}>Најава/регистрација</LogoutButton></a>}{" "}
+        </div>
+      <Search />
+      {auth && <UserHeader />}
+      <div style={{ marginTop: "140px" }}/>
+      <Outlet />
+    </MainWrapper>
+  );
+}
+
+export default Root;
Index: reactapp/src/Components/Search.js
===================================================================
--- reactapp/src/Components/Search.js	(revision af801e3ae2a87e526d2053085fdbb077aafd6741)
+++ reactapp/src/Components/Search.js	(revision 9bf1f8db5dd66185ddc4f7d093582ff73006f66b)
@@ -13,17 +13,23 @@
   const [query, setQuery] = useState("");
   const [professors, setProfessors] = useState([]);
+  const [subjects, setSubjects] = useState([]);
 
   useEffect(() => {
-    const url = `http://192.168.0.29:8080/public/professors/nameContains/${transliterate(
-      query
-    )}`;
-
     const fetchData = async () => {
       try {
-        const response = await fetch(url);
-        var cyclicGraph = await response.json();
-        var jsogStructure = JSOG.encode(cyclicGraph);
-        cyclicGraph = JSOG.decode(jsogStructure);
-        setProfessors(cyclicGraph);
+        Promise.all([fetch(`http://192.168.1.254:8080/public/professors/nameContains/${transliterate(query)}`),
+          fetch(`http://192.168.1.254:8080/public/subjects/nameContains/${transliterate(query)}`)])
+            .then(([resProfessors, resSubjects]) => Promise.all([resProfessors.json(), resSubjects.json()]))
+            .then(([dataProfessors, dataSubjects]) => {
+              let cyclicGraph1 = dataProfessors;
+              let jsogStructure1 = JSOG.encode(cyclicGraph1);
+              cyclicGraph1 = JSOG.decode(jsogStructure1);
+              setProfessors(cyclicGraph1);
+
+              let cyclicGraph2 = dataSubjects;
+              let jsogStructure2 = JSOG.encode(cyclicGraph2);
+              cyclicGraph2 = JSOG.decode(jsogStructure2);
+              setSubjects(cyclicGraph2);
+            })
       } catch (error) {
         console.log("Fetching error", error);
@@ -31,5 +37,5 @@
     };
 
-    if (query.length > 2) fetchData();
+    if (query.length > 3) fetchData();
   }, [query]);
 
@@ -39,5 +45,5 @@
     if (event.key === "Enter") {
       setExpanded(false);
-      navigate("/search", { state: professors });
+      navigate("/search", { state: professors.concat(subjects) });
     }
   };
@@ -71,13 +77,13 @@
       <SearchDropdown
         display={
-          query.length > 2 && professors.length > 0 && expanded
+          query.length > 3 && (professors.length > 0 || subjects.length > 0) && expanded
             ? "block"
             : "none"
         }
       >
-        {query.length > 2 &&
-          professors.slice(0, 7).map((professor) => (
+        {query.length > 3 &&
+          professors.concat(subjects).slice(0, 7).map((match) => (
             <SearchResult
-              key={professor.professorId}
+              key={match.professorId !== undefined ? match.professorId : match.subjectId}
               onMouseDown={(event) => {
                 event.preventDefault();
@@ -86,10 +92,10 @@
               margin="0"
             >
-              <SearchResultLink href={"/professor/" + professor.professorId}>
+              <SearchResultLink href={`/${match.professorId !== undefined ? 'professor': 'subject'}/` + `${match.professorId !== undefined ? match.professorId : match.subjectId}`}>
                 <SearchResultText weight="bold" size="medium">
-                  {professor.professorName}
+                  {match.professorId !== undefined ? match.professorName : match.subjectName}
                 </SearchResultText>
                 <SearchResultText weight="normal" size="er">
-                  {professor.faculty.facultyName}
+                  {match.professorId !== undefined ? match.faculty.facultyName : match.studyProgramme.faculty.facultyName}
                 </SearchResultText>
               </SearchResultLink>
Index: reactapp/src/Components/Styled/Main.style.js
===================================================================
--- reactapp/src/Components/Styled/Main.style.js	(revision af801e3ae2a87e526d2053085fdbb077aafd6741)
+++ reactapp/src/Components/Styled/Main.style.js	(revision 9bf1f8db5dd66185ddc4f7d093582ff73006f66b)
@@ -25,4 +25,5 @@
 export const CurrentPageNav = styled.div`
   font-style: italic;
-  font-size: 14px;
+  font-size: 16px;
+  font-weight: bold;
 `;
Index: reactapp/src/Components/Styled/Search.style.js
===================================================================
--- reactapp/src/Components/Styled/Search.style.js	(revision af801e3ae2a87e526d2053085fdbb077aafd6741)
+++ reactapp/src/Components/Styled/Search.style.js	(revision 9bf1f8db5dd66185ddc4f7d093582ff73006f66b)
@@ -3,5 +3,5 @@
 
 export const SearchBox = styled.input`
-  width: 350px;
+  width: 450px;
   box-sizing: border-box;
   border: 2px solid #ccc;
@@ -23,5 +23,5 @@
   padding: 12px 16px;
   z-index: 1;
-  width: 350px;
+  width: 450px;
   padding: 0;
 `;
Index: reactapp/src/Components/SubjectsAccordion.js
===================================================================
--- reactapp/src/Components/SubjectsAccordion.js	(revision af801e3ae2a87e526d2053085fdbb077aafd6741)
+++ reactapp/src/Components/SubjectsAccordion.js	(revision 9bf1f8db5dd66185ddc4f7d093582ff73006f66b)
@@ -6,12 +6,41 @@
 } from "./Styled/SubjectsAccordion.style.";
 import { EntityLi, EntityUl, EntityParam } from "./Styled/EntityList.style";
+import JSOG from "jsog";
 
 const SubjectsAccordion = (props) => {
   const [height, setHeight] = useState("0");
   const [opacity, setOpacity] = useState(0);
+
+  const [subjects, setSubjects] = useState(null);
+  const [loadedSubjects, setLoadedSubjects] = useState(false);
+  const [counts, setCounts] = useState(null);
+  const [loadedCounts, setLoadedCounts] = useState(false);
+
+  const [fetchError, setFetchError] = useState(false);
   const handleClick = () => {
     if (height === "0") {
       setHeight("auto");
       setOpacity(1);
+      try {
+        Promise.all([fetch(`http://192.168.1.254:8080/public/subjects?studyProgrammeId=${props.title.studyProgrammeId}`),
+          fetch(`http://192.168.1.254:8080/public/study_programme/${props.title.studyProgrammeId}/threadCountForEachSubject`)])
+            .then(([resSubjects, counts]) => Promise.all([resSubjects.json(), counts.json()]))
+            .then(([dataSubjects, dataCounts]) => {
+              let cyclicGraph1 = dataSubjects;
+              let jsogStructure1 = JSOG.encode(cyclicGraph1);
+              cyclicGraph1 = JSOG.decode(jsogStructure1);
+              setSubjects(cyclicGraph1);
+              setLoadedSubjects(true);
+
+              let cyclicGraph2 = dataCounts;
+              let jsogStructure2 = JSOG.encode(cyclicGraph2);
+              cyclicGraph2 = JSOG.decode(jsogStructure2);
+              setCounts(cyclicGraph2);
+              setLoadedCounts(true);
+            })
+
+      } catch (error) {
+        setFetchError(true);
+      }
     } else {
       setHeight("0");
@@ -27,7 +56,7 @@
       <SubjectsAccordionDiv height={height} opacity={opacity}>
         <EntityUl>
-          {props.content &&
-            props.content.map((item) => {
-              let totalPosts = item.threads.length;
+          {loadedSubjects &&
+            subjects.map((item, idx) => {
+              let totalPosts = parseInt(counts[idx].split(",")[1]);
               return (
                 <EntityLi key={item.subjectName} bgcolor="cornsilk">
Index: reactapp/src/Components/UserHeader.js
===================================================================
--- reactapp/src/Components/UserHeader.js	(revision af801e3ae2a87e526d2053085fdbb077aafd6741)
+++ reactapp/src/Components/UserHeader.js	(revision 9bf1f8db5dd66185ddc4f7d093582ff73006f66b)
@@ -11,5 +11,5 @@
 
   useEffect(() => {
-    const url = `http://192.168.0.29:8080/secure/currentUser`;
+    const url = `http://192.168.1.254:8080/secure/currentUser`;
 
     const fetchUser = async () => {
@@ -30,9 +30,9 @@
 
   return loadedUser ? (
-    <div style={{ float: "left", marginTop: 20, marginLeft: 40 }}>
+    <div style={{ float: "left", marginTop: 20, marginLeft: 10 }}>
       Најавен/а: <a href="/user_dashboard">{user.username}</a> <Logout />{" "}
     </div>
   ) : (
-    <div style={{ float: "left", marginTop: 25, marginLeft: 60 }}>
+    <div style={{ float: "left", marginTop: 25, marginLeft: 10 }}>
       <LoadingSpinner/>
     </div>
