diff --git a/src/components/code-block/code-block.stories.tsx b/src/components/code-block/code-block.stories.tsx
index 8a6b6127..49c19aaa 100644
--- a/src/components/code-block/code-block.stories.tsx
+++ b/src/components/code-block/code-block.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { CodeBlock, CodeBlockBody, CodeBlockContent, CodeBlockHeader } from ".";
+import { CodeBlock, CodeBlockBody, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, CodeBlockTitle } from ".";
 
 const meta = {
 	title: "CodeBlock",
@@ -25,13 +25,47 @@ const CodeIcon = () => (
 
 export const WithHeaderHighlightsAndHighlights: Story = {
 	render: () => (
-		<div className="max-w-96 mx-auto">
+		<div className="mx-auto max-w-screen-md">
 			<CodeBlock>
 				<CodeBlockHeader className="flex items-center gap-2">
 					<CodeIcon />
-					hello.js
+					<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
 				</CodeBlockHeader>
 				<CodeBlockBody>
+					<CodeBlockCopyButton />
+					<CodeBlockContent language="js" showLineNumbers highlightLines={[1, 2, "10-13"]}>
+						{`
+const http  = require('http');
+const ngrok = require("@ngrok/ngrok");
+
+const server = http.createServer((req, res) => {
+	res.writeHead(200);
+	res.end("Hello!");
+});
+
+// Consumes authtoken from env automatically
+ngrok.listen(server).then(() => {
+	console.log("url:", server.tunnel.url());
+});
+// really long line here that should wrap around and stuff Officia ipsum sint eu labore esse deserunt aliqua quis irure.
+						`}
+					</CodeBlockContent>
+				</CodeBlockBody>
+			</CodeBlock>
+		</div>
+	),
+};
+
+export const WithHeaderHighlightsAndHighlightsScrollyBoi: Story = {
+	render: () => (
+		<div className="mx-auto max-w-screen-md">
+			<CodeBlock className="h-40">
+				<CodeBlockHeader className="flex items-center gap-2">
+					<CodeIcon />
+					<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
+				</CodeBlockHeader>
+				<CodeBlockBody>
+					<CodeBlockCopyButton />
 					<CodeBlockContent language="js" showLineNumbers highlightLines={[1, 2, "10-12"]}>
 						{`
 const http  = require('http');
@@ -56,11 +90,11 @@ ngrok.listen(server).then(() => {
 
 export const WithHeaderAndLineNumbers: Story = {
 	render: () => (
-		<div className="max-w-96 mx-auto">
+		<div className="mx-auto max-w-screen-md">
 			<CodeBlock>
 				<CodeBlockHeader className="flex items-center gap-2">
 					<CodeIcon />
-					hello.js
+					<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
 				</CodeBlockHeader>
 				<CodeBlockBody>
 					<CodeBlockContent language="js" showLineNumbers>
@@ -77,6 +111,7 @@ const server = http.createServer((req, res) => {
 ngrok.listen(server).then(() => {
 	console.log("url:", server.tunnel.url());
 });
+// really long line here that should wrap around and stuff Officia ipsum sint eu labore esse deserunt aliqua quis irure.
 						`}
 					</CodeBlockContent>
 				</CodeBlockBody>
@@ -87,11 +122,11 @@ ngrok.listen(server).then(() => {
 
 export const WithHeaderNoLineNumbers: Story = {
 	render: () => (
-		<div className="max-w-96 mx-auto">
+		<div className="mx-auto max-w-screen-md">
 			<CodeBlock>
 				<CodeBlockHeader className="flex items-center gap-2">
 					<CodeIcon />
-					hello.js
+					<CodeBlockTitle>ngrok-example.js</CodeBlockTitle>
 				</CodeBlockHeader>
 				<CodeBlockBody>
 					<CodeBlockContent language="js">
@@ -118,7 +153,7 @@ ngrok.listen(server).then(() => {
 
 export const WithoutHeaderNoLineNumbers: Story = {
 	render: () => (
-		<div className="max-w-96 mx-auto">
+		<div className="mx-auto max-w-screen-md">
 			<CodeBlock>
 				<CodeBlockBody>
 					<CodeBlockContent language="js">
@@ -145,7 +180,7 @@ ngrok.listen(server).then(() => {
 
 export const WithoutHeaderNoLineNumbersButHighlights: Story = {
 	render: () => (
-		<div className="max-w-96 mx-auto">
+		<div className="mx-auto max-w-screen-md">
 			<CodeBlock>
 				<CodeBlockBody>
 					<CodeBlockContent language="js" highlightLines={[1, 2, "10-12"]}>
diff --git a/src/components/code-block/index.tsx b/src/components/code-block/index.tsx
index 0aded13f..85bdbde3 100644
--- a/src/components/code-block/index.tsx
+++ b/src/components/code-block/index.tsx
@@ -1,9 +1,19 @@
-import { PropsWithChildren, createContext, forwardRef, useContext, useEffect, useState } from "react";
+import { HTMLAttributes, createContext, forwardRef, useContext, useEffect, useState } from "react";
 import type { WithStyleProps } from "@/types/with-style-props";
 import { cx } from "@/lib/cx";
 import { SupportedLanguage } from "./utils/supported-languages";
 import { formatLanguageClassName } from "./utils/format-language-classname";
 import { LineRange, resolveLineNumbers } from "./utils/line-numbers";
+import { Slot } from "@radix-ui/react-slot";
+
+/**
+ * TODO(cody):
+ * - implement syntax highlighting w/ prism or highlightjs (spike on both, figure out which is easier/less bs)
+ * - fix overflow-y-auto on CodeBlockBody
+ * - fix line numbers, maybe try grid instead of :before and flex?
+ * - fix line hightlighting
+ * - fix line wrapping? horizontal scrolling has problems w/ line highlighting :(
+ */
 
 type CodeBlockContextType = (newCopyText: string) => void;
 
@@ -11,30 +21,25 @@ const CodeBlockContext = createContext<CodeBlockContextType>(() => {});
 
 const CodeBlockCopyContext = createContext<string>("");
 
-type CodeBlockProps = PropsWithChildren & WithStyleProps;
-
-const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(({ className, children, style }, ref) => {
+const CodeBlock = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
 	const [copyText, setCopyText] = useState("");
 
 	return (
 		<CodeBlockContext.Provider value={setCopyText}>
 			<CodeBlockCopyContext.Provider value={copyText}>
-				<div className={cx("relative rounded-md border border-gray-200 bg-gray-50", className)} ref={ref} style={style}>
-					{children}
-				</div>
+				<div
+					className={cx("overflow-hidden rounded-md border border-gray-200 bg-gray-50", className)}
+					ref={ref}
+					{...props}
+				/>
 			</CodeBlockCopyContext.Provider>
 		</CodeBlockContext.Provider>
 	);
 });
 CodeBlock.displayName = "CodeBlock";
 
-type CodeBlockBodyProps = WithStyleProps & PropsWithChildren;
-
-const CodeBlockBody = forwardRef<HTMLDivElement, CodeBlockBodyProps>(({ className, children, style }, ref) => (
-	<div className={cx("relative", className)} ref={ref} style={style}>
-		<CodeBlockCopyButton className="absolute right-2 top-2" />
-		{children}
-	</div>
+const CodeBlockBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+	<div className={cx("relative h-full", className)} ref={ref} {...props} />
 ));
 CodeBlockBody.displayName = "CodeBlockBody";
 
@@ -45,43 +50,38 @@ type CodeBlockContentProps = WithStyleProps & {
 	showLineNumbers?: boolean;
 };
 
-const CodeBlockContent = forwardRef<HTMLPreElement, CodeBlockContentProps>(
-	({ children, className, highlightLines, language, showLineNumbers, style }, ref) => {
-		const setCopyText = useContext(CodeBlockContext);
+const CodeBlockContent = forwardRef<HTMLPreElement, CodeBlockContentProps>((props, ref) => {
+	const { children, className, /* highlightLines, */ language = "sh", /* showLineNumbers = false, */ style } = props;
+	const highlightLines = undefined; // debug only, punting for now
+	const showLineNumbers = false; // debug only, punting for now
 
-		// trim any leading and trailing whitespace/empty lines
-		const trimmedCode = children?.trim() ?? "";
-		const lines = trimmedCode.split("\n");
+	const setCopyText = useContext(CodeBlockContext);
 
-		const highlightLineNumberSet = resolveLineNumbers(...(highlightLines ?? []));
+	// trim any leading and trailing whitespace/empty lines
+	const trimmedCode = children?.trim() ?? "";
+	const lines = trimmedCode.split("\n");
 
-		useEffect(() => {
-			setCopyText(trimmedCode);
-		}, [trimmedCode, setCopyText]);
+	const highlightLineNumberSet = resolveLineNumbers(...(highlightLines ?? []));
 
-		return (
-			<pre className={cx(formatLanguageClassName(language), "flex py-4 font-mono", className)} ref={ref} style={style}>
-				{showLineNumbers && (
-					<div aria-hidden className="pointer-events-none flex-shrink-0 select-none text-right">
-						{lines.map((line, index) => {
-							const lineNumber = index + 1;
-							const shouldHighlight = highlightLineNumberSet.has(lineNumber);
-
-							return (
-								<span
-									key={line + lineNumber}
-									className={cx(
-										"block border-r px-2 text-gray-400",
-										shouldHighlight && "border-l-4 border-l-blue-200 bg-blue-100 text-gray-600",
-									)}
-								>
-									{lineNumber}
-								</span>
-							);
-						})}
-					</div>
-				)}
-				<code className="block min-w-0 flex-1">
+	useEffect(() => {
+		setCopyText(trimmedCode);
+	}, [trimmedCode, setCopyText]);
+
+	return (
+		<pre
+			className={cx(
+				formatLanguageClassName(language),
+				"block h-full overflow-auto py-4 font-mono text-sm leading-normal",
+				className,
+			)}
+			data-lang={language}
+			data-line-numbers={showLineNumbers || undefined}
+			ref={ref}
+			style={style}
+		>
+			{/* TODO(cody): maybe retry this, but use grid instead? */}
+			{/* {showLineNumbers && (
+				<div aria-hidden className="pointer-events-none flex-shrink-0 select-none text-right">
 					{lines.map((line, index) => {
 						const lineNumber = index + 1;
 						const shouldHighlight = highlightLineNumberSet.has(lineNumber);
@@ -89,36 +89,63 @@ const CodeBlockContent = forwardRef<HTMLPreElement, CodeBlockContentProps>(
 						return (
 							<span
 								key={line + lineNumber}
-								data-line-number={lineNumber}
-								data-highlight={shouldHighlight || undefined}
-								className={cx("block px-4", shouldHighlight && "bg-blue-100")}
-								ref={ref}
-								style={style}
+								className={cx(
+									"block border-r px-2 text-gray-400",
+									shouldHighlight && "border-l-4 border-l-brand-primary-200 bg-brand-primary-100 ",
+								)}
 							>
-								{line === "" ? "\n" : line}
+								{lineNumber}
 							</span>
 						);
 					})}
-				</code>
-			</pre>
-		);
-	},
-);
+				</div>
+			)} */}
+			<code className="">
+				{lines.map((line, index) => {
+					const lineNumber = index + 1;
+					const shouldHighlight = highlightLineNumberSet.has(lineNumber);
+
+					return (
+						<span
+							key={line + lineNumber}
+							data-line-number={showLineNumbers ? lineNumber : undefined}
+							data-highlight={shouldHighlight || undefined}
+							className={cx(
+								"relative block whitespace-pre-wrap before:sticky before:left-0 before:inline-block before:border-brand-primary-200 before:bg-gray-50 before:text-right before:text-gray-400",
+								showLineNumbers ? "before:w-14 before:pr-4 before:content-[attr(data-line-number)]" : "px-4",
+								shouldHighlight && "bg-brand-primary-100 before:border-l-4 before:bg-brand-primary-100",
+							)}
+						>
+							{line === "" ? "\n" : line}
+						</span>
+					);
+				})}
+			</code>
+		</pre>
+	);
+});
 CodeBlockContent.displayName = "CodeBlockContent";
 
-const CodeBlockHeader = forwardRef<HTMLDivElement, PropsWithChildren & WithStyleProps>(
-	({ children, className, style }, ref) => (
-		<div
-			className={cx("border-bottom border-gray-300 bg-gray-100 px-4 py-2 font-mono text-base text-gray-700", className)}
-			ref={ref}
-			style={style}
-		>
-			{children}
-		</div>
-	),
-);
+const CodeBlockHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+	<div
+		className={cx(
+			"flex-shrink-0 border-b border-gray-200 bg-gray-100 px-4 py-2 font-mono text-base text-gray-700",
+			className,
+		)}
+		ref={ref}
+		{...props}
+	/>
+));
 CodeBlockHeader.displayName = "CodeBlockHeader";
 
+const CodeBlockTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & { asChild?: boolean }>(
+	({ asChild = false, className, ...props }, ref) => {
+		const Comp = asChild ? Slot : "h3";
+		return <Comp ref={ref} className={cx("font-mono text-[13px] font-normal leading-[22px]", className)} {...props} />;
+	},
+);
+CodeBlockTitle.displayName = "CodeBlockTitle";
+
 type CodeBlockCopyButtonProps = WithStyleProps & {
 	onCopy?: (value: string) => void;
 	onCopyError?: (error: unknown) => void;
@@ -126,21 +153,21 @@ type CodeBlockCopyButtonProps = WithStyleProps & {
 
 const CodeBlockCopyButton = forwardRef<HTMLButtonElement, CodeBlockCopyButtonProps>(
 	({ className, onCopy, onCopyError, style }, ref) => {
-		const ctx = useContext(CodeBlockCopyContext);
-		const [, setCopied] = useState(false);
+		const copyText = useContext(CodeBlockCopyContext);
+		const [, setCopied] = useState(false); // todo: useme
 
 		return (
 			<button
 				type="button"
-				className={cx("p-2", className)}
+				className={cx("absolute right-2 top-2 z-50 p-2", className)}
 				ref={ref}
 				style={style}
 				onClick={() => {
 					window.navigator.clipboard
-						.writeText(ctx)
+						.writeText(copyText)
 						.then(() => {
 							setCopied(true);
-							onCopy?.(ctx);
+							onCopy?.(copyText);
 							setTimeout(() => {
 								setCopied(false);
 							}, 1000);
@@ -157,7 +184,7 @@ const CodeBlockCopyButton = forwardRef<HTMLButtonElement, CodeBlockCopyButtonPro
 );
 CodeBlockCopyButton.displayName = "CodeBlockCopyButton";
 
-export { CodeBlock, CodeBlockBody, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader };
+export { CodeBlock, CodeBlockBody, CodeBlockContent, CodeBlockCopyButton, CodeBlockHeader, CodeBlockTitle };
 
 const CopyIcon = ({ className, style }: WithStyleProps) => (
 	<svg