diff --git a/components/transition.tsx b/components/transition.tsx
new file mode 100644
index 0000000..5d6272c
--- /dev/null
+++ b/components/transition.tsx
@@ -0,0 +1,31 @@
+import { FC, ReactNode } from "react";
+import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
+
+interface TransitionProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+const Transition: FC<TransitionProps> = ({ children, className }) => {
+  const shouldReduceMotion = useReducedMotion();
+  return (
+    <AnimatePresence>
+      <motion.div
+        className={className}
+        initial={{ 
+          y: 100, 
+          opacity: 0
+        }}
+        whileInView={{ 
+          y: 0, 
+          opacity: 1
+        }}
+        viewport={{ once: true }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default Transition;
diff --git a/package-lock.json b/package-lock.json
index 2200f29..a236850 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,13 @@
       "name": "card-valuator",
       "version": "0.1.0",
       "dependencies": {
-        "@tauri-apps/api": "^1.1.0",
+        "@tauri-apps/api": "^1.2.0",
         "@types/lodash": "^4.14.187",
         "@types/node": "18.11.9",
         "@types/react": "18.0.24",
         "@types/react-dom": "18.0.8",
         "chart.js": "^3.9.1",
+        "framer-motion": "^7.6.5",
         "lodash": "^4.17.21",
         "next": "13.0.1",
         "react": "18.2.0",
@@ -22,12 +23,85 @@
         "typescript": "4.8.4"
       },
       "devDependencies": {
-        "@tauri-apps/cli": "^1.1.1",
+        "@tauri-apps/cli": "^1.2.0",
         "autoprefixer": "^10.4.13",
         "postcss": "^8.4.18",
         "tailwindcss": "^3.2.1"
       }
     },
+    "node_modules/@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,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@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
+    },
+    "node_modules/@motionone/animation": {
+      "version": "10.14.0",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.14.0.tgz",
+      "integrity": "sha512-h+1sdyBP8vbxEBW5gPFDnj+m2DCqdlAuf2g6Iafb1lcMnqjsRXWlPw1AXgvUMXmreyhqmPbJqoNfIKdytampRQ==",
+      "dependencies": {
+        "@motionone/easing": "^10.14.0",
+        "@motionone/types": "^10.14.0",
+        "@motionone/utils": "^10.14.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@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==",
+      "dependencies": {
+        "@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"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.14.0",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.14.0.tgz",
+      "integrity": "sha512-2vUBdH9uWTlRbuErhcsMmt1jvMTTqvGmn9fHq8FleFDXBlHFs5jZzHJT9iw+4kR1h6a4SZQuCf72b9ji92qNYA==",
+      "dependencies": {
+        "@motionone/utils": "^10.14.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.14.0",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.14.0.tgz",
+      "integrity": "sha512-6kRHezoFfIjFN7pPpaxmkdZXD36tQNcyJe3nwVqwJ+ZfC0e3rFmszR8kp9DEVFs9QL/akWjuGPSLBI1tvz+Vjg==",
+      "dependencies": {
+        "@motionone/types": "^10.14.0",
+        "@motionone/utils": "^10.14.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.14.0",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.14.0.tgz",
+      "integrity": "sha512-3bNWyYBHtVd27KncnJLhksMFQ5o2MSdk1cA/IZqsHtA9DnRM1SYgN01CTcJ8Iw8pCXF5Ocp34tyAjY7WRpOJJQ=="
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.14.0",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.14.0.tgz",
+      "integrity": "sha512-sLWBLPzRqkxmOTRzSaD3LFQXCPHvDzyHJ1a3VP9PRzBxyVd2pv51/gMOsdAcxQ9n+MIeGJnxzXBYplUHKj4jkw==",
+      "dependencies": {
+        "@motionone/types": "^10.14.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/@next/env": {
       "version": "13.0.1",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.0.1.tgz",
@@ -272,11 +346,11 @@
       }
     },
     "node_modules/@tauri-apps/api": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.1.0.tgz",
-      "integrity": "sha512-n13pIqdPd3KtaMmmAcrU7BTfdMtIlGNnfZD0dNX8L4p8dgmuNyikm6JAA+yCpl9gqq6I8x5cV2Y0muqdgD0cWw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.2.0.tgz",
+      "integrity": "sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw==",
       "engines": {
-        "node": ">= 12.22.0",
+        "node": ">= 14.6.0",
         "npm": ">= 6.6.0",
         "yarn": ">= 1.19.1"
       },
@@ -286,9 +360,9 @@
       }
     },
     "node_modules/@tauri-apps/cli": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-1.1.1.tgz",
-      "integrity": "sha512-80kjMEMPBwLYCp0tTKSquy90PHHGGBvZsneNr3B/mWxNsvjzA1C0vOyGJGFrJuT2OmkvrdvuJZ5mch5hL8O1Xg==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-1.2.0.tgz",
+      "integrity": "sha512-DgUnk4p/atWHq2HUx9Vt+/LuRsx4iFlkzdZIUxtFWvpcZih2k0TzmHJbrhM1evh1/7a+SqiwDawmyf3Hz1HxXA==",
       "dev": true,
       "bin": {
         "tauri": "tauri.js"
@@ -301,21 +375,21 @@
         "url": "https://opencollective.com/tauri"
       },
       "optionalDependencies": {
-        "@tauri-apps/cli-darwin-arm64": "1.1.1",
-        "@tauri-apps/cli-darwin-x64": "1.1.1",
-        "@tauri-apps/cli-linux-arm-gnueabihf": "1.1.1",
-        "@tauri-apps/cli-linux-arm64-gnu": "1.1.1",
-        "@tauri-apps/cli-linux-arm64-musl": "1.1.1",
-        "@tauri-apps/cli-linux-x64-gnu": "1.1.1",
-        "@tauri-apps/cli-linux-x64-musl": "1.1.1",
-        "@tauri-apps/cli-win32-ia32-msvc": "1.1.1",
-        "@tauri-apps/cli-win32-x64-msvc": "1.1.1"
+        "@tauri-apps/cli-darwin-arm64": "1.2.0",
+        "@tauri-apps/cli-darwin-x64": "1.2.0",
+        "@tauri-apps/cli-linux-arm-gnueabihf": "1.2.0",
+        "@tauri-apps/cli-linux-arm64-gnu": "1.2.0",
+        "@tauri-apps/cli-linux-arm64-musl": "1.2.0",
+        "@tauri-apps/cli-linux-x64-gnu": "1.2.0",
+        "@tauri-apps/cli-linux-x64-musl": "1.2.0",
+        "@tauri-apps/cli-win32-ia32-msvc": "1.2.0",
+        "@tauri-apps/cli-win32-x64-msvc": "1.2.0"
       }
     },
     "node_modules/@tauri-apps/cli-darwin-arm64": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-1.1.1.tgz",
-      "integrity": "sha512-qBG11ig525/qf0f5OQxn0ON3hT8YdpTfpa4Y4kVqBJhdW50R5fadPv6tv5Dpl2TS2X7nWh/zg5mEXYoCK3HZ9w==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-1.2.0.tgz",
+      "integrity": "sha512-f3LR2RvTU2ulxYdK9Nc3vKaSpDChu52pz0BMWNrSs3dxs4WTVioie98Ufz+GorifkUp3sYXcJte3HzX6wH/QxQ==",
       "cpu": [
         "arm64"
       ],
@@ -329,9 +403,9 @@
       }
     },
     "node_modules/@tauri-apps/cli-darwin-x64": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-1.1.1.tgz",
-      "integrity": "sha512-M3dMsp78OdxisbTwAWGvy3jIb3uqThtQcUYVvqOu9LeEOHyldOBFDSht+6PTBpaJLAHFMQK2rmNxiWgigklJaA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-1.2.0.tgz",
+      "integrity": "sha512-m07QZaAZCtyobrjddfz/Rxf9GGutnBOpRMbNqVqCk0qKRJzHG1fIsLqkgZh6+qPv0zHpu7xi/FPcqTec72Cp8w==",
       "cpu": [
         "x64"
       ],
@@ -345,9 +419,9 @@
       }
     },
     "node_modules/@tauri-apps/cli-linux-arm-gnueabihf": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-1.1.1.tgz",
