diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 442defafc..4ffd120f8 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -334,26 +334,16 @@ export const DocsNav = ({
   }, [router.asPath]);
 
   const { resolvedTheme } = useTheme();
-  const [learn_icon, setLearn_icon] = useState('');
-  const [reference_icon, setReference_icon] = useState('');
-  const [spec_icon, setSpec_icon] = useState('');
-  const [overview_icon, setOverview_icon] = useState('');
-  const [guides_icon, setGuides_icon] = useState('');
+  const [mounted, setMounted] = useState(false);
   useEffect(() => {
-    if (resolvedTheme === 'dark') {
-      setOverview_icon('/icons/eye-dark.svg');
-      setLearn_icon('/icons/compass-dark.svg');
-      setReference_icon('/icons/book-dark.svg');
-      setSpec_icon('/icons/clipboard-dark.svg');
-      setGuides_icon('/icons/grad-cap-dark.svg');
-    } else {
-      setOverview_icon('/icons/eye.svg');
-      setLearn_icon('/icons/compass.svg');
-      setReference_icon('/icons/book.svg');
-      setSpec_icon('/icons/clipboard.svg');
-      setGuides_icon('/icons/grad-cap.svg');
-    }
-  }, [resolvedTheme]);
+    setMounted(true);
+  }, []);
+
+  const overview_icon = mounted && resolvedTheme === 'dark' ? '/icons/eye-dark.svg' : '/icons/eye.svg';
+  const learn_icon = mounted && resolvedTheme === 'dark' ? '/icons/compass-dark.svg' : '/icons/compass.svg';
+  const reference_icon = mounted && resolvedTheme === 'dark' ? '/icons/book-dark.svg' : '/icons/book.svg';
+  const spec_icon = mounted && resolvedTheme === 'dark' ? '/icons/clipboard-dark.svg' : '/icons/clipboard.svg';
+  const guides_icon = mounted && resolvedTheme === 'dark' ? '/icons/grad-cap-dark.svg' : '/icons/grad-cap.svg';
 
   return (
     <div id='sidebar' className='lg:mt-8 w-4/5 mx-auto lg:ml-4'>
diff --git a/components/StyledMarkdownBlock.tsx b/components/StyledMarkdownBlock.tsx
index eacebbf08..3b8e58c6e 100644
--- a/components/StyledMarkdownBlock.tsx
+++ b/components/StyledMarkdownBlock.tsx
@@ -381,7 +381,7 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
                 );
               },
             },
-            tableofcontent: {
+            TableOfContents: {
               component: ({ depth }) => {
                 return <TableOfContent depth={depth} />;
               },
diff --git a/pages/index.page.tsx b/pages/index.page.tsx
index 6761137ab..4f77bc291 100644
--- a/pages/index.page.tsx
+++ b/pages/index.page.tsx
@@ -408,11 +408,10 @@ const Home = (props: any) => {
                   projects, and connect with +5000 practitioners and experts.
                 </p>
               </Link>
-              <button className='w-full lg:w-1/2 rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'>
-                <a
-                  href='https://json-schema.org/slack'
-                  className='flex items-center '
-                >
+              <a
+                href='https://json-schema.org/slack'
+                className='w-full lg:w-1/2 rounded border-2 bg-primary hover:bg-blue-700 transition-all duration-300 ease-in-out text-white h-[40px] flex items-center justify-center mx-auto dark:border-none'
+              >
                   {isClient && (
                     <>
                       <Image
@@ -425,8 +424,7 @@ const Home = (props: any) => {
                     </>
                   )}
                   Join Slack
-                </a>
-              </button>
+              </a>
             </div>
             {/* BlogPost Data */}
             <div className='p-4 w-full mb-6 dark:shadow-2xl'>
@@ -862,8 +860,7 @@ const Home = (props: any) => {
                 <img
                   src={logos.apideck}
                   className='w-44 transition-transform duration-300 hover:scale-105'
-                  alt='The Realtime Unified API
-for Accounting integrations'
+                  alt='The Realtime Unified API for Accounting integrations'
                 />
               </a>
               <a
diff --git a/pages/learn/getting-started-step-by-step/getting-started-step-by-step.md b/pages/learn/getting-started-step-by-step/getting-started-step-by-step.md
index 78ca3e695..4e143a9f5 100644
--- a/pages/learn/getting-started-step-by-step/getting-started-step-by-step.md
+++ b/pages/learn/getting-started-step-by-step/getting-started-step-by-step.md
@@ -15,7 +15,7 @@ After creating your JSON Schema, you can then validate example data against your
 
 If you already know how to create JSON Schemas and you are looking for different JSON Schema use cases like schema generation, code generation, documentation, UI generation or JSON Schema processing or conversion, please visit [Tools](https://json-schema.org/tools) and explore the amazing tooling available in the JSON Schema Ecosystem.
 
-<tableofcontent depth={2} />
+<TableOfContents depth={2} />
 
 <span id="overview"></span>
 
diff --git a/pages/md-style-guide.md b/pages/md-style-guide.md
index 89dc4bddf..076256a3c 100644
--- a/pages/md-style-guide.md
+++ b/pages/md-style-guide.md
@@ -62,7 +62,7 @@ Use the following tags to give readers relevant information that is not part of
 To help readers find the information they are looking for within the document, add a table of contents at the beginning. 
 
 ```markdown
-<tableofcontent content= {content} depth= {depth}/>
+<TableOfContents content= {content} depth= {depth}/>
 ```
 
 ### Blockquote
diff --git a/pages/specification-links.md b/pages/specification-links.md
index d6ececa5b..eea6a99e4 100644
--- a/pages/specification-links.md
+++ b/pages/specification-links.md
@@ -13,7 +13,7 @@ next:
 
 You can find the latest released draft on the [Specification](../../specification) page.  The complex numbering and naming system for drafts and meta-schemas is fully explained here as well.
 
-<tableofcontent depth={4} />
+<TableOfContents depth={4} />
 
 ## Understanding draft names and numbers