diff --git a/src/routes/blogs/blog.svelte b/src/routes/blogs/blog.svelte
index 5433688..829793f 100644
--- a/src/routes/blogs/blog.svelte
+++ b/src/routes/blogs/blog.svelte
@@ -1,6 +1,9 @@
 <script context="module">
 	import img from './img.svelte';
-	export { img };
+	import h1 from './h1.svelte';
+	import h2 from './h2.svelte';
+	import h3 from './h3.svelte';
+	export { img, h1, h2, h3 };
 </script>
 
 <script>
@@ -36,7 +39,7 @@
 		flex-wrap: row;
 		#height: 5rem;
 		margin-bottom: -12px;
-        #white-space: nowrap;
+		#white-space: nowrap;
 	}
 
 	.title h1 {
@@ -55,25 +58,24 @@
 	}
 
 	@media only screen and (max-width: 700px) {
+		.title {
+			margin-bottom: -5.3px;
+		}
 
-        .title {
-            margin-bottom:-5.3px;
-        }
+		.title h1 {
+			display: block;
+			width: 100%;
+		}
 
-        .title h1 {
-            display: block;
-            width:100%;
-        }
-
-        .title p{ 
-            width:100%;
-        }
-    }
+		.title p {
+			width: 100%;
+		}
+	}
 
 	.blog-text {
 		border-radius: var(--border-round);
 		background: var(--rp-moon-surface);
-		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
+		box-shadow: 0px 0px 0.5rem 0px hsl(from var(--rp-moon-pine) h calc(s * 0.5) calc(l * 0.25));
 		padding: var(--d2) var(--d3) var(--d4);
 	}
 </style>
diff --git a/src/routes/blogs/h1.svelte b/src/routes/blogs/h1.svelte
new file mode 100644
index 0000000..ac0dd89
--- /dev/null
+++ b/src/routes/blogs/h1.svelte
@@ -0,0 +1 @@
+<h2><slot /></h2>
diff --git a/src/routes/blogs/h2.svelte b/src/routes/blogs/h2.svelte
new file mode 100644
index 0000000..0c52fbd
--- /dev/null
+++ b/src/routes/blogs/h2.svelte
@@ -0,0 +1 @@
+<h3><slot /></h3>
diff --git a/src/routes/blogs/h3.svelte b/src/routes/blogs/h3.svelte
new file mode 100644
index 0000000..8b2d682
--- /dev/null
+++ b/src/routes/blogs/h3.svelte
@@ -0,0 +1 @@
+<h4><slot /></h4>