diff --git a/static/css/_vars.sass b/static/css/_vars.sass
index 400ea7c..4a12b2c 100644
--- a/static/css/_vars.sass
+++ b/static/css/_vars.sass
@@ -9,6 +9,8 @@ $primary-glow: #f45a8861
 $primary-soft: #f79ab624
 $accent: #28aaf0
 
+$warn: #f09928
+
 $edge: 5px
 
 $main-width: 800px
diff --git a/static/css/base.css b/static/css/base.css
index 16c7c2c..5e28823 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -29,6 +29,10 @@ h1, h1 *, h2, h2 *, h3, h3 * {
   font-family: "Syne", sans-serif;
 }
 
+h3, h3 * {
+  line-height: 1.5rem;
+}
+
 main a {
   text-decoration: underline;
   text-decoration-color: #b53d61;
@@ -49,6 +53,28 @@ img {
   max-width: 100%;
 }
 
+mark {
+  color: #f3f3f3;
+  background: #b53d61;
+  padding: 5px 7px;
+  border-radius: 5px;
+}
+
+blockquote {
+  margin-left: 0;
+  padding: 0.6rem 1rem;
+  border-left: 5px solid #28aaf0;
+  opacity: 0.8;
+  background: #252a38;
+}
+blockquote.warning {
+  border-left-color: #f09928;
+}
+
+code {
+  font-family: "Courier New", Courier, monospace;
+}
+
 p, p *, main ul {
   line-height: 32px;
 }
@@ -57,13 +83,6 @@ p, p *, main ul {
   outline: none;
 }
 
-mark {
-  color: #f3f3f3;
-  background: #b53d61;
-  padding: 5px 7px;
-  border-radius: 5px;
-}
-
 .special-gradient {
   background: linear-gradient(83deg, rgb(244, 90, 136) 7%, rgb(40, 170, 240) 100%);
   -webkit-background-clip: text;
diff --git a/static/css/base.css.map b/static/css/base.css.map
index 1c8f00f..1b57799 100644
--- a/static/css/base.css.map
+++ b/static/css/base.css.map
@@ -1 +1 @@
-{"version":3,"sources":["base.sass","base.css","_vars.sass"],"names":[],"mappings":"AACQ,kFAAA;AAER;EACI,uBAAA;ACDJ;;ADGA;EACI,yBENS;ADMb;;ADEA;EACI,gBEGS;EFFT,cAAA;ACCJ;;ADCA;EACI,sBAAA;EACA,YAAA;EACA,cEhBG;EFiBH,gCAAA;ACEJ;;ADAA;EACI,qBAAA;ACGJ;;ADAI;EACI,gBAAA;EACA,iBAAA;EACA,+BAAA;ACGR;;ADDA;EACI,0BAAA;EACA,8BEzBM;EF0BN,0BAAA;EACA,8BAAA;EAEA,gBAAA;ACGJ;ADDI;EACI,6CE7BO;ADgCf;;ADDA;EACI,YAAA;ACIJ;;ADFA;EACI,cAAA;EACA,eAAA;ACKJ;;ADHA;EACI,iBAAA;ACMJ;;ADJA;EACI,aAAA;ACOJ;;ADLA;EACI,cErDG;EFsDH,mBEjDM;EFkDN,gBAAA;EACA,kBAAA;ACQJ;;ADNA;EACI,gFAAA;EACA,6BAAA;EACA,oCAAA;ACSJ;;ADPA;EACI;IACI,cAAA;ECUN;AACF","file":"base.css","sourcesContent":["@import '_vars'\n@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap')\n\nhtml\n    scroll-behavior: smooth\n\nbody\n    background-color: $background\n\nnav, main, footer\n    max-width: $main-width\n    margin: 0 auto\n\n*, *::before, *::after\n    box-sizing: border-box\n    border: none\n    color: $text\n    font-family: 'Inter', sans-serif\n\na\n    text-decoration: none\n\nh1, h2, h3\n    &, *\n        font-weight: 700\n        line-height: 3rem\n        font-family: 'Syne', sans-serif\n\nmain a\n    text-decoration: underline\n    text-decoration-color: $primary\n    text-underline-offset: 2px\n    text-decoration-thickness: 5px\n\n    transition: 0.2s\n\n    &:hover\n        background: $primary-soft\n\nmain p\n    opacity: 0.9\n\nimg\n    display: block\n    max-width: 100%\n\np, p *, main ul\n    line-height: 32px\n\n:focus:not(:focus-visible)\n    outline: none\n\nmark\n    color: $text\n    background: $primary\n    padding: 5px 7px\n    border-radius: 5px\n\n.special-gradient\n    background: linear-gradient(83deg, rgba(244,90,136,1) 7%, rgba(40,170,240,1) 100%)\n    -webkit-background-clip: text\n    -webkit-text-fill-color: transparent\n\n@media (max-width: 900px)\n    body\n        margin: 0 2rem\n\n","@import url(\"https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap\");\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  background-color: #03060d;\n}\n\nnav, main, footer {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n  border: none;\n  color: #f3f3f3;\n  font-family: \"Inter\", sans-serif;\n}\n\na {\n  text-decoration: none;\n}\n\nh1, h1 *, h2, h2 *, h3, h3 * {\n  font-weight: 700;\n  line-height: 3rem;\n  font-family: \"Syne\", sans-serif;\n}\n\nmain a {\n  text-decoration: underline;\n  text-decoration-color: #b53d61;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 5px;\n  transition: 0.2s;\n}\nmain a:hover {\n  background: rgba(247, 154, 182, 0.1411764706);\n}\n\nmain p {\n  opacity: 0.9;\n}\n\nimg {\n  display: block;\n  max-width: 100%;\n}\n\np, p *, main ul {\n  line-height: 32px;\n}\n\n:focus:not(:focus-visible) {\n  outline: none;\n}\n\nmark {\n  color: #f3f3f3;\n  background: #b53d61;\n  padding: 5px 7px;\n  border-radius: 5px;\n}\n\n.special-gradient {\n  background: linear-gradient(83deg, rgb(244, 90, 136) 7%, rgb(40, 170, 240) 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n@media (max-width: 900px) {\n  body {\n    margin: 0 2rem;\n  }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]}
\ No newline at end of file
+{"version":3,"sources":["base.sass","base.css","_vars.sass"],"names":[],"mappings":"AACQ,kFAAA;AAER;EACI,uBAAA;ACDJ;;ADGA;EACI,yBENS;ADMb;;ADEA;EACI,gBEKS;EFJT,cAAA;ACCJ;;ADCA;EACI,sBAAA;EACA,YAAA;EACA,cEhBG;EFiBH,gCAAA;ACEJ;;ADAA;EACI,qBAAA;ACGJ;;ADAI;EACI,gBAAA;EACA,iBAAA;EACA,+BAAA;ACGR;;ADAI;EACI,mBAAA;ACGR;;ADDA;EACI,0BAAA;EACA,8BE7BM;EF8BN,0BAAA;EACA,8BAAA;EAEA,gBAAA;ACGJ;ADDI;EACI,6CEjCO;ADoCf;;ADDA;EACI,YAAA;ACIJ;;ADFA;EACI,cAAA;EACA,eAAA;ACKJ;;ADHA;EACI,cEnDG;EFoDH,mBE/CM;EFgDN,gBAAA;EACA,kBAAA;ACMJ;;ADJA;EACI,cAAA;EACA,oBAAA;EACA,8BAAA;EACA,YAAA;EACA,mBE3DQ;ADkEZ;ADLI;EACI,0BErDD;AD4DP;;ADLA;EACI,8CAAA;ACQJ;;ADNA;EACI,iBAAA;ACSJ;;ADPA;EAEI,aAAA;ACSJ;;ADPA;EACI,gFAAA;EACA,6BAAA;EACA,oCAAA;ACUJ;;ADRA;EACI;IACI,cAAA;ECWN;AACF","file":"base.css","sourcesContent":["@import '_vars'\n@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap')\n\nhtml\n    scroll-behavior: smooth\n\nbody\n    background-color: $background\n\nnav, main, footer\n    max-width: $main-width\n    margin: 0 auto\n\n*, *::before, *::after\n    box-sizing: border-box\n    border: none\n    color: $text\n    font-family: 'Inter', sans-serif\n\na\n    text-decoration: none\n\nh1, h2, h3\n    &, *\n        font-weight: 700\n        line-height: 3rem\n        font-family: 'Syne', sans-serif\n\nh3\n    &, *\n        line-height: 1.5rem\n\nmain a\n    text-decoration: underline\n    text-decoration-color: $primary\n    text-underline-offset: 2px\n    text-decoration-thickness: 5px\n\n    transition: 0.2s\n\n    &:hover\n        background: $primary-soft\n\nmain p\n    opacity: 0.9\n\nimg\n    display: block\n    max-width: 100%\n\nmark\n    color: $text\n    background: $primary\n    padding: 5px 7px\n    border-radius: 5px\n\nblockquote\n    margin-left: 0\n    padding: 0.6rem 1rem\n    border-left: 5px solid $accent\n    opacity: 0.8\n    background: $secondary\n\n    &.warning\n        border-left-color: $warn\n\ncode\n    font-family: 'Courier New', Courier, monospace\n\np, p *, main ul\n    line-height: 32px\n\n:focus:not(:focus-visible)\n\n    outline: none\n\n.special-gradient\n    background: linear-gradient(83deg, rgba(244,90,136,1) 7%, rgba(40,170,240,1) 100%)\n    -webkit-background-clip: text\n    -webkit-text-fill-color: transparent\n\n@media (max-width: 900px)\n    body\n        margin: 0 2rem\n","@import url(\"https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap\");\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {\n  background-color: #03060d;\n}\n\nnav, main, footer {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n  border: none;\n  color: #f3f3f3;\n  font-family: \"Inter\", sans-serif;\n}\n\na {\n  text-decoration: none;\n}\n\nh1, h1 *, h2, h2 *, h3, h3 * {\n  font-weight: 700;\n  line-height: 3rem;\n  font-family: \"Syne\", sans-serif;\n}\n\nh3, h3 * {\n  line-height: 1.5rem;\n}\n\nmain a {\n  text-decoration: underline;\n  text-decoration-color: #b53d61;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 5px;\n  transition: 0.2s;\n}\nmain a:hover {\n  background: rgba(247, 154, 182, 0.1411764706);\n}\n\nmain p {\n  opacity: 0.9;\n}\n\nimg {\n  display: block;\n  max-width: 100%;\n}\n\nmark {\n  color: #f3f3f3;\n  background: #b53d61;\n  padding: 5px 7px;\n  border-radius: 5px;\n}\n\nblockquote {\n  margin-left: 0;\n  padding: 0.6rem 1rem;\n  border-left: 5px solid #28aaf0;\n  opacity: 0.8;\n  background: #252a38;\n}\nblockquote.warning {\n  border-left-color: #f09928;\n}\n\ncode {\n  font-family: \"Courier New\", Courier, monospace;\n}\n\np, p *, main ul {\n  line-height: 32px;\n}\n\n:focus:not(:focus-visible) {\n  outline: none;\n}\n\n.special-gradient {\n  background: linear-gradient(83deg, rgb(244, 90, 136) 7%, rgb(40, 170, 240) 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n@media (max-width: 900px) {\n  body {\n    margin: 0 2rem;\n  }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$warn: #f09928\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]}
\ No newline at end of file
diff --git a/static/css/base.sass b/static/css/base.sass
index f06bbf4..647a60f 100644
--- a/static/css/base.sass
+++ b/static/css/base.sass
@@ -26,6 +26,10 @@ h1, h2, h3
         line-height: 3rem
         font-family: 'Syne', sans-serif
 
+h3
+    &, *
+        line-height: 1.5rem
+
 main a
     text-decoration: underline
     text-decoration-color: $primary
@@ -44,18 +48,32 @@ img
     display: block
     max-width: 100%
 
-p, p *, main ul
-    line-height: 32px
-
-:focus:not(:focus-visible)
-    outline: none
-
 mark
     color: $text
     background: $primary
     padding: 5px 7px
     border-radius: 5px
 
+blockquote
+    margin-left: 0
+    padding: 0.6rem 1rem
+    border-left: 5px solid $accent
+    opacity: 0.8
+    background: $secondary
+
+    &.warning
+        border-left-color: $warn
+
+code
+    font-family: 'Courier New', Courier, monospace
+
+p, p *, main ul
+    line-height: 32px
+
+:focus:not(:focus-visible)
+
+    outline: none
+
 .special-gradient
     background: linear-gradient(83deg, rgba(244,90,136,1) 7%, rgba(40,170,240,1) 100%)
     -webkit-background-clip: text
@@ -64,4 +82,3 @@ mark
 @media (max-width: 900px)
     body
         margin: 0 2rem
-
diff --git a/static/css/footer.css.map b/static/css/footer.css.map
index 1dc43d3..f4f55a3 100644
--- a/static/css/footer.css.map
+++ b/static/css/footer.css.map
@@ -1 +1 @@
-{"version":3,"sources":["footer.sass","_vars.sass","footer.css"],"names":[],"mappings":"AAEA;EACI,iBAAA;EACA,iBAAA;EACA,gBCQS;ACTb;AFGI;EACI,iBCMK;ACPb;AFGI;EACI,aAAA;EACA,sBAAA;EAEA,mBAAA;AEFR;AFIQ;EACI,oBAAA;EACA,qBAAA;AEFZ;AFIY;EACI,eAAA;EACA,gBAAA;AEFhB;AFIY;EACI,UAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;AEFhB;AFIY;EACI,uBAAA;EAAA,kBAAA;EACA,eAAA;EACA,YAAA;EACA,cAAA;EACA,qBAAA;EACA,mBAAA;AEFhB;AFIgB;EACI,YAAA;AEFpB;AFII;EACI,YAAA;AEFR;;AFIA;EAEQ;IACI,mBAAA;IACA,qCAAA;EEFV;EFIU;IACI,mBAAA;EEFd;AACF;AFGA;EAEQ;IACI,0BAAA;EEFV;AACF","file":"footer.css","sourcesContent":["@import '_vars'\n\nfooter\n    padding-top: 4rem\n    margin: 4rem auto\n    max-width: $main-width\n\n    &.wide\n        max-width: $more-width\n\n    div.rows\n        display: grid\n        grid-auto-flow: column\n        // justify-content: space-between\n        margin-bottom: 2rem\n\n        div.row\n            margin-right: 1.5rem\n            margin-bottom: 0.5rem\n\n            &:last-child\n                margin-right: 0\n                margin-bottom: 0\n\n            h2\n                opacity: 1\n                font-size: 1rem\n                font-weight: 500\n                margin: 1rem 0\n                line-height: normal\n\n            a\n                width: fit-content\n                font-size: 14px\n                opacity: 0.6\n                display: block\n                text-decoration: none\n                margin-bottom: 1rem\n\n                &:hover\n                    opacity: 0.8\n\n    p\n        opacity: 0.7\n\n@media (max-width: 1000px)\n    footer\n        div.rows\n            grid-auto-flow: row\n            grid-template-columns: repeat(2, 1fr)\n\n            div.row\n                margin-bottom: 1rem\n\n@media (max-width: 600px)\n    footer\n        div.rows\n            grid-template-columns: 1fr\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","footer {\n  padding-top: 4rem;\n  margin: 4rem auto;\n  max-width: 800px;\n}\nfooter.wide {\n  max-width: 1000px;\n}\nfooter div.rows {\n  display: grid;\n  grid-auto-flow: column;\n  margin-bottom: 2rem;\n}\nfooter div.rows div.row {\n  margin-right: 1.5rem;\n  margin-bottom: 0.5rem;\n}\nfooter div.rows div.row:last-child {\n  margin-right: 0;\n  margin-bottom: 0;\n}\nfooter div.rows div.row h2 {\n  opacity: 1;\n  font-size: 1rem;\n  font-weight: 500;\n  margin: 1rem 0;\n  line-height: normal;\n}\nfooter div.rows div.row a {\n  width: fit-content;\n  font-size: 14px;\n  opacity: 0.6;\n  display: block;\n  text-decoration: none;\n  margin-bottom: 1rem;\n}\nfooter div.rows div.row a:hover {\n  opacity: 0.8;\n}\nfooter p {\n  opacity: 0.7;\n}\n\n@media (max-width: 1000px) {\n  footer div.rows {\n    grid-auto-flow: row;\n    grid-template-columns: repeat(2, 1fr);\n  }\n  footer div.rows div.row {\n    margin-bottom: 1rem;\n  }\n}\n@media (max-width: 600px) {\n  footer div.rows {\n    grid-template-columns: 1fr;\n  }\n}"]}
\ No newline at end of file
+{"version":3,"sources":["footer.sass","_vars.sass","footer.css"],"names":[],"mappings":"AAEA;EACI,iBAAA;EACA,iBAAA;EACA,gBCUS;ACXb;AFGI;EACI,iBCQK;ACTb;AFGI;EACI,aAAA;EACA,sBAAA;EAEA,mBAAA;AEFR;AFIQ;EACI,oBAAA;EACA,qBAAA;AEFZ;AFIY;EACI,eAAA;EACA,gBAAA;AEFhB;AFIY;EACI,UAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;AEFhB;AFIY;EACI,uBAAA;EAAA,kBAAA;EACA,eAAA;EACA,YAAA;EACA,cAAA;EACA,qBAAA;EACA,mBAAA;AEFhB;AFIgB;EACI,YAAA;AEFpB;AFII;EACI,YAAA;AEFR;;AFIA;EAEQ;IACI,mBAAA;IACA,qCAAA;EEFV;EFIU;IACI,mBAAA;EEFd;AACF;AFGA;EAEQ;IACI,0BAAA;EEFV;AACF","file":"footer.css","sourcesContent":["@import '_vars'\n\nfooter\n    padding-top: 4rem\n    margin: 4rem auto\n    max-width: $main-width\n\n    &.wide\n        max-width: $more-width\n\n    div.rows\n        display: grid\n        grid-auto-flow: column\n        // justify-content: space-between\n        margin-bottom: 2rem\n\n        div.row\n            margin-right: 1.5rem\n            margin-bottom: 0.5rem\n\n            &:last-child\n                margin-right: 0\n                margin-bottom: 0\n\n            h2\n                opacity: 1\n                font-size: 1rem\n                font-weight: 500\n                margin: 1rem 0\n                line-height: normal\n\n            a\n                width: fit-content\n                font-size: 14px\n                opacity: 0.6\n                display: block\n                text-decoration: none\n                margin-bottom: 1rem\n\n                &:hover\n                    opacity: 0.8\n\n    p\n        opacity: 0.7\n\n@media (max-width: 1000px)\n    footer\n        div.rows\n            grid-auto-flow: row\n            grid-template-columns: repeat(2, 1fr)\n\n            div.row\n                margin-bottom: 1rem\n\n@media (max-width: 600px)\n    footer\n        div.rows\n            grid-template-columns: 1fr\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$warn: #f09928\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","footer {\n  padding-top: 4rem;\n  margin: 4rem auto;\n  max-width: 800px;\n}\nfooter.wide {\n  max-width: 1000px;\n}\nfooter div.rows {\n  display: grid;\n  grid-auto-flow: column;\n  margin-bottom: 2rem;\n}\nfooter div.rows div.row {\n  margin-right: 1.5rem;\n  margin-bottom: 0.5rem;\n}\nfooter div.rows div.row:last-child {\n  margin-right: 0;\n  margin-bottom: 0;\n}\nfooter div.rows div.row h2 {\n  opacity: 1;\n  font-size: 1rem;\n  font-weight: 500;\n  margin: 1rem 0;\n  line-height: normal;\n}\nfooter div.rows div.row a {\n  width: fit-content;\n  font-size: 14px;\n  opacity: 0.6;\n  display: block;\n  text-decoration: none;\n  margin-bottom: 1rem;\n}\nfooter div.rows div.row a:hover {\n  opacity: 0.8;\n}\nfooter p {\n  opacity: 0.7;\n}\n\n@media (max-width: 1000px) {\n  footer div.rows {\n    grid-auto-flow: row;\n    grid-template-columns: repeat(2, 1fr);\n  }\n  footer div.rows div.row {\n    margin-bottom: 1rem;\n  }\n}\n@media (max-width: 600px) {\n  footer div.rows {\n    grid-template-columns: 1fr;\n  }\n}"]}
\ No newline at end of file
diff --git a/static/css/home.css.map b/static/css/home.css.map
index f7db555..ef97966 100644
--- a/static/css/home.css.map
+++ b/static/css/home.css.map
@@ -1 +1 @@
-{"version":3,"sources":["home.sass","_vars.sass","home.css"],"names":[],"mappings":"AAEA;EACI,gBCUS;EDTT,cAAA;EACA,eAAA;AEDJ;AFGI;EACI,iBAAA;AEDR;;AFGA;EACI;IACI,eAAA;EEAN;EFEM;IACI,iBAAA;EEAV;AACF","file":"home.css","sourcesContent":["@import '_vars'\n\nheader\n    max-width: $main-width\n    margin: 0 auto\n    font-size: 40px\n\n    h1\n        line-height: 4rem\n\n@media (max-width: 800px)\n    header\n        font-size: 26px\n        \n        h1\n            line-height: 3rem\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","header {\n  max-width: 800px;\n  margin: 0 auto;\n  font-size: 40px;\n}\nheader h1 {\n  line-height: 4rem;\n}\n\n@media (max-width: 800px) {\n  header {\n    font-size: 26px;\n  }\n  header h1 {\n    line-height: 3rem;\n  }\n}"]}
\ No newline at end of file
+{"version":3,"sources":["home.sass","_vars.sass","home.css"],"names":[],"mappings":"AAEA;EACI,gBCYS;EDXT,cAAA;EACA,eAAA;AEDJ;AFGI;EACI,iBAAA;AEDR;;AFGA;EACI;IACI,eAAA;EEAN;EFEM;IACI,iBAAA;EEAV;AACF","file":"home.css","sourcesContent":["@import '_vars'\n\nheader\n    max-width: $main-width\n    margin: 0 auto\n    font-size: 40px\n\n    h1\n        line-height: 4rem\n\n@media (max-width: 800px)\n    header\n        font-size: 26px\n        \n        h1\n            line-height: 3rem\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$warn: #f09928\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","header {\n  max-width: 800px;\n  margin: 0 auto;\n  font-size: 40px;\n}\nheader h1 {\n  line-height: 4rem;\n}\n\n@media (max-width: 800px) {\n  header {\n    font-size: 26px;\n  }\n  header h1 {\n    line-height: 3rem;\n  }\n}"]}
\ No newline at end of file
diff --git a/static/css/input.css.map b/static/css/input.css.map
index 9e4b775..a00a69d 100644
--- a/static/css/input.css.map
+++ b/static/css/input.css.map
@@ -1 +1 @@
-{"version":3,"sources":["input.sass","_vars.sass","input.css"],"names":[],"mappings":"AAEA;EACI,cAAA;EACA,eAAA;EACA,eAAA;EACA,kBCKG;EDJH,sBAAA;EACA,gBAAA;EAEA,cCVG;EDWH,mBCNM;EDQN,2BAAA;AEHJ;AFKI;EACI,uBAAA;AEHR;AFKI;EACI,qDAAA;AEHR;AFKQ;EACI,4BAAA;AEHZ;AFKI;EACI,cCzBD;ED0BC,mBCxBI;EDyBJ,gDAAA;AEHR;AFKI;EACI,YAAA;EACA,qBAAA;EACA,sBAAA;EACA,mBAAA;AEHR;;AFKA;EACI,WAAA;EACA,eAAA;EACA,kBC3BG;ED4BH,oBAAA;EAEA,cCzCG;ED0CH,mBCxCQ;EDyCR,yBAAA;AEHJ;AFKI;EACI,aAAA;AEHR;;AFKA;EACI,yBAAA;AEFJ","file":"input.css","sourcesContent":["@import '_vars'\n\nbutton\n    line-height: 2\n    cursor: pointer\n    font-size: 16px\n    border-radius: $edge\n    padding: 0.7rem 1.5rem\n    font-weight: 600\n\n    color: $text\n    background: $primary\n\n    transition: box-shadow 0.2s\n\n    &:hover\n        filter: brightness(1.2)\n\n    &.special\n        box-shadow: 0 0 20px $primary-glow\n\n        &:hover\n            box-shadow: 0 0 20px $primary\n\n    &.secondary\n        color: $text\n        background: $secondary\n        border: 1px solid $border\n\n    svg, img\n        height: 24px\n        display: inline-block\n        vertical-align: middle\n        filter: invert(180)\n\ninput:not([type=\"checkbox\"]):not([type=\"radio\"])\n    width: 100%\n    font-size: 18px\n    border-radius: $edge\n    padding: 0.5rem 1rem\n\n    color: $text\n    background: $secondary\n    border: 1px solid $primary\n\n    &:focus\n        outline: none\n\ninput[type=\"radio\"]\n    filter: hue-rotate(50deg)\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","button {\n  line-height: 2;\n  cursor: pointer;\n  font-size: 16px;\n  border-radius: 5px;\n  padding: 0.7rem 1.5rem;\n  font-weight: 600;\n  color: #f3f3f3;\n  background: #b53d61;\n  transition: box-shadow 0.2s;\n}\nbutton:hover {\n  filter: brightness(1.2);\n}\nbutton.special {\n  box-shadow: 0 0 20px rgba(244, 90, 136, 0.3803921569);\n}\nbutton.special:hover {\n  box-shadow: 0 0 20px #b53d61;\n}\nbutton.secondary {\n  color: #f3f3f3;\n  background: #252a38;\n  border: 1px solid rgba(22, 29, 43, 0.6901960784);\n}\nbutton svg, button img {\n  height: 24px;\n  display: inline-block;\n  vertical-align: middle;\n  filter: invert(180);\n}\n\ninput:not([type=checkbox]):not([type=radio]) {\n  width: 100%;\n  font-size: 18px;\n  border-radius: 5px;\n  padding: 0.5rem 1rem;\n  color: #f3f3f3;\n  background: #252a38;\n  border: 1px solid #b53d61;\n}\ninput:not([type=checkbox]):not([type=radio]):focus {\n  outline: none;\n}\n\ninput[type=radio] {\n  filter: hue-rotate(50deg);\n}"]}
\ No newline at end of file
+{"version":3,"sources":["input.sass","_vars.sass","input.css"],"names":[],"mappings":"AAEA;EACI,cAAA;EACA,eAAA;EACA,eAAA;EACA,kBCOG;EDNH,sBAAA;EACA,gBAAA;EAEA,cCVG;EDWH,mBCNM;EDQN,2BAAA;AEHJ;AFKI;EACI,uBAAA;AEHR;AFKI;EACI,qDAAA;AEHR;AFKQ;EACI,4BAAA;AEHZ;AFKI;EACI,cCzBD;ED0BC,mBCxBI;EDyBJ,gDAAA;AEHR;AFKI;EACI,YAAA;EACA,qBAAA;EACA,sBAAA;EACA,mBAAA;AEHR;;AFKA;EACI,WAAA;EACA,eAAA;EACA,kBCzBG;ED0BH,oBAAA;EAEA,cCzCG;ED0CH,mBCxCQ;EDyCR,yBAAA;AEHJ;AFKI;EACI,aAAA;AEHR;;AFKA;EACI,yBAAA;AEFJ","file":"input.css","sourcesContent":["@import '_vars'\n\nbutton\n    line-height: 2\n    cursor: pointer\n    font-size: 16px\n    border-radius: $edge\n    padding: 0.7rem 1.5rem\n    font-weight: 600\n\n    color: $text\n    background: $primary\n\n    transition: box-shadow 0.2s\n\n    &:hover\n        filter: brightness(1.2)\n\n    &.special\n        box-shadow: 0 0 20px $primary-glow\n\n        &:hover\n            box-shadow: 0 0 20px $primary\n\n    &.secondary\n        color: $text\n        background: $secondary\n        border: 1px solid $border\n\n    svg, img\n        height: 24px\n        display: inline-block\n        vertical-align: middle\n        filter: invert(180)\n\ninput:not([type=\"checkbox\"]):not([type=\"radio\"])\n    width: 100%\n    font-size: 18px\n    border-radius: $edge\n    padding: 0.5rem 1rem\n\n    color: $text\n    background: $secondary\n    border: 1px solid $primary\n\n    &:focus\n        outline: none\n\ninput[type=\"radio\"]\n    filter: hue-rotate(50deg)\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$warn: #f09928\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","button {\n  line-height: 2;\n  cursor: pointer;\n  font-size: 16px;\n  border-radius: 5px;\n  padding: 0.7rem 1.5rem;\n  font-weight: 600;\n  color: #f3f3f3;\n  background: #b53d61;\n  transition: box-shadow 0.2s;\n}\nbutton:hover {\n  filter: brightness(1.2);\n}\nbutton.special {\n  box-shadow: 0 0 20px rgba(244, 90, 136, 0.3803921569);\n}\nbutton.special:hover {\n  box-shadow: 0 0 20px #b53d61;\n}\nbutton.secondary {\n  color: #f3f3f3;\n  background: #252a38;\n  border: 1px solid rgba(22, 29, 43, 0.6901960784);\n}\nbutton svg, button img {\n  height: 24px;\n  display: inline-block;\n  vertical-align: middle;\n  filter: invert(180);\n}\n\ninput:not([type=checkbox]):not([type=radio]) {\n  width: 100%;\n  font-size: 18px;\n  border-radius: 5px;\n  padding: 0.5rem 1rem;\n  color: #f3f3f3;\n  background: #252a38;\n  border: 1px solid #b53d61;\n}\ninput:not([type=checkbox]):not([type=radio]):focus {\n  outline: none;\n}\n\ninput[type=radio] {\n  filter: hue-rotate(50deg);\n}"]}
\ No newline at end of file
diff --git a/static/css/navbar.css.map b/static/css/navbar.css.map
index 5714f8d..32a7fa8 100644
--- a/static/css/navbar.css.map
+++ b/static/css/navbar.css.map
@@ -1 +1 @@
-{"version":3,"sources":["navbar.sass","navbar.css","_vars.sass"],"names":[],"mappings":"AAEA;EACI,aAAA;EACA,mBAAA;EACA,kBAAA;ACDJ;ADGI;EACI,qBAAA;EACA,eEHQ;EFIR,gBAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EAEA,iBAAA;EACA,uBAAA;ACFR;ADII;EACI,gBAAA;EACA,eAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACFR;ADIQ;EACI,eAAA;EACA,kBAAA;EACA,SAAA;ACFZ;ADKI;EACI,YAAA;ACHR;ADMI;EACI,aAAA;EACA,eAAA;ACJR;;ADOI;EACI,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,qBAAA;EACA,sBAAA;ACJR;ADMQ;EACI,cExCI;ADoChB;;ADMA;EACI;IACI,sCAAA;IACA,UAAA;IAEA,YAAA;IACA,YAAA;IACA,kBAAA;IACA,SAAA;IACA,WAAA;IACA,mBExDI;IFyDJ,eAAA;IACA,kBEjDD;IFkDC,kCAAA;YAAA,0BAAA;IACA,gDAAA;IAEA,wCAAA;ECLN;EDOM;IACI,UAAA;IACA,kBAAA;ECLV;EDOM;IACI,eAAA;IACA,cAAA;IACA,iBAAA;ECLV;EDQM;IACI,eEvEI;EDiEd;EDQM;IACI,cAAA;IACA,gBAAA;IACA,eAAA;IACA,YAAA;IACA,WAAA;IACA,eAAA;IACA,gBAAA;ECNV;EDQU;IACI,wBAAA;ECNd;AACF;ADOA;EAEQ;IACI,aAAA;ECNV;AACF","file":"navbar.css","sourcesContent":["@import '_vars'\n\nnav\n    display: flex\n    align-items: center\n    position: relative\n\n    >.logo\n        display: inline-block\n        stroke: $primary-light\n        min-height: 40px\n        min-width: 40px\n        height: 40px\n        width: 40px\n\n        margin-right: 8px\n        transition: stroke 0.2s\n\n    >h1\n        font-weight: 500\n        font-size: 20px\n        user-select: none\n\n        mark\n            font-size: 1rem\n            position: relative\n            top: -3px\n\n\n    >span\n        flex-grow: 1\n\n\n    #menu\n        display: none\n        cursor: pointer\n\n.link-menu\n    >a\n        font-size: 14px\n        font-weight: 600\n        margin-left: 2rem\n        text-decoration: none\n        transition: color 0.1s\n\n        &:hover\n            color: $primary-light\n\n@media (max-width: 800px)\n    .link-menu\n        transform: scale(0.8) translateX(1rem)\n        opacity: 0\n\n        z-index: 100\n        width: 200px\n        position: absolute\n        top: 5rem\n        right: 2rem\n        background: $secondary\n        padding: 1rem 0\n        border-radius: $edge\n        backdrop-filter: blur(4px)\n        border: 1px solid $border\n\n        transition: transform 0.2s, opacity 0.2s\n\n        &.open\n            opacity: 1\n            transform: inherit\n\n        a\n            font-size: 20px\n            display: block\n            line-height: 3rem\n\n    nav\n        .logo\n            stroke: $primary-light\n\n        #menu\n            display: block\n            min-height: 32px\n            min-width: 32px\n            height: 32px\n            width: 32px\n            cursor: pointer\n            transition: 0.5s\n\n            &.active\n                transform: rotate(90deg)\n\n@media (max-width: 400px)\n    nav\n        h1\n            display: none","nav {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\nnav > .logo {\n  display: inline-block;\n  stroke: #f45a88;\n  min-height: 40px;\n  min-width: 40px;\n  height: 40px;\n  width: 40px;\n  margin-right: 8px;\n  transition: stroke 0.2s;\n}\nnav > h1 {\n  font-weight: 500;\n  font-size: 20px;\n  user-select: none;\n}\nnav > h1 mark {\n  font-size: 1rem;\n  position: relative;\n  top: -3px;\n}\nnav > span {\n  flex-grow: 1;\n}\nnav #menu {\n  display: none;\n  cursor: pointer;\n}\n\n.link-menu > a {\n  font-size: 14px;\n  font-weight: 600;\n  margin-left: 2rem;\n  text-decoration: none;\n  transition: color 0.1s;\n}\n.link-menu > a:hover {\n  color: #f45a88;\n}\n\n@media (max-width: 800px) {\n  .link-menu {\n    transform: scale(0.8) translateX(1rem);\n    opacity: 0;\n    z-index: 100;\n    width: 200px;\n    position: absolute;\n    top: 5rem;\n    right: 2rem;\n    background: #252a38;\n    padding: 1rem 0;\n    border-radius: 5px;\n    backdrop-filter: blur(4px);\n    border: 1px solid rgba(22, 29, 43, 0.6901960784);\n    transition: transform 0.2s, opacity 0.2s;\n  }\n  .link-menu.open {\n    opacity: 1;\n    transform: inherit;\n  }\n  .link-menu a {\n    font-size: 20px;\n    display: block;\n    line-height: 3rem;\n  }\n  nav .logo {\n    stroke: #f45a88;\n  }\n  nav #menu {\n    display: block;\n    min-height: 32px;\n    min-width: 32px;\n    height: 32px;\n    width: 32px;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  nav #menu.active {\n    transform: rotate(90deg);\n  }\n}\n@media (max-width: 400px) {\n  nav h1 {\n    display: none;\n  }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]}
\ No newline at end of file
+{"version":3,"sources":["navbar.sass","navbar.css","_vars.sass"],"names":[],"mappings":"AAEA;EACI,aAAA;EACA,mBAAA;EACA,kBAAA;ACDJ;ADGI;EACI,qBAAA;EACA,eEHQ;EFIR,gBAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EAEA,iBAAA;EACA,uBAAA;ACFR;ADII;EACI,gBAAA;EACA,eAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACFR;ADIQ;EACI,eAAA;EACA,kBAAA;EACA,SAAA;ACFZ;ADKI;EACI,YAAA;ACHR;ADMI;EACI,aAAA;EACA,eAAA;ACJR;;ADOI;EACI,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,qBAAA;EACA,sBAAA;ACJR;ADMQ;EACI,cExCI;ADoChB;;ADMA;EACI;IACI,sCAAA;IACA,UAAA;IAEA,YAAA;IACA,YAAA;IACA,kBAAA;IACA,SAAA;IACA,WAAA;IACA,mBExDI;IFyDJ,eAAA;IACA,kBE/CD;IFgDC,kCAAA;YAAA,0BAAA;IACA,gDAAA;IAEA,wCAAA;ECLN;EDOM;IACI,UAAA;IACA,kBAAA;ECLV;EDOM;IACI,eAAA;IACA,cAAA;IACA,iBAAA;ECLV;EDQM;IACI,eEvEI;EDiEd;EDQM;IACI,cAAA;IACA,gBAAA;IACA,eAAA;IACA,YAAA;IACA,WAAA;IACA,eAAA;IACA,gBAAA;ECNV;EDQU;IACI,wBAAA;ECNd;AACF;ADOA;EAEQ;IACI,aAAA;ECNV;AACF","file":"navbar.css","sourcesContent":["@import '_vars'\n\nnav\n    display: flex\n    align-items: center\n    position: relative\n\n    >.logo\n        display: inline-block\n        stroke: $primary-light\n        min-height: 40px\n        min-width: 40px\n        height: 40px\n        width: 40px\n\n        margin-right: 8px\n        transition: stroke 0.2s\n\n    >h1\n        font-weight: 500\n        font-size: 20px\n        user-select: none\n\n        mark\n            font-size: 1rem\n            position: relative\n            top: -3px\n\n\n    >span\n        flex-grow: 1\n\n\n    #menu\n        display: none\n        cursor: pointer\n\n.link-menu\n    >a\n        font-size: 14px\n        font-weight: 600\n        margin-left: 2rem\n        text-decoration: none\n        transition: color 0.1s\n\n        &:hover\n            color: $primary-light\n\n@media (max-width: 800px)\n    .link-menu\n        transform: scale(0.8) translateX(1rem)\n        opacity: 0\n\n        z-index: 100\n        width: 200px\n        position: absolute\n        top: 5rem\n        right: 2rem\n        background: $secondary\n        padding: 1rem 0\n        border-radius: $edge\n        backdrop-filter: blur(4px)\n        border: 1px solid $border\n\n        transition: transform 0.2s, opacity 0.2s\n\n        &.open\n            opacity: 1\n            transform: inherit\n\n        a\n            font-size: 20px\n            display: block\n            line-height: 3rem\n\n    nav\n        .logo\n            stroke: $primary-light\n\n        #menu\n            display: block\n            min-height: 32px\n            min-width: 32px\n            height: 32px\n            width: 32px\n            cursor: pointer\n            transition: 0.5s\n\n            &.active\n                transform: rotate(90deg)\n\n@media (max-width: 400px)\n    nav\n        h1\n            display: none","nav {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\nnav > .logo {\n  display: inline-block;\n  stroke: #f45a88;\n  min-height: 40px;\n  min-width: 40px;\n  height: 40px;\n  width: 40px;\n  margin-right: 8px;\n  transition: stroke 0.2s;\n}\nnav > h1 {\n  font-weight: 500;\n  font-size: 20px;\n  user-select: none;\n}\nnav > h1 mark {\n  font-size: 1rem;\n  position: relative;\n  top: -3px;\n}\nnav > span {\n  flex-grow: 1;\n}\nnav #menu {\n  display: none;\n  cursor: pointer;\n}\n\n.link-menu > a {\n  font-size: 14px;\n  font-weight: 600;\n  margin-left: 2rem;\n  text-decoration: none;\n  transition: color 0.1s;\n}\n.link-menu > a:hover {\n  color: #f45a88;\n}\n\n@media (max-width: 800px) {\n  .link-menu {\n    transform: scale(0.8) translateX(1rem);\n    opacity: 0;\n    z-index: 100;\n    width: 200px;\n    position: absolute;\n    top: 5rem;\n    right: 2rem;\n    background: #252a38;\n    padding: 1rem 0;\n    border-radius: 5px;\n    backdrop-filter: blur(4px);\n    border: 1px solid rgba(22, 29, 43, 0.6901960784);\n    transition: transform 0.2s, opacity 0.2s;\n  }\n  .link-menu.open {\n    opacity: 1;\n    transform: inherit;\n  }\n  .link-menu a {\n    font-size: 20px;\n    display: block;\n    line-height: 3rem;\n  }\n  nav .logo {\n    stroke: #f45a88;\n  }\n  nav #menu {\n    display: block;\n    min-height: 32px;\n    min-width: 32px;\n    height: 32px;\n    width: 32px;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  nav #menu.active {\n    transform: rotate(90deg);\n  }\n}\n@media (max-width: 400px) {\n  nav h1 {\n    display: none;\n  }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #252a38\n$border: #161d2bb0\n\n$primary: #b53d61\n$primary-light: #f45a88\n$primary-glow: #f45a8861\n$primary-soft: #f79ab624\n$accent: #28aaf0\n\n$warn: #f09928\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]}
\ No newline at end of file
diff --git a/static/ext/css/prism.css b/static/ext/css/prism.css
new file mode 100644
index 0000000..1798656
--- /dev/null
+++ b/static/ext/css/prism.css
@@ -0,0 +1,119 @@
+code[class*=language-], pre[class*=language-] * {
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+}
+
+code[class*=language-], pre[class*=language-] {
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    color: #f8f8f2;
+    background: 0 0;
+    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+    font-size: 1em;
+    text-align: left;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    white-space: pre;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    hyphens: none;
+  }
+  
+  pre[class*=language-] {
+    width: 100%;
+    padding: 1rem;
+    margin: 0 0;
+    overflow: auto;
+    border-radius: 4px;
+    border-top-left-radius: 0;
+  }
+  
+  :not(pre) > code[class*=language-],
+  pre[class*=language-] {
+    background: #252a38b1;
+    margin-bottom: 2rem;
+  }
+  
+  :not(pre) > code[class*=language-] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+  }
+  
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #8292a2;
+  }
+  
+  .token.punctuation {
+    color: #f8f8f2;
+  }
+  
+  .token.namespace {
+    opacity: 0.7;
+  }
+  
+  .token.constant,
+  .token.deleted,
+  .token.property,
+  .token.symbol,
+  .token.tag {
+    color: #f92672;
+  }
+  
+  .token.boolean,
+  .token.number {
+    color: #81ffcb;
+  }
+  
+  .token.attr-name,
+  .token.builtin,
+  .token.char,
+  .token.inserted,
+  .token.selector,
+  .token.string {
+    color: #74bbfa;
+  }
+  
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.operator,
+  .token.url,
+  .token.variable {
+    color: #f8f8f2;
+  }
+  
+  .token.atrule,
+  .token.attr-value,
+  .token.class-name,
+  .token.function {
+    color: #e6db74;
+  }
+  
+  .token.keyword {
+    color: #ef66a8;
+  }
+  
+  .token.important,
+  .token.regex {
+    color: #fd971f;
+  }
+  
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+  
+  .token.italic {
+    /* font-style: normal !important */
+  }
+  
+  .token.entity {
+    cursor: help;
+  }
+  
\ No newline at end of file
diff --git a/static/img/banner.png b/static/img/banner.png
new file mode 100644
index 0000000..a509bd1
Binary files /dev/null and b/static/img/banner.png differ
diff --git a/templates/index.html b/templates/index.html
index 09c5d70..270ea06 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,6 +3,7 @@
 
 <header>
     <h1>Free Generative AI for <span class="special-gradient">Everyone</span></h1>
+    <h3>Make AI Open Again</h3>
     <a href="/panel">
         <button class="special">
             <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb24tdGFibGVyLWFycm93LXJpZ2h0IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiPjwvcGF0aD48cGF0aCBkPSJNNSAxMmwxNCAwIj48L3BhdGg+PHBhdGggZD0iTTEzIDE4bDYgLTYiPjwvcGF0aD48cGF0aCBkPSJNMTMgNmw2IDYiPjwvcGF0aD48L3N2Zz4=">
@@ -17,5 +18,6 @@
     </a>
 </header>
 <main>
+
 </main>
 {% include 'parts/end.html' %}
diff --git a/templates/panel.html b/templates/panel.html
index 3acaadd..34a82ce 100644
--- a/templates/panel.html
+++ b/templates/panel.html
@@ -2,11 +2,64 @@
 <link rel="stylesheet" href="/static/css/home.css">
 
 <main>
-    <h1>Panel</h1>
+    <h1>API Panel</h1>
     <h2>
         <mark>Warning</mark>
         this is a <u>very early prototype</u> of NovaAI. Do not use it in production.
         You have been warned.
     </h2>
+
+    <h2>Python</h2>
+    <h3>Endpoint</h3>
+    <p>
+        To use <i>NovaAI</i> in your code, simply set the endpoint of <i>NovaAI</i>.
+        It's compitable with <i><s>Closed</s>AI</i>'s library.
+    </p>
+    
+    <pre><code class="language-python">import openai as novaai
+        
+novaai.api_base = 'https://api.nova-oss.com/v1'</code></pre>
+
+    <blockquote>
+        <b>Info:</b>
+        The reason we're using <code class="language-python">as novaai</code> is that we might add our own package soon.
+        That way, you'll only have to delete two words and install our package to migrate. Stay tuned!
+    </blockquote>
+
+<h3>API Key</h3>
+    <p>
+        The API key is something like a password. So keep it safe. Don't share it with anyone!
+    </p>
+
+    <pre><code class="language-python">novaai.api_key = 'nv-...'</code></pre>
+
+    <h2>curl</h2>
+
+    <pre><code class="language-bash">curl https://api.nova-oss.com/v1/chat/completions \
+        -H "Content-Type: application/json" \
+        -H "Authorization: Bearer nv-..." \
+        -d '{
+          "model": "gpt-3.5-turbo",
+          "messages": [{"role": "user", "content": "Whats a wormhole?"}]
+        }'</code></pre>
+
+    <h2>Unofficial front-ends (Better ChatGPT, ...)</h2>
+    <p>
+        Keep in mind not to violate <s>Closed</s>AI's terms of service, or it'll break their hearts :(
+        (and maybe write you a C&D).
+        <br><br>
+        Anyways, set the API endpoint to <code>https://api.nova-oss.com/v1</code> and don't forget to add your NovaAI API key, too.
+
+        <blockquote class="warning">
+            <b>Warning:</b>
+            Only use front-ends you trust. Malicious websites could steal your API key!
+        </blockquote>
+    </p>
+
+
+    <h2>Documentation</h2>
+    <p><a href="https://platform.openai.com/docs/api-reference" target="_blank">Official <s>Closed</s>AI documentation</a></p>
+
 </main>
+
 {% include 'parts/end.html' %}