diff --git a/internal/pkg/checks/hdd.go b/internal/pkg/checks/hdd.go
index fddbb54..32f3b33 100644
--- a/internal/pkg/checks/hdd.go
+++ b/internal/pkg/checks/hdd.go
@@ -30,5 +30,5 @@ func (h HDD) Execute() (ok bool, data interface{}, err error) {
 }
 
 func (h HDD) Name() string {
-	return "Disc space"
+	return "DiscSpace"
 }
\ No newline at end of file
diff --git a/internal/pkg/checks/load.go b/internal/pkg/checks/load.go
index 908ff22..19e12ea 100644
--- a/internal/pkg/checks/load.go
+++ b/internal/pkg/checks/load.go
@@ -32,5 +32,5 @@ func (h Load) Execute() (ok bool, data interface{}, err error) {
 }
 
 func (h Load) Name() string {
-	return "System Load"
+	return "SystemLoad"
 }
\ No newline at end of file
diff --git a/internal/pkg/checks/memory.go b/internal/pkg/checks/memory.go
index f6cf2c1..7ad9b37 100644
--- a/internal/pkg/checks/memory.go
+++ b/internal/pkg/checks/memory.go
@@ -39,5 +39,5 @@ func (h Memory) Execute() (ok bool, data interface{}, err error) {
 }
 
 func (h Memory) Name() string {
-	return "Memory usage"
+	return "MemoryUsage"
 }
