Index: reactapp/src/App.js
===================================================================
--- reactapp/src/App.js	(revision 6eba109d7d2a405c2c4bf11d744ceb4c8a56c9da)
+++ reactapp/src/App.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -4,5 +4,5 @@
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import Home from "./Pages/Home";
-import User from "./Pages/User";
+import UserDashboard from "./Pages/UserDashboard";
 import { useEffect, useState, useMemo } from "react";
 import AuthApi from "./api/AuthApi";
@@ -12,10 +12,14 @@
   const [auth, setAuth] = useState(false);
   const variableAuth = useMemo(() => ({ auth, setAuth }), [auth]);
+  const [authLoaded, setAuthLoaded] = useState(false);
 
-  const readCookie = () => {
+  const readCookie = async () => {
     const session = Cookies.get("JSESSIONID");
     if (session) {
       setAuth(true); // go stava true ako postoi takvo cookie (zasto auth=false na sekoe renderiranje)
+    } else {
+      setAuth(false);
     }
+    setAuthLoaded(true);
   };
 
@@ -25,8 +29,12 @@
 
   const ProtectedRoute = ({ auth, children }) => {
-    if (!auth) {
-      return <Navigate to="/login" replace />;
+    if (authLoaded) {
+      if (!auth) {
+        return <Navigate to="/login" replace />;
+      }
+      return children;
+    } else {
+      return <div>се вчитува cookie...</div>;
     }
-    return children;
   };
 
@@ -42,8 +50,8 @@
             <Route path="search" element={<SearchResults />}></Route>
             <Route
-              path="user"
+              path="user_dashboard"
               element={
                 <ProtectedRoute auth={auth}>
-                  <User />
+                  <UserDashboard />
                 </ProtectedRoute>
               }
Index: reactapp/src/Components/Logout.js
===================================================================
--- reactapp/src/Components/Logout.js	(revision 6eba109d7d2a405c2c4bf11d744ceb4c8a56c9da)
+++ reactapp/src/Components/Logout.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -2,4 +2,6 @@
 import AuthApi from "../api/AuthApi";
 import Cookies from "js-cookie";
+import { LogoutButton } from "./Styled/UserDetails.style";
+import { Navigate } from "react-router-dom";
 
 function Logout() {
@@ -11,5 +13,5 @@
   };
 
-  return <button onClick={handleLogout}>Одјави се</button>;
+  return <LogoutButton onClick={handleLogout}>Одјави се</LogoutButton>;
 }
 
Index: reactapp/src/Components/Search.js
===================================================================
--- reactapp/src/Components/Search.js	(revision 6eba109d7d2a405c2c4bf11d744ceb4c8a56c9da)
+++ reactapp/src/Components/Search.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -15,5 +15,5 @@
 
   useEffect(() => {
-    const url = `http://192.168.0.18:8080/public/professors/nameContains/${transliterate(
+    const url = `http://192.168.0.17:8080/public/professors/nameContains/${transliterate(
       query
     )}`;
@@ -23,10 +23,9 @@
         const response = await fetch(url);
         var cyclicGraph = await response.json();
-        var jsogStructure = JSOG.encode(cyclicGraph); // has { '@ref': 'ID' } links instead of cycles
+        var jsogStructure = JSOG.encode(cyclicGraph);
         cyclicGraph = JSOG.decode(jsogStructure);
         setProfessors(cyclicGraph);
-        //setLoaded(true);
       } catch (error) {
-        console.log("Fetching error occured", error);
+        console.log("Fetching error", error);
       }
     };
Index: reactapp/src/Components/Styled/Main.style.js
===================================================================
--- reactapp/src/Components/Styled/Main.style.js	(revision 6eba109d7d2a405c2c4bf11d744ceb4c8a56c9da)
+++ reactapp/src/Components/Styled/Main.style.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -6,4 +6,5 @@
   margin: auto;
   margin-top: 20px;
+  margin-bottom: 20px;
   padding-left: 50px;
   padding-right: 50px;
Index: reactapp/src/Components/Styled/Modal.style.js
===================================================================
--- reactapp/src/Components/Styled/Modal.style.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
+++ reactapp/src/Components/Styled/Modal.style.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -0,0 +1,111 @@
+import styled, { keyframes } from "styled-components";
+
+export const AddOpinionButton = styled.button`
+  font-family: "Roboto Mono", monospace;
+  background-color: #0066cc;
+  border: none;
+  color: white;
+  padding: 8px 16px;
+  text-align: center;
+  font-size: 16px;
+  opacity: 0.6;
+  transition: 0.3s;
+  text-decoration: none;
+  cursor: pointer;
+  &:hover {
+    opacity: 1;
+  }
+  float: right;
+  font-weight: bold;
+`;
+
+export const Modal = styled.div`
+  display: ${(props) => props.display};
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
+`;
+
+const animatetop = keyframes`
+  from {
+    top: -300px;
+    opacity: 0;
+  }
+  to {
+    top: 0;
+    opacity: 1;
+  }
+`;
+
+export const ModalContent = styled.div`
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 80%;
+  animation: ${animatetop} 0.4s;
+`;
+
+export const ModalClose = styled.span`
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  transition: 0.4s;
+  &:hover,
+  :focus {
+    background-color: black;
+    text-decoration: none;
+    cursor: pointer;
+  }
+`;
+
+export const ModalHeader = styled.div`
+  padding: 2px 16px;
+  background-color: rgba(0, 102, 204, 0.6);
+  color: white;
+  height: 40px;
+  margin-bottom: 10px;
+`;
+
+export const ModalFooter = styled.div`
+  padding: 2px 16px;
+  background-color: rgba(0, 102, 204, 1);
+  opacity: 0.6;
+  color: white;
+  height: 40px;
+  margin-top: 10px;
+  transition: 0.4s;
+  &:hover {
+    opacity: 1;
+    cursor: pointer;
+  }
+`;
+
+export const ModalBody = styled.div`
+  padding: 2px 16px;
+`;
+
+export const ModalInput = styled.input`
+  margin-top: 5px;
+  margin-bottom: 5px;
+  display: block;
+  height: 30px;
+  width: 372px;
+  padding: 12px 16px;
+  border: 1px solid #ccc;
+`;
+
+export const ModalTextarea = styled.textarea`
+  margin-top: 5px;
+  margin-bottom: 5px;
+  display: block;
+  padding: 12px 16px;
+  border: 1px solid #ccc;
+`;
Index: reactapp/src/Components/Styled/Search.style.js
===================================================================
--- reactapp/src/Components/Styled/Search.style.js	(revision 6eba109d7d2a405c2c4bf11d744ceb4c8a56c9da)
+++ reactapp/src/Components/Styled/Search.style.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -30,6 +30,6 @@
   &:hover {
     background-color: papayawhip;
-    border: 1px solid blue;
-    text-decoration: underline 1px blue;
+    border: 1px solid #0066cc;
+    text-decoration: underline 1px #0066cc;
   }
   padding: 10px;
Index: reactapp/src/Components/Styled/UserDetails.style.js
===================================================================
--- reactapp/src/Components/Styled/UserDetails.style.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
+++ reactapp/src/Components/Styled/UserDetails.style.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -0,0 +1,31 @@
+import styled from "styled-components";
+
+export const UserDetailsCard = styled.div`
+  width: auto;
+  padding: 10px;
+  margin-top: 20px;
+  margin-bottom: 30px;
+`;
+
+export const UserDetailsCardContent = styled.p`
+  padding-top: 7px;
+  padding-bottom: 7px;
+`;
+
+export const LogoutButton = styled.button`
+  font-family: "Roboto Mono", monospace;
+  background-color: tan;
+  border: none;
+  color: white;
+  padding: 4px 8px;
+  text-align: center;
+  font-size: 16px;
+  opacity: 0.6;
+  transition: 0.3s;
+  display: inline-block;
+  text-decoration: none;
+  cursor: pointer;
+  &:hover {
+    opacity: 1;
+  }
+`;
Index: reactapp/src/Components/UserHeader.js
===================================================================
--- reactapp/src/Components/UserHeader.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
+++ reactapp/src/Components/UserHeader.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react";
+import JSOG from "jsog";
+import axios from "../api/axios";
+import Logout from "./Logout";
+
+function UserHeader() {
+  const [user, setUser] = useState(null);
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get(
+          "http://192.168.0.17:8080/secure/currentUser",
+          { withCredentials: true }
+        );
+        var cyclicGraph = await response.data;
+        var jsogStructure = JSOG.encode(cyclicGraph);
+        cyclicGraph = JSOG.decode(jsogStructure);
+        setUser(cyclicGraph);
+        setLoaded(true);
+      } catch (error) {
+        console.log("Fetching error", error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return loaded ? (
+    <div style={{ float: "left", marginTop: 20, marginLeft: 40 }}>
+      Најавен/а: <a href="/user_dashboard">{user.username}</a> <Logout />{" "}
+    </div>
+  ) : (
+    <div style={{ float: "left", marginTop: 25, marginLeft: 60 }}>
+      се вчитува...
+    </div>
+  );
+}
+
+export default UserHeader;
Index: reactapp/src/Pages/Home.js
===================================================================
--- reactapp/src/Pages/Home.js	(revision 6eba109d7d2a405c2c4bf11d744ceb4c8a56c9da)
+++ reactapp/src/Pages/Home.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -1,8 +1,12 @@
-import React from "react";
+import React, { useContext } from "react";
 import { MainWrapper, MainTitle } from "../Components/Styled/Main.style";
 import { Outlet } from "react-router-dom";
 import Search from "../Components/Search";
+import UserHeader from "../Components/UserHeader";
+import AuthApi from "../api/AuthApi";
 
 function Home() {
+  const { auth, setAuth } = useContext(AuthApi);
+
   return (
     <MainWrapper>
@@ -20,4 +24,5 @@
       </a>{" "}
       <Search />
+      {auth && <UserHeader />}
       <div style={{ marginTop: "140px" }}></div>
       <Outlet />
Index: reactapp/src/Pages/Login.js
===================================================================
--- reactapp/src/Pages/Login.js	(revision 6eba109d7d2a405c2c4bf11d744ceb4c8a56c9da)
+++ reactapp/src/Pages/Login.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -45,21 +45,6 @@
   };
 
-  const handleLogout = () => {
-    setAuth(false);
-    Cookies.remove("JSESSIONID");
-  };
-
   return auth ? (
-    /*
-    <div style={{ marginTop: "140px" }}>
-      <h1>Успешна најава!</h1>
-      <br />
-      <p>
-        <a href="/user">Оди на protected</a>
-      </p>
-      <button onClick={handleLogout}>Одјави се</button>
-    </div>
-    */
-    <Navigate to="/user" />
+    <Navigate to="/user_dashboard" />
   ) : (
     <div style={{ marginTop: "140px" }}>
Index: reactapp/src/Pages/Professor.js
===================================================================
--- reactapp/src/Pages/Professor.js	(revision 6eba109d7d2a405c2c4bf11d744ceb4c8a56c9da)
+++ reactapp/src/Pages/Professor.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -1,7 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { Outlet, useParams } from "react-router-dom";
 import JSOG from "jsog";
 import OpinionTree from "../Components/OpinionTree";
-
+import {
+  AddOpinionButton,
+  Modal,
+  ModalContent,
+  ModalClose,
+  ModalHeader,
+  ModalBody,
+  ModalInput,
+  ModalTextarea,
+  ModalFooter,
+} from "../Components/Styled/Modal.style";
 import {
   ProfessorCard,
@@ -10,13 +20,20 @@
   ProfessorCardSeparator,
 } from "../Components/Styled/ProfessorCard.style";
+import AuthApi from "../api/AuthApi";
+import { useNavigate } from "react-router-dom";
 
-function Professor(props) {
+function Professor() {
   let params = useParams();
 
   let [professor, setProfessor] = useState(null);
   let [loaded, setLoaded] = useState(null);
+  let [modalDisplay, setModalDisplay] = useState("none");
+  let navigate = useNavigate();
+  const { auth, setAuth } = useContext(AuthApi);
+  const [addPostTitle, setAddPostTitle] = useState("");
+  const [addPostContent, setAddPostContent] = useState("");
 
   useEffect(() => {
-    const url = `http://192.168.0.18:8080/public/professor/${params.professorId}`;
+    const url = `http://192.168.0.17:8080/public/professor/${params.professorId}`;
 
     const fetchData = async () => {
@@ -24,10 +41,10 @@
         const response = await fetch(url);
         var cyclicGraph = await response.json();
-        var jsogStructure = JSOG.encode(cyclicGraph); // has { '@ref': 'ID' } links instead of cycles
+        var jsogStructure = JSOG.encode(cyclicGraph);
         cyclicGraph = JSOG.decode(jsogStructure);
         setProfessor(cyclicGraph);
         setLoaded(true);
       } catch (error) {
-        console.log("Error", error);
+        console.log("Fetching error", error);
       }
     };
