using the logo! started moving ui changes over from mockup

package-lock.json

···
         "postcss": "^8.5.6",
         "tailwindcss": "^3.4.0",
         "typescript": "^5.3.3",
-        "vite": "^5.4.0"
+        "vite": "^5.4.0",
+        "vite-plugin-svgr": "^4.5.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
···
       "resolved": "https://registry.npmjs.org/@atcute/identity/-/identity-1.1.0.tgz",
       "integrity": "sha512-6vRvRqJatDB+JUQsb+UswYmtBGQnSZcqC3a2y6H5DB/v5KcIh+6nFFtc17G0+3W9rxdk7k9M4KkgkdKf/YDNoQ==",
       "license": "0BSD",
+      "peer": true,
       "dependencies": {
         "@atcute/lexicons": "^1.1.1",
         "@badrap/valita": "^0.4.5"
···
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
···
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
···
         "text-hex": "1.0.x"
       }
     },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+      "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+      "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+      "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+      "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+      "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+      "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+        "@svgr/babel-plugin-transform-svg-component": "8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^8.1.3",
+        "snake-case": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+      "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.21.3",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+      "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "@svgr/hast-util-to-babel-ast": "8.0.0",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
···
       "integrity": "sha512-ukd93VGzaNPMAUPy0gRDSC57UuQbnH9Kussp7HBjM06YFi9uZTFhOvMSO2OKqXm1rSgzOE+pVx1k1PYHGwlc8Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
···
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
···
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
···
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
···
         "node": "*"
       }
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
···
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "license": "MIT"
     },
+    "node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/crc-32": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
···
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/dot-prop": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-9.0.0.tgz",
···
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
···
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
···
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
       "license": "MIT"
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
···
       "engines": {
         "node": ">= 10"
       }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
···
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
       "license": "MIT"
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
···
         "node": ">=6"
       }
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
···
       },
       "bin": {
         "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
       }
     },
     "node_modules/lru-cache": {
···
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
···
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
       "license": "(MIT AND Zlib)"
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parse-gitignore": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/parse-gitignore/-/parse-gitignore-2.0.0.tgz",
···
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
···
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
···
         "node": ">=8"
       }
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
···
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
···
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
···
       "integrity": "sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
···
         "terser": {
           "optional": true
         }
+      }
+    },
+    "node_modules/vite-plugin-svgr": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.5.0.tgz",
+      "integrity": "sha512-W+uoSpmVkSmNOGPSsDCWVW/DDAyv+9fap9AZXBvWiQqrboJ08j2vh0tFxTD/LjwqwAd3yYSVJgm54S/1GhbdnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.2.0",
+        "@svgr/core": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.6.0"
       }
     },
     "node_modules/webidl-conversions": {

package.json

···
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.3.3",
-    "vite": "^5.4.0"
+    "vite": "^5.4.0",
+    "vite-plugin-svgr": "^4.5.0"
   }
 }

public/favicon/site.webmanifest

