diff --git a/frontend/app/components/Name.jsx b/frontend/app/components/Name.jsx
index 5b7fc20..33db91a 100644
--- a/frontend/app/components/Name.jsx
+++ b/frontend/app/components/Name.jsx
@@ -47,7 +47,6 @@ export default function Name() {
 
       const teamId = e.currentTarget.value;
       const matches = people.filter((p) => p.teamId === teamId);
-
       setSelectedTeamId(teamId);
       setPeopleInTeam(matches);
 
@@ -74,7 +73,7 @@ export default function Name() {
                {/* Header */}
 
                {!selectedTeamId ? (
-                  <div key="select-team" className="animate-fade-up">
+                  <div key="select-team" className="">
                      <div className="text-center">
                         <h1 className="text-4xl sm:text-5xl font-bold text-white">
                            Select your team.
@@ -84,14 +83,16 @@ export default function Name() {
                      </div>
 
                      <div className="flex flex-wrap justify-center mt-14 gap-6">
-                        {teams.map((t) => {
-                           const colour = colours[Math.floor(Math.random() * colours.length)];
+                        {teams.map((t, index) => {
+                           const colour =
+                              colours[index > colours.length - 1 ? index - colours.length : index];
 
                            return (
                               <button
                                  key={t.id}
                                  type="button"
-                                 className="group cursor-pointer flex flex-col items-center gap-3"
+                                 className="group cursor-pointer flex flex-col items-center gap-3 animate-fade-up transition hover:scale-110"
+                                 style={{ animationDelay: `${index * 75}ms` }}
                                  onClick={handleTeamSelect}
                                  value={t.id}
                               >
@@ -110,7 +111,7 @@ export default function Name() {
                      </div>
                   </div>
                ) : (
-                  <div key="select-name" className="relative min-h-[420px] animate-fade-up pb-16">
+                  <div key="select-name" className="relative min-h-[420px]  pb-16">
                      <div className="text-center">
                         <h1 className="text-4xl sm:text-5xl font-bold text-white">
                            Select your name.
@@ -120,16 +121,19 @@ export default function Name() {
                      </div>
 
                      <div className="flex flex-wrap justify-center mt-14 gap-6">
-                        {peopleInTeam.map((p) => {
-                           const colour = colours[Math.floor(Math.random() * colours.length)];
+                        {peopleInTeam.map((p, index) => {
+                           const colour =
+                              colours[index > colours.length - 1 ? index - colours.length : index];
 
                            return (
                               <button
                                  key={p.id}
                                  type="button"
-                                 className="group cursor-pointer flex flex-col items-center gap-3"
+                                 className={`group flex flex-col items-center gap-3 animate-fade-up transition hover:scale-110 ${p.isDemo ? 'cursor-default' : 'cursor-pointer'}`}
+                                 style={{ animationDelay: `${index * 75}ms` }}
                                  onClick={handleSubmit}
                                  value={p.id}
+                                 disabled={p.isDemo}
                               >
                                  <span
                                     className={`flex h-32 w-32 items-center justify-center rounded-full bg-gradient-to-br ${colour} text-3xl font-bold text-white shadow-xl`}
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 024418e..8bb1f8f 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -29,20 +29,18 @@ body {
 
 @keyframes fadeUp {
    0% {
-      opacity: 0;
-      transform: translateY(22px) scale(0.96);
-      filter: blur(6px);
+      opacity: 0.1;
+      transform: translateY(80px) scale(0.85);
    }
 
    100% {
       opacity: 1;
       transform: translateY(0) scale(1);
-      filter: blur(0);
    }
 }
 
 .animate-fade-up {
-   animation: fadeUp 1945ms ease-out both;
+   animation: fadeUp 1005ms ease-out both;
 }
 
 .results-datepicker {