diff --git a/cfg_grades.php b/cfg_grades.php
index 07fa74d..107c8e9 100644
--- a/cfg_grades.php
+++ b/cfg_grades.php
@@ -40,6 +40,7 @@ const GRADECFG_TABLE = "local_treestudyplan_gradecfg";
 
 $scales = \grade_scale::fetch_all_global();
 $mappings = $DB->get_records(GRADECFG_TABLE);
+
 $scalecfgs = [];
 $gradecfgs = [];
 foreach ($mappings as $cfg) {
@@ -135,128 +136,54 @@ if ($action == "update") {
             }
         }
     }
-
 }
 
 // Process all available scales and load the current configuration for it.
-$data = [];
+$scalesdata = [];
 foreach ($scales as $scale) {
     $scale->load_items();
-    $scalecfg = null;
+    unset($scalecfg); // Unset variable each iteration.
     if (array_key_exists($scale->id, $scalecfgs)) {
         $scalecfg = $scalecfgs[$scale->id];
     }
 
-    $attrsc = ['value' => '', 'disabled' => 'disabled'];
-    $attrsp = ['value' => '', 'disabled' => 'disabled'];
+    $scaledata = new \stdClass;
+    $scaledata->id = $scale->id;
+    $scaledata->name = $scale->name;
+    $scaledata->options = [ // Initialize with the default "unset" option.
+        [
+            "value" => '',
+            "title" => get_string('select_scaleitem', 'local_treestudyplan'),
+            "disabled" => true,
+            "selected" => boolval(!isset($scalecfg) || $scalecfg->min_completed == ""),
+        ],
+    ];
 
-    if (!isset($scalecfg) || $scalecfg->min_completed == "") {
-        $attrsc["selected"] = "selected";
-    }
-    if (!isset($scalecfg) || $scalecfg->min_progress == "") {
-        $attrsp["selected"] = "selected";
-    }
-
-    $optionscompleted = html_writer::tag("option",
-                                         get_string('select_scaleitem', 'local_treestudyplan'),
-                                         $attrsc);
-    $optionsprogress = html_writer::tag("option",
-                                         get_string('select_scaleitem', 'local_treestudyplan'),
-                                         $attrsp);
     $key = 1; // Start counting by one, as used in sum aggregations.
-
     foreach ($scale->scale_items as $value) {
-        $attrsc = ["value" => $key];
-        $attrsp = ["value" => $key];
-
-        if (isset($scalecfg)) {
-            if (intval($scalecfg->min_completed) == $key) {
-                $attrsc["selected"] = "selected";
-            }
-            if (intval($scalecfg->min_progress) == $key) {
-                $attrsp["selected"] = "selected";
-            }
-        }
-        $optionsprogress .= html_writer::tag("option", $value, $attrsp);
-        $optionscompleted .= html_writer::tag("option", $value, $attrsc);
+        $scaledata->options[] = [
+            "value" => $key,
+            "title" => $value,
+            "selected" => boolval(isset($scalecfg) && intval($scalecfg->min_completed) == $key),
+        ];
         $key++;
     }
 
-    $row = [];
-    $row[] = $scale->name;
+    $scalesdata[] = $scaledata;
+}
 
-    $row[] = html_writer::tag("select",
-                              $optionscompleted,
-                              ['name' => "s_{$scale->id}_min_completed", 'autocomplete' => 'off']);
-    $data[] = $row;
+$gradesdata = [];
+foreach ($gradecfgs as $g) {
+    $gradedata = new \stdClass;
+    $gradedata->points = $g->grade_points;
+    $gradedata->threshold = $g->min_completed;
+    $gradesdata[] = $gradedata;
 }
 
 print $OUTPUT->header();
-
-print html_writer::start_tag("form", ["method" => "post"]);
-print html_writer::tag("input", null, ['name' => "action", 'value' => 'update', 'type' => 'hidden']);
-
-$table = new html_table();
-$table->id = "";
-$table->attributes['class'] = 'generaltable m-roomtable';
-$table->head = [];
-$table->data = $data;
-$table->head[] = get_string('scale');
-$table->head[] = get_string('min_completed', 'local_treestudyplan');
-
-print $OUTPUT->heading(get_string('cfg_grades_desc_head', 'local_treestudyplan'));
-print html_writer::tag('p', get_string('cfg_grades_desc', 'local_treestudyplan'));
-print $OUTPUT->heading(get_string('cfg_grades_scales', 'local_treestudyplan'));
-print html_writer::tag('div', html_writer::table($table), ['class' => 'flexible-wrap']);
-
-$data = [];
-foreach ($gradecfgs as $g) {
-    $row = [];
-    $row[] = $g->grade_points;
-    $row[] = html_writer::tag(  "input", null,
-                               ['name' => "g_{$g->grade_points}_min_completed",
-                                'value' => "{$g->min_completed}",
-                                'type' => 'text',
-                                "class" => "float",
-                                'autocomplete' => 'off']);
-    $row[] = html_writer::tag("input",
-                              null,
-                              ['name' => "g_{$g->grade_points}_delete", 'type' => 'checkbox']);
-    $data[] = $row;
-}
-
-$row = [];
-$row[] = html_writer::tag("input", null,
-                          [ 'name' => "g_new_gradepoints",
-                            'value' => '',
-                            'type' => 'number',
-                            'min' => '0',
-                            'pattern' => '/d+',
-                            'step' => '1',
-                            'autocomplete' => 'off']);
-$row[] = html_writer::tag("input", null,
-                          [ 'name' => "g_new_min_completed",
-                          'value' => '',
-                          'type' => 'text',
-                          "class" => "float",
-                          'autocomplete' => 'off']);
-
-$data[] = $row;
-
-$table = new html_table();
-$table->id = "";
-$table->attributes['class'] = 'generaltable m-roomtable';
-$table->head = [];
-$table->data = $data;
-$table->head[] = get_string('grade_points', 'local_treestudyplan');
-$table->head[] = get_string('min_completed', 'local_treestudyplan');
-$table->head[] = get_string('delete', );
-
-print $OUTPUT->heading(get_string('cfg_grades_grades', 'local_treestudyplan'));
-print html_writer::tag('div', html_writer::table($table), ['class' => 'flexible-wrap']);
-print html_writer::tag("input",
-                        null,
-                        ['value' => get_string("save"), 'type' => 'submit', "class" => "btn btn-primary"]);
-print html_writer::end_tag("form");
-
+$data = [
+    "scales" => $scalesdata,
+    "grades" => $gradesdata,
+];
+print $OUTPUT->render_from_template('local_treestudyplan/cfg_grades', $data);
 print $OUTPUT->footer();
