diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..6a2c33f
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,8 @@
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
+  main {
+    flex: 1;
+  }
\ No newline at end of file
diff --git a/go.mod b/go.mod
index a9fed55..9005498 100644
--- a/go.mod
+++ b/go.mod
@@ -5,7 +5,7 @@ go 1.23.4
 require (
 	github.com/labstack/echo/v4 v4.12.0
 	github.com/labstack/gommon v0.4.2
-	golang.org/x/net v0.24.0
+	golang.org/x/net v0.29.0
 	modernc.org/sqlite v1.34.4
 )
 
@@ -18,12 +18,14 @@ require (
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/ncruces/go-strftime v0.1.9 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+	github.com/stretchr/testify v1.9.0 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
-	golang.org/x/crypto v0.22.0 // indirect
-	golang.org/x/sys v0.22.0 // indirect
-	golang.org/x/text v0.14.0 // indirect
-	golang.org/x/time v0.5.0 // indirect
+	golang.org/x/crypto v0.27.0 // indirect
+	golang.org/x/sys v0.25.0 // indirect
+	golang.org/x/text v0.18.0 // indirect
+	golang.org/x/time v0.6.0 // indirect
+	golang.org/x/tools v0.25.0 // indirect
 	modernc.org/gc/v3 v3.0.0-20240107210532-573471604cb6 // indirect
 	modernc.org/libc v1.55.3 // indirect
 	modernc.org/mathutil v1.6.0 // indirect
diff --git a/go.sum b/go.sum
index 8ed2e76..7d6f209 100644
--- a/go.sum
+++ b/go.sum
@@ -25,28 +25,30 @@ github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZb
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
-github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
-github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
+github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
 github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
-golang.org/x/crypto v0.22.0 h1:g1v0xeRhjcugydODzvb3mEM9SQ0HGp9s/nh3COQ/C30=
-golang.org/x/crypto v0.22.0/go.mod h1:vr6Su+7cTlO45qkww3VDJlzDn0ctJvRgYbC2NvXHt+M=
-golang.org/x/mod v0.16.0 h1:QX4fJ0Rr5cPQCF7O9lh9Se4pmwfwskqZfq5moyldzic=
-golang.org/x/mod v0.16.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
-golang.org/x/net v0.24.0 h1:1PcaxkF854Fu3+lvBIx5SYn9wRlBzzcnHZSiaFFAb0w=
-golang.org/x/net v0.24.0/go.mod h1:2Q7sJY5mzlzWjKtYUEXSlBWCdyaioyXzRB2RtU8KVE8=
+golang.org/x/crypto v0.27.0 h1:GXm2NjJrPaiv/h1tb2UH8QfgC/hOf/+z0p6PT8o1w7A=
+golang.org/x/crypto v0.27.0/go.mod h1:1Xngt8kV6Dvbssa53Ziq6Eqn0HqbZi5Z6R0ZpwQzt70=
+golang.org/x/mod v0.21.0 h1:vvrHzRwRfVKSiLrG+d4FMl/Qi4ukBCE6kZlTUkDYRT0=
+golang.org/x/mod v0.21.0/go.mod h1:6SkKJ3Xj0I0BrPOZoBy3bdMptDDU9oJrpohJ3eWZ1fY=
+golang.org/x/net v0.29.0 h1:5ORfpBpCs4HzDYoodCDBbwHzdR5UrLBZ3sOnUJmFoHo=
+golang.org/x/net v0.29.0/go.mod h1:gLkgy8jTGERgjzMic6DS9+SP0ajcu6Xu3Orq/SpETg0=
+golang.org/x/sync v0.8.0 h1:3NFvSEYkUoMifnESzZl15y791HH1qU2xm6eCJU5ZPXQ=
+golang.org/x/sync v0.8.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.22.0 h1:RI27ohtqKCnwULzJLqkv897zojh5/DwS/ENaMzUOaWI=
-golang.org/x/sys v0.22.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
-golang.org/x/text v0.14.0 h1:ScX5w1eTa3QqT8oi6+ziP7dTV1S2+ALU0bI+0zXKWiQ=
-golang.org/x/text v0.14.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
-golang.org/x/time v0.5.0 h1:o7cqy6amK/52YcAKIPlM3a+Fpj35zvRj2TP+e1xFSfk=
-golang.org/x/time v0.5.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
-golang.org/x/tools v0.19.0 h1:tfGCXNR1OsFG+sVdLAitlpjAvD/I6dHDKnYrpEZUHkw=
-golang.org/x/tools v0.19.0/go.mod h1:qoJWxmGSIBmAeriMx19ogtrEPrGtDbPK634QFIcLAhc=
+golang.org/x/sys v0.25.0 h1:r+8e+loiHxRqhXVl6ML1nO3l1+oFoWbnlu2Ehimmi34=
+golang.org/x/sys v0.25.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/text v0.18.0 h1:XvMDiNzPAl0jr17s6W9lcaIhGUfUORdGCNsuLmPG224=
+golang.org/x/text v0.18.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
+golang.org/x/time v0.6.0 h1:eTDhh4ZXt5Qf0augr54TN6suAUudPcawVZeIAPU7D4U=
+golang.org/x/time v0.6.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
+golang.org/x/tools v0.25.0 h1:oFU9pkj/iJgs+0DT+VMHrx+oBKs/LJMV+Uvg78sl+fE=
+golang.org/x/tools v0.25.0/go.mod h1:/vtpO8WL1N9cQC3FN5zPqb//fRXskFHbLKk4OW1Q7rg=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 modernc.org/cc/v4 v4.21.4 h1:3Be/Rdo1fpr8GrQ7IVw9OHtplU4gWbb+wNgeoBMmGLQ=
diff --git a/src/main.go b/src/main.go
index f90b59f..bf3696e 100644
--- a/src/main.go
+++ b/src/main.go
@@ -43,15 +43,12 @@ func main() {
 	e.Logger.SetLevel(log.DEBUG)
 	e.Use(middleware.Logger())
 
-	boxes := getBoxes()
-
 	e.GET("/health", healthCheck)
 
-	e.Static("/images", "images")
 	e.Static("/css", "css")
 
 	e.GET("/", func(c echo.Context) error {
-		return c.Render(200, "index", newPage(boxes))
+		return c.Render(200, "index", newPage(getBoxes()))
 	})
 
 	e.GET("/ws", initWs)
diff --git a/views/boxes.html b/views/boxes.html
index a51741a..c59e5a0 100644
--- a/views/boxes.html
+++ b/views/boxes.html
@@ -2,4 +2,59 @@
 {{range $index, $value := .}}
     <input type="checkbox" id="box-{{$index}}" name="checked" {{if $value}}checked{{end}} >
 {{end}}
+
+<script>
+    const socketUrl =
+      (window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
+      window.location.host +
+      "/ws";
+  
+    let socket = new WebSocket(socketUrl);
+  
+    socket.addEventListener("message", function (event) {
+      if (event.data.startsWith("u:")) {
+        const items = event.data.split(";");
+        items.forEach((i) => {
+          const parts = event.data.split(":");
+          document.getElementById("box-" + parts[1]).checked = parts[2] === "+";
+          console.log("box-" + parts[1]);
+        });
+        return;
+      }
+  
+      if (event.data.startsWith("i:")) {
+        const str = event.data.split("i:")[1];
+        const items = str.split(";");
+        if (items.length === 0) {
+          return;
+        }
+        document.querySelectorAll("input").forEach((input) => {
+          input.checked = false;
+        });
+        items.forEach((i) => {
+          if (!i) {
+            return;
+          }
+          console.log(i, document.getElementById("box-" + i));
+          document.getElementById("box-" + i).checked = true;
+        });
+        return;
+      }
+    });
+  
+    setInterval(() => {
+      socket.send("ping");
+    }, 10000);
+  
+    document.querySelectorAll("input").forEach((input) => {
+      input.addEventListener("change", (event) => {
+        if (socket.readyState !== socket.OPEN) {
+          socket = new WebSocket(socketUrl);
+        }
+        const id = event.target.id.split("-")[1];
+        const value = event.target.checked ? "+" : "-";
+        socket.send("u:" + id + ":" + value);
+      });
+    });
+  </script>
 {{end}}
\ No newline at end of file
diff --git a/views/index.html b/views/index.html
index 0d920bc..463e304 100644
--- a/views/index.html
+++ b/views/index.html
@@ -7,25 +7,32 @@
     <title>Home</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/htmx.org@1.9.5"></script>
-    <style>
-      body {
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
-      }
-      main {
-        flex: 1;
-      }
-    </style>
+    <link rel="stylesheet" href="/main.css" >
+
   </head>
   <body class="bg-gray-900 text-white font-sans">
+    <nav class="bg-gray-800 py-4 shadow-md">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
+        <!-- Logo -->
+        <div class="text-2xl font-bold text-blue-500">
+          <a href="/">K</a> </div>
+
+        <!-- Navigation Links -->
+        <div class="space-x-6">
+          <!-- <a href="/" class="text-white hover:text-blue-500">Home</a> -->
+          <!-- <a href="/projects" class="text-white hover:text-blue-500">Projects</a> -->
+          <!-- <a href="/blog" class="text-white hover:text-blue-500">Blog</a> -->
+        </div>
+      </div>
+    </nav>
+
     <main id="main" class="max-w-3xl mx-auto p-6 rounded-lg">
       <section>
         <div class="mt-4">{{template "boxes" .Boxes}}</div>
       </section>
     </main>
 
-    <footer class="bg-gray-800 text-center p-4">
+    <footer class="bg-gray-800 text-center p-4 flex flex-row justify-around">
       <!-- link to github -->
       <div class="mt-4">
         <a href="https://github.com/JurajKubrican" class="text-blue-500"
@@ -43,59 +50,4 @@
     </footer>
   </body>
 </html>
-
-<script>
-  const socketUrl =
-    (window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
-    window.location.host +
-    "/ws";
-
-  let socket = new WebSocket(socketUrl);
-
-  socket.addEventListener("message", function (event) {
-    if (event.data.startsWith("u:")) {
-      const items = event.data.split(";");
-      items.forEach((i) => {
-        const parts = event.data.split(":");
-        document.getElementById("box-" + parts[1]).checked = parts[2] === "+";
-        console.log("box-" + parts[1]);
-      });
-      return;
-    }
-
-    if (event.data.startsWith("i:")) {
-      const str = event.data.split("i:")[1];
-      const items = str.split(";");
-      if (items.length === 0) {
-        return;
-      }
-      document.querySelectorAll("input").forEach((input) => {
-        input.checked = false;
-      });
-      items.forEach((i) => {
-        if (!i) {
-          return;
-        }
-        console.log(i, document.getElementById("box-" + i));
-        document.getElementById("box-" + i).checked = true;
-      });
-      return;
-    }
-  });
-
-  setInterval(() => {
-    socket.send("ping");
-  }, 10000);
-
-  document.querySelectorAll("input").forEach((input) => {
-    input.addEventListener("change", (event) => {
-      if (socket.readyState !== socket.OPEN) {
-        socket = new WebSocket(socketUrl);
-      }
-      const id = event.target.id.split("-")[1];
-      const value = event.target.checked ? "+" : "-";
-      socket.send("u:" + id + ":" + value);
-    });
-  });
-</script>
 {{end}}