diff --git a/src/app/course/[courseName]/CollapsableSidebar.tsx b/src/app/course/[courseName]/CollapsableSidebar.tsx
index 6745d43..d83d3e7 100644
--- a/src/app/course/[courseName]/CollapsableSidebar.tsx
+++ b/src/app/course/[courseName]/CollapsableSidebar.tsx
@@ -10,7 +10,7 @@ export default function CollapsableSidebar() {
   const [isCollapsed, setIsCollapsed] = useState(false);
 
   const widthClass = isCollapsed ? "w-0" : "w-96";
-  const visibilityClass = isCollapsed ? "invisible" : "visible";
+  const visibilityClass = isCollapsed ? "invisible hidden" : "visible";
   return (
     <div>
       <div className="flex flex-row justify-between mb-2">
@@ -24,7 +24,7 @@ export default function CollapsableSidebar() {
         </div>
       </div>
       <div
-        className={`${widthClass} sm:p-3 h-full overflow-y-auto transition-all ${visibilityClass}`}
+        className={`${widthClass} sm:p-3 overflow-y-auto transition-all ${visibilityClass}`}
       >
         <ModuleList />
       </div>
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 5ded43c..aa72cf1 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -44,7 +44,7 @@ export default function Modal({
 
       <div
         className={
-          " fixed inset-0 flex items-center justify-center transition-all duration-400 h-screen w-svw " +
+          " fixed inset-0 flex items-center justify-center transition-all duration-400 h-screen w-screen " +
           " bg-black" +
           (modalControl.isOpen
             ? " bg-opacity-50  z-50  "