diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index 22291acc..02716bd1 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -1677,6 +1677,8 @@ label {
 /* --------------------------------------pedagogy-----------------------------------*/
 
 $pedagogy-blue: #1bb9ea;
+$pedagogy-orange: #ea7900;
+$pedagogy-hover-blue: #0e97ce;
 $pedagogy-light-blue: #caf0ff;
 $pedagogy-white-text: #f0f0f0;
 
@@ -1685,7 +1687,7 @@ $pedagogy-white-text: #f0f0f0;
     color : #f7f7f7;
   }
   &.star_checked {
-    color: #ea7900;
+    color: $pedagogy-orange;
   }
   &.stars_grade {
     display: none;
@@ -1728,7 +1730,7 @@ $pedagogy-white-text: #f0f0f0;
     height: 21px;
   }
   .button_search {
-    background: #ea7900;
+    background: $pedagogy-orange;
     color: white;
     font-weight: bold;
     margin-left: 20px;
@@ -1749,13 +1751,13 @@ $pedagogy-white-text: #f0f0f0;
     border-radius: 4px;
   }
   .radio_guide input[type="radio"]:checked + label {
-    background-color:#ea7900;
+    background-color:$pedagogy-orange;
   }
   .radio_guide input[type="checkbox"]:checked + label {
-    background-color:#ea7900;
+    background-color:$pedagogy-orange;
   }
   .radio_guide  label:hover {
-    background-color:  #0e97ce;
+    background-color:  $pedagogy-hover-blue;
   }
 
   #radioAUTUMN + label {
@@ -1767,10 +1769,70 @@ $pedagogy-white-text: #f0f0f0;
   font-family: "Fira Sans";
   color: #062f38;
 
+  .department-credit-type-semester-container {
+    display: grid;
+    grid-template-columns: 10% 10% auto;
+    grid-template-rows: 100%;
+    grid-template-areas: "department credit-type semester";
+  }
+
+  .department {
+    grid-area: department;
+  }
+
+  .credit-type {
+    grid-area: credit-type;
+  }
+
+  .semester {
+    grid-area: semester;
+  }
+
+  #leave_comment {
+    .leave-comment-grid-container {
+      display: grid;
+      grid-template-columns: 270px auto;
+      grid-template-rows: 100%;
+      grid-template-areas: "stars comment";
+    }
+
+    .ui-accordion-content {
+      background-color: $white-color;
+      border-color: $pedagogy-orange;
+      border-right: none;
+    }
+
+    .form-stars {
+      grid-area: stars;
+    }
+
+    .form-comment {
+      grid-area: comment;
+    }
+
+    .ui-accordion-header {
+      background-color: $pedagogy-orange;
+      color: $pedagogy-white-text;
+      clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
+    }
+
+    .ui-accordion-header-icon {
+      color: $pedagogy-white-text;
+      margin-right: 10px;
+    }
+
+    .input-stars {
+      margin-top: 20px;
+    }
+
+    input[type="submit"] {
+      float: right;
+    }
+  }
 
   .grid-container {
     display: grid;
-    grid-template-columns: 10% 9% 1fr;
+    grid-template-columns: 150px 100px auto;
     grid-template-rows: 156px 1fr;
     grid-template-areas: "grade grade-stars uv-infos" ". . uv-infos";
   }
@@ -1810,9 +1872,9 @@ $pedagogy-white-text: #f0f0f0;
       float: right;
     }
 
