diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 71210bd7c..aa9aa2e9c 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -674,7 +674,8 @@ export const DocsNav = ({
             'transition-all duration-500 ease-in-out',
             {
               'max-h-0 opacity-0 overflow-hidden': !active.getReference,
-              'max-h-80 overflow-y-auto opacity-100': active.getReference,
+              'max-h-80 overflow-y-auto scrollbar-hidden opacity-100':
+                active.getReference,
             },
           )}
           id='reference'
diff --git a/cypress/components/Headlines.cy.tsx b/cypress/components/Headlines.cy.tsx
index 2fd627b5d..76b806b4a 100644
--- a/cypress/components/Headlines.cy.tsx
+++ b/cypress/components/Headlines.cy.tsx
@@ -6,6 +6,7 @@ import {
   Headline4,
 } from '~/components/Headlines';
 import mockNextRouter, { MockRouter } from '../plugins/mockNextRouterUtils';
+import slugifyMarkdownHeadline from '~/lib/slugifyMarkdownHeadline';
 
 describe('Headlines Component', () => {
   let mockRouter: MockRouter;
@@ -94,11 +95,13 @@ describe('Headlines Component', () => {
   it('should be active if the URL has the hash', () => {
     /* Testing the active headline with Headline1 */
 
+    const title = 'What is JSON Schema?';
+    const slug = slugifyMarkdownHeadline(title);
     // Set the URL with the hash
-    mockRouter.asPath = '/#what-is-json-schema';
+    mockRouter.asPath = `/#${slug}`;
 
     // Check if Correct headline is active
-    cy.mount(<Headline1>What is JSON Schema?</Headline1>);
+    cy.mount(<Headline1>{title}</Headline1>);
     cy.get('span').should(
       'have.class',
       'text-startBlue dark:text-endBlue inline-block ml-2',
diff --git a/lib/slugifyMarkdownHeadline.ts b/lib/slugifyMarkdownHeadline.ts
index ae943e138..d67c47e3c 100644
--- a/lib/slugifyMarkdownHeadline.ts
+++ b/lib/slugifyMarkdownHeadline.ts
@@ -6,7 +6,11 @@ export default function slugifyMarkdownHeadline(
   const FRAGMENT_REGEX = /\[#(?<slug>(\w|-|_)*)\]/g;
   if (!markdownChildren) return '';
   if (typeof markdownChildren === 'string')
-    return slugify(markdownChildren, { lower: true, trim: true });
+    return slugify(markdownChildren, {
+      lower: true,
+      trim: true,
+      remove: /[*+~()'"!]/g,
+    });
   const metaSlug = markdownChildren.reduce((acc, child) => {
     if (acc) return acc;
     if (typeof child !== 'string') return null;
@@ -21,6 +25,10 @@ export default function slugifyMarkdownHeadline(
     .filter((child) => typeof child === 'string')
     .map((string) => string.replace(FRAGMENT_REGEX, ''))
     .join(' ');
-  const slug = slugify(joinedChildren, { lower: true, trim: true });
+  const slug = slugify(joinedChildren, {
+    lower: true,
+    trim: true,
+    remove: /[*+~()'"!]/g,
+  });
   return slug;
 }
diff --git a/pages/community/index.page.tsx b/pages/community/index.page.tsx
index d68d6deb8..76c255895 100644
--- a/pages/community/index.page.tsx
+++ b/pages/community/index.page.tsx
@@ -149,10 +149,10 @@ export default function communityPages(props: any) {
           </div>
         </section>
         <div className='m-auto w-12/12 md:w-11/12 lg:w-10/12 xl:w-10/12'>
-          <div className='z-40 mt-20 mx-auto w-full md:h-[520px] md:flex grid grid-cols-1 lg:grid-cols-2 md:justify-between rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900'>
-            <div className='p-4 px-8 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
+          <div className='z-40 mt-20 mx-auto w-full md:h-[520px] flex flex-col md:flex-row rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900'>
+            <div className='p-4 px-8 flex justify-between w-full md:w-1/2 h-auto flex-col text-center md:text-left'>
               <div data-testid='HomeCard-main' className='m-auto'>
-                <h2 className=' text-blue-700 font-bold  text-[2rem] text-center'>
+                <h2 className='text-blue-700 font-bold text-[2rem] text-center'>
                   Ambassadors Program
                 </h2>
                 <h2 className='text-center font-bold text-slate-500 text-base tracking-wide dark:text-white mt-10'>
@@ -174,16 +174,16 @@ export default function communityPages(props: any) {
                 </div>
               </div>
             </div>
-            <div className='w-full h-fit-content md:w-3/6 max-sm:w-1/4 flex rounded-r-lg justify-end bg-cover bg-center bg-ambassador' />
+            <div className='w-full h-[400px] border-b border-l border-r border-gray-200 md:h-[480px] md:w-1/2 flex rounded-b-lg md:rounded-l-none md:rounded-r-lg justify-end bg-cover bg-center bg-ambassador bg-no-repeat relative' />
           </div>
 
-          <div className='z-40 mt-20 rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 mx-auto w-full md:h-[520px] md:flex grid grid-cols-1 lg:grid-cols-2 md:justify-between dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900'>
-            <div className='p-4 px-8 flex justify-between w-full md:w-3/6 h-auto flex-col text-center md:text-left'>
+          <div className='z-40 mt-20 mx-auto w-full md:h-[520px] flex flex-col md:flex-row rounded-lg border border-gray-200 bg-white transition-colors hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-900/30 shadow-3xl dark:shadow-2xl dark:shadow-slate-900'>
+            <div className='p-4 px-8 flex justify-between w-full md:w-1/2 h-auto flex-col text-center md:text-left'>
               <div
                 data-testid='HomeCard-main'
                 className='m-auto flex flex-col items-center text-center'
               >
-                <h2 className='text-blue-700 font-bold text-[2rem]'>
+                <h2 className='text-blue-700 font-bold text-[2rem] text-center'>
                   Join the JSON Schema Slack workspace!
                 </h2>
                 <h2 className='font-bold text-base text-slate-500 dark:text-white tracking-wide mt-10'>
@@ -201,7 +201,7 @@ export default function communityPages(props: any) {
                 </div>
               </div>
             </div>
-            <div className='w-full h-fit-content md:w-3/6  flex rounded-r-lg justify-end bg-cover bg-center bg-slack' />
+            <div className='w-full h-[400px] border-b border-l border-r border-gray-200 md:h-auto md:w-3/6 flex rounded-b-lg md:rounded-l-none md:rounded-r-lg justify-end bg-cover bg-center bg-slack' />
           </div>
         </div>
 
diff --git a/styles/globals.css b/styles/globals.css
index 7d786ece1..610189a1b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -38,6 +38,7 @@ html {
   font-family: 'Inter', sans-serif;
   scroll-padding-top: 100px;
   scroll-behavior: smooth;
+  scrollbar-width: none;
 }
 
 .DocSearch-Button-Keys {