diff --git a/package-lock.json b/package-lock.json
index 07af0a754..4a9e8e75a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "zesty-website",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "zesty-website",
-      "version": "1.0.6",
+      "version": "1.0.7",
       "dependencies": {
         "@codemirror/lang-javascript": "^6.2.1",
         "@codemirror/view": "^6.21.2",
diff --git a/package.json b/package.json
index ab5381536..ae836f4f1 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "zesty-website",
   "author": "Zesty.io Platform Inc.",
   "email": "marketing@zesty.io",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "private": true,
   "scripts": {
     "dev": "NODE_OPTIONS='--inspect' next dev",
diff --git a/src/components/console/DocsAppbar.js b/src/components/console/DocsAppbar.js
index eef408d7b..7a228b641 100644
--- a/src/components/console/DocsAppbar.js
+++ b/src/components/console/DocsAppbar.js
@@ -73,7 +73,9 @@ export const DocsAppbar = React.memo(() => {
   const instanceZUID = getCookie('ZESTY_WORKING_INSTANCE') || workingInstance;
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === 'dark';
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const isLG = useMediaQuery(theme.breakpoints.up('lg'));
+  const isXL = useMediaQuery(theme.breakpoints.up('xl'));
 
   const onChangeDropdown = (data) => {
     let category = data.label;
@@ -121,13 +123,17 @@ export const DocsAppbar = React.memo(() => {
 
   const isTourTabVisible = currentURL.includes('/docs/parsley');
 
-  React.useEffect(async () => {
-    const res = await ZestyAPI.getModels(instanceZUID);
-    if (res.status === 200) {
-      setcontentModels(res.data);
-    } else {
-      setcontentModels([]);
-    }
+  React.useEffect(() => {
+    const getModels = async () => {
+      const res = await ZestyAPI.getModels(instanceZUID);
+      if (res.status === 200) {
+        setcontentModels(res.data);
+      } else {
+        setcontentModels([]);
+      }
+    };
+
+    getModels();
   }, [workingInstance]);
 
   const isApiReference = router.asPath.includes('api-reference');
@@ -138,6 +144,15 @@ export const DocsAppbar = React.memo(() => {
   const isTour = router.asPath.includes('/tour');
   const isGuides = !isApiReference && !isTour;
 
+  const showSearchModal = () => {
+    if (isLoggedIn) {
+      if (isXL) return true;
+    } else {
+      if (isXL) return true;
+    }
+    return false;
+  };
+
   useEffect(() => {
     const routeCategory = router.asPath.split('/').filter((e) => e)[1];
     setSelectedDocsCategory(docsCategory || routeCategory);
@@ -149,7 +164,7 @@ export const DocsAppbar = React.memo(() => {
       alignItems="center"
       justifyContent={'space-between'}
       sx={{
-        px: 2,
+        px: 3,
         py: 1,
         alignItems: isMobile ? 'left' : 'center',
         borderTop: isDarkMode ? ' ' : `1px solid ${grey[200]}`,
@@ -157,10 +172,15 @@ export const DocsAppbar = React.memo(() => {
         background: isDarkMode ? theme.palette.zesty.zestyDarkBlue : 'white',
       }}
     >
-      <Stack pt={1} direction={isMobile ? 'column' : 'row'} spacing={2}>
+      <Stack
+        pt={1}
+        direction={isMobile ? 'column' : 'row'}
+        width="100%"
+        spacing={2}
+      >
         <DocsComboBox
           value={selectedDocsCategory}
-          width={isMobile ? 330 : 400}
+          width={!isLG ? '100%' : '400px'}
           onChange={onChangeDropdown}
           options={DOCS_DATA_DROPDOWN()}
         />
@@ -168,7 +188,7 @@ export const DocsAppbar = React.memo(() => {
           display={'flex'}
           justifyContent={'center'}
           justifyItems={'center'}
-          width={1}
+          width={'100%'}
         >
           <Breadcrumbs
             sx={{
@@ -186,7 +206,8 @@ export const DocsAppbar = React.memo(() => {
         </Stack>
         <Stack
           direction={'row'}
-          bgcolor={'#fff'}
+          // bgcolor={theme.palette.mode === 'dark' ? 'transparent' : '#fff'}
+          width="100%"
           display={isMobile ? 'none' : 'flex'}
         >
           <Button
@@ -203,7 +224,6 @@ export const DocsAppbar = React.memo(() => {
           </Button>
           <Button
             data-testid="api-reference-link"
-            fullWidth
             variant="text"
             color="secondary"
             href={`/docs/${selectedDocsCategory}/api-reference`}
@@ -236,8 +256,15 @@ export const DocsAppbar = React.memo(() => {
       </Stack>
       <Stack direction={'row'} alignItems={'center'} spacing={2}>
         {isApiReference && !isMobile && (
-          <Stack direction={'row'} spacing={1} alignItems="center">
-            <Typography color={'black'}>Language:</Typography>{' '}
+          <Stack
+            direction={'row'}
+            spacing={1}
+            alignItems="center"
+            display={contentModels?.length > 0 && !isXL ? 'none' : 'flex'}
+          >
+            <Typography variant="p" color="text.primary">
+              Language:
+            </Typography>{' '}
             <DocsPopover
               value={language}
               setvalue={setlanguage}
@@ -275,11 +302,14 @@ export const DocsAppbar = React.memo(() => {
             }
           />
         )}
-        {!isMobile && (
-          <Box sx={{ pr: 6, mt: 6 }}>
-            <DocSearchModal />
-          </Box>
-        )}
+        <Box
+          sx={{
+            mt: 6,
+            display: showSearchModal() ? 'block' : 'none',
+          }}
+        >
+          <DocSearchModal />
+        </Box>
       </Stack>
     </Stack>
   );
diff --git a/src/components/globals/TableOfContent.js b/src/components/globals/TableOfContent.js
index 2e461418e..6b73d2bff 100644
--- a/src/components/globals/TableOfContent.js
+++ b/src/components/globals/TableOfContent.js
@@ -25,7 +25,12 @@ const Main = ({ data, title = '' }) => {
 
   return (
     <Stack height={1} width={1} data-testid="table-of-contents">
-      <Typography variant="button" color={'black'} fontWeight={700} pl={'20px'}>
+      <Typography
+        variant="button"
+        color="text.primary"
+        fontWeight={700}
+        pl={'20px'}
+      >
         On this Page
       </Typography>
       <Stack px={0}>
diff --git a/src/components/markdown-styling/ZestyMarkdownParser.js b/src/components/markdown-styling/ZestyMarkdownParser.js
index 7c8a901ac..4af500aa2 100644
--- a/src/components/markdown-styling/ZestyMarkdownParser.js
+++ b/src/components/markdown-styling/ZestyMarkdownParser.js
@@ -2,6 +2,7 @@ import React from 'react';
 import remarkGfm from 'remark-gfm';
 
 import dynamic from 'next/dynamic';
+import { Table, Typography, useTheme } from '@mui/material';
 
 const ReactMarkdown = dynamic(() => import('react-markdown'));
 const MDBlockquote = dynamic(() =>
@@ -26,6 +27,82 @@ export const ZestyMarkdownParser = ({
   productGlossary,
   isDocs = false,
 }) => {
+  const theme = useTheme();
+  const styles = {
+    p(props) {
+      const { ...rest } = props;
+      return (
+        <Typography
+          {...rest}
+          sx={(theme) => ({
+            '& > code': {
+              backgroundColor:
+                theme.palette.mode === 'dark' ? 'darkblue' : '#F5F7F9',
+            },
+          })}
+        />
+      );
+    },
+
+    table(props) {
+      const { ...rest } = props;
+      return (
+        <Table
+          {...rest}
+          sx={(theme) => ({
+            overflowX: 'auto',
+            display: 'block',
+            height: 'auto !important',
+            width: '100% !important',
+            mt: '20px',
+            '& img, span': {
+              mt: '0px !important',
+              objectFit: 'contain',
+              height: '240px',
+            },
+            '& span': {
+              mt: '0px !important',
+              maxWidth: 'auto !important',
+            },
+            '& p': {
+              width: 'auto',
+            },
+            '& tr': {
+              bgcolor: 'transparent !important',
+            },
+            '& td': {
+              color: theme.palette.mode === 'dark' ? 'white' : 'text.primary',
+            },
+          })}
+        />
+      );
+    },
+    code(props) {
+      const { ...rest } = props;
+      return (
+        <code
+          {...rest}
+          style={{
+            backgroundColor:
+              theme.palette.mode === 'dark' ? 'darkblue' : '#F5F7F9',
+          }}
+        />
+      );
+    },
+    blockquote(props) {
+      const { ...rest } = props;
+      return (
+        <blockquote
+          {...rest}
+          style={{
+            backgroundColor:
+              theme.palette.mode === 'dark' ? 'darkblue' : '#F5F7F9',
+          }}
+        />
+      );
+    },
+  };
+
   const docsComponents = {
     img: (props) => <MDImage {...props} floatRight={false} isDocs={true} />,
     h1: MDH1,
@@ -33,6 +110,7 @@ export const ZestyMarkdownParser = ({
     h3: MDH3,
     h4: MDH4,
     pre: MDCodeBlock,
+    ...styles,
   };
 
   const components = {
@@ -49,7 +127,9 @@ export const ZestyMarkdownParser = ({
     h2: MDH2,
     h3: MDH3,
     pre: MDCodeBlock,
+    ...styles,
   };
+
   return (
     <ReactMarkdown
       className="markdown-body"
diff --git a/src/revamp/ui/GetDemoSection/index.js b/src/revamp/ui/GetDemoSection/index.js
index 465a4c1a7..eca10cae9 100644
--- a/src/revamp/ui/GetDemoSection/index.js
+++ b/src/revamp/ui/GetDemoSection/index.js
@@ -16,6 +16,7 @@ import { MultiFieldForm } from './MultiFieldForm';
 import getLastVisitedPathAndUrl from 'revamp/utils/getLastVisitedPathAndUrl';
 import { generateAlt } from 'utils';
 import useGetDynamicData from './useGetDynamicData';
+import { useRouter } from 'next/router';
 
 const acorns =
     'https://storage.googleapis.com/assets.zesty.io/website/images/assets/demo/Acorns%20Logo.svg',
@@ -39,6 +40,7 @@ const GetDemoSection = ({
   isContact = false,
   formTitle = 'Enter your details to connect with a Content Expert',
 }) => {
+  const router = useRouter();
   const { lastVisitedPath, lastVisitedURL } = getLastVisitedPathAndUrl();
   const { data } = useGetDynamicData();
   let inquiryReasons = [
@@ -50,6 +52,13 @@ const GetDemoSection = ({
     'Press Relations',
   ];
 
+  const getLeadSourceDetail = () => {
+    if (router.asPath.includes('contact')) return 'Contact Us';
+    if (router.asPath.includes('demo')) return 'Demo Sign Up';
+
+    return 'Get a Talk to Us';
+  };
+
   const onSubmit = async (values) => {
     if (values.firstName === '') {
       values.firstName = 'Unknown';
@@ -60,9 +69,9 @@ const GetDemoSection = ({
     let payload = getLeadObjectZOHO(
       values,
       values?.inquiryReason,
-      'Demo Sign Up',
+      getLeadSourceDetail(),
       '',
-      '', // leadsource
+      'Website', // leadsource
       lastVisitedPath,
       lastVisitedURL,
     );
diff --git a/src/views/Docs/DocsPages.js b/src/views/Docs/DocsPages.js
index 321c24510..574dc9e50 100644
--- a/src/views/Docs/DocsPages.js
+++ b/src/views/Docs/DocsPages.js
@@ -1,5 +1,13 @@
 import React from 'react';
-import { Box, Grid, Link, Stack, Typography, useTheme } from '@mui/material';
+import {
+  Box,
+  Grid,
+  Link,
+  Stack,
+  Table,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -16,33 +24,33 @@ import { transFormEndpoint } from 'utils';
 import { useZestyStore } from 'store';
 import useIsLoggedIn from 'components/hooks/useIsLoggedIn';
 
-const muiContentOverrides = {
-  h1: {
-    component: 'h1',
-    props: {
-      style: { fontSize: '2em' },
-    },
-  },
-  h2: {
-    component: 'h2',
-    props: {
-      style: { fontSize: '1.5em' },
-    },
-  },
-  p: {
-    component: 'p',
-    props: {
-      style: { fontSize: '5px' },
-    },
-  },
+// const muiContentOverrides = {
+//   h1: {
+//     component: 'h1',
+//     props: {
+//       style: { fontSize: '2em' },
+//     },
+//   },
+//   h2: {
+//     component: 'h2',
+//     props: {
+//       style: { fontSize: '1.5em' },
+//     },
+//   },
+//   p: {
+//     component: 'p',
+//     props: {
+//       style: { fontSize: '5px' },
+//     },
+//   },
 
-  img: {
-    component: 'img',
-    props: {
-      style: { width: '80%', margin: '10px 10%' },
-    },
-  },
-};
+//   img: {
+//     component: 'img',
+//     props: {
+//       style: { width: '80%', margin: '10px 10%' },
+//     },
+//   },
+// };
 const CodeBlock = dynamic(() =>
   import('./CodeBlock', { loading: () => <>loading </> }).then(
     (mod) => mod.CodeBlock,
@@ -101,6 +109,81 @@ const Main = ({ data }) => {
     threshold: 0,
   });
 
+  const styles = {
+    p(props) {
+      const { ...rest } = props;
+      return (
+        <Typography
+          {...rest}
+          sx={(theme) => ({
+            '& > code': {
+              backgroundColor:
+                theme.palette.mode === 'dark' ? 'darkblue' : '#F5F7F9',
+            },
+          })}
+        />
+      );
+    },
+
+    table(props) {
+      const { ...rest } = props;
+      return (
+        <Table
+          {...rest}
+          sx={(theme) => ({
+            overflowX: 'auto',
+            display: 'block',
+            height: 'auto !important',
+            width: '100% !important',
+            mt: '20px',
+            '& img, span': {
+              mt: '0px !important',
+              objectFit: 'contain',
+              height: '240px',
+            },
+            '& span': {
+              mt: '0px !important',
+              maxWidth: 'auto !important',
+            },
+            '& p': {
+              width: 'auto',
+            },
+            '& tr': {
+              bgcolor: 'transparent !important',
+            },
+            '& td': {
+              color: theme.palette.mode === 'dark' ? 'white' : 'text.primary',
+            },
+          })}
+        />
+      );
+    },
+    code(props) {
+      const { ...rest } = props;
+      return (
+        <code
+          {...rest}
+          style={{
+            backgroundColor:
+              theme.palette.mode === 'dark' ? 'darkblue' : '#F5F7F9',
+          }}
+        />
+      );
+    },
+    blockquote(props) {
+      const { ...rest } = props;
+      return (
+        <blockquote
+          {...rest}
+          style={{
+            backgroundColor:
+              theme.palette.mode === 'dark' ? 'darkblue' : '#F5F7F9',
+          }}
+        />
+      );
+    },
+  };
+
   const result =
     Array.isArray(data.item) &&
     data.item.map((e, i) => {
@@ -135,7 +218,7 @@ const Main = ({ data }) => {
               {e?.name}
             </Typography>
             <Box sx={{ color: theme.palette.zesty.zestyZambezi }}>
-              <ReactMarkdown overrides={muiContentOverrides}>
+              <ReactMarkdown components={{ ...styles }}>
                 {e?.description || ''}
               </ReactMarkdown>
             </Box>
@@ -176,7 +259,10 @@ const Main = ({ data }) => {
                   </Link>
                 </Stack>
 
-                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  components={{ ...styles }}
+                >
                   {desc}
                 </ReactMarkdown>
               </Stack>
@@ -297,7 +383,7 @@ const Main = ({ data }) => {
       pt={2}
     >
       <Grid container pb={4}>
-        <Grid item xs={12} lg={6}>
+        <Grid item xs={12}>
           <Typography
             sx={{ color: (theme) => theme.palette.zesty.zestyZambezi }}
             variant="h4"
@@ -307,12 +393,15 @@ const Main = ({ data }) => {
             {data.name}
           </Typography>
           <Box sx={{ color: (theme) => theme.palette.zesty.zestyZambezi }}>
-            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{ ...styles }}
+            >
               {data?.description}
             </ReactMarkdown>
           </Box>
         </Grid>
-        <Grid item xs={6}></Grid>
+        {/* <Grid item xs={6}></Grid> */}
       </Grid>
       {result}
     </Stack>