diff --git a/templates/cfg_grades.mustache b/templates/cfg_grades.mustache
index 2bd44b5..69ae683 100644
--- a/templates/cfg_grades.mustache
+++ b/templates/cfg_grades.mustache
@@ -19,7 +19,7 @@
 
     D
     Classes required for JS:
-    * none
+    * float
 
     Data attributes required for JS:
     * none
@@ -29,10 +29,98 @@
 
     Example context (json):
     {
-        "invites": array_values($DB->get_records('local_treestudyplan_invit', ['user_id' => $USER->id]));
-        "hasinvites": true,
+        "scales": [
+            {
+                id: 1,
+                title: "Scale name",
+                options: [
+                    {
+                        title: "Scale value",
+                        value: 1,
+                        disabled: false,
+                        selected: true
+                    }
+                ]
+            }
+        ],
+        "grades": [
+            {
+                points: 100,
+                threshold: 55,
+            }
+        ],
     }
 }}
 <div class="local_treestudyplan_cfg_grades">
-
+    <form method="post">
+        <input name="action" value="update" type="hidden">
+        <h2>{{#str}} cfg_grades_desc_head, local_treestudyplan {{/str}}</h2>
+        <p>{{#str}} cfg_grades_desc, local_treestudyplan {{/str}}</p>
+        <h2>{{#str}} cfg_grades_scales, local_treestudyplan {{/str}}</h2>
+        <div class="flexible-wrap"><div class="table-responsive">
+            <table class="generaltable m-roomtable">
+            <thead>
+                <tr>
+                    <th class="header c0" scope="col">{{#str}} scale, core {{/str}}</td>
+                    <th class="header c1 lastcol" scope="col">{{#str}} min_completed, local_treestudyplan {{/str}}</td>
+                </tr>
+            </thead>
+            <tbody>
+            {{#scales}}
+                <tr>
+                    <td class="cell c0">{{name}}</td>
+                    <td class="cell c1 lastcol">
+                        <select name="s_{{id}}_min_completed" autocomplete="off">
+                            {{#options}}
+                            <option value="{{value}}"
+                                    {{#disabled}} disabled {{/disabled}}
+                                    {{#selected}} selected {{/selected}}
+                            >{{title}}</option>
+                            {{/options}}
+                        </select>
+                    </td>
+                </tr>
+            {{/scales}}
+            </tbody>
+            </table>
+        </div></div>
+        <h2>{{#str}} cfg_grades_grades, local_treestudyplan {{/str}}</h2>
+        <div class="flexible-wrap"><div class="table-responsive">
+            <table class="generaltable m-roomtable">
+            <thead>
+                <tr>
+                    <th class="header c0" scope="col">{{#str}} grade_points, local_treestudyplan {{/str}}</td>
+                    <th class="header c1" scope="col">{{#str}} min_completed, local_treestudyplan {{/str}}</td>
+                    <th class="header c2 lastcol" scope="col">{{#str}} delete, core {{/str}}</td>
+                </tr>
+            </thead>
+            <tbody>
+                {{#grades}}
+                <tr>
+                    <td class="cell c0" scope="col">{{points}}</td>
+                    <td class="cell c1" scope="col">
+                        <input  class="float"
+                                autocomplete="off"
+                                type="text"
+                                name="g_{{points}}_min_completed"
+                                value="{{threshold}}">
+                    </td>
+                    <td class="cell c2 lastcol" scope="col">
+                        <input name="g_{{points}}_delete" type="checkbox">
+                    </td>
+                </tr>
+                {{/grades}}
+                <tr class="lastrow">
+                    <td class="cell c0" scope="col">
+                        <input name="g_new_gradepoints" value="" type="number" min="0" pattern="/d+" step="1" autocomplete="off">
+                    </td>
+                    <td class="cell c1 lastcol" scope="col">
+                        <input name="g_new_min_completed" value="" type="text" class="float" autocomplete="off">
+                    </td>
+                </tr>
+            </tbody>
+            </table>
+        </div></div>
+        <input value="{{#str}} save, core {{/str}}" type="submit" class="btn btn-primary">
+    </form>
 </div>
\ No newline at end of file