-      "integrity": "sha512-LYlvdAd73cq+yTi6rw7j/DWIvDpeApwgQkIn+HYsNNeFhyFmABU7tmw+pekK3W3nHAkYAJ69Rl4ZdoxdNGKmHg==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-1.2.0.tgz",
+      "integrity": "sha512-Id9eF1JtthZRFVtXAAVtSlI3uMT8cJ7LYmCSIl3mAXEUeaPBxnUs1i9X6/J+2Ho3yLEuuOxJ7PaJd+4v8wnEeg==",
       "cpu": [
         "arm"
       ],
@@ -361,9 +435,9 @@
       }
     },
     "node_modules/@tauri-apps/cli-linux-arm64-gnu": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-1.1.1.tgz",
-      "integrity": "sha512-o/hbMQIKuFI7cTNpeQBHD/OCNJOBIci78faKms/t6AstLXx0QJuRHDk477Rg6VVy/I3BBKbyATALbmcTq+ti0A==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-1.2.0.tgz",
+      "integrity": "sha512-NtfPkkpeMPl+i/tB/Fc8ST2rKO2vV8int/RkOvNGLCkhWcl4sbzKBol7tc4q8c8h0X7FXDcF1l/EOuGsZUAA5Q==",
       "cpu": [
         "arm64"
       ],