···
+{
+  "name": "ATLast - Your favs in the ATmosphere",
+  "short_name": "ATlast",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#0891b2",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

src/assets/at-firefly-logo.svg

···
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="149.09583"
+   height="62.405361"
+   viewBox="0 0 39.448271 16.511417"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1"><linearGradient
+       id="linearGradient5"><stop
+         style="stop-color:#06b6d4;stop-opacity:1;"
+         offset="0.20974289"
+         id="stop3" /><stop
+         style="stop-color:#6d28d9;stop-opacity:1;"
+         offset="0.38791069"
+         id="stop4" /><stop
+         style="stop-color:#ec4899;stop-opacity:1;"
+         offset="0.60860217"
+         id="stop6" /><stop
+         style="stop-color:#f97316;stop-opacity:1;"
+         offset="0.8159675"
+         id="stop5" /></linearGradient><linearGradient
+       id="linearGradient30"><stop
+         style="stop-color:#fef08a;stop-opacity:1;"
+         offset="0"
+         id="stop29" /><stop
+         style="stop-color:#eab308;stop-opacity:1;"
+         offset="1"
+         id="stop30" /></linearGradient><linearGradient
+       id="linearGradient25"><stop
+         style="stop-color:#fef08a;stop-opacity:1;"
+         offset="0"
+         id="stop25" /><stop
+         style="stop-color:#ffce00;stop-opacity:1;"
+         offset="1"
+         id="stop26" /></linearGradient><linearGradient
+       xlink:href="#linearGradient6"
+       id="linearGradient8"
+       x1="15.083038"
+       y1="9.7583179"
+       x2="17.143671"
+       y2="9.3141584"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(2.1832058,0,0,2.1832058,111.88342,90.968121)" /><linearGradient
+       id="linearGradient6"><stop
+         style="stop-color:#ea580c;stop-opacity:1;"
+         offset="0"
+         id="stop7" /><stop
+         style="stop-color:#ff8c36;stop-opacity:1;"
+         offset="1"
+         id="stop8" /></linearGradient><linearGradient
+       xlink:href="#linearGradient175"
+       id="linearGradient176"
+       x1="1.0581446"
+       y1="9.2239799"
+       x2="3.3587396"
+       y2="9.369256"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(2.1832058,0,0,2.1832058,111.88342,90.968121)" /><linearGradient
+       id="linearGradient175"><stop
+         style="stop-color:#00c9db;stop-opacity:1;"
+         offset="0"
+         id="stop175" /><stop
+         style="stop-color:#0891b2;stop-opacity:1;"
+         offset="1"
+         id="stop176" /></linearGradient><linearGradient
+       xlink:href="#linearGradient1"
+       id="linearGradient2"
+       x1="4.1462159"
+       y1="10.224313"
+       x2="5.5784869"
+       y2="10.895846"
+       gradientUnits="userSpaceOnUse" /><linearGradient
+       id="linearGradient1"><stop
+         style="stop-color:#06b6d4;stop-opacity:1;"
+         offset="0"
+         id="stop1" /><stop
+         style="stop-color:#39e8ff;stop-opacity:1;"
+         offset="1"
+         id="stop2" /></linearGradient><filter
+       style="color-interpolation-filters:sRGB"
+       id="filter187"
+       x="0"
+       y="0"
+       width="1"
+       height="1"><feFlood
+         result="flood1"
+         flood-color="rgb(198,0,0)"
+         flood-opacity="0.172549"
+         id="feFlood187" /><feBlend
+         result="blend1"
+         in="flood1"
+         in2="SourceGraphic"
+         mode="hard-light"
+         id="feBlend187" /><feComposite
+         operator="in"
+         in="blend1"
+         in2="SourceGraphic"
+         id="feComposite187" /></filter><linearGradient
+       xlink:href="#linearGradient5"
+       id="linearGradient7"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.90157488,0,0,1,0.94161522,0)"
+       x1="0.84473455"
+       y1="8.6206245"
+       x2="18.150963"
+       y2="8.6206245" /><radialGradient
+       xlink:href="#linearGradient30"
+       id="radialGradient15"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(2.0224824,0.82216334,-1.2014709,2.9555607,125.44482,81.267746)"
+       cx="2.9812629"
+       cy="10.872172"
+       fx="2.9812629"
+       fy="10.872172"
+       r="1.9679179" /><radialGradient
+       xlink:href="#linearGradient25"
+       id="radialGradient22"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.89210545,-0.38362324,0.41746133,0.97079503,-2.8830544,6.222786)"
+       cx="15.283519"
+       cy="11.701982"
+       fx="15.283519"
+       fy="11.701982"
+       r="1.8067596" /></defs><g
+     id="layer1"
+     transform="translate(-112.53832,-102.7461)"><path
+       id="use5"
+       clip-path="none"
+       style="display:inline;vector-effect:none;fill:url(#linearGradient7);fill-rule:evenodd;stroke-width:0.12119;stop-color:#000000"
+       d="m 9.5464118,5.3948093 c -1.7679049,0 -3.2585419,1.1196005 -3.6993808,2.7341191 C 5.5744869,8.7906914 5.1569858,9.2553125 4.8412936,9.5361086 4.7716625,9.3005651 4.7002206,9.1621229 4.7002205,9.1621229 5.2868814,8.9135379 6.0419642,7.6530245 4.9833135,7.0114688 5.1395775,6.476825 5.5741161,6.150355 5.5741161,6.150355 a 0.1322915,0.1322915 0 0 0 0.029351,-0.1855726 0.1322915,0.1322915 0 0 0 -0.087816,-0.052784 0.1322915,0.1322915 0 0 0 -0.097757,0.025564 c 0,0 -0.4809256,0.3494235 -0.6743577,0.95319 -0.02849,-0.011951 -0.056285,-0.024258 -0.086632,-0.035505 -0.04629,-0.017155 -0.090502,-0.031021 -0.1339721,-0.043789 V 6.8112208 C 4.4384266,6.2290341 4.0220757,5.8012228 4.0220757,5.8012228 a 0.15000001,0.15000001 0 0 0 -0.1036745,-0.046866 0.15000001,0.15000001 0 0 0 -0.107225,0.039055 0.15000001,0.15000001 0 0 0 -0.00781,0.2130298 c 0,0 0.3005764,0.3327274 0.4021529,0.7465511 C 2.9819341,6.6795482 3.19481,8.6965345 3.19481,8.6965345 c 0,0 -1.5666732,0.6527946 -1.6135824,1.9818875 -0.03249,0.920542 0.3289793,1.637733 0.9962694,1.86259 0.7638643,0.2574 1.8081292,0.05383 2.1984675,-1.007157 C 4.9377224,11.094173 4.9807228,10.683434 4.9684014,10.33 5.1571925,10.19256 5.4477957,9.9545824 5.74454,9.6092488 5.9827317,11.52521 7.6333364,12.842568 9.6058234,12.842568 c 0.9976536,0 2.4990766,-0.622169 2.4990766,-1.155569 0,-0.207431 -0.17785,-0.385347 -0.375406,-0.385347 -0.335844,0 -0.642006,0.652108 -2.1236706,0.652108 -1.6001972,0 -2.8250118,-1.067007 -2.8250118,-2.8252484 0,-1.5705638 1.2148375,-2.8446579 2.7360127,-2.8446579 1.5211747,0 2.6176627,0.8593501 2.6176627,2.4595473 0,1.0667982 -0.513563,1.52127 -0.869161,1.52127 -0.138289,0 -0.187703,-0.07911 -0.187703,-0.197645 0,-0.079019 0.03941,-0.2666231 0.05917,-0.3555229 l 0.306289,-1.7189137 c 0.02963,-0.1382887 0.03953,-0.2271401 0.03953,-0.2864068 0,-0.2765773 -0.197515,-0.4246394 -0.434581,-0.4246394 -0.1778,0 -0.405201,0.049313 -0.474346,0.3555231 l -0.03929,0.1777615 C 10.247941,7.3999618 9.9120187,7.2024855 9.3094753,7.2024855 c -0.9778982,0 -1.8767925,0.9977126 -1.8767925,2.3608436 0,0.9778989 0.6123067,1.7383229 1.4519164,1.7383229 0.4543769,0 0.7902106,-0.227119 1.027277,-0.503697 h 0.019883 c 0.00988,0.335845 0.2074648,0.503697 0.5926958,0.503697 0.259292,0 0.770004,-0.115173 1.262557,-0.432687 1.45e-4,-9.4e-5 3.28e-4,-1.43e-4 4.73e-4,-2.37e-4 a 0.25,0.25 0 0 0 0.0095,-0.0036 c 0,0 0.717037,-0.3987 1.433927,-0.9823042 -0.04094,0.3418032 -0.02,0.7710522 0.141074,1.2947482 0.373127,1.213185 1.498051,2.045055 2.707845,1.702581 0.95218,-0.269547 1.218765,-1.27536 1.131425,-1.997036 -0.202999,-1.6773421 -1.819985,-2.4697254 -1.819985,-2.4697254 0,0 0.48517,-1.4969048 -0.720987,-1.5629287 0.01314,-0.6264143 0.327829,-1.0166255 0.327829,-1.0166255 a 0.1322915,0.1322915 0 0 0 -0.02154,-0.1853359 0.1322915,0.1322915 0 0 0 -0.09563,-0.029351 0.1322915,0.1322915 0 0 0 -0.08995,0.04876 c 0,0 -0.372292,0.4671488 -0.385584,1.1894163 -0.02876,0.00276 -0.05663,0.00492 -0.08687,0.00899 -0.05471,0.00737 -0.106452,0.01695 -0.155749,0.027931 C 14.08742,6.7190018 13.984099,6.5462677 13.884882,6.3924989 13.714131,6.1278667 13.548768,5.9257269 13.548768,5.9257269 a 0.1322915,0.1322915 0 0 0 -0.185572,-0.019409 0.1322915,0.1322915 0 0 0 -0.01941,0.1874663 c 0,0 0.156273,0.1902354 0.318361,0.441445 0.08882,0.1376604 0.177279,0.2954109 0.242618,0.4419185 -0.962673,0.4198663 -0.489726,1.7135552 -0.319072,1.8957285 -0.218753,0.2391489 -0.479826,0.468665 -0.74087,0.6753045 0.111973,-0.311095 0.178708,-0.6725034 0.178708,-1.091186 0,-1.8866522 -1.590467,-3.062185 -3.4771192,-3.0621854 z m -0.059175,2.8744821 c 0.493888,0 0.7605162,0.3457497 0.7605162,0.8495155 0,0.6321767 -0.3951282,1.1160391 -0.9581605,1.1160391 -0.4543769,0 -0.7901039,-0.3160703 -0.7901039,-0.8791026 0,-0.582788 0.4148382,-1.086452 0.9877482,-1.086452 z"
+       transform="matrix(2.1832058,0,0,2.1832058,111.88342,90.968121)" /><path
+       id="use15"
+       clip-path="none"
+       style="display:inline;fill:url(#radialGradient15);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.265;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="m 115.82132,112.56617 c -0.27625,0.49935 -0.46301,1.0707 -0.48575,1.71514 -0.0709,2.00974 0.71823,3.57551 2.17506,4.06642 1.65648,0.55819 3.9162,0.12254 4.78162,-2.15336 -1.36863,-0.43607 -4.93494,-1.70122 -6.39548,-3.54241 -0.0265,-0.0334 -0.0503,-0.0569 -0.0755,-0.0858 z" /><path
+       id="use22"
+       clip-path="none"
+       style="display:inline;fill:url(#radialGradient22);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.12119px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 17.070151,10.283606 c -0.0309,0.02427 -0.06368,0.05336 -0.100361,0.09279 -0.882008,0.947916 -3.175453,1.419561 -3.307879,1.446235 0.514178,0.841867 1.438112,1.334934 2.417888,1.057575 0.952181,-0.269547 1.218765,-1.275359 1.131425,-1.997036 -0.02594,-0.214294 -0.0753,-0.413961 -0.141073,-0.599561 z"
+       transform="matrix(2.1832058,0,0,2.1832058,111.88342,90.968121)" /><path
+       id="use26"
+       mask="none"
+       style="display:inline;fill:#ffffff;fill-opacity:0.3;fill-rule:nonzero;stroke:none;stroke-width:0.12119px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 16.85144,10.150581 c -0.508591,0.461156 -1.35481,0.813378 -2.071833,1.043136 -0.666634,0.213612 -1.199253,0.320379 -1.273681,0.33493 0.028,0.0612 0.05779,0.121292 0.08971,0.179655 0.173364,-0.03571 0.656809,-0.141604 1.243147,-0.329486 0.729056,-0.233619 1.59345,-0.584877 2.144263,-1.084321 z"
+       transform="matrix(2.1832058,0,0,2.1832058,111.88342,90.968121)" /><path
+       id="use24"
+       mask="none"
+       style="display:inline;fill:#f7c800;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.121381;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="m 16.989436,10.244551 -0.05018,0.04639 c -0.51324,0.478709 -1.339021,0.831881 -2.035382,1.060178 -0.696356,0.228298 -1.261373,0.333747 -1.261373,0.333747 l -0.05373,0.01254 c 0.02313,0.04283 0.04895,0.08542 0.07408,0.126634 l 0.0047,-0.0017 c 0,0 0.573109,-0.109383 1.278415,-0.340611 0.705306,-0.231233 1.545195,-0.584212 2.087219,-1.089766 l 0.04994,-0.04734 z"
+       transform="matrix(2.1832058,0,0,2.1832058,111.88342,90.968121)" /><path
+       id="use27"
+       mask="none"
+       style="display:inline;fill:#ffffff;fill-opacity:0.3;fill-rule:nonzero;stroke:none;stroke-width:0.121381;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="m 2.7273279,10.277689 -0.1162196,0.155512 c 0,0 0.5251165,0.391878 1.2900138,0.686192 l 0.069826,-0.181548 C 3.2321275,10.653561 2.7273279,10.277689 2.7273279,10.277689 Z"
+       transform="matrix(2.1832058,0,0,2.1832058,111.88342,90.968121)" /><path
+       id="use28"
+       mask="none"
+       style="display:inline;fill:#f7c800;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.121381;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="m 2.5081439,10.365268 -0.076927,0.113616 c 0,0 0.3023891,0.20541 0.6710439,0.40807 0.3686547,0.202656 0.794261,0.408616 1.0940263,0.393395 l -0.0071,-0.136812 C 3.9659775,11.15485 3.5305678,10.965962 3.1685363,10.766947 2.8065048,10.567933 2.5081439,10.365268 2.5081439,10.365268 Z"
+       transform="matrix(2.1832058,0,0,2.1832058,111.88342,90.968121)" /><path
+       style="fill:url(#linearGradient8);fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 144.63508,109.85058 c -0.33259,1.91237 3.00927,7.85057 6.59868,4.76675 3.48964,-2.99811 -6.2661,-6.67912 -6.59868,-4.76675 z"
+       id="path119" /><path
+       style="fill:url(#linearGradient176);fill-opacity:1;stroke:none;stroke-width:0.265;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="m 120.19851,109.84357 c -2.04144,-0.5332 -9.22765,0.28065 -7.35052,3.89918 2.20679,4.254 9.39196,-3.36597 7.35052,-3.89918 z"
+       id="path117" /><path
+       style="display:inline;fill:url(#linearGradient2);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.12119px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter187)"
+       d="M 4.6747412,8.8087186 C 3.871122,8.4952424 2.6835491,12.528444 5.3401882,12.520739 6.3667683,12.517762 5.4783605,9.1221948 4.6747412,8.8087186 Z"
+       id="path118"
+       transform="matrix(2.1832058,0,0,2.1832058,111.88342,90.968121)" /></g></svg>

