diff --git a/assets/built/screen.css b/assets/built/screen.css
index a07911c..a1ef91a 100644
--- a/assets/built/screen.css
+++ b/assets/built/screen.css
@@ -2135,6 +2135,7 @@ video {
 
 .prose-dark code {
   background-color: #1f2937;
+  color: #e5e7eb;
 }
 
 .prose-dark hr {
@@ -3526,6 +3527,7 @@ video {
 
   .dark\:prose-dark code {
     background-color: #1f2937;
+    color: #e5e7eb;
   }
 
   .dark\:prose-dark hr {
@@ -9161,6 +9163,90 @@ video {
   display: none;
 }
 
+.group:hover .group-hover\:block {
+  display: block;
+}
+
+.group:hover .group-hover\:inline-block {
+  display: inline-block;
+}
+
+.group:hover .group-hover\:inline {
+  display: inline;
+}
+
+.group:hover .group-hover\:flex {
+  display: flex;
+}
+
+.group:hover .group-hover\:inline-flex {
+  display: inline-flex;
+}
+
+.group:hover .group-hover\:table {
+  display: table;
+}
+
+.group:hover .group-hover\:inline-table {
+  display: inline-table;
+}
+
+.group:hover .group-hover\:table-caption {
+  display: table-caption;
+}
+
+.group:hover .group-hover\:table-cell {
+  display: table-cell;
+}
+
+.group:hover .group-hover\:table-column {
+  display: table-column;
+}
+
+.group:hover .group-hover\:table-column-group {
+  display: table-column-group;
+}
+
+.group:hover .group-hover\:table-footer-group {
+  display: table-footer-group;
+}
+
+.group:hover .group-hover\:table-header-group {
+  display: table-header-group;
+}
+
+.group:hover .group-hover\:table-row-group {
+  display: table-row-group;
+}
+
+.group:hover .group-hover\:table-row {
+  display: table-row;
+}
+
+.group:hover .group-hover\:flow-root {
+  display: flow-root;
+}
+
+.group:hover .group-hover\:grid {
+  display: grid;
+}
+
+.group:hover .group-hover\:inline-grid {
+  display: inline-grid;
+}
+
+.group:hover .group-hover\:contents {
+  display: contents;
+}
+
+.group:hover .group-hover\:list-item {
+  display: list-item;
+}
+
+.group:hover .group-hover\:hidden {
+  display: none;
+}
+
 .h-0 {
   height: 0px;
 }
@@ -48529,7 +48615,28 @@ button.swiper-pagination-bullet {
 /* Main
 /* ---------------------------------------------------------- */
 
-[x-cloak] { display: none !important;
+[x-cloak] {
+  display: none !important;
+}
+
+a.no-underline{
+  text-decoration: none !important;
+}
+
+a.no-underline:hover{
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  pre {
+    --tw-bg-opacity: 1;
+    background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
+  }
+}
+
+pre {
+  --tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .text-gradient {
@@ -48570,16 +48677,17 @@ button.swiper-pagination-bullet {
   height: auto !important;
 }
 
-.perspective-700{
+.perspective-700 {
   perspective: 750px;
 }
 
 .perspective-transform {
-  transform: rotateX(30deg) rotateY(0deg); transform-style: preserve-3d;
+  transform: rotateX(30deg) rotateY(0deg);
+  transform-style: preserve-3d;
   transition: 1s ease all;
 }
 
-.perspective-transform:hover{
+.perspective-transform:hover {
   transform: rotateX(15deg) rotateY(0deg);
 }
 
@@ -48587,57 +48695,88 @@ button.swiper-pagination-bullet {
   text-decoration: none !important;
 }
 
-/*
-.post-body h2 {
-  @apply text-4xl my-4 px-4 sm:px-2 md:px-0;
-}
-
-.post-body h3 {
-  @apply text-2xl my-4 px-4 sm:px-2 md:px-0;
-}
-
-.post-body p{
-  @apply my-3 mx-auto text-lg max-w-prose mx-auto px-4 sm:px-2 md:px-0;
-}
-
-.post-body blockquote {
-  @apply my-4 pl-2 text-lg border-l-2 mx-auto max-w-prose border-l-4 border-blue-600 pl-5;
-}
-
-.post-body figure {
-  @apply my-10;
-}
-
-.post-body hr{
-  @apply my-10;
-}
-
-.post-body ul{
-  @apply text-lg my-4 list-inside list-disc my-3 mx-auto text-lg max-w-prose mx-auto px-4 sm:px-2 md:px-0;
-}
-
-.post-body li{
-  @apply text-lg;
-}
-
-.post-body a {
-  @apply text-blue-500 font-normal;
-}
-
-.post-body a:hover {
-  @apply font-bold;
-}
-
-.post-body pre {
-  @apply p-4 px-8 my-10 rounded-xl bg-gray-200 dark:bg-gray-700 shadow-xl;
-}*/
-
-figcaption{
+figcaption {
   text-align: center;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 
+.prose > h1::before,
+.prose > h2::before,
+.prose > h3::before,
+.prose > h4::before,
+.prose > h5::before,
+.prose > h6::before {
+  display: block;
+  content: " ";
+  height: 80px;
+  margin-top: -80px;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.is-active-link {
+  --tw-bg-opacity: 1;
+  background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
+}
+
+@media (prefers-color-scheme: dark) {
+  .is-active-link {
+    --tw-bg-opacity: 1;
+    background-color: rgba(30, 58, 138, var(--tw-bg-opacity));
+  }
+}
+
+.is-active-link {
+  --tw-text-opacity: 1;
+  color: rgba(17, 24, 39, var(--tw-text-opacity));
+}
+
+@media (prefers-color-scheme: dark) {
+  .is-active-link {
+    --tw-text-opacity: 1;
+    color: rgba(243, 244, 246, var(--tw-text-opacity));
+  }
+}
+
+.is-active-link {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.toc-list-item a {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgba(75, 85, 99, var(--tw-text-opacity));
+}
+
+@media (prefers-color-scheme: dark) {
+  .toc-list-item a {
+    --tw-text-opacity: 1;
+    color: rgba(156, 163, 175, var(--tw-text-opacity));
+  }
+}
+
+.toc-list-item a {
+  transition-property: background-color, border-color, color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+@media (prefers-color-scheme: dark) {
+  .toc-list-item a:hover {
+    --tw-text-opacity: 1;
+    color: rgba(59, 130, 246, var(--tw-text-opacity));
+  }
+}
+
+.toc-list-item {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 @media (min-width: 640px) {
   .sm\:container {
     width: 100%;
@@ -54463,6 +54602,90 @@ figcaption{
     display: none;
   }
 
+  .group:hover .sm\:group-hover\:block {
+    display: block;
+  }
+
+  .group:hover .sm\:group-hover\:inline-block {
+    display: inline-block;
+  }
+
+  .group:hover .sm\:group-hover\:inline {
+    display: inline;
+  }
+
+  .group:hover .sm\:group-hover\:flex {
+    display: flex;
+  }
+
+  .group:hover .sm\:group-hover\:inline-flex {
+    display: inline-flex;
+  }
+
+  .group:hover .sm\:group-hover\:table {
+    display: table;
+  }
+
+  .group:hover .sm\:group-hover\:inline-table {
+    display: inline-table;
+  }
+
+  .group:hover .sm\:group-hover\:table-caption {
+    display: table-caption;
+  }
+
+  .group:hover .sm\:group-hover\:table-cell {
+    display: table-cell;
+  }
+
+  .group:hover .sm\:group-hover\:table-column {
+    display: table-column;
+  }
+
+  .group:hover .sm\:group-hover\:table-column-group {
+    display: table-column-group;
+  }
+
+  .group:hover .sm\:group-hover\:table-footer-group {
+    display: table-footer-group;
+  }
+
+  .group:hover .sm\:group-hover\:table-header-group {
+    display: table-header-group;
+  }
+
+  .group:hover .sm\:group-hover\:table-row-group {
+    display: table-row-group;
+  }
+
+  .group:hover .sm\:group-hover\:table-row {
+    display: table-row;
+  }
+
+  .group:hover .sm\:group-hover\:flow-root {
+    display: flow-root;
+  }
+
+  .group:hover .sm\:group-hover\:grid {
+    display: grid;
+  }
+
+  .group:hover .sm\:group-hover\:inline-grid {
+    display: inline-grid;
+  }
+
+  .group:hover .sm\:group-hover\:contents {
+    display: contents;
+  }
+
+  .group:hover .sm\:group-hover\:list-item {
+    display: list-item;
+  }
+
+  .group:hover .sm\:group-hover\:hidden {
+    display: none;
+  }
+
   .sm\:h-0 {
     height: 0px;
   }
@@ -98891,6 +99114,90 @@ figcaption{
     display: none;
   }
 
+  .group:hover .md\:group-hover\:block {
+    display: block;
+  }
+
+  .group:hover .md\:group-hover\:inline-block {
+    display: inline-block;
+  }
+
+  .group:hover .md\:group-hover\:inline {
+    display: inline;
+  }
+
+  .group:hover .md\:group-hover\:flex {
+    display: flex;
+  }
+
+  .group:hover .md\:group-hover\:inline-flex {
+    display: inline-flex;
+  }
+
+  .group:hover .md\:group-hover\:table {
+    display: table;
+  }
+
+  .group:hover .md\:group-hover\:inline-table {
+    display: inline-table;
+  }
+
+  .group:hover .md\:group-hover\:table-caption {
+    display: table-caption;
+  }
+
+  .group:hover .md\:group-hover\:table-cell {
+    display: table-cell;
+  }
+
+  .group:hover .md\:group-hover\:table-column {
+    display: table-column;
+  }
+
+  .group:hover .md\:group-hover\:table-column-group {
+    display: table-column-group;
+  }
+
+  .group:hover .md\:group-hover\:table-footer-group {
+    display: table-footer-group;
+  }
+
+  .group:hover .md\:group-hover\:table-header-group {
+    display: table-header-group;
+  }
+
+  .group:hover .md\:group-hover\:table-row-group {
+    display: table-row-group;
+  }
+
+  .group:hover .md\:group-hover\:table-row {
+    display: table-row;
+  }
+
+  .group:hover .md\:group-hover\:flow-root {
+    display: flow-root;
+  }
+
+  .group:hover .md\:group-hover\:grid {
+    display: grid;
+  }
+
+  .group:hover .md\:group-hover\:inline-grid {
+    display: inline-grid;
+  }
+
+  .group:hover .md\:group-hover\:contents {
+    display: contents;
+  }
+
+  .group:hover .md\:group-hover\:list-item {
+    display: list-item;
+  }
+
+  .group:hover .md\:group-hover\:hidden {
+    display: none;
+  }
+
   .md\:h-0 {
     height: 0px;
   }
@@ -143319,6 +143626,90 @@ figcaption{
     display: none;
   }
 
+  .group:hover .lg\:group-hover\:block {
+    display: block;
+  }
+
+  .group:hover .lg\:group-hover\:inline-block {
+    display: inline-block;
+  }
+
+  .group:hover .lg\:group-hover\:inline {
+    display: inline;
+  }
+
+  .group:hover .lg\:group-hover\:flex {
+    display: flex;
+  }
+
+  .group:hover .lg\:group-hover\:inline-flex {
+    display: inline-flex;
+  }
+
+  .group:hover .lg\:group-hover\:table {
+    display: table;
+  }
+
+  .group:hover .lg\:group-hover\:inline-table {
+    display: inline-table;
+  }
+
+  .group:hover .lg\:group-hover\:table-caption {
+    display: table-caption;
+  }
+
+  .group:hover .lg\:group-hover\:table-cell {
+    display: table-cell;
+  }
+
+  .group:hover .lg\:group-hover\:table-column {
+    display: table-column;
+  }
+
+  .group:hover .lg\:group-hover\:table-column-group {
+    display: table-column-group;
+  }
+
+  .group:hover .lg\:group-hover\:table-footer-group {
+    display: table-footer-group;
+  }
+
+  .group:hover .lg\:group-hover\:table-header-group {
+    display: table-header-group;
+  }
+
+  .group:hover .lg\:group-hover\:table-row-group {
+    display: table-row-group;
+  }
+
+  .group:hover .lg\:group-hover\:table-row {
+    display: table-row;
+  }
+
+  .group:hover .lg\:group-hover\:flow-root {
+    display: flow-root;
+  }
+
+  .group:hover .lg\:group-hover\:grid {
+    display: grid;
+  }
+
+  .group:hover .lg\:group-hover\:inline-grid {
+    display: inline-grid;
+  }
+
+  .group:hover .lg\:group-hover\:contents {
+    display: contents;
+  }
+
+  .group:hover .lg\:group-hover\:list-item {
+    display: list-item;
+  }
+
+  .group:hover .lg\:group-hover\:hidden {
+    display: none;
+  }
+
   .lg\:h-0 {
     height: 0px;
   }
@@ -187747,6 +188138,90 @@ figcaption{
     display: none;
   }
 
+  .group:hover .xl\:group-hover\:block {
+    display: block;
+  }
+
+  .group:hover .xl\:group-hover\:inline-block {
+    display: inline-block;
+  }
+
+  .group:hover .xl\:group-hover\:inline {
+    display: inline;
+  }
+
+  .group:hover .xl\:group-hover\:flex {
+    display: flex;
+  }
+
+  .group:hover .xl\:group-hover\:inline-flex {
+    display: inline-flex;
+  }
+
+  .group:hover .xl\:group-hover\:table {
+    display: table;
+  }
+
+  .group:hover .xl\:group-hover\:inline-table {
+    display: inline-table;
+  }
+
+  .group:hover .xl\:group-hover\:table-caption {
+    display: table-caption;
+  }
+
+  .group:hover .xl\:group-hover\:table-cell {
+    display: table-cell;
+  }
+
+  .group:hover .xl\:group-hover\:table-column {
+    display: table-column;
+  }
+
+  .group:hover .xl\:group-hover\:table-column-group {
+    display: table-column-group;
+  }
+
+  .group:hover .xl\:group-hover\:table-footer-group {
+    display: table-footer-group;
+  }
+
+  .group:hover .xl\:group-hover\:table-header-group {
+    display: table-header-group;
+  }
+
+  .group:hover .xl\:group-hover\:table-row-group {
+    display: table-row-group;
+  }
+
+  .group:hover .xl\:group-hover\:table-row {
+    display: table-row;
+  }
+
+  .group:hover .xl\:group-hover\:flow-root {
+    display: flow-root;
+  }
+
+  .group:hover .xl\:group-hover\:grid {
+    display: grid;
+  }
+
+  .group:hover .xl\:group-hover\:inline-grid {
+    display: inline-grid;
+  }
+
+  .group:hover .xl\:group-hover\:contents {
+    display: contents;
+  }
+
+  .group:hover .xl\:group-hover\:list-item {
+    display: list-item;
+  }
+
+  .group:hover .xl\:group-hover\:hidden {
+    display: none;
+  }
+
   .xl\:h-0 {
     height: 0px;
   }
@@ -232175,6 +232650,90 @@ figcaption{
     display: none;
   }
 
+  .group:hover .\32xl\:group-hover\:block {
+    display: block;
+  }
+
+  .group:hover .\32xl\:group-hover\:inline-block {
+    display: inline-block;
+  }
+
+  .group:hover .\32xl\:group-hover\:inline {
+    display: inline;
+  }
+
+  .group:hover .\32xl\:group-hover\:flex {
+    display: flex;
+  }
+
+  .group:hover .\32xl\:group-hover\:inline-flex {
+    display: inline-flex;
+  }
+
+  .group:hover .\32xl\:group-hover\:table {
+    display: table;
+  }
+
+  .group:hover .\32xl\:group-hover\:inline-table {
+    display: inline-table;
+  }
+
+  .group:hover .\32xl\:group-hover\:table-caption {
+    display: table-caption;
+  }
+
+  .group:hover .\32xl\:group-hover\:table-cell {
+    display: table-cell;
+  }
+
+  .group:hover .\32xl\:group-hover\:table-column {
+    display: table-column;
+  }
+
+  .group:hover .\32xl\:group-hover\:table-column-group {
+    display: table-column-group;
+  }
+
+  .group:hover .\32xl\:group-hover\:table-footer-group {
+    display: table-footer-group;
+  }
+
+  .group:hover .\32xl\:group-hover\:table-header-group {
+    display: table-header-group;
+  }
+
+  .group:hover .\32xl\:group-hover\:table-row-group {
+    display: table-row-group;
+  }
+
+  .group:hover .\32xl\:group-hover\:table-row {
+    display: table-row;
+  }
+
+  .group:hover .\32xl\:group-hover\:flow-root {
+    display: flow-root;
+  }
+
+  .group:hover .\32xl\:group-hover\:grid {
+    display: grid;
+  }
+
+  .group:hover .\32xl\:group-hover\:inline-grid {
+    display: inline-grid;
+  }
+
+  .group:hover .\32xl\:group-hover\:contents {
+    display: contents;
+  }
+
+  .group:hover .\32xl\:group-hover\:list-item {
+    display: list-item;
+  }
+
+  .group:hover .\32xl\:group-hover\:hidden {
+    display: none;
+  }
+
   .\32xl\:h-0 {
     height: 0px;
   }
@@ -270777,4 +271336,3 @@ figcaption{
     -webkit-line-clamp: unset;
   }
 }
-
diff --git a/assets/css/screen.css b/assets/css/screen.css
index ce0f8d4..c458038 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -8,7 +8,20 @@
 /* Main
 /* ---------------------------------------------------------- */
 
-[x-cloak] { display: none !important; }
+[x-cloak] {
+  display: none !important;
+}
+
+a.no-underline{
+  text-decoration: none !important;
+}
+a.no-underline:hover{
+  text-decoration: none;
+}
+
+pre{
+  @apply shadow-inner dark:bg-gray-300;
+}
 
 .text-gradient {
   background-clip: text;
@@ -21,7 +34,8 @@
   @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
 }
 
-.page-about-content h2, .page-about-content h3 {
+.page-about-content h2,
+.page-about-content h3 {
   @apply my-10;
 }
 
@@ -29,69 +43,54 @@
   height: auto !important;
 }
 
-.perspective-700{
+.perspective-700 {
   perspective: 750px;
 }
 
 .perspective-transform {
-  transform: rotateX(30deg) rotateY(0deg); transform-style: preserve-3d;
+  transform: rotateX(30deg) rotateY(0deg);
+  transform-style: preserve-3d;
   transition: 1s ease all;
 }
 
-.perspective-transform:hover{
-  transform: rotateX(15deg) rotateY(0deg); 
+.perspective-transform:hover {
+  transform: rotateX(15deg) rotateY(0deg);
 }
 
 .no-underline {
   text-decoration: none !important;
 }
 
-/*
-.post-body h2 {
-  @apply text-4xl my-4 px-4 sm:px-2 md:px-0;
-}
-
-.post-body h3 {
-  @apply text-2xl my-4 px-4 sm:px-2 md:px-0;
-}
-
-.post-body p{
-  @apply my-3 mx-auto text-lg max-w-prose mx-auto px-4 sm:px-2 md:px-0;
-}
-
-.post-body blockquote {
-  @apply my-4 pl-2 text-lg border-l-2 mx-auto max-w-prose border-l-4 border-blue-600 pl-5;
-}
-
-.post-body figure {
-  @apply my-10;
-}
-
-.post-body hr{
-  @apply my-10;
-}
-
-.post-body ul{
-  @apply text-lg my-4 list-inside list-disc my-3 mx-auto text-lg max-w-prose mx-auto px-4 sm:px-2 md:px-0;
-}
-
-.post-body li{
-  @apply text-lg;
-}
-
-.post-body a {
-  @apply text-blue-500 font-normal;
-}
-
-.post-body a:hover {
-  @apply font-bold;
-}
-
-.post-body pre {
-  @apply p-4 px-8 my-10 rounded-xl bg-gray-200 dark:bg-gray-700 shadow-xl;
-}*/
-
-figcaption{
+figcaption {
   @apply text-sm text-center;
 }
 
+.prose > h1::before,
+.prose > h2::before,
+.prose > h3::before,
+.prose > h4::before,
+.prose > h5::before,
+.prose > h6::before {
+  display: block;
+  content: " ";
+  height: 80px;
+  margin-top: -80px;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.is-active-link {
+  @apply transition-colors text-gray-900 dark:text-gray-100 bg-blue-100 dark:bg-blue-900;
+}
+
+.toc-list-item a {
+  @apply text-sm transition-colors text-gray-600 dark:text-gray-400;
+}
+
+.toc-list-item a:hover {
+  @apply dark:text-blue-500;
+}
+
+.toc-list-item {
+  @apply my-1;
+}
diff --git a/custom-interop-post.hbs b/custom-interop-post.hbs
index 33042e8..4fc5a6f 100644
--- a/custom-interop-post.hbs
+++ b/custom-interop-post.hbs
@@ -16,8 +16,6 @@
   </main>
   
   {{> interop/connectorTagCards}}
-  
-  {{!-- {{> interop/connectorSlider}} --}}
 
   <div class="prose prose-blue lg:prose-xl mx-auto dark:prose-dark my-10 px-4 md:px-0">
     
diff --git a/custom-tutorial-post.hbs b/custom-tutorial-post.hbs
new file mode 100644
index 0000000..7ff8c33
--- /dev/null
+++ b/custom-tutorial-post.hbs
@@ -0,0 +1,184 @@
+{{!< default}} {{#post}} <article id="top" class="w-default mx-auto mb-10">
+  <div class="w-full p-0 mx-auto grid gap-0 md:gap-4 grid-cols-7"
+    x-data="{ collapseToc: window.innerWidth < 768, isMobile: false, openToc: false }"
+    @load.window="isMobile = window.innerWidth < 768; collapseToc = isMobile;"
+    @resize.window="isMobile = window.innerWidth < 768; collapseToc = isMobile;">
+
+    {{!-- Header --}}
+    <figure class="col-span-7 md:col-span-2 flex items-center justify-center">
+      {{#if feature_image}}
+      <img srcset="{{img_url feature_image size=" s"}} 300w, {{img_url feature_image size="m" }} 600w, {{img_url
+        feature_image size="l" }} 1000w, {{img_url feature_image size="xl" }} 2000w" sizes="(max-width: 800px) 400px,
+                            (max-width: 1170px) 1170px,
+                                2000px" src="{{img_url feature_image size=" xl"}}" alt="{{title}}" />
+      {{/if}}
+    </figure>
+
+    <header x-ref="header" class="title-wrapper my-10  col-span-7 md:col-span-5 col-span-7 max-w-full">
+      <div class="prose dark:prose-dark lg:prose-xl mx-auto">
+        <span class="gh-post-meta text-sm"><time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
+            YYYY"}}</time>
+          <span class="bull">&bull;</span>
+          {{reading_time}}
+        </span>
+        <h1 class="gh-title">{{title}}</h1>
+      </div>
+      <div class="max-w-prose mx-auto my-4">
+        {{#foreach tags}}
+        <a class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 inline-block transform scale-90 hover:scale-100 transition-transform"
+          href="{{url}}">
+          {{name}}
+        </a>
+        {{/foreach}}
+      </div>
+      <div class="prose dark:prose-dark lg:prose-xl mx-auto">
+        {{#if custom_excerpt}}
+        <p class="italic">{{custom_excerpt}}</p>
+        {{/if}}
+      </div>
+      <div class="authors mt-4 max-w-prose mx-auto grid grid-cols-3 gap-2">
+        {{#foreach authors}}
+        <div class="author flex items-center col-span-1">
+          {{#if profile_image}}
+          <div class="inline-block rounded-full overflow-hidden">
+            <img class="h-8 w-8" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
+          </div>
+          {{else}}
+          <div class="h-8 w-8 mr-2">{{> "icons/avatar"}}</div>
+          {{/if}}
+          <span class="ml-2 text-gray-800 dark:text-gray-200">{{name}}</span>
+        </div>
+        {{/foreach}}
+      </div>
+    </header>
+
+    {{!-- TOC --}}
+
+    <aside
+      class="toc-wrapper col-span-7 md:col-span-2 shadow-xl md:shadow-none rounded-lg p-3 md:p-1 bg-gray-50 md:bg-transparent sticky top-16 md:relative md:top-0 z-20">
+      <div class="md:sticky md:top-20">
+        <div class="">
+          <div class="font-medium">
+            <button class="flex font-medium" @click="openToc = !openToc;">
+              {{!-- <span class="self-center text-blue-500">{{title}}</span> --}}
+              <span class="text-blue-500">In this page</span>
+              <svg xmlns="http://www.w3.org/2000/svg"
+                class="transition transform self-center block md:hidden t-1 h-5 w-5"
+                :class="{'rotate-180' : (!collapseToc || !isMobile || openToc) }" viewBox="0 0 20 20"
+                fill="currentColor">
+                <path fill-rule="evenodd"
+                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                  clip-rule="evenodd" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div x-ref="toc" class="origin-top pb-0 md:pb-3 max-h-full" x-show="!collapseToc || !isMobile || openToc"
+          @click="openToc=false" x-transition:enter="transition ease-out duration-100"
+          x-transition:enter-start="opacity-0 transform scale-y-0"
+          x-transition:enter-end="opacity-100 transform scale-y-100"
+          x-transition:leave="transition ease-in duration-100"
+          x-transition:leave-start="opacity-100 transform scale-y-100"
+          x-transition:leave-end="opacity-0 transform scale-y-0">
+          <div class="toc"></div>
+          <div class="mt-2 pt-2 border-t md:border-t-0">
+            <a href="" onclick="event.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' });"
+              class="inline-flex -ml-2 pl-2 pr-4 py-1 items-center no-underline text-sm font-medium text-blue-500 transition-shadow shadow-none hover:shadow-lg w-full md:w-auto rounded-xl">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+              </svg>
+              Top
+            </a>
+          </div>
+        </div>
+      </div>
+    </aside>
+
+    {{!-- Body --}}
+
+    <div class="post-content prose dark:prose-dark lg:prose-xl prose-blue mx-auto col-span-7 md:col-span-5 mt-4">
+      {{content}}
+    </div>
+
+  </div>
+  </article>
+
+  <aside class="w-default mx-auto mb-10 px-3">
+    {{#if primary_tag}}
+    {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
+    {{#if related_posts}}
+    <article class="read-next-card">
+      <header class="read-next-card-header">
+        {{#../primary_tag}}
+        <h3 class="text-xl dark:text-gray-100 mt-12 mb-4">Get to know Speckle more:</h3>
+        {{/../primary_tag}}
+      </header>
+      <div class="read-next-card-content grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        {{#foreach related_posts}}
+        <div class="grid-cols-1">
+          {{> cardSm }}
+        </div>
+        {{/foreach}}
+      </div>
+    </article>
+    {{/if}}
+    {{/get}}
+    {{/if}}
+
+  </aside>
+
+  {{/post}}
+
+  <script>
+    // let pTags = Array.from(document.getElementsByTagName('p')) //.filter( t => t.innerHTML.includes(':::'))
+    
+    let postContent = Array.from(document.getElementsByClassName('post-content'))[0].innerHTML
+    
+    let tips = postContent.match(/<p>::: tip(.*?):::<\/\p>/g)
+    let warnings = postContent.match(/<p>::: warning(.*?):::<\/\p>/g)
+    let dangers = postContent.match(/<p>::: danger(.*?):::<\/\p>/g)
+
+    let details = postContent.match(/<p>::: details([\s\S]+?):::<\/\p>/g)
+    
+    console.log( details )
+
+    tips.forEach( tip => {
+      let result = tip.match(/::: tip(.*?)</)
+      let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Tip'
+      let newTip = `<div class="mb-4 border-l-4 border-blue-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace( `::: tip${result[1]}`, `<div class="font-bold text-blue-500 mb-2">${tipTitle}</div>`) + `</div>`
+      newTip = newTip.replace(":::", "")
+      newTip = newTip.replace("<br>", "")
+      postContent = postContent.replace(tip, newTip)
+    })
+
+    warnings.forEach( tip => {
+      let result = tip.match(/::: warning(.*?)</)
+      let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Warning'
+      let newTip = `<div class="mb-4 border-l-4 border-yellow-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace( `::: warning${result[1]}`, `<div class="font-bold text-yellow-500 mb-2">${tipTitle}</div>`) + `</div>`
+      newTip = newTip.replace(":::", "")
+      newTip = newTip.replace("<br>", "")
+      postContent = postContent.replace(tip, newTip)
+    })
+
+    dangers.forEach( tip => {
+      let result = tip.match(/::: danger(.*?)</)
+      let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Danger'
+      let newTip = `<div class="mb-4 border-l-4 border-red-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace( `::: danger${result[1]}`, `<div class="font-bold text-red-500 mb-2">${tipTitle}</div>`) + `</div>`
+      newTip = newTip.replace(":::", "")
+      newTip = newTip.replace("<br>", "")
+      postContent = postContent.replace(tip, newTip)
+    })
+
+    details.forEach( detail => {
+      let result = detail.match(/::: details(.*?)</)
+      let detailTitle = result[1] && result[1] !== "" ? result[1] : 'Details'
+      let newDetails = `<details class="mb-4 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + detail.replace(`::: details${result[1]}`, `<summary class="font-bold text-blue-500 my-2 hover:cursor-pointer">${detailTitle}</summary>`) + `</details>`
+      newDetails = newDetails.replace(":::", "")
+      postContent = postContent.replace(detail, newDetails)
+    })
+
+    Array.from(document.getElementsByClassName('post-content'))[0].innerHTML = postContent
+
+
+  </script>
\ No newline at end of file
diff --git a/default.hbs b/default.hbs
index a506a87..332a29e 100644
--- a/default.hbs
+++ b/default.hbs
@@ -31,15 +31,19 @@
 
   {{> footer }}
 
+    {{#is "post, page"}}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.min.js"></script>
+    <script>
+      tocbot.init({
+        tocSelector: '.toc',
+        contentSelector: '.post-content',
+        hasInnerContainers: true
+      });
+    </script>
+    {{/is}}
+
   {{ghost_foot}}
 
-  {{#is "home"}}
-
-
-
-  {{/is}}
-
-
 </body>
 
 </html>
\ No newline at end of file
diff --git a/partials/cardSm.hbs b/partials/cardSm.hbs
new file mode 100644
index 0000000..1147293
--- /dev/null
+++ b/partials/cardSm.hbs
@@ -0,0 +1,21 @@
+<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden w-full">
+  <div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
+    <div class="flex-1">
+      <a href="{{url}}" class="block mt-2">
+        <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
+          {{title}}
+        </p>
+        <p class="mt-3 text-sm text-gray-500 line-clamp-2">
+          {{excerpt}}
+        </p>
+      </a>
+    </div>
+    <div class="mt-6 flex items-center">
+      <div class="">
+        <p class="text-sm font-medium text-gray-900 dark:text-gray-200">
+          <span class="text-gray-500"> <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></span>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/partials/cardTutorial.hbs b/partials/cardTutorial.hbs
index af4e577..de43c68 100644
--- a/partials/cardTutorial.hbs
+++ b/partials/cardTutorial.hbs
@@ -19,7 +19,7 @@
         <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
           {{title}}
         </p>
-        <p class="mt-3 text-base text-gray-500 line-clamp-3 md:line-clamp-4">
+        <p class="mt-3 text-base text-gray-500 line-clamp-3">
           {{excerpt}}
         </p>
       </a>
diff --git a/partials/ctaButton.hbs b/partials/ctaButton.hbs
index 90a652f..583860d 100644
--- a/partials/ctaButton.hbs
+++ b/partials/ctaButton.hbs
@@ -1,3 +1,3 @@
-<a href="/getstarted" class="inline-block items-center justify-center px-8 py-3 border-4 border-blue-600 transition text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 hover:shadow-3xl md:py-4 md:text-lg">
+<a href="/getstarted" class="inline-block items-center justify-center px-8 py-3 border-4 border-blue-600 transition text-base font-medium rounded-md text-white bg-blue-500 hover:bg-blue-700 hover:shadow-3xl md:py-4 md:text-lg">
   <span class="text-white no-underline">Get Started</span>
 </a>
\ No newline at end of file
diff --git a/partials/interop/connectorTagCards.hbs b/partials/interop/connectorTagCards.hbs
index 840e77b..eb73314 100644
--- a/partials/interop/connectorTagCards.hbs
+++ b/partials/interop/connectorTagCards.hbs
@@ -1,8 +1,9 @@
-<div class="sticky w-default transform z-40 top-20 mt-5">
-  <div class="bg-gradient-to-r from-blue-500 to-blue-700 px-5 pt-2 pb-3 flex flex-wrap items-center justify-center md:justify-start rounded-lg w-full text-white">
+<div class="block lg:sticky w-default transform z-40 top-20 mt-5">
+  <div
+    class="bg-gradient-to-r from-blue-500 to-blue-700 px-5 pt-2 pb-3 flex flex-wrap items-center justify-center md:justify-start rounded-lg w-full text-white">
     Send
-    <select id="from" name="from"
-      class="block w-full md:inline-block md:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500  dark:bg-blue-900 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+    <select id="from" name="from" class="block w-full sm:inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500  dark:bg-blue-900 border-gray-300 foc
+      us:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
       <option value="Select a connector">From</option>
       {{#get "tags" limit="all" include='count.posts' order='count.posts desc'
       filter="slug:-[features,developers,careers,blog,tutorials]"}}
@@ -13,7 +14,7 @@
     </select>
     to
     <select id="to" name="to"
-      class="block w-full md:inline-block md:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500  dark:bg-blue-900 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
+      class="block w-full sm:inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500  dark:bg-blue-900 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
       <option value="Select a connector">To </option>
       {{#get "tags" limit="all" include='count.posts' order='count.posts desc'
       filter="slug:-[features,developers,careers,blog,tutorials]"}}
@@ -35,30 +36,25 @@
   {{#get "tags" limit="all" include='count.posts' order='count.posts desc'
   filter="slug:-[features,developers,careers,blog,tutorials]"}}
   {{#foreach tags }}
-  <div class="group dark:text-gray-200 text-gray-600 p-2 flex flex-col sm:flex-row prose-blue prose-nounderline prose prose-sm dark:prose-dark max-w-none
-          shadow-sm hover:shadow-xl transition-shadow dark:bg-gray-900 bg-white rounded-xl col-span-1 connector-card connector-{{name}}
+  <a href="{{url}}" class="group p-2 py-5 flex flex-col sm:flex-row max-w-none
+          shadow-sm hover:shadow-xl transition-shadow hover:ring dark:bg-gray-900 bg-white rounded-xl col-span-1 connector-card connector-{{name}}
         ">
     <div class="flex flex-shrink-0 items-center justify-center mx-6">
       <img class="mx-auto h-32 w-32 transition-transform transform group-hover:scale-110 object-contain"
         src="{{feature_image}}">
     </div>
-    <div class="flex-grow flex flex-col justify-between text-center sm:text-left p-4">
-      <h2 class="w-full mt-4">
+    <div class="flex-grow flex flex-col justify-center text-center sm:text-left">
+      <h2 class="w-full text-xl dark:text-gray-50 text-gray-900 font-bold flex items-center group-hover:text-blue-500">
         {{name}}
+        <svg xmlns="http://www.w3.org/2000/svg"
+          class="ml-2 h-6 w-6 transition-opacity opacity-0 group-hover:opacity-100" fill="none" viewBox="0 0 24 24"
+          stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+        </svg>
       </h2>
-      <p>{{description}}</p>
-      <h3>
-        <a href="{{url}}" class="no-underline flex items-center justify-center sm:justify-start">
-          <span class="no-underline">Tutorials</span>
-          <svg xmlns="http://www.w3.org/2000/svg"
-            class="ml-2 h-6 w-6 transition-opacity opacity-0 group-hover:opacity-100" fill="none" viewBox="0 0 24 24"
-            stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
-          </svg>
-        </a>
-      </h3>
+      <p class="text-sm dark:text-gray-400 text-gray-600 line-clamp-3">{{description}}</p>
     </div>
-  </div>
+  </a>
   {{/foreach}}
   {{/get}}
 
@@ -66,7 +62,7 @@
     class="group dark:text-gray-200 text-gray-600 p-2 col-span-2 tip-card flex flex-col justify-center items-center my-10 dark:bg-gray-900 bg-white rounded-xl shadow-xl py-10"
     id='tipcontainer' style="display: none;">
     <div class="prose-blue prose prose-sm dark:prose-dark max-w-none">
-      <h3 id="tip-text">Speckle allow you to send data from Rhino to Revit, and basically sketch shit in one.</h3>
+      <h3 id="tip-text"></h3>
     </div>
     <div class="my-4">
       {{> ctaButton}}
@@ -125,7 +121,7 @@
     if (tips[selection[0] + selection[1]]) {
       document.getElementById('tip-text').innerHTML = tips[selection[0] + selection[1]]
     } else {
-      document.getElementById('tip-text').innerHTML = 'Do you use this workflow? Let us know on the <a href="https://speckle.community">community forum</a>!'
+      document.getElementById('tip-text').innerHTML = 'Let us know how you use this workflow on the <a href="https://speckle.community">community forum</a>!'
     }
     document.getElementById('tipcontainer').style.display = 'flex'
   }
diff --git a/partials/landing/connectorsPreview.hbs b/partials/landing/connectorsPreview.hbs
index 385a799..9ba9423 100644
--- a/partials/landing/connectorsPreview.hbs
+++ b/partials/landing/connectorsPreview.hbs
@@ -48,15 +48,21 @@
             Revit
           </p>
         </div>
-        
+
         {{!-- unccomment in stage 2 --}}
         <div
-          class="swiper-slide group p-2 bg-white dark:bg-gray-800 rounded-xl text-center content-center flex flex-wrap justify-center h-auto">
-          <p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-            <a href="/features/connectors">Check out all our connectors!</a>
-          </p>
+          class="swiper-slide group p-2 rounded-xl text-center content-center flex flex-wrap justify-center h-auto transform scale-90 hover:scale-100 transition bg-blue-500 text-white">
+          <a href="/features/connectors"
+            class="flex flex-col text-center w-full h-full text-xl items-center justify-center">
+            All Connectors
+            <svg xmlns="http://www.w3.org/2000/svg"
+              class="ml-2 h-6 w-6 transition-opacity opacity-50 group-hover:opacity-100" fill="none" viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+            </svg>
+          </a>
         </div>
-        
+
         <div
           class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
           <img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
@@ -113,10 +119,11 @@
   <div
     class="group w-full mx-auto prose lg:prose-lg dark:prose-dark max-w-none text-center p-10 bg-gradient-to-b from-gray-200 dark:from-gray-900">
     <div class="w-default px-4">
-     Go beyond interoperability and leverage all the potential behind a fully fledged BIM data platform
+      Go beyond interoperability and leverage all the potential behind a fully fledged BIM data platform
     </div>
     <div class="flex flex-wrap content-center justify-center">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
+        stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
       </svg>
     </div>
diff --git a/tag.hbs b/tag.hbs
index c34a235..17cb214 100644
--- a/tag.hbs
+++ b/tag.hbs
@@ -1,43 +1,60 @@
-{{!< default}} {{#tag}} <div x-data="{ docsLink: null, sourceLink: null, videoLink:null }"
-  x-init="
-    docsLink = window.docsLink; sourceLink = window.sourceLink; videoLink = window.videoLink; 
+{{!< default}} {{#tag}} <div x-data="{ docsLink: null, sourceLink: null, videoLink:null, showInstallLink: false, connectorTag:false }" x-init="
+    docsLink = window.docsLink; sourceLink = window.sourceLink; videoLink = window.videoLink; showInstallLink = window.showInstallLink; connectorTag = window.connectorTag;
     if( videoLink ) document.getElementById('tagvideo').src = videoLink;">
 
 
 
-  <main class="w-default my-10 space-x-6 space-y-6 flex flex-col md:flex-row items-center">
-    <div class="w-1/2">
-      <div class="prose lg:prose-xl dark:prose-dark max-w-none mb-4">
-        <h1>{{name}}</h1>
+  <main class="w-default lg:my-10 space-x-6 space-y-6 flex flex-col md:flex-row items-center">
+    <div class="w-full md:w-1/2">
+      <div class="prose lg:prose-xl dark:prose-dark prose-blue max-w-none mb-4">
+        <h1 class="flex items-center">
+          <a class="flex items-center justify-center no-underline" href="/features/connectors" x-cloak x-show="connectorTag">
+            Connectors
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+          </a>
+          {{name}}
+        </h1>
         <p>{{description}}</p>
       </div>
-      <a class="py-2 px-4 rounded inline-flex items-center text-white bg-blue-500 dark:bg-blue-800 transition-shadow hover:shadow-xl"
-        x-show="docsLink" href="#" x-cloak x-bind:href="docsLink">
+      <a class="py-2 px-4 rounded inline-flex items-center text-white bg-purple-500 dark:bg-purple-800 transition-shadow hover:shadow-xl hover:ring mr-2"
+        href="/getstarted" x-show="showInstallLink">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd"
+            d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+            clip-rule="evenodd" />
+        </svg>
+        <span>Install</span>
+      </a>
+      <a class="py-2 px-4 rounded inline-flex items-center text-white bg-blue-500 dark:bg-blue-800 transition-shadow hover:shadow-xl hover:ring mr-2"
+        x-show="docsLink" href="#" target="_blank" x-cloak x-bind:href="docsLink">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24"
           stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
             d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
         </svg>
-        <span>Reference Documentation</span>
+        <span>Docs</span>
       </a>
-      <a class="py-2 px-4 rounded inline-flex items-center text-gray-700 dark:text-gray-300 transition-shadow hover:shadow-xl"
-        x-show="sourceLink" href="#" x-cloak x-bind:href="sourceLink">
+      <a class="py-2 px-4 rounded inline-flex items-center text-gray-700 dark:text-gray-300 transition-shadow hover:shadow-xl hover:ring mr-2"
+        x-show="sourceLink" href="#" target="_blank" x-cloak x-bind:href="sourceLink">
         <svg class="h-6 w-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
           <path fill-rule="evenodd"
             d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
             clip-rule="evenodd"></path>
         </svg>
-        <span>Source Code</span>
+        <span>Source</span>
       </a>
     </div>
-    <div class="w-1/2" x-show="!videoLink">
+    <div class="w-full md:w-1/2" x-show="!videoLink">
       <img class="mx-auto h-48 w-48 transition-transform transform group-hover:scale-110 object-contain"
         src="{{feature_image}}">
     </div>
-    <div class="w-1/2" x-show="videoLink">
+    <div class="w-full md:w-1/2" x-show="videoLink">
       <div class="overflow-hidden shadow-2xl rounded-2xl mx-auto max-w-xl lg:w-full aspect-w-16 aspect-h-9">
         <div class="h-full">
-          <iframe id='tagvideo' width="100%" height="100%" v-bind:src="videoLink" title="YouTube video player" frameborder="0"
+          <iframe id='tagvideo' width="100%" height="100%" v-bind:src="videoLink" title="YouTube video player"
+            frameborder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             allowfullscreen></iframe>
         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index d423b63..f36f474 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -50,6 +50,7 @@ module.exports = {
             },
             code: {
               backgroundColor: theme("colors.gray.800"),
+              color: theme("colors.gray.200"),
             },
             hr: { borderColor: theme("colors.gray.700") },
             "ol li:before": {
@@ -88,6 +89,7 @@ module.exports = {
       visibility: ["hover", "dark"],
       ringWidth: ["hover", "active"],
       scale: ["group-hover"],
+      display: ["group-hover"],
     },
   },
   plugins: [