diff --git a/components/layout/config.js b/components/layout/config.js
index 569e13128d..3dc1169dcc 100644
--- a/components/layout/config.js
+++ b/components/layout/config.js
@@ -59,15 +59,7 @@ export default function Config(props) {
                 </section>
 
                 <section>
-                    <h3>Free Themes</h3>
-                    <p>
-                        Built-in component themes created by the{' '}
-                        <a href="https://www.primefaces.org/designer/primereact" className="text-primary hover:underline font-semibold">
-                            PrimeReact Theme Designer
-                        </a>
-                        .
-                    </p>
-
+                    <h3>Themes</h3>
                     <h4>Bootstrap</h4>
                     <div className="grid free-themes">
                         <div className="col-3 flex flex-column align-items-center gap-2">
diff --git a/components/layout/layout.js b/components/layout/layout.js
index 99e06f9c78..5620301983 100644
--- a/components/layout/layout.js
+++ b/components/layout/layout.js
@@ -12,7 +12,7 @@ import Topbar from './topbar';
 
 export default function Layout(props) {
     const [inputStyle, setInputStyle] = useState('outlined');
-    const [ripple, setRipple] = useState(false);
+    const [ripple, setRipple] = useState(true);
     const [sidebarActive, setSidebarActive] = useState(false);
     const [configActive, setConfigActive] = useState(false);
     const router = useRouter();
diff --git a/pages/roadmap/index.js b/pages/roadmap/index.js
index 49124cb223..3fde5d9e98 100644
--- a/pages/roadmap/index.js
+++ b/pages/roadmap/index.js
@@ -12,203 +12,203 @@ const Roadmap = () => {
                         maintenance work of the PrimeReact library"
                 />
             </Head>
-            <div className="content-section introduction">
-                <div className="feature-intro">
-                    <h1>Roadmap</h1>
-                    <p>
-                        At <a href="https://www.primetek.com.tr/">PrimeTek</a>, we are passionate about improving PrimeReact and would like to share our ideas for 2023 with the community. These are planned to be implemented in parallel to the regular
-                        maintenance work of the library involving review of issue tickets, PRs and PrimeReact PRO support. This page is updated periodically so please revisit to monitor the progress.
-                    </p>
-                </div>
+            <div className="doc-intro">
+                <h1>Roadmap</h1>
+                <p>
+                    At{' '}
+                    <a href="https://www.primetek.com.tr/" className="font-semibold hover:underline text-primary">
+                        PrimeTek
+                    </a>
+                    , we are passionate about improving PrimeReact and would like to share our ideas for 2023 with the community. These are planned to be implemented in parallel to the regular maintenance work of the library involving review of issue
+                    tickets, PRs and PrimeReact PRO support. This page is updated periodically so please revisit to monitor the progress.
+                </p>
             </div>
 
-            <div className="content-section">
-                <div className="overflow-auto">
-                    <div style={{ minWidth: '1200px' }}>
-                        <div className="flex gap-3 mb-3">
-                            <div className="flex-shrink-0 w-14rem"></div>
-                            <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q1</div>
-                            <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q2</div>
-                            <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q3</div>
-                            <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q4</div>
+            <div className="overflow-auto">
+                <div style={{ minWidth: '1200px' }}>
+                    <div className="flex gap-3 mb-3">
+                        <div className="flex-shrink-0 w-14rem"></div>
+                        <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q1</div>
+                        <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q2</div>
+                        <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q3</div>
+                        <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q4</div>
+                    </div>
+                    <div className="flex flex-column gap-3">
+                        <div className="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div className="flex-shrink-0 p-3 bg-blue-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">COMPONENTS</div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">New Styling API</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Modernize styling to provide a flexible API to support styled components, css modules and sass.</p>
+                                    <p className="mt-0 mb-3 line-height-3">Migrate from SCSS to CSS variables.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '15%', height: '4px' }}></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Accessibility</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Implement WCAG Level AA compliance using PrimeVue as the reference implementation.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                    </div>
+                                </div>
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Unstyled Mode</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Implementation of the Unstyled Mode to support libraries like Tailwind.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">DragDrop Utils</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Standalone Drag and Drop utilities that are also integrated within certain components e.g. Tree.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                    </div>
+                                </div>
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Full Calendar</h2>
+                                    <p className="mt-0 mb-3 line-height-3">New Full Calendar / Scheduler component.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column"></div>
+                        </div>
+                        <div className="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div className="flex-shrink-0 p-3 bg-indigo-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Figma UI Kit</div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-indigo-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Tokens</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Add support for Figma Tokens.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-indigo-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-bluegray-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Theme Generator</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Create a Figma Plugin to generate themes from Figma.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-bluegray-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column"></div>
+                            <div className="flex-1 flex gap-3 flex-column"></div>
+                        </div>
+                        <div className="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div className="flex-shrink-0 p-3 bg-teal-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">SHOWCASE</div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-teal-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Demos</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Standalone demos for each component feature instead of one demo page that demonstrates multiple features.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-teal-500 border-round" style={{ width: '100%', height: '4px' }}></div>
+                                    </div>
+                                </div>
+                                <div className="p-3 surface-card border-round border-teal-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Documentation</h2>
+                                    <p className="mt-0 mb-3 line-height-3">New component API docs generated by TSDoc.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-teal-500 border-round" style={{ width: '100%', height: '4px' }}></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column"></div>
+                            <div className="flex-1 flex gap-3 flex-column"></div>
+                            <div className="flex-1 flex gap-3 flex-column"></div>
                         </div>
-                        <div className="flex flex-column gap-3">
-                            <div className="flex gap-3 border-bottom-1 surface-border pb-3">
-                                <div className="flex-shrink-0 p-3 bg-blue-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">COMPONENTS</div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">New Styling API</h2>
-                                        <p className="mt-0 mb-3 line-height-3">Modernize styling to provide a flexible API to support styled components, css modules and sass.</p>
-                                        <p className="mt-0 mb-3 line-height-3">Migrate from SCSS to CSS variables.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-blue-500 border-round" style={{ width: '15%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Accessibility</h2>
-                                        <p className="mt-0 mb-3 line-height-3">Implement WCAG Level AA compliance using PrimeVue as the reference implementation.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                    <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Unstyled Mode</h2>
-                                        <p className="mt-0 mb-3 line-height-3">Implementation of the Unstyled Mode to support libraries like Tailwind.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">DragDrop Utils</h2>
-                                        <p className="mt-0 mb-3 line-height-3">Standalone Drag and Drop utilities that are also integrated within certain components e.g. Tree.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                    <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Full Calendar</h2>
-                                        <p className="mt-0 mb-3 line-height-3">New Full Calendar / Scheduler component.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column"></div>
+                        <div className="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div className="flex-shrink-0 p-3 bg-orange-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">PrimeBlocks</div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">New Blocks</h2>
+                                    <p className="mt-0 mb-3 line-height-3">30+ new UI Blocks.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-orange-500 border-round" style={{ width: '50%', height: '4px' }}></div>
+                                    </div>
+                                </div>
                             </div>
-                            <div className="flex gap-3 border-bottom-1 surface-border pb-3">
-                                <div className="flex-shrink-0 p-3 bg-indigo-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Figma UI Kit</div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-indigo-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Tokens</h2>
-                                        <p className="mt-0 mb-3 line-height-3">Add support for Figma Tokens.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-indigo-500 border-round" style={{ width: '0%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-bluegray-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Theme Generator</h2>
-                                        <p className="mt-0 mb-3 line-height-3">Create a Figma Plugin to generate themes from Figma.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-bluegray-500 border-round" style={{ width: '0%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column"></div>
-                                <div className="flex-1 flex gap-3 flex-column"></div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
+                                    <p className="mt-0 mb-3 line-height-3">More UI Blocks.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-orange-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                    </div>
+                                </div>
                             </div>
-                            <div className="flex gap-3 border-bottom-1 surface-border pb-3">
-                                <div className="flex-shrink-0 p-3 bg-teal-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">SHOWCASE</div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-teal-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Demos</h2>
-                                        <p className="mt-0 mb-3 line-height-3">Standalone demos for each component feature instead of one demo page that demonstrates multiple features.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-teal-500 border-round" style={{ width: '100%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                    <div className="p-3 surface-card border-round border-teal-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Documentation</h2>
-                                        <p className="mt-0 mb-3 line-height-3">New component API docs generated by TSDoc.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-teal-500 border-round" style={{ width: '100%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column"></div>
-                                <div className="flex-1 flex gap-3 flex-column"></div>
-                                <div className="flex-1 flex gap-3 flex-column"></div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
+                                    <p className="mt-0 mb-3 line-height-3">More UI Blocks.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-orange-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                    </div>
+                                </div>
                             </div>
-                            <div className="flex gap-3 border-bottom-1 surface-border pb-3">
-                                <div className="flex-shrink-0 p-3 bg-orange-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">PrimeBlocks</div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">New Blocks</h2>
-                                        <p className="mt-0 mb-3 line-height-3">30+ new UI Blocks.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-orange-500 border-round" style={{ width: '50%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
-                                        <p className="mt-0 mb-3 line-height-3">More UI Blocks.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-orange-500 border-round" style={{ width: '0%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
-                                        <p className="mt-0 mb-3 line-height-3">More UI Blocks.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-orange-500 border-round" style={{ width: '0%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
-                                        <p className="mt-0 mb-3 line-height-3">More UI Blocks.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-orange-500 border-round" style={{ width: '0%', height: '4px' }}></div>
-                                        </div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
+                                    <p className="mt-0 mb-3 line-height-3">More UI Blocks.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-orange-500 border-round" style={{ width: '0%', height: '4px' }}></div>
                                     </div>
                                 </div>
                             </div>
-                            <div className="flex gap-3 border-bottom-1 surface-border pb-3">
-                                <div className="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Designer</div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-pink-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">New Free Themes</h2>
-                                        <p className="mt-0 mb-3 line-height-3">Open source new themes including Soho, Viva, Mira and Nano.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-pink-500 border-round" style={{ width: '100%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-pink-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Figma Plugin Compatibility</h2>
-                                        <p className="mt-0 mb-3 line-height-3">Online service to the Figma UI Kit to generate themes from Figma.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-pink-500 border-round" style={{ width: '0%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column"></div>
-                                <div className="flex-1 flex gap-3 flex-column"></div>
+                        </div>
+                        <div className="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div className="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Designer</div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-pink-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">New Free Themes</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Open source new themes including Soho, Viva, Mira and Nano.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-pink-500 border-round" style={{ width: '100%', height: '4px' }}></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-pink-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Figma Plugin Compatibility</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Online service to the Figma UI Kit to generate themes from Figma.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-pink-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                    </div>
+                                </div>
                             </div>
-                            <div className="flex gap-3 border-bottom-1 surface-border pb-3">
-                                <div className="flex-shrink-0 p-3 bg-purple-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Templates</div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-purple-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Apollo</h2>
-                                        <p className="mt-0 mb-3 line-height-3">Port Apollo from PrimeNG using NEXT.js.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-purple-500 border-round" style={{ width: '100%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column">
-                                    <div className="p-3 surface-card border-round border-purple-500" style={{ borderLeft: '6px solid' }}>
-                                        <h2 className="text-lg font-bold mt-0 mb-2">Migrate to NEXT.js</h2>
-                                        <p className="mt-0 mb-3 line-height-3">Continue migration of templates to NEXT.js.</p>
-                                        <div className="surface-200 border-round">
-                                            <div className="bg-purple-500 border-round" style={{ width: '0%', height: '4px' }}></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="flex-1 flex gap-3 flex-column"></div>
-                                <div className="flex-1 flex gap-3 flex-column"></div>
+                            <div className="flex-1 flex gap-3 flex-column"></div>
+                            <div className="flex-1 flex gap-3 flex-column"></div>
+                        </div>
+                        <div className="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div className="flex-shrink-0 p-3 bg-purple-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">Templates</div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-purple-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Apollo</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Port Apollo from PrimeNG using NEXT.js.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-purple-500 border-round" style={{ width: '100%', height: '4px' }}></div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-purple-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Migrate to NEXT.js</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Continue migration of templates to NEXT.js.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-purple-500 border-round" style={{ width: '0%', height: '4px' }}></div>
+                                    </div>
+                                </div>
                             </div>
+                            <div className="flex-1 flex gap-3 flex-column"></div>
+                            <div className="flex-1 flex gap-3 flex-column"></div>
                         </div>
                     </div>
                 </div>
diff --git a/pages/support/index.js b/pages/support/index.js
index 89fc777428..a989f9d268 100644
--- a/pages/support/index.js
+++ b/pages/support/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 const SupportPage = () => {
     return (
-        <div className="content-section">
+        <div>
             <img alt="PRO Support" src="https://primefaces.org/cdn/primereact/images/support/support-header.png" className="w-full block mb-5" style={{ borderRadius: '20px' }} />
 
             <div className="flex flex-column xl:flex-row mb-5 gap-5">
diff --git a/pages/templates/index.js b/pages/templates/index.js
index d5df84b379..a109099d44 100644
--- a/pages/templates/index.js
+++ b/pages/templates/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 const TemplatesPage = () => {
     return (
-        <div className="content-section">
+        <div>
             <div className="doc-intro">
                 <h1>Templates</h1>
                 <p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p>
diff --git a/pages/uikit/index.js b/pages/uikit/index.js
index 81e610d3a1..ed4eb3de54 100644
--- a/pages/uikit/index.js
+++ b/pages/uikit/index.js
@@ -17,7 +17,7 @@ const UIKitPage = (props) => {
                     <title>UI Kit - PrimeReact</title>
                     <meta name="description" content="Design files for PrimeReact Components." />
                 </Head>
-                <div className="content-section">
+                <div>
                     <div style={{ borderRadius: '50px', maxHeight: '500px' }} className="overflow-hidden mb-5 flex align-items-center">
                         <img alt="PrimeReact Designer" src={`https://primefaces.org/cdn/primereact/images/uikit/primeone-cover-${props.dark ? 'dark' : 'light'}.jpg`} className="w-full" />
                     </div>
diff --git a/styles/layout/_sidebar.scss b/styles/layout/_sidebar.scss
index 43e0720eff..e635c24869 100644
--- a/styles/layout/_sidebar.scss
+++ b/styles/layout/_sidebar.scss
@@ -88,6 +88,11 @@
             background-color: var(--highlight-bg);
             color: var(--highlight-text-color);
 
+            &:hover {
+                background-color: var(--highlight-bg);
+                color: var(--highlight-text-color);
+            }
+
             > .menu-icon {
                 i {
                     color: var(--highlight-text-color);