@@ -35,4 +52,27 @@
     fetchData();
   }, [params.professorId]);
+
+  const handleAddOpinionButtonClick = () => {
+    if (auth) {
+      setModalDisplay("block");
+    } else {
+      navigate("/login");
+    }
+  };
+
+  const handleModalCloseClick = () => {
+    setModalDisplay("none");
+    console.log("here");
+  };
+
+  const handlePostSubmit = () => {};
+
+  const handleTitleChange = (e) => {
+    setAddPostTitle(e.target.value);
+  };
+
+  const handleContentChange = (e) => {
+    setAddPostContent(e.target.value);
+  };
 
   if (loaded) {
@@ -51,8 +91,55 @@
           </div>
         </ProfessorCard>
-        <h3 style={{ marginBottom: "10px" }}>
-          {professor.relatedOpinions.length}{" "}
-          {professor.relatedOpinions.length !== 1 ? "мислења" : "мислење"}
-        </h3>
+        <div style={{ height: "20px", marginBottom: "30px" }}>
+          <h3
+            style={{
+              float: "left",
+            }}
+          >
+            {professor.relatedOpinions.length}{" "}
+            {professor.relatedOpinions.length !== 1 ? "мислења" : "мислење"}
+          </h3>
+          <AddOpinionButton onClick={handleAddOpinionButtonClick}>
+            Објави мислење
+          </AddOpinionButton>
+        </div>
+
+        <Modal display={modalDisplay}>
+          <ModalContent>
+            <ModalHeader>
+              <ModalClose onClick={handleModalCloseClick}>&times;</ModalClose>
+              <h3 style={{ marginTop: "5px" }}>
+                Мислење за {professor.professorName}
+              </h3>
+            </ModalHeader>
+            <ModalBody>
+              <form onSubmit={handlePostSubmit}>
+                <label for="title">
+                  <b>Наслов</b>:
+                  <ModalInput
+                    id="title"
+                    type="text"
+                    value={addPostTitle}
+                    onChange={handleTitleChange}
+                  />
+                </label>
+                <label for="content">
+                  <b>Содржина</b>:
+                  <ModalTextarea
+                    id="content"
+                    rows="8"
+                    cols="100"
+                    value={addPostContent}
+                    onChange={handleContentChange}
+                  />
+                </label>
+              </form>
+            </ModalBody>
+            <ModalFooter>
+              <h2 style={{ textAlign: "center" }}>ОБЈАВИ</h2>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+
         <div className="opinionTree">
           <OpinionTree professor={professor} />
Index: reactapp/src/Pages/User.js
===================================================================
--- reactapp/src/Pages/User.js	(revision 6eba109d7d2a405c2c4bf11d744ceb4c8a56c9da)
+++ 	(revision )
@@ -1,17 +1,0 @@
-import React, { useState, useContext } from "react";
-import AuthApi from "../api/AuthApi";
-
-import Logout from "../Components/Logout";
-
-function User() {
-  const { auth, setAuth } = useContext(AuthApi);
-
-  return (
-    <>
-      user page
-      <Logout />
-    </>
-  );
-}
-
-export default User;
Index: reactapp/src/Pages/UserDashboard.js
===================================================================
--- reactapp/src/Pages/UserDashboard.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
+++ reactapp/src/Pages/UserDashboard.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from "react";
+import JSOG from "jsog";
+import axios from "../api/axios";
+import {
+  OpinionCard,
+  OpinionCardContent,
+  OpinionCardContentTime,
+  OpinionCardContentTitle,
+} from "../Components/Styled/OpinionCard.style";
+import {
+  UserDetailsCard,
+  UserDetailsCardContent,
+} from "../Components/Styled/UserDetails.style";
+import { dateConverter } from "../Util/dateConverter";
+
+function UserDashboard() {
+  const [user, setUser] = useState(null);
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await axios.get(
+          "http://192.168.0.17:8080/secure/currentUser",
+          { withCredentials: true }
+        );
+        var cyclicGraph = await response.data;
+        var jsogStructure = JSOG.encode(cyclicGraph);
+        cyclicGraph = JSOG.decode(jsogStructure);
+        setUser(cyclicGraph);
+        setLoaded(true);
+      } catch (error) {
+        console.log("Fetching error", error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return loaded ? (
+    <>
+      <h3>Кориснички податоци:</h3>
+      <UserDetailsCard>
+        <UserDetailsCardContent>
+          <b>Име:</b> {user.fullName}{" "}
+          <i style={{ fontSize: 14, color: "#0066cc" }}>
+            (<u>промени</u>)
+          </i>
+        </UserDetailsCardContent>
+        <UserDetailsCardContent>
+          <b>Корисничко име:</b> {user.username}{" "}
+          <i style={{ fontSize: 14, color: "#0066cc" }}>
+            (<u>промени</u>)
+          </i>
+        </UserDetailsCardContent>
+        <UserDetailsCardContent>
+          <b>E-mail:</b> {user.email}
+        </UserDetailsCardContent>
+        <UserDetailsCardContent>
+          <b>Карма:</b> {user.karma}
+        </UserDetailsCardContent>
+      </UserDetailsCard>
+      {user.authoredPosts.length > 0 ? (
+        <h3 style={{ marginBottom: "10px" }}>Ваши мислења:</h3>
+      ) : (
+        <h3>Немате објавени мислења</h3>
+      )}
+      {user.authoredPosts.map((post) => {
+        return (
+          <div key={post.postId}>
+            <OpinionCard>
+              <OpinionCardContent>
+                <p>
+                  Во дискусија за{" "}
+                  <a href={"/professor/" + post.targetProfessor.professorId}>
+                    {post.targetProfessor.professorName}
+                  </a>
+                </p>
+                <OpinionCardContentTitle>{post.title}</OpinionCardContentTitle>
+                <p>{post.content}</p>
+                <OpinionCardContentTime>
+                  {dateConverter(
+                    new Date(post.timePosted).toString().slice(4, -43)
+                  )}
+                </OpinionCardContentTime>
+              </OpinionCardContent>
+            </OpinionCard>
+          </div>
+        );
+      })}
+    </>
+  ) : (
+    <>се вчитува...</>
+  );
+}
+
+export default UserDashboard;
Index: reactapp/src/api/axios.js
===================================================================
--- reactapp/src/api/axios.js	(revision 6eba109d7d2a405c2c4bf11d744ceb4c8a56c9da)
+++ reactapp/src/api/axios.js	(revision 702ca779afcdb48bcc15202ffc07dfb4be2efebd)
@@ -2,4 +2,4 @@
 
 export default axios.create({
-  baseURL: "http://192.168.0.18:8080",
+  baseURL: "http://192.168.0.17:8080",
 });
