diff --git a/kernelpanic.lol/templates/backlayout.html b/kernelpanic.lol/templates/backlayout.html
new file mode 100644
index 0000000..8a5f98a
--- /dev/null
+++ b/kernelpanic.lol/templates/backlayout.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="{{ '/static/style.css'|url }}">
+<title>{% block title %}Welcome{% endblock %} — kernelpanic.lol</title>
+<body>
+  <header>
+    <h1>kernelpanic.lol</h1>
+    <nav>
+      <ul class="nav navbar-nav">
+        <li{% if this._path == '/' %} class="active"{% endif
+          %}><a href="{{ '/'|url }}">Welcome</a></li>
+        {% for href, title in [
+          ['/blog', 'Blog'],
+          ['/projects', 'Projects'],
+          ['/about', 'About']
+        ] %}
+          <li{% if this.is_child_of(href) %} class="active"{% endif
+            %}><a href="{{ href|url }}">{{ title }}</a></li>
+        {% endfor %}
+      </ul>
+    </nav>
+  </header>
+  <div class="page">
+    {% block body %}{% endblock %}
+  </div>
+  <footer>
+    &copy; Copyright 2023 by o.
+  </footer>
+</body>
diff --git a/kernelpanic.lol/templates/changling.html b/kernelpanic.lol/templates/changling.html
index 34bfbea..b358d5e 100644
--- a/kernelpanic.lol/templates/changling.html
+++ b/kernelpanic.lol/templates/changling.html
@@ -36,9 +36,9 @@
 </head>
 <body>
     <div id="topbar">
-        <div class="button">Button 1</div>
-        <div class="button">Button 2</div>
-        <div class="button">Button 3</div>
+        <a href="/about"><div class="button">khe?</div></a>
+        <a href="/blog"><div class="button">noticiones</div></a>
+        <a href="/miranomasesosproyectos"><div class="button">proyectazos</div></a>
         <!-- Add more buttons as needed -->
     </div>
 
diff --git a/kernelpanic.lol/templates/layout.html b/kernelpanic.lol/templates/layout.html
index 8a5f98a..b358d5e 100644
--- a/kernelpanic.lol/templates/layout.html
+++ b/kernelpanic.lol/templates/layout.html
@@ -1,29 +1,71 @@
-<!doctype html>
-<meta charset="utf-8">
-<link rel="stylesheet" href="{{ '/static/style.css'|url }}">
-<title>{% block title %}Welcome{% endblock %} — kernelpanic.lol</title>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>{{ this.title }}</title>
+    <style>
+        body, html {
+            height: 100%;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+        }
+        #topbar {
+            width: 100%;
+            text-align: center;
+            border-bottom: 1px solid black;
+        }
+        .button {
+            display: inline-block;
+            padding: 10px;
+            border-right: 1px solid black;
+            transition: background-color 0.5s;
+        }
+        .button:hover {
+            background-color: #888;
+        }
+        .content {
+            max-width: 80%;
+            text-align: justify;
+        }
+        h1 {
+            text-align: left;
+        }
+    </style>
+</head>
 <body>
-  <header>
-    <h1>kernelpanic.lol</h1>
-    <nav>
-      <ul class="nav navbar-nav">
-        <li{% if this._path == '/' %} class="active"{% endif
-          %}><a href="{{ '/'|url }}">Welcome</a></li>
-        {% for href, title in [
-          ['/blog', 'Blog'],
-          ['/projects', 'Projects'],
-          ['/about', 'About']
-        ] %}
-          <li{% if this.is_child_of(href) %} class="active"{% endif
-            %}><a href="{{ href|url }}">{{ title }}</a></li>
-        {% endfor %}
-      </ul>
-    </nav>
-  </header>
-  <div class="page">
-    {% block body %}{% endblock %}
-  </div>
-  <footer>
-    &copy; Copyright 2023 by o.
-  </footer>
+    <div id="topbar">
+        <a href="/about"><div class="button">khe?</div></a>
+        <a href="/blog"><div class="button">noticiones</div></a>
+        <a href="/miranomasesosproyectos"><div class="button">proyectazos</div></a>
+        <!-- Add more buttons as needed -->
+    </div>
+
+    <div class="content">
+        <h1>{{ this.title }}</h1>
+        {{ this.body }}
+    </div>
+
+    <script>
+        document.body.addEventListener('click', function () {
+            var randomColor = 'rgb(' + 
+                Math.floor(Math.random() * 256) + ',' +
+                Math.floor(Math.random() * 256) + ',' +
+                Math.floor(Math.random() * 256) + ')';
+            document.body.style.backgroundColor = randomColor;
+            document.getElementById('topbar').style.backgroundColor = randomColor;
+        });
+        var buttons = document.querySelectorAll('.button');
+        buttons.forEach(function(button) {
+            button.addEventListener('click', function() {
+                var randomColor = 'rgb(' + 
+                    Math.floor(Math.random() * 256) + ',' +
+                    Math.floor(Math.random() * 256) + ',' +
+                    Math.floor(Math.random() * 256) + ')';
+                this.style.backgroundColor = randomColor;
+            });
+        });
+    </script>
 </body>
+</html>
\ No newline at end of file
