diff --git a/examples/gno.land/r/demo/markdown_test/markdown.gno b/examples/gno.land/r/demo/markdown_test/markdown.gno
index c6628f09d0c..362fd56f5cf 100644
--- a/examples/gno.land/r/demo/markdown_test/markdown.gno
+++ b/examples/gno.land/r/demo/markdown_test/markdown.gno
@@ -471,9 +471,11 @@ _Using HTML:_
 
 _Render:_
 
+:::stack
 :::button("Link button with comma, needs quotes", https://gno.land)/
 
 :::button(Plain button)/
+:::/stack
 
 Accordion component
 -------------------
@@ -879,9 +881,10 @@ _Using HTML:_
 
 _Render:_
 
+:::stack
 :::action("reset", "Reset")/
-
 :::action("submit", "Submit")/
+:::/stack
 
 :::/form
 `
diff --git a/gno.land/cmd/gnoweb/static/css/app.css b/gno.land/cmd/gnoweb/static/css/app.css
index d5ad735c814..a2020fc9130 100644
--- a/gno.land/cmd/gnoweb/static/css/app.css
+++ b/gno.land/cmd/gnoweb/static/css/app.css
@@ -49,7 +49,7 @@ html[data-theme="light"] {
   --icon-color: #000;
 
   --quote-background: #ddd;
-  --quote-2-background: #aaa4;
+  --quote-2-background: #757575;
   --code-background: #d7d9db;
   --header-background: #d7d9db;
 
@@ -84,7 +84,7 @@ html[data-theme="dark"] {
   --muted-color: #737373;
   --hover-color: #a0a0a0;
   --hover-color-reverse: #555555;
-  --border-color: #606060;
+  --border-color: #c7c7c7;
   --icon-color: #dddddd;
 
   --quote-background: #404040;
@@ -167,7 +167,7 @@ h4,
 nav {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji";
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: 0.08rem;
 }
 
@@ -179,16 +179,18 @@ h1 {
   text-align: center;
   font-size: 2rem;
   margin-block: 4.2rem 2rem;
+  font-weight: 700;
 }
 
 h2 {
-  font-size: 1.625rem;
+  font-size: 1.7rem;
   margin-block: 3.4rem 1.2rem;
   line-height: 1.4;
+  font-weight: 700;
 }
 
 h3 {
-  font-size: 1.467rem;
+  font-size: 1.4rem;
   margin-block: 2.6rem 1rem;
 }
 
@@ -254,12 +256,12 @@ li > * {
 input,
 select {
   font-family: "Roboto Mono", "Monaco", monospace;
-  background-color: var(--input-background-color, #eee);
+  background-color: transparent;
   border: 1px solid var(--border-color);
   color: var(--text-color, #000);
-  min-width: 25em;
-  padding: 0.6rem 0.7rem;
+  padding: 0.3rem 0.7rem;
   max-width: 100%;
+  min-width: 14rem;
   display: inline-flex;
 }
 
@@ -286,11 +288,12 @@ input + label {
 
 select {
   position: relative;
-  -moz-appearance: none; /* Firefox */
-  -webkit-appearance: none; /* Safari and Chrome */
+  padding-inline-end: 2.5rem;
+  -moz-appearance: none;
+  -webkit-appearance: none;
   appearance: none;
   background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
-  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
+  background-position: calc(102% - 20px) calc(0.7em + 2px), calc(102% - 15px) calc(0.7em + 2px), calc(100% - 2em) 0.15em;
   background-size: 5px 5px, 5px 5px, 1px 1.5em;
   background-repeat: no-repeat;
 }
@@ -304,7 +307,7 @@ textarea {
   width: 100%;
   height: 8rem;
   padding: 0.7rem;
-  background-color: var(--input-background-color, #eee);
+  background-color: transparent;
   border: 1px solid var(--border-color);
   color: var(--text-color, #000);
 }
@@ -312,18 +315,18 @@ textarea {
 blockquote {
   margin: 0;
   padding: 0.5em 1em;
-  background-color: var(--quote-background, #ddd);
+  border-left: 0.5rem solid var(--border-color, #aaa4);
 }
 
 blockquote blockquote {
   margin: 0;
-  background-color: var(--quote-2-background, #aaa4);
 }
 
 pre {
   background-color: var(--code-background, #d7d9db);
   margin: 1rem 0;
   padding: 1em;
+  border-left: 0.5rem solid var(--border-color, #aaa4);
 }
 
 label {
@@ -396,7 +399,7 @@ code {
     flex-direction: row;
   }
   .gno-stack *:not(:first-child) {
-    margin-left: 3.75rem;
+    margin-left: 1rem;
   }
   .gno-stack > a,
   .gno-stack > p > a {
@@ -832,17 +835,26 @@ code.hljs {
 
 #realm_render ul,
 #realm_help ul {
+  padding-inline-start: 1rem;
   list-style: disc;
 }
-
-#realm_render ul,
-#realm_help ul {
-  padding-inline-start: 1rem;
+#realm_render ol,
+#realm_help ol {
+  padding-inline-start: 2rem;
 }
 
 #realm_render ul > li > ul,
-#realm_help ul > li > ul {
+#realm_help ul > li > ul,
+#realm_render ol > li > ol,
+#realm_help ol > li > ol,
+#realm_render ol > li > ul,
+#realm_help ol > li > ul,
+#realm_render ul > li > ol,
+#realm_help ul > li > ol {
   padding-left: 1rem;
+}
+#realm_render ul > li > ul,
+#realm_help ul > li > ul {
   list-style: circle inside;
 }
 
@@ -957,15 +969,15 @@ code.hljs {
   padding: 0.5rem 0.75rem;
   margin-inline-start: -1px;
   line-height: 1.25;
-  color: var(--text-color-reverse, #eee);
-  background-color: var(--text-color, #000);
+  color: var(--text-color, #000);
+  background-color: var(--input-background-color, #eee);
   border: 1px solid transparent;
   text-decoration: none;
 }
 
 .gno-pagination a:hover {
-  color: var(--text-color, #000);
-  background-color: var(--background-color, #eee);
+  color: var(--text-color-reverse, #eee);
+  background-color: var(--text-color, #000);
   border-color: var(--text-color, #000);
 }
 
@@ -980,28 +992,28 @@ code.hljs {
 /** Button **/
 .gno-btn {
   cursor: pointer;
-  color: var(--text-color-reverse, #eee);
-  background-color: var(--text-color, #000);
+  color: var(--text-color, #000);
+  background-color: var(--input-background-color, #eee);
   display: inline-block;
   font-weight: 400;
   text-align: center;
+  padding: 0.3rem 2rem;
   white-space: nowrap;
   vertical-align: middle;
+  border: 1px solid var(--border-color);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border: 1px solid transparent;
-  padding: 0.375rem 0.75rem;
+  min-width: 8rem;
   font-size: 1rem;
   line-height: 1.5;
   text-decoration: none;
-  margin-inline-end: 0.2rem;
 }
 
 .gno-btn:hover {
-  color: var(--text-color, #000);
-  background-color: var(--background-color, #eee);
+  color: var(--text-color-reverse, #fff);
+  background-color: var(--text-color, #000);
   border-color: var(--text-color, #000);
 }
 
@@ -1013,14 +1025,37 @@ code.hljs {
 
 /** Accordion **/
 .gno-accordion-trigger {
+  position: relative;
   width: 100%;
   text-align: left;
   margin-block-start: 1rem;
 }
 
+.gno-accordion-trigger::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0.875rem;
+  left: 0.875rem;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 6px 4px 0 4px;
+  border-color: var(--text-color, #000) transparent transparent transparent;
+  transform: rotate(0deg);
+}
+.gno-accordion-trigger[aria-expanded="false"]::after {
+  transform: rotate(-90deg);
+}
+.gno-accordion-trigger:hover::after {
+  border-color: var(--text-color-reverse, #fff) transparent transparent transparent;
+}
+
 .gno-accordion-trigger + div {
   padding: 0.875rem 0.7rem 2.2rem;
-  background: var(--code-background, #d7d9db);
+  background: transparent;
+  border: var(--input-background-color, #eee) 1px solid;
+  border-top: 0;
   margin-block-end: 1rem;
 }
 
@@ -1093,28 +1128,29 @@ code.hljs {
 .gno-dropdown {
   position: relative;
   margin-block: 1rem;
+  display: inline-block;
 }
 
-.gno-dropdown > ul,
-.gno-dropdown > ol {
+#realm_render .gno-dropdown > ul,
+#realm_help .gno-dropdown > ul,
+#realm_render .gno-dropdown > ol,
+#realm_help .gno-dropdown > ol {
   position: absolute;
   top: calc(100% - 0.2rem);
   left: 0;
+  border: 1px solid var(--border-color);
   z-index: 1000;
   display: block;
-  float: left;
-  min-width: 10rem;
-  padding: 0.8rem 0.7rem;
+  min-width: 100%;
+  padding-inline-start: 0;
   margin: 0.125rem 0 0;
   font-size: 1rem;
   text-align: left;
   list-style: none;
-  background-color: var(--text-color);
+  background-color: var(--input-background-color, #eee);
   background-clip: padding-box;
 }
-.gno-dropdown li {
-  margin-block: 0.8rem;
-}
+
 #realm_render .gno-dropdown ul,
 #realm_help .gno-dropdown ul,
 #realm_render .gno-dropdown ol,
@@ -1122,11 +1158,21 @@ code.hljs {
   list-style: none;
 }
 
+#realm_render .gno-dropdown li,
+#realm_help .gno-dropdown li {
+  margin: 0;
+}
+
 .gno-dropdown a {
-  color: var(--text-color-reverse, #eee);
+  color: var(--text-color, #000);
+  display: inline-block;
+  width: 100%;
+  padding-inline: 2rem;
+  padding-block: 0.4rem;
 }
 .gno-dropdown a:hover {
-  color: var(--hover-color-reverse, #b0b0b0);
+  color: var(--text-color-reverse, #fff);
+  background: var(--text-color, #000);
 }
 
 /** Tabs **/