diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index 1924e59..327b8ee 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -682,13 +682,31 @@ table.markdown {
 
 
 /* Code blocks */
-.highlight > .chroma {
+.code-block {
+  display: flex;
+  flex-direction: column;
   margin: 16px 0;
-  overflow: auto;
+  background-color: var(--background-1);
+  border-radius: 8px;
+}
+.code-block > .code-type {
+  background-color: var(--background-2);
+  padding: 4px 8px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  font-family: monospace;
+}
+.code-block > .highlight {
+  margin: 8px 4px;
 }
 
+.highlight > .chroma {
+  overflow: auto;
+}
 .chroma {
-  background-color: var(--background-1) !important;
+  /* the syntax highlight CSS adds a border */
+  background-color: transparent !important;
+  margin: 0;
 }
 
 .chroma .gp {
diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
new file mode 100644
index 0000000..51ae5fd
--- /dev/null
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -0,0 +1,5 @@
+<div class="code-block">
+    <div class="code-type">{{ .Type }}</div>
+    {{/* a div.highlight is already created by highlight function */}}
+    {{ highlight .Inner .Type }}
+</div>
diff --git a/theme.toml b/theme.toml
index 44355e4..b0da64e 100644
--- a/theme.toml
+++ b/theme.toml
@@ -8,7 +8,7 @@ description = "Simple Hugo theme for boba.best and bbaovanc.com"
 homepage = "https://bbaovanc.com"
 tags = []
 features = []
-min_version = "0.80.0"
+min_version = "0.93.0"
 
 [author]
   name = "bbaovanc"