@@ -377,9 +451,9 @@
       }
     },
     "node_modules/@tauri-apps/cli-linux-arm64-musl": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.1.1.tgz",
-      "integrity": "sha512-8Ci4qlDnXIp93XqUrtzFCBDatUzPHpZq7L3bociUbWpvy/bnlzxp1C/C+vwdc4uS1MiAp9v3BFgrU4i0f0Z3QQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.2.0.tgz",
+      "integrity": "sha512-tz+mOOVsy/TMdq2WJVIJl/iwW3OCWCyD5Fls3fhyJ4XpLfjn4G+C+oU0awXD/0se0ko81aq4D+r8eDx6oBRi0A==",
       "cpu": [
         "arm64"
       ],
@@ -393,9 +467,9 @@
       }
     },
     "node_modules/@tauri-apps/cli-linux-x64-gnu": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-1.1.1.tgz",
-      "integrity": "sha512-ES4Bkx2JAI8+dDNDJswhLS3yqt+yT/4C6UfGOPIHFxcXUh6fe36eUllrTt+HLRS9xTZbYnteJy7ebq2TqMkaxw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-1.2.0.tgz",
+      "integrity": "sha512-FH/wU+OWZjRQvrq/oequScr72I84XgOuRuMEpt/GqGD341cBJ8ithpoyzuiKsvjS6K0qMyRFzy3eyhQ7gwX+4Q==",
       "cpu": [
         "x64"
       ],
@@ -409,9 +483,9 @@
       }
     },
     "node_modules/@tauri-apps/cli-linux-x64-musl": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-1.1.1.tgz",
-      "integrity": "sha512-qrN1WOMAaDl+LE8P8iO0+DYlrWNTc9jIu/CsnVY/LImTn79ZPxEkcVBo0UGeKRI7f10TfvkVmLCBLxTz8QhEyA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-1.2.0.tgz",
+      "integrity": "sha512-nLg30aBT9fI83sjIqaGPN7twbtE5LJy2DbKzxIlw59F+GT8HBdiM/2mZdTLB3AQb52yVHuGB1TVtWDsl0JHqCA==",
       "cpu": [
         "x64"
       ],
@@ -425,9 +499,9 @@
       }
     },
     "node_modules/@tauri-apps/cli-win32-ia32-msvc": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-1.1.1.tgz",
-      "integrity": "sha512-vw7VOmrQlywHhFV3pf54udf2FRNj9dg9WP1gL0My55FnB+w+PWS9Ipm871kX5qepmChdnZHKq9fsqE2uTjX//Q==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-1.2.0.tgz",
+      "integrity": "sha512-eXtgIgY0fawgcOuUjH8Y6PxwPxbK87Zl9XmA7Q0m58T7pIz+gcbgvtH8Bb+liYHoRYItIhQxVm+ui7Y59rI7Cg==",
       "cpu": [
         "ia32"
       ],
@@ -441,9 +515,9 @@
       }
     },
     "node_modules/@tauri-apps/cli-win32-x64-msvc": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-1.1.1.tgz",
