diff --git a/package-lock.json b/package-lock.json
index ff39ecb0e..da5ce26c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "rucio-webui",
-  "version": "0.1.0",
+  "version": "36.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "rucio-webui",
-      "version": "0.1.0",
+      "version": "36.0.1",
       "dependencies": {
         "@builder.io/partytown": "^0.7.6",
         "@next/font": "13.1.6",
@@ -39,6 +39,7 @@
         "flowbite-datepicker": "^1.2.2",
         "inversify": "^6.0.1",
         "iron-session": "^6.3.1",
+        "motion": "^12.0.1",
         "ndjson": "^2.0.0",
         "next": "^13.5.6",
         "react": "18.2.0",
@@ -13601,6 +13602,33 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.0.1.tgz",
+      "integrity": "sha512-u6p0Qc4cY/AEQAtrC7qiYlXla39qnWoI4JXY7OCNBDXwJ5yRBD8HU+RhaOqqziw2m/b0BDh32f44W94+wXonMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.0.0",
+        "motion-utils": "^12.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -16899,6 +16927,47 @@
       "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
       "dev": true
     },
+    "node_modules/motion": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.0.1.tgz",
+      "integrity": "sha512-CiC/81Fyla3xsyInx/YvleVyiJNzeVDIwteb0sg/Ow2U3tvjCx4cMhvJCGBJ71ivvbLX8G9p0YVI8OIbb6C4rQ==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.0.1",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
+      "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
+      "license": "MIT"
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -31901,6 +31970,16 @@
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "dev": true
     },
+    "framer-motion": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.0.1.tgz",
+      "integrity": "sha512-u6p0Qc4cY/AEQAtrC7qiYlXla39qnWoI4JXY7OCNBDXwJ5yRBD8HU+RhaOqqziw2m/b0BDh32f44W94+wXonMQ==",
+      "requires": {
+        "motion-dom": "^12.0.0",
+        "motion-utils": "^12.0.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -34330,6 +34409,28 @@
       "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
       "dev": true
     },
+    "motion": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.0.1.tgz",
+      "integrity": "sha512-CiC/81Fyla3xsyInx/YvleVyiJNzeVDIwteb0sg/Ow2U3tvjCx4cMhvJCGBJ71ivvbLX8G9p0YVI8OIbb6C4rQ==",
+      "requires": {
+        "framer-motion": "^12.0.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "motion-dom": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
+      "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
+      "requires": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA=="
+    },
     "mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
diff --git a/package.json b/package.json
index 36050ee7f..028bb5df6 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "flowbite-datepicker": "^1.2.2",
     "inversify": "^6.0.1",
     "iron-session": "^6.3.1",
+    "motion": "^12.0.1",
     "ndjson": "^2.0.0",
     "next": "^13.5.6",
     "react": "18.2.0",
diff --git a/public/rucio-logo.png b/public/rucio-logo.png
new file mode 100644
index 000000000..a5d8afc2e
Binary files /dev/null and b/public/rucio-logo.png differ
diff --git a/src/component-library/pages/legacy/Login/Login.tsx b/src/component-library/pages/legacy/Login/Login.tsx
index d02a7cece..db588fb38 100644
--- a/src/component-library/pages/legacy/Login/Login.tsx
+++ b/src/component-library/pages/legacy/Login/Login.tsx
@@ -17,6 +17,8 @@ import { H2 } from '../../../atoms/legacy/text/headings/H2/H2';
 import { P } from '../../../atoms/legacy/text/content/P/P';
 import { HiArrowRight } from 'react-icons/hi';
 import Link from 'next/link';
+import Image from 'next/image';
+import { motion } from 'motion/react';
 
 const BackToDashboardButton = (props: { account: string }) => {
     return (
@@ -103,7 +105,7 @@ export const Login = ({
     const isLoggedIn = loginViewModel.isLoggedIn && loginViewModel.accountActive !== undefined;
     const [showUserPassLoginForm, setShowUserPassLoginForm] = useState<boolean>(false);
 
-    const [selectedVOTab, setSelectedVOTab] = useState<number>(1);
+    const [selectedVOTab, setSelectedVOTab] = useState<number>(0);
 
     const [username, setUsername] = useState<string>('');
     const [password, setPassword] = useState<string>('');
@@ -163,8 +165,19 @@ export const Login = ({
         }
     }, [loginViewModel, authViewModel]);
 
+    const logoVariants = {
+        hidden: { opacity: 0, scale: 0.8 },
+        visible: { opacity: 1, scale: 1, transition: { duration: 0.5 } },
+    };
+
+    const formVariants = {
+        hidden: { opacity: 0, scale: 1.5 },
+        visible: { opacity: 1, scale: 1, transition: { duration: 0.5 } },
+    };
+
     const getLoginForm = () => {
         return (
+            <motion.div initial="hidden" animate="visible" variants={formVariants}>
             <div
                 className={twMerge(
                     'border dark:border-2 rounded-xl p-6 flex flex-col justify-center space-y-4',
@@ -187,8 +200,10 @@ export const Login = ({
                         }}
                     />
                 </Collapsible>
-                <div className="text-center text-text-1000 dark:text-text-0">
-                    <H1 className="mt-4 mb-2">Rucio Login</H1>
+                <div className="flex flex-col items-center justify-between w-64 text-center text-text-1000 dark:text-text-0">
+                <motion.div initial="hidden" animate="visible" variants={logoVariants}>
+                    <Image src="/rucio-logo.png" alt="Rucio Logo" width={146} height={176} />
+                </motion.div>
                 </div>
 
                 <div
@@ -283,6 +298,7 @@ export const Login = ({
                     </div>
                 </div>
             </div>
+            </motion.div>
         );
     };
 
diff --git a/src/middleware.ts b/src/middleware.ts
index 679d28431..094d290b4 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -19,7 +19,7 @@ export const config = {
          * - _next/image (image optimization files)
          * - favicon.ico (favicon file)
          */
-        '/((?!api/auth|_next/static|_next/image|favicon.ico|auth/.*).*)',
+        '/((?!api/auth|_next/static|_next/image|.*\\.png$|.*\\.jpg$|favicon.ico|auth/.*).*)',
     ],
 };