diff --git a/src/js/components/Head.tsx b/src/js/components/Head.tsx
index dfecde1..2140a77 100644
--- a/src/js/components/Head.tsx
+++ b/src/js/components/Head.tsx
@@ -15,7 +15,7 @@ type Props = {
 export function Head({ locale, theme, setTheme, children }: Props) {
   return (
     <header className="flex flex-col h-12 mt-4 mb-4">
-      <h1 className="flex justify-center p-0 m-0">
+      <h1 className="flex justify-center p-0 m-0 mb-4">
         <a className="no-underline" href={`/${locale.name}/`}>
           {children}
         </a>
diff --git a/src/js/components/SurahIndex/index.tsx b/src/js/components/SurahIndex/index.tsx
index c159dc4..3c73ac4 100644
--- a/src/js/components/SurahIndex/index.tsx
+++ b/src/js/components/SurahIndex/index.tsx
@@ -39,7 +39,7 @@ export function SurahIndex({ appVersion, locale, surahs, t }: Props) {
       <Head locale={locale} theme={theme} setTheme={setTheme}>
         {t(locale, "TheNobleQuran")}
       </Head>
-      <ul className="body index scroll-y list-none p-0 m-0 h-5/6">
+      <ul className="body index scroll-y list-none p-0 m-0 mt-4 h-5/6">
         {index.map((surah, key) => (
           <li className="surah" key={key}>
             <a
diff --git a/src/js/components/SurahStream/Stream.tsx b/src/js/components/SurahStream/Stream.tsx
index 5a82d6b..72ab35b 100644
--- a/src/js/components/SurahStream/Stream.tsx
+++ b/src/js/components/SurahStream/Stream.tsx
@@ -23,7 +23,7 @@ export function Stream({ locale, surah, stream, endOfStream, isPaused, t }: Prop
       <ul
         lang={locale.name}
         className={classNames(
-          "body stream scroll-y list-none p-0 m-0 mt-1 h-5/6",
+          "body stream scroll-y list-none p-0 m-0 mt-4 h-5/6",
           ...className,
         )}
         ref={ref}
