diff --git a/src/components/CourseEditor.vue b/src/components/CourseEditor.vue
index 511ed15..35a231a 100644
--- a/src/components/CourseEditor.vue
+++ b/src/components/CourseEditor.vue
@@ -1,191 +1,212 @@
 <template lang="pug">
 	.CourseEditor
 		div
 			h2 Change course's title
 			WTLField(grouped=true)
 				WTLInput.CourseEditor__title(
 					v-model="newCourse.title"
 				)
 				WTLButton(
 					@click="patchCourse"
 					icon="done"
 					type="success"
 				) Update course title
 		div
 			h2 Change chapter order by dragging them
-			VueDraggable.CourseEditor__chapters(
-				v-if="newChapters"
-				v-model="newChapters"
-				@start="drag=true"
-				@end="drag=false"
-			)
-				.CourseEditor__chapter(
-					v-for="chapter in newChapters"
-					:key="chapter._id"
-				) 
-					WTLIcon(icon="swap_vertical")
-					| {{ chapter.title }}
+			.CourseEditor__chapters-container
+				ol.CourseEditor__old-chapters
+					li.CourseEditor__chapter(v-for="(chapter, index) in course.chapters") {{ index+1 }}. {{ chapter.title }}
+				VueDraggable.CourseEditor__chapters(
+					v-if="newChapters"
+					v-model="newChapters"
+					@start="drag=true"
+					@end="drag=false"
+				)
+					.CourseEditor__chapter(
+						v-for="chapter in newChapters"
+						:key="chapter._id"
+					) 
+						WTLIcon(icon="swap_vertical")
+						| {{ chapter.title }}
 			div.flex-container.flex-content-end
 				h3 Confirm changes?
 				WTLButton(
 					@click="patchCourseChapters"
 					icon="done"
 					type="success"
 				) Update chapters order
 		div
 			h2 Insert new chapter
 			WTLField(grouped=true)
 				WTLInput.CourseEditor__new-chapter(
 					v-model="newChapter.title"
 					placeholder="Insert title"
 				)
 				WTLButton(
 					@click="postChapter"
 					icon="done"
 					type="success"
 				) Add new chapter
 </template>
 
 <style lang="scss">
 @import "~styles/declarations";
 
 .CourseEditor {
 	background-color: white;
 	box-shadow: $shadow-1;
 	padding: 1rem;
 
+	&__chapters-container {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+	}
+
+
+	&__old-chapters {
+		display:none;
+	}
+
 	> div {
 		background-color: $white-bg;
 		border-top: 2px solid;
 		border-image: $border-image-wtl;
 		padding: 1rem;
 		margin-bottom: 1rem;
 
 		> .flex-container {
 			margin-top: 1rem;
 			margin-bottom: 1rem;
 		}
 
 		> h2 {
 			margin-bottom: 0.5rem;
 		}
 	}
 
+	&__chapters {
+		width: 100%;
+	}
+
 	&__chapter {
 		display: flex;
 		align-items: center;
 		padding: 0.5rem;
 		background-color: white;
 		box-shadow: $shadow-1;
-		margin: 0.25rem;
+		margin: 0.25rem 0;
 
 		> .WTLIcon.material-icons {
 			font-size: 1.5rem;
 		}
 	}
 
 	@include media-breakpoint-up(md) {
 		&__chapters {
-			width: 40%;
-			margin-left: auto;
-			margin-right: auto;
+			width: 45%;
+		}
+
+		&__old-chapters {
+			width: 45%;
+			display: block;
 		}
 
 		&__chapter {
 			width: 100%;
-			margin: 0.5rem;
+			margin: 0.5rem 0;
 			padding: 1rem;
 		}
 	}
 }
 </style>
 
 <script>
 import WTLButton from "components/ui/WTLButton"
 import WTLInput from "components/ui/WTLInput"
 import VueDraggable from "vuedraggable"
 
 export default {
 	name: "CourseEditor",
 	components: { WTLInput, WTLButton, VueDraggable },
 	data() {
 		return {
 			newCourse: {
 				title: this.course.title,
 				language: this.course.language
 			},
 			newChapters: this.course.chapters,
 			newChapter: {
 				title: ""
 			},
 			errorMsg: ""
 		}
 	},
 	props: {
 		course: {
 			type: Object,
 			required: true
 		}
 	},
 	mounted() {
 
 	},
 	methods: {
 		patchCourse() {
 			this.$store.dispatch("PATCH_COURSE", {
 				courseName: this.course._id,
 				course: this.newCourse,
 				options: {
 					headers: {
 						"If-Match": this.course._etag,
 						"Authorization": `bearer ${this.$keycloak.token}`
 					}
 				}
 			}).catch((error) => {
 				return this.$store.dispatch("SET_ERROR", { error: error })
 			})
 		},
 		patchCourseChapters() {
 			this.$store.dispatch("PATCH_COURSE_CHAPTERS", {
 				courseName: this.course._id,
 				course: {
 					...this.course,
 					chapters: this.slice(this.newChapters, ["_id", "_version"])
 				},
 				options: {
 					headers: {
 						"If-Match": this.course._etag,
 						"Authorization": `bearer ${this.$keycloak.token}`
 					}
 				}
 			}).catch((error) => {
 				return this.$store.dispatch("SET_ERROR", { error: error })
 			})
 		},
 		postChapter() {
 			this.$store.dispatch("POST_CHAPTER", {
 				courseName: this.course._id,
 				course: {
 					...this.course,
 					chapters: [
 						...this.slice(this.course.chapters, ["_id", "_version"]),
 						this.newChapter
 					]
 				},
 				options: {
 					headers: {
 						"If-Match": this.course._etag,
 						"Authorization": `bearer ${this.$keycloak.token}`
 					}
 				}
 			}).then((response) => {
 				// Update chapter list
 				this.newChapters = this.course.chapters
 			}).catch((error) => {
 				console.log(error)
 				return this.$store.commit("SET_ERROR", { error: error })
 			})
 		}
 	}
 }
 </script>
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 76b53aa..e83d77c 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,120 +1,120 @@
 @import "variables";
 
 // Makes the @content apply to the given $breakpointName and wider.
 @mixin media-breakpoint-up($breakpointName) {
 	$width: map-get($breakpoints, $breakpointName);
 
 	@if $width {
 		@media (min-width: $width) {
 			@content;
 		}
 	} @else {
 		@error "Impossible to find breakpoint #{$breakpointName}";
 	}
 }
 
 @function strip-unit($num) { @return $num / ($num * 0 + 1); }
 
 @mixin fluid-font($min-vw, $max-vw, $min-font-size, $max-font-size) {
 	$u1: unit($min-vw);
 	$u2: unit($max-vw);
 	$u3: unit($min-font-size);
 	$u4: unit($max-font-size);
 
 	@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
 		& {
 			font-size: $min-font-size;
 
 			@media screen and (min-width: $min-vw) {
 				font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
 			}
 
 			@media screen and (min-width: $max-vw) {
 				font-size: $max-font-size;
 			}
 		}
 	}
 }
 
 @mixin container() {
 	margin-right: auto;
 	margin-left: auto;
 	padding-right: 0.5rem;
 	padding-left: 0.5rem;
 
 	@each $breakpoint, $container-max-width in $container-max-widths {
 		@include media-breakpoint-up($breakpoint) {
 			width: $container-max-width;
 			max-width: 100%;
 		}
 	}
 }
 
 @mixin input() {
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
 	padding: 0.5rem 1rem;
 	font-size: 1rem;
-	height: 2.25rem;
+	min-height: 2.25rem;
 	line-height: 1;
 	vertical-align: top;
 	-moz-appearance: none;
 	-webkit-appearance: none;
 
 	&:disabled {
 		cursor: not-allowed;
 	}
 }
 
 @mixin card-padding() {
 	@each $breakpoint, $card-padding in $card-paddings {
 		@include media-breakpoint-up($breakpoint) {
 			padding: $card-padding;
 			padding-bottom: $card-padding + 0.5rem;
 			max-width: 100%;
 		}
 	}
 }
 
 /// Gives a card depth effect.
 /// @param {Number} $depth - depth level (between 1 and 5)
 /// @link http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design
 /// @requires {function} top-shadow
 /// @requires {function} bottom-shadow
 @mixin card($depth) {
 	background-color: $card-bg;
 
 	@include card-padding();
 
 	@if $depth < 1 {
 		box-shadow: none;
 	} @else if $depth > 5 {
 		@warn "Invalid $depth `#{$depth}` for mixin `card`.";
 	}
 	@else {
 		box-shadow: bottom-shadow($depth), top-shadow($depth);
 	}
 }
 
 /// Computes a top-shadow for a card effect.
 /// @param {Number} $depth - depth level
 /// @return {List}
 @function top-shadow($depth) {
 	$primary-offset: nth(1.5 3 10 14 19, $depth) * 1px;
 	$blur: nth(1.5 3 10 14 19, $depth) * 4px;
 	$color: rgba(black, nth(0.12 0.16 0.19 0.25 0.3, $depth));
 
 	@return 0 $primary-offset $blur $color;
 }
 
 /// Computes a bottom-shadow for a card effect.
 /// @param {Number} $depth - depth level
 /// @return {List}
 @function bottom-shadow($depth) {
 	$primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
 	$blur: nth(1 3 3 5 6, $depth) * 4px;
 	$color: rgba(black, nth(0.24 0.23 0.23 0.22 0.22, $depth));
 
 	@return 0 $primary-offset $blur $color;
 }