diff --git a/core/static/core/firasans/fonts/FiraSans-Black.ttf b/core/static/core/firasans/fonts/FiraSans-Black.ttf
new file mode 100644
index 00000000..b40cf627
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-Black.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-BlackItalic.ttf b/core/static/core/firasans/fonts/FiraSans-BlackItalic.ttf
new file mode 100644
index 00000000..30aa8062
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-BlackItalic.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-Bold.ttf b/core/static/core/firasans/fonts/FiraSans-Bold.ttf
new file mode 100644
index 00000000..f5bf9bcf
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-Bold.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-BoldItalic.ttf b/core/static/core/firasans/fonts/FiraSans-BoldItalic.ttf
new file mode 100644
index 00000000..7ac379f0
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-BoldItalic.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-ExtraBold.ttf b/core/static/core/firasans/fonts/FiraSans-ExtraBold.ttf
new file mode 100644
index 00000000..f477455e
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-ExtraBold.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-ExtraBoldItalic.ttf b/core/static/core/firasans/fonts/FiraSans-ExtraBoldItalic.ttf
new file mode 100644
index 00000000..31b74041
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-ExtraBoldItalic.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-ExtraLight.ttf b/core/static/core/firasans/fonts/FiraSans-ExtraLight.ttf
new file mode 100644
index 00000000..faf1cfb8
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-ExtraLight.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-ExtraLightItalic.ttf b/core/static/core/firasans/fonts/FiraSans-ExtraLightItalic.ttf
new file mode 100644
index 00000000..3b353223
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-ExtraLightItalic.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-Italic.ttf b/core/static/core/firasans/fonts/FiraSans-Italic.ttf
new file mode 100644
index 00000000..f8d4e7ea
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-Italic.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-Light.ttf b/core/static/core/firasans/fonts/FiraSans-Light.ttf
new file mode 100644
index 00000000..63be25f1
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-Light.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-LightItalic.ttf b/core/static/core/firasans/fonts/FiraSans-LightItalic.ttf
new file mode 100644
index 00000000..ee8ba596
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-LightItalic.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-Medium.ttf b/core/static/core/firasans/fonts/FiraSans-Medium.ttf
new file mode 100644
index 00000000..efa2e0cf
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-Medium.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-MediumItalic.ttf b/core/static/core/firasans/fonts/FiraSans-MediumItalic.ttf
new file mode 100644
index 00000000..817ed641
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-MediumItalic.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-Regular.ttf b/core/static/core/firasans/fonts/FiraSans-Regular.ttf
new file mode 100644
index 00000000..159ccfdb
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-Regular.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-SemiBold.ttf b/core/static/core/firasans/fonts/FiraSans-SemiBold.ttf
new file mode 100644
index 00000000..535a6504
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-SemiBold.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-SemiBoldItalic.ttf b/core/static/core/firasans/fonts/FiraSans-SemiBoldItalic.ttf
new file mode 100644
index 00000000..0d134e5a
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-SemiBoldItalic.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-Thin.ttf b/core/static/core/firasans/fonts/FiraSans-Thin.ttf
new file mode 100644
index 00000000..162ea865
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-Thin.ttf differ
diff --git a/core/static/core/firasans/fonts/FiraSans-ThinItalic.ttf b/core/static/core/firasans/fonts/FiraSans-ThinItalic.ttf
new file mode 100644
index 00000000..6febc772
Binary files /dev/null and b/core/static/core/firasans/fonts/FiraSans-ThinItalic.ttf differ
diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index bfd84785..f5270c72 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -1673,9 +1673,76 @@ label {
 
 .pedagogy {
   &.star_not_checked {
-    color : gray;
+    color : #f7f7f7;
   }
   &.star_checked {
-    color : orange;
+    color: #ea7900;
   }
 }
+
+#pedagogy {
+  font-family: "Fira Sans";
+  color: #062f38;
+  background-color: #caf0ff;
+  .comment{
+    background-color: #caf0ff;
+    max-width: 100%;
+    max-height: 200px;
+    overflow: hidden;
+    margin-bottom: 40px;
+
+    .grade{
+      height: 200px;
+      float: left;
+      text-align: left;
+      padding: 15px;
+      padding-right: 40px;
+      padding-top: 0px;
+      clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 20%, 75% 0);
+      background-color: #1bb9ea;
+    }
+
+    .dif_grade{
+      background-color: #1bb9ea;
+      color: #f0f0f0;
+      height: 200px;
+      float: left;
+      text-align: right;
+      padding: 15px;
+      padding-top: 0px;
+    }
+
+    .author_info{
+      background-color: #1bb9ea;
+      color: #f0f0f0;
+      text-align: center;
+      width: 50px;
+      padding: 5px;
+      margin: 0px;
+      float: left;
+      padding-right: 50px;
+      clip-path: polygon(0 0, 0 100%, 100% 100%, 75% 0);
+    }
+    .date_info{
+      background-color: #1bb9ea;
+      color: #f0f0f0;
+      float: left;
+      text-align: center;
+      width : 34%;
+      padding: 5px;
+      margin: 0px;
+    }
+
+    .text{
+      height: 125px;
+      margin-top: 0px;
+      margin-right: 0px;
+      padding: 10px;
+      padding-left: 40px;
+      margin-bottom: 29px;
+      overflow: auto;
+      text-align: justify;
+      background-color: #caf0ff;
+    }
+  }  
+}
\ No newline at end of file
diff --git a/pedagogy/templates/pedagogy/uv_detail.jinja b/pedagogy/templates/pedagogy/uv_detail.jinja
index 8d65c1a2..4861a050 100644
--- a/pedagogy/templates/pedagogy/uv_detail.jinja
+++ b/pedagogy/templates/pedagogy/uv_detail.jinja
@@ -6,47 +6,65 @@
 {% endblock %}
 
 {% block content %}