\ No newline at end of file
diff --git a/internal/pkg/checks/systemd.go b/internal/pkg/checks/systemd.go
index 4b53954..4b0c309 100644
--- a/internal/pkg/checks/systemd.go
+++ b/internal/pkg/checks/systemd.go
@@ -33,7 +33,7 @@ func (h Systemd) Execute() (ok bool, data interface{}, err error) {
 }
 
 func (h Systemd) Name() string {
-	return "Systemd Status"
+	return "SystemdStatus"
 }
 
 func (h Systemd) getStatus(name string) (bool, error) {
diff --git a/main.go b/main.go
index 01898c1..334366e 100644
--- a/main.go
+++ b/main.go
@@ -7,6 +7,7 @@ import (
 	checks "http-server-status/internal/pkg/checks"
 	"net/http"
 	"sync"
+	"text/template"
 )
 
 //go:embed template/index.html
@@ -23,11 +24,19 @@ func init()  {
 func main() {
 
 	http.HandleFunc("/", func(writer http.ResponseWriter, request *http.Request) {
-		_, gloableRes := checkSystem()
+		res, gloableRes := checkSystem()
 		if gloableRes == false {
 			writer.WriteHeader(http.StatusInternalServerError)
 		}
-		writer.Write([]byte(s))
+
+		t, err := template.New("todos").Parse(s)
+		if err != nil {
+			panic(err)
+		}
+
+		t.Execute(writer, map[string]interface{}{"checks":res})
+
+		//writer.Write([]byte(s))
 	})
 	http.HandleFunc("/data.json", handler)
 	err := http.ListenAndServe(c.HTTP.Listen, nil)
diff --git a/template/index.html b/template/index.html
index 74ca228..f40431c 100644
--- a/template/index.html
+++ b/template/index.html
@@ -19,26 +19,54 @@
 <div class="row">
     <div class="col-md-6">
         <div class="card">
-            <div class="card-header" id="hddtitle">
+            <div class="card-header {{if .checks.DiscSpace.Success }}bg-success{{else}}bg-danger{{end}}" id="hddtitle">
                 Check HDD
             </div>
             <div class="card-body" id="hddpercent">
-                <p class="card-text">
-                    HDD 1:
-                <div class="progress">
-                    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
-                </div>
-                </p>
+
+                <table class="table">
+                    {{range $key, $val := .checks.DiscSpace.Data}}
+                    <tr>
+                        <td>{{ $key }}</td>
+                        <td>
+                            <div class="progress">
+                                <div class="progress-bar" role="progressbar" style="width: {{ $val }}%;" aria-valuenow="{{ $val }}" aria-valuemin="0" aria-valuemax="100">{{ $val }}%</div>
+                            </div>
+                        </td>
+                    </tr>
+                    {{end }}
+                </table>
+
+
             </div>
         </div>
     </div>
     <div class="col-md-6">
         <div class="card">
-            <div class="card-header" id="ramtitle">
+            <div class="card-header {{if .checks.MemoryUsage.Success }}bg-success{{else}}bg-danger{{end}}" id="ramtitle">
                 Check RAM
+
             </div>
             <div class="card-body">
-                <p class="card-text" id="rampercent">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                <table class="table">
+                    <tr>
+                        <th>Ram</th>
+                        <td>
+                            <div class="progress">
+                                <div class="progress-bar" role="progressbar" style="width: {{ .checks.MemoryUsage.Data.ram }}%;" aria-valuenow="{{ .checks.MemoryUsage.Data.ram }}" aria-valuemin="0" aria-valuemax="100">{{ .checks.MemoryUsage.Data.ram }}%</div>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>Swap</th>
+                        <td>
+                            <div class="progress">
+                                <div class="progress-bar" role="progressbar" style="width: {{ .checks.MemoryUsage.Data.swap }}%;" aria-valuenow="{{ .checks.MemoryUsage.Data.swap }}" aria-valuemin="0" aria-valuemax="100">{{ .checks.MemoryUsage.Data.swap }}%</div>
+                            </div>
+                        </td>
+                    </tr>
+                </table>
+
             </div>
         </div>
     </div>
@@ -46,121 +74,48 @@
     <div class="row" style="margin-top: 20px;">
         <div class="col-md-6">
             <div class="card">
-                <div class="card-header" id="loadtitle">
+                <div class="card-header {{if .checks.SystemLoad.Success }}bg-success{{else}}bg-danger{{end}}" id="loadtitle">
                     Check Load
+
                 </div>
                 <div class="card-body">
-                    <p class="card-text" id="loadcontent">...</p>
+                    <table class="table">
+                        <tr>
+                            <th>1</th>
+                            <td>{{ .checks.SystemLoad.Data.Loadavg1 }}</td>
+                        </tr>
+                        <tr>
+                            <th>5</th>
+                            <td>{{ .checks.SystemLoad.Data.Loadavg5 }}</td>
+                        </tr>
+                        <tr>
+                            <th>15</th>
+                            <td>{{ .checks.SystemLoad.Data.Loadavg15 }}</td>
+                        </tr>
+                    </table>
                 </div>
             </div>
         </div>
         <div class="col-md-6">
             <div class="card">
-                <div class="card-header" id="systemdtitle">
+                <div class="card-header {{if .checks.SystemdStatus.Success }}bg-success{{else}}bg-danger{{end}}" id="systemdtitle">
                     Systemd Check
                 </div>
                 <div class="card-body">
-                    <p class="card-text" id="systemdcontent">...</p>
+                    <table class="table">
+                        {{range $key, $val := .checks.SystemdStatus.Data}}
+                        <tr>
+                            <td>{{ $key }}</td>
+                            <td>
+                               {{ $val }}
+                            </td>
+                        </tr>
+                        {{end }}
+                    </table>
                 </div>
             </div>
         </div>
     </div>
 </div>
-<script>
-    function getData() {
-        $.ajax({
-            url: "/data.json",
-        }).done(function(data) {
-            console.log("ajax done")
-            handleData(data)
-        }).always(function(data) {
-            console.log("always")
-            if(data.responseText != "") {
-                console.log(data.responseText)
-                handleData(data.responseText)
-            }
-
-            setTimeout("getData();", 10000);
-        });
-    }
-
-    function handleData(data) {
-        console.log("PARSE")
-        o = JSON.parse(data)
-        //Disc space
-        console.log(o)
-
-        let html = ""
-        $("#hddpercent").empty()
-        keys = Object.keys(o.Checks["Disc space"].data)
-        for(var i = 0; i < keys.length; i++) {
-            name = keys[i]
-            value = o.Checks["Disc space"].data[keys[i]]
-            $("#hddpercent").append('<b>'+name+'</b><br><div class="progress"><div class="progress-bar" role="progressbar" style="width: '+value+'%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">' +value+ '%</div></div>');
-        }
-        if (o.Checks["Disc space"].success) {
-            $("#hddtitle").addClass("bg-success");
-            $("#hddtitle").removeClass("bg-error");
-        } else {
-            $("#hddtitle").addClass("bg-danger");
-            $("#hddtitle").removeClass("bg-success");
-        }
-
-        //ram
-
-        if (o.Checks["Memory usage"].success) {
-            $("#ramtitle").addClass("bg-success");
-            $("#ramtitle").removeClass("bg-error");
-        } else {
-            $("#ramtitle").addClass("bg-danger");
-            $("#ramtitle").removeClass("bg-success");
-        }
-
-        $("#rampercent").empty()
-        $("#rampercent").append('<b>Ram</b><br><div class="progress"><div class="progress-bar" role="progressbar" style="width: '+o.Checks["Memory usage"].data["ram"]+'%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">' +o.Checks["Memory usage"].data["ram"]+ '%</div></div>');
-        $("#rampercent").append('<b>Swap</b><br><div class="progress"><div class="progress-bar" role="progressbar" style="width: '+o.Checks["Memory usage"].data["swap"]+'%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">' +o.Checks["Memory usage"].data["swap"]+ '%</div></div>');
-
-
-        //load
-
-        if (o.Checks["System Load"].success) {
-            $("#loadtitle").addClass("bg-success");
-            $("#loadtitle").removeClass("bg-error");
-        } else {
-            $("#loadtitle").addClass("bg-danger");
-            $("#loadtitle").removeClass("bg-success");
-        }
-        $("#loadcontent").empty()
-        html = "<table class='table'>"
-        html += "<tr><td>1</td><td>"+o.Checks["System Load"].data["Loadavg1"]+"</td></tr>"
-        html += "<tr><td>5</td><td>"+o.Checks["System Load"].data["Loadavg5"]+"</td></tr>"
-        html += "<tr><td>15</td><td>"+o.Checks["System Load"].data["Loadavg15"]+"</td></tr>"
-        html += "</table>"
-        $("#loadcontent").append(html)
-
-
-        //systemd
-        if (o.Checks["Systemd Status"].success) {
-            $("#systemdtitle").addClass("bg-success");
-            $("#systemdtitle").removeClass("bg-error");
-        } else {
-            $("#systemdtitle").addClass("bg-danger");
-            $("#systemdtitle").removeClass("bg-success");
-        }
-
-        $("#systemdcontent").empty()
-        html = "<table class='table'>"
-        keys = Object.keys(o.Checks["Systemd Status"].data)
-        for (var i = 0; i < keys.length; i++) {
-            name = keys[i]
-            value = o.Checks["Systemd Status"].data[keys[i]]
-            html += "<tr><td>"+name+"</td><td>"+value+"</td></tr>"
-        }
-        html += "</table>"
-        $("#systemdcontent").append(html)
-
-    }
-    getData();
-</script>
 </body>
 </html>
\ No newline at end of file