diff --git a/.nojekyll b/.nojekyll
index 0bcfc3d..1b49ab3 100644
--- a/.nojekyll
+++ b/.nojekyll
@@ -1 +1 @@
-1ccdc09d
\ No newline at end of file
+65dd96fc
\ No newline at end of file
diff --git a/from_module/quarto_build_site.html b/from_module/quarto_build_site.html
index 5ee97aa..22365b2 100644
--- a/from_module/quarto_build_site.html
+++ b/from_module/quarto_build_site.html
@@ -102,6 +102,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="../styles.css">
 </head>
 
 <body class="nav-sidebar docked nav-fixed">
@@ -665,6 +666,10 @@ <h1>quarto_build_site</h1>
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
diff --git a/from_module/quarto_callout_block.html b/from_module/quarto_callout_block.html
index 9ca283b..27d6bd1 100644
--- a/from_module/quarto_callout_block.html
+++ b/from_module/quarto_callout_block.html
@@ -102,6 +102,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="../styles.css">
 </head>
 
 <body class="nav-sidebar docked nav-fixed">
@@ -665,6 +666,10 @@ <h1>quarto_callout_block</h1>
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
diff --git a/from_module/quarto_doc.html b/from_module/quarto_doc.html
index 70feba3..8b8ef50 100644
--- a/from_module/quarto_doc.html
+++ b/from_module/quarto_doc.html
@@ -102,6 +102,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="../styles.css">
 </head>
 
 <body class="nav-sidebar docked nav-fixed">
@@ -665,6 +666,10 @@ <h1>quarto_doc</h1>
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
diff --git a/from_module/quarto_doc_page.html b/from_module/quarto_doc_page.html
index efa23ee..9c5bf7e 100644
--- a/from_module/quarto_doc_page.html
+++ b/from_module/quarto_doc_page.html
@@ -102,6 +102,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="../styles.css">
 </head>
 
 <body class="nav-sidebar docked nav-fixed">
@@ -665,6 +666,10 @@ <h1>quarto_doc_page</h1>
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
diff --git a/from_module/quarto_format.html b/from_module/quarto_format.html
index 5139fb0..76316de 100644
--- a/from_module/quarto_format.html
+++ b/from_module/quarto_format.html
@@ -102,6 +102,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="../styles.css">
 </head>
 
 <body class="nav-sidebar docked nav-fixed">
@@ -812,6 +813,10 @@ <h3 class="anchored" data-anchor-id="arguments">Arguments</h3>
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
diff --git a/from_module/quarto_index.html b/from_module/quarto_index.html
index 713879e..527b098 100644
--- a/from_module/quarto_index.html
+++ b/from_module/quarto_index.html
@@ -102,6 +102,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="../styles.css">
 </head>
 
 <body class="nav-sidebar docked nav-fixed">
@@ -665,6 +666,10 @@ <h1>quarto_index</h1>
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
diff --git a/from_module/quarto_yaml.html b/from_module/quarto_yaml.html
index 1a61c79..958c03c 100644
--- a/from_module/quarto_yaml.html
+++ b/from_module/quarto_yaml.html
@@ -102,6 +102,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="../styles.css">
 </head>
 
 <body class="nav-sidebar docked nav-fixed">
@@ -671,6 +672,10 @@ <h3 class="anchored" data-anchor-id="arguments">Arguments</h3>
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
diff --git a/index.html b/index.html
index b80d2eb..9752eba 100644
--- a/index.html
+++ b/index.html
@@ -68,6 +68,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="styles.css">
 </head>
 
 <body class="nav-fixed">
@@ -126,7 +127,7 @@ <h2 id="toc-title">On this page</h2>
 <section id="quartodocbuilder.jl" class="level1">
 <h1>QuartoDocBuilder.jl</h1>
 <p>QuartoDocBuilder.jl is a package inspired by R <a href="https://pkgdown.r-lib.org/">pkgdown</a>. It provides an easy way to generate a website with documentation and vignettes, by creating a <a href="https://quarto.org/">Quarto</a> project.</p>
-<p>Being powered by Quarto means that deploying to Github pages, customizing the style and many more things are taken for granted.</p>
+<p>Being powered by Quarto means that deploying to Github pages, customizing the style and many more things are taken for granted. This website doc even has a comment section! Check some examples <a href="https://quarto.org/docs/gallery/#websites">here</a> and the complete list of options <a href="https://quarto.org/docs/reference/projects/websites.html">here</a>.</p>
 <section id="comparison-to-documenter.jl" class="level2">
 <h2 class="anchored" data-anchor-id="comparison-to-documenter.jl">Comparison to Documenter.jl</h2>
 <p>Advantages?</p>
@@ -558,6 +559,10 @@ <h2 class="anchored" data-anchor-id="comparison-to-documenter.jl">Comparison to
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
diff --git a/reference.html b/reference.html
index f7f1061..f08b0c4 100644
--- a/reference.html
+++ b/reference.html
@@ -68,6 +68,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="styles.css">
 </head>
 
 <body class="nav-sidebar docked nav-fixed">
