Index: reactapp/src/Components/OpinionCard.style.js
===================================================================
--- reactapp/src/Components/OpinionCard.style.js	(revision e958037ed56064ccf5ff76e5eb90ee688b818450)
+++ reactapp/src/Components/OpinionCard.style.js	(revision 534749107d7ce791ac026288a0e7d713fc09df67)
@@ -5,2 +5,10 @@
   width: fit-content;
 `;
+
+export const OpinionReplyCard = styled.div`
+  background-color: lavender;
+  width: fit-content;
+  margin-top: 7px;
+  margin-bottom: 7px;
+  margin-left: ${(props) => props.indent};
+`;
Index: reactapp/src/Components/OpinionTree.js
===================================================================
--- reactapp/src/Components/OpinionTree.js	(revision e958037ed56064ccf5ff76e5eb90ee688b818450)
+++ reactapp/src/Components/OpinionTree.js	(revision 534749107d7ce791ac026288a0e7d713fc09df67)
@@ -1,3 +1,4 @@
-import { OpinionCard } from "./OpinionCard.style";
+import { OpinionCard, OpinionReplyCard } from "./OpinionCard.style";
+import { dateConverter } from "../Util/dateConverter";
 
 function OpinionTree({ professor }) {
@@ -5,14 +6,26 @@
   var postCount; // za da ne go pokazuva ispod postot
 
-  function displayChildPosts(child) {
+  function displayChildPosts(child, parentPostAuthorUsername, replyIndent) {
     if (child == null) return;
     postCount = renderedOpinionIds.push(child.postId);
     return (
       <div key={child.postId}>
-        <p>
-          <a href="#">{child.author.username}</a> реплицирал
-        </p>
-        <p>Содржина: {child.content}</p>
-        {child.children.map((childOfChild) => displayChildPosts(childOfChild))}
+        <OpinionReplyCard indent={replyIndent + "px"}>
+          <p>
+            <a href="#">{child.author.username}</a> му реплицирал на{" "}
+            {parentPostAuthorUsername}
+          </p>
+          <p>{child.content}</p>
+          <p>
+            {dateConverter(new Date(child.timePosted).toString().slice(4, -43))}
+          </p>
+        </OpinionReplyCard>
+        {child.children.map((childOfChild) =>
+          displayChildPosts(
+            childOfChild,
+            child.author.username,
+            replyIndent + 30
+          )
+        )}
       </div>
     );
@@ -24,4 +37,5 @@
         if (!renderedOpinionIds.includes(opinion.postId)) {
           postCount = renderedOpinionIds.push(opinion.postId);
+          var replyIndent = 30;
           return (
             <div key={opinion.postId}>
@@ -33,7 +47,13 @@
                 <p>{opinion.title}</p>
                 <p>{opinion.content}</p>
-                <p>{Date(opinion.timePosted)}</p>
+                <p>
+                  {dateConverter(
+                    new Date(opinion.timePosted).toString().slice(4, -43)
+                  )}
+                </p>
               </OpinionCard>
-              {opinion.children.map((child) => displayChildPosts(child))}
+              {opinion.children.map((child) =>
+                displayChildPosts(child, opinion.author.username, replyIndent)
+              )}
             </div>
           );
Index: reactapp/src/Pages/Professor.js
===================================================================
--- reactapp/src/Pages/Professor.js	(revision e958037ed56064ccf5ff76e5eb90ee688b818450)
+++ reactapp/src/Pages/Professor.js	(revision 534749107d7ce791ac026288a0e7d713fc09df67)
@@ -48,5 +48,5 @@
           <ProfessorCardName>{professor.professorName}</ProfessorCardName>
           <ProfessorCardSeparator />
-          <div style={{ marginTop: "20px" }}>
+          <div style={{ marginTop: "10px" }}>
             <ProfessorCardDetails fontSize="20px">
               {professor.faculty.facultyName}
Index: reactapp/src/Util/dateConverter.js
===================================================================
--- reactapp/src/Util/dateConverter.js	(revision 534749107d7ce791ac026288a0e7d713fc09df67)
+++ reactapp/src/Util/dateConverter.js	(revision 534749107d7ce791ac026288a0e7d713fc09df67)
@@ -0,0 +1,44 @@
+//date format == Jul 30 2022 14:06
+
+export const dateConverter = (date) => {
+  var months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+  var meseci = [
+    "јануари",
+    "февруари",
+    "март",
+    "април",
+    "мај",
+    "јуни",
+    "јули",
+    "август",
+    "септември",
+    "октомври",
+    "ноември",
+    "декември",
+  ];
+
+  var datum = "";
+  var day = date.substring(4, 6);
+  datum = datum + day;
+  var month = date.substring(0, 3);
+  datum = datum + " " + meseci[months.indexOf(month)];
+  var year = date.substring(7, 11);
+  datum = datum + " " + year;
+  var time = date.substring(12, 17);
+  datum = datum + " " + "во" + " " + time;
+
+  return datum;
+};