-      "integrity": "sha512-OukxlLLi3AoCN4ABnqCDTiiC7xJGWukAjrKCIx7wFISrLjNfsrnH7/UOzuopfGpZChSe2c+AamVmcpBfVsEmJA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-1.2.0.tgz",
+      "integrity": "sha512-egyM66R05AIbkaUDptpHurFTIYp3VM4H5OrRd3O2b0oXf8SoiXiyrHbQsHVHHDYyytKmwkdNqjdy+Vev/Vq25Q==",
       "cpu": [
         "x64"
       ],
@@ -838,6 +912,44 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "7.6.5",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.6.5.tgz",
+      "integrity": "sha512-PhS5z9r1OuG6d9xy2B5paYvbWWsOhuPPCawcBwMN3AVzmiXKXZ2Ucizf8SqSE4On5xyCR+A2gmQZhBlYr/Gzjg==",
+      "dependencies": {
+        "@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"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/framer-motion/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
+    "node_modules/framesync": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz",
+      "integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==",
+      "dependencies": {
+        "tslib": "2.4.0"
+      }
+    },
+    "node_modules/framesync/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -882,6 +994,11 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1148,6 +1265,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz",
+      "integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==",
+      "dependencies": {
+        "framesync": "6.1.2",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.1.2",
+        "tslib": "2.4.0"
+      }
+    },
+    "node_modules/popmotion/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
     "node_modules/postcss": {
       "version": "8.4.18",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
@@ -1426,6 +1559,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/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==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "2.4.0"
+      }
+    },
+    "node_modules/style-value-types/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.0.tgz",
@@ -1590,6 +1737,79 @@
     }
   },
   "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
+    },
+    "@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"
+      }
+    },
     "@next/env": {
       "version": "13.0.1",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.0.1.tgz",
@@ -1708,87 +1928,87 @@
       }
     },
     "@tauri-apps/api": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.1.0.tgz",
-      "integrity": "sha512-n13pIqdPd3KtaMmmAcrU7BTfdMtIlGNnfZD0dNX8L4p8dgmuNyikm6JAA+yCpl9gqq6I8x5cV2Y0muqdgD0cWw=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.2.0.tgz",
+      "integrity": "sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw=="
     },
     "@tauri-apps/cli": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-1.1.1.tgz",
-      "integrity": "sha512-80kjMEMPBwLYCp0tTKSquy90PHHGGBvZsneNr3B/mWxNsvjzA1C0vOyGJGFrJuT2OmkvrdvuJZ5mch5hL8O1Xg==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-1.2.0.tgz",
+      "integrity": "sha512-DgUnk4p/atWHq2HUx9Vt+/LuRsx4iFlkzdZIUxtFWvpcZih2k0TzmHJbrhM1evh1/7a+SqiwDawmyf3Hz1HxXA==",
       "dev": true,
       "requires": {
-        "@tauri-apps/cli-darwin-arm64": "1.1.1",
-        "@tauri-apps/cli-darwin-x64": "1.1.1",
-        "@tauri-apps/cli-linux-arm-gnueabihf": "1.1.1",
-        "@tauri-apps/cli-linux-arm64-gnu": "1.1.1",
-        "@tauri-apps/cli-linux-arm64-musl": "1.1.1",
-        "@tauri-apps/cli-linux-x64-gnu": "1.1.1",
-        "@tauri-apps/cli-linux-x64-musl": "1.1.1",
-        "@tauri-apps/cli-win32-ia32-msvc": "1.1.1",
-        "@tauri-apps/cli-win32-x64-msvc": "1.1.1"
+        "@tauri-apps/cli-darwin-arm64": "1.2.0",
+        "@tauri-apps/cli-darwin-x64": "1.2.0",
+        "@tauri-apps/cli-linux-arm-gnueabihf": "1.2.0",
+        "@tauri-apps/cli-linux-arm64-gnu": "1.2.0",
+        "@tauri-apps/cli-linux-arm64-musl": "1.2.0",
+        "@tauri-apps/cli-linux-x64-gnu": "1.2.0",
+        "@tauri-apps/cli-linux-x64-musl": "1.2.0",
+        "@tauri-apps/cli-win32-ia32-msvc": "1.2.0",
+        "@tauri-apps/cli-win32-x64-msvc": "1.2.0"
       }
     },
     "@tauri-apps/cli-darwin-arm64": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-1.1.1.tgz",
