diff --git a/app/components/Highlight.tsx b/app/components/Highlight.tsx
index 58d165d..48aa1ec 100644
--- a/app/components/Highlight.tsx
+++ b/app/components/Highlight.tsx
@@ -1,7 +1,8 @@
-import type { JSX, ComponentProps, ParentComponent } from "solid-js";
+import type { ComponentProps, ParentComponent } from "solid-js";
 
 import { createEffect, createMemo, mergeProps, on, splitProps } from "solid-js";
 import * as Prismjs from "prismjs";
+import clsx from "clsx";
 
 /**
  * @see https://prismjs.com/#supported-languages
@@ -345,9 +346,9 @@ export const Highlight: ParentComponent<Props> = (_props) => {
 	);
 
 	return (
-		<pre>
+		<pre class={clsx("prism-code flex overflow-x-auto pb-6", languageClass())}>
 			<code
-				class={`${languageClass()} ${props.class || ""}`}
+				class={clsx("px-4", props.class)}
 				innerHTML={highlightedCode()}
 				{...rest}
 			>
diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx
index b364654..16bbc9c 100755
--- a/app/layouts/LayoutDefault.tsx
+++ b/app/layouts/LayoutDefault.tsx
@@ -129,14 +129,13 @@ type DefaultLayoutProps = {
 
 export default function DefaultLayout(props: DefaultLayoutProps) {
 	const { urlPathname } = usePageContext();
-	const isHomePage = urlPathname === "/";
 
 	return (
 		<>
 			<div class="flex w-full flex-col font-sans">
 				<Header />
 
-				{isHomePage && <HeroSection />}
+				{urlPathname === "/" && <HeroSection />}
 
 				<div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
 					<div class="hidden lg:relative lg:block lg:flex-none">
diff --git a/app/layouts/prism.css b/app/layouts/prism.css
index 0b4c69a..8a1018a 100644
--- a/app/layouts/prism.css
+++ b/app/layouts/prism.css
@@ -1,55 +1,46 @@
-pre[class*="language-"] {
-  color: var(--color-slate-50);
+pre[class*=language-] {
+  color: var(--color-slate-50)
 }
-
 .token.tag,
 .token.class-name,
 .token.selector,
 .token.selector .class,
 .token.selector.class,
 .token.function {
-  color: var(--color-pink-400);
+  color: var(--color-pink-400)
 }
-
 .token.attr-name,
-.token.keyword,
 .token.rule,
 .token.pseudo-class,
 .token.important {
-  color: var(--color-slate-300);
+  color: var(--color-slate-300)
 }
-
+.token.keyword,
 .token.module {
-  color: var(--color-pink-400);
+  color: var(--color-pink-400)
 }
-
 .token.attr-value,
 .token.class,
 .token.string,
 .token.property {
-  color: var(--color-sky-300);
+  color: var(--color-sky-300)
 }
-
 .token.punctuation,
 .token.attr-equals {
-  color: var(--color-slate-500);
+  color: var(--color-slate-500)
 }
-
 .token.unit,
 .language-css .token.function {
-  color: var(--color-teal-200);
+  color: var(--color-teal-200)
 }
-
 .token.comment,
 .token.operator,
 .token.combinator {
-  color: var(--color-slate-400);
+  color: var(--color-slate-400)
 }
-
 .prism-code {
-  margin: 0;
+  margin: 0
 }
-
 .prism-code + .prism-code {
-  margin-bottom: 1rem;
+  margin-bottom: 1rem
 }