diff --git a/src/pages/quran/[surahId].jsx b/src/pages/quran/[surahId].jsx
index 0893f17..56e0f1e 100644
--- a/src/pages/quran/[surahId].jsx
+++ b/src/pages/quran/[surahId].jsx
@@ -122,10 +122,7 @@ const SurahPage = ({ surah, prevSurah, nextSurah }) => {
 								{`<<< ${t('surah.title')} ${getSurahName(prevSurah, language)}`}
 							</Link>
 						)}
-					</span>
-
-					<span><Switch style={{backgroundColor: isReadingMode ? '#4DB6AC' : '#999999'}} checkedChildren={<span className={styles.switch}><FaBookOpen /></span>} unCheckedChildren={<span className={styles.switch}><FaBook /></span>} defaultChecked onChange={() => setIsReadingMode(!isReadingMode)} /></span>
-					
+					</span>					
 					<span className={styles.navButtonWrapper}>
 						{nextSurah && (
 							<Link href={`/quran/${nextSurah.number}`} className={styles.navButton}>
@@ -135,6 +132,9 @@ const SurahPage = ({ surah, prevSurah, nextSurah }) => {
 						)}
 					</span>
 				</div>
+				
+				<div className={styles.box_details}><Switch style={{backgroundColor: isReadingMode ? '#4DB6AC' : '#999999'}} checkedChildren={<span className={styles.switch}><FaBookOpen /></span>} unCheckedChildren={<span className={styles.switch}><FaBook /></span>} defaultChecked onChange={() => setIsReadingMode(!isReadingMode)} /></div>
+
 				{prefaceText && (
 						<p className={styles.bismillah}>{prefaceText}</p>
 				)}
diff --git a/src/styles/Surah.module.css b/src/styles/Surah.module.css
index 0ca9e04..cbf18b1 100644
--- a/src/styles/Surah.module.css
+++ b/src/styles/Surah.module.css
@@ -191,7 +191,6 @@
 .navButtonWrapper {
   display: inline-block;
   text-decoration: none;
-  min-width: 230px
 }
 
 .navButton {