@@ -613,6 +614,10 @@ <h1>Reference</h1>
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
diff --git a/search.json b/search.json
index 43821c8..5ee6a51 100644
--- a/search.json
+++ b/search.json
@@ -4,7 +4,7 @@
     "href": "index.html",
     "title": "QuartoDocBuilder.jl",
     "section": "",
-    "text": "QuartoDocBuilder.jl is a package inspired by R pkgdown. It provides an easy way to generate a website with documentation and vignettes, by creating a Quarto project.\nBeing powered by Quarto means that deploying to Github pages, customizing the style and many more things are taken for granted.\n\n\nAdvantages?\nCI/CD?\nVersioning?"
+    "text": "QuartoDocBuilder.jl is a package inspired by R pkgdown. It provides an easy way to generate a website with documentation and vignettes, by creating a Quarto project.\nBeing powered by Quarto means that deploying to Github pages, customizing the style and many more things are taken for granted. This website doc even has a comment section! Check some examples here and the complete list of options here.\n\n\nAdvantages?\nCI/CD?\nVersioning?"
   },
   {
     "objectID": "index.html#comparison-to-documenter.jl",
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..0ee2b85
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,339 @@
+
+@media (min-width: 1020px) {
+.navbar-brand-container {
+  margin-right: 1em;
+}
+}
+
+
+
+@media (max-width: 1060px) and (min-width: 991.98px) {
+
+#navbarCollapse ul:last-of-type a.nav-link {
+  padding-left: .25em;
+  padding-right: .25em;
+}
+
+.navbar #quarto-search {
+  margin-left: .1em;
+}
+
+.navbar .bi-twitter,
+.navbar .bi-github,
+.navbar .bi-rss
+ {
+  font-size: .8em;
+}
+}
+
+
+@media (min-width: 991.98px) {
+#quarto-header {
+  border-bottom: 1px solid #dee2e6;
+}
+}
+
+.navbar-brand > img {
+  max-height: 36px;
+}
+
+
+.platform-table td {
+  vertical-align: middle;
+}
+
+.platform-table td > div.sourceCode {
+  margin-top: 0.3rem;
+  margin-bottom: 0.3rem;
+}
+
+
+.document-example {
+  opacity: 0.9;
+  padding: 6px; 
+  font-weight: 500;
+  margin-bottom: 1rem;
+}
+
+.document-example div {
+  padding: 5px;
+}
+
+
+.document-example .citation {
+  color: blue;
+}
+
+.trademark {
+  font-size: 0.6rem;
+  display: inline-block;
+  margin-left: -3px;
+}
+
+.search-attribution {
+  margin-top: 20px;
+  padding-bottom: 20px;
+  height: 40px;
+}
+
+.download-button {
+  margin-top: 1em;
+}
+
+.download-table {
+  margin-bottom: 2em;  
+}
+
+.download-table p {
+  margin-bottom: 0;
+}
+
+.download-table .checksum {
+  color: var(--bs-primary);
+  font-size: .775em;
+  cursor: pointer;
+  padding-top: 4px;
+}
+
+.download-button {
+  display:flex;
+  padding-bottom: 10px;
+  padding-top: 10px;
+}
+
+.download-button .secondary {
+  font-size: .775em;
+  margin-bottom: 0;
+}
+
+.download-button .container {
+  display: flex;
+  padding-left: 10px;
+  padding-right: 40px;
+}
+
+.download-button .icon-container {
+  fill: white;
+  width: 30px;
+  margin-right: 15px;
+}
+
+iframe.reveal-demo {
+  width: 100%;
+  height: 350px;
+  outline: none;
+}
+
+
+.slide-deck {
+  border: 3px solid #dee2e6;
+  width: 100%;
+  height: 475px;
+}
+
+@media only screen and (max-width: 600px) {
+ .slide-deck {
+    height: 400px;
+  }
+}
+
+
+@media (max-width: 575px) {
+
+.link-cards .card {
+  margin-bottom: 20px;
+  margin-right: 35px;
+}
+
+}
+
+@media (min-width: 576px) { 
+.link-cards {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.link-cards .card {
+  width: 190px;
+  margin: 0 20px 12px 0;
+}
+
+
+}
+
+
+.link-cards .card {
+  border: none;
+  padding: 0;
+}
+
+.link-cards .card-title h4 {
+  margin-top: 0;
+}
+
+.link-cards .card-title p {
+  margin-bottom: 0;
+}
+
+.link-cards .card-subtitle {
+  margin-bottom: 0.7rem;
+}
+
+.link-cards .card-body {
+  padding: 0.5rem;
+  padding-left: 0.1rem;
+}
+
+.link-cards .card-body ul {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style-type: none;
+}
+
+.link-cards .card-body ul a {
+  text-decoration: none;
+}
+
+.link-cards .card-body ul li {
+  padding-bottom: 0.2rem;
+}
+
+
+.card .source-code {
+  margin-top: 3px;
+}
+
+.carousel.card {
+  font-size: 16px;
+  padding-top: 2em;
+}
+
+.carousel.card a {
+  text-decoration: none;
+}
+
+.carousel img {
+  width: 70%;
+  margin-bottom: 110px;
+}
+
+.carousel .carousel-control-prev-icon, 
+.carousel .carousel-control-next-icon {
+  margin-bottom: 110px;
+}
+
+
+.gallery-category {
+  column-gap: 10px;
+}
+
+.btn-action-primary {
+  color: white;
+  background-color: #447099 !important;
+}
+
+.btn-action-primary:hover {
+  color: white;
+}
+
+.btn-action {
+  min-width: 165px;
+  border-radius: 30px;
+  border: none;
+}
+
+.panel-tabset[data-group="tools-tabset"] .choose-your-tool {
+  max-width: 90px;
+  margin-right: 25px;
+  margin-top: 30px;
+  font-weight: 300;
+  font-size: 1.3rem;
+  text-align: left;
+  vertical-align: center;
+}
+
+.panel-tabset[data-group="tools-tabset"] .tab-content {
+  border: none;
+  padding-left: 5px;
+}
+
+.panel-tabset[data-group="tools-tabset"] .nav-tabs {
+  border-bottom: none;
+}
+
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link {
+  text-align: center;
+  margin-right: 10px;
+  margin-top: 10px;
+  color: inherit;
+  width: 102px;
+  font-size: 0.8em;
+}
+
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link, 
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active, 
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
+  border: 1px solid  rgb(222, 226, 230);
+  border-radius: 10px;
+}
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link:hover {
+   border-color: rgb(80,146,221);
+   border-width: 1px;
+} 
+
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link.active, 
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-item.show .nav-link {
+  border-color: rgb(80,146,221);
+  border-width: 2px;
+}
+
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link img {
+  width: 65px;
+  height: 65px;
+  display: block;
+  margin-bottom: 2px;
+}
+
+/*
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link {
+  text-align: center;
+  margin-right: 10px;
+  margin-top: 10px;
+  color: inherit;
+  width: 102px;
+  font-size: 0.8em;
+}
+ 
+.panel-tabset[data-group="tools-tabset"] .nav-tabs .nav-link img {
+  width: 45px;
+  height: 45px;
+  margin-left: 10px;
+  display: block;
+  margin-bottom: 2px;
+}
+*/
+
+
+.download-text {
+  font-size: 1.1em;
+  font-weight: 500;  
+}
+
+.preview-image-grid {
+  gap: .75em;
+}
+
+.preview-image-grid p {
+  margin-bottom: 0;
+}
+
+.preview-image-label {
+  text-align: center;
+  font-size: .75em;
+  font-weight: 600;
+}
+
+.illustration {
+  border: 1px solid #dee2e6;
+}
diff --git a/test.html b/test.html
index 0b2800d..13ca31f 100644
--- a/test.html
+++ b/test.html
@@ -102,6 +102,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="styles.css">
 </head>
 
 <body class="nav-fixed">
