diff --git a/app/Http/Controllers/LearnController.php b/app/Http/Controllers/LearnController.php
index 34d524b4d975b95f957a2fc78e329b07ae597217..32422a6c37c0fe3526ade40987726b527fd5ce66 100644
--- a/app/Http/Controllers/LearnController.php
+++ b/app/Http/Controllers/LearnController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
 use Google_Client;
 
 class LearnController extends Controller
@@ -22,9 +23,9 @@ class LearnController extends Controller
      *
      * @return \Illuminate\Contracts\Support\Renderable
      */
-    public function index()
+    public function index($id_course, $id_spreadsheet)
     {
-        
+        return view('learn', ['id_spreadsheet' => $id_spreadsheet]);
     }
 
     /**
@@ -32,7 +33,7 @@ class LearnController extends Controller
      *
      * @return id_spreadsheet
      */
-    public function new()
+    public function new($id_course, Request $request)
     {
         // Initialize
         $client = LearnController::getClient();
@@ -41,7 +42,7 @@ class LearnController extends Controller
         // Create Spreadsheet
         $spreadsheet = new \Google_Service_Sheets_Spreadsheet([
             'properties' => [
-                'title' => 'Testing'
+                'title' => $request->topic_name
             ]
         ]);
         $response = $service->spreadsheets->create($spreadsheet, ['fields' => 'spreadsheetId']);
@@ -55,10 +56,29 @@ class LearnController extends Controller
         $response2 = $service2->permissions->create($response->spreadsheetId, $permission2);
 
         if (empty($response->spreadsheetId)) {
-            echo "Pembuatan Gagal";
+            $msg = 0;
         } else {
-            return $response->spreadsheetId;
+            $msg = 1;
+            DB::table('topics')->insert([
+                'id_course' => $id_course,
+                'name' => $request->topic_name,
+                'content' => 'Konten',
+                'id_spreadsheet' => $response->spreadsheetId
+            ]);
         }
+        return redirect()->route('course', ['id_course' => $id_course, 'msg' => $msg]);
+    }
+
+    /**
+     * Edit Spreadsheet.
+     *
+     * @return message
+     */
+    public function edit(Request $request)
+    {
+        echo 'htmlentities';
+        echo htmlentities('_token=g3S3CcOUpXXaTOIdwsxCZzejdAlRzpFTGXoV5C5j&%E2%80%9DmyTextarea%E2%80%9D=%3Cp%3ENext%2C+use+our+Get+Started+docs+to+setup+Tiddny%21%3C%2Fp%3E');
+        echo $request->Next;
     }
 
     /**
diff --git a/public/js/text.js b/public/js/text.js
new file mode 100644
index 0000000000000000000000000000000000000000..55a4b68ce8469b9b840d5f96874c055a3d833289
--- /dev/null
+++ b/public/js/text.js
@@ -0,0 +1,23 @@
+function iFrameOn(){
+	richTextField.document.designMode = 'On';
+}
+function iBold(){
+	richTextField.document.execCommand('bold',false,null); 
+}
+function iUnderline(){
+	richTextField.document.execCommand('underline',false,null);
+}
+function iItalic(){
+	richTextField.document.execCommand('italic',false,null); 
+}
+function iUnorderedList(){
+	richTextField.document.execCommand("InsertOrderedList", false,"newOL");
+}
+function iOrderedList(){
+	richTextField.document.execCommand("InsertUnorderedList", false,"newUL");
+}
+function submit_form(){
+	var theForm = document.getElementById("myform");
+	theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML;
+	theForm.submit();
+}
\ No newline at end of file
diff --git a/resources/views/course.blade.php b/resources/views/course.blade.php
index d0c012a76d81fdb94d59a53ac1e3d61638373eb8..83b91571a0de60229f60db0e329c57f075ae7c13 100644
--- a/resources/views/course.blade.php
+++ b/resources/views/course.blade.php
@@ -2,6 +2,17 @@
 
 @section('content')
 <div class="container">
+@isset(request()->msg)
+    @if( request()->get('msg') == 1 )
+        <div class="alert alert-success" role="alert">
+            Pembuatan Topik Berhasil
+        </div>
+    @else
+        <div class="alert alert-danger" role="alert">
+            Pembuatan Topik Gagal
+        </div>
+    @endif
+@endisset
     <div class="row justify-content">
         <div class="col-md-8">
             <div class="card">
@@ -26,7 +37,34 @@
                             </div>
                         @endforeach
                     </div> <br/>
-                    <a href="<?php echo $topic->id_course; ?>/learn/new" class="btn btn-primary" role="button">Tambah Topik</a>
+                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
+                       Tambah Topik
+                    </button>
+                    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+                        <div class="modal-dialog modal-dialog-centered" role="document">
+                            <div class="modal-content">
+                                <form action="<?php echo Request::url(); ?>/learn/new" method="post">
+                                    {{ csrf_field() }}
+                                    <div class="modal-header">
+                                        <h5 class="modal-title" id="exampleModalCenterTitle">Tambah Topik</h5>
+                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                        <span aria-hidden="true">&times;</span>
+                                        </button>
+                                    </div>
+                                    <div class="modal-body">
+                                        <div class="form-group">
+                                            <label for="topic-name" class="col-form-label">Masukkan Judul Topik</label>
+                                            <input type="text" class="form-control" name="topic_name" id="topic-name" required="required" placeholder="Judul Topik">
+                                        </div>
+                                    </div>
+                                    <div class="modal-footer">
+                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
+                                        <button type="submit" class="btn btn-primary">Buat Topik</button>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index a61dcf6e9f6f051d5ff1aaee58324be5850a71ca..49389254ad059036666c563409034c40a1778f0b 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -11,6 +11,9 @@
 
     <!-- Scripts -->
     <script src="{{ asset('js/app.js') }}" defer></script>
+    <script src="{{ asset('js/text.js') }}" defer></script>
+    <script src="https://cdn.tiny.cloud/1/yaezxtmh9h1roazzxnkx70is63n62nbov3xskxim3rpnbcoj/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
+    <script>tinymce.init({selector:'mtextarea'});</script>
 
     <!-- Fonts -->
     <link rel="dns-prefetch" href="//fonts.gstatic.com">
@@ -20,7 +23,7 @@
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
     <link href="{{ asset('css/home.css') }}" rel="stylesheet">
 </head>
-<body>
+<body onLoad="iFrameOn();">
     <div id="app">
         <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
             <div class="container">
diff --git a/resources/views/learn.blade.php b/resources/views/learn.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..ef515a1eadb87283e75c39ffecf8521c2ae01279
--- /dev/null
+++ b/resources/views/learn.blade.php
@@ -0,0 +1,47 @@
+@extends('layouts.app')
+
+@section('content')
+<!-- <form action="<?php echo Request::url(); ?>/edit/submit" name="myform" id="myform" method="post">
+    {{ csrf_field() }}
+    <div id="wysiwyg_cp" style="padding:8px; width:700px;">
+    <input type="button" onClick="iBold()" value="B"> 
+    <input type="button" onClick="iUnderline()" value="U">
+    <input type="button" onClick="iItalic()" value="I">
+    <input type="button" onClick="iUnorderedList()" value="UL">
+    <input type="button" onClick="iOrderedList()" value="OL">
+    </div>
+    <textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea>
+    <iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
+    <input name="myBtn" type="button" value="Submit Data" onClick="javascript:submit_form();"/>
+</form> -->
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-lg-4">
+            <div class="card">
+                <div class="card-header">Judul</div>
+                <div class="card-body">
+                    Ahaii
+                </div>
+            </div>
+            <div>
+                <form action="<?php echo Request::url(); ?>/edit/submit" method="post">
+                    {{ csrf_field() }}
+                    <mtextarea name=”myTextarea” id=”myTextarea”>Next, use our Get Started docs to setup Tiddny!</mtextarea>
+                    <button type="submit" class="btn btn-primary"><b>Submit</b></button>
+                </form>
+            </div>
+        </div>
+        <div class="col-lg-8">
+            <iframe 
+                style="width:100%; height:500px; border: 1px solid grey;" 
+                frameBorder="0"
+                src="https://docs.google.com/spreadsheets/d/<?php echo $id_spreadsheet; ?>/edit?usp=drivesdk&rm=embedded">
+            </iframe>
+            <form action="<?php echo Request::url(); ?>/submit" method="post">
+                <input type="hidden" value="<?php echo $id_spreadsheet; ?>" class="form-control" name="id_spreadsheet" id="id_spreadsheet">
+                <button style="float: right;" type="submit" class="btn btn-success"><b>Submit</b></button>
+            </form>
+        </div>
+    </div>
+</div>
+@endsection
\ No newline at end of file
diff --git a/resources/views/test.blade.php b/resources/views/test.blade.php
deleted file mode 100644
index 414b5415d945f1c67190653dbbd0df3f9a24e33c..0000000000000000000000000000000000000000
--- a/resources/views/test.blade.php
+++ /dev/null
@@ -1,4 +0,0 @@
-<iframe 
-    style="width:100%; height:500px;overflow:auto;" 
-    src="https://docs.google.com/spreadsheets/d/1gkSt69nwGC4DMyoFvaJgHcA6rGlMXDXWGmnLGiF7xXY/edit?usp=drivesdk&rm=embedded">
-</iframe>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 9399f995976f12e7f0d4fc7e6135d07e87a5a4a1..e647eca40f0545ffdadb9f1ed15dca79d0a12939 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -21,5 +21,8 @@ Route::get('/test', function () {
 Auth::routes();
 Route::get('/home', 'HomeController@index')->name('home');
 Route::get('/course/{id_course}', 'CourseController@index')->name('course');
-Route::get('/course/{id_course}/learn/new', 'LearnController@new')->name('learn/new');
-Route::get('/course/{id_course}/learn/{id_spreadsheet}', 'LearnController@index')->name('learn');
\ No newline at end of file
+Route::post('/course/{id_course}/learn/new', 'LearnController@new')->name('learn/new');
+Route::get('/course/{id_course}/learn/{id_spreadsheet}', 'LearnController@index')->name('learn');
+Route::get('/course/{id_course}/learn/{id_spreadsheet}/edit', 'LearnController@edit')->name('learn/edit');
+Route::post('/course/{id_course}/learn/{id_spreadsheet}/edit/submit', 'LearnController@edit')->name('learn/edit');
+Route::post('/course/{id_course}/learn/{id_spreadsheet}/submit', 'LearnController@submit')->name('learn/submit');
\ No newline at end of file