Index: reactapp/src/Components/OpinionTree.js
===================================================================
--- reactapp/src/Components/OpinionTree.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
+++ reactapp/src/Components/OpinionTree.js	(revision c68150fac8ab8e6f5dc5b8b2a9cd73d391dc1aa7)
@@ -3,5 +3,4 @@
   OpinionCardContent,
   OpinionCardContentTime,
-  OpinionCardContentTitle,
   OpinionReplyCard,
   OpinionReplyCardContent,
@@ -14,5 +13,6 @@
 import AuthApi from "../api/AuthApi";
 import { useNavigate } from "react-router-dom";
-import { useContext, useState } from "react";
+import { useContext, useState, useEffect } from "react";
+import JSOG from "jsog";
 import {
   Modal,
@@ -26,56 +26,82 @@
 import axios from "../api/axios";
 
-function OpinionTree({ professor, user, userLoaded }) {
+function OpinionTree({ professor }) {
   var renderedOpinionIds = [];
   var postCount; // za da ne go pokazuva ispod postot
 
+  const { auth, setAuth } = useContext(AuthApi);
   let navigate = useNavigate();
-  const { auth, setAuth } = useContext(AuthApi);
-
-  let [replyModalDisplay, setReplyModalDisplay] = useState("none");
+
+  const [replyModalDisplay, setReplyModalDisplay] = useState("none");
   const [replyContent, setReplyContent] = useState("");
-
   const [postForModal, setPostForModal] = useState(null);
+  const [user, setUser] = useState(null);
+  const [loadedUser, setLoadedUser] = useState(false);
+  const [fetchError, setFetchError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  useEffect(() => {
+    const url = `http://192.168.0.17:8080/secure/currentUser`;
+
+    const fetchUser = async () => {
+      try {
+        const response = await axios.get(url, { withCredentials: true });
+        var cyclicGraph = await response.data;
+        var jsogStructure = JSOG.encode(cyclicGraph);
+        cyclicGraph = JSOG.decode(jsogStructure);
+        setUser(cyclicGraph);
+        setLoadedUser(true);
+      } catch (error) {
+        setFetchError(true);
+      }
+    };
+
+    if (auth) fetchUser();
+  }, []);
 
   const handleLike = async (post) => {
-    if (
-      auth &&
-      userLoaded &&
-      !post.likes.some((e) => e.id === user.user.id) &&
-      !post.dislikes.some((e) => e.id === user.user.id)
-    ) {
-      const response = await axios(
-        `http://192.168.0.17:8080/secure/professor/${professor.professorId}/upvoteOpinion/${post.postId}`,
-        {
-          method: "get",
-          withCredentials: true,
-        }
-      );
-
-      window.location.reload(false);
+    if (auth) {
+      if (
+        loadedUser &&
+        user &&
+        !post.votes.some((e) => e.user.id === user.id)
+      ) {
+        const response = await axios(
+          `http://192.168.0.17:8080/secure/upvoteOpinion/${post.postId}`,
+          {
+            method: "get",
+            withCredentials: true,
+          }
+        );
+        window.location.reload(false);
+      } else {
+        return;
+      }
     } else {
-      return;
+      navigate("/login");
     }
   };
 
   const handleDislike = async (post) => {
-    if (
-      auth &&
-      auth &&
-      userLoaded &&
-      !post.likes.some((e) => e.id === user.user.id) &&
-      !post.dislikes.some((e) => e.id === user.user.id)
-    ) {
-      const response = await axios(
-        `http://192.168.0.17:8080/secure/professor/${professor.professorId}/downvoteOpinion/${post.postId}`,
-        {
-          method: "get",
-          withCredentials: true,
-        }
-      );
-
-      window.location.reload(false);
+    if (auth) {
+      if (
+        loadedUser &&
+        user &&
+        !post.votes.some((e) => e.user.id === user.id)
+      ) {
+        const response = await axios(
+          `http://192.168.0.17:8080/secure/downvoteOpinion/${post.postId}`,
+          {
+            method: "get",
+            withCredentials: true,
+          }
+        );
+
+        window.location.reload(false);
+      } else {
+        return;
+      }
     } else {
-      return;
+      navigate("/login");
     }
   };
@@ -101,17 +127,20 @@
     e.preventDefault();
 
-    const response = await axios(
-      `http://192.168.0.17:8080/secure/professor/${professor.professorId}/replyToOpinion/${postId}`,
-      {
-        method: "post",
-        body: {
-          content: replyContent,
-        },
-        withCredentials: true,
-      }
-    );
-
-    window.location.reload(false);
-    //console.log(response);
+    if (!replyContent.length < 1) {
+      const response = await axios(
+        `http://192.168.0.17:8080/secure/professor/${professor.professorId}/replyToOpinion/${postId}`,
+        {
+          method: "post",
+          data: {
+            content: replyContent,
+          },
+          withCredentials: true,
+        }
+      );
+      setErrorMessage("");
+      window.location.reload(false);
+    } else {
+      setErrorMessage("Полето за содржина не смее да биде празно");
+    }
   };
 
@@ -123,9 +152,11 @@
         <OpinionReplyCard indent={replyIndent + "px"}>
           <OpinionReplyCardContent>
-            <p>
-              <a href="#">{child.author.username}</a> му реплицирал на{" "}
-              {parentPostAuthorUsername}
+            <p style={{ fontStyle: "italic", marginBottom: "10px" }}>
+              <a href={"/user/" + child.author.id}>{child.author.username}</a>{" "}
+              му реплицирал на {parentPostAuthorUsername}
             </p>
-            <p>{child.content}</p>
+            <p style={{ marginBottom: "10px", maxWidth: "90%" }}>
+              {child.content}
+            </p>
             <OpinionReplyCardContentTime>
               {dateConverter(
@@ -133,36 +164,58 @@
               )}
             </OpinionReplyCardContentTime>
-            {auth && userLoaded && user.user.id !== child.author.id && (
-              <>
-                <StyledFontAwesomeIcon
-                  icon={solid("thumbs-up")}
-                  right={50 + "px"}
-                  color={
-                    child.likes.some((e) => e.id === user.user.id)
+
+            <div
+              style={{
+                display:
+                  !auth || (auth && loadedUser && user.id !== child.author.id)
+                    ? "block"
+                    : "none",
+              }}
+            >
+              <StyledFontAwesomeIcon
+                icon={solid("thumbs-up")}
+                right={50 + "px"}
+                color={
+                  auth && loadedUser && user
+                    ? child.votes.some(
+                        (e) => e.vote === "UPVOTE" && e.user.id === user.id
+                      )
                       ? "greenyellow"
                       : "darkgrey"
-                  }
-                  onClick={() => handleLike(child)}
-                />
-                <VoteCount right={50 + "px"}>{child.likes.length}</VoteCount>
-                <StyledFontAwesomeIcon
-                  icon={solid("thumbs-down")}
-                  right={10 + "px"}
-                  color={
-                    child.dislikes.some((e) => e.id === user.user.id)
+                    : "darkgrey"
+                }
+                onClick={() => handleLike(child)}
+              />
+
+              <VoteCount right={50 + "px"}>
+                {child.votes.filter((v) => v.vote === "UPVOTE").length}
+              </VoteCount>
+
+              <StyledFontAwesomeIcon
+                icon={solid("thumbs-down")}
+                right={10 + "px"}
+                color={
+                  auth && loadedUser && user
+                    ? child.votes.some(
+                        (e) => e.vote === "DOWNVOTE" && e.user.id === user.id
+                      )
                       ? "indianred"
                       : "darkgrey"
-                  }
-                  onClick={() => handleDislike(child)}
-                />
-                <VoteCount right={10 + "px"}>{child.dislikes.length}</VoteCount>
-                <StyledFontAwesomeIcon
-                  icon={solid("reply")}
-                  right={90 + "px"}
-                  color="darkgrey"
-                  onClick={() => handleReply(child)}
-                />
-              </>
-            )}
+                    : "darkgrey"
+                }
+                onClick={() => handleDislike(child)}
+              />
+
+              <VoteCount right={10 + "px"}>
+                {child.votes.filter((v) => v.vote === "DOWNVOTE").length}
+              </VoteCount>
+
+              <StyledFontAwesomeIcon
+                icon={solid("reply")}
+                right={90 + "px"}
+                color="darkgrey"
+                onClick={() => handleReply(child)}
+              />
+            </div>
           </OpinionReplyCardContent>
           {child.children.map((childOfChild) =>
@@ -187,11 +240,13 @@
               <OpinionCard>
                 <OpinionCardContent>
-                  <p>
-                    <a href="#">{opinion.author.username}</a> напишал
+                  <p style={{ fontStyle: "italic", marginBottom: "10px" }}>
+                    <a href={"/user/" + opinion.author.id}>
+                      {opinion.author.username}
+                    </a>{" "}
+                    напишал
                   </p>
-                  <OpinionCardContentTitle>
-                    {opinion.title}
-                  </OpinionCardContentTitle>
-                  <p>{opinion.content}</p>
+                  <p style={{ marginBottom: "10px", maxWidth: "90%" }}>
+                    {opinion.content}
+                  </p>
                   <OpinionCardContentTime>
                     {dateConverter(
@@ -199,40 +254,64 @@
                     )}
                   </OpinionCardContentTime>
-                  {auth && userLoaded && user.user.id !== opinion.author.id && (
-                    <>
-                      <StyledFontAwesomeIcon
-                        icon={solid("thumbs-up")}
-                        right={50 + "px"}
-                        color={
-                          opinion.likes.some((e) => e.id === user.user.id)
+
+                  <div
+                    style={{
+                      display:
+                        !auth ||
+                        (auth && loadedUser && user.id !== opinion.author.id)
+                          ? "block"
+                          : "none",
+                    }}
+                  >
+                    <StyledFontAwesomeIcon
+                      icon={solid("thumbs-up")}
+                      right={50 + "px"}
+                      color={
+                        auth && loadedUser && user
+                          ? opinion.votes.some(
+                              (e) =>
+                                e.vote === "UPVOTE" && e.user.id === user.id
+                            )
                             ? "greenyellow"
                             : "darkgrey"
-                        }
-                        onClick={() => handleLike(opinion)}
-                      />
-                      <VoteCount right={50 + "px"}>
-                        {opinion.likes.length}
-                      </VoteCount>
-                      <StyledFontAwesomeIcon
-                        icon={solid("thumbs-down")}
-                        right={10 + "px"}
-                        color={
-                          opinion.dislikes.some((e) => e.id === user.user.id)
+                          : "darkgrey"
+                      }
+                      onClick={() => handleLike(opinion)}
+                    />
+
+                    <VoteCount right={50 + "px"}>
+                      {opinion.votes.filter((v) => v.vote === "UPVOTE").length}
+                    </VoteCount>
+
+                    <StyledFontAwesomeIcon
+                      icon={solid("thumbs-down")}
+                      right={10 + "px"}
+                      color={
+                        auth && loadedUser && user
+                          ? opinion.votes.some(
+                              (e) =>
+                                e.vote === "DOWNVOTE" && e.user.id === user.id
+                            )
                             ? "indianred"
                             : "darkgrey"
-                        }
-                        onClick={() => handleDislike(opinion)}
-                      />
-                      <VoteCount right={10 + "px"}>
-                        {opinion.dislikes.length}
-                      </VoteCount>
-                      <StyledFontAwesomeIcon
-                        icon={solid("reply")}
-                        right={90 + "px"}
-                        color="darkgrey"
-                        onClick={() => handleReply(opinion)}
-                      />
-                    </>
-                  )}
+                          : "darkgrey"
+                      }
+                      onClick={() => handleDislike(opinion)}
+                    />
+
+                    <VoteCount right={10 + "px"}>
+                      {
+                        opinion.votes.filter((v) => v.vote === "DOWNVOTE")
+                          .length
+                      }
+                    </VoteCount>
+
+                    <StyledFontAwesomeIcon
+                      icon={solid("reply")}
+                      right={90 + "px"}
+                      color="darkgrey"
+                      onClick={() => handleReply(opinion)}
+                    />
+                  </div>
                 </OpinionCardContent>
                 {opinion.children.map((child) =>
@@ -243,4 +322,5 @@
           );
         }
+        return null;
       })}
       {postForModal && (
@@ -266,4 +346,9 @@
                 </label>
               </ModalBody>
+              <p
+                style={{ color: "red", marginLeft: "15px", marginTop: "10px" }}
+              >
+                {errorMessage}
+              </p>
               <ModalFooter type="submit">РЕПЛИЦИРАЈ</ModalFooter>
             </form>
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 c68150fac8ab8e6f5dc5b8b2a9cd73d391dc1aa7)
@@ -18,5 +18,5 @@
 export const EntityParam = styled.p`
   position: absolute;
-  right: 30px;
+  right: ${(props) => props.right};
   top: 10px;
   font-style: italic;
Index: reactapp/src/Components/Styled/Modal.style.js
===================================================================
--- reactapp/src/Components/Styled/Modal.style.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
+++ reactapp/src/Components/Styled/Modal.style.js	(revision c68150fac8ab8e6f5dc5b8b2a9cd73d391dc1aa7)
@@ -18,4 +18,5 @@
   float: right;
   font-weight: bold;
+  box-shadow: 2px 1px 10px #aaaaaa;
 `;
 
Index: reactapp/src/Components/Styled/OpinionCard.style.js
===================================================================
--- reactapp/src/Components/Styled/OpinionCard.style.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
+++ reactapp/src/Components/Styled/OpinionCard.style.js	(revision c68150fac8ab8e6f5dc5b8b2a9cd73d391dc1aa7)
@@ -18,4 +18,5 @@
   }
   position: relative;
+  overflow-wrap: break-word;
 `;
 
@@ -55,4 +56,5 @@
   display: block;
   position: absolute;
+  height: 20px;
   top: 50%;
   transform: translateY(-50%);
@@ -60,5 +62,5 @@
   transition: 0.5s;
   &:hover {
-    color: ${(props) => props.color};
+    opacity: 0.5;
     cursor: pointer;
   }
Index: reactapp/src/Components/SubjectsAccordion.js
===================================================================
--- reactapp/src/Components/SubjectsAccordion.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
+++ reactapp/src/Components/SubjectsAccordion.js	(revision c68150fac8ab8e6f5dc5b8b2a9cd73d391dc1aa7)
@@ -27,56 +27,57 @@
       <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",
-                        }}
-                      >
+          {props.content &&
+            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 right="30px">
+                    {totalPosts !== 1 ? (
+                      totalPosts !== 0 ? (
                         <span
                           style={{
-                            fontWeight: "bold",
+                            fontWeight: "normal",
                             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: "bold",
+                            fontWeight: "normal",
                             opacity: totalPosts === 0 ? "0.5" : "1",
                           }}
                         >
-                          {totalPosts}
-                        </span>{" "}
-                        мислења
+                          <span
+                            style={{
+                              fontWeight: "bold",
+                              opacity: totalPosts === 0 ? "0.5" : "1",
+                            }}
+                          >
+                            {totalPosts}
+                          </span>{" "}
+                          мислења
+                        </span>
+                      )
+                    ) : (
+                      <span style={{ fontWeight: "normal" }}>
+                        <span style={{ fontWeight: "bold" }}>{totalPosts}</span>{" "}
+                        мислење
                       </span>
-                    )
-                  ) : (
-                    <span style={{ fontWeight: "normal" }}>
-                      <span style={{ fontWeight: "bold" }}>{totalPosts}</span>{" "}
-                      мислење
-                    </span>
-                  )}
-                </EntityParam>
-              </EntityLi>
-            );
-          })}
+                    )}
+                  </EntityParam>
+                </EntityLi>
+              );
+            })}
         </EntityUl>
       </SubjectsAccordionDiv>
Index: reactapp/src/Components/UserHeader.js
===================================================================
--- reactapp/src/Components/UserHeader.js	(revision 8d831804abcee99d72c207c57a8f16e54b1329a2)
+++ reactapp/src/Components/UserHeader.js	(revision c68150fac8ab8e6f5dc5b8b2a9cd73d391dc1aa7)
@@ -4,6 +4,29 @@
 import Logout from "./Logout";
 
-function UserHeader({ user, userLoaded }) {
-  return userLoaded ? (
+function UserHeader({}) {
+  const [user, setUser] = useState(null);
+  const [loadedUser, setLoadedUser] = useState(false);
+  const [fetchError, setFetchError] = useState(false);
+
+  useEffect(() => {
+    const url = `http://192.168.0.17:8080/secure/currentUser`;
+
+    const fetchUser = async () => {
+      try {
+        const response = await axios.get(url, { withCredentials: true });
+        var cyclicGraph = await response.data;
+        var jsogStructure = JSOG.encode(cyclicGraph);
+        cyclicGraph = JSOG.decode(jsogStructure);
+        setUser(cyclicGraph);
+        setLoadedUser(true);
+      } catch (error) {
+        setFetchError(true);
+      }
+    };
+
+    fetchUser();
+  }, []);
+
+  return loadedUser ? (
     <div style={{ float: "left", marginTop: 20, marginLeft: 40 }}>
       Најавен/а: <a href="/user_dashboard">{user.username}</a> <Logout />{" "}
