diff --git a/balancer/ui/package-lock.json b/balancer/ui/package-lock.json
index 85dd9839..a74f9e72 100644
--- a/balancer/ui/package-lock.json
+++ b/balancer/ui/package-lock.json
@@ -14,6 +14,7 @@
         "react-dom": "^18.3.1",
         "react-hot-toast": "^2.4.1",
         "react-intl": "^6.8.8",
+        "react-magic-motion": "^1.1.2",
         "react-router-dom": "^6.28.0",
         "reactjs-popup": "^2.0.6",
         "tailwindcss": "^3.4.15"
@@ -419,6 +420,23 @@
         "node": ">=6.9.0"
       }
     },
+    "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==",
+      "license": "MIT",
+      "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==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -2475,6 +2493,30 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.18.0.tgz",
+      "integrity": "sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3475,6 +3517,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-magic-motion": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/react-magic-motion/-/react-magic-motion-1.1.2.tgz",
+      "integrity": "sha512-qYPkFViYlaO2hRQ7unCiU9V4c2tiiE2yRkdeY2oUw0zZ7pbRH8bAcPf1zQKC96mRWemp+Xo5T+49+ndAmi7gPg==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^10.16.2"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.28.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
@@ -4881,6 +4932,21 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@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
+    },
     "@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -6169,6 +6235,15 @@
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
       "dev": true
     },
+    "framer-motion": {
+      "version": "10.18.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.18.0.tgz",
+      "integrity": "sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "tslib": "^2.4.0"
+      }
+    },
     "fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -6785,6 +6860,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-magic-motion": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/react-magic-motion/-/react-magic-motion-1.1.2.tgz",
+      "integrity": "sha512-qYPkFViYlaO2hRQ7unCiU9V4c2tiiE2yRkdeY2oUw0zZ7pbRH8bAcPf1zQKC96mRWemp+Xo5T+49+ndAmi7gPg==",
+      "requires": {
+        "framer-motion": "^10.16.2"
+      }
+    },
     "react-router": {
       "version": "6.28.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
diff --git a/balancer/ui/package.json b/balancer/ui/package.json
index 5bdecddb..21ca5de2 100644
--- a/balancer/ui/package.json
+++ b/balancer/ui/package.json
@@ -5,11 +5,12 @@
   "type": "module",
   "dependencies": {
     "promise-retry": "^2.0.1",
+    "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-intl": "^6.8.8",
+    "react-magic-motion": "^1.1.2",
     "react-router-dom": "^6.28.0",
-    "react": "^18.3.1",
     "reactjs-popup": "^2.0.6",
     "tailwindcss": "^3.4.15"
   },
@@ -47,4 +48,4 @@
       "last 1 safari version"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/balancer/ui/src/pages/ScoreOverview.tsx b/balancer/ui/src/pages/ScoreOverview.tsx
index 1b4933a4..c0b73417 100644
--- a/balancer/ui/src/pages/ScoreOverview.tsx
+++ b/balancer/ui/src/pages/ScoreOverview.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
+import { MagicMotion } from "react-magic-motion";
 
 function FirstPlace({ ...props }) {
   return <img src="/balancer/icons/first-place.svg" {...props} />;
@@ -92,30 +93,36 @@ export function ScoreOverviewPage({
             </tr>
           </thead>
           <tbody className="w-full dark:bg-gray-800">
-            {teams.map((team) => {
-              return (
-                <tr className="border-t border-gray-600" key={team.name}>
-                  <td className="text-center p-2 px-3">
-                    <PositionDisplay place={team.position} />
-                  </td>
-                  <td className="p-2 px-4">
-                    <Link to={`/score-overview/teams/${team.name}`}>
-                      {team.name === activeTeam ? (
-                        <strong className="text-greay-800">{team.name}</strong>
-                      ) : (
-                        team.name
-                      )}
-                    </Link>
-                  </td>
-                  <td className="text-right text-s p-2 px-4">
-                    {team.score} points
-                    <p className="text-gray-500 m-1">
-                      {team.challenges.length} solved challenges
-                    </p>
-                  </td>
-                </tr>
-              );
-            })}
+            <MagicMotion>
+              <>
+                {teams.map((team) => {
+                  return (
+                    <tr className="border-t border-gray-600" key={team.name}>
+                      <td className="text-center p-2 px-3">
+                        <PositionDisplay place={team.position} />
+                      </td>
+                      <td className="p-2 px-4">
+                        <Link to={`/score-overview/teams/${team.name}`}>
+                          {team.name === activeTeam ? (
+                            <strong className="text-gray-800">
+                              {team.name}
+                            </strong>
+                          ) : (
+                            team.name
+                          )}
+                        </Link>
+                      </td>
+                      <td className="text-right text-s p-2 px-4">
+                        {team.score} points
+                        <p className="text-gray-500 m-1">
+                          {team.challenges.length} solved challenges
+                        </p>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </>
+            </MagicMotion>
           </tbody>
         </table>
       </div>