diff --git a/public/js/app.js b/public/js/app.js
index 358a887..f1287bc 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -988,7 +988,7 @@ window.Vue = __webpack_require__(35);
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-Vue.component('example-component', __webpack_require__(52));
+Vue.component('course-form', __webpack_require__(38));
 
 var app = new Vue({
   el: '#app'
@@ -42527,7 +42527,54 @@ exports.clearImmediate = clearImmediate;
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1), __webpack_require__(4)))
 
 /***/ }),
-/* 38 */,
+/* 38 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+var normalizeComponent = __webpack_require__(39)
+/* script */
+var __vue_script__ = __webpack_require__(40)
+/* template */
+var __vue_template__ = __webpack_require__(41)
+/* template functional */
+  var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = null
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "resources\\assets\\js\\components\\CourseForm.vue"
+if (Component.esModule && Object.keys(Component.esModule).some(function (key) {  return key !== "default" && key.substr(0, 2) !== "__"})) {  console.error("named exports are not supported in *.vue files.")}
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-542d9974", Component.options)
+  } else {
+    hotAPI.reload("data-v-542d9974", Component.options)
+' + '  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
 /* 39 */
 /***/ (function(module, exports) {
 
@@ -42716,17 +42763,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
-//
-//
-//
-//
-//
-//
-//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     mounted: function mounted() {
-        console.log('Component mounted.');
+        console.log('Course form mounted.');
     }
 });
 
@@ -42745,22 +42785,19 @@ var staticRenderFns = [
     var _vm = this
     var _h = _vm.$createElement
     var _c = _vm._self._c || _h
-    return _c("div", { staticClass: "container" }, [
-      _c("div", { staticClass: "row" }, [
-        _c("div", { staticClass: "col-md-8 col-md-offset-2" }, [
-          _c("div", { staticClass: "panel panel-default" }, [
-            _c("div", { staticClass: "panel-heading" }, [
-              _vm._v("Example Component")
-            ]),
-            _vm._v(" "),
-            _c("div", { staticClass: "panel-body" }, [
-              _vm._v(
-                "\n                    I'm an example component!\n                "
-              )
-            ])
-          ])
-        ])
-      ])
+    return _c("form", [
+      _c("div", { staticClass: "form-group" }, [
+        _c("input", {
+          staticClass: "form-control",
+          attrs: { type: "text", id: "name", placeholder: "Course name" }
+        })
+      ]),
+      _vm._v(" "),
+      _c(
+        "button",
+        { staticClass: "btn btn-default", attrs: { type: "submit" } },
+        [_vm._v("Submit")]
+      )
     ])
   }
 ]
@@ -42769,7 +42806,7 @@ module.exports = { render: render, staticRenderFns: staticRenderFns }
 if (false) {
   module.hot.accept()
   if (module.hot.data) {
-    require("vue-hot-reload-api")      .rerender("data-v-6017413a", module.exports)
+    require("vue-hot-reload-api")      .rerender("data-v-542d9974", module.exports)
   }
 }
 
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 98eca79..83329ad 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -15,8 +15,8 @@ window.Vue = require('vue');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-Vue.component('example-component', require('./components/ExampleComponent.vue'));
+Vue.component('course-form', require('./components/CourseForm.vue'));
 
 const app = new Vue({
     el: '#app'
-});
+});
\ No newline at end of file
diff --git a/resources/assets/js/components/CourseForm.vue b/resources/assets/js/components/CourseForm.vue
new file mode 100644
index 0000000..6d15f55
--- /dev/null
+++ b/resources/assets/js/components/CourseForm.vue
@@ -0,0 +1,16 @@
+<template>
+    <form>
+        <div class="form-group">
+            <input type="text" class="form-control" id="name" placeholder="Course name"/>
+        </div>
+        <button type="submit" class="btn btn-default">Submit</button>
+    </form>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            console.log('Course form mounted.')
+        }
+    }
+</script>
diff --git a/resources/assets/js/components/ExampleComponent.vue b/resources/assets/js/components/ExampleComponent.vue
deleted file mode 100644
index 601e61c..0000000
--- a/resources/assets/js/components/ExampleComponent.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <div class="container">
-        <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-                <div class="panel panel-default">
-                    <div class="panel-heading">Example Component</div>
-
-                    <div class="panel-body">
-                        I'm an example component!
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        mounted() {
-            console.log('Component mounted.')
-        }
-    }
-</script>
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 5759dea..0c2540e 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -8,4 +8,6 @@
 <p>{{ $course->name }}</p>
 @endforeach
 
+<course-form></course-form>
+
 @endsection
\ No newline at end of file