diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx
index bacb975..178cb22 100644
--- a/src/showplanner/index.tsx
+++ b/src/showplanner/index.tsx
@@ -42,6 +42,7 @@ import { OptionsMenu } from "../optionsMenu";
 import { WelcomeModal } from "./WelcomeModal";
 import { PisModal } from "./PISModal";
 import "./channel.scss";
+import Modal from "react-modal";
 
 function Channel({ id, data }: { id: number; data: PlanItem[] }) {
   return (
@@ -196,6 +197,10 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
     planSaveError,
     planSaving,
   } = useSelector((state: RootState) => state.showplan);
+
+  // Tell Modals that #root is the main page content, for accessability reasons.
+  Modal.setAppElement('#root');
+
   const session = useSelector((state: RootState) => state.session);
 
   const [showWelcomeModal, setShowWelcomeModal] = useState(