diff --git a/.gitignore b/.gitignore
index e0380223..d61c99ea 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,7 +10,7 @@ __pycache__/
 .vscode/
 
 # Learnhouse 
-# content/*
+content/*
 
 # Distribution / packaging
 .Python
diff --git a/front/components/drags/chapter.tsx b/front/components/drags/chapter.tsx
index 86aa9512..9b80d4fd 100644
--- a/front/components/drags/chapter.tsx
+++ b/front/components/drags/chapter.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import Element, { ElementWrapper } from "./element";
 import Link from "next/link";
-
+import { motion } from "framer-motion";
 
 const ChapterWrapper = styled.div`
   margin-bottom: 5px;
@@ -21,19 +21,36 @@ function Chapter(props: any) {
   return (
     <Draggable key={props.info.list.chapter.id} draggableId={props.info.list.chapter.id} index={props.index}>
       {(provided, snapshot) => (
-        <ChapterWrapper {...provided.dragHandleProps} {...provided.draggableProps} ref={provided.innerRef} isDragging={snapshot.isDragging} key={props.info.list.chapter.id}>
-          <h3>{props.info.list.chapter.name} <button onClick={() => {props.deleteChapter(props.info.list.chapter.id)}}>X</button></h3>
-          <Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="element">
-            {(provided) => (
-              <ElementsList {...provided.droppableProps} ref={provided.innerRef}>
-                {props.info.list.elements.map((element: any, index: any) => (
-                  <Element key={element.id} element={element} index={index}></Element>
-                ))}
-                {provided.placeholder}
-              </ElementsList>
-            )}
-          </Droppable>
-        </ChapterWrapper>
+      
+          <ChapterWrapper
+            {...provided.dragHandleProps}
+            {...provided.draggableProps}
+            ref={provided.innerRef}
+            isDragging={snapshot.isDragging}
+            key={props.info.list.chapter.id}
+          >
+            <h3>
+              {props.info.list.chapter.name}{" "}
+              <button
+                onClick={() => {
+                  props.deleteChapter(props.info.list.chapter.id);
+                }}
+              >
+                X
+              </button>
+            </h3>
+            <Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="element">
+              {(provided) => (
+                <ElementsList {...provided.droppableProps} ref={provided.innerRef}>
+                  {props.info.list.elements.map((element: any, index: any) => (
+                    <Element key={element.id} element={element} index={index}></Element>
+                  ))}
+                  {provided.placeholder}
+                </ElementsList>
+              )}
+            </Droppable>
+          </ChapterWrapper>
+   
       )}
     </Draggable>
   );
@@ -43,6 +60,4 @@ const ElementsList = styled.div`
   padding: 10px;
 `;
 
-
-
 export default Chapter;
diff --git a/front/components/modals/Modal.tsx b/front/components/modals/Modal.tsx
index 58b3ddf7..4c54d4ee 100644
--- a/front/components/modals/Modal.tsx
+++ b/front/components/modals/Modal.tsx
@@ -1,11 +1,27 @@
 import React from "react";
 import styled from "styled-components";
+import { motion, AnimatePresence } from "framer-motion";
 
 function Modal(props: any) {
   return (
     <div>
       <Overlay>
-        <Content>{props.children}</Content>
+        <AnimatePresence>
+          <motion.div
+            initial={{ opacity: 0, left: "50%", top: "50%", scale: 0.9, backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
+            animate={{ opacity: 1, left: "50%", top: "50%", scale: 1, backdropFilter: "blur(10px)", y: 0, position: "absolute" }}
+            key="modal"
+            transition={{
+              type: "spring",
+              stiffness: 360,
+              damping: 70,
+              delay: 0.02,
+            }}
+            exit={{ opacity: 0, left: "50%", top: "46%", backdropFilter: "blur(10px)", y: -1, position: "absolute" }}
+          >
+            <Content>{props.children}</Content>
+          </motion.div>
+        </AnimatePresence>
       </Overlay>
     </div>
   );
@@ -17,7 +33,6 @@ const Overlay = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
   z-index: 100;
 `;
 
@@ -31,5 +46,6 @@ const Content = styled.div`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  box-shadow: 0px 64px 84px 15px rgb(0 0 0 / 10%);
 `;
 export default Modal;
diff --git a/front/styles/globals.css b/front/styles/globals.css
index 46708c0f..8ee06ba6 100644
--- a/front/styles/globals.css
+++ b/front/styles/globals.css
@@ -5,6 +5,7 @@ html,
 body {
   padding: 0;
   margin: 0;
+  transition: all 0.2s ease;
   font-family: 'DM Sans' , -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }