diff --git a/sites/dev/package.json b/sites/dev/package.json
index f8562ffa0fc..5e8df29f08d 100644
--- a/sites/dev/package.json
+++ b/sites/dev/package.json
@@ -39,9 +39,7 @@
     "rehype-slug": "^5.0.1",
     "rehype-stringify": "^9.0.2",
     "remark-copy-linked-files": "https://github.com/joostdecock/remark-copy-linked-files",
-    "remark-gfm": "^3.0.1",
-    "roughjs": "^4.5.2",
-    "viz.js": "^2.1.2"
+    "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.0",
diff --git a/sites/shared/components/mdx/highlight.js b/sites/shared/components/mdx/highlight.js
index c805b5bdf4e..fbd99c92f26 100644
--- a/sites/shared/components/mdx/highlight.js
+++ b/sites/shared/components/mdx/highlight.js
@@ -1,5 +1,4 @@
 import CopyToClipboard from 'shared/components/copy-to-clipboard'
-//import Dot from './dot.js'
 
 const names = {
   js: 'javascript',
@@ -10,37 +9,34 @@ const names = {
 }
 
 const Highlight = (props) => {
-
   let language = 'txt'
   if (props.language) language = props.language
   if (props.children?.props?.className) {
     language = props.children.props.className.split('-').pop()
   }
-  //if (language === 'dot') return <Dot>{props.children}</Dot>
 
   const preProps = {
-    className: `language-${language} hljs text-base lg:text-lg whitespace-pre overflow-scroll pr-4`
+    className: `language-${language} hljs text-base lg:text-lg whitespace-pre overflow-scroll pr-4`,
   }
   if (props.raw) preProps.dangerouslySetInnerHTML = { __html: props.raw }
 
   return (
     <div className="hljs my-4">
-      <div className={`
+      <div
+        className={`
         flex flex-row justify-between
         text-xs uppercase font-bold text-neutral-content
         mt-1 border-b border-neutral-content border-opacity-25
         py-1 mb-2 lg:text-sm
-      `}>
+      `}
+      >
         <span>&nbsp;</span>
         <span>{names[language] ? names[language] : language}</span>
         <CopyToClipboard content={props.children} />
       </div>
-      <pre {...preProps}>
-        {props.children}
-      </pre>
+      <pre {...preProps}>{props.children}</pre>
     </div>
   )
 }
 
 export default Highlight
-
diff --git a/sites/shared/components/mdx/index.js b/sites/shared/components/mdx/index.js
index 0fc83ce5aee..822c604d79d 100644
--- a/sites/shared/components/mdx/index.js
+++ b/sites/shared/components/mdx/index.js
@@ -3,7 +3,6 @@ import Highlight from './highlight.js'
 import YouTube from './youtube.js'
 import Figure from './figure.js'
 import ReadMore from './read-more.js'
-//import Dot from './dot.js'
 import { Tab, Tabs } from './tabs.js'
 import Example from './example/index.js'
 
@@ -20,7 +19,6 @@ const mdxCustomComponents = (app = false) => ({
   YouTube,
   pre: (props) => <Highlight {...props} />,
   img: Figure,
-  //Dot,
   table: (props) => (
     <table {...props} className="mdx-table table-auto w-full">
       {props.children}