diff --git a/components/DarkModeToggle.tsx b/components/DarkModeToggle.tsx
index 16ea1e8f8..253fe4a5e 100644
--- a/components/DarkModeToggle.tsx
+++ b/components/DarkModeToggle.tsx
@@ -31,7 +31,7 @@ export default function DarkModeToggle() {
   return (
     <button
       onClick={toggleDarkMode}
-      className='dark-mode-toggle rounded-md dark:hover:bg-gray-700 p-1.5 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150'
+      className='dark-mode-toggle min-w-[2rem] rounded-md dark:hover:bg-gray-700 md:p-1.5 pr-2 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150'
       disabled={!isClickable}
     >
       <img src={img} alt='Dark Mode' width={25} height={25} />
diff --git a/components/Layout.tsx b/components/Layout.tsx
index cc8d9e133..5a7a6a084 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -196,7 +196,7 @@ const MainNavigation = () => {
         isActive={section === 'community'}
       />
 
-      <div className='flex items-center max-sm:ml-4 mr-8  gap-6 md:gap-4 dark:bg-slate-800'>
+      <div className='flex items-center max-sm:ml-4 mr-8 md:mr-0 gap-6 md:gap-4 dark:bg-slate-800'>
         <div
           className={`rounded-md dark:hover:bg-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none transition duration-150  md:block border-gray-100 ml-0  ${icon}`}
           onClick={() => {