-      "integrity": "sha512-qBG11ig525/qf0f5OQxn0ON3hT8YdpTfpa4Y4kVqBJhdW50R5fadPv6tv5Dpl2TS2X7nWh/zg5mEXYoCK3HZ9w==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-1.2.0.tgz",
+      "integrity": "sha512-f3LR2RvTU2ulxYdK9Nc3vKaSpDChu52pz0BMWNrSs3dxs4WTVioie98Ufz+GorifkUp3sYXcJte3HzX6wH/QxQ==",
       "dev": true,
       "optional": true
     },
     "@tauri-apps/cli-darwin-x64": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-1.1.1.tgz",
-      "integrity": "sha512-M3dMsp78OdxisbTwAWGvy3jIb3uqThtQcUYVvqOu9LeEOHyldOBFDSht+6PTBpaJLAHFMQK2rmNxiWgigklJaA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-1.2.0.tgz",
+      "integrity": "sha512-m07QZaAZCtyobrjddfz/Rxf9GGutnBOpRMbNqVqCk0qKRJzHG1fIsLqkgZh6+qPv0zHpu7xi/FPcqTec72Cp8w==",
       "dev": true,
       "optional": true
     },
     "@tauri-apps/cli-linux-arm-gnueabihf": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-1.1.1.tgz",
-      "integrity": "sha512-LYlvdAd73cq+yTi6rw7j/DWIvDpeApwgQkIn+HYsNNeFhyFmABU7tmw+pekK3W3nHAkYAJ69Rl4ZdoxdNGKmHg==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-1.2.0.tgz",
+      "integrity": "sha512-Id9eF1JtthZRFVtXAAVtSlI3uMT8cJ7LYmCSIl3mAXEUeaPBxnUs1i9X6/J+2Ho3yLEuuOxJ7PaJd+4v8wnEeg==",
       "dev": true,
       "optional": true
     },
     "@tauri-apps/cli-linux-arm64-gnu": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-1.1.1.tgz",
-      "integrity": "sha512-o/hbMQIKuFI7cTNpeQBHD/OCNJOBIci78faKms/t6AstLXx0QJuRHDk477Rg6VVy/I3BBKbyATALbmcTq+ti0A==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-1.2.0.tgz",
+      "integrity": "sha512-NtfPkkpeMPl+i/tB/Fc8ST2rKO2vV8int/RkOvNGLCkhWcl4sbzKBol7tc4q8c8h0X7FXDcF1l/EOuGsZUAA5Q==",
       "dev": true,
       "optional": true
     },
     "@tauri-apps/cli-linux-arm64-musl": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.1.1.tgz",
-      "integrity": "sha512-8Ci4qlDnXIp93XqUrtzFCBDatUzPHpZq7L3bociUbWpvy/bnlzxp1C/C+vwdc4uS1MiAp9v3BFgrU4i0f0Z3QQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.2.0.tgz",
+      "integrity": "sha512-tz+mOOVsy/TMdq2WJVIJl/iwW3OCWCyD5Fls3fhyJ4XpLfjn4G+C+oU0awXD/0se0ko81aq4D+r8eDx6oBRi0A==",
       "dev": true,
       "optional": true
     },
     "@tauri-apps/cli-linux-x64-gnu": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-1.1.1.tgz",
-      "integrity": "sha512-ES4Bkx2JAI8+dDNDJswhLS3yqt+yT/4C6UfGOPIHFxcXUh6fe36eUllrTt+HLRS9xTZbYnteJy7ebq2TqMkaxw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-1.2.0.tgz",
+      "integrity": "sha512-FH/wU+OWZjRQvrq/oequScr72I84XgOuRuMEpt/GqGD341cBJ8ithpoyzuiKsvjS6K0qMyRFzy3eyhQ7gwX+4Q==",
       "dev": true,
       "optional": true
     },
     "@tauri-apps/cli-linux-x64-musl": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-1.1.1.tgz",