src/components/AppHeader.tsx

···
 import { useState, useEffect, useRef } from "react";
 import { Heart, Home, LogOut, ChevronDown } from "lucide-react";
 import ThemeControls from "./ThemeControls";
+import FireflyLogo from "../assets/at-firefly-logo.svg?react";
 
 interface atprotoSession {
   did: string;
···
 interface AppHeaderProps {
   session: atprotoSession | null;
   onLogout: () => void;
-  onNavigate: (step: 'home' | 'login') => void;
+  onNavigate: (step: "home" | "login") => void;
   currentStep: string;
   isDark?: boolean;
   reducedMotion?: boolean;
···
   onToggleMotion?: () => void;
 }
 
-export default function AppHeader({ 
-  session, 
-  onLogout, 
-  onNavigate, 
+export default function AppHeader({
+  session,
+  onLogout,
+  onNavigate,
   currentStep,
   isDark = false,
   reducedMotion = false,
   onToggleTheme,
-  onToggleMotion
+  onToggleMotion,
 }: AppHeaderProps) {
   const [showMenu, setShowMenu] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
···
         setShowMenu(false);
       }
     }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
   return (
-    <div className="bg-white/95 dark:bg-slate-800/95 border-b-2 border-slate-200 dark:border-slate-700 backdrop-blur-sm relative z-[100]">
-      <div className="max-w-6xl mx-auto px-4 py-3">
+    <div className="bg-white/50 dark:bg-slate-900/50 backdrop-blur-xl relative z-[100]">
+      <div className="max-w-6xl mx-auto px-4 py-1">
         <div className="flex items-center justify-between">
-          <button 
-            onClick={() => onNavigate(session ? 'home' : 'login')} 
-            className="flex items-center space-x-3 hover:opacity-80 transition-opacity focus:outline-none focus:ring-2 focus:ring-firefly-orange rounded-lg px-2 py-1"
+          <button
+            onClick={() => onNavigate(session ? "home" : "login")}
+            className="flex items-center space-x-3 hover:opacity-80 transition-opacity focus:outline-none focus:ring-2 focus:ring-orange-500 rounded-lg px-2 py-1"
           >
-            <div className="w-10 h-10 bg-gradient-to-br from-firefly-amber via-firefly-orange to-firefly-pink rounded-xl flex items-center justify-center shadow-md">
-              <Heart className="w-5 h-5 text-slate-900" />
-            </div>
-            <h1 className="text-xl font-bold text-slate-900 dark:text-slate-100">ATlast</h1>
+            <FireflyLogo className="w-12 h-12" />
+            <h1 className="font-display text-2xl font-bold text-purple-950 dark:text-cyan-50">
+              ATlast
+            </h1>
           </button>
 
           <div className="flex items-center space-x-4">
···
             )}
             {session && (
               <div className="relative z-[9999]" ref={menuRef}>
-                <button 
-                  onClick={() => setShowMenu(!showMenu)} 
-                  className="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors focus:outline-none focus:ring-2 focus:ring-firefly-orange"
+                <button
+                  onClick={() => setShowMenu(!showMenu)}
+                  className="flex items-center space-x-3 px-3 py-1 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors focus:outline-none focus:ring-2 focus:ring-firefly-orange"
                 >
                   {session?.avatar ? (
-                    <img src={session.avatar} alt="" className="w-8 h-8 rounded-full object-cover" />
+                    <img
+                      src={session.avatar}
+                      alt=""
+                      className="w-8 h-8 rounded-full object-cover"
+                    />
                   ) : (
-                    <div className="w-8 h-8 bg-gradient-to-br from-firefly-cyan to-blue-500 rounded-full flex items-center justify-center shadow-sm">
-                      <span className="text-white font-bold text-sm">{session?.handle?.charAt(0).toUpperCase()}</span>
+                    <div className="w-8 h-8 bg-gradient-to-br from-cyan-500 to-purple-500 rounded-full flex items-center justify-center shadow-sm">
+                      <span className="text-white font-bold text-sm">
+                        {session?.handle?.charAt(0).toUpperCase()}
+                      </span>
                     </div>
                   )}
-                  <span className="text-sm font-medium text-slate-900 dark:text-slate-100 hidden sm:inline">@{session?.handle}</span>
-                  <ChevronDown className={`w-4 h-4 text-slate-600 dark:text-slate-400 transition-transform ${showMenu ? 'rotate-180' : ''}`} />
+                  <span className="text-sm font-medium text-purple-950 dark:text-cyan-50 hidden sm:inline">
+                    @{session?.handle}
+                  </span>
+                  <ChevronDown
+                    className={`w-4 h-4 text-slate-600 dark:text-slate-400 transition-transform ${showMenu ? "rotate-180" : ""}`}
+                  />
                 </button>
 
                 {showMenu && (
-                  <div className="absolute right-0 mt-2 w-64 bg-white dark:bg-slate-800 rounded-lg shadow-lg border-2 border-slate-200 dark:border-slate-700 py-2 z-[9999]">
-                    <div className="px-4 py-3 border-b-2 border-slate-200 dark:border-slate-700">
-                      <div className="font-semibold text-slate-900 dark:text-slate-100">{session?.displayName || session.handle}</div>
-                      <div className="text-sm text-slate-600 dark:text-slate-400">@{session?.handle}</div>
+                  <div className="absolute right-0 mt-2 w-64 bg-white dark:bg-slate-800 rounded-lg shadow-lg border-2 border-cyan-500/30 dark:border-purple-500/30 py-2 z-[9999]">
+                    <div className="px-4 py-3">
+                      <div className="font-semibold text-purple-950 dark:text-cyan-50">
+                        {session?.displayName || session.handle}
+                      </div>
+                      <div className="text-sm text-slate-600 dark:text-slate-400">
+                        @{session?.handle}
+                      </div>
                     </div>
-                    <button 
-                      onClick={() => { setShowMenu(false); onNavigate('home'); }} 
+                    <button
+                      onClick={() => {
+                        setShowMenu(false);
+                        onNavigate("home");
+                      }}
                       className="w-full flex items-center space-x-3 px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors text-left"
                     >
                       <Home className="w-4 h-4 text-slate-600 dark:text-slate-400" />
-                      <span className="text-slate-900 dark:text-slate-100">Dashboard</span>
+                      <span className="text-slate-900 dark:text-slate-100">
+                        Dashboard
+                      </span>
                     </button>
-                    <button 
-                      onClick={() => { setShowMenu(false); onNavigate('login'); }} 
+                    <button
+                      onClick={() => {
+                        setShowMenu(false);
+                        onNavigate("login");
+                      }}
                       className="w-full flex items-center space-x-3 px-4 py-2 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors text-left"
                     >
                       <Heart className="w-4 h-4 text-slate-600 dark:text-slate-400" />
-                      <span className="text-slate-900 dark:text-slate-100">About</span>
+                      <span className="text-slate-900 dark:text-slate-100">
+                        About
+                      </span>
                     </button>
-                    <div className="border-t-2 border-slate-200 dark:border-slate-700 my-2"></div>
-                    <button 
-                      onClick={() => { setShowMenu(false); onLogout(); }} 
-                      className="w-full flex items-center space-x-3 px-4 py-2 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-left text-red-600 dark:text-red-400"
+                    <div className="my-2"></div>
+                    <button
+                      onClick={() => {
+                        setShowMenu(false);
+                        onLogout();
+                      }}
+                      className="w-full flex items-center space-x-3 px-4 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-left text-red-600 dark:text-red-400"
                     >
                       <LogOut className="w-4 h-4" />
                       <span>Log out</span>
···
       </div>
     </div>
   );
-}
+}

src/index.css

···
 @tailwind utilities;
 
 @layer base {
-  body {
-    font-family: system-ui, sans-serif;
-    @apply bg-gradient-to-br from-amber-50 via-orange-50 to-pink-50 
-           dark:from-indigo-950 dark:via-purple-900 dark:to-slate-900 
-           text-slate-900 dark:text-slate-100 
+    body {
+        font-family: system-ui, sans-serif;
+        @apply bg-gradient-to-br from-amber-50 via-orange-50 to-pink-50
+           dark:from-indigo-950 dark:via-purple-900 dark:to-slate-900
+           text-slate-900 dark:text-slate-100
            transition-colors duration-300;
-  }
-  
-  button {
-    cursor: pointer;
-  }
+    }
+
+    button {
+        cursor: pointer;
+    }
 }
 
 /* Hide scrollbar but allow scrolling */
 .scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 
 .scrollbar-hide::-webkit-scrollbar {
-  display: none;
+    display: none;
 }
 
 /* Firefly animation keyframes */
 @keyframes float {
-  0%, 100% { 
-    transform: translate(0, 0) scale(1); 
-    opacity: 0.3; 
-  }
-  25% { 
-    transform: translate(10px, -20px) scale(1.2); 
-    opacity: 0.8; 
-  }
-  50% { 
-    transform: translate(-5px, -40px) scale(1); 
-    opacity: 0.5; 
-  }
-  75% { 
-    transform: translate(15px, -25px) scale(1.1); 
-    opacity: 0.9; 
-  }
+    0%,
+    100% {
+        transform: translate(0, 0) scale(1);
+        opacity: 0.3;
+    }
+    25% {
+        transform: translate(10px, -20px) scale(1.2);
+        opacity: 0.8;
+    }
+    50% {
+        transform: translate(-5px, -40px) scale(1);
+        opacity: 0.5;
+    }
+    75% {
+        transform: translate(15px, -25px) scale(1.1);
+        opacity: 0.9;
+    }
 }
 
 @keyframes glow-pulse {
-  0%, 100% { 
-    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); 
-  }
-  50% { 
-    box-shadow: 0 0 40px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3); 
-  }
-}
+    0%,
+    100% {
+        box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
+    }
+    50% {
+        box-shadow:
+            0 0 40px rgba(251, 191, 36, 0.6),
+            0 0 60px rgba(251, 191, 36, 0.3);
+    }
+}
+
+@keyframes svg-glow-left {
+    0%,
+    100% {
+        opacity: 0.5;
+        filter: blur(10px);
+        transform: scale(1);
+    }
+    50% {
+        opacity: 1;
+        filter: blur(15px);
+        transform: scale(1.2);
+    }
+}
+
+@keyframes svg-glow-right {
+    0%,
+    100% {
+        opacity: 0.5;
+        filter: blur(10px);
+        transform: scale(1);
+    }
+    50% {
+        opacity: 1;
+        filter: blur(15px);
+        transform: scale(1.2);
+    }
+}
+
+.logo-glow-container {
+    position: relative;
+    display: inline-block;
+}
+
+.logo-glow-container::before,
+.logo-glow-container::after {
+    content: "";
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: -1; /* Places glow behind the SVG */
+}
+
+/* Left firefly glow - cyan tint */
+.logo-glow-container::before {
+    bottom: 0;
+    left: 6%;
+    background: radial-gradient(
+        circle,
+        rgba(253, 224, 71, 1) 0%,
+        rgba(245, 158, 11, 0.8) 30%,
+        transparent 80%
+    );
+    animation: svg-glow-left 3s ease-in-out infinite;
+}
+
+/* Right firefly glow - orange/amber tint */
+.logo-glow-container::after {
+    bottom: 0;
+    right: 4%;
+    background: radial-gradient(
+        circle,
+        rgba(253, 224, 71, 1) 0%,
+        rgba(245, 158, 11, 0.8) 30%,
+        transparent 80%
+    );
+    animation: svg-glow-right 3s ease-in-out infinite 0.5s; /* offset timing */
+}

src/pages/Home.tsx

···
-import { Upload, History, Settings, BookOpen, Grid3x3, ChevronRight, Sparkles } from "lucide-react";
+import {
+  Upload,
+  History,
+  Settings,
+  BookOpen,
+  Grid3x3,
+  ChevronRight,
+  Sparkles,
+} from "lucide-react";
 import { useState, useEffect, useRef } from "react";
 import AppHeader from "../components/AppHeader";
 import PlatformSelector from "../components/PlatformSelector";
···
 interface HomePageProps {
   session: atprotoSession | null;
   onLogout: () => void;
-  onNavigate: (step: 'home' | 'login') => void;
-  onFileUpload: (e: React.ChangeEvent<HTMLInputElement>, platform: string) => void;
+  onNavigate: (step: "home" | "login") => void;
+  onFileUpload: (
+    e: React.ChangeEvent<HTMLInputElement>,
+    platform: string,
+  ) => void;
   onLoadUpload: (uploadId: string) => void;
   currentStep: string;
   userSettings: UserSettings;
···
   onToggleMotion?: () => void;
 }
 
-type TabId = 'upload' | 'history' | 'settings' | 'guides' | 'apps';
+type TabId = "upload" | "history" | "settings" | "guides" | "apps";
 
-export default function HomePage({ 
-  session, 
-  onLogout, 
-  onNavigate, 
-  onFileUpload, 
+export default function HomePage({
+  session,
+  onLogout,
+  onNavigate,
+  onFileUpload,
   onLoadUpload,
   currentStep,
   userSettings,
   onSettingsUpdate,
-  // New props
   reducedMotion = false,
   isDark = false,
   onToggleTheme,
-  onToggleMotion
+  onToggleMotion,
 }: HomePageProps) {
-  const [activeTab, setActiveTab] = useState<TabId>('upload');
+  const [activeTab, setActiveTab] = useState<TabId>("upload");
   const [uploads, setUploads] = useState<UploadType[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  const [selectedPlatform, setSelectedPlatform] = useState<string>('');
+  const [selectedPlatform, setSelectedPlatform] = useState<string>("");
   const [showWizard, setShowWizard] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
···
     if (session) {
       loadUploads();
     }
-    
+
     // Show wizard on first visit
     if (!userSettings.wizardCompleted) {
       setShowWizard(true);
···
       const data = await apiClient.getUploads();
       setUploads(data.uploads);
     } catch (error) {
-      console.error('Failed to load uploads:', error);
+      console.error("Failed to load uploads:", error);
     } finally {
       setIsLoading(false);
     }
···
 
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', { 
-      month: 'short', 
-      day: 'numeric', 
-      year: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit'
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
     });
   };
 
   const getPlatformColor = (platform: string) => {
     const colors: Record<string, string> = {
-      tiktok: 'from-black via-gray-800 to-cyan-400',
-      twitter: 'from-blue-400 to-blue-600',
-      instagram: 'from-pink-500 via-purple-500 to-orange-500',
+      tiktok: "from-black via-gray-800 to-cyan-400",
+      twitter: "from-blue-400 to-blue-600",
+      instagram: "from-pink-500 via-purple-500 to-orange-500",
     };
-    return colors[platform] || 'from-gray-400 to-gray-600';
+    return colors[platform] || "from-gray-400 to-gray-600";
   };
 
   const tabs = [
-    { id: 'upload' as TabId, icon: Upload, label: 'Upload' },
-    { id: 'history' as TabId, icon: History, label: 'History' },
-    { id: 'settings' as TabId, icon: Settings, label: 'Settings' },
-    { id: 'guides' as TabId, icon: BookOpen, label: 'Guides' },
-    { id: 'apps' as TabId, icon: Grid3x3, label: 'Apps' },
+    { id: "upload" as TabId, icon: Upload, label: "Upload" },
+    { id: "history" as TabId, icon: History, label: "History" },
+    { id: "settings" as TabId, icon: Settings, label: "Settings" },
+    { id: "guides" as TabId, icon: BookOpen, label: "Guides" },
+    { id: "apps" as TabId, icon: Grid3x3, label: "Apps" },
   ];
 
   return (
···
       />
 
       {/* Header */}
-      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
-        <AppHeader 
-          session={session} 
-          onLogout={onLogout} 
-          onNavigate={onNavigate} 
+      <div className="bg-white dark:bg-slate-900 border-b-2 border-cyan-500/50 dark:border-purple-500/50 overflow-x-auto">
+        <AppHeader
+          session={session}
+          onLogout={onLogout}
+          onNavigate={onNavigate}
           currentStep={currentStep}
           isDark={isDark}
           reducedMotion={reducedMotion}
···
         <div className="max-w-6xl mx-auto">
           <div className="overflow-x-auto scrollbar-hide px-4">
             <div className="flex space-x-1 border-b border-gray-200 dark:border-gray-700 min-w-max">
-              {tabs.map(tab => {
+              {tabs.map((tab) => {
                 const Icon = tab.icon;
                 return (
                   <button
···
                     onClick={() => setActiveTab(tab.id)}
                     className={`flex items-center space-x-2 px-4 py-3 border-b-2 transition-all whitespace-nowrap ${
                       activeTab === tab.id
-                        ? 'border-blue-500 text-blue-600 dark:text-blue-400'
-                        : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                        ? "border-orange-500 dark:border-amber-500 text-orange-650 dark:text-amber-400"
+                        : "border-transparent text-purple-750 dark:text-cyan-250 hover:text-purple-900 dark:hover:text-cyan-100"
                     }`}
                   >
                     <Icon className="w-4 h-4" />
···
 
       {/* Tab Content */}
       <div className="max-w-6xl mx-auto px-4 py-8">
-        {activeTab === 'upload' && (
+        {activeTab === "upload" && (
           <div className="space-y-6">
             {/* Setup Assistant Banner - Only show if wizard not completed */}
             {!userSettings.wizardCompleted && (
               <div className="bg-firefly-banner dark:bg-firefly-banner-dark rounded-2xl p-6 text-white">
                 <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
                   <div className="flex-1">
-                    <h2 className="text-2xl font-bold mb-2">Need help getting started?</h2>
-                    <p className="text-white/90">Run the setup assistant to configure your preferences in minutes.</p>
+                    <h2 className="text-2xl font-bold mb-2">
+                      Need help getting started?
+                    </h2>
+                    <p className="text-white/90">
+                      Run the setup assistant to configure your preferences in
+                      minutes.
+                    </p>
                   </div>
                   <button
                     onClick={() => setShowWizard(true)}
···
                   </button>
                 )}
               </div>
-              
+
               <PlatformSelector onPlatformSelect={handlePlatformSelect} />
-              
+
               <input
                 id="file-upload"
                 ref={fileInputRef}
                 type="file"
                 accept=".txt,.json,.html,.zip"
-                onChange={(e) => onFileUpload(e, selectedPlatform || 'tiktok')}
+                onChange={(e) => onFileUpload(e, selectedPlatform || "tiktok")}
                 className="sr-only"
                 aria-label="Upload following data file"
               />
···
         )}
 
         {/* History Tab */}
-        {activeTab === 'history' && (
+        {activeTab === "history" && (
           <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
             <div className="flex items-center space-x-3 mb-6">
               <Sparkles className="w-6 h-6 text-firefly-amber" />
···
               </h2>
             </div>
 
-          {isLoading ? (
-            <div className="space-y-3">
-              {[...Array(3)].map((_, i) => (
-                <div key={i} className="animate-pulse flex items-center space-x-4 p-4 bg-slate-50 dark:bg-slate-700 rounded-xl">
-                  <div className="w-12 h-12 bg-slate-200 dark:bg-slate-600 rounded-xl" />
-                  <div className="flex-1 space-y-2">
-                    <div className="h-4 bg-slate-200 dark:bg-slate-600 rounded w-3/4" />
-                    <div className="h-3 bg-slate-200 dark:bg-slate-600 rounded w-1/2" />
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : uploads.length === 0 ? (
-            <div className="text-center py-12">
-              <Upload className="w-16 h-16 text-slate-300 dark:text-slate-600 mx-auto mb-4" />
-              <p className="text-slate-600 dark:text-slate-400 font-medium">No previous uploads yet</p>
-              <p className="text-sm text-slate-500 dark:text-slate-500 mt-2">
-                Upload your first file to get started
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {uploads.map((upload) => {
-                const destApp = ATPROTO_APPS[userSettings.platformDestinations[upload.sourcePlatform as keyof typeof userSettings.platformDestinations]];
-                return (
-                  <button
-                    key={upload.uploadId}
-                    onClick={() => onLoadUpload(upload.uploadId)}
-                    className="w-full flex items-start space-x-4 p-4 bg-slate-50 dark:bg-slate-900/50 hover:bg-slate-100 dark:hover:bg-slate-900/70 rounded-xl transition-all text-left border-2 border-slate-200 dark:border-slate-700 hover:border-firefly-orange dark:hover:border-firefly-orange shadow-md hover:shadow-lg"
+            {isLoading ? (
+              <div className="space-y-3">
+                {[...Array(3)].map((_, i) => (
+                  <div
+                    key={i}
+                    className="animate-pulse flex items-center space-x-4 p-4 bg-slate-50 dark:bg-slate-700 rounded-xl"
                   >
-                    <div className={`w-12 h-12 bg-gradient-to-r ${getPlatformColor(upload.sourcePlatform)} rounded-xl flex items-center justify-center flex-shrink-0 shadow-md`}>
-                      <Sparkles className="w-6 h-6 text-white" />
+                    <div className="w-12 h-12 bg-slate-200 dark:bg-slate-600 rounded-xl" />
+                    <div className="flex-1 space-y-2">
+                      <div className="h-4 bg-slate-200 dark:bg-slate-600 rounded w-3/4" />
+                      <div className="h-3 bg-slate-200 dark:bg-slate-600 rounded w-1/2" />
                     </div>
-                    <div className="flex-1 min-w-0">
-                      <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2 mb-1">
-                        <div className="font-semibold text-slate-900 dark:text-slate-100 capitalize">
-                          {upload.sourcePlatform}
-                        </div>
-                        <div className="flex items-center gap-2 flex-shrink-0">
-                          <span className="text-xs px-2 py-0.5 bg-firefly-amber/20 dark:bg-firefly-amber/30 text-amber-900 dark:text-firefly-glow rounded-full font-medium border border-firefly-amber/20 dark:border-firefly-amber/50 whitespace-nowrap">
-                            {upload.matchedUsers} {upload.matchedUsers === 1 ? 'firefly' : 'fireflies'}
-                          </span>
-                          <div className="text-sm text-slate-600 dark:text-slate-400 font-medium whitespace-nowrap">
-                            {Math.round((upload.matchedUsers / upload.totalUsers) * 100)}%
+                  </div>
+                ))}
+              </div>
+            ) : uploads.length === 0 ? (
+              <div className="text-center py-12">
+                <Upload className="w-16 h-16 text-slate-300 dark:text-slate-600 mx-auto mb-4" />
+                <p className="text-slate-600 dark:text-slate-400 font-medium">
+                  No previous uploads yet
+                </p>
+                <p className="text-sm text-slate-500 dark:text-slate-500 mt-2">
+                  Upload your first file to get started
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {uploads.map((upload) => {
+                  const destApp =
+                    ATPROTO_APPS[
+                      userSettings.platformDestinations[
+                        upload.sourcePlatform as keyof typeof userSettings.platformDestinations
+                      ]
+                    ];
+                  return (
+                    <button
+                      key={upload.uploadId}
+                      onClick={() => onLoadUpload(upload.uploadId)}
+                      className="w-full flex items-start space-x-4 p-4 bg-slate-50 dark:bg-slate-900/50 hover:bg-slate-100 dark:hover:bg-slate-900/70 rounded-xl transition-all text-left border-2 border-slate-200 dark:border-slate-700 hover:border-firefly-orange dark:hover:border-firefly-orange shadow-md hover:shadow-lg"
+                    >
+                      <div
+                        className={`w-12 h-12 bg-gradient-to-r ${getPlatformColor(upload.sourcePlatform)} rounded-xl flex items-center justify-center flex-shrink-0 shadow-md`}
+                      >
+                        <Sparkles className="w-6 h-6 text-white" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2 mb-1">
+                          <div className="font-semibold text-slate-900 dark:text-slate-100 capitalize">
+                            {upload.sourcePlatform}
                           </div>
+                          <div className="flex items-center gap-2 flex-shrink-0">
+                            <span className="text-xs px-2 py-0.5 bg-firefly-amber/20 dark:bg-firefly-amber/30 text-amber-900 dark:text-firefly-glow rounded-full font-medium border border-firefly-amber/20 dark:border-firefly-amber/50 whitespace-nowrap">
+                              {upload.matchedUsers}{" "}
+                              {upload.matchedUsers === 1
+                                ? "firefly"
+                                : "fireflies"}
+                            </span>
+                            <div className="text-sm text-slate-600 dark:text-slate-400 font-medium whitespace-nowrap">
+                              {Math.round(
+                                (upload.matchedUsers / upload.totalUsers) * 100,
+                              )}
+                              %
+                            </div>
+                          </div>
+                        </div>
+                        <div className="text-sm text-slate-700 dark:text-slate-300">
+                          {upload.totalUsers} users •{" "}
+                          {formatDate(upload.createdAt)}
                         </div>
-                      </div>
-                      <div className="text-sm text-slate-700 dark:text-slate-300">
-                        {upload.totalUsers} users • {formatDate(upload.createdAt)}
+                        {destApp && (
+                          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                            Sent to {destApp.icon} {destApp.name}
+                          </div>
+                        )}
                       </div>
-                      {destApp && (
-                        <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                          Sent to {destApp.icon} {destApp.name}
-                        </div>
-                      )}
-                    </div>
-                  </button>
-                );
-              })}
-            </div>
-          )}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
           </div>
         )}
 
         {/* Settings Tab */}
-        {activeTab === 'settings' && (
+        {activeTab === "settings" && (
           <SettingsPage
             userSettings={userSettings}
             onSettingsUpdate={onSettingsUpdate}
···
         )}
 
         {/* Guides Tab - Placeholder */}
-        {activeTab === 'guides' && (
+        {activeTab === "guides" && (
           <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
             <div className="flex items-center space-x-3 mb-6">
               <BookOpen className="w-6 h-6 text-gray-600 dark:text-gray-400" />
-              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">Platform Guides</h2>
+              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+                Platform Guides
+              </h2>
             </div>
-            <p className="text-gray-600 dark:text-gray-400">Export guides coming soon...</p>
+            <p className="text-gray-600 dark:text-gray-400">
+              Export guides coming soon...
+            </p>
           </div>
         )}
 
         {/* Apps Tab - Placeholder */}
-        {activeTab === 'apps' && (
+        {activeTab === "apps" && (
           <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
             <div className="flex items-center space-x-3 mb-6">
               <Grid3x3 className="w-6 h-6 text-gray-600 dark:text-gray-400" />
-              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">ATmosphere Apps</h2>
+              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+                ATmosphere Apps
+              </h2>
             </div>
-            <p className="text-gray-600 dark:text-gray-400">Apps directory coming soon...</p>
+            <p className="text-gray-600 dark:text-gray-400">
+              Apps directory coming soon...
+            </p>
           </div>
         )}
       </div>
     </div>
   );
-}
+}

src/pages/Login.tsx

···
 import { useState } from "react";
 import { Heart, Upload, Search, ArrowRight } from "lucide-react";
+import FireflyLogo from "../assets/at-firefly-logo.svg?react";
 
 interface LoginPageProps {
   onSubmit: (handle: string) => void;
   session?: { handle: string } | null;
-  onNavigate?: (step: 'home') => void;
+  onNavigate?: (step: "home") => void;
   reducedMotion?: boolean;
 }
 
-export default function LoginPage({ onSubmit, session, onNavigate, reducedMotion = false }: LoginPageProps) {
+export default function LoginPage({
+  onSubmit,
+  session,
+  onNavigate,
+  reducedMotion = false,
+}: LoginPageProps) {
   const [handle, setHandle] = useState("");
-  
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     onSubmit(handle);
   };
-  
+
   return (
     <div className="min-h-screen">
       <div className="max-w-6xl mx-auto px-4 py-8 md:py-12">
-        
         {/* Hero Section - Side by side on desktop */}
         <div className="grid md:grid-cols-2 gap-8 md:gap-12 items-start mb-12 md:mb-16">
           {/* Left: Welcome */}
           <div className="text-center md:text-left">
-            <div className="inline-flex items-center justify-center mb-6 relative">
-              <div 
-                className={`w-20 h-20 md:w-24 md:h-24 bg-gradient-to-br from-firefly-amber via-firefly-orange to-firefly-pink rounded-3xl flex items-center justify-center relative shadow-xl ${
-                  reducedMotion ? '' : 'animate-glow-pulse'
-                }`}
-              >
-                <Heart className="w-10 h-10 md:w-12 md:h-12 text-slate-900" aria-hidden="true" />
-                {/* Firefly mascot hint */}
-                <div 
-                  className={`absolute -top-2 -right-2 w-8 h-8 bg-firefly-glow rounded-full flex items-center justify-center shadow-lg ${
-                    reducedMotion ? '' : 'animate-bounce'
-                  }`}
-                  aria-hidden="true"
-                >
-                  <div className="w-4 h-4 bg-firefly-amber rounded-full" />
-                </div>
+            <div className="justify-center md:justify-start mb-4">
+              <div className="logo-glow-container">
+                <img
+                  src="src/assets/at-firefly-logo.svg"
+                  className="w-50 h-15"
+                  alt="ATlast logo"
+                />
               </div>
             </div>
-            
+
             <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white mb-3 md:mb-4">
               ATlast
             </h1>
···
             <p className="text-slate-700 dark:text-slate-300 mb-6">
               Reconnect with your internet, one firefly at a time ✨
             </p>
-            
+
             {/* Decorative firefly trail - only show if motion enabled */}
             {!reducedMotion && (
-              <div className="mt-8 flex justify-center md:justify-start space-x-2" aria-hidden="true">
+              <div
+                className="mt-8 flex justify-center md:justify-start space-x-2"
+                aria-hidden="true"
+              >
                 {[...Array(5)].map((_, i) => (
                   <div
                     key={i}
···
                     style={{
                       opacity: 1 - i * 0.15,
                       animation: `float ${2 + i * 0.3}s ease-in-out infinite`,
-                      animationDelay: `${i * 0.2}s`
+                      animationDelay: `${i * 0.2}s`,
                     }}
                   />
                 ))}
               </div>
             )}
-            
+
             {/* Privacy Notice - visible on mobile */}
             <div className="md:hidden mt-6">
               <p className="text-sm text-slate-600 dark:text-slate-400">
-                Your data is processed and stored by our servers. This helps you find matches and reconnect with your community.
+                Your data is processed and stored by our servers. This helps you
+                find matches and reconnect with your community.
               </p>
             </div>
           </div>
···
                 </div>
 
                 <button
-                  onClick={() => onNavigate?.('home')}
+                  onClick={() => onNavigate?.("home")}
                   className="w-full bg-gradient-to-r from-firefly-amber via-firefly-orange to-firefly-pink hover:from-amber-600 hover:via-orange-600 hover:to-pink-600 text-white py-4 rounded-xl font-bold text-lg transition-all shadow-lg hover:shadow-xl focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800 focus:outline-none flex items-center justify-center space-x-2"
                 >
                   <span>Go to Dashboard</span>
···
                   Connect your ATmosphere account to begin
                 </p>
 
-                <form onSubmit={handleSubmit} className="space-y-4" method="post">
+                <form
+                  onSubmit={handleSubmit}
+                  className="space-y-4"
+                  method="post"
+                >
                   <div>
-                    <label htmlFor="atproto-handle" className="block text-sm font-semibold text-slate-900 dark:text-slate-100 mb-2">
+                    <label
+                      htmlFor="atproto-handle"
+                      className="block text-sm font-semibold text-slate-900 dark:text-slate-100 mb-2"
+                    >
                       Your ATmosphere Handle
                     </label>
                     <input
···
                       aria-required="true"
                       aria-describedby="handle-description"
                     />
-                    <p id="handle-description" className="text-xs text-slate-600 dark:text-slate-400 mt-2">
-                      Enter your full ATmosphere handle (e.g., username.bsky.social or yourname.com)
+                    <p
+                      id="handle-description"
+                      className="text-xs text-slate-600 dark:text-slate-400 mt-2"
+                    >
+                      Enter your full ATmosphere handle (e.g.,
+                      username.bsky.social or yourname.com)
                     </p>
                   </div>
 
···
 
                 <div className="mt-6 pt-6 border-t-2 border-slate-200 dark:border-slate-700">
                   <div className="flex items-start space-x-2 text-sm text-slate-700 dark:text-slate-300">
-                    <svg className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+                    <svg
+                      className="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                        clipRule="evenodd"
+                      />
                     </svg>
                     <div>
-                      <p className="font-semibold text-slate-900 dark:text-slate-100">Secure OAuth Connection</p>
-                      <p className="text-xs mt-1">We use official AT Protocol OAuth. We never see your password and you can revoke access anytime.</p>
+                      <p className="font-semibold text-slate-900 dark:text-slate-100">
+                        Secure OAuth Connection
+                      </p>
+                      <p className="text-xs mt-1">
+                        We use official AT Protocol OAuth. We never see your
+                        password and you can revoke access anytime.
+                      </p>
                     </div>
                   </div>
                 </div>
···
               Share Your Light
             </h3>
             <p className="text-slate-700 dark:text-slate-300 text-sm leading-relaxed">
-              Import your following lists. Your data stays private, your connections shine bright.
+              Import your following lists. Your data stays private, your
+              connections shine bright.
             </p>
           </div>
 
···
               Find Your Swarm
             </h3>
             <p className="text-slate-700 dark:text-slate-300 text-sm leading-relaxed">
-              Watch as fireflies light up - discover which friends have already migrated to the ATmosphere.
+              Watch as fireflies light up - discover which friends have already
+              migrated to the ATmosphere.
             </p>
           </div>
 
···
               Sync Your Glow
             </h3>
             <p className="text-slate-700 dark:text-slate-300 text-sm leading-relaxed">
-              Reconnect instantly. Follow everyone at once or pick and choose - light up together.
+              Reconnect instantly. Follow everyone at once or pick and choose -
+              light up together.
             </p>
           </div>
         </div>
···
         {/* Privacy Notice - desktop only */}
         <div className="hidden md:block text-center mb-8">
           <p className="text-sm text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
-            Your data is processed and stored by our servers. This helps you find matches and reconnect with your community.
+            Your data is processed and stored by our servers. This helps you
+            find matches and reconnect with your community.
           </p>
         </div>
 
···
           </h2>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
             <div className="text-center">
-              <div className="w-12 h-12 bg-firefly-orange text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg shadow-md" aria-hidden="true">
+              <div
+                className="w-12 h-12 bg-firefly-orange text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg shadow-md"
+                aria-hidden="true"
+              >
                 1
               </div>
-              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">Connect</h3>
-              <p className="text-sm text-slate-700 dark:text-slate-300">Sign in with your ATmosphere account</p>
+              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">
+                Connect
+              </h3>
+              <p className="text-sm text-slate-700 dark:text-slate-300">
+                Sign in with your ATmosphere account
+              </p>
             </div>
             <div className="text-center">
-              <div className="w-12 h-12 bg-firefly-pink text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg shadow-md" aria-hidden="true">
+              <div
+                className="w-12 h-12 bg-firefly-pink text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg shadow-md"
+                aria-hidden="true"
+              >
                 2
               </div>
-              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">Upload</h3>
-              <p className="text-sm text-slate-700 dark:text-slate-300">Import your following data from other platforms</p>
+              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">
+                Upload
+              </h3>
+              <p className="text-sm text-slate-700 dark:text-slate-300">
+                Import your following data from other platforms
+              </p>
             </div>
             <div className="text-center">
-              <div className="w-12 h-12 bg-firefly-cyan text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg shadow-md" aria-hidden="true">
+              <div
+                className="w-12 h-12 bg-firefly-cyan text-white rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg shadow-md"
+                aria-hidden="true"
+              >
                 3
               </div>
-              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">Match</h3>
-              <p className="text-sm text-slate-700 dark:text-slate-300">We find your fireflies in the ATmosphere</p>
+              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">
+                Match
+              </h3>
+              <p className="text-sm text-slate-700 dark:text-slate-300">
+                We find your fireflies in the ATmosphere
+              </p>
             </div>
             <div className="text-center">
-              <div className="w-12 h-12 bg-firefly-amber text-slate-900 rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg shadow-md" aria-hidden="true">
+              <div
+                className="w-12 h-12 bg-firefly-amber text-slate-900 rounded-full flex items-center justify-center mx-auto mb-3 font-bold text-lg shadow-md"
+                aria-hidden="true"
+              >
                 4
               </div>
-              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">Follow</h3>
-              <p className="text-sm text-slate-700 dark:text-slate-300">Reconnect with your community</p>
+              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-1">
+                Follow
+              </h3>
+              <p className="text-sm text-slate-700 dark:text-slate-300">
+                Reconnect with your community
+              </p>
             </div>
           </div>
         </div>
       </div>
     </div>
   );
-}
+}

src/svg.d.ts

···
+declare module "*.svg?react" {
+  import * as React from "react";
+  const Component: React.FC<React.SVGProps<SVGSVGElement>>;
+  export default Component;
+}

tailwind.config.js

···
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'class', // Changed from 'media' to 'class' for manual control
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  darkMode: "class", // Changed from 'media' to 'class' for manual control
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
       colors: {
         firefly: {
-          glow: '#FCD34D', // close to amber-300
-          amber: '#F59E0B', // close to amber-500
-          orange: '#F97316', // close to orange-500
-          pink: '#EC4899', // close to tailwind pink-500
-          cyan: '#10D2F4', // close to tailwind cyan-300
-        }
-      },
-      backgroundImage: {
-      'firefly-banner':
-        'linear-gradient(90deg, rgba(9,163,190,1) 0%, rgba(91,33,182,1) 33%, rgba(236,72,153,1) 67%, rgba(244,105,6,1) 100%)',
-      'firefly-banner-dark':
-        'linear-gradient(90deg, rgba(24,21,60,1) 0%, rgba(55,20,94,1) 33%, rgba(104,25,98,1) 67%, rgba(36,16,54,1) 100%)',
+          glow: "#FCD34D", // close to amber-300
+          amber: "#F59E0B", // close to amber-500
+          orange: "#F97316", // close to orange-500
+          pink: "#EC4899", // close to tailwind pink-500
+          cyan: "#10D2F4", // close to tailwind cyan-300
+        },
+        cyan: { 250: "#72EEFD" },
+        purple: { 750: "#6A1DD1" },
+        orange: { 650: "#DF3F00" },
+        yellow: { 650: "#C56508" },
+        orange: { 650: "#F26611" },
+        pink: { 650: "#CD206A" },
       },
+      backgroundImage: ({ theme }) => ({
+        "firefly-banner": `linear-gradient(to right, ${theme("colors.yellow.400")}, ${theme("colors.orange.500")}, ${theme("colors.pink.600")})`,
+        "firefly-banner-dark": `linear-gradient(to right, ${theme("colors.yellow.600")}, ${theme("colors.orange.600")}, ${theme("colors.pink.700")})`,
+      }),
       animation: {
-        'float': 'float 3s ease-in-out infinite',
-        'glow-pulse': 'glow-pulse 3s ease-in-out infinite',
+        float: "float 3s ease-in-out infinite",
       },
       keyframes: {
         float: {
-          '0%, 100%': { transform: 'translate(0, 0) scale(1)', opacity: '0.3' },
-          '25%': { transform: 'translate(10px, -20px) scale(1.2)', opacity: '0.8' },
-          '50%': { transform: 'translate(-5px, -40px) scale(1)', opacity: '0.5' },
-          '75%': { transform: 'translate(15px, -25px) scale(1.1)', opacity: '0.9' },
-        },
-        'glow-pulse': {
-          '0%, 100%': { boxShadow: '0 0 20px rgba(251, 191, 36, 0.3)' },
-          '50%': { boxShadow: '0 0 40px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3)' },
+          "0%, 100%": { transform: "translate(0, 0) scale(1)", opacity: "0.3" },
+          "25%": {
+            transform: "translate(10px, -20px) scale(1.2)",
+            opacity: "0.8",
+          },
+          "50%": {
+            transform: "translate(-5px, -40px) scale(1)",
+            opacity: "0.5",
+          },
+          "75%": {
+            transform: "translate(15px, -25px) scale(1.1)",
+            opacity: "0.9",
+          },
+        }
         },
       },
     },
   },
   plugins: [],
-}
+};

vite.config.ts

···
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import svgr from "vite-plugin-svgr";
 
 export default defineConfig({
-  base: '/',
-  plugins: [react()],
-})
+  base: "/",
+  plugins: [react(), svgr()],
+});