-    .grade_block {
+    .grade-block {
 
-      .dif_grade {
+      .dif-grade {
         height: 156px;
         width: 8%;
         background-color: $pedagogy-blue;
@@ -1838,7 +1900,7 @@ $pedagogy-white-text: #f0f0f0;
       }
 
     @media screen and (max-width: $large-devices) {
-        .dif_grade {
+        .dif-grade {
           width: 11%;
         }
 
@@ -1848,7 +1910,7 @@ $pedagogy-white-text: #f0f0f0;
       }
     }
 
-    .not_rated {
+    .grade-text {
       color: $pedagogy-white-text;
       text-align: center;
     }
@@ -1858,7 +1920,7 @@ $pedagogy-white-text: #f0f0f0;
       width: 100%;
       float: left;
 
-      .date_info {
+      .date-info {
         color: $pedagogy-white-text;
         text-align: center;
         width : 34%;
@@ -1873,7 +1935,7 @@ $pedagogy-white-text: #f0f0f0;
 
       }
 
-      .author_info {
+      .author-info {
         color: $pedagogy-white-text;
         text-align: center;
         font-weight: bold;
@@ -1886,7 +1948,7 @@ $pedagogy-white-text: #f0f0f0;
       }
 
       .report {
-        background-color: #ea7900;
+        background-color: $pedagogy-orange;
         clip-path: polygon(0 0%, 0 100%, 40% 100%, 30% 0);
         width : 33%;
 
@@ -1913,7 +1975,7 @@ $pedagogy-white-text: #f0f0f0;
       margin: 0px;
     }
 
-    .status_reported {
+    .status-reported {
       color: red;
       float: left;
       padding: 5px;
diff --git a/pedagogy/templates/pedagogy/macros.jinja b/pedagogy/templates/pedagogy/macros.jinja
index bb0603e9..e6d1270d 100644
--- a/pedagogy/templates/pedagogy/macros.jinja
+++ b/pedagogy/templates/pedagogy/macros.jinja
@@ -8,9 +8,9 @@
                 <span class="fa fa-star pedagogy star_not_checked"></span>
             {% endif %}
         {% endfor %}
-        <span class="pedagogy stars_grade not_rated">{{ grade + 1 }}/5</span>
+        <span class="pedagogy stars_grade grade-text">{{ grade + 1 }}/5</span>
     {% else %}
-        <span class="not_rated"> {% trans %} not rated {% endtrans %} </span>
+        <span class="grade-text"> {% trans %} not rated {% endtrans %} </span>
     {% endif %}
 
 {%- endmacro %}
\ No newline at end of file
diff --git a/pedagogy/templates/pedagogy/uv_detail.jinja b/pedagogy/templates/pedagogy/uv_detail.jinja
index 98b9acad..1122b26a 100644
--- a/pedagogy/templates/pedagogy/uv_detail.jinja
+++ b/pedagogy/templates/pedagogy/uv_detail.jinja
@@ -19,7 +19,18 @@
 		})()' hidden>{% trans %}Back{% endtrans %}</button>
 
 		<h1>{{ object.code }} - {{ object.title }}</h1>
-		<p style = "word-spacing: 20px;">{{ object.department }} {{ object.credit_type }} {{ object.semester_translated }}</p>
+		<br>
+		<div class="department-credit-type-semester-container">
+			<div class="department">
+				{{ object.department }}
+			</div>
+			<div class="credit-type">
+				{{ object.credit_type }}
+			</div>
+			<div class="semester">
+				{{ object.semester_translated }}
+			</div>
+		</div>
 
 		<br>
 
@@ -51,12 +62,68 @@
 			</div>
 		</div>
 
+		<br>
+		<div id="leave_comment">
+			<h2>{% trans %}Leave comment{% endtrans %}</h2>
+			<div>
+				<form action="{{ url('pedagogy:uv_detail', uv_id=object.id) }}" method="post" enctype="multipart/form-data">
+					{% csrf_token %}
+					<div class="leave-comment-grid-container">
+						<div class="form-stars">
+							{{ form.author.errors }}
+							{{ form.uv.errors }}
+
+							{{ form.author }}
+							{{ form.uv }}
+
+							<div class="input-stars">
+								<label for="{{ form.grade_global.id_for_label }}">{{ form.grade_global.label }} :</label>
+								{{ form.grade_global.errors }}
+								{{ form.grade_global }}
+							</div>
+
+							<div class="input-stars">
+								<label for="{{ form.grade_utility.id_for_label }}">{{ form.grade_utility.label }} :</label>
+								{{ form.grade_utility.errors }}
+								{{ form.grade_utility }}
+							</div>
+
+							<div class="input-stars">
+								<label for="{{ form.grade_interest.id_for_label }}">{{ form.grade_interest.label }} :</label>
+								{{ form.grade_interest.errors }}
+								{{ form.grade_interest }}
+							</div>
+
+							<div class="input-stars">
+								<label for="{{ form.grade_teaching.id_for_label }}">{{ form.grade_teaching.label }} :</label>
+								{{ form.grade_teaching.errors }}
+								{{ form.grade_teaching }}
+							</div>
+
+							<div class="input-stars">
+								<label for="{{ form.grade_work_load.id_for_label }}">{{ form.grade_work_load.label }} :</label>
+								{{ form.grade_work_load.errors }}
+								{{ form.grade_work_load }}
+							</div>
+						</div>
+						<div class="form-comment">
+							<label for="{{ form.comment.id_for_label }}">{{ form.comment.label }} :</label>
+							{{ form.comment.errors }}
+							{{ form.comment }}
+						</div>
+					</div>
+					<p><input type="submit" value="{% trans %}Comment{% endtrans %}" /></p>
+				</form>
+			</div>
+		</div>
+		<br>
+
 		{% if object.comments.exists() %}
 			<h2>{% trans %}Comments{% endtrans %}</h2>
 			{% for comment in object.comments.order_by("-publish_date").all() %}
 				<div id="{{ comment.id }}" class="comment">
-					<div class="grade_block">
-						<div class="dif_grade">
+					<div class="grade-block">
+						<div class="dif-grade">
 							<p>{% trans %}global grade{% endtrans %}</p>
 							<p>{% trans %}utility{% endtrans %}</p>
 							<p>{% trans %}interest{% endtrans %}</p>
@@ -77,7 +144,7 @@
 					{{ comment.comment|markdown }}
 
 					{% if comment.is_reported %}
-						<p class="status_reported">
+						<p class="status-reported">
 							{% trans %}This comment has been reported{% endtrans %}
 						</p>
 					{% endif %}
@@ -91,24 +158,34 @@
 
 					<div class="info">
 						<p class="report"><a href="{{ url('pedagogy:comment_report', comment_id=comment.id) }}">{% trans %}Report this comment{% endtrans %}</a></p>
-						<p class="date_info">{{ comment.publish_date.strftime('%d/%m/%Y') }}</p>
-						<p class="author_info">{{ comment.author }}</p>
+						<p class="date-info">{{ comment.publish_date.strftime('%d/%m/%Y') }}</p>
+						<p class="author-info">{{ comment.author }}</p>
 					</div>
 
 				</div>
 			{% endfor %}
 		{% endif %}
 
-		<h2>{% trans %}Leave comment{% endtrans %}</h2>
-		<form action="{{ url('pedagogy:uv_detail', uv_id=object.id) }}" method="post" enctype="multipart/form-data">
-			{% csrf_token %}
-			{{ form.as_p() }}
-			<p><input type="submit" value="{% trans %}Comment{% endtrans %}" /></p>
-		</form>
 	</div>
 
 	<script type="text/javascript">
 		$("#return_noscript").hide();
 		$("#return_js").show();
+		var icons = {
+			header: "fa fa-toggle-right",
+			activeHeader: "fa fa-toggle-down"
+		};
+		$(function(){
+			$("#leave_comment").accordion({
+				icons: icons,
+			    heightStyle: "content",
+			    active: false,
+			    collapsible: true
+			});
+		});
+		// Remove jquery-ui icons to make fontawesome work
+		$(document).ready(function(){
+			$(".ui-accordion-header-icon").first().removeClass("ui-icon");
+		});
 	</script>
 {% endblock %}