-      "integrity": "sha512-qrN1WOMAaDl+LE8P8iO0+DYlrWNTc9jIu/CsnVY/LImTn79ZPxEkcVBo0UGeKRI7f10TfvkVmLCBLxTz8QhEyA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-1.2.0.tgz",
+      "integrity": "sha512-nLg30aBT9fI83sjIqaGPN7twbtE5LJy2DbKzxIlw59F+GT8HBdiM/2mZdTLB3AQb52yVHuGB1TVtWDsl0JHqCA==",
       "dev": true,
       "optional": true
     },
     "@tauri-apps/cli-win32-ia32-msvc": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-1.1.1.tgz",
-      "integrity": "sha512-vw7VOmrQlywHhFV3pf54udf2FRNj9dg9WP1gL0My55FnB+w+PWS9Ipm871kX5qepmChdnZHKq9fsqE2uTjX//Q==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-1.2.0.tgz",
+      "integrity": "sha512-eXtgIgY0fawgcOuUjH8Y6PxwPxbK87Zl9XmA7Q0m58T7pIz+gcbgvtH8Bb+liYHoRYItIhQxVm+ui7Y59rI7Cg==",
       "dev": true,
       "optional": true
     },
     "@tauri-apps/cli-win32-x64-msvc": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-1.1.1.tgz",
-      "integrity": "sha512-OukxlLLi3AoCN4ABnqCDTiiC7xJGWukAjrKCIx7wFISrLjNfsrnH7/UOzuopfGpZChSe2c+AamVmcpBfVsEmJA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-1.2.0.tgz",
+      "integrity": "sha512-egyM66R05AIbkaUDptpHurFTIYp3VM4H5OrRd3O2b0oXf8SoiXiyrHbQsHVHHDYyytKmwkdNqjdy+Vev/Vq25Q==",
       "dev": true,
       "optional": true
     },
@@ -2064,6 +2284,42 @@
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
       "dev": true
     },
+    "framer-motion": {
+      "version": "7.6.5",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.6.5.tgz",
+      "integrity": "sha512-PhS5z9r1OuG6d9xy2B5paYvbWWsOhuPPCawcBwMN3AVzmiXKXZ2Ucizf8SqSE4On5xyCR+A2gmQZhBlYr/Gzjg==",
+      "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": {
+        "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=="
+        }
+      }
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -2095,6 +2351,11 @@
         "function-bind": "^1.1.1"
       }
     },
+    "hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2270,6 +2531,24 @@
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
       "dev": true
     },
+    "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=="
+        }
+      }
+    },
     "postcss": {
       "version": "8.4.18",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
@@ -2359,8 +2638,7 @@
     "react-chartjs-2": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz",
-      "integrity": "sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==",
-      "requires": {}
+      "integrity": "sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA=="
     },
     "react-dom": {
       "version": "18.2.0",
@@ -2428,6 +2706,22 @@
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
+    "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=="
+        }
+      }
+    },
     "styled-jsx": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.0.tgz",
@@ -2505,8 +2799,7 @@
     "use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
