diff --git a/content/nixos/vsketch-and-NixOS/index.md b/content/nixos/vsketch-and-NixOS/index.md
index 7000197..00159c1 100644
--- a/content/nixos/vsketch-and-NixOS/index.md
+++ b/content/nixos/vsketch-and-NixOS/index.md
@@ -157,11 +157,6 @@ if __name__ == "__main__":
     SimpleRingsSketch.display()
 ```
 
-{{< card >}}
-{{<figure src="./images/screenshot.png" width=100% >}}
-{{< /card >}}
-
-{{< card >}}
-{{<figure src="./images/plot01.jpg" width=100% >}}
-{{<figure src="./images/plot02.jpg" width=100% >}}
-{{< /card >}}
+![](screenshot.png)
+![](plot01.jpg)
+![](plot02.jpg)
diff --git a/content/nixos/vsketch-and-NixOS/images/plot01.jpg b/content/nixos/vsketch-and-NixOS/plot01.jpg
similarity index 100%
rename from content/nixos/vsketch-and-NixOS/images/plot01.jpg
rename to content/nixos/vsketch-and-NixOS/plot01.jpg
diff --git a/content/nixos/vsketch-and-NixOS/images/plot02.jpg b/content/nixos/vsketch-and-NixOS/plot02.jpg
similarity index 100%
rename from content/nixos/vsketch-and-NixOS/images/plot02.jpg
rename to content/nixos/vsketch-and-NixOS/plot02.jpg
diff --git a/content/nixos/vsketch-and-NixOS/images/screenshot.png b/content/nixos/vsketch-and-NixOS/screenshot.png
similarity index 100%
rename from content/nixos/vsketch-and-NixOS/images/screenshot.png
rename to content/nixos/vsketch-and-NixOS/screenshot.png
diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
index 71aa78c..d75be43 100644
--- a/node_modules/.package-lock.json
+++ b/node_modules/.package-lock.json
@@ -30,6 +30,16 @@
       "peerDependencies": {
         "@popperjs/core": "^2.11.8"
       }
+    },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
+    "node_modules/sakura.css": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sakura.css/-/sakura.css-1.5.0.tgz",
+      "integrity": "sha512-AcAZa9F4SCs2xaKLWcXQxJxKfeod2PN3sR31+R22MKuyoJxNChH1wBG4mQaY9gVpJ3VpNA1XHPOrOM9hFo9cSw=="
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 1a471ff..72ac922 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,9 @@
   "packages": {
     "": {
       "dependencies": {
-        "bootstrap": "^5.3.3"
+        "bootstrap": "^5.3.3",
+        "normalize.css": "^8.0.1",
+        "sakura.css": "^1.5.0"
       }
     },
     "node_modules/@popperjs/core": {
@@ -35,6 +37,16 @@
       "peerDependencies": {
         "@popperjs/core": "^2.11.8"
       }
+    },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
+    "node_modules/sakura.css": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sakura.css/-/sakura.css-1.5.0.tgz",
+      "integrity": "sha512-AcAZa9F4SCs2xaKLWcXQxJxKfeod2PN3sR31+R22MKuyoJxNChH1wBG4mQaY9gVpJ3VpNA1XHPOrOM9hFo9cSw=="
     }
   }
 }
diff --git a/package.json b/package.json
index f6dfea9..db543aa 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,7 @@
 {
   "dependencies": {
-    "bootstrap": "^5.3.3"
+    "bootstrap": "^5.3.3",
+    "normalize.css": "^8.0.1",
+    "sakura.css": "^1.5.0"
   }
 }
diff --git a/sass/main.sass b/sass/main.sass
index de6e1ef..0589881 100644
--- a/sass/main.sass
+++ b/sass/main.sass
@@ -1,9 +1,6 @@
 
-@import "../node_modules/bootstrap/scss/bootstrap"
+//@import "../node_modules/bootstrap/scss/bootstrap"
+@import "../node_modules/sakura.css/scss/sakura"
 
-pre
-  padding: 1em
-  font-size: 1rem
-
-pre code
-  font-size: 1rem
+body
+  max-width: 1000px
diff --git a/templates/base.html b/templates/base.html
index 24e4379..525de3d 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,52 +4,55 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Tech-Blog</title>
-    <link href="/main.css" rel="stylesheet">
+<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakura.css/css/sakura.css" type="text/css">-->
+
+    <link rel="stylesheet" href="/css/normalize.css" type="text/css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css">
+    <link rel="stylesheet" href="/main.css" type="text/css">
 </head>
 <body>
 
 <!--  navigation-->
 <header>
-    <nav class="navbar navbar-expand-lg bg-body-tertiary">
-        <div class="container-xxl">
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-                    aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="/">Main</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="#">Articles</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="#">Art</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="#">Slides</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="/about/">About</a>
-                    </li>
-                </ul>
-                <!--      <form class="d-flex" role="search">-->
-                <!--        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">-->
-                <!--        <button class="btn btn-outline-success" type="submit">Search</button>-->
-                <!--      </form>-->
-            </div>
-        </div>
+    <nav class="pure-menu pure-menu-horizontal">
+        <ul class="pure-menu-list">
+            <li class="pure-menu-item pure-menu-link">
+                <a href="/" class="pure-menu-link">Main</a>
+            </li>
+            <li class="pure-menu-item pure-menu-link">
+                <a href="/nixos/" class="pure-menu-link">Articles</a>
+            </li>
+            <li class="pure-menu-item pure-menu-link">
+                <a href="/" class="pure-menu-link">Slides</a>
+            </li>
+            <li class="pure-menu-item pure-menu-link">
+                <a href="/about/" class="pure-menu-link">About</a>
+            </li>
+        </ul>
     </nav>
+
+<!--    <nav>-->
+<!--        <ul>-->
+<!--            <li> <a href="/">Main</a> </li>-->
+<!--            <li> <a href="/">Articles</a> </li>-->
+<!--            <li> <a href="/">Slides</a> </li>-->
+<!--            <li> <a href="/">About</a> </li>-->
+<!--        </ul>-->
+        <!--      <form class="d-flex" role="search">-->
+        <!--        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">-->
+        <!--        <button class="btn btn-outline-success" type="submit">Search</button>-->
+        <!--      </form>-->
+<!--    </nav>-->
+
+
+
 </header>
 
+<main>
 {% block content %} {% endblock %}
+</main>
 
 </body>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-        crossorigin="anonymous"></script>
 </html>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index e570943..83bccce 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,14 +1,11 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="container-xxl">
-
-<h1 class="display-6"> Techblog </h1>
+<h1> Techblog </h1>
 
 <ul>
     <li><a href="/nixos">nixos</a></li>
     <li><a href="/nixos/vsketch-and-nixos/">vsketch</a></li>
 </ul>
 
-</div>
 {% endblock content %}
\ No newline at end of file
diff --git a/templates/page.html b/templates/page.html
index ef7745e..6d4765b 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -1,11 +1,9 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="container-xxl">
 
 <h1>{{ page.title | safe }}</h1>
 
 {{ page.content | safe }}
 
-</div>
 {% endblock content %}
\ No newline at end of file
diff --git a/templates/shortcodes/figure.html b/templates/shortcodes/figure.html
new file mode 100644
index 0000000..80182e2
--- /dev/null
+++ b/templates/shortcodes/figure.html
@@ -0,0 +1 @@
+<img src="{{ src }}">
\ No newline at end of file