diff --git a/.continue/rules/migrate-styled-components-to-tailwind.md b/.continue/rules/migrate-styled-components-to-tailwind.md
new file mode 100644
index 000000000..bccb56d32
--- /dev/null
+++ b/.continue/rules/migrate-styled-components-to-tailwind.md
@@ -0,0 +1,5 @@
+---
+alwaysApply: false
+---
+
+Convert all of the styled components in this file into tailwind CSS. If a variable is used that is not already in @theme.ts and @tailwind.config.cjs, then you should figure out where it comes from and try adding that so it can be used. Wherever a function is called to interpolate a value, you can just use inline `styles={{ ... }}`
diff --git a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx
index f5737c78e..8ece216bb 100644
--- a/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx
+++ b/gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.tsx
@@ -1,12 +1,6 @@
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import { inferResolvedUriFromRelativePath } from "core/util/ideUtils";
 import { useContext, useEffect, useMemo, useState } from "react";
-import styled from "styled-components";
-import {
-  defaultBorderRadius,
-  vscCommandCenterInactiveBorder,
-  vscEditorBackground,
-} from "../..";
 import { IdeMessengerContext } from "../../../context/IdeMessenger";
 import { useIdeMessengerRequest } from "../../../hooks/useIdeMessengerRequest";
 import { useWebviewListener } from "../../../hooks/useWebviewListener";
@@ -25,29 +19,6 @@ import { FileInfo } from "./FileInfo";
 import { InsertButton } from "./InsertButton";
 import { RunInTerminalButton } from "./RunInTerminalButton";
 
-const TopDiv = styled.div`
-  display: flex;
-  flex-direction: column;
-  outline: 1px solid ${vscCommandCenterInactiveBorder};
-  outline-offset: -0.5px;
-  border-radius: ${defaultBorderRadius};
-  margin-bottom: 8px !important;
-  margin-top: 8px !important;
-  background-color: ${vscEditorBackground};
-  min-width: 0;
-`;
-
-const ToolbarDiv = styled.div<{ isExpanded: boolean }>`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: ${getFontSize() - 2}px;
-  padding: 4px 6px;
-  margin: 0;
-  border-bottom: ${({ isExpanded }) =>
-    isExpanded ? `1px solid ${vscCommandCenterInactiveBorder}` : "inherit"};
-`;
-
 export interface StepContainerPreToolbarProps {
   codeBlockContent: string;
   language: string | null;
@@ -290,9 +261,12 @@ export function StepContainerPreToolbar({
   }
 
   return (
-    <TopDiv>
-      <ToolbarDiv isExpanded={isExpanded} className="find-widget-skip gap-3">
-        <div className="max-w-[50% flex flex-row items-center">
+    <div className="outline-command-border -outline-offset-0.5 rounded-default bg-editor mb-2 mt-2 flex min-w-0 flex-col outline outline-1">
+      <div
+        className={`find-widget-skip m-0 flex items-center justify-between gap-3 px-1.5 py-1 ${isExpanded ? "border-command-border border-b" : ""}`}
+        style={{ fontSize: `${getFontSize() - 2}px` }}
+      >
+        <div className="flex max-w-[50%] flex-row items-center">
           <ChevronDownIcon
             data-testid="toggle-codeblock"
             onClick={() => setIsExpanded(!isExpanded)}
@@ -323,11 +297,11 @@ export function StepContainerPreToolbar({
 
           {renderActionButtons()}
         </div>
-      </ToolbarDiv>
+      </div>
 
       {isExpanded && (
         <div className="overflow-hidden overflow-y-auto">{children}</div>
       )}
-    </TopDiv>
+    </div>
   );
 }
diff --git a/gui/tailwind.config.cjs b/gui/tailwind.config.cjs
index ed91cee11..1e70345f2 100644
--- a/gui/tailwind.config.cjs
+++ b/gui/tailwind.config.cjs
@@ -29,6 +29,9 @@ module.exports = {
       borderRadius: {
         default: "5px",
       },
+      outlineOffset: {
+        0.5: "0.5px",
+      },
       colors: {
         background: varWithFallback("background"),
         foreground: varWithFallback("foreground"),