-      "requires": {}
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
     },
     "util-deprecate": {
       "version": "1.0.2",
diff --git a/package.json b/package.json
index fb7f995..026f2b8 100644
--- a/package.json
+++ b/package.json
@@ -11,12 +11,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@tauri-apps/api": "^1.1.0",
+    "@tauri-apps/api": "^1.2.0",
     "@types/lodash": "^4.14.187",
     "@types/node": "18.11.9",
     "@types/react": "18.0.24",
     "@types/react-dom": "18.0.8",
     "chart.js": "^3.9.1",
+    "framer-motion": "^7.6.5",
     "lodash": "^4.17.21",
     "next": "13.0.1",
     "react": "18.2.0",
@@ -25,7 +26,7 @@
     "typescript": "4.8.4"
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^1.1.1",
+    "@tauri-apps/cli": "^1.2.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.18",
     "tailwindcss": "^3.2.1"
diff --git a/pages/index.tsx b/pages/index.tsx
index 93249e6..15dd16c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,10 +2,12 @@ import Head from 'next/head';
 import { invoke } from '@tauri-apps/api/tauri';
 import Image from 'next/image';
 import styles from '../styles/Home.module.css';
-import { useEffect, useState, useMemo, useRef, MutableRefObject, RefObject } from 'react';
+import { useEffect, useState, useMemo, useRef } from 'react';
 import { debounce } from 'lodash';
+import { motion } from 'framer-motion';
 
 import Modal from '../components/modal';
+import Transition from '../components/transition';
 
 export async function getStaticProps(context) {
 
@@ -23,11 +25,10 @@ export default function Home(props) {
 
   const [search, setSearch] = useState('');
   const [selectedCard, setSelectedCard] = useState({});
-  const [cards, setCards] = useState<any>([]);
+  const [cardRow, setCardRow] = useState<any>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
-  const [queryParams, setQueryParams] = useState('');
   const [modalOpen, setModalOpen] = useState(false);
   const modalRef = useRef<HTMLDivElement>(null);
 
@@ -42,7 +43,11 @@ export default function Home(props) {
       .then( res => res.json() )
       .then( (res) => {
         if( res.data ) {
-          setCards(res.data);
+          let cardMatrix = [];
+          for(let i = 0; i < res.data.length; i += 4) {
+            cardMatrix.push(res.data.slice(i, i + 4))
+          }
+          setCardRow(cardMatrix);
           setLoading(false);
         } else {
           setLoading(false);
@@ -87,39 +92,43 @@ export default function Home(props) {
         </div>
       </div>
 
-      <main className="container my-4">
-        { cards.length === 0 ?
-          <div className="text-center search-placeholder">
-            <div className="card-container h-48 relative">
-              {props.initialCards.map( (card: any) => 
-              <Image
-                className="card" 
-                key={card.id} 
-                alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
-              ).slice(0, 5)
-              }
+        <main className="container my-4">
+          { cardRow.length === 0 ?
+            <div className="text-center search-placeholder">
+              <div className="card-container h-48 relative">
+                  {props.initialCards.map( (card: any) => 
+                  <Image
+                    className="card" 
+                    key={card.id} 
+                    alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
+                  ).slice(0, 5)
+                  }
+              </div>
+              <h2>Please search for a card!</h2>
             </div>
-            <h2>Please search for a card!</h2>
-          </div>
-          :
-          <section className="flex flex-wrap justify-center items-center">
-            {loading && search !== "" ? 
-              <div className="spinner mx-auto"></div>
-              :
-              cards && cards.map( (card: any) => 
-              <Image onClick={() => {
-                setSelectedCard(card);
-                setModalOpen(true);
-                document.body.classList.toggle('prevent-scroll');
-              }} 
-                className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-1/2 md:w-1/3 lg:w-1/4 p-2" 
-                key={card.id} 
-                alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
-              )
-            }
-          </section>
-        }
-      </main>
+            :
+            <section className="flex flex-wrap justify-center items-center">
+              {loading && search !== "" ? 
+                <div className="spinner mx-auto"></div>
+                :
+                cardRow && cardRow.map( (row: any, i: number) => 
+                  <Transition className="flex">
+                    {row.map( (card: any, i: number) => 
+                      <Image onClick={() => {
+                        setSelectedCard(card);
+                        setModalOpen(true);
+                        document.body.classList.toggle('prevent-scroll');
+                      }} 
+                        className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-1/2 md:w-1/3 lg:w-1/4 p-2" 
+                        key={card.id} 
+                        alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
+                      )}
+                  </Transition>
+                )
+              }
+            </section>
+          }
+        </main>
 
       <footer className={styles.footer}>
         <a
@@ -130,11 +139,16 @@ export default function Home(props) {
           </a>
       </footer>
 
-      <div title="Back to top" aria-label="Scrool back to the top of the page" className="rounded-full">
-        <span className="material-symbols-outlined">
-          arrow_upward
-        </span>
-      </div>
+      { !modalOpen &&
+        <div 
+          title="Back to top" 
+          aria-label="Scrool back to the top of the page" 
+          className="bg-red-600 bottom-4 cursor-pointer fixed flex justify-center items-center right-4 rounded-full p-4" onClick={() => window.scrollTo(0, 0)}>
+          <span className="material-symbols-outlined">
+            arrow_upward
+          </span>
+        </div>
+      }
 
       <Modal ref={modalRef} modalOpen={modalOpen} toggleModal={setModalOpen} card={selectedCard} />