-	<p><a href="{{ url('pedagogy:guide') }}">{% trans %}Back{% endtrans %}</a></p>
-	<h1>{{ object.code }} - {{ object.title }}</h1>
-	<p>{% trans %}Department: {% endtrans %}{{ object.department }}</p>
-	<p>{{ object.objectives|markdown }}</p>
-	<p>{{ object.program|markdown }}</p>
-	<p>{{ object.skills|markdown }}</p>
-	<p>{{ object.key_concepts|markdown }}</p>
-	<p>{% trans %}UV manager: {% endtrans %}{{ object.manager }}</p>
+	<div id="pedagogy">
+		<p><a href="{{ url('pedagogy:guide') }}">{% trans %}Back{% endtrans %}</a></p>
+		<h1>{{ object.code }} - {{ object.title }}</h1>
+		<p>{{ object.department }}</p>
+		<p>{{ object.credit_type }}</p>
+		<p>{{ object.semester }}</p>
+		<p>{{ object.objectives|markdown }}</p>
+		<p>{{ object.program|markdown }}</p>
+		<p>{{ object.skills|markdown }}</p>
+		<p>{{ object.key_concepts }}</p>
+		<p>{% trans %}UV manager: {% endtrans %}{{ object.manager }}</p>
 
-	<p>{{ display_star(object.grade_global_average) }}</p>
-	<p>{{ display_star(object.grade_utility_average) }}</p>
-	<p>{{ display_star(object.grade_interest_average) }}</p>
-	<p>{{ display_star(object.grade_teaching_average) }}</p>
-	<p>{{ display_star(object.grade_work_load_average) }}</p>
+		<p>{{ display_star(object.grade_global_average) }}</p>
+		<p>{{ display_star(object.grade_utility_average) }}</p>
+		<p>{{ display_star(object.grade_interest_average) }}</p>
+		<p>{{ display_star(object.grade_teaching_average) }}</p>
+		<p>{{ display_star(object.grade_work_load_average) }}</p>
 
-	{% if object.comments.exists() %}
-		<h2>{% trans %}Comments{% endtrans %}</h2>
-		{% for comment in object.comments.all() %}
-			<p>{{ display_star(comment.grade_global) }}</p>
-			<p>{{ display_star(comment.grade_utility) }}</p>
-			<p>{{ display_star(comment.grade_interest) }}</p>
-			<p>{{ display_star(comment.grade_teaching) }}</p>
-			<p>{{ display_star(comment.grade_work_load) }}</p>
-			<p>{{ comment.comment|markdown }}</p>
-			<p>{% trans %}Published: {% endtrans %}{{ comment.publish_date }}</p>
-			<p>{% trans %}Author: {% endtrans %}{{ comment.author }}</p>
-			{% if user.is_owner(comment) %}
-				<p><a href="{{ url('pedagogy:comment_update', comment_id=comment.id) }}">{% trans %}Edit{% endtrans %}</a></p>
-				<p><a href="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}">{% trans %}Delete{% endtrans %}</a></p>
-			{% endif %}
-			<p><a href="{{ url('pedagogy:comment_report', comment_id=comment.id) }}">{% trans %}Report{% endtrans %}</a></p>
-			{% if comment.is_reported %}
-				<p>{% trans %}This comment has been reported{% endtrans %}</p>
-			{% endif %}
-		{% endfor %}
-	{% endif %}
+		{% if object.comments.exists() %}
+			<h2>{% trans %}Comments{% endtrans %}</h2>
+			{% for comment in object.comments.all() %}
+				<div class="comment">
+					<div class="dif_grade">
+						<p>{% trans %}global grade{% endtrans %}</p>
+						<p>{% trans %}utility grade{% endtrans %}</p>
+						<p>{% trans %}interest grade{% endtrans %}</p>
+						<p>{% trans %}teaching grade{% endtrans %}</p>
+						<p>{% trans %}work_load grade{% endtrans %}</p>
+					</div>
+					<div class="grade">
+						<p>{{ display_star(comment.grade_global) }}</p>
+						<p>{{ display_star(comment.grade_utility) }}</p>
+						<p>{{ display_star(comment.grade_interest) }}</p>
+						<p>{{ display_star(comment.grade_teaching) }}</p>
+						<p>{{ display_star(comment.grade_work_load) }}</p>
+					</div>
+					<p class="text">{{ comment.comment }}</p>
+					<p class="date_info">{{ comment.publish_date.strftime('%d/%m/%Y') }}</p>
+					<p class="author_info">{{ comment.author }}</p>
 
-	<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>
+					{# Warning, it's not displayed yet #}
+					<p><a href="{{ url('pedagogy:comment_report', comment_id=comment.id) }}">{% trans %}Report{% endtrans %}</a></p>
+					{% if comment.is_reported %}
+						<p>{% trans %}This comment has been reported{% endtrans %}</p>
+					{% endif %}
+
+					{% if user.is_owner(comment) %}
+						<p><a href="{{ url('pedagogy:comment_update', comment_id=comment.id) }}">{% trans %}Edit{% endtrans %}</a></p>
+						<p><a href="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}">{% trans %}Delete{% endtrans %}</a></p>
+					{% endif %}
+				</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>
 {% endblock %}