diff --git a/components/DeveloperLayout.tsx b/components/DeveloperLayout.tsx
index 4b62ce9..0989c52 100644
--- a/components/DeveloperLayout.tsx
+++ b/components/DeveloperLayout.tsx
@@ -45,18 +45,20 @@ const DeveloperLayout = ({ children, enabled, docs, currentDoc }:DeveloperLayout
 						<ul className='text-sm text-gray-600 dark:text-gray-300 px-0.5 mt-6'>
 							{
 								docs?.map(el => {
-									if(el.list) return <ul key={el.name} className='text-sm py-3'>
-										<span className='text-gray-600 dark:text-gray-100 font-bold my-1'>{el.name}</span>
-										{
-											el.list.map(e => 
-												<Link key={e.name} href={`/developers/docs/${el.name}/${e.name}`}>
-													<li className={`cursor-pointer px-4 py-2 rounded-md ${currentDoc === e.name ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
-														{e.name}
-													</li>
-												</Link>
-											)
-										}
-									</ul>
+									if(el.list) return <div key={el.name} className='mt-2'>
+										<span className='text-gray-600 dark:text-gray-100 font-bold mb-1'>{el.name}</span>
+										<ul  className='text-sm py-3'>
+											{
+												el.list.map(e => 
+													<Link key={e.name} href={`/developers/docs/${el.name}/${e.name}`}>
+														<li className={`cursor-pointer px-4 py-2 rounded-md ${currentDoc === e.name ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
+															{e.name}
+														</li>
+													</Link>
+												)
+											}
+										</ul>
+									</div>
 								
 									return <Link key={el.name} href={`/developers/docs/${el.name}`}>
 										<li className={`cursor-pointer py-2 px-4 rounded-md ${currentDoc === el.name ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>