diff --git a/.vuepress/theme/styles/badges.css b/.vuepress/theme/styles/badges.css
new file mode 100644
index 00000000..e98f7853
--- /dev/null
+++ b/.vuepress/theme/styles/badges.css
@@ -0,0 +1,11 @@
+.badge {
+    @apply .ml-2 .leading-normal;
+
+    &.tip {
+        @apply .bg-green-dark !important;
+    }
+
+    &.warn {
+        @apply .bg-yellow-dark !important;
+    }
+}
diff --git a/.vuepress/theme/styles/code.css b/.vuepress/theme/styles/code.css
index bf7dbbf7..4a8cd4bf 100644
--- a/.vuepress/theme/styles/code.css
+++ b/.vuepress/theme/styles/code.css
@@ -1,6 +1,6 @@
 .content {
     code {
-        @apply m-0 text-sm bg-grey-lighter rounded-sm;
+        @apply .m-0 .text-sm .bg-grey-lighter .rounded-sm .border;
         padding: .25rem .5rem;
     }
 
@@ -8,13 +8,13 @@
         @apply .leading-normal .overflow-auto .my-4 .mx-0 .p-4;
 
         code {
-            @apply .text-white .p-0 .bg-transparent;
+            @apply .text-white .p-0 .bg-transparent .border-0;
         }
     }
 }
 
 div[class*="language-"] {
-    @apply .relative .bg-grey-darkest;
+    @apply .relative .bg-grey-darkest .rounded .border .border-black;
 
     .highlight-lines {
         @apply .absolute .pin-t .pin-l .w-full .leading-normal .select-none;
@@ -26,19 +26,19 @@ div[class*="language-"] {
     }
 
     pre, pre[class*="language-"] {
-        @apply bg-transparent relative;
+        @apply .bg-transparent .relative .m-0;
         z-index: 1;
     }
 
     &::before {
-        @apply absolute text-xs text-grey;
+        @apply .absolute .text-xs .text-grey;
         top: 1em;
         right: 1em;
     }
 
     &:not(.line-numbers-mode) {
         .line-numbers-wrapper {
-            @apply hidden;
+            @apply .hidden;
         }
     }
     &.line-numbers-mode {
diff --git a/.vuepress/theme/styles/main.css b/.vuepress/theme/styles/main.css
index 00972ccc..81b373bc 100644
--- a/.vuepress/theme/styles/main.css
+++ b/.vuepress/theme/styles/main.css
@@ -8,5 +8,7 @@
 @import "./sidebar.css";
 @import "./home.css";
 @import "./code.css";
+@import "./notices.css";
+@import "./badges.css";
 
-@import "tailwindcss/utilities";
\ No newline at end of file
+@import "tailwindcss/utilities";
diff --git a/.vuepress/theme/styles/notices.css b/.vuepress/theme/styles/notices.css
new file mode 100644
index 00000000..6ed67429
--- /dev/null
+++ b/.vuepress/theme/styles/notices.css
@@ -0,0 +1,36 @@
+.custom-block {
+    @apply .px-6 .py-1;
+    border-left: .5rem solid;
+
+    & > .custom-block-title {
+        @apply .font-semibold;
+    }
+
+    & > .custom-block-title, & > p {
+        @apply .my-3;
+    }
+
+    &.warning {
+        @apply .bg-yellow-lightest .border-yellow-dark;
+
+        & p, & > .custom-block-title {
+            @apply .text-yellow-darker;
+        }
+    }
+
+    &.tip {
+        @apply .bg-green-lightest .border-green-dark;
+
+        & p, & > .custom-block-title {
+            @apply .text-green-darker;
+        }
+    }
+
+    &.danger {
+        @apply .bg-red-lightest .border-red-dark;
+
+        & p, & > .custom-block-title {
+            @apply .text-red-darker;
+        }
+    }
+}
diff --git a/panel/upgrading.md b/panel/upgrading.md
index 095c4569..2e733551 100644
--- a/panel/upgrading.md
+++ b/panel/upgrading.md
@@ -27,10 +27,3 @@ php artisan queue:restart
 * [0.6.X to 0.7.9](/panel/upgrade/0.6_to_0.7.md)
 * [0.7.X series](/panel/upgrade/0.7.md) <Badge text="current" vertical="middle"/>
 * [0.7.X to 0.8.0](#) <Badge text="beta" type="warn" vertical="middle"/>
-
-<style scoped>
-    .badge {
-        line-height: 16px;
-        margin-left: 0.5rem;
-    }
-</style>