diff --git a/src/pages/DX4AppPage.jsx b/src/pages/DX4AppPage.jsx
index c7331e4..6c83d6d 100644
--- a/src/pages/DX4AppPage.jsx
+++ b/src/pages/DX4AppPage.jsx
@@ -159,7 +159,7 @@ export function DX4App({
   }, [classId, adminId]);
 
   /**
-   * @param {KeyboardEvent} event 
+   * @param {KeyboardEvent} event
    */
   const handleKeyPress = (event) => {
     switch (event.key) {
@@ -217,7 +217,6 @@ export function DX4App({
               alt="logo"
               width={100}
               draggable={false}
-              layout="position"
             />
             <motion.div className="flex gap-5 items-center">
               <AnimatePresence mode="popLayout">
@@ -234,7 +233,6 @@ export function DX4App({
                 )}
               </AnimatePresence>
               <motion.span
-                layout="position"
                 className={
                   "rounded-full w-fit h-fit" +
                   ifstyle(openUserSettings, "border")
@@ -281,7 +279,6 @@ export function DX4App({
           {adminId != "" && managing && (
             <motion.div
               className="flex w-full justify-end not-md:px-4"
-              layout="position"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
             >
@@ -301,10 +298,9 @@ export function DX4App({
             </motion.div>
           )}
           <motion.div
-            layout="position"
             className="flex flex-col gap-5 w-full not-md:px-4"
           >
-            <div className="flex gap-2 items-center justify-center">
+            <motion.div className="flex gap-2 items-center justify-center">
               <DatePicker
                 date={selectedDate}
                 setDate={setSelectedDate}
@@ -336,7 +332,7 @@ export function DX4App({
                   )}
                 </a>
               )}
-            </div>
+            </motion.div>
             <motion.div
               className="relative min-h-[50vh]"
               drag="x"