diff --git a/__tests__/componentBuilder.test.tsx b/__tests__/componentBuilder.test.tsx
new file mode 100644
index 00000000..d1a192ac
--- /dev/null
+++ b/__tests__/componentBuilder.test.tsx
@@ -0,0 +1,130 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import componentBuilder from '../app/src/helperFunctions/componentBuilder';
+import { ChildElement, MUIComponent } from '../app/src/interfaces/Interfaces';
+
+// Mock MUITypes data
+const MUITypes = [
+  {
+    tag: 'Button',
+    componentData: {
+      name: 'button',
+      props: { children: 'Click me' }
+    }
+  }
+];
+vi.mock('../redux/MUITypes', () => MUITypes);
+
+describe('componentBuilder', () => {
+  it('renders a simple input component', () => {
+    const elements: Array<ChildElement> = [
+      {
+        type: 'HTML Element',
+        typeId: 1,
+        name: 'input',
+        childId: 1,
+        style: {},
+        attributes: { cssClasses: 'test-class' },
+        events: {},
+        stateProps: [],
+        passedInProps: [],
+        children: []
+      }
+    ];
+    const result = componentBuilder(elements, 1);
+    render(<>{result}</>);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('handles MUI components', () => {
+    const elements: Array<MUIComponent> = [
+      {
+        type: 'MUI Component',
+        typeId: 2,
+        name: 'Button',
+        childId: 2,
+        style: {},
+        attributes: {},
+        events: {},
+        stateProps: [],
+        passedInProps: [],
+        children: []
+      }
+    ];
+    const result = componentBuilder(elements, 2);
+    render(<>{result}</>);
+    expect(screen.getByText('Click me')).toBeInTheDocument(); // Assuming 'Click me' is rendered text for Button
+  });
+
+  it('skips separators and continues rendering', () => {
+    const elements: Array<ChildElement> = [
+      {
+        type: 'HTML Element',
+        typeId: 1,
+        name: 'separator',
+        childId: 1,
+        style: {},
+        attributes: {},
+        events: {},
+        stateProps: [],
+        passedInProps: [],
+        children: []
+      },
+      {
+        type: 'HTML Element',
+        typeId: 1,
+        name: 'img',
+        childId: 2,
+        style: {},
+        attributes: { compLink: 'http://example.com/image.png' },
+        events: {},
+        stateProps: [],
+        passedInProps: [],
+        children: []
+      }
+    ];
+    const result = componentBuilder(elements, 3);
+    render(<>{result}</>);
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'src',
+      'http://example.com/image.png'
+    );
+  });
+
+  it('renders nested components', () => {
+    const elements: Array<ChildElement> = [
+      {
+        type: 'HTML Element',
+        typeId: 1,
+        name: 'div',
+        childId: 3,
+        style: {},
+        attributes: { cssClasses: 'container' },
+        events: {},
+        stateProps: [],
+        passedInProps: [],
+        children: [
+          {
+            type: 'HTML Element',
+            typeId: 1,
+            name: 'p',
+            childId: 4,
+            style: {},
+            attributes: { compText: 'Hello, world!' },
+            events: {},
+            stateProps: [],
+            passedInProps: [],
+            children: []
+          }
+        ]
+      }
+    ];
+    const result = componentBuilder(elements, 4);
+    render(<>{result}</>);
+    expect(screen.getByText('Hello, world!')).toBeInTheDocument();
+    expect(screen.getByText('Hello, world!').parentNode).toHaveClass(
+      'container'
+    );
+  });
+});
diff --git a/__tests__/generateCode.test.ts b/__tests__/generateCode.test.ts
new file mode 100644
index 00000000..1abfffbd
--- /dev/null
+++ b/__tests__/generateCode.test.ts
@@ -0,0 +1,375 @@
+import { describe, it, expect } from 'vitest';
+import generateCode from '../app/src/helperFunctions/generateCode';
+import {
+  muiGenerator,
+  handleRouteLink,
+  insertNestedJsxBeforeClosingTag,
+  modifyAndIndentJsx,
+  insertAttribute,
+  writeStateProps,
+  createRender,
+  indentLinesExceptFirst,
+  createContextImport,
+  createEventHandler,
+  generateUnformattedCode,
+  getEnrichedChildren,
+  formatStyles,
+  elementTagDetails,
+  writeNestedElements,
+  generateMUIImportStatements,
+  generateStateAndEventHandlerCode,
+  tabSpacer,
+  levelSpacer,
+  elementGenerator,
+  collectMUIImports,
+  collectStateAndEventHandlers,
+  formatCode
+} from '../app/src/helperFunctions/generateCode';
+import { Component, HTMLType, MUIType } from '../app/src/interfaces/Interfaces';
+
+const MUITypes: MUIType[] = [
+  {
+    id: 1,
+    tag: 'button',
+    name: 'Button',
+    style: {}, // Assuming style is an object, provide specific styles as needed
+    placeHolderShort: 'Button placeholder',
+    placeHolderLong: 'This is a button used for submitting forms.',
+    icon: null, // If icon is optional and not used, set it to null or appropriate default
+    framework: 'React',
+    nestable: false,
+    stateAndEventHandlers: ['onClick'],
+    imports: ['import React from "react";'],
+    propOptions: ['type', 'onClick'],
+    defaultProps: ['type="button"'],
+    jsx: ['<button>{children}</button>'],
+    componentData: { type: 'button', props: { children: 'Click me' } },
+    children: [], // If no nested MUI types, use an empty array
+    attributes: {} // If no specific attributes are needed, use an empty object
+  }
+];
+// vi.mock('../redux/MUITypes', () => MUITypes);
+
+const componentsMock: Component[] = [
+  {
+    id: 1,
+    name: 'Button',
+    style: {},
+    events: {},
+    code: 'return <Button>Click me</Button>;',
+    children: [],
+    isPage: false,
+    past: [],
+    future: [],
+    stateProps: [],
+    useStateCodes: [],
+    passedInProps: [],
+    type: 'MUI Component'
+  }
+];
+
+// Correctly mocked HTMLTypes data based on the HTMLType interface
+const HTMLTypes: HTMLType[] = [
+  {
+    id: 1,
+    tag: 'div',
+    name: 'Division',
+    style: {},
+    placeHolderShort: 'Short placeholder text or JSX',
+    placeHolderLong: 'Longer placeholder text',
+    icon: null,
+    framework: 'React',
+    nestable: true
+  }
+];
+const rootComponents = [1];
+const contextParam = {};
+
+describe('generateCode', () => {
+  it('should return formatted code for Classic React', () => {
+    const result = generateCode(
+      componentsMock,
+      1,
+      [1],
+      'Classic React',
+      HTMLTypes,
+      MUITypes,
+      false,
+      {}
+    );
+    expect(result).toContain('import React'); // Example assertion, adjust based on actual output
+    expect(result).toContain('function Button'); // Check for function definition
+  });
+
+  it('should handle Next.js projects', () => {
+    const result = generateCode(
+      componentsMock,
+      1,
+      [1],
+      'Next.js',
+      HTMLTypes,
+      MUITypes,
+      false,
+      {}
+    );
+    expect(result).toContain('import Head from "next/head"');
+  });
+});
+
+describe('muiGenerator', () => {
+  it('returns correct JSX for MUI components', () => {
+    const childElement = {
+      name: 'Button',
+      passedInProps: [],
+      childId: '1',
+      children: []
+    };
+    const result = muiGenerator(childElement);
+    expect(result).toContain('<button>Click me</button>'); // Example, adjust to actual logic
+  });
+
+  it('returns empty string when MUI component is not found', () => {
+    const childElement = {
+      name: 'NotFoundComponent',
+      passedInProps: [],
+      childId: '1',
+      children: []
+    };
+    const result = muiGenerator(childElement);
+    expect(result).toBe('');
+  });
+});
+
+describe('handleRouteLink', () => {
+  it('generates correct JSX for Next.js route links', () => {
+    const child = { name: 'home', displayName: 'Home' };
+    const result = handleRouteLink(child, 0, 'Next.js');
+    expect(result).toContain('<Link href="/home"><a>Home</a></Link>');
+  });
+
+  it('generates correct JSX for Gatsby route links', () => {
+    const child = { name: 'home', displayName: 'Home' };
+    const result = handleRouteLink(child, 0, 'Gatsby.js');
+    expect(result).toContain('<Link to="/home">Home</Link>');
+  });
+});
+
+describe('insertNestedJsxBeforeClosingTag', () => {
+  it('correctly inserts JSX before the closing tag', () => {
+    const parentJsx = '<div>\n</div>';
+    const nestedJsx = ['<span>Content</span>'];
+    const result = insertNestedJsxBeforeClosingTag(parentJsx, nestedJsx, 1);
+    expect(result).toContain('<div>\n  <span>Content</span>\n</div>');
+  });
+});
+
+describe('modifyAndIndentJsx', () => {
+  it('correctly modifies and indents JSX with new props and id', () => {
+    const jsxAry = ['<Button>Click me</Button>'];
+    const newProps = 'disabled';
+    const childId = 'btn1';
+    const name = 'Button';
+    const key = 'btn1';
+    const result = modifyAndIndentJsx(jsxAry, newProps, childId, name, key);
+    expect(result).toContain('<Button id="btn1" disabled>Click me</Button>');
+  });
+});
+
+describe('insertAttribute', () => {
+  it('correctly inserts an attribute into JSX', () => {
+    const line = '<Button>Click me</Button>';
+    const attribute = 'disabled';
+    const index = line.indexOf('>');
+    const result = insertAttribute(line, index, attribute);
+    expect(result).toContain('<Button disabled>Click me</Button>');
+  });
+});
+
+describe('writeStateProps', () => {
+  it('correctly formats state props into component', () => {
+    const stateArray = ['const [count, setCount] = useState(0)'];
+    const result = writeStateProps(stateArray);
+    expect(result).toContain('const [count, setCount] = useState(0);');
+  });
+});
+
+describe('createRender', () => {
+  // Assuming createRender is adapted to be testable, potentially needing dependency injection for context
+  it('creates render function with nested elements', () => {
+    const result = createRender(); // This needs to be adapted based on actual usage and possible inputs
+    expect(result).toContain('return (');
+  });
+});
+
+describe('indentLinesExceptFirst', () => {
+  it('indents all lines except the first one', () => {
+    const text = 'Line1\nLine2\nLine3';
+    const result = indentLinesExceptFirst(text, 1);
+    expect(result).toBe('Line1\n  Line2\n  Line3');
+  });
+});
+
+describe('createContextImport', () => {
+  it('generates import statements for contexts', () => {
+    const result = createContextImport(); // Assuming it's adapted to be testable
+    expect(result).toContain('import');
+  });
+});
+
+describe('createEventHandler', () => {
+  it('creates event handler functions from child elements', () => {
+    const children = [
+      { type: 'HTML Element', events: { onClick: 'handleClick' }, children: [] }
+    ];
+    const result = createEventHandler(children);
+    expect(result).toContain('const handleClick = () => {};');
+  });
+});
+
+describe('generateUnformattedCode', () => {
+  it('returns correct JSX for a given project type', () => {
+    const result = generateUnformattedCode(
+      componentsMock,
+      1,
+      rootComponents,
+      'Classic React',
+      HTMLTypes,
+      MUITypes,
+      false,
+      contextParam
+    );
+    expect(result).toContain('Button'); // Example assertion, adjust based on actual output
+  });
+});
+
+describe('getEnrichedChildren', () => {
+  it('enriches child components correctly', () => {
+    const result = getEnrichedChildren(componentsMock[0]);
+    expect(result).toBeTypeOf('array'); // Check for correct data structure
+    expect(result).toHaveLength(0); // No children to enrich in this case
+  });
+});
+
+describe('formatStyles', () => {
+  it('formats style object into inline styles correctly', () => {
+    const styles = { color: 'red', fontSize: '12px' };
+    const result = formatStyles(styles);
+    expect(result).toContain("color: 'red'"); // Checks inline style formatting
+    expect(result).toContain("fontSize: '12px'");
+  });
+});
+
+describe('elementTagDetails', () => {
+  it('generates correct details for an HTML element', () => {
+    const childElement = {
+      childId: '1',
+      attributes: { cssClasses: 'btn' },
+      style: {},
+      events: {}
+    };
+    const result = elementTagDetails(childElement);
+    expect(result).toContain('id="1"');
+    expect(result).toContain('className="btn"');
+  });
+});
+
+describe('writeNestedElements', () => {
+  it('handles nested components correctly', () => {
+    const enrichedChildren = [{ ...componentsMock[0], type: 'Component' }];
+    const result = writeNestedElements(enrichedChildren, 0);
+    expect(result).toContain('<Button />'); // Assuming elementTagDetails are correct
+  });
+});
+
+describe('generateMUIImportStatements', () => {
+  it('compiles MUI import statements from a set', () => {
+    const muiImports = new Set(["import Button from '@mui/material/Button'"]);
+    const result = generateMUIImportStatements(muiImports);
+    expect(result).toContain("import Button from '@mui/material/Button'");
+  });
+});
+
+describe('generateStateAndEventHandlerCode', () => {
+  it('compiles state and event handler code, excluding comments', () => {
+    const handlersCollection = new Set([
+      'const handleClick = () => { console.log("Clicked"); }; // Click handler'
+    ]);
+    const result = generateStateAndEventHandlerCode(handlersCollection);
+    expect(result).not.toContain('// Click handler');
+    expect(result).toContain(
+      'const handleClick = () => { console.log("Clicked"); };'
+    );
+  });
+});
+
+describe('tabSpacer', () => {
+  it('returns correct amount of spaces for indentation', () => {
+    const result = tabSpacer(3);
+    expect(result).toBe('      '); // 6 spaces for 3 levels of indentation
+  });
+
+  it('returns empty string for zero indentation', () => {
+    const result = tabSpacer(0);
+    expect(result).toBe('');
+  });
+});
+
+describe('levelSpacer', () => {
+  it('returns newline followed by correct indentation spaces', () => {
+    const result = levelSpacer(2);
+    expect(result).toBe('\n    '); // Newline followed by 4 spaces
+  });
+});
+
+describe('elementGenerator', () => {
+  const childElement = {
+    tag: 'button',
+    children: [],
+    attributes: {},
+    style: {}
+  };
+  it('generates JSX for a simple element', () => {
+    const result = elementGenerator(childElement, 0);
+    expect(result).toContain('<button />'); // Check JSX output
+  });
+});
+
+describe('collectMUIImports', () => {
+  it('collects MUI imports without duplicates', () => {
+    const component = { type: 'MUI Component', typeId: 1, children: [] };
+    const MUITypes = [
+      { id: 1, imports: ['import Button from "@mui/material/Button"'] }
+    ];
+    const muiImports = new Set();
+    collectMUIImports(component, MUITypes, muiImports);
+    expect(muiImports.has('import Button from "@mui/material/Button"')).toBe(
+      true
+    );
+    expect(muiImports.size).toBe(1);
+  });
+});
+
+describe('collectStateAndEventHandlers', () => {
+  it('collects event handlers from MUI components', () => {
+    const component = { type: 'MUI Component', typeId: 1, children: [] };
+    const MUITypes = [
+      { id: 1, stateAndEventHandlers: ['const handleClick = () => {}'] }
+    ];
+    const handlersCollection = new Set();
+    collectStateAndEventHandlers(component, MUITypes, handlersCollection);
+    expect(handlersCollection.has('const handleClick = () => {}')).toBe(true);
+  });
+});
+
+describe('formatCode', () => {
+  it('formats code using provided styling rules', () => {
+    const code = 'const x=1;';
+    const formatted = formatCode(code);
+    expect(formatted).toContain('const x = 1;'); // Assuming Prettier is set up with spaces around equals
+  });
+
+  it('handles empty code input', () => {
+    const result = formatCode('');
+    expect(result).toBe('');
+  });
+});
diff --git a/app/src/components/left/DragDropPanel.tsx b/app/src/components/left/DragDropPanel.tsx
index d2920d91..b6c5cb9f 100644
--- a/app/src/components/left/DragDropPanel.tsx
+++ b/app/src/components/left/DragDropPanel.tsx
@@ -15,11 +15,11 @@ import ComponentDrag from './ComponentDrag';
 
 const useStyles = makeStyles({
   accordion: {
-    backgroundColor: '#000000', // Set the background color to gray
+    backgroundColor: '#0b0b0b', // Set the background color to gray
     color: '#ffffff' // Set the text color to white
   },
   accordionSummary: {
-    backgroundColor: '#000000', // Set the background color of the summary to gray
+    backgroundColor: '#101012', // Set the background color of the summary to gray
     color: '#ffffff' // Set the text color of the summary to white
   }
 });
@@ -90,8 +90,14 @@ const DragDropPanel = (props): JSX.Element => {
           >
             <h3>HTML Elements</h3>
           </AccordionSummary>
-          <AccordionDetails>
-            <Grid container justifyContent="center">
+          <AccordionDetails
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'space-around'
+            }}
+          >
+            <Grid container justifyContent="space-around" columnSpacing={2}>
               {htmlTypesToRender.map((option) => {
                 if (
                   !['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(
@@ -123,8 +129,14 @@ const DragDropPanel = (props): JSX.Element => {
           >
             <h3>React Router</h3>
           </AccordionSummary>
-          <AccordionDetails>
-            <Grid container justifyContent="center">
+          <AccordionDetails
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'space-around'
+            }}
+          >
+            <Grid container justifyContent="space-around" columnSpacing={2}>
               {htmlTypesToRender.map((option) => {
                 if (
                   (option.name === 'Switch' ||
diff --git a/app/src/components/left/MUIDragDropPanel.tsx b/app/src/components/left/MUIDragDropPanel.tsx
index 5516fed3..710439d0 100644
--- a/app/src/components/left/MUIDragDropPanel.tsx
+++ b/app/src/components/left/MUIDragDropPanel.tsx
@@ -15,11 +15,11 @@ import { Icon } from '@mui/material';
 
 const useStyles = makeStyles({
   accordion: {
-    backgroundColor: '#000000', // Set the background color to gray
+    backgroundColor: '#0b0b0b', // Set the background color to gray
     color: '#ffffff' // Set the text color to white
   },
   accordionSummary: {
-    backgroundColor: '#000000', // Set the background color of the summary to gray
+    backgroundColor: '#101012', // Set the background color of the summary to gray
     color: '#ffffff' // Set the text color of the summary to white
   }
 });
@@ -112,8 +112,14 @@ const MUIDragDropPanel = (props): JSX.Element => {
           >
             <h3>Inputs</h3>
           </AccordionSummary>
-          <AccordionDetails>
-            <Grid container justifyContent="center">
+          <AccordionDetails
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'space-around'
+            }}
+          >
+            <Grid container justifyContent="space-around" columnSpacing={2}>
               {muiInputToRender.map((option) => {
                 return (
                   <MUIItem
@@ -139,8 +145,14 @@ const MUIDragDropPanel = (props): JSX.Element => {
           >
             <h3>Data Display</h3>
           </AccordionSummary>
-          <AccordionDetails>
-            <Grid container justifyContent="center">
+          <AccordionDetails
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'space-around'
+            }}
+          >
+            <Grid container justifyContent="space-around" columnSpacing={2}>
               {muiDataDisplayToRender.map((option) => {
                 return (
                   <MUIItem
@@ -166,8 +178,14 @@ const MUIDragDropPanel = (props): JSX.Element => {
           >
             <h3>Feedback</h3>
           </AccordionSummary>
-          <AccordionDetails>
-            <Grid container justifyContent="center">
+          <AccordionDetails
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'space-around'
+            }}
+          >
+            <Grid container justifyContent="space-around" columnSpacing={2}>
               {muiFeedbackToRender.map((option) => {
                 return (
                   <MUIItem
@@ -193,8 +211,14 @@ const MUIDragDropPanel = (props): JSX.Element => {
           >
             <h3>Surfaces</h3>
           </AccordionSummary>
-          <AccordionDetails>
-            <Grid container justifyContent="center">
+          <AccordionDetails
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'space-around'
+            }}
+          >
+            <Grid container justifyContent="space-around" columnSpacing={2}>
               {muiSurfacesToRender.map((option) => {
                 return (
                   <MUIItem
@@ -220,8 +244,14 @@ const MUIDragDropPanel = (props): JSX.Element => {
           >
             <h3>Navigation</h3>
           </AccordionSummary>
-          <AccordionDetails>
-            <Grid container justifyContent="center">
+          <AccordionDetails
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'space-around'
+            }}
+          >
+            <Grid container justifyContent="space-around" columnSpacing={2}>
               {muiNavigationToRender.map((option) => {
                 return (
                   <MUIItem
@@ -247,8 +277,14 @@ const MUIDragDropPanel = (props): JSX.Element => {
           >
             <h3>Layout</h3>
           </AccordionSummary>
-          <AccordionDetails>
-            <Grid container justifyContent="center">
+          <AccordionDetails
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'space-around'
+            }}
+          >
+            <Grid container justifyContent="space-around" columnSpacing={2}>
               {muiLayoutToRender.map((option) => {
                 return (
                   <MUIItem
@@ -274,8 +310,14 @@ const MUIDragDropPanel = (props): JSX.Element => {
           >
             <h3>Utils</h3>
           </AccordionSummary>
-          <AccordionDetails>
-            <Grid container justifyContent="center">
+          <AccordionDetails
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'space-around'
+            }}
+          >
+            <Grid container justifyContent="space-around" columnSpacing={2}>
               {muiUtilsToRender.map((option) => {
                 return (
                   <MUIItem
@@ -284,33 +326,13 @@ const MUIDragDropPanel = (props): JSX.Element => {
                     id={option.id}
                     icon={option.icon}
                     handleDelete={handleDelete}
+                    sx={{ p: 0 }}
                   />
                 );
               })}
             </Grid>
           </AccordionDetails>
         </Accordion>
-
-        {/* Next.js */}
-        {state.projectType === 'Next.js' ? (
-          <h3 style={{ color: 'C6C6C6' }}>Next.js</h3>
-        ) : null}
-        {htmlTypesToRender.map((option) => {
-          if (
-            option.framework === 'nextjs' &&
-            state.projectType === 'Next.js'
-          ) {
-            return (
-              <HTMLItem
-                name={option.name}
-                key={`html-${option.name}`}
-                id={option.id}
-                icon={option.icon}
-                handleDelete={handleDelete}
-              />
-            );
-          }
-        })}
       </div>
     </div>
   );
diff --git a/app/src/components/main/DemoRender.tsx b/app/src/components/main/DemoRender.tsx
index dd87f560..84dca2c2 100644
--- a/app/src/components/main/DemoRender.tsx
+++ b/app/src/components/main/DemoRender.tsx
@@ -95,17 +95,14 @@ const DemoRender = (): JSX.Element => {
   const currComponent = state.components.find(
     (element) => element.id === state.canvasFocus.componentId
   );
-  console.log('currComponent', currComponent);
 
   /**
    * Builds the code variable based on the current component's children.
    */
   componentBuilder(currComponent.children).forEach((element) => {
     if (typeof element === 'string') {
-      console.log('element', element);
       code += element;
     } else if (React.isValidElement(element)) {
-      console.log('valid react element', element);
       try {
         const reactDomStringRender = ReactDOMServer.renderToString(element);
         code += reactDomStringRender;
diff --git a/app/src/containers/MarketplaceContainer.tsx b/app/src/containers/MarketplaceContainer.tsx
index aee367cb..ea3ba54e 100644
--- a/app/src/containers/MarketplaceContainer.tsx
+++ b/app/src/containers/MarketplaceContainer.tsx
@@ -3,6 +3,7 @@ import SearchBar from '../components/marketplace/Searchbar';
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { CircularProgress } from '@mui/material';
+import serverconfig from '../serverConfig';
 
 /**
  * `MarketplaceContainer` serves as the main container for the marketplace section of the application,
@@ -27,12 +28,15 @@ const MarketplaceContainer = () => {
   useEffect(() => {
     async function marketplaceFetch() {
       try {
-        const response = await axios.get('/getMarketplaceProjects', {
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          withCredentials: true
-        });
+        const response = await axios.get(
+          `${serverconfig.API_BASE_URL}/getMarketplaceProjects`,
+          {
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            withCredentials: true
+          }
+        );
         setMarketplaceProjects(response.data);
         setDisplayProjects(response.data);
       } catch (error) {
diff --git a/app/src/helperFunctions/DemoRenderHTML.ts b/app/src/helperFunctions/DemoRenderHTML.ts
index 7a2785f6..863b24b9 100644
--- a/app/src/helperFunctions/DemoRenderHTML.ts
+++ b/app/src/helperFunctions/DemoRenderHTML.ts
@@ -50,14 +50,92 @@ const html = `
         const React = window.React;
         const { useState, createContext, useContext } = React;
         const ReactDOM = window.ReactDOM;
-
-        console.log('MaterialUI:', MaterialUI);
   
         if (!MaterialUI || !ReactRouterDOM || !React || !ReactDOM) {
           console.error('Dependency loading failed: MaterialUI, React, or ReactDOM is undefined.');
           return;
         }
+          
+        const findCustomListInChildren = (children) => {
+          if (!Array.isArray(children)) {
+              children = [children]; // Convert single child object to an array
+          }
+      
+          for (const child of children) {
+              if (child.type === 'customList') {
+                  return true; // Found the customList
+              }
+              // If the current child has children, recursively search through them
+              if (child.children) {
+                  const found = findCustomListInChildren(child.children);
+                  if (found) return true; // If found in the children, return true
+              }
+          }
+          return false; // If not found in any children
+        };
 
+        const customList = (str) => {
+          const { left, right, checked, handleToggle, setChecked } = useTransferList();
+          const items = str === 'left' ? left : right;
+     
+          const paperProps = {
+              sx: { width: 200, height: 230, overflow: 'auto' }
+          };
+      
+          const listProps = {
+              dense: true,
+              component: 'div',
+              role: 'list'
+          };
+      
+          const listItems = items.map((value, index) => {
+              const labelId = 'transfer-list-item-' + value + '-label';
+      
+              const listItemButtonProps = {
+                  key: value,
+                  role: 'listitem',
+                  onClick: () => handleToggle(value)
+              };
+     
+              const checkboxProps = {
+                  checked: checked.indexOf(value) !== -1,
+                  tabIndex: -1,
+                  disableRipple: true,
+                  inputProps: {
+                      'aria-labelledby': labelId
+                  }
+              };
+      
+              const listItemIconProps = {};
+      
+              const listItemTextProps = {
+                  id: labelId,
+                  primary: 'List item' + (value)
+              };
+      
+              return React.createElement(
+                  MaterialUI.ListItemButton,
+                  listItemButtonProps,
+                  React.createElement(
+                      MaterialUI.ListItemIcon,
+                      listItemIconProps,
+                      React.createElement(MaterialUI.Checkbox, checkboxProps)
+                  ),
+                  React.createElement(MaterialUI.ListItemText, listItemTextProps)
+              );
+          });
+      
+          return React.createElement(
+              MaterialUI.Paper,
+              paperProps,
+              React.createElement(
+                  MaterialUI.List,
+                  listProps,
+                  listItems
+              )
+          );
+      };
+      
         const itemData = [
           {
             img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
@@ -142,6 +220,159 @@ const html = `
               imageListItems
           );
         };
+
+        const toggleDrawer = (newOpen) => () => {
+          setOpen(newOpen);
+        };
+
+        const DrawerList = () => {
+          const listItems1 = ['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => {
+              return React.createElement(
+                  MaterialUI.ListItem,
+                  { key: text, disablePadding: true },
+                  React.createElement(
+                      MaterialUI.ListItemButton,
+                      null,
+                      React.createElement(
+                          MaterialUI.ListItemIcon,
+                          null,
+                          index % 2 === 0 ? React.createElement(MaterialUI.SpeedDialIcon) : React.createElement(MaterialUI.SpeedDialIcon)
+                      ),
+                      React.createElement(
+                          MaterialUI.ListItemText,
+                          { primary: text }
+                      )
+                  )
+              );
+          });
+      
+          const listItems2 = ['All mail', 'Trash', 'Spam'].map((text, index) => {
+              return React.createElement(
+                  MaterialUI.ListItem,
+                  { key: text, disablePadding: true },
+                  React.createElement(
+                      MaterialUI.ListItemButton,
+                      null,
+                      React.createElement(
+                          MaterialUI.ListItemIcon,
+                          null,
+                          index % 2 === 0 ? React.createElement(MaterialUI.SpeedDialIcon) : React.createElement(MaterialUI.SpeedDialIcon)
+                      ),
+                      React.createElement(
+                          MaterialUI.ListItemText,
+                          { primary: text }
+                      )
+                  )
+              );
+          });
+      
+          const drawer = React.createElement(
+              MaterialUI.Box,
+              { sx: { width: 250 }, role: "presentation", onClick: toggleDrawer(false) },
+              React.createElement(
+                  MaterialUI.List,
+                  null,
+                  listItems1
+              ),
+              React.createElement(MaterialUI.Divider),
+              React.createElement(
+                  MaterialUI.List,
+                  null,
+                  listItems2
+              )
+          );
+      
+          return drawer;
+        };
+
+        const steps = [
+          {
+            label: 'Select campaign settings',
+            description: "For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.",
+          },
+          {
+            label: 'Create an ad group',
+            description:
+              'An ad group contains one or more ads which target a shared set of keywords.',
+          },
+          {
+            label: 'Create an ad',
+            description: "Try out different ad text to see what brings in the most customers, and learn how to enhance your ads using features like ad extensions. If you run into any problems with your ads, find out how to tell if they're running and how to resolve approval issues.",
+          },
+        ];
+
+        const VerticalStepper = ({ steps }) => {
+          const { activeStep, handleNext, handleBack, handleReset } = useStepper();
+      
+          return React.createElement(
+              MaterialUI.Box,
+              { sx: { maxWidth: 400 } },
+              React.createElement(
+                  MaterialUI.Stepper,
+                  { activeStep: activeStep, orientation: "vertical" },
+                  steps.map((step, index) =>
+                      React.createElement(
+                          MaterialUI.Step,
+                          { key: step.label },
+                          React.createElement(
+                              MaterialUI.StepLabel,
+                              {
+                                  optional: index === steps.length - 1 ?
+                                      React.createElement(MaterialUI.Typography, { variant: "caption" }, "Last step") :
+                                      null
+                              },
+                              step.label
+                          ),
+                          React.createElement(
+                              MaterialUI.StepContent,
+                              null,
+                              React.createElement(MaterialUI.Typography, null, step.description),
+                              React.createElement(
+                                  MaterialUI.Box,
+                                  { sx: { mb: 2 } },
+                                  React.createElement(
+                                      'div',
+                                      null,
+                                      React.createElement(
+                                          MaterialUI.Button,
+                                          {
+                                              variant: "contained",
+                                              onClick: handleNext,
+                                              sx: { mt: 1, mr: 1 },
+                                          },
+                                          index === steps.length - 1 ? 'Finish' : 'Continue'
+                                      ),
+                                      React.createElement(
+                                          MaterialUI.Button,
+                                          {
+                                              disabled: index === 0,
+                                              onClick: handleBack,
+                                              sx: { mt: 1, mr: 1 },
+                                          },
+                                          'Back'
+                                      )
+                                  )
+                              )
+                          )
+                      )
+                  )
+              ),
+              activeStep === steps.length &&
+              React.createElement(
+                  MaterialUI.Paper,
+                  { square: true, elevation: 0, sx: { p: 3 } },
+                  React.createElement(MaterialUI.Typography, null, "All steps completed - you're finished"),
+                  React.createElement(
+                      MaterialUI.Button,
+                      {
+                          onClick: handleReset,
+                          sx: { mt: 1, mr: 1 },
+                      },
+                      'Reset'
+                  )
+              )
+          );
+      };
           
           function a11yProps(index) {
             const props = {};
@@ -200,6 +431,59 @@ const html = `
 
         const usePopper = () => useContext(PopperContext);
 
+        const DrawerContext = createContext();
+
+        const DrawerProvider = ({ children }) => {
+          const [open, setOpen] = useState(false);
+
+          const toggleDrawer = (newOpen) => () => {
+            setOpen(newOpen);
+          };
+
+            const value = {
+                open,
+                toggleDrawer
+            };
+
+            const providerCheck = React.createElement(
+              DrawerContext.Provider,
+              { value: value },
+              children
+          );
+            return providerCheck;
+        };
+
+        const useDrawer = () => useContext(DrawerContext);
+        
+        const MenuContext = createContext();
+
+        const MenuProvider = ({ children }) => {
+          const [anchorEl, setAnchorEl] = React.useState(null);
+          const open = Boolean(anchorEl);
+          const handleClick = (event) => {
+            setAnchorEl(event.currentTarget);
+          };
+          const handleClose = () => {
+            setAnchorEl(null);
+          };
+
+            const value = {
+                anchorEl, 
+                open,
+                handleClick,
+                handleClose
+            };
+
+            const providerCheck = React.createElement(
+              MenuContext.Provider,
+              { value: value },
+              children
+          );
+            return providerCheck;
+        };
+
+        const useMenu = () => useContext(MenuContext); 
+        
         const ModalContext = createContext();
 
         const ModalProvider = ({ children }) => {
@@ -224,6 +508,65 @@ const html = `
       
       const useModal = () => useContext(ModalContext);
 
+      const RatingContext = createContext();
+
+      const RatingProvider = ({ children }) => {
+        const [ratingValue, setRatingValue] = React.useState(2);
+
+        // Handler for changing the rating
+        const handleRatingChange = (event, newValue) => {
+          setRatingValue(newValue);  // Updates the rating value in the context
+        };
+        
+        const value = {
+          ratingValue, 
+          handleRatingChange
+        };
+
+        const providerCheck = React.createElement(
+          RatingContext.Provider,
+          { value: value },
+          children
+      );
+        return providerCheck;
+      };
+
+      const useRating = () => useContext(RatingContext);
+      
+      const StepperContext = createContext();
+
+      const StepperProvider = ({ children }) => {
+        const [activeStep, setActiveStep] = React.useState(0);
+
+        const handleNext = () => {
+          setActiveStep((prevActiveStep) => prevActiveStep + 1);
+        };
+      
+        const handleBack = () => {
+          setActiveStep((prevActiveStep) => prevActiveStep - 1);
+        };
+    
+        const handleReset = () => {
+          setActiveStep(0);
+        };
+
+        const value = {
+          activeStep, 
+          handleNext,
+          handleBack,
+          handleReset
+        };
+
+        const providerCheck = React.createElement(
+          StepperContext.Provider,
+          { value: value },
+          children
+      );
+        return providerCheck;
+      };
+
+      const useStepper = () => useContext(StepperContext); 
+
       const TabsContext = createContext();
 
       const TabsProvider = ({ children }) => {
@@ -265,34 +608,50 @@ const html = `
 
       const TransferListContext = createContext();
 
+      function not(a, b) {
+        return a.filter((value) => b.indexOf(value) === -1);
+      }
+      
+      function intersection(a, b) {
+        return a.filter((value) => b.indexOf(value) !== -1);
+      }
+
       const TransferListProvider = ({ children }) => {
         const [checked, setChecked] = React.useState([]);
         const [left, setLeft] = React.useState([0, 1, 2, 3]);
         const [right, setRight] = React.useState([4, 5, 6, 7]);
       
+        const leftChecked = intersection(checked, left);
+        const rightChecked = intersection(checked, right);
+      
         const handleToggle = (value) => () => {
           const currentIndex = checked.indexOf(value);
           const newChecked = [...checked];
-      
+        
           if (currentIndex === -1) {
             newChecked.push(value);
           } else {
             newChecked.splice(currentIndex, 1);
           }
-      
+        
           setChecked(newChecked);
         };
       
+        const handleAllRight = () => {
+          setRight(right.concat(left));
+          setLeft([]);
+        };
+      
         const handleCheckedRight = () => {
-          setRight(right.concat(leftChecked(checked, left)));
-          setLeft(not(left, leftChecked(checked, left)));
-          setChecked(not(checked, leftChecked(checked, left)));
+          setRight(right.concat(leftChecked));
+          setLeft(not(left, leftChecked));
+          setChecked(not(checked, leftChecked));
         };
       
         const handleCheckedLeft = () => {
-          setLeft(left.concat(rightChecked(checked, right)));
-          setRight(not(right, rightChecked(checked, right)));
-          setChecked(not(checked, rightChecked(checked, right)));
+          setLeft(left.concat(rightChecked));
+          setRight(not(right, rightChecked));
+          setChecked(not(checked, rightChecked));
         };
       
         const handleAllLeft = () => {
@@ -300,11 +659,6 @@ const html = `
           setRight([]);
         };
       
-        const handleAllRight = () => {
-          setRight(right.concat(left));
-          setLeft([]);
-        };
-      
         const value = {
           checked,
           setChecked,
@@ -355,6 +709,24 @@ const html = `
       const useTransition = () => useContext(TransitionContext);
 
         const componentConfigs = {
+          Autocomplete: (props, useState) => {
+            // Assuming renderInput needs to be a function creating a TextField with specific props
+            if (typeof props.renderInput === 'string') {
+                props.renderInput = (params) => React.createElement(MaterialUI.TextField, {
+                    ...params,
+                    label: props.renderInput  // Use the string as label, or customize as needed
+                });
+            }
+            props.options = [
+                { label: 'The Shawshank Redemption', year: 1994 },
+                { label: 'The Godfather', year: 1972 },
+                { label: 'The Godfather: Part II', year: 1974 },
+                { label: 'The Dark Knight', year: 2008 },
+                { label: '12 Angry Men', year: 1957 },
+            ];
+    
+            return props;
+        },
           Backdrop: (props, useState, useContext) => {
             if (props.role === 'backDrop') {
               const { open, handleClose } = useModal();
@@ -428,66 +800,98 @@ const html = `
             return props;
           },
           Button: (props, useState, useContext) => {
-                   
-              if (props.role === 'popoverTrigger') {
-                const { handleOpen } = usePopover();
-                  return {
-                      ...props,
-                      onClick: handleOpen
-                  };
-              }
-              if (props.role === 'popperTrigger') {
-                const { handleClick } = usePopper();
+            if (props.role === 'menu') {
+              const { open, handleClick } = useMenu();
                 return {
                     ...props,
+                    "aria-controls": open ? 'basic-menu' : undefined,
+                    "aria-expanded": open ? 'true' : undefined,
                     onClick: handleClick
                 };
-              }
-              if (props.role === 'modalTrigger') {
-                const { handleOpen } = useModal();
+            }
+
+            if (props.role === 'drawer') {
+              const { toggleDrawer } = useDrawer();
                 return {
                     ...props,
-                    onClick: handleOpen
+                    onClick: toggleDrawer(true)
                 };
-              }
-              if (props.role === 'dialog') {
-                const { handleClose } = useModal();
+            }
+                  
+            if (props.role === 'popoverTrigger') {
+              const { handleOpen } = usePopover();
                 return {
                     ...props,
-                    onClick: handleClose
-                };
-              }
-              if (props.role === 'rightAll') {
-                return {
-                  ...props,
-                  onClick: handleAllRight,
-                  disabled: left.length === 0
+                    onClick: handleOpen
                 };
-              } 
-              if (props.role === 'right') {
-                return {
+            }
+            if (props.role === 'popperTrigger') {
+              const { handleClick } = usePopper();
+              return {
                   ...props,
-                  onClick: handleCheckedRight,
-                  disabled: left.filter(item => checked.includes(item)).length === 0
-                };
-              }
-              
-              if (props.role === 'left') {
-                return {
+                  onClick: handleClick
+              };
+            }
+            if (props.role === 'modalTrigger') {
+              const { handleOpen } = useModal();
+              return {
                   ...props,
-                  onClick: handleCheckedLeft,
-                  disabled: right.filter(item => checked.includes(item)).length === 0
-                };
-              }
-              
-              if (props.role === 'leftAll') {
-                return {
+                  onClick: handleOpen
+              };
+            }
+            if (props.role === 'dialog') {
+              const { handleClose } = useModal();
+              return {
                   ...props,
-                  onClick: handleAllLeft,
-                  disabled: right.length === 0
-                };
-              }    
-              return props;
+                  onClick: handleClose
+              };
+            }
+            if (props.role === 'rightAll') {
+              const { handleAllRight, left } = useTransferList();
+              return {
+                ...props,
+                onClick: handleAllRight,
+                disabled: left.length === 0
+              };
+            } 
+            if (props.role === 'right') {
+              const { handleCheckedRight, left, checked } = useTransferList();
+              return {
+                ...props,
+                onClick: handleCheckedRight,
+                disabled: left.filter(item => checked.includes(item)).length === 0
+              };
+            }
+            
+            if (props.role === 'left') {
+              const { handleCheckedLeft, right, checked } = useTransferList();
+              return {
+                ...props,
+                onClick: handleCheckedLeft,
+                disabled: right.filter(item => checked.includes(item)).length === 0
+              };
+            }
+            
+            if (props.role === 'leftAll') {
+              const { handleAllLeft, right } = useTransferList();
+              return {
+                ...props,
+                onClick: handleAllLeft,
+                disabled: right.length === 0
+              };
+            }    
+            return props;
+          },
+          Collapse: (props, useState, useContext) => {
+            const { checked } = useTransition();
+            if (props.role === 'collapse') {
+
+              return {
+                ...props,
+                in: Boolean(checked) 
+              };
+            }
+            return props;
           },
           CustomTabPanel: (props, useState, useContext) => {
             // Extract required values using useContext
@@ -520,6 +924,48 @@ const html = `
               };
             }
           },
+          Drawer: (props, useState, useContext) => {
+            const { open, toggleDrawer } = useDrawer();
+            return {
+              ... props,
+              open: open,
+              onClose: toggleDrawer(false)
+            }
+          },
+          FormControlLabel: (props, useState) => {
+            // Handle the case where the control needs to be a specific MUI component
+            if (props.control && props.control.type === 'Radio') {
+              props.control = React.createElement(MaterialUI.Radio);
+          }
+          if (props.role === 'transition') {
+              const { checked, handleChange } = useTransition();
+
+              const switchComponent = React.createElement(MaterialUI.Switch, { checked: checked, onChange: handleChange });
+              return {
+                  ...props,
+                  control: switchComponent
+              };
+          }
+          return props;
+          },
+          Menu: (props, useState, useContext) => {
+            const { anchorEl, open, handleClose } = useMenu();
+    
+            return {
+                ...props,
+                anchorEl: anchorEl,
+                open: open,
+                onClose: handleClose
+            };
+          },
+          MenuItem: (props, useState, useContext) => {
+            const { handleClose } = useMenu();
+    
+            return {
+                ...props,
+                onClick: handleClose
+            };
+          },
           Modal: (props, useState, useContext) => {
             const { open, handleClose } = useModal();
     
@@ -550,39 +996,14 @@ const html = `
                 id: open ? "simple-popper" : undefined,
             };
           },
-          Autocomplete: (props, useState) => {
-              // Assuming renderInput needs to be a function creating a TextField with specific props
-              if (typeof props.renderInput === 'string') {
-                  props.renderInput = (params) => React.createElement(MaterialUI.TextField, {
-                      ...params,
-                      label: props.renderInput  // Use the string as label, or customize as needed
-                  });
-              }
-              props.options = [
-                  { label: 'The Shawshank Redemption', year: 1994 },
-                  { label: 'The Godfather', year: 1972 },
-                  { label: 'The Godfather: Part II', year: 1974 },
-                  { label: 'The Dark Knight', year: 2008 },
-                  { label: '12 Angry Men', year: 1957 },
-              ];
-      
-              return props;
-          },
-          FormControlLabel: (props, useState) => {
-              // Handle the case where the control needs to be a specific MUI component
-              if (props.control && props.control.type === 'Radio') {
-                props.control = React.createElement(MaterialUI.Radio);
-            }
-            if (props.role === 'transition') {
-                const { checked, handleChange } = useTransition();
+          Rating: (props, useState, useContext) => {
+            const { ratingValue, handleRatingChange } = useRating();
 
-                const switchComponent = React.createElement(MaterialUI.Switch, { checked: checked, onChange: handleChange });
-                return {
-                    ...props,
-                    control: switchComponent
-                };
+            return {
+              ...props,
+              value: ratingValue,
+              onChange: handleRatingChange
             }
-            return props;
           },
           Snackbar: (props, useState, useContext) => {
             const { open, handleClose } = useModal();
@@ -609,6 +1030,17 @@ const html = `
                 action: action,
             };
           },
+          Stepper: (props, useState, useContext) => {
+            const { activeStep, handleNext, handleBack, handleReset } = useStepper();
+           
+            return {
+              ...props,
+              activeStep, 
+              handleNext,
+              handleBack,
+              handleReset
+            }
+          },
           Tabs: (props, useState, useContext) => {
             const { value, handleChange } = useTabs ();
             
@@ -637,18 +1069,6 @@ const html = `
           
             return modifiedProps;
           },
-          Collapse: (props, useState, useContext) => {
-            const { checked } = useTransition();
-            if (props.role === 'collapse') {
-
-              return {
-                ...props,
-                in: Boolean(checked) 
-              };
-            }
-            return props;
-          }
-          // Additional components can be configured similarly
         };
   
         const isJsonString = (str) => {
@@ -664,8 +1084,6 @@ const html = `
           const { type, props } = data;
           let { children } = data;
           const Component = MaterialUI[type] || 'div';
-          
-          console.log('createComponentFromData Component', Component)
   
           if (Component === undefined) {
             console.error(\`Component type \${type} is undefined.\`);
@@ -676,6 +1094,22 @@ const html = `
             return ImageListComponent();
           }
 
+          if (type === 'DrawerList') {
+            return DrawerList();
+          }
+
+          // Handle creation of Tooltip component
+          if (type === 'Tooltip') {
+              // Extract props
+              const { title, ...otherProps } = props;
+      
+              // Recursively process children if any
+              const tooltipContent = children ? children.map(createComponentFromData) : null;
+      
+              // Return the Tooltip component with title and other props
+              return React.createElement(MaterialUI.Tooltip, { title, ...otherProps }, tooltipContent);
+          }
+
           // Handle creation of Tab component
           if (type === 'Tab') {
             // Extract props
@@ -695,7 +1129,6 @@ const html = `
               // Apply specific configuration if exists
               if (componentConfigs[type]) {
                   configuredProps = componentConfigs[type](configuredProps, useState);
-                  console.log('configuredProps', configuredProps)
               }
 
               // Process children components recursively
@@ -708,30 +1141,51 @@ const html = `
                     return child;
                 } else if (typeof child === 'object' && child !== null) {
                     // Check if the child is an Item object and create a component accordingly
-                    if (child.type === 'Item') {
-                        // Define the Item component with styled(MaterialUI.Paper)
-                        const Item = styled(MaterialUI.Paper)(({ backgroundColor, textColor }) => ({
-                            backgroundColor: backgroundColor || '#1A2027',
-                            color: textColor || '#FFFFFF',
-                            padding: '8px', // Adjust padding as needed
-                            textAlign: 'center',
-                        }));
-            
-                        // Extract props and children from the child object
-                        const { props, children } = child;
-            
-                        // Return the created Item component with its props and children
-                        return React.createElement(Item, props, children);
-                    } else {
-                        // Recursively process other types of objects
-                        return createComponentFromData(child);
-                    }
+                    if (child.type === 'Stepper') {
+                      return React.createElement(VerticalStepper, { steps: steps });
+                    } else if (child.type === 'SpeedDial') {
+                      // Special handling for the SpeedDial component, including its icon
+                      const newProps = {
+                        ...child.props,
+                        icon: React.createElement(MaterialUI.SpeedDialIcon), // Assuming SpeedDialIcon is correctly referenced
+                      };
+                    
+                      // Recursively process child components if any
+                      const childrenElements = child.children ? child.children.map(processChildren) : [];
+                    
+                      // Return the SpeedDial component with the newProps and processed children
+                      return React.createElement(MaterialUI.SpeedDial, newProps, ...childrenElements);
+                    } else if (child.type === 'SpeedDialAction') {
+                      return React.createElement(MaterialUI.SpeedDialAction, {
+                          key: child.props.name,
+                          icon: React.createElement(MaterialUI.SpeedDialIcon),
+                          tooltipTitle: child.props.name
+                      });
+                    } else if (child.type === 'customList') {
+                      // Creating customList component
+                      return customList(child.props.items);
+                    } else if (child.type === 'Item') {
+                          // Define the Item component with styled(MaterialUI.Paper)
+                          const Item = styled(MaterialUI.Paper)(({ backgroundColor, textColor }) => ({
+                              backgroundColor: backgroundColor || '#1A2027',
+                              color: textColor || '#FFFFFF',
+                              padding: '8px', // Adjust padding as needed
+                              textAlign: 'center',
+                          }));
+              
+                          // Extract props and children from the child object
+                          const { props, children } = child;
+              
+                          // Return the created Item component with its props and children
+                          return React.createElement(Item, props, children);
+                      } else {
+                          // Recursively process other types of objects
+                          return createComponentFromData(child);
+                      }
                 }
                 return null;
               };
 
-              console.log('Final props for component:', type, configuredProps);
-
               // If the component is a Grid with children of type Item, process them
               if (type === 'Grid' && Array.isArray(children)) {
                 const updatedChildren = children.map(processChildren);
@@ -762,7 +1216,6 @@ const html = `
             if(segment.trim().startsWith('{') && segment.trim().endsWith('}')) {
               try {
                 const jsonData = JSON.parse(segment);
-                console.log('jsonData', jsonData);
                 if (jsonData.props && jsonData.props.children) {
                   jsonData.children = jsonData.children || [];
                   jsonData.children = [...jsonData.children, ...jsonData.props.children];
@@ -770,7 +1223,7 @@ const html = `
                 const componentContainer = document.createElement('div');
                 container.appendChild(componentContainer);
                 const component = createComponentFromData(jsonData);
-                console.log('component', component)
+       
                 let correctProvider;
                 // variable to hold the correct provider
                 if (Array.isArray(jsonData.children) && jsonData.children.some(child => child.type === 'Modal' || child.type === 'Backdrop' || child.type === 'Dialog' || child.type === 'Snackbar')) {
@@ -782,6 +1235,18 @@ const html = `
                 if (Array.isArray(jsonData.children) && jsonData.children.some(child => child.type === 'Popper')) {
                   correctProvider = PopperProvider;
                 }
+                if (Array.isArray(jsonData.children) && jsonData.children.some(child => child.type === 'Drawer')) {
+                  correctProvider = DrawerProvider;
+                }
+                if (Array.isArray(jsonData.children) && jsonData.children.some(child => child.type === 'Menu')) {
+                  correctProvider = MenuProvider;
+                }
+                if (Array.isArray(jsonData.children) && jsonData.children.some(child => child.type === 'Rating')) {
+                  correctProvider = RatingProvider;
+                }
+                if (Array.isArray(jsonData.children) && jsonData.children.some(child => child.type === 'Stepper')) {
+                  correctProvider = StepperProvider;
+                }
                 if (
                   jsonData.children &&
                   Array.isArray(jsonData.children) &&
@@ -800,20 +1265,11 @@ const html = `
                 ) {
                   correctProvider = TransitionProvider;
                 }
-              
-                if (jsonData.type === 'Grid' &&
-                Array.isArray(jsonData.children) &&
-                jsonData.children.some(child => 
-                    child.type === 'customList' && 
-                    child.props.items &&
-                    (child.props.items === 'left' || child.props.items === 'right')
-                )
-                ) {
-                    correctProvider = TransferListProvider;
+                if (jsonData.type === 'Grid' && findCustomListInChildren(jsonData.children)) {
+                  correctProvider = TransferListProvider;
                 }
-                
+
                 if(!correctProvider) {
-                  console.log('div check')
                   ReactDOM.render(component, componentContainer);
                 } else {
                   ReactDOM.render(
diff --git a/app/src/helperFunctions/componentBuilder.tsx b/app/src/helperFunctions/componentBuilder.tsx
index 5f6f64c1..cd9bae1e 100644
--- a/app/src/helperFunctions/componentBuilder.tsx
+++ b/app/src/helperFunctions/componentBuilder.tsx
@@ -14,7 +14,6 @@ const componentBuilder = (
 ): React.ReactNode[] => {
   const componentsToRender = [];
   for (const element of array) {
-    console.log('componentBuilder element', element);
     if (element.name === 'separator') continue;
     const elementType = element.name;
     const childId = element.childId;
@@ -32,7 +31,6 @@ const componentBuilder = (
       const baseData = MUITypes.find(
         (m) => m.tag === elementType
       ).componentData;
-      console.log('baseData', baseData);
       if (!baseData) return null;
       const componentData = {
         ...baseData,
diff --git a/app/src/helperFunctions/generateCode.ts b/app/src/helperFunctions/generateCode.ts
index 6758da8f..61485884 100644
--- a/app/src/helperFunctions/generateCode.ts
+++ b/app/src/helperFunctions/generateCode.ts
@@ -13,6 +13,28 @@ declare global {
   }
 }
 
+let muiGenerator;
+let handleRouteLink;
+let insertNestedJsxBeforeClosingTag;
+let modifyAndIndentJsx;
+let insertAttribute;
+let writeStateProps;
+let createRender;
+let indentLinesExceptFirst;
+let createContextImport;
+let createEventHandler;
+let getEnrichedChildren;
+let formatStyles;
+let elementTagDetails;
+let writeNestedElements;
+let generateMUIImportStatements;
+let generateStateAndEventHandlerCode;
+let tabSpacer;
+let levelSpacer;
+let elementGenerator;
+let collectMUIImports;
+let collectStateAndEventHandlers;
+
 /**
  * Generates code based on the component hierarchy and returns the rendered code.
  * @param {Component[]} components - Array of components in the hierarchy.
@@ -92,7 +114,7 @@ const generateUnformattedCode = (
    * @returns {Array<ChildElement | MUIComponent>} - An array of objects representing enriched children, including components, HTML elements,
    * Material UI components, and route links.
    */
-  const getEnrichedChildren = (
+  getEnrichedChildren = (
     currentComponent: Component | ChildElement | MUIComponent
   ): Array<ChildElement | MUIComponent> => {
     const enrichedChildren = [];
@@ -173,6 +195,7 @@ const generateUnformattedCode = (
                 'avatar',
                 'badge',
                 'chip',
+                'divider',
                 'list',
                 'table',
                 'tooltip',
@@ -238,7 +261,7 @@ const generateUnformattedCode = (
    * @param {object} styleObj - The object containing styles to format.
    * @returns {string} - The formatted styles in React inline style format.
    */
-  const formatStyles = (styleObj): string => {
+  formatStyles = (styleObj): string => {
     // check if the style object is empty
     if (Object.keys(styleObj).length === 0) return '';
     // Convert the style object to a string in React inline style format
@@ -253,7 +276,7 @@ const generateUnformattedCode = (
    * @param {ChildElement} childElement - The child element to generate details for.
    * @returns {string} - The generated details as a string.
    */
-  const elementTagDetails = (childElement): string => {
+  elementTagDetails = (childElement): string => {
     const details = [];
     // Add id attribute if childId exists and the element is not a Route
     if (childElement.childId && childElement.tag !== 'Route') {
@@ -350,14 +373,14 @@ const generateUnformattedCode = (
    * @param {number} level - The level of indentation.
    * @returns {string} - The string representing the indentation.
    */
-  const tabSpacer = (level: number): string => '  '.repeat(level);
+  tabSpacer = (level: number): string => '  '.repeat(level);
 
   /**
    * Generates a string consisting of new lines and indentation to represent spacing for a given level.
    * @param {number} level - The level of spacing.
    * @returns {string} - The string representing the spacing.
    */
-  const levelSpacer = (level: number): string => `\n${tabSpacer(level)}`;
+  levelSpacer = (level: number): string => `\n${tabSpacer(level)}`;
 
   /**
    * Generates JSX elements based on the provided child element.
@@ -365,7 +388,7 @@ const generateUnformattedCode = (
    * @param {number} [level=0] - The nesting level of the element. Default is 0.
    * @returns {string[]} - An array of strings representing JSX elements.
    */
-  const elementGenerator = (
+  elementGenerator = (
     childElement: ChildElement,
     level: number = 0
   ): string[] => {
@@ -438,7 +461,7 @@ const generateUnformattedCode = (
    * @param {number} indentationLevel The level of indentation for the nested JSX.
    * @returns {string} The updated JSX string with nested elements inserted.
    */
-  const insertNestedJsxBeforeClosingTag = (
+  insertNestedJsxBeforeClosingTag = (
     parentJsx: string,
     nestedJsx: string[],
     indentationLevel: number
@@ -464,87 +487,101 @@ const generateUnformattedCode = (
   };
 
   /**
-   * Modifies JSX elements by adding new props and indenting them properly.
-   * @param {string[]} jsxAry - The array of JSX elements to modify.
-   * @param {string} newProps - The new props to add to the JSX elements.
-   * @param {string} childId - The ID of the child element.
-   * @param {string} name - The name of the child element.
-   * @param {string} key - The key to insert into the JSX.
-   * @returns {string[]} - The modified JSX elements with added props and proper indentation.
+   * Inserts a specified attribute into a JSX string at a given index. This function ensures
+   * correct formatting by maintaining exactly one space before and after the inserted attribute.
+   * It effectively manages whitespace to prevent issues such as double spaces or missing spaces
+   * around the newly inserted attribute. This function specifically preserves the structural integrity
+   * of JSX tags, avoiding alterations to the closing '>' or unintended removal of critical syntax elements.
+   *
+   * @param {string} line - The original JSX string where the attribute will be inserted. This string
+   *                        should already include the opening tag of a JSX element.
+   * @param {number} index - The position within the string to insert the attribute. This index should
+   *                         ideally be placed right after the component name or the last attribute before
+   *                         the closing '>' of the tag.
+   * @param {string} attribute - The attribute to insert into the JSX string. This parameter should include
+   *                             both the attribute name and its value (e.g., `type="button"`), and must be
+   *                             properly formatted as it would appear in JSX.
+   * @returns {string} - The modified JSX string with the new attribute inserted at the specified position,
+   *                     ensuring correct formatting and spacing are maintained.
    */
-  const modifyAndIndentJsx = (
+  insertAttribute = (
+    line: string,
+    index: number,
+    attribute: string
+  ): string => {
+    const before = line.substring(0, index);
+    console.log('before', before);
+
+    // Remove only leading spaces from `after`, not the '>'
+    const after = line.substring(index).replace(/^\s+/, '');
+    console.log('after', after);
+
+    // Ensure there is exactly one space before and after the inserted attribute, without removing '>'
+    return `${before} ${attribute.trim()} ${after}`;
+  };
+
+  /**
+   * Modifies JSX array by inserting 'id' and 'newProps' attributes into the specified component.
+   * The function ensures that each attribute is added with correct formatting and spacing,
+   * preserving the original indentation of each line for consistent layout.
+   *
+   * @param {string[]} jsxAry - The array of JSX strings to be modified.
+   * @param {string} newProps - The new properties to add, formatted as a single string.
+   * @param {string} childId - The ID value to be used in the 'id' attribute, should not include 'id='.
+   * @param {string} name - The name of the component to which the 'id' and 'newProps' are added.
+   * @param {string} key - A unique key for the 'id' attribute, typically the same as 'childId'.
+   * @returns {string[]} - The modified array of JSX strings with the new attributes added.
+   */
+  modifyAndIndentJsx = (
     jsxAry: string[],
     newProps: string,
     childId: string,
     name: string,
     key: string
   ): string[] => {
-    // Define a regular expression to match the start tag of the specified child element
     const tagRegExp = new RegExp(`^<${name}(\\s|>)`);
 
-    // Iterate through each line of JSX code
     const modifiedJsx = jsxAry.map((line, index) => {
-      // Capture the original indentation by extracting leading spaces
       const originalIndent = line.match(/^[\s]*/)[0];
       const trimmedLine = line.trim();
-      // Find the position right after the component name to insert id and newProps
-      let insertIndex = trimmedLine.indexOf(`<${name}`) + `<${name}`.length;
-      // Condition for the first line (index 0)
-      if (index === 0) {
-        // Check if the line contains the start tag of the specified child element
-        if (tagRegExp.test(trimmedLine)) {
-          // Check and insert id if not already present
-          if (!trimmedLine.includes(`id=`) && childId) {
-            line = `${trimmedLine.substring(
-              0,
-              insertIndex
-            )} ${childId}${trimmedLine.substring(insertIndex)}`;
-            // Adjust insertIndex for the next insertion
-            insertIndex += childId.length + 1;
-          } else if (trimmedLine.includes(`id=`) && childId) {
-            // Define the insertion point for "{key} " right after `id="`
-            let idInsertIndex = trimmedLine.indexOf(`id="`) + 4;
-            // Insert "{key} " at the identified position within the existing id value
-            line = `${trimmedLine.substring(
-              0,
-              idInsertIndex
-            )}${key} ${trimmedLine.substring(idInsertIndex)}`;
-          }
-          // Insert newProps at the updated insertion index
-          if (newProps) {
-            line = `${line.substring(
-              0,
-              insertIndex
-            )} ${newProps}${line.substring(insertIndex)}`;
-          }
-        } else {
-          // If the regex test fails but it's the first line, just add the id
-          if (!trimmedLine.includes(`id=`) && childId) {
-            let spaceIndex = trimmedLine.indexOf(' ');
-            if (spaceIndex === -1) {
-              // If no space found, use position before '>'
-              spaceIndex = trimmedLine.indexOf('>');
-            }
-            line = `${trimmedLine.substring(
-              0,
-              spaceIndex
-            )} ${childId} ${trimmedLine.substring(spaceIndex)}`;
-          }
+
+      // Only modify lines that contain the start tag of the specified child element
+      if (tagRegExp.test(trimmedLine)) {
+        let modifiedLine = trimmedLine;
+
+        // Position to insert id and newProps, right after the component name
+        let insertIndex = trimmedLine.indexOf(name) + name.length;
+
+        // Check if 'id' is present and modify or insert accordingly
+        const idRegex = /id="[^"]*"/;
+        const idMatch = trimmedLine.match(idRegex);
+        if (idMatch) {
+          // If an 'id' attribute is already present, append the key to its value
+          const idContent = idMatch[0].slice(0, -1) + ` ${key}"`; // Assumes existing id does not end with a space
+          modifiedLine = modifiedLine.replace(idRegex, idContent);
+        } else if (childId) {
+          // Insert 'id' attribute if it's not present and a childId is provided
+          modifiedLine = insertAttribute(
+            modifiedLine,
+            insertIndex,
+            `id="${key}"`
+          );
+          insertIndex += ` id="${key}"`.length; // Update index to account for added id length
         }
-      } else if (index > 0 && tagRegExp.test(trimmedLine)) {
-        insertIndex = line.indexOf(`<${name}`) + `<${name}`.length;
+
+        // Insert newProps at the updated insertion index
         if (newProps) {
-          line = `${line.substring(0, insertIndex)} ${newProps}${line.substring(
-            insertIndex
-          )}`;
+          modifiedLine = insertAttribute(modifiedLine, insertIndex, newProps);
         }
-      } else {
-        // For other lines, no changes are made
-        line = trimmedLine;
+
+        // Return the modified line with original indentation preserved
+        return originalIndent + modifiedLine;
       }
-      // Return the line with its original indentation preserved
-      return originalIndent + line; // Avoid trimming here as line may already include necessary spaces
+
+      // Return the line unchanged if it doesn't contain the start tag
+      return line;
     });
+
     return modifiedJsx;
   };
 
@@ -554,7 +591,7 @@ const generateUnformattedCode = (
    * @param {number} [level=0] - The indentation level.
    * @returns {string} - The generated JSX for the Material UI component.
    */
-  const muiGenerator = (child: ChildElement, level: number = 0): string => {
+  muiGenerator = (child: ChildElement, level: number = 0): string => {
     let childId = '';
     let passedInPropsString = '';
     let key = '';
@@ -617,7 +654,7 @@ const generateUnformattedCode = (
    * @param {number} level - The indentation level.
    * @returns {string} - The generated JSX for the route link.
    */
-  const handleRouteLink = (child, level) => {
+  handleRouteLink = (child, level) => {
     const jsxArray = [];
     const indentation = '  '.repeat(level);
 
@@ -663,7 +700,7 @@ const generateUnformattedCode = (
    * @param {MUIType[]} MUITypes - The array of Material UI component types.
    * @param {Set<string>} muiImports - The set to store collected Material UI imports.
    */
-  const collectMUIImports = (
+  collectMUIImports = (
     component: ChildElement | MUIComponent,
     MUITypes: MUIType[],
     muiImports: Set<string>
@@ -693,10 +730,11 @@ const generateUnformattedCode = (
 
   /**
    * Generates Material UI import statements from a set of import statements.
+   * This version of the function preserves the original formatting, including comments.
    * @param {Set<string>} muiImports - The set of Material UI import statements.
-   * @returns {string} - The generated import statements as a single string.
+   * @returns {string} - The generated import statements as a single string, preserving initial spaces and comments.
    */
-  const generateMUIImportStatements = (muiImports: Set<string>): string =>
+  generateMUIImportStatements = (muiImports: Set<string>): string =>
     Array.from(muiImports).join('\n');
 
   /**
@@ -705,7 +743,7 @@ const generateUnformattedCode = (
    * @param {MUIType[]} MUITypes - The array of Material UI component types.
    * @param {Set<string>} handlersCollection - The set to store collected state and event handler snippets.
    */
-  const collectStateAndEventHandlers = (
+  collectStateAndEventHandlers = (
     component: ChildElement | MUIComponent,
     MUITypes: MUIType[],
     handlersCollection: Set<string>
@@ -730,13 +768,17 @@ const generateUnformattedCode = (
   };
 
   /**
-   * Generates Material UI import statements from a set of import statements.
-   * @param {Set<string>} handlersCollection - The set of Material UI import statements.
-   * @returns {string} - The generated import statements as a single string.
+   * Generates Material UI state and event handler code from a set of statements,
+   * preserving indentation and removing comments.
+   * @param {Set<string>} handlersCollection - The set of handler statements.
+   * @returns {string} - The generated handler statements as a single, clean string, with preserved indentation.
    */
-  const generateStateAndEventHandlerCode = (
+  generateStateAndEventHandlerCode = (
     handlersCollection: Set<string>
-  ): string => Array.from(handlersCollection).join('\n');
+  ): string =>
+    Array.from(handlersCollection)
+      .map((line) => line.replace(/\/\/.*$/, '')) // Remove only the comment, preserve everything before //
+      .join('\n');
 
   /**
    * Writes nested elements based on the provided enriched children.
@@ -744,7 +786,7 @@ const generateUnformattedCode = (
    * @param {number} [level=0] - The nesting level of the elements. 0 by default.
    * @returns {string[]} - An array of strings representing the nested elements.
    */
-  const writeNestedElements = (enrichedChildren, level = 0) => {
+  writeNestedElements = (enrichedChildren, level = 0) => {
     return enrichedChildren.flatMap((child) => {
       if (child.type === 'Component') {
         return [`<${child.name} ${elementTagDetails(child)} />`];
@@ -764,7 +806,7 @@ const generateUnformattedCode = (
    * @param {string[]} stateArray - Array of strings representing the user-created state.
    * @returns {string} - A string containing code to incorporate the user-created state.
    */
-  const writeStateProps = (stateArray: string[]): string => {
+  writeStateProps = (stateArray: string[]): string => {
     let stateToRender: string = '';
     for (const element of stateArray) {
       stateToRender += levelSpacer(2) + element + ';';
@@ -814,7 +856,7 @@ const generateUnformattedCode = (
      * Creates a JSX string representing the rendered output of enriched children.
      * @returns {string} - The JSX string representing the rendered output.
      */
-    const createRender = (): string => {
+    createRender = (): string => {
       const jsxElements = writeNestedElements(enrichedChildren);
 
       let jsxString = jsxElements.join('\n');
@@ -852,7 +894,7 @@ const generateUnformattedCode = (
      * @param {number} level - The level of indentation (number of spaces).
      * @returns {string} - The indented text.
      */
-    const indentLinesExceptFirst = (text: string, level: number): string => {
+    indentLinesExceptFirst = (text: string, level: number): string => {
       const lines = text.split('\n');
       const firstLine = lines.shift(); // Remove the first line
       const indentation = '  '.repeat(level);
@@ -864,7 +906,7 @@ const generateUnformattedCode = (
      * Generates import statements for the components based on their contexts.
      * @returns {string} - The import statements as a string.
      */
-    const createContextImport = (): string => {
+    createContextImport = (): string => {
       if (!(currComponent.name in componentContext)) return '';
 
       let importStr = '';
@@ -880,7 +922,7 @@ const generateUnformattedCode = (
      * @param {ChildElement[]} children - The array of children elements.
      * @returns {string}- The event handler functions as a string.
      */
-    const createEventHandler = (children: ChildElement[]): string => {
+    createEventHandler = (children: ChildElement[]): string => {
       let importStr = '';
       children.map((child) => {
         if (child.type === 'HTML Element') {
@@ -1013,4 +1055,29 @@ const formatCode = (code: string): string => {
     return code;
   }
 };
-export default generateCode;
+export {
+  muiGenerator,
+  handleRouteLink,
+  insertNestedJsxBeforeClosingTag,
+  modifyAndIndentJsx,
+  insertAttribute,
+  writeStateProps,
+  createRender,
+  indentLinesExceptFirst,
+  createContextImport,
+  createEventHandler,
+  generateUnformattedCode,
+  getEnrichedChildren,
+  formatStyles,
+  elementTagDetails,
+  writeNestedElements,
+  generateMUIImportStatements,
+  generateStateAndEventHandlerCode,
+  tabSpacer,
+  levelSpacer,
+  elementGenerator,
+  collectMUIImports,
+  collectStateAndEventHandlers,
+  formatCode,
+  generateCode as default // Maintaining generateCode as default export
+};
diff --git a/app/src/public/styles/style.css b/app/src/public/styles/style.css
index e8f90b67..9776ac7d 100644
--- a/app/src/public/styles/style.css
+++ b/app/src/public/styles/style.css
@@ -211,6 +211,7 @@ span.material-symbols-outlined {
 
 #HTMLgrid {
   margin: 5px;
+  padding: 0;
 }
 
 #HTMLItemsGrid {
@@ -224,6 +225,10 @@ span.material-symbols-outlined {
   padding: 10%;
   border-radius: 10px;
   box-shadow: #191919;
+  width: 120px;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
 }
 
 #HTMLItem:hover {
@@ -242,6 +247,7 @@ span.material-symbols-outlined {
   padding: 10%;
   border-radius: 10px;
   box-shadow: #191919;
+  width: 120px;
 }
 
 #MUIItem:hover {
@@ -774,10 +780,10 @@ CANVAS WINDOW
 }
 
 #renderFocus {
-  position: relative; 
+  position: relative;
   min-width: 50px;
-  max-width: 1200px; 
-  width: calc(100% - 280px); 
+  max-width: 1200px;
+  width: calc(100% - 280px);
   height: 100%;
   resize: horizontal;
   overflow: auto;
diff --git a/app/src/redux/MUITypes.ts b/app/src/redux/MUITypes.ts
index 62a890e7..cbd5c249 100644
--- a/app/src/redux/MUITypes.ts
+++ b/app/src/redux/MUITypes.ts
@@ -8,12 +8,12 @@ import { MUIType } from '../interfaces/Interfaces';
 24. Checkbox
 25. Floating Action Button
 26. Radio Group
-27. Rating // not working
+27. Rating
 28. Select
 29. Slider
 30. Switch
 31. Text Field
-32. Transfer List // not working
+32. Transfer List // displays but checkboxes are not clickable
 33. Toggle Button
 
 DATA DISPLAY
@@ -25,7 +25,7 @@ DATA DISPLAY
 39. Material Icons
 40. List
 41. Table
-42. Tooltip // not working
+42. Tooltip
 43. Typography
 
 FEEDBACK
@@ -45,12 +45,12 @@ SURFACES
 NAVIGATION
 54. Bottom Navigation
 55. Breadcrumbs
-56. Drawer //not working
+56. Drawer
 57. Link 
-58. Menu //not working (no state)
+58. Menu
 59. Pagination
 60. Speed Dial
-61. Stepper //not working
+61. Stepper
 62. Tabs 
 
 LAYOUT
@@ -86,8 +86,8 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import TextField from '@mui/material/TextField'",
-      "import Autocomplete from '@mui/material/Autocomplete'",
+      "import TextField from '@mui/material/TextField';",
+      "import Autocomplete from '@mui/material/Autocomplete';",
       '\nconst top100Films = [',
       "\t{ label: 'The Shawshank Redemption', year: 1994 },",
       "\t{ label: 'The Godfather', year: 1972 },",
@@ -209,7 +209,7 @@ const MUITypes: MUIType[] = [
     icon: 'EditAttributes',
     framework: 'reactClassic',
     nestable: true,
-    imports: ["import Button from '@mui/material/Button'"],
+    imports: ["import Button from '@mui/material/Button';"],
     stateAndEventHandlers: [],
     defaultProps: ['variant="contained"'],
     propOptions: [
@@ -229,7 +229,7 @@ const MUITypes: MUIType[] = [
       'sx',
       'variant'
     ],
-    jsx: [`<Button >Contained</Button>`],
+    jsx: [`<Button >Click Me</Button>`],
     componentData: {
       type: 'Button',
       props: {
@@ -252,8 +252,8 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: true,
     imports: [
-      "import Button from '@mui/material/Button",
-      "import ButtonGroup from '@mui/material/ButtonGroup'"
+      "import Button from '@mui/material/Button';",
+      "import ButtonGroup from '@mui/material/ButtonGroup';"
     ],
     stateAndEventHandlers: [],
     defaultProps: ['variant="contained"'],
@@ -304,7 +304,7 @@ const MUITypes: MUIType[] = [
     icon: 'CheckBoxOutlineBlank',
     framework: 'reactClassic',
     nestable: false,
-    imports: ["import Checkbox from '@mui/material/Checkbox'"],
+    imports: ["import Checkbox from '@mui/material/Checkbox';"],
     stateAndEventHandlers: [],
     defaultProps: ['defaultChecked'],
     propOptions: [
@@ -329,7 +329,7 @@ const MUITypes: MUIType[] = [
     ],
     jsx: [
       `<div>`,
-      `  <Checkbox {...{ inputProps: { 'aria-label': 'Checkbox demo' } }} />`,
+      `  <Checkbox inputProps={{ 'aria-label': 'Checkbox demo' }} />`,
       `</div>`
     ],
     componentData: {
@@ -358,9 +358,9 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: true,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import Fab from '@mui/material/Fab'",
-      "import AddIcon from '@mui/icons-material/Add'"
+      "import Box from '@mui/material/Box';",
+      "import Fab from '@mui/material/Fab';",
+      "import AddIcon from '@mui/icons-material/Add';"
     ],
     stateAndEventHandlers: [],
     defaultProps: ['color="primary" variant="circular"'],
@@ -414,11 +414,11 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Radio from '@mui/material/Radio'",
-      "import RadioGroup from '@mui/material/RadioGroup'",
-      "import FormControlLabel from '@mui/material/FormControlLabel'",
-      "import FormControl from '@mui/material/FormControl'",
-      "import FormLabel from '@mui/material/FormLabel'"
+      "import Radio from '@mui/material/Radio';",
+      "import RadioGroup from '@mui/material/RadioGroup';",
+      "import FormControlLabel from '@mui/material/FormControlLabel';",
+      "import FormControl from '@mui/material/FormControl';",
+      "import FormLabel from '@mui/material/FormLabel';"
     ],
     stateAndEventHandlers: [],
     defaultProps: ['defaultValue="female" name="radio-buttons-group"'],
@@ -493,14 +493,16 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import Rating from '@mui/material/Rating'",
-      "import Typography from '@mui/material/Typography'"
+      "import Box from '@mui/material/Box';",
+      "import Rating from '@mui/material/Rating';",
+      "import Typography from '@mui/material/Typography';"
     ],
     stateAndEventHandlers: [
-      'const [ratingValue, setRatingValue] = React.useState(2);'
+      'const [ratingValue, setRatingValue] = React.useState(2);\n'
+    ],
+    defaultProps: [
+      'name="simple-controlled" value={ratingValue} onChange={(event, newValue) => { setRatingValue(newValue); }}'
     ],
-    defaultProps: ['value={value}'],
     propOptions: [
       'defaultValue',
       'disabled',
@@ -523,7 +525,7 @@ const MUITypes: MUIType[] = [
     jsx: [
       `<Box sx={{ '& > legend': { mt: 2 } }}>`,
       `  <Typography component="legend">Controlled</Typography>`,
-      `  <Rating name="simple-controlled" onChange={(event, newValue) => { setRatingValue(newValue); }} />`,
+      `  <Rating />`,
       `</Box>`
     ],
     componentData: {
@@ -562,11 +564,11 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import InputLabel from '@mui/material/InputLabel'",
-      "import MenuItem from '@mui/material/MenuItem'",
-      "import FormControl from '@mui/material/FormControl'",
-      "import Select from '@mui/material/Select'"
+      "import Box from '@mui/material/Box';",
+      "import InputLabel from '@mui/material/InputLabel';",
+      "import MenuItem from '@mui/material/MenuItem';",
+      "import FormControl from '@mui/material/FormControl';",
+      "import Select from '@mui/material/Select';"
     ],
     stateAndEventHandlers: [],
     defaultProps: [],
@@ -677,8 +679,8 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import Slider from '@mui/material/Slider'",
+      "import Box from '@mui/material/Box';",
+      "import Slider from '@mui/material/Slider';",
       '\nconst initialSliderValue = 30;'
     ],
     stateAndEventHandlers: [
@@ -750,7 +752,7 @@ const MUITypes: MUIType[] = [
     icon: 'ToggleOn',
     framework: 'reactClassic',
     nestable: false,
-    imports: ["import Switch from '@mui/material/Switch'"],
+    imports: ["import Switch from '@mui/material/Switch';"],
     stateAndEventHandlers: [],
     defaultProps: [
       "inputProps={{ 'aria-label': 'Switch demo' }} defaultChecked"
@@ -799,8 +801,8 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import TextField from '@mui/material/TextField'"
+      "import Box from '@mui/material/Box';",
+      "import TextField from '@mui/material/TextField';"
     ],
     stateAndEventHandlers: [],
     defaultProps: ['variant="outlined"'],
@@ -867,8 +869,8 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import ToggleButton from '@mui/material/ToggleButton'",
-      "import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'"
+      "import ToggleButton from '@mui/material/ToggleButton';",
+      "import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';"
     ],
     stateAndEventHandlers: [
       'const [alignment, setAlignment] = React.useState("web");\n'
@@ -937,14 +939,14 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Grid from '@mui/material/Grid'",
-      "import List from '@mui/material/List'",
-      "import ListItemButton from '@mui/material/ListItemButton'",
-      "import ListItemIcon from '@mui/material/ListItemIcon'",
-      "import ListItemText from '@mui/material/ListItemText'",
-      "import Checkbox from '@mui/material/Checkbox'",
-      "import Button from '@mui/material/Button'",
-      "import Paper from '@mui/material/Paper'",
+      "import Grid from '@mui/material/Grid';",
+      "import List from '@mui/material/List';",
+      "import ListItemButton from '@mui/material/ListItemButton';",
+      "import ListItemIcon from '@mui/material/ListItemIcon';",
+      "import ListItemText from '@mui/material/ListItemText';",
+      "import Checkbox from '@mui/material/Checkbox';",
+      "import Button from '@mui/material/Button';",
+      "import Paper from '@mui/material/Paper';",
       '\nfunction not(a, b) {',
       '  return a.filter((value) => b.indexOf(value) === -1);\n};',
       '\nfunction intersection(a, b) {',
@@ -982,20 +984,21 @@ const MUITypes: MUIType[] = [
       '  setRight([]);\n};',
       '\nconst customList = (items) => (',
       '  <Paper sx={{ width: 200, height: 230, overflow: "auto" }}>',
-      '  <List dense component="div" role="list">',
-      '   {items.map((value) => {',
-      '     const labelId = `transfer-list-item-${value}-label`;',
-      '     return (',
-      '      <ListItemButton key={value} role="listitem" onClick={handleToggle(value)}>',
-      '       <ListItemIcon>',
-      '       <Checkbox checked={checked.indexOf(value) !== -1} tabIndex={-1} disableRipple inputProps={{ "aria-labelledby": labelId }} />',
-      '       </ListItemIcon>',
-      '       <ListItemText id={labelId} primary={`List item ${value + 1}`} />',
-      '       </ListItemButton>',
-      '    );',
-      '   })}',
-      '  </List>',
-      '  </Paper>\n);'
+      '    <List dense component="div" role="list">',
+      '      {items.map((value) => {',
+      '        const labelId = `transfer-list-item-${value}-label`;',
+      '        return (',
+      '          <ListItemButton key={value} role="listitem" onClick={handleToggle(value)}>',
+      '            <ListItemIcon>',
+      '              <Checkbox checked={checked.indexOf(value) !== -1} tabIndex={-1} disableRipple inputProps={{ "aria-labelledby": labelId }} />',
+      '            </ListItemIcon>',
+      '            <ListItemText id={labelId} primary={`List item ${value + 1}`} />',
+      '          </ListItemButton>',
+      '        );',
+      '      })}',
+      '    </List>',
+      '  </Paper>',
+      ');\n'
     ],
     defaultProps: ['sx={{ width: 200, height: 230, overflow: "auto" }}'],
     propOptions: [
@@ -1075,7 +1078,7 @@ const MUITypes: MUIType[] = [
                   'aria-label': 'move selected right',
                   role: 'right'
                 },
-                children: '&gt;' // Moves selected items from left to right
+                children: '>' // Moves selected items from left to right
               },
               {
                 type: 'Button',
@@ -1089,7 +1092,7 @@ const MUITypes: MUIType[] = [
                   'aria-label': 'move selected left',
                   role: 'left'
                 },
-                children: '&lt;' // Moves selected items from right to left
+                children: '<' // Moves selected items from right to left
               },
               {
                 type: 'Button',
@@ -1130,10 +1133,7 @@ const MUITypes: MUIType[] = [
     icon: 'Person',
     framework: 'reactClassic',
     nestable: false,
-    imports: [
-      "import Avatar from '@mui/material/Avatar'",
-      "import Stack from '@mui/material/Stack'"
-    ],
+    imports: ["import Avatar from '@mui/material/Avatar';"],
     stateAndEventHandlers: [],
     defaultProps: [
       'src={imageUrl} alt="User Profile" sx={{ width: 56, height: 56 }}'
@@ -1605,7 +1605,9 @@ const MUITypes: MUIType[] = [
       "import TableHead from '@mui/material/TableHead';",
       "import TableRow from '@mui/material/TableRow';",
       "import Paper from '@mui/material/Paper';",
-      '\nfunction createData(name, calories, fat, carbs, protein) { return { name, calories, fat, carbs, protein }; }',
+      '\nfunction createData(name, calories, fat, carbs, protein) {',
+      'return { name, calories, fat, carbs, protein };',
+      '};',
       '\nconst rows = [',
       "  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),",
       "  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),",
@@ -1878,8 +1880,8 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Button from '@mui/material/Button'",
-      "import Tooltip from '@mui/material/Tooltip'"
+      "import Button from '@mui/material/Button';",
+      "import Tooltip from '@mui/material/Tooltip';"
     ],
     stateAndEventHandlers: [],
     defaultProps: ['title="Add" arrow'],
@@ -1914,7 +1916,7 @@ const MUITypes: MUIType[] = [
       'TransitionComponent',
       'TransitionProps'
     ],
-    jsx: ['<Tooltip >', '  <Button>Arrow</Button>', '</Tooltip>'],
+    jsx: ['<Tooltip>', '  <Button>Arrow</Button>', '</Tooltip>'],
     componentData: {
       type: 'Tooltip',
       props: {
@@ -1948,10 +1950,7 @@ const MUITypes: MUIType[] = [
     icon: 'TextFields',
     framework: 'reactClassic',
     nestable: true,
-    imports: [
-      "import Box from '@mui/material/Box'",
-      "import Typography from '@mui/material/Typography'"
-    ],
+    imports: ["import Typography from '@mui/material/Typography';"],
     stateAndEventHandlers: [],
     defaultProps: ['variant="h3"'],
     propOptions: [
@@ -1989,8 +1988,8 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Alert from '@mui/material/Alert'",
-      "import CheckIcon from '@mui/icons-material/Check'"
+      "import Alert from '@mui/material/Alert';",
+      "import CheckIcon from '@mui/icons-material/Check';"
     ],
     stateAndEventHandlers: [],
     defaultProps: ['severity="success"'],
@@ -2020,7 +2019,7 @@ const MUITypes: MUIType[] = [
     componentData: {
       type: 'Alert',
       props: {
-        icon: '<CheckIcon fontSize="inherit" />',
+        icon: '<CheckIcon/>',
         severity: 'success',
         sx: { m: 1 }
       },
@@ -2039,9 +2038,9 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: true,
     imports: [
-      "import Backdrop from '@mui/material/Backdrop'",
-      "import CircularProgress from '@mui/material/CircularProgress'",
-      "import Button from '@mui/material/Button'"
+      "import Backdrop from '@mui/material/Backdrop';",
+      "import CircularProgress from '@mui/material/CircularProgress';",
+      "import Button from '@mui/material/Button';"
     ],
     stateAndEventHandlers: [
       'const [open, setOpen] = React.useState(false);',
@@ -2115,12 +2114,12 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Button from '@mui/material/Button'",
-      "import Dialog from '@mui/material/Dialog'",
-      "import DialogActions from '@mui/material/DialogActions'",
-      "import DialogContent from '@mui/material/DialogContent'",
-      "import DialogContentText from '@mui/material/DialogContentText'",
-      "import DialogTitle from '@mui/material/DialogTitle'"
+      "import Button from '@mui/material/Button';",
+      "import Dialog from '@mui/material/Dialog';",
+      "import DialogActions from '@mui/material/DialogActions';",
+      "import DialogContent from '@mui/material/DialogContent';",
+      "import DialogContentText from '@mui/material/DialogContentText';",
+      "import DialogTitle from '@mui/material/DialogTitle';"
     ],
     stateAndEventHandlers: [
       'const [open, setOpen] = React.useState(false);',
@@ -2258,7 +2257,7 @@ const MUITypes: MUIType[] = [
     nestable: false,
     imports: [
       "import CircularProgress from '@mui/material/CircularProgress';",
-      "import Box from '@mui/material/Box'"
+      "import Box from '@mui/material/Box';"
     ],
     stateAndEventHandlers: [],
     defaultProps: [],
@@ -2296,8 +2295,8 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: true,
     imports: [
-      "import Skeleton from '@mui/material/Skeleton'",
-      "import Stack from '@mui/material/Stack'"
+      "import Skeleton from '@mui/material/Skeleton';",
+      "import Stack from '@mui/material/Stack';"
     ],
     stateAndEventHandlers: [],
     defaultProps: ['loading'],
@@ -2362,10 +2361,10 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: true,
     imports: [
-      "import Button from '@mui/material/Button'",
-      "import Snackbar from '@mui/material/Snackbar'",
-      "import IconButton from '@mui/material/IconButton'",
-      "import CloseIcon from '@mui/icons-material/Close'"
+      "import Button from '@mui/material/Button';",
+      "import Snackbar from '@mui/material/Snackbar';",
+      "import IconButton from '@mui/material/IconButton';",
+      "import CloseIcon from '@mui/icons-material/Close';"
     ],
     stateAndEventHandlers: [
       'const [open, setOpen] = React.useState(false);',
@@ -2392,7 +2391,7 @@ const MUITypes: MUIType[] = [
       '        <CloseIcon fontSize="small" />',
       '      </IconButton>',
       '    </React.Fragment>',
-      '  );'
+      '  );\n'
     ],
     defaultProps: [
       'open={open} autoHideDuration={6000} onClose={handleClose} message="Note archived" action={action}'
@@ -2456,12 +2455,12 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: true,
     imports: [
-      "import Accordion from '@mui/material/Accordion'",
-      "import AccordionActions from '@mui/material/AccordionActions'",
-      "import AccordionSummary from '@mui/material/AccordionSummary'",
-      "import AccordionDetails from '@mui/material/AccordionDetails'",
-      "import ExpandMoreIcon from '@mui/icons-material/ExpandMore'",
-      "import Button from '@mui/material/Button'"
+      "import Accordion from '@mui/material/Accordion';",
+      "import AccordionActions from '@mui/material/AccordionActions';",
+      "import AccordionSummary from '@mui/material/AccordionSummary';",
+      "import AccordionDetails from '@mui/material/AccordionDetails';",
+      "import ExpandMoreIcon from '@mui/icons-material/ExpandMore';",
+      "import Button from '@mui/material/Button';"
     ],
     stateAndEventHandlers: [],
     defaultProps: [],
@@ -2540,13 +2539,13 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import AppBar from '@mui/material/AppBar'",
-      "import Box from '@mui/material/Box'",
-      "import Toolbar from '@mui/material/Toolbar'",
-      "import Typography from '@mui/material/Typography'",
-      "import Button from '@mui/material/Button'",
-      "import IconButton from '@mui/material/IconButton'",
-      "import MenuIcon from '@mui/icons-material/Menu'"
+      "import AppBar from '@mui/material/AppBar';",
+      "import Box from '@mui/material/Box';",
+      "import Toolbar from '@mui/material/Toolbar';",
+      "import Typography from '@mui/material/Typography';",
+      "import Button from '@mui/material/Button';",
+      "import IconButton from '@mui/material/IconButton';",
+      "import MenuIcon from '@mui/icons-material/Menu';"
     ],
     stateAndEventHandlers: [],
     defaultProps: ['position="static"'],
@@ -2634,12 +2633,12 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: true,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import Card from '@mui/material/Card'",
-      "import CardActions from '@mui/material/CardActions'",
-      "import CardContent from '@mui/material/CardContent'",
-      "import Button from '@mui/material/Button'",
-      "import Typography from '@mui/material/Typography'"
+      "import Box from '@mui/material/Box';",
+      "import Card from '@mui/material/Card';",
+      "import CardActions from '@mui/material/CardActions';",
+      "import CardContent from '@mui/material/CardContent';",
+      "import Button from '@mui/material/Button';",
+      "import Typography from '@mui/material/Typography';"
     ],
     stateAndEventHandlers: [],
     defaultProps: ['sx={{ minWidth: 275 }}'],
@@ -2729,8 +2728,8 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import Paper from '@mui/material/Paper'"
+      "import Box from '@mui/material/Box';",
+      "import Paper from '@mui/material/Paper';"
     ],
     stateAndEventHandlers: [],
     defaultProps: [],
@@ -2799,17 +2798,16 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import BottomNavigation from '@mui/material/BottomNavigation'",
-      "import BottomNavigationAction from '@mui/material/BottomNavigationAction'",
-      "import RestoreIcon from '@mui/icons-material/Restore'",
-      "import FavoriteIcon from '@mui/icons-material/Favorite'",
-      "import LocationOnIcon from '@mui/icons-material/LocationOn'"
+      "import Box from '@mui/material/Box';",
+      "import BottomNavigation from '@mui/material/BottomNavigation';",
+      "import BottomNavigationAction from '@mui/material/BottomNavigationAction';",
+      "import FolderIcon from '@mui/icons-material/Folder';",
+      "import RestoreIcon from '@mui/icons-material/Restore';",
+      "import FavoriteIcon from '@mui/icons-material/Favorite';",
+      "import LocationOnIcon from '@mui/icons-material/LocationOn';"
     ],
     stateAndEventHandlers: ['const [value, setValue] = React.useState(0);\n'],
-    defaultProps: [
-      'showLabels value={value} onChange={(event, newValue) => {setValue(newValue)}}'
-    ],
+    defaultProps: [],
     propOptions: [
       'children',
       'classes',
@@ -2821,10 +2819,11 @@ const MUITypes: MUIType[] = [
     ],
     jsx: [
       '<Box sx={{ width: 500 }}>',
-      '  <BottomNavigation >',
-      "    <BottomNavigationAction label='Recents' icon={<RestoreIcon />} />",
-      "    <BottomNavigationAction label='Favorites' icon={<FavoriteIcon />} />",
-      "    <BottomNavigationAction label='Nearby' icon={<LocationOnIcon />} />",
+      '  <BottomNavigation showLabels value={value} onChange={(event, newValue) => {setValue(newValue)}}>',
+      "    <BottomNavigationAction label='Recents' value='recents' icon={<RestoreIcon />} />",
+      "    <BottomNavigationAction label='Favorites' value='favorites' icon={<FavoriteIcon />} />",
+      "    <BottomNavigationAction label='Nearby' value='nearby' icon={<LocationOnIcon />} />",
+      "    <BottomNavigationAction label='Folder' value='folder' icon={<FolderIcon />} />",
       '  </BottomNavigation>',
       '</Box>'
     ],
@@ -2866,6 +2865,14 @@ const MUITypes: MUIType[] = [
                 icon: '<LocationOnIcon />',
                 sx: { backgroundColor: '#0671E3', color: 'white' }
               }
+            },
+            {
+              type: 'BottomNavigationAction',
+              props: {
+                label: 'Folder',
+                icon: '<FolderIcon />',
+                sx: { backgroundColor: '#0671E3', color: 'white' }
+              }
             }
           ]
         }
@@ -2884,11 +2891,9 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Breadcrumbs from '@mui/material/Breadcrumbs'",
-      "import Link from '@mui/material/Link'",
-      "import RestoreIcon from '@mui/icons-material/Restore'",
-      "import FavoriteIcon from '@mui/icons-material/Favorite'",
-      "import LocationOnIcon from '@mui/icons-material/LocationOn'"
+      "import Breadcrumbs from '@mui/material/Breadcrumbs';",
+      "import Link from '@mui/material/Link';",
+      "import Typography from '@mui/material/Typography';"
     ],
     stateAndEventHandlers: [
       '\nfunction handleClick(event) {',
@@ -2915,7 +2920,7 @@ const MUITypes: MUIType[] = [
       '  <Breadcrumbs >',
       "    <Link underline='hover' color='inherit' href='#'>MUI</Link>",
       "    <Link underline='hover' color='inherit' href='#'>Core</Link>",
-      "    <Link underline='hover' color='text.primary' href='#' aria-current='page'>Breadcrumbs</Link>",
+      "    <Typography color='text.primary'>Breadcrumbs</Typography>",
       '  </Breadcrumbs>',
       '</div>'
     ],
@@ -2978,52 +2983,54 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: true,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import Drawer from '@mui/material/Drawer'",
-      "import Button from '@mui/material/Button'",
-      "import List from '@mui/material/List'",
-      "import Divider from '@mui/material/Divider'",
-      "import ListItem from '@mui/material/ListItem'",
-      "import ListItemButton from '@mui/material/ListItemButton'",
-      "import ListItemIcon from '@mui/material/ListItemIcon'",
-      "import ListItemText from '@mui/material/ListItemText'",
-      "import InboxIcon from '@mui/icons-material/MoveToInbox'",
-      "import MailIcon from '@mui/icons-material/Mail'"
+      "import Box from '@mui/material/Box';",
+      "import Drawer from '@mui/material/Drawer';",
+      "import Button from '@mui/material/Button';",
+      "import List from '@mui/material/List';",
+      "import Divider from '@mui/material/Divider';",
+      "import ListItem from '@mui/material/ListItem';",
+      "import ListItemButton from '@mui/material/ListItemButton';",
+      "import ListItemIcon from '@mui/material/ListItemIcon';",
+      "import ListItemText from '@mui/material/ListItemText';",
+      "import InboxIcon from '@mui/icons-material/MoveToInbox';",
+      "import MailIcon from '@mui/icons-material/Mail';"
     ],
     stateAndEventHandlers: [
-      'const [open, setOpen] = React.useState(false);',
-      'const toggleDrawer = (newOpen) => () => {',
-      '  setOpen(newOpen);',
-      '};',
-      '\nconst DrawerList = (',
-      "  <Box sx={{ width: 250 }} role='presentation' onClick={toggleDrawer(false)}> ",
-      '    <List>',
-      "      {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (",
-      '        <ListItem key={text} disablePadding>',
-      '          <ListItemButton>',
-      '            <ListItemIcon>',
-      '              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}',
-      '            </ListItemIcon>',
-      '            <ListItemText primary={text} />',
-      '          </ListItemButton>',
-      '        </ListItem>',
-      '      ))}',
-      '    </List>',
-      '    <Divider />',
-      '    <List>',
-      "      {['All mail', 'Trash', 'Spam'].map((text, index) => (",
-      '        <ListItem key={text} disablePadding>',
-      '          <ListItemButton>',
-      '            <ListItemIcon>',
-      '              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}',
-      '            </ListItemIcon>',
-      '            <ListItemText primary={text} />',
-      '          </ListItemButton>',
-      '        </ListItem>',
-      '      ))}',
-      '    </List>',
-      '  </Box>',
-      ');\n'
+      // Ensuring every snippet is unique by appending unique details
+      'const [open, setOpen] = React.useState(false); // uniqueKey-001',
+      'const toggleDrawer = (newOpen) => () => { // uniqueKey-002',
+      '  setOpen(newOpen); // uniqueKey-003',
+      '}; // uniqueKey-004',
+      'const DrawerList = ( // uniqueKey-005',
+      '  <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}> // uniqueKey-006',
+      '    <List> // uniqueKey-007',
+      "      {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( // uniqueKey-008",
+      '        <ListItem key={text} disablePadding> // uniqueKey-009',
+      '          <ListItemButton> // uniqueKey-010',
+      '            <ListItemIcon> // uniqueKey-011',
+      '              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />} // uniqueKey-012',
+      '            </ListItemIcon> // uniqueKey-013',
+      '            <ListItemText primary={text} /> // uniqueKey-014',
+      '          </ListItemButton> // uniqueKey-015',
+      '        </ListItem> // uniqueKey-016',
+      '      ))} // uniqueKey-017',
+      '    </List> // uniqueKey-018',
+      '    <Divider /> // uniqueKey-019',
+      '    <List> // uniqueKey-020',
+      "      {['All mail', 'Trash', 'Spam'].map((text, index) => ( // uniqueKey-021",
+      '        <ListItem key={text} disablePadding> // uniqueKey-022',
+      '          <ListItemButton> // uniqueKey-023',
+      '            <ListItemIcon> // uniqueKey-024',
+      '              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />} // uniqueKey-025',
+      '            </ListItemIcon> // uniqueKey-026',
+      '            <ListItemText primary={text} /> // uniqueKey-027',
+      '          </ListItemButton> // uniqueKey-028',
+      '        </ListItem> // uniqueKey-029',
+      '      ))} // uniqueKey-030',
+      '    </List> // uniqueKey-031',
+      '  </Box> // uniqueKey-032',
+      '); // uniqueKey-033',
+      ''
     ],
     defaultProps: ['open={open} onClose={toggleDrawer(false)}'],
     propOptions: [
@@ -3051,171 +3058,27 @@ const MUITypes: MUIType[] = [
     ],
     componentData: {
       type: 'Box',
-      props: {
-        sx: { width: 250, m: 1 },
-        role: 'presentation',
-        onClick: 'toggleDrawer(false)'
-      },
+      props: {},
       children: [
         {
-          type: 'List',
-          children: [
-            {
-              type: 'ListItem',
-              props: { disablePadding: true, key: 'Inbox' },
-              children: [
-                {
-                  type: 'ListItemButton',
-                  children: [
-                    {
-                      type: 'ListItemIcon',
-                      children: 'InboxIcon'
-                    },
-                    {
-                      type: 'ListItemText',
-                      props: {
-                        primary: 'Inbox'
-                      }
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              type: 'ListItem',
-              props: { disablePadding: true, key: 'Starred' },
-              children: [
-                {
-                  type: 'ListItemButton',
-                  children: [
-                    {
-                      type: 'ListItemIcon',
-                      children: 'MailIcon'
-                    },
-                    {
-                      type: 'ListItemText',
-                      props: {
-                        primary: 'Starred'
-                      }
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              type: 'ListItem',
-              props: { disablePadding: true, key: 'Send email' },
-              children: [
-                {
-                  type: 'ListItemButton',
-                  children: [
-                    {
-                      type: 'ListItemIcon',
-                      children: 'InboxIcon'
-                    },
-                    {
-                      type: 'ListItemText',
-                      props: {
-                        primary: 'Send email'
-                      }
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              type: 'ListItem',
-              props: { disablePadding: true, key: 'Drafts' },
-              children: [
-                {
-                  type: 'ListItemButton',
-                  children: [
-                    {
-                      type: 'ListItemIcon',
-                      children: 'MailIcon'
-                    },
-                    {
-                      type: 'ListItemText',
-                      props: {
-                        primary: 'Drafts'
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: 'Divider'
+          type: 'Button',
+          props: {
+            onClick: 'toggleDrawer(true)',
+            role: 'drawer'
+          },
+          children: 'Open drawer'
         },
         {
-          type: 'List',
-          children: [
-            {
-              type: 'ListItem',
-              props: { disablePadding: true, key: 'All mail' },
-              children: [
-                {
-                  type: 'ListItemButton',
-                  children: [
-                    {
-                      type: 'ListItemIcon',
-                      children: 'InboxIcon'
-                    },
-                    {
-                      type: 'ListItemText',
-                      props: {
-                        primary: 'All mail'
-                      }
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              type: 'ListItem',
-              props: { disablePadding: true, key: 'Trash' },
-              children: [
-                {
-                  type: 'ListItemButton',
-                  children: [
-                    {
-                      type: 'ListItemIcon',
-                      children: 'MailIcon'
-                    },
-                    {
-                      type: 'ListItemText',
-                      props: {
-                        primary: 'Trash'
-                      }
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              type: 'ListItem',
-              props: { disablePadding: true, key: 'Spam' },
-              children: [
-                {
-                  type: 'ListItemButton',
-                  children: [
-                    {
-                      type: 'ListItemIcon',
-                      children: 'InboxIcon'
-                    },
-                    {
-                      type: 'ListItemText',
-                      props: {
-                        primary: 'Spam'
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
+          type: 'Drawer',
+          props: {
+            open: 'open',
+            onClose: 'toggleDrawer(false)'
+          },
+          children: {
+            type: 'DrawerList',
+            props: {},
+            children: ''
+          }
         }
       ]
     },
@@ -3232,8 +3095,8 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import Link from '@mui/material/Link'"
+      "import Box from '@mui/material/Box';",
+      "import Link from '@mui/material/Link';"
     ],
     stateAndEventHandlers: [],
     defaultProps: ['onClick={preventDefault}'],
@@ -3301,15 +3164,15 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Button from '@mui/material/Button'",
-      "import Menu from '@mui/material/Menu'",
-      "import MenuItem from '@mui/material/MenuItem'"
+      "import Button from '@mui/material/Button';",
+      "import Menu from '@mui/material/Menu';",
+      "import MenuItem from '@mui/material/MenuItem';"
     ],
     stateAndEventHandlers: [
       'const [anchorEl, setAnchorEl] = React.useState(null);',
       'const open = Boolean(anchorEl);',
-      'const handleClick = (event) => { setAnchorEl(event.currentTarget); };',
-      'const handleClose = () => { setAnchorEl(null); };'
+      'const handleClick = (event) => setAnchorEl(event.currentTarget);',
+      'const handleClose = () => setAnchorEl(null);\n'
     ],
     defaultProps: [
       "anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{'aria-labelledby': 'basic-button'}}"
@@ -3356,7 +3219,8 @@ const MUITypes: MUIType[] = [
             'aria-haspopup': 'true',
             'aria-expanded': "{open ? 'true' : undefined}",
             onClick: 'handleClick',
-            sx: { m: 1 }
+            sx: { m: 1 },
+            role: 'menu'
           },
           children: 'Dashboard'
         },
@@ -3409,10 +3273,7 @@ const MUITypes: MUIType[] = [
     icon: 'LastPage',
     framework: 'reactClassic',
     nestable: false,
-    imports: [
-      "import Pagination from '@mui/material/Pagination'",
-      "import Stack from '@mui/material/Stack'"
-    ],
+    imports: ["import Pagination from '@mui/material/Pagination';"],
     stateAndEventHandlers: [],
     defaultProps: ["count={10} color='secondary'"],
     propOptions: [
@@ -3469,20 +3330,20 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import SpeedDial from '@mui/material/SpeedDial'",
-      "import SpeedDialIcon from '@mui/material/SpeedDialIcon'",
-      "import SpeedDialAction from '@mui/material/SpeedDialAction'",
-      "import FileCopyIcon from '@mui/icons-material/FileCopyOutlined'",
-      "import SaveIcon from '@mui/icons-material/Save'",
-      "import PrintIcon from '@mui/icons-material/Print'",
-      "import ShareIcon from '@mui/icons-material/Share'",
+      "import Box from '@mui/material/Box';",
+      "import SpeedDial from '@mui/material/SpeedDial';",
+      "import SpeedDialIcon from '@mui/material/SpeedDialIcon';",
+      "import SpeedDialAction from '@mui/material/SpeedDialAction';",
+      "import FileCopyIcon from '@mui/icons-material/FileCopyOutlined';",
+      "import SaveIcon from '@mui/icons-material/Save';",
+      "import PrintIcon from '@mui/icons-material/Print';",
+      "import ShareIcon from '@mui/icons-material/Share';",
       '\nconst actions = [',
       "  { icon: <FileCopyIcon />, name: 'Copy' },",
       "  { icon: <SaveIcon />, name: 'Save' },",
       "  { icon: <PrintIcon />, name: 'Print' },",
       "  { icon: <ShareIcon />, name: 'Share' },",
-      ']'
+      '];'
     ],
     stateAndEventHandlers: [],
     defaultProps: [
@@ -3509,10 +3370,7 @@ const MUITypes: MUIType[] = [
     jsx: [
       "<Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>",
       '  <SpeedDial >',
-      "    <SpeedDialAction icon={<FileCopyIcon />} tooltipTitle='Copy' />",
-      "    <SpeedDialAction icon={<SaveIcon />} tooltipTitle='Save' />",
-      "    <SpeedDialAction icon={<PrintIcon />} tooltipTitle='Print' />",
-      "    <SpeedDialAction icon={<ShareIcon />} tooltipTitle='Share' />",
+      '    {actions.map((action) => (<SpeedDialAction key={action.name} icon={action.icon} tooltipTitle={action.name}/>))}',
       '  </SpeedDial>',
       '</Box>'
     ],
@@ -3538,28 +3396,28 @@ const MUITypes: MUIType[] = [
               type: 'SpeedDialAction',
               props: {
                 icon: '<FileCopyIcon />',
-                tooltipTitle: 'Copy'
+                name: 'Copy'
               }
             },
             {
               type: 'SpeedDialAction',
               props: {
                 icon: '<SaveIcon />',
-                tooltipTitle: 'Save'
+                name: 'Save'
               }
             },
             {
               type: 'SpeedDialAction',
               props: {
                 icon: '<PrintIcon />',
-                tooltipTitle: 'Print'
+                name: 'Print'
               }
             },
             {
               type: 'SpeedDialAction',
               props: {
                 icon: '<ShareIcon />',
-                tooltipTitle: 'Share'
+                name: 'Share'
               }
             }
           ]
@@ -3579,19 +3437,19 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import Stepper from '@mui/material/Stepper'",
-      "import Step from '@mui/material/Step'",
-      "import StepLabel from '@mui/material/StepLabel'",
-      "import StepContent from '@mui/material/StepContent'",
-      "import Button from '@mui/material/Button'",
-      "import Paper from '@mui/material/Paper'",
-      "import Typography from '@mui/material/Typography'",
+      "import Box from '@mui/material/Box';",
+      "import Stepper from '@mui/material/Stepper';",
+      "import Step from '@mui/material/Step';",
+      "import StepLabel from '@mui/material/StepLabel';",
+      "import StepContent from '@mui/material/StepContent';",
+      "import Button from '@mui/material/Button';",
+      "import Paper from '@mui/material/Paper';",
+      "import Typography from '@mui/material/Typography';",
       '\nconst steps = [',
       "  { label: 'Select campaign settings', description: `For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks and geographical locations you want your ads to show on, and more.` },",
       "  { label: 'Create an ad group', description: 'An ad group contains one or more ads which target a shared set of keywords.' },",
       "  { label: 'Create an ad', description: `Try out different ad text to see what brings in the most customers, and learn how to enhance your ads using features like ad extensions. If you run into any problems with your ads, find out how to tell if they're running and how to resolve approval issues.` }",
-      ']'
+      '];'
     ],
     stateAndEventHandlers: [
       'const [activeStep, setActiveStep] = React.useState(0);',
@@ -3648,7 +3506,7 @@ const MUITypes: MUIType[] = [
       type: 'Box',
       props: {
         sx: {
-          maxWidth: 400
+          maxWidth: '400'
         }
       },
       children: [
@@ -3658,7 +3516,73 @@ const MUITypes: MUIType[] = [
             activeStep: '{activeStep}',
             orientation: 'vertical'
           },
-          children: 'Dynamic children mapping based on steps array'
+          children: [
+            {
+              type: 'Step',
+              props: {
+                key: '{step.label}'
+              },
+              children: [
+                {
+                  type: 'StepLabel',
+                  props: {
+                    optional:
+                      '{index === 2 ? \'<Typography variant="caption">Last step</Typography>\' : null}'
+                  },
+                  children: '{step.label}'
+                },
+                {
+                  type: 'StepContent',
+                  children: [
+                    {
+                      type: 'Typography',
+                      children: '{step.description}'
+                    },
+                    {
+                      type: 'Box',
+                      props: {
+                        sx: {
+                          mb: '2'
+                        }
+                      },
+                      children: [
+                        {
+                          type: 'div',
+                          children: [
+                            {
+                              type: 'Button',
+                              props: {
+                                variant: 'contained',
+                                onClick: '{handleNext}',
+                                sx: {
+                                  mt: '1',
+                                  mr: '1'
+                                }
+                              },
+                              children:
+                                "{index === steps.length - 1 ? 'Finish' : 'Continue'}"
+                            },
+                            {
+                              type: 'Button',
+                              props: {
+                                disabled: '{index === 0}',
+                                onClick: '{handleBack}',
+                                sx: {
+                                  mt: '1',
+                                  mr: '1'
+                                }
+                              },
+                              children: 'Back'
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
         }
       ]
     },
@@ -3675,11 +3599,11 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import PropTypes from 'prop-types'",
-      "import Tabs from '@mui/material/Tabs'",
-      "import Tab from '@mui/material/Tab'",
-      "import Typography from '@mui/material/Typography'",
-      "import Box from '@mui/material/Box'",
+      "import PropTypes from 'prop-types';",
+      "import Tabs from '@mui/material/Tabs';",
+      "import Tab from '@mui/material/Tab';",
+      "import Typography from '@mui/material/Typography';",
+      "import Box from '@mui/material/Box';",
       '\nfunction CustomTabPanel(props) {',
       '  const { children, value, index, ...other } = props;',
       '  return (',
@@ -3712,7 +3636,7 @@ const MUITypes: MUIType[] = [
     ],
     stateAndEventHandlers: [
       'const [value, setValue] = React.useState(0);',
-      '\nconst handleChange = (event, newValue) => { setValue(newValue); };\n'
+      '\nconst handleChange = (event, newValue) => setValue(newValue);\n'
     ],
     defaultProps: [
       'value={value} onChange={handleChange} aria-label="basic tabs example"'
@@ -3834,13 +3758,13 @@ const MUITypes: MUIType[] = [
     icon: 'CheckBoxOutlineBlank',
     framework: 'reactClassic',
     nestable: true,
-    imports: ["import Box from '@mui/material/Box'"],
+    imports: ["import Box from '@mui/material/Box';"],
     stateAndEventHandlers: [],
     defaultProps: [
       'component="section" sx={{ p: 2, border: "1px dashed grey" }}'
     ],
     propOptions: ['component', 'sx'],
-    jsx: ['<Box />'],
+    jsx: ['<Box>This Box renders as an HTML section element.</Box>'],
     componentData: {
       type: 'Box',
       props: {
@@ -3862,9 +3786,9 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: true,
     imports: [
-      "import CssBaseline from '@mui/material/CssBaseline'",
-      "import Box from '@mui/material/Box'",
-      "import Container from '@mui/material/Container'"
+      "import CssBaseline from '@mui/material/CssBaseline';",
+      "import Box from '@mui/material/Box';",
+      "import Container from '@mui/material/Container';"
     ],
     stateAndEventHandlers: [],
     defaultProps: ['maxWidth="sm"'],
@@ -3907,10 +3831,10 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: true,
     imports: [
-      "import { styled } from '@mui/material/styles'",
-      "import Box from '@mui/material/Box'",
-      "import Paper from '@mui/material/Paper'",
-      "import Grid from '@mui/material/Grid'",
+      "import { styled } from '@mui/material/styles';",
+      "import Box from '@mui/material/Box';",
+      "import Paper from '@mui/material/Paper';",
+      "import Grid from '@mui/material/Grid';",
       '\nconst Item = styled(Paper)(({ theme }) => ({',
       '  backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",',
       '  ...theme.typography.body2,',
@@ -4028,10 +3952,17 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import Paper from '@mui/material/Paper'",
-      "import Stack from '@mui/material/Stack'",
-      "import { styled } from '@mui/material/styles'"
+      "import Box from '@mui/material/Box';",
+      "import Paper from '@mui/material/Paper';",
+      "import Stack from '@mui/material/Stack';",
+      "import { styled } from '@mui/material/styles';",
+      '\nconst Item = styled(Paper)(({ theme }) => ({',
+      '  backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",',
+      '  ...theme.typography.body2,',
+      '  padding: theme.spacing(1),',
+      '  textAlign: "center",',
+      ' color: theme.palette.text.secondary,',
+      '}));'
     ],
     stateAndEventHandlers: [],
     defaultProps: ['spacing={2}'],
@@ -4075,8 +4006,8 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import ImageList from '@mui/material/ImageList'",
-      "import ImageListItem from '@mui/material/ImageListItem'",
+      "import ImageList from '@mui/material/ImageList';",
+      "import ImageListItem from '@mui/material/ImageListItem';", // Make sure to close the quotes correctly.
       '\nconst itemData = [',
       '  {',
       "    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',",
@@ -4125,7 +4056,8 @@ const MUITypes: MUIType[] = [
       '  {',
       "    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',",
       "    title: 'Bike',",
-      '  },'
+      '  }',
+      '];'
     ],
     stateAndEventHandlers: [],
     defaultProps: ['sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}'],
@@ -4171,10 +4103,21 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import Button from '@mui/material/Button'",
-      "import Typography from '@mui/material/Typography'",
-      "import Modal from '@mui/material/Modal'"
+      "import Box from '@mui/material/Box';",
+      "import Button from '@mui/material/Button';",
+      "import Typography from '@mui/material/Typography';",
+      "import Modal from '@mui/material/Modal';",
+      '\nconst style = {',
+      "  position: 'absolute',",
+      "  top: '50%',",
+      "  left: '50%',",
+      "  transform: 'translate(-50%, -50%)',",
+      '  width: 400,',
+      "  bgcolor: 'background.paper',",
+      "  border: '2px solid #000',",
+      '  boxShadow: 24,',
+      '  p: 4,',
+      '};'
     ],
     stateAndEventHandlers: [
       'const [open, setOpen] = React.useState(false);',
@@ -4290,16 +4233,16 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Popover from '@mui/material/Popover'",
-      "import Typography from '@mui/material/Typography'",
-      "import Button from '@mui/material/Button'"
+      "import Popover from '@mui/material/Popover';",
+      "import Typography from '@mui/material/Typography';",
+      "import Button from '@mui/material/Button';"
     ],
     stateAndEventHandlers: [
       'const [anchorEl, setAnchorEl] = React.useState(null);',
-      'const handleClick = (event) => { setAnchorEl(event.currentTarget) };',
-      '\nconst handleClose = () => { setAnchorEl(null) };',
-      '\nconst open = Boolean(anchorEl);',
-      "\nconst id = open ? 'simple-popover' : undefined;\n"
+      'const handleClick = (event) => setAnchorEl(event.currentTarget);',
+      'const handleClose = () => setAnchorEl(null);',
+      'const open = Boolean(anchorEl);',
+      "const id = open ? 'simple-popover' : undefined;\n"
     ],
     defaultProps: [
       "id={id} open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}"
@@ -4387,8 +4330,8 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Box from '@mui/material/Box'",
-      "import Popper from '@mui/material/Popper'"
+      "import Box from '@mui/material/Box';",
+      "import Popper from '@mui/material/Popper';"
     ],
     stateAndEventHandlers: [
       'const [anchorEl, setAnchorEl] = React.useState(null);',
@@ -4471,11 +4414,11 @@ const MUITypes: MUIType[] = [
     framework: 'reactClassic',
     nestable: false,
     imports: [
-      "import Collapse from '@mui/material/Collapse'",
-      "import FormControlLabel from '@mui/material/FormControlLabel'",
-      "import Box from '@mui/material/Box'",
-      "import Switch from '@mui/material/Switch'",
-      "import Paper from '@mui/material/Paper'",
+      "import Collapse from '@mui/material/Collapse';",
+      "import FormControlLabel from '@mui/material/FormControlLabel';",
+      "import Box from '@mui/material/Box';",
+      "import Switch from '@mui/material/Switch';",
+      "import Paper from '@mui/material/Paper';",
       '\nconst icon = (',
       '  <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>',
       '   <svg>',
@@ -4496,7 +4439,7 @@ const MUITypes: MUIType[] = [
       'const [checked, setChecked] = React.useState(false);',
       '\nconst handleChange = () => {',
       '  setChecked((prev) => !prev);',
-      '  };'
+      '};\n'
     ],
     defaultProps: [],
     propOptions: [
diff --git a/app/src/tutorial/RouteLinks.tsx b/app/src/tutorial/RouteLinks.tsx
index 7bf3902e..7b4e3854 100644
--- a/app/src/tutorial/RouteLinks.tsx
+++ b/app/src/tutorial/RouteLinks.tsx
@@ -1,93 +1,93 @@
-import React from 'react';
-import links2 from '../../../resources/route_links_tutorial_images/links2.png';
-import links3 from '../../../resources/route_links_tutorial_images/links3.png';
-import links4 from '../../../resources/route_links_tutorial_images/links4.png';
-import links6 from '../../../resources/route_links_tutorial_images/links6.png';
-import linksCanvas from '../../../resources/route_links_tutorial_images/links-canvas.png';
+// import React from 'react';
+// import links2 from '../../../resources/route_links_tutorial_images/links2.png';
+// import links3 from '../../../resources/route_links_tutorial_images/links3.png';
+// import links4 from '../../../resources/route_links_tutorial_images/links4.png';
+// import links6 from '../../../resources/route_links_tutorial_images/links6.png';
+// import linksCanvas from '../../../resources/route_links_tutorial_images/links-canvas.png';
 
-/**
- * RouteLinks component displays information about Next.js Route Links.
- *
- * @param {object} props - Component props.
- * @param {object} props.classes - CSS classes for styling.
- * @param {Function} props.setPage - Function to set the current page.
- * @returns {JSX.Element} RouteLinks component JSX.
- */
-const RouteLinks: React.FC<{
-  classes: any;
-  setPage: Function;
-}> = ({ classes, setPage }): JSX.Element => {
-  return (
-    <div className={classes.wrapper}>
-      <h1 className={classes.title}>Next.js Route Links</h1>
-      <hr />
-      <h2>
-        Route Links are only available for Next.js and Gatsby.js projects.
-      </h2>
-      <p className={classes.text}>
-        Users are able to drag-and-drop 'Link' components onto the canvas which
-        allow navigation to different{' '}
-        <span className={classes.notLink} onClick={() => setPage('Pages')}>
-          pages
-        </span>
-        .
-      </p>
-      <div className={classes.imgWrapper}>
-        <img className={classes.img} src={linksCanvas}></img>
-      </div>
-      <hr />
-      <p className={classes.text}>
-        Each page found in the '
-        <span className={classes.notLink} onClick={() => setPage('Pages')}>
-          Pages
-        </span>
-        ' section can be navigated to via a 'Link'. Clicking on the 'Route Link'
-        dropdown will display all the created pages in your application.
-      </p>
-      <div className={classes.imgWrapper}>
-        <img className={classes.smallImg} src={links2}></img>
-        <img className={classes.smallImg} src={links3}></img>
-      </div>
-      <hr />
-      <p className={classes.text}>
-        The code generator will automatically{' '}
-        <code>import Link from 'next/link'</code> and create your Link component
-        in the bottom panel.
-      </p>
-      <div className={classes.imgWrapper}>
-        <img className={classes.img} src={links4}></img>
-      </div>
-      <hr />
-      <p className={classes.text}>
-        Clicking on a Link component on the{' '}
-        <span className={classes.notLink} onClick={() => setPage('Canvas')}>
-          canvas
-        </span>{' '}
-        will navigate to the corresponding page.
-      </p>
-      <div className={classes.imgWrapper}>
-        <img className={classes.smallImg} src={links6}></img>
-      </div>
-      <hr />
-      <p className={classes.text}>
-        For more information on 'Link' for Next.js, please{' '}
-        <a
-          href="https://nextjs.org/docs/api-reference/next/link"
-          target="_blank"
-        >
-          visit the official documentation section at nextjs.org.
-        </a>{' '}
-        For more information on 'Link' for Gatsby.js, please{' '}
-        <a
-          href="https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/"
-          target="_blank"
-        >
-          visit the official documentation section at www.gatsbyjs.com.
-        </a>
-      </p>
-      <hr />
-    </div>
-  );
-};
+// /**
+//  * RouteLinks component displays information about Next.js Route Links.
+//  *
+//  * @param {object} props - Component props.
+//  * @param {object} props.classes - CSS classes for styling.
+//  * @param {Function} props.setPage - Function to set the current page.
+//  * @returns {JSX.Element} RouteLinks component JSX.
+//  */
+// const RouteLinks: React.FC<{
+//   classes: any;
+//   setPage: Function;
+// }> = ({ classes, setPage }): JSX.Element => {
+//   return (
+//     <div className={classes.wrapper}>
+//       <h1 className={classes.title}>Next.js Route Links</h1>
+//       <hr />
+//       <h2>
+//         Route Links are only available for Next.js and Gatsby.js projects.
+//       </h2>
+//       <p className={classes.text}>
+//         Users are able to drag-and-drop 'Link' components onto the canvas which
+//         allow navigation to different{' '}
+//         <span className={classes.notLink} onClick={() => setPage('Pages')}>
+//           pages
+//         </span>
+//         .
+//       </p>
+//       <div className={classes.imgWrapper}>
+//         <img className={classes.img} src={linksCanvas}></img>
+//       </div>
+//       <hr />
+//       <p className={classes.text}>
+//         Each page found in the '
+//         <span className={classes.notLink} onClick={() => setPage('Pages')}>
+//           Pages
+//         </span>
+//         ' section can be navigated to via a 'Link'. Clicking on the 'Route Link'
+//         dropdown will display all the created pages in your application.
+//       </p>
+//       <div className={classes.imgWrapper}>
+//         <img className={classes.smallImg} src={links2}></img>
+//         <img className={classes.smallImg} src={links3}></img>
+//       </div>
+//       <hr />
+//       <p className={classes.text}>
+//         The code generator will automatically{' '}
+//         <code>import Link from 'next/link'</code> and create your Link component
+//         in the bottom panel.
+//       </p>
+//       <div className={classes.imgWrapper}>
+//         <img className={classes.img} src={links4}></img>
+//       </div>
+//       <hr />
+//       <p className={classes.text}>
+//         Clicking on a Link component on the{' '}
+//         <span className={classes.notLink} onClick={() => setPage('Canvas')}>
+//           canvas
+//         </span>{' '}
+//         will navigate to the corresponding page.
+//       </p>
+//       <div className={classes.imgWrapper}>
+//         <img className={classes.smallImg} src={links6}></img>
+//       </div>
+//       <hr />
+//       <p className={classes.text}>
+//         For more information on 'Link' for Next.js, please{' '}
+//         <a
+//           href="https://nextjs.org/docs/api-reference/next/link"
+//           target="_blank"
+//         >
+//           visit the official documentation section at nextjs.org.
+//         </a>{' '}
+//         For more information on 'Link' for Gatsby.js, please{' '}
+//         <a
+//           href="https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/"
+//           target="_blank"
+//         >
+//           visit the official documentation section at www.gatsbyjs.com.
+//         </a>
+//       </p>
+//       <hr />
+//     </div>
+//   );
+// };
 
-export default RouteLinks;
+// export default RouteLinks;
diff --git a/app/src/tutorial/TutorialPage.tsx b/app/src/tutorial/TutorialPage.tsx
index cd1281e4..e5f82609 100644
--- a/app/src/tutorial/TutorialPage.tsx
+++ b/app/src/tutorial/TutorialPage.tsx
@@ -1,11 +1,11 @@
-import React, { useState , useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
 import Pages from './Pages';
 import Customization from './Customization';
 import Canvas from './Canvas';
 import Styling from './Styling';
-import RouteLinks from './RouteLinks';
+// import RouteLinks from './RouteLinks';
 import ReusableComponents from './ReusableComponents';
 import ComponentTree from './ComponentTree';
 import HTMLElements from './HtmlElements';
diff --git a/server/controllers/marketplaceController.ts b/server/controllers/marketplaceController.ts
index 8b7d433d..5fbcba5e 100644
--- a/server/controllers/marketplaceController.ts
+++ b/server/controllers/marketplaceController.ts
@@ -4,7 +4,7 @@ import { Projects, Users } from '../models/reactypeModels';
 import mongoose from 'mongoose';
 
 // array of objects, objects inside
-type Projects = { project: {} }[];
+// type Projects = { project: {} }[];
 
 const marketplaceController: MarketplaceController = {
   /**
@@ -16,17 +16,9 @@ const marketplaceController: MarketplaceController = {
    * @param {Function} next - The next middleware function in the stack.
    * @returns {void}
    */
-  getPublishedProjects: (req, res, next): void => {
-    Projects.find({ published: true }, (err, projects) => {
-      //removed the typing for now for projects: since its the mongodb doc
-      if (err) {
-        return next({
-          log: `Error in marketplaceController.getPublishedProjects: ${err}`,
-          message: {
-            err: 'Error in marketplaceController.getPublishedProjects, check server logs for details'
-          }
-        });
-      }
+  getPublishedProjects: async (req, res, next) => {
+    try {
+      const projects = await Projects.find({ published: true }).exec();
       // returns the entire project document as an array
       // need to convert each project document to an object
       const convertedProjects = projects.map((project) => {
@@ -34,7 +26,14 @@ const marketplaceController: MarketplaceController = {
       });
       res.locals.publishedProjects = convertedProjects;
       return next();
-    });
+    } catch (err) {
+      return next({
+        log: `Error in marketplaceController.getPublishedProjects: ${err}`,
+        message: {
+          err: 'Error in marketplaceController.getPublishedProjects, check server logs for details'
+        }
+      });
+    }
   },
 
   /**