diff --git a/package-lock.json b/package-lock.json
index 82af423..264275b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2317,6 +2317,64 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@motionone/animation": {
+      "version": "10.14.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.14.0.tgz",
+      "integrity": "sha512-h+1sdyBP8vbxEBW5gPFDnj+m2DCqdlAuf2g6Iafb1lcMnqjsRXWlPw1AXgvUMXmreyhqmPbJqoNfIKdytampRQ==",
+      "requires": {
+        "@motionone/easing": "^10.14.0",
+        "@motionone/types": "^10.14.0",
+        "@motionone/utils": "^10.14.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/dom": {
+      "version": "10.13.1",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.13.1.tgz",
+      "integrity": "sha512-zjfX+AGMIt/fIqd/SL1Lj93S6AiJsEA3oc5M9VkUr+Gz+juRmYN1vfvZd6MvEkSqEjwPQgcjN7rGZHrDB9APfQ==",
+      "requires": {
+        "@motionone/animation": "^10.13.1",
+        "@motionone/generators": "^10.13.1",
+        "@motionone/types": "^10.13.0",
+        "@motionone/utils": "^10.13.1",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/easing": {
+      "version": "10.14.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.14.0.tgz",
+      "integrity": "sha512-2vUBdH9uWTlRbuErhcsMmt1jvMTTqvGmn9fHq8FleFDXBlHFs5jZzHJT9iw+4kR1h6a4SZQuCf72b9ji92qNYA==",
+      "requires": {
+        "@motionone/utils": "^10.14.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/generators": {
+      "version": "10.14.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.14.0.tgz",
+      "integrity": "sha512-6kRHezoFfIjFN7pPpaxmkdZXD36tQNcyJe3nwVqwJ+ZfC0e3rFmszR8kp9DEVFs9QL/akWjuGPSLBI1tvz+Vjg==",
+      "requires": {
+        "@motionone/types": "^10.14.0",
+        "@motionone/utils": "^10.14.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "@motionone/types": {
+      "version": "10.14.0",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.14.0.tgz",
+      "integrity": "sha512-3bNWyYBHtVd27KncnJLhksMFQ5o2MSdk1cA/IZqsHtA9DnRM1SYgN01CTcJ8Iw8pCXF5Ocp34tyAjY7WRpOJJQ=="
+    },
+    "@motionone/utils": {
+      "version": "10.14.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.14.0.tgz",
+      "integrity": "sha512-sLWBLPzRqkxmOTRzSaD3LFQXCPHvDzyHJ1a3VP9PRzBxyVd2pv51/gMOsdAcxQ9n+MIeGJnxzXBYplUHKj4jkw==",
+      "requires": {
+        "@motionone/types": "^10.14.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "@mui/base": {
       "version": "5.0.0-alpha.95",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.95.tgz",
@@ -6129,6 +6187,57 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
     },
+    "framer-motion": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.2.1.tgz",
+      "integrity": "sha512-bt2ZqqGpPsW6UojYUa5poWQJu3sDr4Dp3IZsdVBYdKUJ8p+9PxOk1fYRAT8lTGGmaC5HFoKrbDXQeKWGAKZz9g==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "@motionone/dom": "10.13.1",
+        "framesync": "6.1.2",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.5",
+        "style-value-types": "5.1.2",
+        "tslib": "2.4.0"
+      },
+      "dependencies": {
+        "@emotion/is-prop-valid": {
+          "version": "0.8.8",
+          "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+          "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+          "optional": true,
+          "requires": {
+            "@emotion/memoize": "0.7.4"
+          }
+        },
+        "@emotion/memoize": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+          "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+          "optional": true
+        },
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
+    "framesync": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz",
+      "integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==",
+      "requires": {
+        "tslib": "2.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -6369,6 +6478,11 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "history": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
@@ -8419,6 +8533,24 @@
         }
       }
     },
+    "popmotion": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz",
+      "integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==",
+      "requires": {
+        "framesync": "6.1.2",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.1.2",
+        "tslib": "2.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -10200,6 +10332,22 @@
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
       "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
     },
+    "style-value-types": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.1.2.tgz",
+      "integrity": "sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==",
+      "requires": {
+        "hey-listen": "^1.0.8",
+        "tslib": "2.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        }
+      }
+    },
     "stylehacks": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz",
diff --git a/package.json b/package.json
index 86cbe36..111277e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "animate.css": "^4.1.1",
     "axios": "^0.27.2",
     "firebase": "^9.9.4",
+    "framer-motion": "^7.2.1",
     "nanoid": "^4.0.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
diff --git a/src/components/AnimateRoutes/AnimateRoutes.jsx b/src/components/AnimateRoutes/AnimateRoutes.jsx
new file mode 100644
index 0000000..766ac74
--- /dev/null
+++ b/src/components/AnimateRoutes/AnimateRoutes.jsx
@@ -0,0 +1,20 @@
+import AddWord from 'components/pages/AddWord';
+import ListCard from 'components/pages/ListCard';
+import React from 'react';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import { AnimatePresence } from 'framer-motion';
+// import { AnimatePresence } from 'framer-motion/dist/framer-motion';
+
+function AnimateRoutes() {
+  const location = useLocation();
+  return (
+    <AnimatePresence>
+      <Routes location={location} key={location.pathname}>
+        <Route path="/" element={<AddWord />} />
+        <Route path="/cards" element={<ListCard />} />
+      </Routes>
+    </AnimatePresence>
+  );
+}
+
+export default AnimateRoutes;
diff --git a/src/components/AnimateRoutes/index.jsx b/src/components/AnimateRoutes/index.jsx
new file mode 100644
index 0000000..1292746
--- /dev/null
+++ b/src/components/AnimateRoutes/index.jsx
@@ -0,0 +1 @@
+export { default } from './AnimateRoutes';
diff --git a/src/components/App.css b/src/components/App.css
new file mode 100644
index 0000000..27d6e1f
--- /dev/null
+++ b/src/components/App.css
@@ -0,0 +1,31 @@
+.container {
+  position: relative;
+}
+
+.page {
+  position: absolute;
+  /* left: 15px; */
+  /* right: 15px; */
+}
+
+.page-enter {
+  opacity: 0;
+  transform: scale(1.1);
+}
+
+.page-enter-active {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 300ms, transform 300ms;
+}
+
+.page-exit {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.page-exit-active {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 300ms, transform 300ms;
+}
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 4cdb0fb..233c983 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,20 +1,45 @@
-import { Route, Routes } from 'react-router-dom';
+// import { Route, Routes, useLocation } from 'react-router-dom';
 // import AuthForm from './AuthForm';
 import Navigation from './Navigation/Navigation';
-import AddWord from './pages/AddWord';
-import ListCard from './pages/ListCard';
+// import AddWord from './pages/AddWord';
+// import ListCard from './pages/ListCard';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+// import { CSSTransition } from 'react-transition-group';
+
+import './App.css';
+import AnimateRoutes from './AnimateRoutes';
 
 export const App = () => {
+  // const routes = [
+  //   { path: '/', Component: AddWord },
+  //   { path: '/cards', Component: ListCard },
+  // ];
+
   return (
     <>
       <Navigation />
-
-      <Routes>
+      <AnimateRoutes />
+      {/* <Routes> */}
+      {/* <Routes>
         <Route path="/" element={<AddWord />} />
         <Route path="/cards" element={<ListCard />} />
-      </Routes>
+      </Routes> */}
+      {/* {routes.map(({ path, Component }) => (
+          <Route key={path} exact path={path}>
+            {({ match }) => (
+              <CSSTransition
+                timeout={1000}
+                classNames="page"
+                unmountOnExit
+                in={match != null}
+              >
+                <Component />
+              </CSSTransition>
+            )}
+          </Route>
+        ))}
+      </Routes> */}
       <ToastContainer autoClose={3000} />
       {/* <AuthForm /> */}
     </>
diff --git a/src/components/AuthForm/AuthForm.css b/src/components/AuthForm/AuthForm.css
index 8b0a790..61ff647 100644
--- a/src/components/AuthForm/AuthForm.css
+++ b/src/components/AuthForm/AuthForm.css
@@ -93,3 +93,21 @@
   font-family: 'Caveat', cursive;
   font-size: 14px;
 }
+
+.alert-enter {
+  opacity: 0;
+  transform: scale(0.9);
+}
+.alert-enter-active {
+  opacity: 1;
+  transform: translateX(0);
+  transition: opacity 300ms, transform 300ms;
+}
+.alert-exit {
+  opacity: 1;
+}
+.alert-exit-active {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 300ms, transform 300ms;
+}
diff --git a/src/components/AuthForm/AuthForm.jsx b/src/components/AuthForm/AuthForm.jsx
index 7fc28eb..c4b196b 100644
--- a/src/components/AuthForm/AuthForm.jsx
+++ b/src/components/AuthForm/AuthForm.jsx
@@ -8,7 +8,7 @@ import Modal from '@mui/material/Modal';
 import StyleIcon from '@mui/icons-material/Style';
 import LibraryAddIcon from '@mui/icons-material/LibraryAdd';
 import AddIcon from '@mui/icons-material/Add';
-
+import Zoom from '@mui/material/Zoom';
 import './AuthForm.css';
 
 const style = {
@@ -71,46 +71,60 @@ function AuthForm() {
       <div className="info" onClick={handleOpen}>
         <InfoIcon />
       </div>
+
       <Modal
         open={open}
         onClose={handleClose}
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
-        <Box sx={style}>
-          <Typography id="modal-modal-title">
-            {/* <span className="modal-text">
+        <Zoom
+          in={open}
+          style={{
+            transitionDelay: open ? '500ms' : '0ms',
+            transform: '',
+          }}
+        >
+          <Box sx={style}>
+            <Typography id="modal-modal-title">
+              {/* <span className="modal-text">
               додайте слова в поле вводу, потім натисніть кнопку +, все готово.
               летс го вчитись
             </span> */}
-            <span className="modal-text">-додайте слова в поле вводу</span>
-            <br />
-            <span className="modal-text">-потім натисніть кнопку +</span>
-            <br />
-            <span className="modal-text">-все готово. летс го вчитись 🚀</span>
-          </Typography>
-          <Typography
-            id="modal-modal-description"
-            sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
-          >
-            <StyleIcon fontSize="small" color="primary" />
-            <span className="modal-text"> - Місце з картками</span>
-          </Typography>
-          <Typography
-            id="modal-modal-description"
-            sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
-          >
-            <LibraryAddIcon fontSize="small" color="secondary" />
-            <span className="modal-text"> - Місце де додають картки</span>
-          </Typography>
-          <Typography
-            id="modal-modal-description"
-            sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
-          >
-            <AddIcon fontSize="small" color="success" />
-            <span className="modal-text"> - кнопка додає слова до карток</span>
-          </Typography>
-        </Box>
+              <span className="modal-text">-додайте слова в поле вводу</span>
+              <br />
+              <span className="modal-text">-потім натисніть кнопку +</span>
+              <br />
+              <span className="modal-text">
+                -все готово. летс го вчитись 🚀
+              </span>
+            </Typography>
+            <Typography
+              id="modal-modal-description"
+              sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
+            >
+              <StyleIcon fontSize="small" color="primary" />
+              <span className="modal-text"> - Місце з картками</span>
+            </Typography>
+            <Typography
+              id="modal-modal-description"
+              sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
+            >
+              <LibraryAddIcon fontSize="small" color="secondary" />
+              <span className="modal-text"> - Місце де додають картки</span>
+            </Typography>
+            <Typography
+              id="modal-modal-description"
+              sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
+            >
+              <AddIcon fontSize="small" color="success" />
+              <span className="modal-text">
+                {' '}
+                - кнопка додає слова до карток
+              </span>
+            </Typography>
+          </Box>
+        </Zoom>
       </Modal>
     </>
   );
diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css
index 731c14a..a4b94df 100644
--- a/src/components/Card/Card.css
+++ b/src/components/Card/Card.css
@@ -17,7 +17,7 @@
   border-radius: 3px;
   overflow: hidden;
   box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 40%);
-  margin-top: 100px;
+  margin-top: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -86,27 +86,48 @@
 }
 
 .fade-enter {
-  /* opacity: 0; */
-  transform: rotateY(-80deg);
+  /* opacity: 1; */
+  transform: rotateY(0deg);
+  /* transform: rotateY(180deg); */
   /* transform: rotateY(3.142rad); */
+  transition-duration: 2s;
+  /* transition-delay: 1s; */
+  /* transition: all 1.8s ease; */
 }
 .fade-exit {
+  /* opacity: 0; */
   /* opacity: 1; */
-  transform: rotateY(0deg);
+  transform: rotateY(360deg);
+  /* transform: rotateY(190deg); */
+  transition-duration: 2s;
+  /* transition-delay: 1s; */
+  /* transition: all 1.8s ease; */
 }
 .fade-enter-active {
   /* opacity: 1; */
   transform: rotateY(0deg);
+  /* transform: rotateY(180deg); */
+  transition-duration: 2s;
+  /* transition-delay: 1s; */
+  /* transition: all 1.8s ease; */
 }
 .fade-exit-active {
+  /* opacity: 1; */
   /* opacity: 0; */
 
-  transform: rotateY(-80deg);
+  transform: rotateY(360deg);
+  /* transform: rotateY(190deg); */
   /* transform: rotateY(3.142rad); */
+  transition-duration: 2s;
+  /* transition-delay: 1s; */
+  /* transition: all 1.8s ease; */
 }
 .fade-enter-active,
 .fade-exit-active {
   /* transition: opacity 500ms; */
-  transition: transform 500ms ease;
-  /* transition: all 0.8s ; */
+  /* transition: transform 1900ms ease; */
+  /* transition: all 0.8s ease; */
+  transition-duration: 2s;
+  /* transition-delay: 2s; */
+  /* transition: transform 4500ms; */
 }
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index 53d981e..d8b2a4c 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -14,6 +14,7 @@ import Typography from '@mui/material/Typography';
 import Modal from '@mui/material/Modal';
 import SettingsEthernetSharpIcon from '@mui/icons-material/SettingsEthernetSharp';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+import Zoom from '@mui/material/Zoom';
 import './Card.css';
 import { red } from '@mui/material/colors';
 
@@ -137,6 +138,38 @@ function Card() {
                 </span>
               )}
             </div>
+
+            {/* <div className="card" onClick={e => setState(state => !state)}>
+              {loader && (
+                <Box sx={{ display: 'flex' }}>
+                  <CircularProgress sx={{ color: '#ff9800' }} />
+                </Box>
+              )}
+              {word.length > 0 && (
+                <button
+                  id={word[indexWord]?.id}
+                  className="remove__text"
+                  onClick={removeWord}
+                >
+                  <RemoveCircleIcon />
+                </button>
+              )}
+              {word.length > 0 && (
+                <button
+                  id={word[indexWord]?.id}
+                  className="delete__text"
+                  onClick={deleteWord}
+                >
+                  <DeleteForeverIcon />
+                </button>
+              )}
+
+              {word.length > 0 && (
+                <span className="card__text">
+                  {state ? word[indexWord]?.en : word[indexWord]?.ru}
+                </span>
+              )}
+            </div> */}
           </CSSTransition>
         </SwitchTransition>
         <div className="paginator">
@@ -156,7 +189,7 @@ function Card() {
               <NavigateNextIcon />
             </span>
           ) : null}
-        </div>{' '}
+        </div>
         <div className="description__wrap">
           <span>{word.length} - Words</span>
         </div>
@@ -164,52 +197,61 @@ function Card() {
       <div className="info" onClick={handleOpen}>
         <InfoIcon />
       </div>
+
       <Modal
         open={open}
         onClose={handleClose}
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
       >
-        <Box sx={style}>
-          <Typography id="modal-modal-title">
-            {/* <span className="modal-text">
+        <Zoom
+          in={open}
+          style={{
+            transitionDelay: open ? '500ms' : '0ms',
+            transform: '',
+          }}
+        >
+          <Box sx={style}>
+            <Typography id="modal-modal-title">
+              {/* <span className="modal-text">
               додайте слова в поле вводу, потім натисніть кнопку +, все готово.
               летс го вчитись
             </span> */}
-            <span className="modal-text">
-              - тицай в картку вона покаже переклад
-            </span>
-            <br />
-            <span className="modal-text">
-              - тицай в картку повторно вона сховає переклад
-            </span>
-            <br />
-            <span className="modal-text">летс го вчитись 🚀</span>
-          </Typography>
-          <Typography
-            id="modal-modal-description"
-            sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
-          >
-            <RemoveCircleOutlineIcon fontSize="small" color="primary" />
-            <span className="modal-text">
-              - видалення картки на поточну сессію
-            </span>
-          </Typography>
-          <Typography
-            id="modal-modal-description"
-            sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
-          >
-            <DeleteForeverIcon fontSize="small" sx={{ color: red[500] }} />
-            <span className="modal-text"> - видалення картки назавжди</span>
-          </Typography>
-          <Typography
-            id="modal-modal-description"
-            sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
-          >
-            <SettingsEthernetSharpIcon fontSize="small" color="success" />
-            <span className="modal-text"> - гортаєм слова</span>
-          </Typography>
-        </Box>
+              <span className="modal-text">
+                - тицай в картку вона покаже переклад
+              </span>
+              <br />
+              <span className="modal-text">
+                - тицай в картку повторно вона сховає переклад
+              </span>
+              <br />
+              <span className="modal-text">летс го вчитись 🚀</span>
+            </Typography>
+            <Typography
+              id="modal-modal-description"
+              sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
+            >
+              <RemoveCircleOutlineIcon fontSize="small" color="primary" />
+              <span className="modal-text">
+                - видалення картки на поточну сессію
+              </span>
+            </Typography>
+            <Typography
+              id="modal-modal-description"
+              sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
+            >
+              <DeleteForeverIcon fontSize="small" sx={{ color: red[500] }} />
+              <span className="modal-text"> - видалення картки назавжди</span>
+            </Typography>
+            <Typography
+              id="modal-modal-description"
+              sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
+            >
+              <SettingsEthernetSharpIcon fontSize="small" color="success" />
+              <span className="modal-text"> - гортаєм слова</span>
+            </Typography>
+          </Box>
+        </Zoom>
       </Modal>
     </>
   );
diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.css
index 211f3e4..00b838a 100644
--- a/src/components/Navigation/Navigation.css
+++ b/src/components/Navigation/Navigation.css
@@ -1,5 +1,5 @@
 .header {
-  position: fixed;
+  /* position: fixed; */
   height: 60px;
   width: 100%;
   display: flex;
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index 88eeaee..e7d6d6f 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -31,17 +31,11 @@ function Navigation() {
             alignItems: 'center',
           }}
         >
-          {/* <img
-            alt={name}
-            src="https://lh3.googleusercontent.com/a-/AFdZucqsMvYj4eU7s0ctgAB71fdJ2rRawqIVOznviNr8Rg=s96-c"
-          /> */}
           <Avatar alt={name} src={image} />
           <span className="name">{name}</span>
         </Stack>
         <NavLink to="/cards" className="link ">
-          {/* <div className="animate__animated animate__bounceOut"> */}
           <StyleIcon />
-          {/* </div> */}
         </NavLink>
       </div>
     </div>
diff --git a/src/components/pages/AddWord/AddWord.css b/src/components/pages/AddWord/AddWord.css
index e4cee45..beaf0d4 100644
--- a/src/components/pages/AddWord/AddWord.css
+++ b/src/components/pages/AddWord/AddWord.css
@@ -1,5 +1,5 @@
 .form__wrap {
-  padding-top: 200px;
+  /* padding-top: 200px; */
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/components/pages/AddWord/AddWord.jsx b/src/components/pages/AddWord/AddWord.jsx
index d88420e..3b841a2 100644
--- a/src/components/pages/AddWord/AddWord.jsx
+++ b/src/components/pages/AddWord/AddWord.jsx
@@ -9,6 +9,8 @@ import Modal from '@mui/material/Modal';
 import StyleIcon from '@mui/icons-material/Style';
 import LibraryAddIcon from '@mui/icons-material/LibraryAdd';
 import AddIcon from '@mui/icons-material/Add';
+import { motion } from 'framer-motion';
+import Zoom from '@mui/material/Zoom';
 import './AddWord.css';
 
 const style = {
@@ -40,7 +42,16 @@ function AddWord() {
     document.location.reload();
   };
   return (
-    <>
+    <motion.div
+      style={{}}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+
+      // initial={{ width: 0 }}
+      // animate={{ width: '100% ' }}
+      // exit={{ x: window.innerWidth, transition: { duration: 0.1 } }}
+    >
       {!name && (
         <div className="form__wrap">
           <Form />
@@ -69,51 +80,61 @@ function AddWord() {
             aria-labelledby="modal-modal-title"
             aria-describedby="modal-modal-description"
           >
-            <Box sx={style}>
-              <Typography id="modal-modal-title">
-                {/* <span className="modal-text">
+            <Zoom
+              in={open}
+              style={{
+                transitionDelay: open ? '500ms' : '0ms',
+                transform: '',
+              }}
+            >
+              <Box sx={style}>
+                <Typography id="modal-modal-title">
+                  {/* <span className="modal-text">
               додайте слова в поле вводу, потім натисніть кнопку +, все готово.
               летс го вчитись
             </span> */}
-                <span className="modal-text">-додайте слова в поле вводу</span>
-                <br />
-                <span className="modal-text">-потім натисніть кнопку +</span>
-                <br />
-                <span className="modal-text">
-                  -все готово. летс го вчитись 🚀
-                </span>
-              </Typography>
-              <Typography
-                id="modal-modal-description"
-                sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
-              >
-                <StyleIcon fontSize="small" color="primary" />
-                <span className="modal-text"> - Місце з картками</span>
-              </Typography>
-              <Typography
-                id="modal-modal-description"
-                sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
-              >
-                <LibraryAddIcon fontSize="small" color="secondary" />
-                <span className="modal-text"> - Місце де додають картки</span>
-              </Typography>
-              <Typography
-                id="modal-modal-description"
-                sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
-              >
-                <AddIcon fontSize="small" color="success" />
-                <span className="modal-text">
-                  {' '}
-                  - кнопка додає слова до карток
-                </span>
-              </Typography>
-            </Box>
+                  <span className="modal-text">
+                    -додайте слова в поле вводу
+                  </span>
+                  <br />
+                  <span className="modal-text">-потім натисніть кнопку +</span>
+                  <br />
+                  <span className="modal-text">
+                    -все готово. летс го вчитись 🚀
+                  </span>
+                </Typography>
+                <Typography
+                  id="modal-modal-description"
+                  sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
+                >
+                  <StyleIcon fontSize="small" color="primary" />
+                  <span className="modal-text"> - Місце з картками</span>
+                </Typography>
+                <Typography
+                  id="modal-modal-description"
+                  sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
+                >
+                  <LibraryAddIcon fontSize="small" color="secondary" />
+                  <span className="modal-text"> - Місце де додають картки</span>
+                </Typography>
+                <Typography
+                  id="modal-modal-description"
+                  sx={{ mt: 1, display: 'flex', alignItems: 'center' }}
+                >
+                  <AddIcon fontSize="small" color="success" />
+                  <span className="modal-text">
+                    {' '}
+                    - кнопка додає слова до карток
+                  </span>
+                </Typography>
+              </Box>
+            </Zoom>
           </Modal>
         </>
       )}
       {!name && <AuthForm />}
       {/* <AuthForm /> */}
-    </>
+    </motion.div>
   );
 }
 
diff --git a/src/components/pages/ListCard/ListCard.jsx b/src/components/pages/ListCard/ListCard.jsx
index d1bf41e..0e420ee 100644
--- a/src/components/pages/ListCard/ListCard.jsx
+++ b/src/components/pages/ListCard/ListCard.jsx
@@ -1,12 +1,28 @@
-import Card from 'components/Card';
 import React from 'react';
+import Card from 'components/Card';
+import { motion } from 'framer-motion';
 
 function ListCard() {
   return (
-    <>
-      <div>ListCard</div>
+    <motion.div
+      style={{
+        position: 'absolute',
+        height: '91%',
+        top: '56px',
+        // overflow: 'hidden',
+        width: '100%',
+      }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+
+      // initial={{ width: 0 }}
+      // animate={{ width: '100%' }}
+      // exit={{ x: window.innerWidth, transition: { duration: 0.1 } }}
+    >
+      {/* <div>ListCard</div> */}
       <Card />
-    </>
+    </motion.div>
   );
 }