diff --git a/components/Info.tsx b/components/Info.tsx
index 03d4067..3ce7071 100644
--- a/components/Info.tsx
+++ b/components/Info.tsx
@@ -20,9 +20,9 @@ export default function Info() {
 
   var classNameCondition = ""
   if (open) {
-    classNameCondition = "fixed z-90 top-44 right-4 md:top-48 md:right-8 top-48 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+    classNameCondition = "fixed z-20 top-44 right-4 md:top-48 md:right-8 top-48 right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
   } else {
-    classNameCondition = "fixed z-90 top-44 right-4 md:top-48 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
+    classNameCondition = "fixed z-20 top-44 right-4 md:top-48 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
   }
 
   return (
diff --git a/components/Pause.tsx b/components/Pause.tsx
index 07ccde1..8ef75d4 100644
--- a/components/Pause.tsx
+++ b/components/Pause.tsx
@@ -22,9 +22,9 @@ export default function Pause({
 
   var classNameCondition = ""
   if (paused) {
-    classNameCondition="animate-pulse fixed z-90 top-4 right-4 md:top-8 md:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 hover:drop-shadow-2xl"
+    classNameCondition="animate-pulse fixed z-20 top-4 right-4 md:top-8 md:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 focus:ring-4 focus:outline-none focus:ring-sky-600 hover:drop-shadow-2xl"
   } else {
-    classNameCondition="fixed z-90 top-4 right-4 md:top-8 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
+    classNameCondition="fixed z-20 top-4 right-4 md:top-8 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
   }
 
   return (
diff --git a/components/PromptPanel.tsx b/components/PromptPanel.tsx
index 374ff71..cf03f7e 100644
--- a/components/PromptPanel.tsx
+++ b/components/PromptPanel.tsx
@@ -129,7 +129,7 @@ export default function PromptPanel({
 
   return (
     <>
-      <main className="fixed md:static md:w-2/3 md:min-h-screen">
+      <main className="z-10 fixed md:static md:w-2/3 md:min-h-screen">
         <div className="pl-10 pr-10 md:pl-20">
           <div className="sm-landscape:h-[62vh] h-[78vh] md:h-[80vh] flex flex-col justify-around pt-[10vh] pr-5">
             {getDisplayPrompts().map((prompt, index) => (
diff --git a/components/Share.tsx b/components/Share.tsx
index 9b028dd..4cd4263 100644
--- a/components/Share.tsx
+++ b/components/Share.tsx
@@ -30,9 +30,9 @@ export default function Share({
 
     var classNameCondition = ""
     if (open) {
-        classNameCondition = "fixed z-90 top-24 right-4 md:top-28 md:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+        classNameCondition = "fixed z-20 top-24 right-4 md:top-28 md:right-8 bg-sky-400 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-white text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
     } else {
-        classNameCondition = "fixed z-90 top-24 right-4 md:top-28 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
+        classNameCondition = "fixed z-20 top-24 right-4 md:top-28 md:right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg flex justify-center items-center text-sky-900 text-2xl hover:text-white hover:bg-sky-600 hover:drop-shadow-2xl"
     }
 
     // function to copy link to moment in song to the clipboard
diff --git a/pages/index.tsx b/pages/index.tsx
index e34a561..f686d3f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -195,7 +195,7 @@ export default function Home() {
       <PageHead />
 
       <div className="bg-[#0A2342] flex flex-row min-h-screen text-white">
-        <div className="w-0 md:w-1/3 min-h-screen">
+        <div className="w-full z-0 md:w-1/3 min-h-screen">
           <ThreeCanvas
             paused={paused}
             getTime={() => Tone.Transport.seconds}