@@ -622,6 +623,10 @@ <h3 class="anchored" data-anchor-id="examples-1">Examples</h3>
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
diff --git a/tutorials.html b/tutorials.html
index 6a5c455..57371b6 100644
--- a/tutorials.html
+++ b/tutorials.html
@@ -68,6 +68,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="styles.css">
 </head>
 
 <body class="nav-sidebar docked nav-fixed">
@@ -583,6 +584,10 @@ <h1>Tutorials</h1>
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
diff --git a/tutorials/tutorial-1.html b/tutorials/tutorial-1.html
index 322346b..ea72ae8 100644
--- a/tutorials/tutorial-1.html
+++ b/tutorials/tutorial-1.html
@@ -68,6 +68,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="../styles.css">
 </head>
 
 <body class="nav-sidebar docked nav-fixed">
@@ -583,6 +584,10 @@ <h1>Making something cool</h1>
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
diff --git a/tutorials/tutorial-2.html b/tutorials/tutorial-2.html
index 638242c..494f934 100644
--- a/tutorials/tutorial-2.html
+++ b/tutorials/tutorial-2.html
@@ -68,6 +68,7 @@
 }</script>
 
 
+<link rel="stylesheet" href="../styles.css">
 </head>
 
 <body class="nav-sidebar docked nav-fixed">
@@ -583,6 +584,10 @@ <h1>Making something even more cool</h1>
   }
 });
 </script>
+<script src="https://giscus.app/client.js" data-repo="vituri/QuartoDocBuilder.jl" data-repo-id="R_kgDOL_6KUA" data-category="General" data-category-id="DIC_kwDOL_6KUM4CflsE" data-mapping="pathname" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top" data-theme="light" data-lang="en" crossorigin="anonymous" data-loading="lazy" async="">
+</script>
+<input type="hidden" id="giscus-base-theme" value="light">
+<input type="hidden" id="giscus-alt-theme" value="dark">
 </div> <!-- /content -->
 <footer class="footer">
   <div class="nav-footer">
