`, + `
`, `
`,
diff --git a/src/components/Button.js b/src/components/Button.js
index ff9dec8e..7291fcda 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -3,7 +3,7 @@ import Link from 'next/link'
 export function Button({ children, ...props }) {
   return (
     
-      
+      
         {children}
         
+      
         
           Default class reference
         
          12 }
           )}
         >
           {custom || (
-            
+            
-                  
                   {preview && (
-                    
@@ -176,7 +176,7 @@ export const ClassTable = memo(
                       
               
                 
-                    Class
+                  
+                    Class
                   
                   
                     
                       Properties
                     
                   
-                      
+                    
+                      
                         Preview 
                       
                     
                       
                         {stringifyProperties(transformProperties({ selector, properties }), {
                           filter: filterProperties,
diff --git a/src/components/CodeSample.js b/src/components/CodeSample.js
index 7cda6db0..ae280dd4 100644
--- a/src/components/CodeSample.js
+++ b/src/components/CodeSample.js
@@ -73,7 +73,7 @@ function Snippet({ color, snippet }) {
     >
       +    
       {preview ? (
         
         
           
             
               
-      
-        
+      
+        
           
-            
-            
-            
+            
+            
+            
           
         
-        
+        
           {lineNumbersBackground && (
             
           )}
@@ -71,17 +71,17 @@ CodeWindow.Code = forwardRef(({ tokens = defaultTokens, initialLineNumber = 1, .
   }, [tokens])
 
   return (
-    
-      
+    
+      
                    
             {lineNumbers}
           
-          
+          
             
           
         

@@ -103,15 +103,15 @@ CodeWindow.Code2 = forwardRef(
     return (
       
-        
+        
                        
               {Array.from({ length: lines }).map((_, i) =>
@@ -126,7 +126,7 @@ CodeWindow.Code2 = forwardRef(
               )}
             
             
diff --git a/src/components/Community.js b/src/components/Community.js
index b3054373..b2eb9326 100644
--- a/src/components/Community.js
+++ b/src/components/Community.js
@@ -1,12 +1,12 @@
 export function Community() {
   return (
-    
-      
+    
+      
         
-          
       
-      
+      

         
-          
       
-      
+      

         
-          
+        
         
       
       {header && (
-        
+        
           {header}
         
       )}
       {left && right ? (
         <>
           
             {left}
           
-          
+          
             {right}
           
         
       ) : (
-        
+        
           {left || right}
         
       )}
diff --git a/src/components/Header.js b/src/components/Header.js
index a67e48c0..e4999531 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -6,38 +6,36 @@ import Router from 'next/router'
 import ThemeChanger from './ThemeChanger'
 import MenuButton from './home/Menu'
 
-
 export function Header({ navIsOpen, onNavToggle }) {
   return (
     <>
-      
-        
+      
+        
           
              {
                 e.preventDefault()
                 Router.push('/brand')
               }}
             >
               Javaistic home page
-              
+              
             
           
         

-        
+        
           
-          
+          
             
             
 
-
             
               Javaistic on GitHub
-              Open site navigation
@@ -58,9 +56,9 @@ export function Header({ navIsOpen, onNavToggle }) {
           height="24"
           fill="none"
           className={clsx(
-            'absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform',
+            'absolute top-1/2 left-1/2 -mt-3 -ml-3 transform transition duration-300',
             {
-              'opacity-0 scale-80': navIsOpen,
+              'scale-80 opacity-0': navIsOpen,
             }
           )}
         >
@@ -77,9 +75,9 @@ export function Header({ navIsOpen, onNavToggle }) {
           height="24"
           fill="none"
           className={clsx(
-            'absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform',
+            'absolute top-1/2 left-1/2 -mt-3 -ml-3 transform transition duration-300',
             {
-              'opacity-0 scale-80': !navIsOpen,
+              'scale-80 opacity-0': !navIsOpen,
             }
           )}
         >
diff --git a/src/components/Heading.js b/src/components/Heading.js
index 6d165895..f3f4c2a9 100644
--- a/src/components/Heading.js
+++ b/src/components/Heading.js
@@ -42,19 +42,19 @@ export function Heading({
         // eslint-disable-next-line
         
       )}
       {number && (
-        
+        
           {number}
         
       )}
       {children}
       {badge && (
-        
+        
           {badge}
         
       )}
diff --git a/src/components/IntegrationGuides.js b/src/components/IntegrationGuides.js
index 433ec959..d7e2b4e8 100644
--- a/src/components/IntegrationGuides.js
+++ b/src/components/IntegrationGuides.js
@@ -11,14 +11,14 @@ const guides = [
 
 export function IntegrationGuides() {
   return (
-    
+    
       {guides.map((guide) => {
         const Logo = guide.logo
         return (
           
-            
+            
               
-              {guide.name}
+              {guide.name}
             
           
         )
diff --git a/src/components/List.js b/src/components/List.js
index e3472eee..d4f9b077 100644
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -1,11 +1,11 @@
 export function List({ children }) {
-  return {children}
+  return {children}
 }
 
 export function ListItemGood({ children }) {
   return (
     

-      

-      
+      
         
           
         
-        Want product news and updates?
-        Subscribe to our newsletter.
+        
+          Want product news and updates?
+        
+        
+          Subscribe to our newsletter.
+        
       
-      
+      
         
-          
-            
+          
+            
               Email address
-              
+              
             
-            
-              First name (Optional)
-              
+            
+              
+                First name (Optional)
+              
+              
             
-            
-              Last name (Optional)
-              
+            
+              
+                Last name (Optional)
+              
+              
             
-            
-              
+            
+              
+            
+            
+              By subscribing, you agree with Revue’s{' '}
+              
+                Terms of Service
+              {' '}
+              and{' '}
+              
+                Privacy Policy
+              
+              .
             
-            By subscribing, you agree with Revue’s Terms of Service and Privacy Policy.
           
         
       
diff --git a/src/components/PageHeader.js b/src/components/PageHeader.js
index ca56f671..66b2ecc4 100644
--- a/src/components/PageHeader.js
+++ b/src/components/PageHeader.js
@@ -4,13 +4,15 @@ export function PageHeader({ title, description, badge = {}, border = true }) {
   if (!title && !description) return null
 
   return (
-    
+    
       
-        
+        

           {title}
         
         {badge.key && badge.value && (
-          
+          
             {badge.key}
             {badge.value}
           
diff --git a/src/components/Search.js b/src/components/Search.js
index 583a3802..3ebd713e 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -68,13 +68,13 @@ export function Search() {
         type="button"
         ref={searchButtonRef}
         onClick={onOpen}
-        className="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 text-gray-500 bg-gray-100 hover:text-gray-600 dark:bg-gray-800 dark:text-gray-400 transition ease-in-out duration-200 w-full py-1.5 px-1.5 sm:px-4 lg:px-4 rounded-md border-2 border-gray-200 dark:border-gray-600"
+        className="group flex w-full items-center space-x-3 rounded-md border-2 border-gray-200 bg-gray-100 py-1.5 px-1.5 font-medium leading-6 text-gray-500 transition duration-200 ease-in-out hover:text-gray-600 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 sm:space-x-4 sm:px-4 lg:px-4"
       >
         
         
-          SearchQuick search for anything
+          Search
+          Quick search for anything
         
         
           Press 
           
diff --git a/src/components/Testimonials.js b/src/components/Testimonials.js
index 36ff3cdf..c98b7745 100644
--- a/src/components/Testimonials.js
+++ b/src/components/Testimonials.js
@@ -20,8 +20,7 @@ const rotation = [-2, 1, -1, 2, -1, 1]
 
 const testimonials = [
   {
-    content:
-      'Talk is cheap. Show me the code.',
+    content: 'Talk is cheap. Show me the code.',
     author: {
       name: 'Linus Trovalds',
       role: 'Creator of Linux',
@@ -29,7 +28,8 @@ const testimonials = [
     },
   },
   {
-    content: 'The people who are crazy enough to think they can change the world are the ones who do.',
+    content:
+      'The people who are crazy enough to think they can change the world are the ones who do.',
     author: {
       name: 'Steve Jobs',
       role: 'Founder @ Apple Inc.',
@@ -61,8 +61,7 @@ const testimonials = [
     },
   },
   {
-    content:
-      'Truth can only be found in one place: the code.',
+    content: 'Truth can only be found in one place: the code.',
     author: {
       name: `Robert C. Martin`,
       role: 'Clean Code: A Handbook of Agile Software Craftsmanship',
@@ -99,34 +98,34 @@ function Testimonial({ testimonial, base, index, total }) {
 
   return (
      setStraight(true)}
       onMouseLeave={() => setStraight(false)}
       style={{ x }}
     >
       
-        
+        
           
           {typeof testimonial.content === 'string' ? (
-            {testimonial.content}
+            {testimonial.content}
           ) : (
             testimonial.content
           )}
         
         
-          
+          
             
               
                 Original tweet by {testimonial.author.name}
                 
-      
-        
+      
+        
           {testimonials.map((testimonial, i) => (
              {
-        setMounted(true);
-    }, []);
+  const { systemTheme, theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
 
-    const renderThemeChanger = () => {
+  useEffect(() => {
+    setMounted(true)
+  }, [])
 
-        if (!mounted) return null;
+  const renderThemeChanger = () => {
+    if (!mounted) return null
 
-        const currentTheme = theme === 'system' ? systemTheme : theme;
-        if (currentTheme === 'light') {
-            return ( setTheme('dark')}
-            />
-            );
-        }
-        else {
-            return ( setTheme('light')}
-            />
-            );
-        }
+    const currentTheme = theme === 'system' ? systemTheme : theme
+    if (currentTheme === 'light') {
+      return (
+         setTheme('dark')}
+        />
+      )
+    } else {
+      return (
+         setTheme('light')}
+        />
+      )
     }
+  }
 
-    return (
-        
-            {renderThemeChanger()}
-        
-    );
-}
\ No newline at end of file
+  return (
+    
+      {renderThemeChanger()}
+    
+  )
+}
diff --git a/src/components/Tip.js b/src/components/Tip.js
index 75948c7a..6831b8b7 100644
--- a/src/components/Tip.js
+++ b/src/components/Tip.js
@@ -1,30 +1,30 @@
 export function TipGood({ children }) {
   return (
-    
-      

+      
-      {children}
+      {children}
     
   )
 }
 
 export function TipBad({ children }) {
   return (
-    
-      

+      
-      {children}
+      {children}
     
   )
 }
 
 export function TipCompat({ children }) {
   return (
-    
+    
       
         
       
         
 
-        {children}
+        {children}
       
     
   )
diff --git a/src/components/home/Footer.js b/src/components/home/Footer.js
index f52ee7a6..495517ad 100644
--- a/src/components/home/Footer.js
+++ b/src/components/home/Footer.js
@@ -12,7 +12,7 @@ const GitHub = () => (
     strokeLinecap="round"
     strokeLinejoin="round"
     strokeWidth="2"
-    className="w-8 h-8 p-1 lg:p-0 sm:p-1"
+    className="h-8 w-8 p-1 sm:p-1 lg:p-0"
     viewBox="0 0 35 35"
   >
     
@@ -25,7 +25,7 @@ const Twitter = () => (
     strokeLinecap="round"
     strokeLinejoin="round"
     strokeWidth="2"
-    className="w-8 h-8 p-1 lg:p-0 sm:p-1"
+    className="h-8 w-8 p-1 sm:p-1 lg:p-0"
     viewBox="0 0 24 24"
   >
     
@@ -72,21 +72,21 @@ const footerNav = {
 
 export function Footer() {
   return (
-    
-      
+    
+      
         
           {Object.keys(footerNav).map((section, i) => (
             
-              
+              

                 {section}
               
               
                 {footerNav[section].items.map((item) => (
                   
                     
-                      
+                      
                         {item.title}
                       
                     
@@ -96,38 +96,44 @@ export function Footer() {
             
           ))}
         
-        
-          
-            
+        
+          
+            
           
-          
+          
             
               
-                
-                  by @uiuxarghya
+                

+                  by 
+                  
+                    @uiuxarghya
+                  
                 
               
             
           
-          
+          
             
               
-                
+                

                   Powered by
-                  
+                  
                 
               
             
           
 
-          
+          
             
               
             
@@ -139,25 +145,33 @@ export function Footer() {
             
           
         
-        
-          
+        
+          
             
               © {new Date().getFullYear()} Javaistic. All rights reserved.
             
           
-          
+          
             Privacy Policy
           
-          
+          
             Terms & Conditions
           
           
-            Status
+            
+              Status
+            
           
-          
+          
         
       
     
diff --git a/src/components/home/Hero.js b/src/components/home/Hero.js
index 34f1719b..5fd1ea22 100644
--- a/src/components/home/Hero.js
+++ b/src/components/home/Hero.js
@@ -7,10 +7,7 @@ import colors from 'tailwindcss/colors'
 import { tokenizeWithLines } from '../../macros/tokenize.macro'
 import styles from './EditorTools.module.css'
 
-const outputs = [
-  ["Element to Search : 3"],
-  ["Element found at index : 1"],
-]
+const outputs = [['Element to Search : 3'], ['Element found at index : 1']]
 
 const { lines } = tokenizeWithLines.java(`class BinarySearch {
 	int binarySearch(int arr[], int l, int r, int x)
@@ -65,7 +62,7 @@ function CompletionDemo() {
                           
                             {space}
                             
                             {c}
@@ -92,7 +89,6 @@ function CompletionDemo() {
   )
 }
 
-
 export function Hero() {
   return (
     
@@ -101,8 +97,8 @@ export function Hero() {
         rotate={2}
         left={
           
-            
-              
+            
+              
                 
               
-              
+              
                 
-                
-                  Output
+                
+                  Output
                   
                     {outputs.map((output, i) => (
                       
-                        {output[0]}
-                         {output[1]}
+                        {output[0]}
+                         {output[1]}
                       
                     ))}
                   
diff --git a/src/components/home/Menu.js b/src/components/home/Menu.js
index d6a5e801..5b0ff527 100644
--- a/src/components/home/Menu.js
+++ b/src/components/home/Menu.js
@@ -4,128 +4,142 @@ import { Fragment } from 'react'
 import Link from 'next/link'
 
 function classNames(...classes) {
-    return classes.filter(Boolean).join(' ')
+  return classes.filter(Boolean).join(' ')
 }
 
 export default function MenuButton() {
-    return (
-        
-            
-                
-                    Menu
-                    
-                    
-                
-            
-
-            
-                
-                    
-                        
-                            {({ active }) => (
-                                
-                                    
-                                        Documentation
-                                    
-                                
-                            )}
-                        
-                        
-                            {({ active }) => (
-                                
-                                    
-                                        About
-                                    
-                                
-                            )}
-                        
-                        
-                            {({ active }) => (
-                                
-                                    
-                                        Sponsors
-                                    
-                                
-                            )}
-                        
-                        
-                            {({ active }) => (
-                                
-                                    
-                                        License
-                                    
-                                
-                            )}
-                        
-                        
-                            {({ active }) => (
-                                
-                                    
-                                        Change Log
-                                    
-                                
-                            )}
-                        
-                        
-                            {({ active }) => (
-                                
-                                    
-                                        
-                                            Javaistic on GitHub
-                                            
-                                            GitHub
-                                        
-                                    
-                                
-                            )}
-                        
+  return (
+    
+      
+        
+          Menu
+          
+          
+        
+      
 
+      
+        
+          
+            
+              {({ active }) => (
+                
+                  
+                    Documentation
+                  
+                
+              )}
+            
+            
+              {({ active }) => (
+                
+                  
+                    About
+                  
+                
+              )}
+            
+            
+              {({ active }) => (
+                
+                  
+                    Sponsors
+                  
+                
+              )}
+            
+            
+              {({ active }) => (
+                
+                  
+                    License
+                  
+                
+              )}
+            
+            
+              {({ active }) => (
+                
+                  
+                    Change Log
+                  
+                
+              )}
+            
+            
+              {({ active }) => (
+                
+                  
+                    
+                      Javaistic on GitHub
+                      
+                      GitHub
                     
-                
-            
-        
-    )
+                  
+                
+              )}
+            
+          
+        
+      
+    
+  )
 }
diff --git a/src/components/home/OpenSource.js b/src/components/home/OpenSource.js
index e5b766ba..198b4628 100644
--- a/src/components/home/OpenSource.js
+++ b/src/components/home/OpenSource.js
@@ -19,13 +19,13 @@ const GitHubImage = () => {
 }
 export function OpenSource() {
   return (
-    
-      
-        
+    
+      
+        
           
         
-        
-          
+        
+          
             Open to anyone. 
             

             Fork it, twist it. Flip it.
@@ -35,7 +35,7 @@ export function OpenSource() {
             everyone.
           
           
-            
           
diff --git a/src/components/home/common.js b/src/components/home/common.js
index 37620370..5a405361 100644
--- a/src/components/home/common.js
+++ b/src/components/home/common.js
@@ -3,7 +3,7 @@ import NextLink from 'next/link'
 export function IconContainer({ as: Component = 'div', color, className = '', ...props }) {
   return (
     
   )
@@ -12,7 +12,7 @@ export function IconContainer({ as: Component = 'div', color, className = '', ..
 export function Caption({ as: Component = 'p', className = '', ...props }) {
   return (
     
   )
@@ -21,7 +21,7 @@ export function Caption({ as: Component = 'p', className = '', ...props }) {
 export function BigText({ as: Component = 'p', className = '', ...props }) {
   return (
     
   )
@@ -30,7 +30,7 @@ export function BigText({ as: Component = 'p', className = '', ...props }) {
 export function Paragraph({ as: Component = 'p', className = '', ...props }) {
   return (
     
   )
@@ -40,7 +40,7 @@ export function Link({ className = '', href, ...props }) {
   return (
     
       
     
@@ -48,7 +48,12 @@ export function Link({ className = '', href, ...props }) {
 }
 
 export function InlineCode({ className = '', ...props }) {
-  return 
+  return (
+    
+  )
 }
 
 export { Widont } from '@/components/Widont'
diff --git a/src/css/docsearch.css b/src/css/docsearch.css
index 2064d8c6..c55cca07 100644
--- a/src/css/docsearch.css
+++ b/src/css/docsearch.css
@@ -112,7 +112,7 @@
   margin-right: 1rem;
   flex: auto;
   min-width: 0;
-  @apply text-black dark:text-white bg-transparent;
+  @apply bg-transparent text-black dark:text-white;
 }
 
 .DocSearch-Input:focus {
@@ -138,7 +138,7 @@
   flex: none;
   font-size: 0;
   border-radius: 0.375rem;
-  @apply bg-gray-50 dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-500 shadow;
+  @apply border-2 border-gray-300 bg-gray-50 shadow dark:border-gray-500 dark:bg-gray-800;
   padding: 0.125rem 0.375rem;
 }
 
@@ -196,7 +196,7 @@
   font-size: 0.75rem;
   line-height: 1rem;
   font-weight: 500;
-  @apply text-gray-600 dark:text-gray-300 hover:text-blue-500;
+  @apply text-gray-600 hover:text-blue-500 dark:text-gray-300;
 }
 
 .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path {
@@ -247,7 +247,7 @@
   border-radius: 0.5rem;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   padding: 0 1.25rem 0 1rem;
-  @apply bg-white dark:bg-gray-900 shadow;
+  @apply bg-white shadow dark:bg-gray-900;
 }
 
 .DocSearch-Hit[aria-selected='true'] > a {
@@ -373,7 +373,7 @@
   margin-right: 0.4em;
   padding-bottom: 1px;
   width: 20px;
-  @apply bg-gray-200 dark:bg-gray-500 shadow drop-shadow;
+  @apply bg-gray-200 shadow drop-shadow dark:bg-gray-500;
 }
 
 .DocSearch-Commands-Key svg {
diff --git a/src/css/prism.css b/src/css/prism.css
index 5b6c79d6..d28b1433 100644
--- a/src/css/prism.css
+++ b/src/css/prism.css
@@ -47,7 +47,7 @@
 }
 
 .token.deleted:not(.prefix) {
-  @apply relative block -mx-4 px-4;
+  @apply relative -mx-4 block px-4;
 }
 
 .token.deleted:not(.prefix)::after {
@@ -56,13 +56,13 @@
 }
 
 .token.deleted.prefix {
-  @apply text-gray-400 select-none;
+  @apply select-none text-gray-400;
 }
 
 .token.inserted:not(.prefix) {
-  @apply block bg-emerald-700 bg-opacity-50 -mx-4 px-4;
+  @apply -mx-4 block bg-emerald-700 bg-opacity-50 px-4;
 }
 
 .token.inserted.prefix {
-  @apply text-emerald-200 text-opacity-75 select-none;
+  @apply select-none text-emerald-200 text-opacity-75;
 }
diff --git a/src/css/utilities.css b/src/css/utilities.css
index 42d71f63..6e6a2533 100644
--- a/src/css/utilities.css
+++ b/src/css/utilities.css
@@ -8,7 +8,7 @@
 }
 
 .scrollbar-w-2::-webkit-scrollbar {
-  @apply w-2 h-2 !important;
+  @apply h-2 w-2 !important;
 }
 
 .scrollbar-track-gray-lighter::-webkit-scrollbar-track {
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 9a961fff..c754caff 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -8,7 +8,7 @@ export function BasicLayout({ children, meta, classes, tableOfContents }) {
   return (
     
       
       
-        
+        
           {children}
         
       
diff --git a/src/layouts/ContentsLayout.js b/src/layouts/ContentsLayout.js
index 97e99184..44a5b3e0 100644
--- a/src/layouts/ContentsLayout.js
+++ b/src/layouts/ContentsLayout.js
@@ -29,10 +29,10 @@ function TableOfContents({ tableOfContents, currentSection }) {
 
   return (
     <>
-      
+      

         On this page
       
-      
+      
         {tableOfContents.map((section) => {
           let sectionIsActive =
             currentSection === section.slug ||
@@ -45,7 +45,7 @@ function TableOfContents({ tableOfContents, currentSection }) {
                   href={`#${section.slug}`}
                   onClick={closeNav}
                   className={clsx(
-                    'block transform transition-colors duration-200 py-2 hover:text-gray-900 dark:hover:text-white',
+                    'block transform py-2 transition-colors duration-200 hover:text-gray-900 dark:hover:text-white',
                     {
                       'text-gray-900 dark:text-white': sectionIsActive,
                     }
@@ -69,7 +69,7 @@ function TableOfContents({ tableOfContents, currentSection }) {
                       href={`#${subsection.slug}`}
                       onClick={closeNav}
                       className={clsx(
-                        'block py-2 transition-colors duration-200 hover:text-gray-900 dark:hover:text-white font-medium',
+                        'block py-2 font-medium transition-colors duration-200 hover:text-gray-900 dark:hover:text-white',
                         {
                           'text-gray-900 dark:text-white': subsectionIsActive,
                         }
@@ -171,8 +171,8 @@ export function ContentsLayout({ children, meta, classes, tableOfContents }) {
   let { prev, next } = usePrevNext()
 
   return (
-    
-      
+    
+      
         
 
         {(prev || next) && (
-          
+          
             {prev && (
               
-                
+                
                   
                     ←
                   
@@ -201,7 +201,7 @@ export function ContentsLayout({ children, meta, classes, tableOfContents }) {
             )}
             {next && (
               
-                
+                
                   {next.shortTitle || next.title}
                   
                     →
@@ -211,21 +211,24 @@ export function ContentsLayout({ children, meta, classes, tableOfContents }) {
             )}
           

         )}
-        
+        
           
-            Edit this page on GitHub
+            
+              Edit this page on GitHub
+            
           
         
         
-          
-            Powered by ▲Vercel
+          
+            Powered by{' '}
+            ▲Vercel
           
         
       
-      
-        
+      
+        
           {toc.length > 0 && (
             
               
diff --git a/src/layouts/DocumentationLayout.js b/src/layouts/DocumentationLayout.js
index 31d602c3..c0689c36 100644
--- a/src/layouts/DocumentationLayout.js
+++ b/src/layouts/DocumentationLayout.js
@@ -13,13 +13,32 @@ export function DocumentationLayout(props) {
         {props.layoutProps.meta.metaTitle || props.layoutProps.meta.title}
       
       
-        
+        
         
-        
+        
         
       
       
diff --git a/src/layouts/ProgramsLayout.js b/src/layouts/ProgramsLayout.js
index f3c28d58..e1b890a5 100644
--- a/src/layouts/ProgramsLayout.js
+++ b/src/layouts/ProgramsLayout.js
@@ -13,13 +13,32 @@ export function ProgramsLayout(props) {
         {props.layoutProps.meta.metaTitle || props.layoutProps.meta.title}
       
       
-        
-        
+        
+        
         
         
       
       
diff --git a/src/layouts/SidebarLayout.js b/src/layouts/SidebarLayout.js
index 26398e20..1a4c5dd1 100644
--- a/src/layouts/SidebarLayout.js
+++ b/src/layouts/SidebarLayout.js
@@ -13,14 +13,15 @@ const NavItem = forwardRef(({ href, children, isActive, isPublished, fallbackHre
     
       
         
           
@@ -55,10 +56,10 @@ function Nav({ nav, children, fallbackHref }) {
     
-      
-        
+      
+        
       
       
         
@@ -72,7 +73,7 @@ function Nav({ nav, children, fallbackHref }) {
                 
                    0,
                         'text-gray-400': publishedItems.length === 0,
@@ -113,7 +114,7 @@ const TopLevelAnchor = forwardRef(
           href={href}
           onClick={onClick}
           className={clsx(
-            'flex items-center px-3 hover:text-gray-900 dark:hover:text-white dark:text-gray-400 transition-colors duration-200',
+            'flex items-center px-3 transition-colors duration-200 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white',
             className,
             {
               'text-gray-900': isActive,
@@ -270,13 +271,13 @@ function TopLevelNav() {
 export function SidebarLayout({ children, navIsOpen, setNavIsOpen, nav, sidebar, fallbackHref }) {
   return (
     
-      
+      
         
            setNavIsOpen(false)}
             className={clsx(
-              'fixed z-40 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-0 lg:w-60 xl:w-72 lg:block',
+              'fixed inset-0 z-40 h-full w-full flex-none bg-black bg-opacity-25 lg:static lg:block lg:h-auto lg:w-60 lg:overflow-y-visible lg:bg-white lg:pt-0 xl:w-72',
               {
                 hidden: !navIsOpen,
               }
@@ -285,7 +286,7 @@ export function SidebarLayout({ children, navIsOpen, setNavIsOpen, nav, sidebar,
              e.stopPropagation()}
-              className="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:bg-transparent overflow-hidden lg:top-18 bg-white dark:bg-gray-900 mr-24 lg:mr-0"
+              className="scrolling-touch mr-24 h-full overflow-hidden overflow-y-auto bg-white dark:bg-gray-900 lg:relative lg:sticky lg:top-18 lg:mr-0 lg:block lg:h-auto lg:bg-transparent"
             >
               
                 {sidebar}
@@ -295,9 +296,9 @@ export function SidebarLayout({ children, navIsOpen, setNavIsOpen, nav, sidebar,
           
diff --git a/src/lib/ga/index.js b/src/lib/ga/index.js
index a756bcba..dfd0b3e2 100644
--- a/src/lib/ga/index.js
+++ b/src/lib/ga/index.js
@@ -1,10 +1,10 @@
 export const pageview = (url) => {
-    window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
-      page_path: url,
-    })
-  }
-  
-  // log specific events happening.
-  export const event = ({ action, params }) => {
-    window.gtag('event', action, params)
-  }
\ No newline at end of file
+  window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
+    page_path: url,
+  })
+}
+
+// log specific events happening.
+export const event = ({ action, params }) => {
+  window.gtag('event', action, params)
+}
diff --git a/src/navs/program.js b/src/navs/program.js
index d8e7f750..19c4dd9a 100644
--- a/src/navs/program.js
+++ b/src/navs/program.js
@@ -6,11 +6,6 @@ const pages = createPageList(
 )
 
 export const programsNav = {
-  'Getting started': [
-    pages['introduction'],
-  ],
-  'Introduction': [
-    pages['print-an-integer'],
-  ],
-  
+  'Getting started': [pages['introduction']],
+  Introduction: [pages['print-an-integer']],
 }
diff --git a/src/pages/_app.js b/src/pages/_app.js
index f884e554..8ef53450 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -41,17 +41,21 @@ Router.events.on('routeChangeError', progress.finish)
 export default function App({ Component, pageProps, router }) {
   let [navIsOpen, setNavIsOpen] = useState(false)
 
-  useEffect(() => {
-    if (!navIsOpen) return
-    function handleRouteChange(url) {
-      setNavIsOpen(false)
-      ga.pageview(url)
-    }
-    Router.events.on('routeChangeComplete', handleRouteChange)
-    return () => {
-      Router.events.off('routeChangeComplete', handleRouteChange)
-    }
-  }, [navIsOpen], [router.events])
+  useEffect(
+    () => {
+      if (!navIsOpen) return
+      function handleRouteChange(url) {
+        setNavIsOpen(false)
+        ga.pageview(url)
+      }
+      Router.events.on('routeChangeComplete', handleRouteChange)
+      return () => {
+        Router.events.off('routeChangeComplete', handleRouteChange)
+      }
+    },
+    [navIsOpen],
+    [router.events]
+  )
 
   const Layout = Component.layoutProps?.Layout || Fragment
   const layoutProps = Component.layoutProps?.Layout
diff --git a/src/pages/_document.js b/src/pages/_document.js
index 9723f989..9d1461a4 100644
--- a/src/pages/_document.js
+++ b/src/pages/_document.js
@@ -21,7 +21,10 @@ export default class Document extends NextDocument {
           
           
           
-          
+          
           {/* Global Site Tag (gtag.js) - Google Analytics */}