diff --git a/apps/dashboard/src/@/components/ui/inline-code.tsx b/apps/dashboard/src/@/components/ui/inline-code.tsx
index 1b61ec81317..1426ede4d7f 100644
--- a/apps/dashboard/src/@/components/ui/inline-code.tsx
+++ b/apps/dashboard/src/@/components/ui/inline-code.tsx
@@ -7,7 +7,7 @@ export function InlineCode({
   return (
     <code
       className={cn(
-        "inline-block rounded bg-muted px-2 font-mono text-sm",
+        "mx-0.5 inline rounded-lg border border-border px-1.5 py-[3px] font-mono text-[0.85em] text-foreground",
         className,
       )}
     >
diff --git a/apps/dashboard/src/components/contract-components/published-contract/index.tsx b/apps/dashboard/src/components/contract-components/published-contract/index.tsx
index 61510d9efbc..6986104184b 100644
--- a/apps/dashboard/src/components/contract-components/published-contract/index.tsx
+++ b/apps/dashboard/src/components/contract-components/published-contract/index.tsx
@@ -131,10 +131,8 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
               <Divider />
 
               <MarkdownRenderer
-                px={6}
-                pt={2}
-                pb={5}
                 markdownText={publishedContract?.changelog}
+                className="px-6 pt-2 pb-5"
               />
             </Card>
           )}
diff --git a/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.stories.tsx b/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.stories.tsx
new file mode 100644
index 00000000000..8dbf0e170ba
--- /dev/null
+++ b/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.stories.tsx
@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mobileViewport } from "../../../stories/utils";
+import { MarkdownRenderer } from "./markdown-renderer";
+
+const meta = {
+  title: "blocks/MarkdownRenderer",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const DisableCodeHighlight: Story = {
+  args: {
+    disableCodeHighlight: true,
+  },
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+const markdownExample = `\
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+
+This a paragraph
+
+This is another paragraph
+
+This a very long paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec pur us. Donec euismod, nunc nec vehicula.
+ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec pur us. Donec euismod, nunc nec vehicula.
+
+
+## Empasis
+
+*Italic text*
+_Also italic text_
+
+**Bold text**
+__Also bold text__
+
+***Bold and italic***
+___Also bold and italic___
+
+## Blockquote
+> This is a blockquote.
+
+## Lists
+
+### Unordered list
+- Item 1
+- Item 2
+  - Nested Item 1
+  - Nested Item 2
+
+### Ordered list
+1. First item
+2. Second item
+   1. Sub-item 1
+   2. Sub-item 2
+
+### Mixed Nested lists
+
+- Item 1
+- Item 2
+  1. Sub-item 1
+  2. Sub-item 2
+
+
+1. First item
+2. Second item
+   - Sub-item 1
+   - Sub-item 2
+
+### Code
+This a a paragraph with some \`inlineCode()\`
+
+This a \`const longerCodeSnippet = "Example. This should be able to handle line breaks as well, it should not be overflowing the page";\`
+
+\`\`\`javascript
+// Code block with syntax highlighting
+function example() {
+  console.log("Hello, world!");
+}
+\`\`\`
+
+### Links
+[thirdweb](https://www.thirdweb.com)
+
+### Images
+![Alt text](https://picsum.photos/2000/500)
+
+
+### Horizontal Rule
+
+
+
+---
+
+
+
+### Tables
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Row 1    | Data     | More Data|
+| Row 2    | Data     | More Data|
+
+
+| Column 1     | Column 2         | Column 3     | Column 4         | Column 5     |
+|--------------|------------------|--------------|------------------|--------------|
+| Row 1 Cell 1 | Row 1 Cell 2     | Row 1 Cell 3 | Row 1 Cell 4     | Row 1 Cell 5 |
+| Row 2 Cell 1 | Row 2 Cell 2     | Row 2 Cell 3 | Row 2 Cell 4     | Row 2 Cell 5 |
+| Row 3 Cell 1 | Row 3 Cell 2     | Row 3 Cell 3 | Row 3 Cell 4     | Row 3 Cell 5 |
+| Row 4 Cell 1 | Row 4 Cell 2     | Row 4 Cell 3 | Row 4 Cell 4     | Row 4 Cell 5 |
+| Row 5 Cell 1 | Row 5 Cell 2     | Row 5 Cell 3 | Row 5 Cell 4     | Row 5 Cell 5 |
+
+
+### Task List
+- [ ] Task 1
+- [x] Task 2 (completed)
+
+### Escaping special characters
+\\*This text is not italicized.\\*
+
+### Strikethrough
+~~This is strikethrough text.~~
+
+
+`;
+
+function Story(props: {
+  disableCodeHighlight?: boolean;
+}) {
+  return (
+    <div className="container max-w-[800px] py-10">
+      <MarkdownRenderer
+        markdownText={markdownExample}
+        disableCodeHighlight={props.disableCodeHighlight}
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx b/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx
index c66c792917a..88b6c3a47d0 100644
--- a/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx
+++ b/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx
@@ -1,217 +1,173 @@
 import { CodeClient } from "@/components/ui/code/code.client";
+import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
+import { InlineCode } from "@/components/ui/inline-code";
 import {
-  Box,
-  type BoxProps,
-  Link,
-  ListItem,
-  OrderedList,
   Table,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-  UnorderedList,
-  chakra,
-} from "@chakra-ui/react";
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
 import { onlyText } from "react-children-utilities";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { Heading, Text } from "tw-components";
 
-const ChakraReactMarkdown = chakra(ReactMarkdown);
-
-export const MarkdownRenderer: React.FC<
-  BoxProps & { markdownText: string }
-> = ({ markdownText, ...restProps }) => {
-  const commonHeadingProps = {
-    lineHeight: "1.25",
-    mb: 2,
-    pb: 2,
-  };
+export const MarkdownRenderer: React.FC<{
+  markdownText: string;
+  className?: string;
+  disableCodeHighlight?: boolean;
+}> = ({ markdownText, className, disableCodeHighlight }) => {
+  const commonHeadingClassName =
+    "mb-2 pb-2 leading-5 font-semibold tracking-tight";
 
   return (
-    <ChakraReactMarkdown
-      {...restProps}
-      remarkPlugins={[remarkGfm]}
-      components={{
-        h1: (props) => (
-          <Heading
-            as="h2"
-            size="title.lg"
-            borderBottom="1px solid"
-            borderBottomColor="borderColor"
-            {...commonHeadingProps}
-            mb={4}
-            {...cleanedProps(props)}
-          />
-        ),
-
-        h2: (props) => (
-          <Heading
-            as="h3"
-            size="title.md"
-            borderBottom="1px solid"
-            borderBottomColor="borderColor"
-            {...commonHeadingProps}
-            mt={8}
-            mb={4}
-            {...cleanedProps(props)}
-          />
-        ),
+    <div className={className}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          h1: (props) => (
+            <h2
+              className={cn(
+                commonHeadingClassName,
+                "mb-4 border-border border-b text-3xl",
+              )}
+              {...cleanedProps(props)}
+            />
+          ),
 
-        h3: (props) => (
-          <Heading
-            as="h4"
-            size="title.sm"
-            {...commonHeadingProps}
-            {...cleanedProps(props)}
-            mt={4}
-          />
-        ),
+          h2: (props) => (
+            <h3
+              {...cleanedProps(props)}
+              className={cn(
+                commonHeadingClassName,
+                "mt-8 mb-4 border-border border-b text-2xl",
+              )}
+            />
+          ),
 
-        h4: (props) => (
-          <Heading
-            as="h5"
-            size="subtitle.md"
-            {...commonHeadingProps}
-            {...cleanedProps(props)}
-            mt={4}
-          />
-        ),
+          h3: (props) => (
+            <h4
+              {...cleanedProps(props)}
+              className={cn(commonHeadingClassName, "mt-4 text-xl")}
+            />
+          ),
 
-        h5: (props) => (
-          <Heading
-            as="h6"
-            size="subtitle.sm"
-            {...commonHeadingProps}
-            {...cleanedProps(props)}
-            mt={4}
-          />
-        ),
+          h4: (props) => (
+            <h5
+              {...cleanedProps(props)}
+              className={cn(commonHeadingClassName, "mt-4 text-lg")}
+            />
+          ),
 
-        h6: (props) => (
-          <Heading
-            as="p"
-            size="label.md"
-            {...commonHeadingProps}
-            {...cleanedProps(props)}
-            mt={4}
-          />
-        ),
+          h5: (props) => (
+            <h6
+              {...cleanedProps(props)}
+              className={cn(commonHeadingClassName, "mt-4 text-lg")}
+            />
+          ),
 
-        a: (props) => (
-          <Link
-            _dark={{
-              color: "blue.400",
-              _hover: {
-                color: "blue.500",
-              },
-            }}
-            _light={{
-              color: "blue.500",
-              _hover: {
-                color: "blue.500",
-              },
-            }}
-            isExternal
-            {...cleanedProps(props)}
-            mt={4}
-          />
-        ),
+          h6: (props) => (
+            <p
+              {...cleanedProps(props)}
+              className={cn(commonHeadingClassName, "mt-4 text-lg")}
+            />
+          ),
 
-        code: ({ ...props }) => {
-          if (props?.className) {
-            const language = props.className.replace("language-", "");
+          a: (props) => (
+            <Link
+              href={props.href}
+              target="_blank"
+              {...cleanedProps(props)}
+              className="mt-4 text-link-foreground hover:text-foreground"
+            />
+          ),
+
+          code: ({ ...props }) => {
+            if (props?.className) {
+              if (disableCodeHighlight) {
+                return (
+                  <PlainTextCodeBlock
+                    {...cleanedProps(props)}
+                    code={onlyText(props.children).trim()}
+                  />
+                );
+              }
+              const language = props.className.replace("language-", "");
+              return (
+                <div className="mb-4">
+                  <CodeClient
+                    lang={language}
+                    {...cleanedProps(props)}
+                    code={onlyText(props.children).trim()}
+                  />
+                </div>
+              );
+            }
+
+            return <InlineCode code={onlyText(props.children).trim()} />;
+          },
+
+          p: (props) => (
+            <p
+              className="mb-4 text-muted-foreground leading-relaxed"
+              {...cleanedProps(props)}
+            />
+          ),
+
+          table: (props) => (
+            <div className="mb-6">
+              <TableContainer>
+                <Table {...cleanedProps(props)} />
+              </TableContainer>
+            </div>
+          ),
+
+          th: ({ children: c, ...props }) => (
+            <TableHead
+              {...cleanedProps(props)}
+              className="text-left text-muted-foreground"
+            >
+              {c}
+            </TableHead>
+          ),
+
+          td: (props) => (
+            <TableCell {...cleanedProps(props)} className="text-left" />
+          ),
+          thead: (props) => <TableHeader {...cleanedProps(props)} />,
+          tbody: (props) => <TableBody {...cleanedProps(props)} />,
+          tr: (props) => <TableRow {...cleanedProps(props)} />,
+          ul: (props) => {
             return (
-              <div className="mb-4">
-                <CodeClient
-                  code={onlyText(props.children).trim()}
-                  lang={language}
-                  {...cleanedProps(props)}
-                />
-              </div>
+              <ul
+                className="mb-6 list-outside list-disc pl-5 [&_ol_li:first-of-type]:mt-1.5 [&_ul_li:first-of-type]:mt-1.5"
+                {...cleanedProps(props)}
+              />
             );
-          }
-
-          return (
-            <Text
-              as="code"
-              whiteSpace="break-spaces"
-              px={1}
-              py={0.5}
-              bg="blackAlpha.100"
-              _dark={{ bg: "whiteAlpha.100" }}
-              borderRadius="md"
-              fontFamily="mono"
+          },
+          ol: (props) => (
+            <ol
+              className="mb-6 list-outside list-decimal pl-5 [&_ol_li:first-of-type]:mt-1.5 [&_ul_li:first-of-type]:mt-1.5"
               {...cleanedProps(props)}
             />
-          );
-        },
-
-        p: (props) => (
-          <Text
-            size="body.md"
-            mb={4}
-            {...cleanedProps(props)}
-            lineHeight={1.5}
-          />
-        ),
-
-        table: (props) => (
-          <Box
-            maxW="100%"
-            overflowX="auto"
-            position="relative"
-            px={0}
-            py={0}
-            mb={4}
-            borderTopRadius="lg"
-          >
-            <Table {...cleanedProps(props)} />
-          </Box>
-        ),
-
-        th: ({ children: c, ...props }) => (
-          <Th {...cleanedProps(props)} textAlign="left" border="none">
-            <Text as="span" size="label.sm" color="faded">
+          ),
+          li: ({ children: c, ...props }) => (
+            <li
+              className="mb-1.5 text-muted-foreground"
+              {...cleanedProps(props)}
+            >
               {c}
-            </Text>
-          </Th>
-        ),
-
-        td: (props) => (
-          <Td
-            {...cleanedProps(props)}
-            borderColor="borderColor"
-            textAlign="left"
-            borderBottomWidth="inherit"
-          />
-        ),
-        thead: (props) => <Thead {...cleanedProps(props)} />,
-        tbody: (props) => <Tbody {...cleanedProps(props)} />,
-        tr: (props) => (
-          <Tr
-            {...cleanedProps(props)}
-            transition="all 0.1s"
-            borderBottomWidth={1}
-            _last={{ borderBottomWidth: 0 }}
-          />
-        ),
-        ul: (props) => {
-          return <UnorderedList {...cleanedProps(props)} mb={4} />;
-        },
-        ol: (props) => <OrderedList {...cleanedProps(props)} mb={4} />,
-        li: ({ children: c, ...props }) => (
-          <ListItem {...cleanedProps(props)}>
-            {/* hydration error - can not render p > p, so use span instead - remove extra span when we move to tailwind */}
-            <Text as="span">{c}</Text>
-          </ListItem>
-        ),
-      }}
-    >
-      {markdownText}
-    </ChakraReactMarkdown>
+            </li>
+          ),
+        }}
+      >
+        {markdownText}
+      </ReactMarkdown>
+    </div>
   );
 };