diff --git a/app/client/packages/design-system/widgets/src/components/CodeBlock/index.ts b/app/client/packages/design-system/widgets/src/components/CodeBlock/index.ts
new file mode 100644
index 0000000000..e910bb060c
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/CodeBlock/index.ts
@@ -0,0 +1 @@
+export * from "./src/index";
diff --git a/app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx b/app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx
new file mode 100644
index 0000000000..951e6d9e26
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/CodeBlock/src/CodeBlock.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import type { SyntaxHighlighterProps } from "react-syntax-highlighter";
+import {
+  atomOneDark as darkTheme,
+  lightfair as lightTheme,
+} from "react-syntax-highlighter/dist/cjs/styles/hljs";
+import { getTypographyClassName, useThemeContext } from "@appsmith/wds-theming";
+
+export const CodeBlock = (props: SyntaxHighlighterProps) => {
+  const theme = useThemeContext();
+
+  return (
+    <SyntaxHighlighter
+      className={getTypographyClassName("caption")}
+      {...props}
+      style={theme.colorMode === "dark" ? darkTheme : lightTheme}
+      useInlineStyles
+    >
+      {props.children}
+    </SyntaxHighlighter>
+  );
+};
diff --git a/app/client/packages/design-system/widgets/src/components/CodeBlock/src/index.ts b/app/client/packages/design-system/widgets/src/components/CodeBlock/src/index.ts
new file mode 100644
index 0000000000..ca111193d8
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/CodeBlock/src/index.ts
@@ -0,0 +1 @@
+export * from "./CodeBlock";
diff --git a/app/client/packages/design-system/widgets/src/components/CodeBlock/stories/CodeBlock.stories.tsx b/app/client/packages/design-system/widgets/src/components/CodeBlock/stories/CodeBlock.stories.tsx
new file mode 100644
index 0000000000..3aa0343d1f
--- /dev/null
+++ b/app/client/packages/design-system/widgets/src/components/CodeBlock/stories/CodeBlock.stories.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeBlock } from "@appsmith/wds";
+
+/**
+ * CodeBlock is a component that displays a code block.
+ */
+const meta: Meta<typeof CodeBlock> = {
+  component: CodeBlock,
+  title: "WDS/Widgets/Code Block",
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeBlock>;
+
+export const Main: Story = {
+  args: {
+    code: "{ test: 123 }",
+    language: "json",
+  },
+};
+
+/**
+ * The code block can render any code and will format based on the language
+ *
+ */
+export const Sizes: Story = {
+  render: (props) => (
+    <CodeBlock language={props.language} {...props}>
+      {props.code}
+    </CodeBlock>
+  ),
+};
diff --git a/app/client/packages/design-system/widgets/src/index.ts b/app/client/packages/design-system/widgets/src/index.ts
index 0c5c63f8d1..1610a8c782 100644
--- a/app/client/packages/design-system/widgets/src/index.ts
+++ b/app/client/packages/design-system/widgets/src/index.ts
@@ -36,6 +36,7 @@ export * from "./components/Calendar";
 export * from "./components/Datepicker";
 export * from "./components/TimeField";
 export * from "./components/MultiSelect";
+export * from "./components/CodeBlock";
 
 export * from "./utils";
 export * from "./hooks";