feat(account-setup): enhance localization and UI for account setup process

- Added new language support and improved translations for account setup steps across multiple languages.
- Updated the organization step to streamline user input and enhance suggestions for organization names.
- Refactored task management components to improve user experience when adding and managing tasks.
- Removed outdated CSS for admin center components to simplify styling and improve maintainability.
- Introduced new UI elements and transitions for a more engaging account setup experience.
- Enhanced Redux state management to accommodate new features and localization updates.

.claude/settings.local.json

@@ -6,7 +6,8 @@
       "Bash(npm run type-check:*)",
       "Bash(npm run:*)",
       "Bash(move:*)",
-      "Bash(mv:*)"
+      "Bash(mv:*)",
+      "Bash(rm:*)"
     ],
     "deny": []
   }

worklenz-backend/src/public/locales/en/account-setup.json

@@ -1,7 +1,7 @@
 {
   "continue": "Continue",
 
-  "setupYourAccount": "Setup Your Worklenz Account.",
+  "setupYourAccount": "Setup Your Account.",
   "organizationStepTitle": "Name Your Organization",
   "organizationStepLabel": "Pick a name for your Worklenz account.",
 

worklenz-frontend/public/locales/alb/account-setup.json

@@ -1,119 +1,191 @@
 {
   "continue": "Vazhdo",
 
-  "setupYourAccount": "Konfiguro Llogarinë Tënde në Worklenz.",
+  "setupYourAccount": "Konfiguro llogarinë tënde.",
-  "organizationStepTitle": "Emërtoni Organizatën Tuaj",
+  "organizationStepTitle": "Emërto organizatën tënde",
-  "organizationStepLabel": "Zgjidhni një emër për llogarinë tuaj në Worklenz.",
+  "organizationStepLabel": "Zgjidh një emër për llogarinë tënde në Worklenz.",
-  "organizationStepWelcome": "Setup Your Worklenz Account.",
+  "organizationStepWelcome": "Konfiguro llogarinë tënde në Worklenz.",
-  "organizationStepDescription": "Let's start by setting up your organization. This will be the main workspace for your team.",
+  "organizationStepDescription": "Le të fillojmë duke konfiguruar organizatën tënde. Kjo do të jetë hapësira kryesore e punës për ekipin tënd.",
-  "organizationStepTooltip": "This name will appear in your workspace and can be changed later in settings.",
+  "organizationStepTooltip": "Ky emër do të shfaqet në hapësirën tënde të punës dhe mund të ndryshohet më vonë në cilësime.",
-  "organizationStepNeedIdeas": "Need ideas?",
+  "organizationStepNeedIdeas": "Keni nevojë për ide?",
-  "organizationStepUseDetected": "Use detected:",
+  "organizationStepUseDetected": "Përdorimi i zbuluar:",
-  "organizationStepCharacters": "characters",
+  "organizationStepCharacters": "karaktere",
-  "organizationStepGoodLength": "Good length",
+  "organizationStepGoodLength": "Gjatësi e mirë",
-  "organizationStepTooShort": "Too short",
+  "organizationStepTooShort": "Shumë i shkurtër",
-  "organizationStepNamingTips": "Naming Tips",
+  "organizationStepNamingTips": "Këshilla për emërtimin",
-  "organizationStepTip1": "Keep it simple and memorable",
+  "organizationStepTip1": "Mbaje të thjeshtë dhe të lehtë për t'u mbajtur mend",
-  "organizationStepTip2": "Reflect your industry or values", 
+  "organizationStepTip2": "Përfaqëso industrinë ose vlerat e tua",
-  "organizationStepTip3": "Think about future growth",
+  "organizationStepTip3": "Mendo për rritjen në të ardhmen",
-  "organizationStepTip4": "Make it unique and brandable",
+  "organizationStepTip4": "Bëje unik dhe të përshtatshëm për markë",
-  "organizationStepSuggestionsTitle": "Name Suggestions",
+  "organizationStepSuggestionsTitle": "Sugjerime për emra",
-  "organizationStepCategory1": "Tech Companies",
+  "organizationStepCategory1": "Kompani Teknologjie",
-  "organizationStepCategory2": "Creative Agencies", 
+  "organizationStepCategory2": "Agjenci Kreative",
-  "organizationStepCategory3": "Consulting",
+  "organizationStepCategory3": "Konsulencë",
-  "organizationStepCategory4": "Startups",
+  "organizationStepCategory4": "Startupe",
-  "organizationStepSuggestionsNote": "These are just examples to get you started. Choose something that represents your organization.",
+  "organizationStepSuggestionsNote": "Këto janë vetëm shembuj për të të ndihmuar të fillosh. Zgjidh diçka që përfaqëson organizatën tënde.",
-  "organizationStepPrivacyNote": "Your organization name is private and only visible to your team members.",
+  "organizationStepPrivacyNote": "Emri i organizatës tënde është privat dhe i dukshëm vetëm për anëtarët e ekipit.",
-  "step2Title": "Create your first tasks",
+  "projectStepTitle": "Krijo projektin tënd të parë",
-  "step2InputLabel": "Type a few tasks that you are going to do in",
+  "projectStepLabel": "Në cilin projekt po punon tani?",
-  "step2AddAnother": "Add another",
+  "projectStepPlaceholder": "p.sh. Plani i Marketingut",
-  "formTitle": "Create your first task.",
+  "tasksStepTitle": "Krijo detyrat e tua të para",
-  "step3Title": "Invite your team to work with",
+  "tasksStepLabel": "Shkruaj disa detyra që do të kryesh në",
-  "orgTypeQuestion": "What best describes your organization?",
+  "tasksStepAddAnother": "Shto një tjetër",
-  "userRoleQuestion": "What's your role?",
+  "emailPlaceholder": "Adresa e emailit",
-  "yourNeedsTitle": "What are your main needs?",
+  "invalidEmail": "Ju lutem vendosni një adresë emaili të vlefshme",
-  "yourNeedsDescription": "Select all that apply to help us set up your workspace",
+  "or": "ose",
-  "yourNeedsQuestion": "How will you primarily use Worklenz?",
+  "templateButton": "Importo nga shablloni",
-  "useCaseTaskOrg": "Organize and track tasks",
+  "goBack": "Kthehu mbrapa",
-  "useCaseTeamCollab": "Work together seamlessly", 
+  "cancel": "Anulo",
-  "useCaseResourceMgmt": "Manage time and resources",
+  "create": "Krijo",
-  "useCaseClientComm": "Stay connected with clients",
+  "templateDrawerTitle": "Zgjidh nga shabllonet",
-  "useCaseTimeTrack": "Monitor project hours",
+  "step3InputLabel": "Fto me email",
-  "useCaseOther": "Something else",
+  "addAnother": "Shto një tjetër",
-  "selectedText": "selected",
+  "skipForNow": "Kalo për tani",
-  "previousToolsQuestion": "What tools have you used before? (Optional)",
+  "formTitle": "Krijo detyrën tënde të parë.",
-  "previousToolsPlaceholder": "e.g., Asana, Trello, Jira, Monday.com, etc.",
+  "step3Title": "Fto ekipin tënd për të punuar së bashku",
-  "discoveryTitle": "One last thing...",
+  "maxMembers": " (Mund të ftoni deri në 5 anëtarë)",
-  "discoveryDescription": "Help us understand how you discovered Worklenz",
+  "maxTasks": " (Mund të krijoni deri në 5 detyra)",
-  "discoveryQuestion": "How did you hear about us?",
+  "membersStepTitle": "Fto ekipin tënd",
-  "allSetTitle": "You're all set!",
+  "membersStepDescription": "Shto anëtarë ekipi në \"{{organizationName}}\" dhe filloni bashkëpunimin",
-  "allSetDescription": "Let's create your first project and get started with Worklenz",
+  "memberPlaceholder": "Anëtari i ekipit {{index}} - Shkruani adresën e emailit",
-  "aboutYouStepName": "About You",
+  "validEmailAddress": "Adresë emaili e vlefshme",
-  "yourNeedsStepName": "Your Needs", 
+  "addAnotherTeamMember": "Shto një anëtar tjetër të ekipit ({{current}}/{{max}})",
-  "discoveryStepName": "Discovery",
+  "canInviteLater": "Gjithmonë mund të ftoni anëtarë të ekipit më vonë",
-  "stepProgress": "Step {step} of 3: {title}",
+  "skipStepDescription": "Nuk i keni adresat e emailit gati? Asnjë problem! Mund ta kaloni këtë hap dhe të ftoni anëtarë nga paneli i projektit më vonë.",
-  "projectStepHeader": "Let's create your first project",
+  "orgCategoryTech": "Kompani Teknologjie",
-  "projectStepSubheader": "Start from scratch or use a template to get going faster",
+  "orgCategoryCreative": "Agjenci Kreative",
-  "startFromScratch": "Start from scratch",
+  "orgCategoryConsulting": "Konsulencë",
-  "templateSelected": "Template selected below",
+  "orgCategoryStartups": "Startupe",
-  "quickSuggestions": "Quick suggestions:",
+  "namingTip1": "Mbaje të thjeshtë dhe të lehtë për t'u mbajtur mend",
-  "orText": "OR",
+  "namingTip2": "Përfaqëso industrinë ose vlerat e tua",
-  "startWithTemplate": "Start with a template",
+  "namingTip3": "Mendo për rritjen në të ardhmen",
-  "clearToSelectTemplate": "Clear project name above to select a template",
+  "namingTip4": "Bëje unik dhe të përshtatshëm për markë",
-  "templateHeadStart": "Get a head start with pre-built project structures",
+  "aboutYouTitle": "Na trego për veten tënde",
-  "browseAllTemplates": "Browse All Templates",
+  "aboutYouDescription": "Na ndihmo të personalizojmë përvojën tënde",
-  "templatesAvailable": "15+ industry-specific templates available",
+  "orgTypeQuestion": "Cila përshkruan më mirë organizatën tënde?",
-  "chooseTemplate": "Choose a template that matches your project type",
+  "userRoleQuestion": "Cili është roli yt?",
-  "createProject": "Create Project",
+  "yourNeedsTitle": "Cilat janë nevojat e tua kryesore?",
-  "templateSoftwareDev": "Software Development",
+  "yourNeedsDescription": "Zgjidh të gjitha që aplikohen për të na ndihmuar të konfigurojmë hapësirën tënde të punës",
-  "templateSoftwareDesc": "Agile sprints, bug tracking, releases",
+  "yourNeedsQuestion": "Si do ta përdorësh kryesisht Worklenz?",
-  "templateMarketing": "Marketing Campaign", 
+  "useCaseTaskOrg": "Organizo dhe ndiq detyrat",
-  "templateMarketingDesc": "Campaign planning, content calendar",
+  "useCaseTeamCollab": "Puno së bashku pa pengesa",
-  "templateConstruction": "Construction Project",
+  "useCaseResourceMgmt": "Menaxho kohën dhe burimet",
-  "templateConstructionDesc": "Phases, permits, contractors",
+  "useCaseClientComm": "Qëndro i lidhur me klientët",
-  "templateStartup": "Startup Launch",
+  "useCaseTimeTrack": "Monitoro orët e projektit",
-  "templateStartupDesc": "MVP development, funding, growth",
+  "useCaseOther": "Diçka tjetër",
-
+  "selectedText": "zgjedhur",
-  "tasksStepTitle": "Shtoni detyrat tuaja të para",
+  "previousToolsQuestion": "Çfarë mjetesh ke përdorur më parë? (Opsionale)",
-  "tasksStepDescription": "Ndani \"{projectName}\" në detyra të zbatueshe për të filluar",
+  "discoveryTitle": "Edhe një gjë e fundit...",
-  "taskPlaceholder": "Detyra {index} - p.sh., Çfarë duhet bërë?",
+  "discoveryDescription": "Na ndihmo të kuptojmë si e zbulove Worklenz",
-  "addAnotherTask": "Shtoni një detyrë tjetër ({current}/{max})",
+  "discoveryQuestion": "Si dëgjove për ne?",
-
+  "allSetTitle": "Çdo gjë gati!",
-  "surveyStepTitle": "Na tregoni për ju",
+  "allSetDescription": "Le të krijojmë projektin tënd të parë dhe të fillojmë me Worklenz",
-  "surveyStepLabel": "Na ndihmoni të personalizojmë eksperiencën tuaj në Worklenz duke përgjigjur disa pyetjeve.",
+  "aboutYouStepName": "Rreth teje",
-  
+  "yourNeedsStepName": "Nevojat e tua",
-  "organizationType": "Cila përshkruan më mirë organizatën tuaj?",
+  "discoveryStepName": "Zbulimi",
+  "stepProgress": "Hapi {step} nga 3: {title}",
+  "projectStepHeader": "Le të krijojmë projektin tënd të parë",
+  "projectStepSubheader": "Fillo nga e para ose përdor një shabllon për të filluar më shpejt",
+  "startFromScratch": "Fillo nga e para",
+  "templateSelected": "Shablloni i zgjedhur më poshtë",
+  "quickSuggestions": "Sugjerime të shpejta:",
+  "orText": "OSE",
+  "startWithTemplate": "Fillo me një shabllon",
+  "clearToSelectTemplate": "Pastro emrin e projektit më sipër për të zgjedhur një shabllon",
+  "templateHeadStart": "Fillo më shpejt me struktura të gatshme projekti",
+  "browseAllTemplates": "Shfleto të gjitha shabllonet",
+  "templatesAvailable": "15+ shabllone të specializuara sipas industrisë në dispozicion",
+  "chooseTemplate": "Zgjidh një shabllon që i përshtatet llojit të projektit tënd",
+  "createProject": "Krijo projekt",
+  "templateSoftwareDev": "Zhvillim Softueri",
+  "templateSoftwareDesc": "Sprint-e agile, ndjekje gabimesh, lëshime",
+  "templateMarketing": "Fushatë Marketingu",
+  "templateMarketingDesc": "Planifikim fushate, kalendar përmbajtjesh",
+  "templateConstruction": "Projekt Ndërtimi",
+  "templateConstructionDesc": "Faza, leje, kontraktorë",
+  "templateStartup": "Lansim Startup-i",
+  "templateStartupDesc": "Zhvillim MVP, financim, rritje",
+  "tasksStepDescription": "Ndaji \"{{projectName}}\" në detyra të veprueshme për të filluar",
+  "taskPlaceholder": "Detyra {{index}} - p.sh., Çfarë duhet bërë?",
+  "addAnotherTask": "Shto një detyrë tjetër ({{current}}/{{max}})",
+  "surveyStepTitle": "Na trego për veten tënde",
+  "surveyStepLabel": "Na ndihmo të personalizojmë përvojën tënde në Worklenz duke iu përgjigjur disa pyetjeve.",
+  "organizationType": "Cila përshkruan më mirë organizatën tënde?",
   "organizationTypeFreelancer": "Freelancer",
   "organizationTypeStartup": "Startup",
-  "organizationTypeSmallMediumBusiness": "Biznes i Vogël ose i Mesmu",
+  "organizationTypeSmallMediumBusiness": "Biznes i Vogël ose i Mesëm",
-  "organizationTypeAgency": "Agjensi",
+  "organizationTypeAgency": "Agjenci",
   "organizationTypeEnterprise": "Ndërmarrje",
   "organizationTypeOther": "Tjetër",
-  
+  "userRole": "Cili është roli yt?",
-  "userRole": "Cili është roli juaj?",
+  "userRoleFounderCeo": "Themelues / CEO",
-  "userRoleFounderCeo": "Themeluesi / CEO",
+  "userRoleProjectManager": "Menaxher Projekti",
-  "userRoleProjectManager": "Menaxheri i Projektit",
+  "userRoleSoftwareDeveloper": "Zhvillues Softueri",
-  "userRoleSoftwareDeveloper": "Zhvilluesi i Software-it",
+  "userRoleDesigner": "Dizajner",
-  "userRoleDesigner": "Dizajneri",
   "userRoleOperations": "Operacionet",
   "userRoleOther": "Tjetër",
-  
+  "mainUseCases": "Për çfarë do ta përdorësh kryesisht Worklenz?",
-  "mainUseCases": "Për çfarë do ta përdorni kryësisht Worklenz?",
+  "mainUseCasesTaskManagement": "Menaxhim detyrash",
-  "mainUseCasesTaskManagement": "Menaxhimi i detyrave",
+  "mainUseCasesTeamCollaboration": "Bashkëpunim ekipi",
-  "mainUseCasesTeamCollaboration": "Bashkëpunimi i ekipit",
+  "mainUseCasesResourcePlanning": "Planifikim burimesh",
-  "mainUseCasesResourcePlanning": "Planifikimi i burimeve",
+  "mainUseCasesClientCommunication": "Komunikim & raportim me klientët",
-  "mainUseCasesClientCommunication": "Komunikimi me klientët & raportet",
+  "mainUseCasesTimeTracking": "Ndjekje kohe",
-  "mainUseCasesTimeTracking": "Ndjekja e kohës",
   "mainUseCasesOther": "Tjetër",
-  
+  "previousTools": "Çfarë mjetesh ke përdorur para Worklenz?",
-  "previousTools": "Cilat vegla përdornit para Worklenz?",
   "previousToolsPlaceholder": "p.sh. Trello, Asana, Monday.com",
-  
+  "howHeardAbout": "Si dëgjove për Worklenz?",
-  "howHeardAbout": "Si dëgjuat për Worklenz?",
+  "howHeardAboutGoogleSearch": "Kërkim në Google",
-  "howHeardAboutGoogleSearch": "Kërkimi Google",
   "howHeardAboutTwitter": "Twitter",
   "howHeardAboutLinkedin": "LinkedIn",
-  "howHeardAboutFriendColleague": "Një miku ose kolegu",
+  "howHeardAboutFriendColleague": "Një mik ose koleg",
-  "howHeardAboutBlogArticle": "Një blog ose artikulli",
+  "howHeardAboutBlogArticle": "Një blog ose artikull",
-  "howHeardAboutOther": "Tjetër"
+  "howHeardAboutOther": "Tjetër",
+
+  "aboutYouStepTitle": "Na trego për veten",
+  "aboutYouStepDescription": "Na ndihmo të personalizojmë përvojën tënde",
+  "yourNeedsStepTitle": "Cilat janë nevojat e tua kryesore?",
+  "yourNeedsStepDescription": "Zgjidh të gjitha që aplikohen për të na ndihmuar të konfigurojmë hapësirën tënde të punës",
+  "selected": "zgjedhur",
+  "previousToolsLabel": "Çfarë mjetesh ke përdorur më parë? (Opsionale)",
+
+  "roleSuggestions": {
+    "designer": "UI/UX, Grafikë, Kreativ",
+    "developer": "Frontend, Backend, Full-stack",
+    "projectManager": "Planifikim, Koordinim",
+    "marketing": "Përmbajtje, Media Sociale, Rritje",
+    "sales": "Zhvillim Biznesi, Marrëdhënie me Klientë",
+    "operations": "Administratë, HR, Financa"
+  },
+
+  "languages": {
+    "en": "Anglisht",
+    "es": "Spanjisht",
+    "pt": "Portugalisht",
+    "de": "Gjermanisht",
+    "alb": "Shqip",
+    "zh": "Kinezçe"
+  },
+
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+
+  "projectSuggestions": {
+    "freelancer": ["Projekti i Klientit", "Përditësim Portfolio", "Markë Personale"],
+    "startup": ["Zhvillim MVP", "Lansim Produkti", "Kërkim Tregu"],
+    "agency": ["Fushatë Klienti", "Strategji Markë", "Ridizajnim Website"],
+    "enterprise": ["Migrim Sistemi", "Optimizim Procesesh", "Trajnim Ekipi"]
+  },
+
+  "useCaseDescriptions": {
+    "taskManagement": "Organizoj dhe ndjek detyrat",
+    "teamCollaboration": "Punojmë së bashku pa probleme",
+    "resourcePlanning": "Menaxhoj kohën dhe burimet",
+    "clientCommunication": "Qëndroj i lidhur me klientët",
+    "timeTracking": "Monitoroj orët e projektit",
+    "other": "Diçka tjetër"
+  }
 }

worklenz-frontend/public/locales/de/account-setup.json

@@ -51,10 +51,10 @@
   "maxTasks": " (Sie können bis zu 5 Aufgaben erstellen)",
 
   "membersStepTitle": "Laden Sie Ihr Team ein",
-  "membersStepDescription": "Teammitglieder zu \"{organizationName}\" hinzufügen und mit der Zusammenarbeit beginnen",
+  "membersStepDescription": "Teammitglieder zu \"{{organizationName}}\" hinzufügen und mit der Zusammenarbeit beginnen",
-  "memberPlaceholder": "Teammitglied {index} - E-Mail-Adresse eingeben",
+  "memberPlaceholder": "Teammitglied {{index}} - E-Mail-Adresse eingeben",
   "validEmailAddress": "Gültige E-Mail-Adresse",
-  "addAnotherTeamMember": "Weiteres Teammitglied hinzufügen ({current}/{max})",
+  "addAnotherTeamMember": "Weiteres Teammitglied hinzufügen ({{current}}/{{max}})",
   "canInviteLater": "Sie können Teammitglieder jederzeit später einladen",
   "skipStepDescription": "Haben Sie keine E-Mail-Adressen bereit? Kein Problem! Sie können diesen Schritt überspringen und Teammitglieder später über Ihr Projekt-Dashboard einladen.",
 
@@ -119,9 +119,9 @@
   "templateStartupDesc": "MVP-Entwicklung, Finanzierung, Wachstum",
 
   "tasksStepTitle": "Fügen Sie Ihre ersten Aufgaben hinzu",
-  "tasksStepDescription": "Unterteilen Sie \"{projectName}\" in umsetzbare Aufgaben, um zu beginnen",
+  "tasksStepDescription": "Unterteilen Sie \"{{projectName}}\" in umsetzbare Aufgaben, um zu beginnen",
-  "taskPlaceholder": "Aufgabe {index} - z.B., Was muss getan werden?",
+  "taskPlaceholder": "Aufgabe {{index}} - z.B., Was muss getan werden?",
-  "addAnotherTask": "Weitere Aufgabe hinzufügen ({current}/{max})",
+  "addAnotherTask": "Weitere Aufgabe hinzufügen ({{current}}/{{max}})",
 
   "surveyStepTitle": "Erzählen Sie uns von sich",
   "surveyStepLabel": "Helfen Sie uns, Ihre Worklenz-Erfahrung zu personalisieren, indem Sie ein paar Fragen beantworten.",
@@ -159,5 +159,53 @@
   "howHeardAboutLinkedin": "LinkedIn",
   "howHeardAboutFriendColleague": "Ein Freund oder Kollege",
   "howHeardAboutBlogArticle": "Ein Blog oder Artikel",
-  "howHeardAboutOther": "Andere"
+  "howHeardAboutOther": "Andere",
+  
+  "aboutYouStepTitle": "Erzählen Sie uns von sich",
+  "aboutYouStepDescription": "Helfen Sie uns, Ihre Erfahrung zu personalisieren",
+  "yourNeedsStepTitle": "Was sind Ihre Hauptbedürfnisse?",
+  "yourNeedsStepDescription": "Wählen Sie alle zutreffenden aus, um uns bei der Einrichtung Ihres Arbeitsbereichs zu helfen",
+  "selected": "ausgewählt",
+  "previousToolsLabel": "Welche Tools haben Sie zuvor verwendet? (Optional)",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX, Grafiken, Kreativ",
+    "developer": "Frontend, Backend, Full-stack", 
+    "projectManager": "Planung, Koordination",
+    "marketing": "Inhalt, Social Media, Wachstum",
+    "sales": "Geschäftsentwicklung, Kundenbeziehungen",
+    "operations": "Admin, HR, Finanzen"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["Kundenprojekt", "Portfolio-Update", "Persönliche Marke"],
+    "startup": ["MVP-Entwicklung", "Produktlaunch", "Marktforschung"],
+    "agency": ["Kundenkampagne", "Markenstrategie", "Website-Redesign"],
+    "enterprise": ["Systemumstellung", "Prozessoptimierung", "Teamschulung"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "Aufgaben organisieren und verfolgen",
+    "teamCollaboration": "Nahtlos zusammenarbeiten",
+    "resourcePlanning": "Zeit und Ressourcen verwalten", 
+    "clientCommunication": "Mit Kunden in Verbindung bleiben",
+    "timeTracking": "Projektstunden überwachen",
+    "other": "Etwas anderes"
+  }
 }

worklenz-frontend/public/locales/de/admin-center/configuration.json

@@ -0,0 +1,26 @@
+{
+  "billingDetails": "Abrechnungsdetails",
+  "name": "Name",
+  "namePlaceholder": "Name",
+  "emailAddress": "E-Mail-Adresse",
+  "emailPlaceholder": "E-Mail-Adresse",
+  "contactNumber": "Telefonnummer",
+  "phoneNumberPlaceholder": "Telefonnummer",
+  "phoneValidationError": "Telefonnummer muss genau 10 Ziffern haben",
+  "companyDetails": "Firmendetails",
+  "companyName": "Firmenname",
+  "companyNamePlaceholder": "Firmenname",
+  "addressLine01": "Adresszeile 01",
+  "addressLine01Placeholder": "Adresszeile 01",
+  "addressLine02": "Adresszeile 02",
+  "addressLine02Placeholder": "Adresszeile 02",
+  "country": "Land",
+  "countryPlaceholder": "Land",
+  "city": "Stadt",
+  "cityPlaceholder": "Stadt",
+  "state": "Bundesland",
+  "statePlaceholder": "Bundesland",
+  "postalCode": "Postleitzahl",
+  "postalCodePlaceholder": "Postleitzahl",
+  "save": "Speichern"
+}

worklenz-frontend/public/locales/en/account-setup.json

@@ -1,7 +1,7 @@
 {
   "continue": "Continue",
 
-  "setupYourAccount": "Setup Your Worklenz Account.",
+  "setupYourAccount": "Setup Your Account.",
   "organizationStepTitle": "Name Your Organization",
   "organizationStepWelcome": "Welcome to Worklenz!",
   "organizationStepDescription": "Let's start by setting up your organization. This will be the main workspace for your team.",
@@ -30,7 +30,6 @@
   "projectStepLabel": "What project are you working on right now?",
   "projectStepPlaceholder": "e.g. Marketing Plan",
 
-  "tasksStepTitle": "Create your first tasks",
   "tasksStepLabel": "Type a few tasks that you are going to do in",
   "tasksStepAddAnother": "Add another",
 
@@ -51,10 +50,10 @@
   "maxTasks": " (You can create up to 5 tasks)",
 
   "membersStepTitle": "Invite your team",
-  "membersStepDescription": "Add team members to \"{organizationName}\" and start collaborating",
+  "membersStepDescription": "Add team members to \"{{organizationName}}\" and start collaborating",
-  "memberPlaceholder": "Team member {index} - Enter email address",
+  "memberPlaceholder": "Team member {{index}} - Enter email address",
   "validEmailAddress": "Valid email address",
-  "addAnotherTeamMember": "Add another team member ({current}/{max})",
+  "addAnotherTeamMember": "Add another team member ({{current}}/{{max}})",
   "canInviteLater": "You can always invite team members later",
   "skipStepDescription": "Don't have email addresses ready? No problem! You can skip this step and invite team members from your project dashboard later.",
 
@@ -83,7 +82,6 @@
   "useCaseOther": "Something else",
   "selectedText": "selected",
   "previousToolsQuestion": "What tools have you used before? (Optional)",
-  "previousToolsPlaceholder": "e.g., Asana, Trello, Jira, Monday.com, etc.",
   
   "discoveryTitle": "One last thing...",
   "discoveryDescription": "Help us understand how you discovered Worklenz",
@@ -119,9 +117,9 @@
   "templateStartupDesc": "MVP development, funding, growth",
 
   "tasksStepTitle": "Add your first tasks",
-  "tasksStepDescription": "Break down \"{projectName}\" into actionable tasks to get started",
+  "tasksStepDescription": "Break down \"{{projectName}}\" into actionable tasks to get started",
-  "taskPlaceholder": "Task {index} - e.g., What needs to be done?",
+  "taskPlaceholder": "Task {{index}} - e.g., What needs to be done?",
-  "addAnotherTask": "Add another task ({current}/{max})",
+  "addAnotherTask": "Add another task ({{current}}/{{max}})",
 
   "surveyStepTitle": "Tell us about yourself",
   "surveyStepLabel": "Help us personalize your Worklenz experience by answering a few questions.",
@@ -159,5 +157,53 @@
   "howHeardAboutLinkedin": "LinkedIn",
   "howHeardAboutFriendColleague": "A friend or colleague",
   "howHeardAboutBlogArticle": "A blog or article",
-  "howHeardAboutOther": "Other"
+  "howHeardAboutOther": "Other",
+  
+  "aboutYouStepTitle": "Tell us about yourself",
+  "aboutYouStepDescription": "Help us personalize your experience",
+  "yourNeedsStepTitle": "What are your main needs?",
+  "yourNeedsStepDescription": "Select all that apply to help us set up your workspace",
+  "selected": "selected",
+  "previousToolsLabel": "What tools have you used before? (Optional)",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX, Graphics, Creative",
+    "developer": "Frontend, Backend, Full-stack", 
+    "projectManager": "Planning, Coordination",
+    "marketing": "Content, Social Media, Growth",
+    "sales": "Business Development, Client Relations",
+    "operations": "Admin, HR, Finance"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["Client Project", "Portfolio Update", "Personal Brand"],
+    "startup": ["MVP Development", "Product Launch", "Market Research"],
+    "agency": ["Client Campaign", "Brand Strategy", "Website Redesign"],
+    "enterprise": ["System Migration", "Process Optimization", "Team Training"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "Organize and track tasks",
+    "teamCollaboration": "Work together seamlessly",
+    "resourcePlanning": "Manage time and resources", 
+    "clientCommunication": "Stay connected with clients",
+    "timeTracking": "Monitor project hours",
+    "other": "Something else"
+  }
 }

worklenz-frontend/public/locales/en/admin-center/configuration.json

@@ -0,0 +1,26 @@
+{
+  "billingDetails": "Billing Details",
+  "name": "Name",
+  "namePlaceholder": "Name",
+  "emailAddress": "Email Address",
+  "emailPlaceholder": "Email Address",
+  "contactNumber": "Contact Number",
+  "phoneNumberPlaceholder": "Phone Number",
+  "phoneValidationError": "Phone number must be exactly 10 digits",
+  "companyDetails": "Company Details",
+  "companyName": "Company Name",
+  "companyNamePlaceholder": "Company Name",
+  "addressLine01": "Address Line 01",
+  "addressLine01Placeholder": "Address Line 01",
+  "addressLine02": "Address Line 02",
+  "addressLine02Placeholder": "Address Line 02",
+  "country": "Country",
+  "countryPlaceholder": "Country",
+  "city": "City",
+  "cityPlaceholder": "City",
+  "state": "State",
+  "statePlaceholder": "State",
+  "postalCode": "Postal Code",
+  "postalCodePlaceholder": "Postal Code",
+  "save": "Save"
+}

worklenz-frontend/public/locales/en/admin-center/current-bill.json

@@ -117,5 +117,26 @@
   "currentSeatsText": "You currently have {{seats}} seats available.",
   "selectSeatsText": "Please select the number of additional seats to purchase.",
   "purchase": "Purchase",
-  "contactSales": "Contact sales"
+  "contactSales": "Contact sales",
+  "submitSuccess": "Code redeemed successfully!",
+  "submitSuccessDescription": "Your account has been updated with the new credits.",
+  "percentUsed": "% Used",
+  "sizeUnits": {
+    "bytes": "Bytes",
+    "kb": "KB", 
+    "mb": "MB",
+    "gb": "GB",
+    "tb": "TB"
+  },
+  "seatPerMonth": "seat / month",
+  "totalPrice": "Total $",
+  "tryForFree": "Try for free",
+  "subscriptionUpdateSuccess": "Subscription updated successfully!",
+  "paymentProcessorError": "Failed to load payment processor",
+  "seatsLabel": "Seats:",
+  "requiredField": "*",
+  "purchaseSeatsTextSingle": "To continue, you'll need to purchase an additional seat.",
+  "singleUserNote": "You currently have 1 seat available.",
+  "selectSeatsTextSingle": "Please select the number of additional seats to purchase.",
+  "phoneNumberPattern": "07xxxxxxxx"
 }

worklenz-frontend/public/locales/en/admin-center/overview.json

@@ -4,5 +4,8 @@
   "owner": "Organization Owner",
   "admins": "Organization Admins",
   "contactNumber": "Add Contact Number",
-  "edit": "Edit"
+  "edit": "Edit",
+  "emailAddress": "Email Address",
+  "enterOrganizationName": "Enter organization name",
+  "ownerSuffix": " (Owner)"
 }

worklenz-frontend/public/locales/en/admin-center/users.json

@@ -5,5 +5,6 @@
   "user": "User",
   "email": "Email",
   "lastActivity": "Last Activity",
-  "refresh": "Refresh users"
+  "refresh": "Refresh users",
+  "name": "Name"
 }

worklenz-frontend/public/locales/es/account-setup.json

@@ -52,10 +52,10 @@
   "maxTasks": " (Puedes crear hasta 5 tareas)",
 
   "membersStepTitle": "Invita a tu equipo",
-  "membersStepDescription": "Añade miembros del equipo a \"{organizationName}\" y comienza a colaborar",
+  "membersStepDescription": "Añade miembros del equipo a \"{{organizationName}}\" y comienza a colaborar",
-  "memberPlaceholder": "Miembro del equipo {index} - Ingresa dirección de correo",
+  "memberPlaceholder": "Miembro del equipo {{index}} - Ingresa dirección de correo",
   "validEmailAddress": "Dirección de correo válida",
-  "addAnotherTeamMember": "Añadir otro miembro del equipo ({current}/{max})",
+  "addAnotherTeamMember": "Añadir otro miembro del equipo ({{current}}/{{max}})",
   "canInviteLater": "Siempre puedes invitar miembros del equipo más tarde",
   "skipStepDescription": "¿No tienes direcciones de correo listas? ¡No hay problema! Puedes omitir este paso e invitar miembros del equipo desde tu panel de proyecto más tarde.",
 
@@ -120,9 +120,9 @@
   "templateStartupDesc": "Desarrollo MVP, financiación, crecimiento",
 
   "tasksStepTitle": "Añade tus primeras tareas",
-  "tasksStepDescription": "Desglosa \"{projectName}\" en tareas accionables para comenzar",
+  "tasksStepDescription": "Desglosa \"{{projectName}}\" en tareas accionables para comenzar",
-  "taskPlaceholder": "Tarea {index} - ej., ¿Qué necesita hacerse?",
+  "taskPlaceholder": "Tarea {{index}} - ej., ¿Qué necesita hacerse?",
-  "addAnotherTask": "Añadir otra tarea ({current}/{max})",
+  "addAnotherTask": "Añadir otra tarea ({{current}}/{{max}})",
 
   "surveyStepTitle": "Cuéntanos sobre ti",
   "surveyStepLabel": "Ayúdanos a personalizar tu experiencia de Worklenz respondiendo algunas preguntas.",
@@ -160,5 +160,53 @@
   "howHeardAboutLinkedin": "LinkedIn",
   "howHeardAboutFriendColleague": "Un amigo o colega",
   "howHeardAboutBlogArticle": "Un blog o artículo",
-  "howHeardAboutOther": "Otro"
+  "howHeardAboutOther": "Otro",
+  
+  "aboutYouStepTitle": "Cuéntanos sobre ti",
+  "aboutYouStepDescription": "Ayúdanos a personalizar tu experiencia",
+  "yourNeedsStepTitle": "¿Cuáles son tus principales necesidades?",
+  "yourNeedsStepDescription": "Selecciona todas las que apliquen para ayudarnos a configurar tu espacio de trabajo",
+  "selected": "seleccionado",
+  "previousToolsLabel": "¿Qué herramientas has usado antes? (Opcional)",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX, Gráficos, Creativo",
+    "developer": "Frontend, Backend, Full-stack", 
+    "projectManager": "Planificación, Coordinación",
+    "marketing": "Contenido, Redes Sociales, Crecimiento",
+    "sales": "Desarrollo de Negocios, Relaciones con Clientes",
+    "operations": "Administración, RRHH, Finanzas"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["Proyecto Cliente", "Actualización Portfolio", "Marca Personal"],
+    "startup": ["Desarrollo MVP", "Lanzamiento Producto", "Investigación Mercado"],
+    "agency": ["Campaña Cliente", "Estrategia Marca", "Rediseño Website"],
+    "enterprise": ["Migración Sistema", "Optimización Procesos", "Capacitación Equipo"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "Organizar y rastrear tareas",
+    "teamCollaboration": "Trabajar juntos sin problemas",
+    "resourcePlanning": "Gestionar tiempo y recursos", 
+    "clientCommunication": "Mantenerse conectado con clientes",
+    "timeTracking": "Monitorear horas de proyecto",
+    "other": "Algo más"
+  }
 }

worklenz-frontend/public/locales/pt/account-setup.json

@@ -52,10 +52,10 @@
   "maxTasks": " (Você pode criar até 5 tarefas)",
 
   "membersStepTitle": "Convide sua equipe",
-  "membersStepDescription": "Adicione membros da equipe ao \"{organizationName}\" e comece a colaborar",
+  "membersStepDescription": "Adicione membros da equipe ao \"{{organizationName}}\" e comece a colaborar",
-  "memberPlaceholder": "Membro da equipe {index} - Digite o endereço de email",
+  "memberPlaceholder": "Membro da equipe {{index}} - Digite o endereço de email",
   "validEmailAddress": "Endereço de email válido",
-  "addAnotherTeamMember": "Adicionar outro membro da equipe ({current}/{max})",
+  "addAnotherTeamMember": "Adicionar outro membro da equipe ({{current}}/{{max}})",
   "canInviteLater": "Você sempre pode convidar membros da equipe mais tarde",
   "skipStepDescription": "Não tem endereços de email prontos? Sem problema! Você pode pular esta etapa e convidar membros da equipe do seu painel de projeto mais tarde.",
 
@@ -120,9 +120,9 @@
   "templateStartupDesc": "Desenvolvimento MVP, financiamento, crescimento",
 
   "tasksStepTitle": "Adicione suas primeiras tarefas",
-  "tasksStepDescription": "Divida \"{projectName}\" em tarefas acionáveis para começar",
+  "tasksStepDescription": "Divida \"{{projectName}}\" em tarefas acionáveis para começar",
-  "taskPlaceholder": "Tarefa {index} - ex., O que precisa ser feito?",
+  "taskPlaceholder": "Tarefa {{index}} - ex., O que precisa ser feito?",
-  "addAnotherTask": "Adicionar outra tarefa ({current}/{max})",
+  "addAnotherTask": "Adicionar outra tarefa ({{current}}/{{max}})",
 
   "surveyStepTitle": "Conte-nos sobre você",
   "surveyStepLabel": "Ajude-nos a personalizar sua experiência no Worklenz respondendo algumas perguntas.",
@@ -160,5 +160,53 @@
   "howHeardAboutLinkedin": "LinkedIn",
   "howHeardAboutFriendColleague": "Um amigo ou colega",
   "howHeardAboutBlogArticle": "Um blog ou artigo",
-  "howHeardAboutOther": "Outro"
+  "howHeardAboutOther": "Outro",
+  
+  "aboutYouStepTitle": "Conte-nos sobre você",
+  "aboutYouStepDescription": "Ajude-nos a personalizar sua experiência",
+  "yourNeedsStepTitle": "Quais são suas principais necessidades?",
+  "yourNeedsStepDescription": "Selecione todas que se aplicam para nos ajudar a configurar seu espaço de trabalho",
+  "selected": "selecionado",
+  "previousToolsLabel": "Que ferramentas você usou antes? (Opcional)",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX, Gráficos, Criativo",
+    "developer": "Frontend, Backend, Full-stack", 
+    "projectManager": "Planejamento, Coordenação",
+    "marketing": "Conteúdo, Mídias Sociais, Crescimento",
+    "sales": "Desenvolvimento de Negócios, Relacionamento com Clientes",
+    "operations": "Administração, RH, Finanças"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["Projeto Cliente", "Atualização Portfolio", "Marca Pessoal"],
+    "startup": ["Desenvolvimento MVP", "Lançamento Produto", "Pesquisa Mercado"],
+    "agency": ["Campanha Cliente", "Estratégia Marca", "Redesign Website"],
+    "enterprise": ["Migração Sistema", "Otimização Processos", "Treinamento Equipe"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "Organizar e rastrear tarefas",
+    "teamCollaboration": "Trabalhar juntos perfeitamente",
+    "resourcePlanning": "Gerenciar tempo e recursos", 
+    "clientCommunication": "Manter-se conectado com clientes",
+    "timeTracking": "Monitorar horas do projeto",
+    "other": "Algo mais"
+  }
 }

worklenz-frontend/public/locales/zh/account-setup.json

@@ -50,10 +50,10 @@
   "maxTasks": "（您最多可以创建 5 个任务）",
 
   "membersStepTitle": "邀请您的团队",
-  "membersStepDescription": "将团队成员添加到 \"{organizationName}\" 并开始协作",
+  "membersStepDescription": "将团队成员添加到 \"{{organizationName}}\" 并开始协作",
-  "memberPlaceholder": "团队成员 {index} - 输入电子邮件地址",
+  "memberPlaceholder": "团队成员 {{index}} - 输入电子邮件地址",
   "validEmailAddress": "有效的电子邮件地址",
-  "addAnotherTeamMember": "添加另一个团队成员 ({current}/{max})",
+  "addAnotherTeamMember": "添加另一个团队成员 ({{current}}/{{max}})",
   "canInviteLater": "您可以稍后邀请团队成员",
   "skipStepDescription": "没有准备好电子邮件地址？没关系！您可以跳过此步骤，稍后从项目面板邀请团队成员。",
 
@@ -118,9 +118,9 @@
   "templateStartupDesc": "MVP 开发、融资、增长",
 
   "tasksStepTitle": "添加您的第一个任务",
-  "tasksStepDescription": "将 \"{projectName}\" 拆分为可执行任务以开始",
+  "tasksStepDescription": "将 \"{{projectName}}\" 拆分为可执行任务以开始",
-  "taskPlaceholder": "任务 {index} - 例如：需要做什么？",
+  "taskPlaceholder": "任务 {{index}} - 例如：需要做什么？",
-  "addAnotherTask": "添加另一个任务 ({current}/{max})",
+  "addAnotherTask": "添加另一个任务 ({{current}}/{{max}})",
 
   "surveyStepTitle": "告诉我们关于您的信息",
   "surveyStepLabel": "通过回答几个问题帮助我们个性化您的 Worklenz 体验。",
@@ -158,5 +158,53 @@
   "howHeardAboutLinkedin": "LinkedIn",
   "howHeardAboutFriendColleague": "朋友或同事",
   "howHeardAboutBlogArticle": "博客或文章",
-  "howHeardAboutOther": "其他"
+  "howHeardAboutOther": "其他",
+  
+  "aboutYouStepTitle": "告诉我们关于您的信息",
+  "aboutYouStepDescription": "帮助我们个性化您的体验",
+  "yourNeedsStepTitle": "您的主要需求是什么？",
+  "yourNeedsStepDescription": "选择所有适用的选项，帮助我们设置您的工作空间",
+  "selected": "已选择",
+  "previousToolsLabel": "您之前使用过哪些工具？（可选）",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX、图形、创意",
+    "developer": "前端、后端、全栈", 
+    "projectManager": "规划、协调",
+    "marketing": "内容、社交媒体、增长",
+    "sales": "业务发展、客户关系",
+    "operations": "行政、人力资源、财务"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["客户项目", "作品集更新", "个人品牌"],
+    "startup": ["MVP开发", "产品发布", "市场调研"],
+    "agency": ["客户活动", "品牌策略", "网站重设计"],
+    "enterprise": ["系统迁移", "流程优化", "团队培训"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "组织和跟踪任务",
+    "teamCollaboration": "无缝协作",
+    "resourcePlanning": "管理时间和资源", 
+    "clientCommunication": "与客户保持联系",
+    "timeTracking": "监控项目时间",
+    "other": "其他"
+  }
 }

worklenz-frontend/src/components/account-setup/admin-center-common.css

@@ -1,19 +0,0 @@
-@media (max-width: 1000px) {
-  .step-content,
-  .step-form,
-  .create-first-task-form,
-  .setup-action-buttons,
-  .invite-members-form {
-    width: 400px !important;
-  }
-}
-
-@media (max-width: 500px) {
-  .step-content,
-  .step-form,
-  .create-first-task-form,
-  .setup-action-buttons,
-  .invite-members-form {
-    width: 200px !important;
-  }
-}

worklenz-frontend/src/components/account-setup/members-step.tsx

@@ -22,29 +22,19 @@ interface MembersStepProps {
   token?: any;
 }
 
-// Common email suggestions based on organization
 const getEmailSuggestions = (orgName?: string) => {
   if (!orgName) return [];
-  
   const cleanOrgName = orgName.toLowerCase().replace(/[^a-z0-9]/g, '');
-  const suggestions = [
+  return [`info@${cleanOrgName}.com`, `team@${cleanOrgName}.com`, `hello@${cleanOrgName}.com`, `contact@${cleanOrgName}.com`];
-    `info@${cleanOrgName}.com`,
-    `team@${cleanOrgName}.com`,
-    `hello@${cleanOrgName}.com`,
-    `contact@${cleanOrgName}.com`
-  ];
-  
-  return suggestions;
 };
 
-// Role suggestions for team members
+const getRoleSuggestions = (t: any) => [
-const roleSuggestions = [
+  { role: 'Designer', icon: '🎨', description: t('roleSuggestions.designer') },
-  { role: 'Designer', icon: '🎨', description: 'UI/UX, Graphics, Creative' },
+  { role: 'Developer', icon: '💻', description: t('roleSuggestions.developer') },
-  { role: 'Developer', icon: '💻', description: 'Frontend, Backend, Full-stack' },
+  { role: 'Project Manager', icon: '📊', description: t('roleSuggestions.projectManager') },
-  { role: 'Project Manager', icon: '📊', description: 'Planning, Coordination' },
+  { role: 'Marketing', icon: '📢', description: t('roleSuggestions.marketing') },
-  { role: 'Marketing', icon: '📢', description: 'Content, Social Media, Growth' },
+  { role: 'Sales', icon: '💼', description: t('roleSuggestions.sales') },
-  { role: 'Sales', icon: '💼', description: 'Business Development, Client Relations' },
+  { role: 'Operations', icon: '⚙️', description: t('roleSuggestions.operations') }
-  { role: 'Operations', icon: '⚙️', description: 'Admin, HR, Finance' }
 ];
 
 const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token }) => {
@@ -63,30 +53,18 @@ const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token })
 
   const addEmail = () => {
     if (teamMembers.length >= 5) return;
-
     const newId = teamMembers.length > 0 ? Math.max(...teamMembers.map(t => t.id)) + 1 : 0;
     dispatch(setTeamMembers([...teamMembers, { id: newId, value: '' }]));
-    setTimeout(() => {
+    setTimeout(() => inputRefs.current[teamMembers.length]?.focus(), 100);
-      const newIndex = teamMembers.length;
-      inputRefs.current[newIndex]?.focus();
-    }, 100);
   };
 
   const removeEmail = (id: number) => {
-    if (teamMembers.length > 1) {
+    if (teamMembers.length > 1) dispatch(setTeamMembers(teamMembers.filter(teamMember => teamMember.id !== id)));
-      dispatch(setTeamMembers(teamMembers.filter(teamMember => teamMember.id !== id)));
-    }
   };
 
   const updateEmail = (id: number, value: string) => {
     const sanitizedValue = sanitizeInput(value);
-    dispatch(
+    dispatch(setTeamMembers(teamMembers.map(teamMember => teamMember.id === id ? { ...teamMember, value: sanitizedValue } : teamMember)));
-      setTeamMembers(
-        teamMembers.map(teamMember =>
-          teamMember.id === id ? { ...teamMember, value: sanitizedValue } : teamMember
-        )
-      )
-    );
   };
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
@@ -94,11 +72,8 @@ const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token })
       const input = e.currentTarget as HTMLInputElement;
       if (input.value.trim() && validateEmail(input.value.trim())) {
         e.preventDefault();
-        if (index === teamMembers.length - 1 && teamMembers.length < 5) {
+        if (index === teamMembers.length - 1 && teamMembers.length < 5) addEmail();
-          addEmail();
+        else if (index < teamMembers.length - 1) inputRefs.current[index + 1]?.focus();
-        } else if (index < teamMembers.length - 1) {
-          inputRefs.current[index + 1]?.focus();
-        }
       }
     }
   };
@@ -115,32 +90,27 @@ const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token })
   };
 
   useEffect(() => {
-    setTimeout(() => {
+    setTimeout(() => inputRefs.current[0]?.focus(), 200);
-      inputRefs.current[0]?.focus();
-    }, 200);
   }, []);
 
   const getEmailStatus = (email: string, memberId: number) => {
     if (!email.trim()) return 'empty';
     if (!validatedEmails.has(memberId)) return 'empty';
-    if (validateEmail(email)) return 'valid';
+    return validateEmail(email) ? 'valid' : 'invalid';
-    return 'invalid';
   };
 
   const handleBlur = (memberId: number, email: string) => {
     setFocusedIndex(null);
-    if (email.trim()) {
+    if (email.trim()) setValidatedEmails(prev => new Set(prev).add(memberId));
-      setValidatedEmails(prev => new Set(prev).add(memberId));
-    }
   };
 
   const languages = [
-    { key: 'en', label: 'English', flag: '🇺🇸' },
+    { key: 'en', label: t('languages.en'), flag: '🇺🇸' },
-    { key: 'es', label: 'Español', flag: '🇪🇸' },
+    { key: 'es', label: t('languages.es'), flag: '🇪🇸' },
-    { key: 'pt', label: 'Português', flag: '🇵🇹' },
+    { key: 'pt', label: t('languages.pt'), flag: '🇵🇹' },
-    { key: 'de', label: 'Deutsch', flag: '🇩🇪' },
+    { key: 'de', label: t('languages.de'), flag: '🇩🇪' },
-    { key: 'alb', label: 'Shqip', flag: '🇦🇱' },
+    { key: 'alb', label: t('languages.alb'), flag: '🇦🇱' },
-    { key: 'zh', label: '简体中文', flag: '🇨🇳' }
+    { key: 'zh', label: t('languages.zh'), flag: '🇨🇳' }
   ];
 
   const handleLanguageChange = (languageKey: string) => {
@@ -148,18 +118,8 @@ const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token })
     i18n.changeLanguage(languageKey);
   };
 
-  const languageMenuItems: MenuProps['items'] = languages.map(lang => ({
-    key: lang.key,
-    label: (
-      <div className="flex items-center space-x-2">
-        <span>{lang.flag}</span>
-        <span>{lang.label}</span>
-      </div>
-    ),
-    onClick: () => handleLanguageChange(lang.key)
-  }));
-
   const currentLanguage = languages.find(lang => lang.key === language) || languages[0];
+  const languageMenuItems: MenuProps['items'] = languages.map(lang => ({ key: lang.key, label: <div className="flex items-center space-x-2"><span>{lang.flag}</span><span>{lang.label}</span></div>, onClick: () => handleLanguageChange(lang.key) }));
 
   return (
     <div className="w-full members-step">
@@ -284,26 +244,6 @@ const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token })
           }}
         />
       </div>
-
-      {/* Language Switcher */}
-      <div className="flex justify-center mt-8">
-        <Dropdown
-          menu={{ items: languageMenuItems }}
-          placement="topCenter"
-          trigger={['click']}
-        >
-          <Button
-            type="text"
-            size="small"
-            icon={<GlobalOutlined />}
-            className="flex items-center space-x-2"
-            style={{ color: token?.colorTextTertiary }}
-          >
-            <span>{currentLanguage.flag}</span>
-            <span>{currentLanguage.label}</span>
-          </Button>
-        </Dropdown>
-      </div>
     </div>
   );
 };

worklenz-frontend/src/components/account-setup/organization-step.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Form, Input, InputRef, Typography, Card, Row, Col, Tag, Tooltip, Button } from '@/shared/antd-imports';
+import { Form, Input, InputRef, Typography, Card, Tooltip } from '@/shared/antd-imports';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { setOrganizationName } from '@/features/account-setup/account-setup.slice';
 import { RootState } from '@/app/store';
 import { sanitizeInput } from '@/utils/sanitizeInput';
-import './admin-center-common.css';
 
 const { Title, Paragraph, Text } = Typography;
 
@@ -18,15 +17,6 @@ interface Props {
   token?: any;
 }
 
-// Organization name suggestions by type
-const organizationSuggestions = [
-  { category: 'Tech Companies', examples: ['TechCorp', 'DevStudio', 'CodeCraft', 'PixelForge'] },
-  { category: 'Creative Agencies', examples: ['Creative Hub', 'Design Studio', 'Brand Works', 'Visual Arts'] },
-  { category: 'Consulting', examples: ['Strategy Group', 'Business Solutions', 'Expert Advisors', 'Growth Partners'] },
-  { category: 'Startups', examples: ['Innovation Labs', 'Future Works', 'Venture Co', 'Next Gen'] },
-];
-
-
 export const OrganizationStep: React.FC<Props> = ({
   onEnter,
   styles,
@@ -39,8 +29,6 @@ export const OrganizationStep: React.FC<Props> = ({
   const dispatch = useDispatch();
   const { organizationName } = useSelector((state: RootState) => state.accountSetupReducer);
   const inputRef = useRef<InputRef>(null);
-  const [showSuggestions, setShowSuggestions] = useState(false);
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
   // Autofill organization name if not already set
   useEffect(() => {
@@ -60,16 +48,6 @@ export const OrganizationStep: React.FC<Props> = ({
     dispatch(setOrganizationName(sanitizedValue));
   };
 
-  const handleSuggestionClick = (suggestion: string) => {
-    dispatch(setOrganizationName(suggestion));
-    inputRef.current?.focus();
-    setShowSuggestions(false);
-  };
-
-  const toggleSuggestions = () => {
-    setShowSuggestions(!showSuggestions);
-  };
-
   return (
     <div className="w-full organization-step">
       {/* Header */}
@@ -110,43 +88,15 @@ export const OrganizationStep: React.FC<Props> = ({
             }
           >
             <Input
-              size="large"
               placeholder={organizationNamePlaceholder || t('organizationStepPlaceholder')}
               value={organizationName}
               onChange={handleOrgNameChange}
               onPressEnter={onPressEnter}
               ref={inputRef}
               className="text-base"
-              style={{
-                backgroundColor: token?.colorBgContainer,
-                borderColor: token?.colorBorder,
-                color: token?.colorText
-              }}
             />
           </Form.Item>
 
-          {/* Quick Actions */}
-          <div className="flex flex-wrap gap-2 mb-4">
-            <Button 
-              type="link" 
-              size="small"
-              onClick={toggleSuggestions}
-              style={{ color: token?.colorPrimary }}
-            >
-              💡 {t('organizationStepNeedIdeas')}
-            </Button>
-            {organizationNameInitialValue && organizationNameInitialValue !== organizationName && (
-              <Button 
-                type="link" 
-                size="small"
-                onClick={() => dispatch(setOrganizationName(organizationNameInitialValue))}
-                style={{ color: token?.colorTextSecondary }}
-              >
-                🔄 {t('organizationStepUseDetected')} "{organizationNameInitialValue}"
-              </Button>
-            )}
-          </div>
-
           {/* Character Count and Validation */}
           <div className="flex justify-between items-center text-sm">
             <Text type="secondary">
@@ -165,62 +115,6 @@ export const OrganizationStep: React.FC<Props> = ({
         </Card>
       </div>
 
-
-      {/* Suggestions Panel */}
-      {showSuggestions && (
-        <div className="mb-6">
-          <Card 
-            title={
-              <div className="flex items-center space-x-2">
-                <span>🎯</span>
-                <span>{t('organizationStepSuggestionsTitle')}</span>
-              </div>
-            }
-            style={{ backgroundColor: token?.colorBgContainer }}
-          >
-            <div className="space-y-4">
-              {organizationSuggestions.map((category, categoryIndex) => (
-                <div key={categoryIndex}>
-                  <div className="mb-2">
-                    <Tag 
-                      color="blue" 
-                      className={`cursor-pointer ${selectedCategory === category.category ? 'opacity-100' : 'opacity-70'}`}
-                      onClick={() => setSelectedCategory(
-                        selectedCategory === category.category ? null : category.category
-                      )}
-                    >
-                      {t(`organizationStepCategory${categoryIndex + 1}`, category.category)}
-                    </Tag>
-                  </div>
-                  <div className="flex flex-wrap gap-2">
-                    {category.examples.map((example, exampleIndex) => (
-                      <button
-                        key={exampleIndex}
-                        onClick={() => handleSuggestionClick(example)}
-                        className="px-3 py-1 rounded-full text-sm border transition-all duration-200 hover:scale-105 hover:shadow-sm organization-suggestion-button"
-                        style={{
-                          backgroundColor: token?.colorBgContainer,
-                          borderColor: token?.colorBorder,
-                          color: token?.colorTextSecondary
-                        }}
-                      >
-                        {example}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              ))}
-            </div>
-            
-            <div className="mt-4 pt-4 border-t" style={{ borderColor: token?.colorBorder }}>
-              <Text type="secondary" className="text-sm">
-                💡 {t('organizationStepSuggestionsNote')}
-              </Text>
-            </div>
-          </Card>
-        </div>
-      )}
-
       {/* Footer Note */}
       <div 
         className="text-center p-4 rounded-lg"

worklenz-frontend/src/components/account-setup/project-step.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import { Button, Drawer, Form, Input, InputRef, Typography, Card, Row, Col, Tag, Tooltip } from '@/shared/antd-imports';
+import { Button, Drawer, Form, Input, InputRef, Typography, Card, Row, Col, Tag, Tooltip, Spin, Alert } from '@/shared/antd-imports';
 import TemplateDrawer from '../common/template-drawer/template-drawer';
 
 import { RootState } from '@/app/store';
@@ -13,7 +13,7 @@ import { sanitizeInput } from '@/utils/sanitizeInput';
 import { projectTemplatesApiService } from '@/api/project-templates/project-templates.api.service';
 import logger from '@/utils/errorLogger';
 
-import { IAccountSetupRequest } from '@/types/project-templates/project-templates.types';
+import { IAccountSetupRequest, IWorklenzTemplate, IProjectTemplate } from '@/types/project-templates/project-templates.types';
 
 import { evt_account_setup_template_complete } from '@/shared/worklenz-analytics-events';
 import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
@@ -33,39 +33,21 @@ interface Props {
   token?: any;
 }
 
-// Popular template suggestions
+// Default icon mapping for templates (fallback if no image_url)
-const templateSuggestions = [
+const getTemplateIcon = (name?: string) => {
-  { 
+  if (!name) return '📁';
-    id: 'software', 
+  const lowercaseName = name.toLowerCase();
-    title: 'Software Development', 
+  if (lowercaseName.includes('software') || lowercaseName.includes('development')) return '💻';
-    icon: '💻', 
+  if (lowercaseName.includes('marketing') || lowercaseName.includes('campaign')) return '📢';
-    description: 'Agile sprints, bug tracking, releases',
+  if (lowercaseName.includes('construction') || lowercaseName.includes('building')) return '🏗️';
-    tags: ['Agile', 'Scrum', 'Development']
+  if (lowercaseName.includes('startup') || lowercaseName.includes('launch')) return '🚀';
-  },
+  if (lowercaseName.includes('design') || lowercaseName.includes('creative')) return '🎨';
-  { 
+  if (lowercaseName.includes('education') || lowercaseName.includes('learning')) return '📚';
-    id: 'marketing', 
+  if (lowercaseName.includes('event') || lowercaseName.includes('planning')) return '📅';
-    title: 'Marketing Campaign', 
+  if (lowercaseName.includes('retail') || lowercaseName.includes('sales')) return '🛍️';
-    icon: '📢', 
+  return '📁';
-    description: 'Campaign planning, content calendar',
+};
-    tags: ['Content', 'Social Media', 'Analytics']
-  },
-  { 
-    id: 'construction', 
-    title: 'Construction Project', 
-    icon: '🏗️', 
-    description: 'Phases, permits, contractors',
-    tags: ['Planning', 'Execution', 'Inspection']
-  },
-  { 
-    id: 'startup', 
-    title: 'Startup Launch', 
-    icon: '🚀', 
-    description: 'MVP development, funding, growth',
-    tags: ['MVP', 'Funding', 'Launch']
-  }
-];
 
-// Project name suggestions based on organization type
 const getProjectSuggestions = (orgType?: string) => {
   const suggestions: Record<string, string[]> = {
     'freelancer': ['Client Website', 'Logo Design', 'Content Writing', 'App Development'],
@@ -75,7 +57,6 @@ const getProjectSuggestions = (orgType?: string) => {
     'enterprise': ['Digital Transformation', 'System Migration', 'Annual Planning', 'Department Initiative'],
     'other': ['New Project', 'Team Initiative', 'Q1 Goals', 'Special Project']
   };
-  
   return suggestions[orgType || 'other'] || suggestions['other'];
 };
 
@@ -89,8 +70,46 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
 
   useEffect(() => {
     setTimeout(() => inputRef.current?.focus(), 200);
+    fetchTemplates();
   }, []);
 
+  const fetchTemplates = async () => {
+    try {
+      setLoadingTemplates(true);
+      setTemplateError(null);
+      
+      // Fetch list of available templates
+      const templatesResponse = await projectTemplatesApiService.getWorklenzTemplates();
+      
+      if (templatesResponse.done && templatesResponse.body) {
+        // Fetch detailed information for first 4 templates for preview
+        const templateDetails = await Promise.all(
+          templatesResponse.body.slice(0, 4).map(async (template) => {
+            if (template.id) {
+              try {
+                const detailResponse = await projectTemplatesApiService.getByTemplateId(template.id);
+                return detailResponse.done ? detailResponse.body : null;
+              } catch (error) {
+                logger.error(`Failed to fetch template details for ${template.id}`, error);
+                return null;
+              }
+            }
+            return null;
+          })
+        );
+        
+        // Filter out null results and set templates
+        const validTemplates = templateDetails.filter((template): template is IProjectTemplate => template !== null);
+        setTemplates(validTemplates);
+      }
+    } catch (error) {
+      logger.error('Failed to fetch templates', error);
+      setTemplateError('Failed to load templates');
+    } finally {
+      setLoadingTemplates(false);
+    }
+  };
+
 
   const { projectName, templateId, organizationName, surveyData } = useSelector(
     (state: RootState) => state.accountSetupReducer
@@ -98,6 +117,9 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
   const [open, setOpen] = useState(false);
   const [creatingFromTemplate, setCreatingFromTemplate] = useState(false);
   const [selectedTemplate, setSelectedTemplate] = useState<string | null>(templateId || null);
+  const [templates, setTemplates] = useState<IProjectTemplate[]>([]);
+  const [loadingTemplates, setLoadingTemplates] = useState(true);
+  const [templateError, setTemplateError] = useState<string | null>(null);
 
   const projectSuggestions = getProjectSuggestions(surveyData.organization_type);
 
@@ -125,8 +147,6 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
       if (res.done && res.body.id) {
         toggleTemplateSelector(false);
         trackMixpanelEvent(evt_account_setup_template_complete);
-        
-        // Refresh user session to update setup_completed status
         try {
           const authResponse = await dispatch(verifyAuthentication()).unwrap() as IAuthorizeResponse;
           if (authResponse?.authenticated && authResponse?.user) {
@@ -136,7 +156,6 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
         } catch (error) {
           logger.error('Failed to refresh user session after template setup completion', error);
         }
-        
         navigate(`/worklenz/projects/${res.body.id}?tab=tasks-list&pinned_tab=tasks-list`);
       }
     } catch (error) {
@@ -145,8 +164,7 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
   };
 
   const onPressEnter = () => {
-    if (!projectName.trim()) return;
+    if (projectName.trim()) onEnter();
-    onEnter();
   };
 
   const handleProjectNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -155,7 +173,6 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
   };
 
   const handleProjectNameFocus = () => {
-    // Clear template selection when user focuses on project name input
     if (templateId) {
       dispatch(setTemplateId(null));
       setSelectedTemplate(null);
@@ -172,10 +189,10 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
       {/* Header */}
       <div className="text-center mb-8">
         <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
-          Let's create your first project
+          {t('projectStepHeader')}
         </Title>
         <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
-          Start from scratch or use a template to get going faster
+          {t('projectStepSubheader')}
         </Paragraph>
       </div>
 
@@ -193,11 +210,11 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
           <div className="mb-4">
             <div className="flex items-center justify-between">
               <Text strong className="text-lg" style={{ color: token?.colorText }}>
-                Start from scratch
+                {t('startFromScratch')}
               </Text>
               {templateId && (
                 <Text type="secondary" className="text-sm">
-                  Template selected below
+                  {t('templateSelected')}
                 </Text>
               )}
             </div>
@@ -216,31 +233,15 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
               onFocus={handleProjectNameFocus}
               ref={inputRef}
               className="text-base"
-              style={{
+              style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorText }}
-                backgroundColor: token?.colorBgContainer,
-                borderColor: token?.colorBorder,
-                color: token?.colorText
-              }}
             />
           </Form.Item>
 
-          {/* Quick suggestions */}
           <div>
-            <Text type="secondary" className="text-sm">
+            <Text type="secondary" className="text-sm">{t('quickSuggestions')}</Text>
-              Quick suggestions:
-            </Text>
             <div className="mt-2 flex flex-wrap gap-2">
               {projectSuggestions.map((suggestion, index) => (
-                <button
+                <button key={index} onClick={() => handleSuggestionClick(suggestion)} className="px-3 py-1 rounded-full text-sm border project-suggestion-button" style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorTextSecondary }}>
-                  key={index}
-                  onClick={() => handleSuggestionClick(suggestion)}
-                  className="px-3 py-1 rounded-full text-sm border project-suggestion-button"
-                  style={{
-                    backgroundColor: token?.colorBgContainer,
-                    borderColor: token?.colorBorder,
-                    color: token?.colorTextSecondary
-                  }}
-                >
                   {suggestion}
                 </button>
               ))}
@@ -249,103 +250,110 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
         </Card>
       </div>
 
-      {/* OR Divider */}
       <div className="relative my-8">
-        <div 
+        <div className="absolute inset-0 flex items-center" style={{ color: token?.colorTextQuaternary }}>
-          className="absolute inset-0 flex items-center"
-          style={{ color: token?.colorTextQuaternary }}
-        >
           <div className="w-full border-t" style={{ borderColor: token?.colorBorder }}></div>
         </div>
         <div className="relative flex justify-center">
-          <span 
+          <span className="px-4 text-sm font-medium" style={{ backgroundColor: token?.colorBgLayout, color: token?.colorTextSecondary }}>{t('orText')}</span>
-            className="px-4 text-sm font-medium"
-            style={{ 
-              backgroundColor: token?.colorBgLayout,
-              color: token?.colorTextSecondary 
-            }}
-          >
-            OR
-          </span>
         </div>
       </div>
 
-      {/* Template Section */}
       <div>
         <div className="text-center mb-6">
-          <Title level={4} className="mb-2" style={{ color: token?.colorText }}>
+          <Title level={4} className="mb-2" style={{ color: token?.colorText }}>{t('startWithTemplate')}</Title>
-            Start with a template
-          </Title>
           <Text type="secondary">
-            {projectName?.trim() 
+            {t('templateHeadStart')}
-              ? "Clear project name above to select a template" 
-              : "Get a head start with pre-built project structures"
-            }
           </Text>
         </div>
 
         {/* Template Preview Cards */}
-        <Row gutter={[16, 16]} className="mb-6">
+        <div className="mb-6">
-          {templateSuggestions.map((template) => (
+          {loadingTemplates ? (
-            <Col xs={24} sm={12} key={template.id}>
+            <div className="text-center py-12">
-              <Card
+              <Spin size="large" />
-                hoverable={!projectName?.trim()}
+              <div className="mt-4">
-                className={`h-full template-preview-card ${
+                <Text type="secondary">Loading templates...</Text>
-                  selectedTemplate === template.id ? 'selected border-2' : ''
+              </div>
-                } ${projectName?.trim() ? 'opacity-50 cursor-not-allowed' : ''}`}
+            </div>
-                style={{ 
+          ) : templateError ? (
-                  borderColor: selectedTemplate === template.id ? token?.colorPrimary : token?.colorBorder,
+            <Alert
-                  backgroundColor: token?.colorBgContainer
+              message="Failed to load templates"
-                }}
+              description={templateError}
-                onClick={() => {
+              type="error"
-                  if (projectName?.trim()) return; // Don't allow selection if project name is entered
+              showIcon
-                  setSelectedTemplate(template.id);
+              action={
-                  dispatch(setTemplateId(template.id));
+                <Button size="small" onClick={fetchTemplates}>
-                }}
+                  Retry
-              >
+                </Button>
-                <div className="flex items-start space-x-3">
+              }
-                  <span className="text-3xl">{template.icon}</span>
+            />
-                  <div className="flex-1">
+          ) : (
-                    <Text strong className="block mb-1" style={{ color: token?.colorText }}>
+            <Row gutter={[16, 16]}>
-                      {template.title}
+              {templates.map((template) => (
-                    </Text>
+                <Col xs={24} sm={12} key={template.id}>
-                    <Text type="secondary" className="text-sm block mb-2">
+                  <Card
-                      {template.description}
+                    hoverable
-                    </Text>
+                    className={`h-full template-preview-card ${
-                    <div className="flex flex-wrap gap-1">
+                      selectedTemplate === template.id ? 'selected border-2' : ''
-                      {template.tags.map((tag, index) => (
+                    }`}
-                        <Tag 
+                    style={{ 
-                          key={index} 
+                      borderColor: selectedTemplate === template.id ? token?.colorPrimary : token?.colorBorder,
-                          color="blue"
+                      backgroundColor: token?.colorBgContainer
-                          className="text-xs"
+                    }}
-                        >
+                    onClick={() => {
-                          {tag}
+                      setSelectedTemplate(template.id || null);
-                        </Tag>
+                      dispatch(setTemplateId(template.id || ''));
-                      ))}
+                    }}
+                  >
+                    <div className="flex items-start space-x-3">
+                      {template.image_url ? (
+                        <img 
+                          src={template.image_url} 
+                          alt={template.name} 
+                          className="w-12 h-12 object-cover rounded"
+                          onError={(e) => {
+                            // Fallback to icon if image fails to load
+                            e.currentTarget.style.display = 'none';
+                            if (e.currentTarget.nextSibling) {
+                              (e.currentTarget.nextSibling as HTMLElement).style.display = 'block';
+                            }
+                          }}
+                        />
+                      ) : null}
+                      <span 
+                        className="text-3xl" 
+                        style={{ display: template.image_url ? 'none' : 'block' }}
+                      >
+                        {getTemplateIcon(template.name)}
+                      </span>
+                      <div className="flex-1">
+                        <Text strong className="block mb-2" style={{ color: token?.colorText }}>
+                          {template.name || 'Untitled Template'}
+                        </Text>
+                        <div className="flex flex-wrap gap-1">
+                          {template.phases?.slice(0, 3).map((phase, index) => (
+                            <Tag key={index} color={phase.color_code || 'blue'} className="text-xs">
+                              {phase.name}
+                            </Tag>
+                          ))}
+                          {(template.phases?.length || 0) > 3 && (
+                            <Tag className="text-xs">+{(template.phases?.length || 0) - 3} more</Tag>
+                          )}
+                        </div>
+                      </div>
                     </div>
-                  </div>
+                  </Card>
-                </div>
+                </Col>
-              </Card>
+              ))}
-            </Col>
+            </Row>
-          ))}
+          )}
-        </Row>
+        </div>
 
-        {/* Browse All Templates Button */}
         <div className="text-center">
-          <Button 
+          <Button type="primary" size="large" icon={<span className="mr-2">🎨</span>} onClick={() => toggleTemplateSelector(true)} className="min-w-[200px]">{t('browseAllTemplates')}</Button>
-            type="primary" 
-            size="large"
-            icon={<span className="mr-2">🎨</span>}
-            onClick={() => toggleTemplateSelector(true)}
-            className="min-w-[200px]"
-            disabled={!!projectName?.trim()}
-          >
-            Browse All Templates
-          </Button>
           <div className="mt-2">
-            <Text type="secondary" className="text-sm">
+            <Text type="secondary" className="text-sm">{t('templatesAvailable')}</Text>
-              15+ industry-specific templates available
-            </Text>
           </div>
         </div>
       </div>
@@ -359,7 +367,7 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
                 {t('templateDrawerTitle')}
               </Title>
               <Text type="secondary">
-                Choose a template that matches your project type
+                {t('chooseTemplate')}
               </Text>
             </div>
           }
@@ -377,7 +385,7 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
                 loading={creatingFromTemplate}
                 disabled={!templateId}
               >
-                {t('create')} Project
+{t('createProject')}
               </Button>
             </div>
           }

worklenz-frontend/src/components/account-setup/survey-step.tsx

@@ -57,42 +57,38 @@ const AboutYouPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, ha
     <div className="w-full">
       <div className="text-center mb-8">
         <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
-          Tell us about yourself
+          {t('aboutYouStepTitle')}
         </Title>
         <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
-          Help us personalize your experience
+          {t('aboutYouStepDescription')}
         </Paragraph>
       </div>
 
       {/* Organization Type */}
       <Form.Item className="mb-8">
         <label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
-          What best describes your organization?
+          {t('orgTypeQuestion')}
         </label>
-        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-1">
           {organizationTypeOptions.map((option) => {
             const isSelected = surveyData.organization_type === option.value;
             return (
               <button
                 key={option.value}
                 onClick={() => handleSurveyDataChange('organization_type', option.value)}
-                className={`
+                className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
-                  p-4 rounded-lg border-2 transition-all duration-200 text-left
-                  hover:shadow-md hover:scale-[1.02] active:scale-[0.98]
-                  ${isSelected 
-                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' 
-                    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                  }
-                `}
                 style={{
                   backgroundColor: isSelected ? undefined : token?.colorBgContainer,
                   borderColor: isSelected ? undefined : token?.colorBorder,
                 }}
               >
-                <div className="flex items-center space-x-3">
+                <div className="flex items-center space-x-2">
-                  <span className="text-2xl">{option.icon}</span>
+                  <div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
+                    {isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
+                  </div>
+                  <span className="text-base">{option.icon}</span>
                   <span 
-                    className={`font-medium ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
+                    className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
                     style={{ color: isSelected ? undefined : token?.colorText }}
                   >
                     {option.label}
@@ -107,32 +103,28 @@ const AboutYouPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, ha
       {/* User Role */}
       <Form.Item className="mb-4">
         <label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
-          What's your role?
+          {t('userRoleQuestion')}
         </label>
-        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-1">
           {userRoleOptions.map((option) => {
             const isSelected = surveyData.user_role === option.value;
             return (
               <button
                 key={option.value}
                 onClick={() => handleSurveyDataChange('user_role', option.value)}
-                className={`
+                className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
-                  p-4 rounded-lg border-2 transition-all duration-200 text-left
-                  hover:shadow-md hover:scale-[1.02] active:scale-[0.98]
-                  ${isSelected 
-                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' 
-                    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                  }
-                `}
                 style={{
                   backgroundColor: isSelected ? undefined : token?.colorBgContainer,
                   borderColor: isSelected ? undefined : token?.colorBorder,
                 }}
               >
-                <div className="flex items-center space-x-3">
+                <div className="flex items-center space-x-2">
-                  <span className="text-2xl">{option.icon}</span>
+                  <div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
+                    {isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
+                  </div>
+                  <span className="text-base">{option.icon}</span>
                   <span 
-                    className={`font-medium ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
+                    className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
                     style={{ color: isSelected ? undefined : token?.colorText }}
                   >
                     {option.label}
@@ -160,21 +152,13 @@ const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
     { value: 'other', label: t('mainUseCasesOther'), description: 'Something else' },
   ];
 
-  // Use the passed handler or fall back to regular handler
   const onUseCaseClick = (value: UseCase) => {
     if (handleUseCaseToggle) {
       handleUseCaseToggle(value);
     } else {
       const currentUseCases = surveyData.main_use_cases || [];
       const isSelected = currentUseCases.includes(value);
-      
+      const newUseCases = isSelected ? currentUseCases.filter(useCase => useCase !== value) : [...currentUseCases, value];
-      let newUseCases;
-      if (isSelected) {
-        newUseCases = currentUseCases.filter(useCase => useCase !== value);
-      } else {
-        newUseCases = [...currentUseCases, value];
-      }
-      
       handleSurveyDataChange('main_use_cases', newUseCases);
     }
   };
@@ -183,60 +167,43 @@ const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
     <div className="w-full">
       <div className="text-center mb-8">
         <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
-          What are your main needs?
+          {t('yourNeedsStepTitle')}
         </Title>
         <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
-          Select all that apply to help us set up your workspace
+          {t('yourNeedsStepDescription')}
         </Paragraph>
       </div>
 
       {/* Main Use Cases */}
       <Form.Item className="mb-8">
         <label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
-          How will you primarily use Worklenz?
+          {t('yourNeedsQuestion')}
         </label>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-1">
           {useCaseOptions.map((option) => {
             const isSelected = (surveyData.main_use_cases || []).includes(option.value);
             return (
               <button
                 key={option.value}
                 onClick={() => onUseCaseClick(option.value)}
-                className={`
+                className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
-                  p-5 rounded-lg border-2 transition-all duration-200 text-left
-                  hover:shadow-md hover:scale-[1.02] active:scale-[0.98]
-                  ${isSelected 
-                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' 
-                    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                  }
-                `}
                 style={{
                   backgroundColor: isSelected ? undefined : token?.colorBgContainer,
                   borderColor: isSelected ? undefined : token?.colorBorder,
                 }}
               >
-                <div className="flex items-start justify-between">
+                <div className="flex items-center space-x-2">
-                  <div className="flex-1">
+                  <div className={`w-3 h-3 rounded border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
-                    <h4 
+                    {isSelected && (
-                      className={`font-semibold text-base mb-1 ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
+                      <svg width="10" height="10" fill="white" viewBox="0 0 20 20">
-                      style={{ color: isSelected ? undefined : token?.colorText }}
-                    >
-                      {option.label}
-                    </h4>
-                    <p 
-                      className="text-sm"
-                      style={{ color: token?.colorTextSecondary }}
-                    >
-                      {option.description}
-                    </p>
-                  </div>
-                  {isSelected && (
-                    <div className="ml-3 text-blue-500">
-                      <svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
                         <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                       </svg>
-                    </div>
+                    )}
-                  )}
+                  </div>
+                  <div className="flex-1">
+                    <span className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} style={{ color: isSelected ? undefined : token?.colorText }}>{option.label}</span>
+                    <span className="text-xs ml-2" style={{ color: token?.colorTextSecondary }}>- {option.description}</span>
+                  </div>
                 </div>
               </button>
             );
@@ -244,7 +211,7 @@ const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
         </div>
         {surveyData.main_use_cases && surveyData.main_use_cases.length > 0 && (
           <p className="mt-3 text-sm" style={{ color: token?.colorTextSecondary }}>
-            {surveyData.main_use_cases.length} selected
+            {surveyData.main_use_cases.length} {t('selected')}
           </p>
         )}
       </Form.Item>
@@ -252,7 +219,7 @@ const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
       {/* Previous Tools */}
       <Form.Item className="mb-4">
         <label className="block font-medium text-base mb-2" style={{ color: token?.colorText }}>
-          What tools have you used before? (Optional)
+          {t('previousToolsLabel')}
         </label>
         <TextArea
           placeholder="e.g., Asana, Trello, Jira, Monday.com, etc."
@@ -260,11 +227,7 @@ const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
           onChange={(e) => handleSurveyDataChange('previous_tools', e.target.value)}
           autoSize={{ minRows: 3, maxRows: 5 }}
           className="text-base"
-          style={{
+          style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorText }}
-            backgroundColor: token?.colorBgContainer,
-            borderColor: token?.colorBorder,
-            color: token?.colorText
-          }}
         />
       </Form.Item>
     </div>
@@ -288,46 +251,37 @@ const DiscoveryPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
     <div className="w-full">
       <div className="text-center mb-8">
         <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
-          One last thing...
+          {t('discoveryTitle')}
         </Title>
         <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
-          Help us understand how you discovered Worklenz
+          {t('discoveryDescription')}
         </Paragraph>
       </div>
 
       {/* How Heard About */}
       <Form.Item className="mb-8">
         <label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
-          How did you hear about us?
+          {t('discoveryQuestion')}
         </label>
-        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-1">
           {howHeardAboutOptions.map((option) => {
             const isSelected = surveyData.how_heard_about === option.value;
             return (
               <button
                 key={option.value}
                 onClick={() => handleSurveyDataChange('how_heard_about', option.value)}
-                className={`
+                className={`p-2 rounded border transition-all duration-200 hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
-                  p-4 rounded-lg border-2 transition-all duration-200
-                  hover:shadow-md hover:scale-[1.02] active:scale-[0.98]
-                  ${isSelected 
-                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' 
-                    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                  }
-                `}
                 style={{
                   backgroundColor: isSelected ? undefined : token?.colorBgContainer,
                   borderColor: isSelected ? undefined : token?.colorBorder,
                 }}
               >
-                <div className="flex flex-col items-center space-y-2">
+                <div className="flex items-center space-x-2">
-                  <span className="text-3xl">{option.icon}</span>
+                  <div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
-                  <span 
+                    {isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
-                    className={`font-medium text-sm ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
+                  </div>
-                    style={{ color: isSelected ? undefined : token?.colorText }}
+                  <span className="text-base">{option.icon}</span>
-                  >
+                  <span className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} style={{ color: isSelected ? undefined : token?.colorText }}>{option.label}</span>
-                    {option.label}
-                  </span>
                 </div>
               </button>
             );
@@ -335,22 +289,10 @@ const DiscoveryPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, h
         </div>
       </Form.Item>
 
-      {/* Success Message */}
+      <div className="mt-12 p-1.5 rounded-lg text-center" style={{ backgroundColor: token?.colorSuccessBg, borderColor: token?.colorSuccessBorder, border: '1px solid' }}>
-      <div 
-        className="mt-12 p-6 rounded-lg text-center"
-        style={{ 
-          backgroundColor: token?.colorSuccessBg,
-          borderColor: token?.colorSuccessBorder,
-          border: '1px solid'
-        }}
-      >
         <div className="text-4xl mb-3">🎉</div>
-        <Title level={4} style={{ color: token?.colorText, marginBottom: 8 }}>
+        <Title level={4} style={{ color: token?.colorText, marginBottom: 8 }}>{t('allSetTitle')}</Title>
-          You're all set!
+        <Paragraph style={{ color: token?.colorTextSecondary, marginBottom: 0 }}>{t('allSetDescription')}</Paragraph>
-        </Title>
-        <Paragraph style={{ color: token?.colorTextSecondary, marginBottom: 0 }}>
-          Let's create your first project and get started with Worklenz
-        </Paragraph>
       </div>
     </div>
   );
@@ -365,15 +307,10 @@ export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
     dispatch(setSurveyData({ [field]: value }));
   };
 
-  // Handle keyboard navigation
   React.useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
-        const isValid = 
+        const isValid = (surveySubStep === 0 && surveyData.organization_type && surveyData.user_role) || (surveySubStep === 1 && surveyData.main_use_cases && surveyData.main_use_cases.length > 0) || (surveySubStep === 2 && surveyData.how_heard_about);
-          (surveySubStep === 0 && surveyData.organization_type && surveyData.user_role) ||
-          (surveySubStep === 1 && surveyData.main_use_cases && surveyData.main_use_cases.length > 0) ||
-          (surveySubStep === 2 && surveyData.how_heard_about);
-        
         if (isValid && surveySubStep < 2) {
           dispatch(setSurveySubStep(surveySubStep + 1));
         } else if (isValid && surveySubStep === 2) {
@@ -381,71 +318,33 @@ export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
         }
       }
     };
-
     window.addEventListener('keypress', handleKeyPress);
     return () => window.removeEventListener('keypress', handleKeyPress);
   }, [surveySubStep, surveyData, dispatch, onEnter]);
 
-  // Handle multi-select for use cases
   const handleUseCaseToggle = (value: UseCase) => {
     const currentUseCases = surveyData.main_use_cases || [];
     const isSelected = currentUseCases.includes(value);
-    
+    const newUseCases = isSelected ? currentUseCases.filter(useCase => useCase !== value) : [...currentUseCases, value];
-    let newUseCases;
-    if (isSelected) {
-      newUseCases = currentUseCases.filter(useCase => useCase !== value);
-    } else {
-      newUseCases = [...currentUseCases, value];
-    }
-    
     handleSurveyDataChange('main_use_cases', newUseCases);
   };
 
   const getSubStepTitle = () => {
     switch (surveySubStep) {
-      case 0:
+      case 0: return t('aboutYouStepName');
-        return 'About You';
+      case 1: return t('yourNeedsStepName');
-      case 1:
+      case 2: return t('discoveryStepName');
-        return 'Your Needs';
+      default: return '';
-      case 2:
-        return 'Discovery';
-      default:
-        return '';
     }
   };
 
-  // Create modified page props with custom handler for use cases
   const surveyPages = [
-    <AboutYouPage 
+    <AboutYouPage key="about-you" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} />,
-      key="about-you"
+    <YourNeedsPage key="your-needs" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} handleUseCaseToggle={handleUseCaseToggle} />,
-      styles={styles} 
+    <DiscoveryPage key="discovery" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} />
-      isDarkMode={isDarkMode} 
-      token={token} 
-      surveyData={surveyData}
-      handleSurveyDataChange={handleSurveyDataChange}
-    />,
-    <YourNeedsPage 
-      key="your-needs"
-      styles={styles} 
-      isDarkMode={isDarkMode} 
-      token={token} 
-      surveyData={surveyData}
-      handleSurveyDataChange={handleSurveyDataChange}
-      handleUseCaseToggle={handleUseCaseToggle}
-    />,
-    <DiscoveryPage 
-      key="discovery"
-      styles={styles} 
-      isDarkMode={isDarkMode} 
-      token={token} 
-      surveyData={surveyData}
-      handleSurveyDataChange={handleSurveyDataChange}
-    />
   ];
 
-  // Check if current step is valid for main Continue button
   React.useEffect(() => {
-    // Reset sub-step when entering survey step
     dispatch(setSurveySubStep(0));
   }, []);
 
@@ -454,19 +353,10 @@ export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
       {/* Progress Indicator */}
       <div className="mb-8">
         <div className="flex items-center justify-between mb-2">
-          <span className="text-sm font-medium" style={{ color: token?.colorTextSecondary }}>
+          <span className="text-sm font-medium" style={{ color: token?.colorTextSecondary }}>Step {surveySubStep + 1} of 3: {getSubStepTitle()}</span>
-            Step {surveySubStep + 1} of 3: {getSubStepTitle()}
+          <span className="text-sm" style={{ color: token?.colorTextSecondary }}>{Math.round(((surveySubStep + 1) / 3) * 100)}%</span>
-          </span>
-          <span className="text-sm" style={{ color: token?.colorTextSecondary }}>
-            {Math.round(((surveySubStep + 1) / 3) * 100)}%
-          </span>
         </div>
-        <Progress 
+        <Progress percent={Math.round(((surveySubStep + 1) / 3) * 100)} showInfo={false} strokeColor={token?.colorPrimary} className="mb-0" />
-          percent={Math.round(((surveySubStep + 1) / 3) * 100)} 
-          showInfo={false}
-          strokeColor={token?.colorPrimary}
-          className="mb-0"
-        />
       </div>
 
       {/* Current Page Content */}

worklenz-frontend/src/components/account-setup/tasks-step.tsx

@@ -27,26 +27,18 @@ export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
 
   const addTask = () => {
     if (tasks.length >= 5) return;
-
     const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 0;
     dispatch(setTasks([...tasks, { id: newId, value: '' }]));
-    setTimeout(() => {
+    setTimeout(() => inputRefs.current[tasks.length]?.focus(), 100);
-      const newIndex = tasks.length;
-      inputRefs.current[newIndex]?.focus();
-    }, 100);
   };
 
   const removeTask = (id: number) => {
-    if (tasks.length > 1) {
+    if (tasks.length > 1) dispatch(setTasks(tasks.filter(task => task.id !== id)));
-      dispatch(setTasks(tasks.filter(task => task.id !== id)));
-    }
   };
 
   const updateTask = (id: number, value: string) => {
     const sanitizedValue = sanitizeInput(value);
-    dispatch(
+    dispatch(setTasks(tasks.map(task => (task.id === id ? { ...task, value: sanitizedValue } : task))));
-      setTasks(tasks.map(task => (task.id === id ? { ...task, value: sanitizedValue } : task)))
-    );
   };
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
@@ -54,11 +46,8 @@ export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
       const input = e.currentTarget as HTMLInputElement;
       if (input.value.trim()) {
         e.preventDefault();
-        if (index === tasks.length - 1 && tasks.length < 5) {
+        if (index === tasks.length - 1 && tasks.length < 5) addTask();
-          addTask();
+        else if (index < tasks.length - 1) inputRefs.current[index + 1]?.focus();
-        } else if (index < tasks.length - 1) {
-          inputRefs.current[index + 1]?.focus();
-        }
       }
     }
   };
@@ -84,10 +73,10 @@ export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
       {/* Header */}
       <div className="text-center mb-8">
         <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
-          Add your first tasks
+          {t('tasksStepTitle')}
         </Title>
         <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
-          Break down "{projectName}" into actionable tasks to get started
+          {t('tasksStepDescription', { projectName })}
         </Paragraph>
       </div>
 
@@ -107,21 +96,13 @@ export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
               }}
             >
               <div className="flex items-center space-x-3">
-                <div className="flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium"
+                <div className="flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium" style={{ backgroundColor: task.value.trim() ? token?.colorSuccess : token?.colorBorderSecondary, color: task.value.trim() ? '#fff' : token?.colorTextSecondary }}>
-                     style={{ 
+                  {task.value.trim() ? <CheckCircleOutlined /> : index + 1}
-                       backgroundColor: task.value.trim() ? token?.colorSuccess : token?.colorBorderSecondary,
-                       color: task.value.trim() ? '#fff' : token?.colorTextSecondary 
-                     }}>
-                  {task.value.trim() ? (
-                    <CheckCircleOutlined />
-                  ) : (
-                    index + 1
-                  )}
                 </div>
                 
                 <div className="flex-1">
                   <Input
-                    placeholder={`Task ${index + 1} - e.g., What needs to be done?`}
+                    placeholder={t('taskPlaceholder', { index: index + 1 })}
                     value={task.value}
                     onChange={e => updateTask(task.id, e.target.value)}
                     onKeyPress={e => handleKeyPress(e, index)}
@@ -129,41 +110,18 @@ export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token
                     onBlur={() => setFocusedIndex(null)}
                     ref={(el) => { inputRefs.current[index] = el as any; }}
                     className="text-base border-0 shadow-none task-input"
-                    style={{
+                    style={{ backgroundColor: 'transparent', color: token?.colorText }}
-                      backgroundColor: 'transparent',
-                      color: token?.colorText
-                    }}
                   />
                 </div>
 
-                {tasks.length > 1 && (
+                {tasks.length > 1 && <Button type="text" icon={<CloseCircleOutlined />} onClick={() => removeTask(task.id)} className="text-gray-400 hover:text-red-500" style={{ color: token?.colorTextTertiary }} />}
-                  <Button
-                    type="text"
-                    icon={<CloseCircleOutlined />}
-                    onClick={() => removeTask(task.id)}
-                    className="text-gray-400 hover:text-red-500"
-                    style={{ color: token?.colorTextTertiary }}
-                  />
-                )}
               </div>
             </Card>
           ))}
         </div>
 
-        {/* Add Task Button */}
         {tasks.length < 5 && (
-          <Button
+          <Button type="dashed" icon={<PlusOutlined />} onClick={addTask} className="w-full mt-4 h-12 text-base" style={{ borderColor: token?.colorBorder, color: token?.colorTextSecondary }}>{t('addAnotherTask', { current: tasks.length, max: 5 })}</Button>
-            type="dashed"
-            icon={<PlusOutlined />}
-            onClick={addTask}
-            className="w-full mt-4 h-12 text-base"
-            style={{ 
-              borderColor: token?.colorBorder,
-              color: token?.colorTextSecondary 
-            }}
-          >
-            Add another task ({tasks.length}/5)
-          </Button>
         )}
       </div>
 

worklenz-frontend/src/components/common/template-drawer/template-drawer.tsx

@@ -10,6 +10,7 @@ import {
   Image,
   Input,
   Flex,
+  theme,
 } from '@/shared/antd-imports';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -44,6 +45,7 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
   },
 }) => {
   const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
+  const { token } = theme.useToken();
   const { t } = useTranslation('template-drawer');
 
   const [searchQuery, setSearchQuery] = useState('');
@@ -149,7 +151,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                 <Tag
                   key={phase.name}
                   color={phase.color_code}
-                  style={{ color: 'black', marginBottom: '8px' }}
+                  style={{ 
+                    color: token.colorText, 
+                    marginBottom: '8px',
+                    backgroundColor: phase.color_code ? undefined : token.colorBgContainer,
+                    borderColor: phase.color_code ? undefined : token.colorBorder
+                  }}
                 >
                   {phase.name}
                 </Tag>
@@ -171,7 +178,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                 <Tag
                   key={status.name}
                   color={status.color_code}
-                  style={{ color: 'black', marginBottom: '8px' }}
+                  style={{ 
+                    color: token.colorText, 
+                    marginBottom: '8px',
+                    backgroundColor: status.color_code ? undefined : token.colorBgContainer,
+                    borderColor: status.color_code ? undefined : token.colorBorder
+                  }}
                 >
                   {status.name}
                 </Tag>
@@ -193,7 +205,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                 <Tag
                   key={priority.name}
                   color={priority.color_code}
-                  style={{ color: 'black', marginBottom: '8px' }}
+                  style={{ 
+                    color: token.colorText, 
+                    marginBottom: '8px',
+                    backgroundColor: priority.color_code ? undefined : token.colorBgContainer,
+                    borderColor: priority.color_code ? undefined : token.colorBorder
+                  }}
                 >
                   {priority.name}
                 </Tag>
@@ -215,7 +232,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                 <Tag
                   key={label.name}
                   color={label.color_code}
-                  style={{ color: 'black', marginBottom: '8px' }}
+                  style={{ 
+                    color: token.colorText, 
+                    marginBottom: '8px',
+                    backgroundColor: label.color_code ? undefined : token.colorBgContainer,
+                    borderColor: label.color_code ? undefined : token.colorBorder
+                  }}
                 >
                   {label.name}
                 </Tag>
@@ -251,14 +273,24 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
   };
 
   const menuContent = (
-    <div style={{ display: 'flex' }}>
+    <div style={{ display: 'flex', backgroundColor: token.colorBgContainer }}>
       {/* Menu Area */}
-      <div style={{ minWidth: '250px', overflowY: 'auto', height: '100%' }}>
+      <div style={{ 
+        minWidth: '250px', 
+        overflowY: 'auto', 
+        height: '100%',
+        backgroundColor: token.colorBgContainer,
+        borderRight: `1px solid ${token.colorBorder}`
+      }}>
         <Skeleton loading={loadingTemplates} active>
           <Menu
             className="template-menu"
             onClick={({ key }) => handleMenuClick(key)}
-            style={{ width: 256 }}
+            style={{ 
+              width: 256,
+              backgroundColor: token.colorBgContainer,
+              borderColor: token.colorBorder
+            }}
             defaultSelectedKeys={[templates[0]?.id || '']}
             mode="inline"
             items={menuItems}
@@ -272,9 +304,11 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
           flex: 1,
           maxHeight: 'calc(100vh - 200px)',
           padding: '16px',
+          backgroundColor: token.colorBgContainer,
+          color: token.colorText
         }}
       >
-        <Title level={4}>Details</Title>
+        <Title level={4} style={{ color: token.colorText }}>Details</Title>
         <Skeleton loading={loadingSelectedTemplate} active>
           {selectedTemplate?.image_url && (
             <Image preview={false} src={selectedTemplate.image_url} alt={selectedTemplate.name} />
@@ -297,12 +331,17 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
   };
 
   const customTemplatesContent = (
-    <div>
+    <div style={{ backgroundColor: token.colorBgContainer, padding: '16px' }}>
       <Flex justify="space-between" align="center">
         <Input
           placeholder={t('searchTemplates')}
-          suffix={<SearchOutlined />}
+          suffix={<SearchOutlined style={{ color: token.colorTextTertiary }} />}
-          style={{ maxWidth: '300px' }}
+          style={{ 
+            maxWidth: '300px',
+            backgroundColor: token.colorBgContainer,
+            borderColor: token.colorBorder,
+            color: token.colorText
+          }}
           onChange={e => setSearchQuery(e.target.value)}
         />
       </Flex>
@@ -312,10 +351,20 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
         bordered
         dataSource={filteredCustomTemplates}
         loading={loadingCustomTemplates}
+        style={{
+          backgroundColor: token.colorBgContainer,
+          borderColor: token.colorBorder
+        }}
         renderItem={item => (
           <List.Item
             key={item.id}
             onClick={() => handleCustomTemplateClick(item.id || '')}
+            style={{
+              backgroundColor: item.selected ? token.colorPrimaryBg : token.colorBgContainer,
+              borderColor: item.selected ? token.colorPrimary : token.colorBorder,
+              color: token.colorText,
+              cursor: 'pointer'
+            }}
             className={
               item.selected && themeMode === 'dark'
                 ? 'selected-custom-template-dark'
@@ -324,7 +373,7 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                   : ''
             }
           >
-            {item.name}
+            <span style={{ color: token.colorText }}>{item.name}</span>
           </List.Item>
         )}
       />
@@ -355,18 +404,31 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
   };
 
   return (
-    <div style={{ height: '100vh', overflow: 'hidden' }}>
+    <div style={{ 
+      height: '100vh', 
+      overflow: 'hidden',
+      backgroundColor: token.colorBgLayout 
+    }}>
       <div
         style={{
           position: 'sticky',
           top: 0,
           zIndex: 100,
-          backgroundColor: themeMode === 'dark' ? '' : '#fff',
+          backgroundColor: token.colorBgContainer,
           overflow: 'hidden',
+          borderBottom: `1px solid ${token.colorBorder}`
         }}
       >
         {showBothTabs ? (
-          <Tabs type="card" items={tabs} onChange={handleTabChange} destroyInactiveTabPane />
+          <Tabs 
+            type="card" 
+            items={tabs} 
+            onChange={handleTabChange} 
+            destroyInactiveTabPane
+            style={{
+              backgroundColor: token.colorBgContainer
+            }}
+          />
         ) : (
           menuContent
         )}

worklenz-frontend/src/pages/account-setup/account-setup.css

@@ -1,3 +1,5 @@
+/* Account Setup Page Styles */
+
 /* Steps styling - using Ant Design theme tokens */
 .ant-steps-item-finish .ant-steps-item-icon {
   border-color: var(--ant-color-primary) !important;
@@ -23,12 +25,17 @@
   opacity: 0.6;
 }
 
+.ant-steps-item-process .ant-steps-item-icon {
+  border-color: var(--ant-color-primary) !important;
+  background-color: var(--ant-color-primary) !important;
+  color: var(--ant-color-white) !important;
+}
+
 .progress-steps .ant-steps-item.ant-steps-item-process .ant-steps-item-title::after {
   background-color: var(--ant-color-primary) !important;
   width: 60px !important;
 }
 
-/* Steps title styling */
 .ant-steps-item-title {
   color: var(--ant-color-text) !important;
 }
@@ -37,7 +44,7 @@
   color: var(--ant-color-text-secondary) !important;
 }
 
-/* Responsive design improvements */
+/* Responsive layout */
 @media (max-width: 1000px) {
   .progress-steps,
   .step,
@@ -72,295 +79,7 @@
   }
 }
 
-@media (max-width: 1000px) {
+/* Tasks step specific styles */
-  .organization-name-form,
-  .first-project-form,
-  .create-first-task-form {
-    width: 90% !important;
-    max-width: 500px !important;
-  }
-}
-
-@media (max-width: 768px) {
-  .organization-name-form,
-  .first-project-form,
-  .create-first-task-form {
-    width: 95% !important;
-    max-width: 400px !important;
-  }
-}
-
-@media (max-width: 500px) {
-  .organization-name-form,
-  .first-project-form,
-  .create-first-task-form {
-    width: 100% !important;
-    max-width: 300px !important;
-  }
-}
-
-.vert-text {
-  max-width: 40px;
-  background-color: var(--ant-color-bg-container);
-  color: var(--ant-color-text);
-  position: relative;
-  z-index: 99;
-  margin: 2rem auto;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0.5rem;
-}
-
-.vert-line {
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 1px;
-  background-color: var(--ant-color-border);
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-/* Legacy dark mode classes for backward compatibility */
-.dark-mode .vert-text,
-.vert-text-dark {
-  background-color: var(--ant-color-bg-container);
-  color: var(--ant-color-text);
-}
-
-.dark-mode .vert-line,
-.vert-line-dark {
-  background-color: var(--ant-color-border);
-}
-
-/* Button and component improvements */
-.custom-close-button:hover {
-  background-color: transparent !important;
-}
-
-.setup-action-buttons {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.setup-action-buttons .ant-btn {
-  min-height: 40px;
-  font-weight: 500;
-}
-
-/* Form styling with Ant Design theme tokens */
-.step-form .ant-form-item-label > label {
-  color: var(--ant-color-text) !important;
-}
-
-.step-form .ant-input,
-.step-form .ant-input-affix-wrapper {
-  background-color: var(--ant-color-bg-container) !important;
-  border-color: var(--ant-color-border) !important;
-  color: var(--ant-color-text) !important;
-}
-
-.step-form .ant-input:focus,
-.step-form .ant-input-affix-wrapper:focus,
-.step-form .ant-input-affix-wrapper-focused {
-  background-color: var(--ant-color-bg-container) !important;
-  border-color: var(--ant-color-primary) !important;
-  color: var(--ant-color-text) !important;
-}
-
-.step-form .ant-input::placeholder {
-  color: var(--ant-color-text-placeholder) !important;
-}
-
-/* Select styling */
-.step-form .ant-select-selector {
-  background-color: var(--ant-color-bg-container) !important;
-  border-color: var(--ant-color-border) !important;
-  color: var(--ant-color-text) !important;
-}
-
-.step-form .ant-select-selection-placeholder {
-  color: var(--ant-color-text-placeholder) !important;
-}
-
-/* Typography */
-.step-form .ant-typography {
-  color: var(--ant-color-text);
-}
-
-.step-form .ant-typography.ant-typography-secondary {
-  color: var(--ant-color-text-secondary);
-}
-
-/* Card styling */
-.step-form .ant-card {
-  background-color: var(--ant-color-bg-container);
-  border-color: var(--ant-color-border);
-}
-
-.step-form .ant-card-body {
-  color: var(--ant-color-text);
-}
-
-/* Checkbox and Radio styling */
-.step-form .ant-checkbox-wrapper {
-  color: var(--ant-color-text);
-}
-
-.step-form .ant-radio-wrapper {
-  color: var(--ant-color-text);
-}
-
-/* Smooth transitions for theme switching */
-* {
-  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-}
-
-/* Survey step transitions */
-.survey-page-transition {
-  animation: fadeInUp 0.4s ease-out;
-}
-
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Survey option hover effects */
-.survey-option-card {
-  transition: all 0.2s ease;
-}
-
-.survey-option-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-/* Progress bar animation */
-.ant-progress-line {
-  transition: all 0.5s ease-out;
-}
-
-/* Survey button animations */
-.survey-nav-button {
-  transition: all 0.2s ease;
-}
-
-.survey-nav-button:active {
-  transform: scale(0.98);
-}
-
-/* Project step enhancements */
-.project-suggestion-button {
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.project-suggestion-button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.project-suggestion-button:active {
-  transform: translateY(0);
-}
-
-.template-preview-card {
-  transition: all 0.3s ease;
-  cursor: pointer;
-}
-
-.template-preview-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}
-
-.template-preview-card.selected {
-  box-shadow: 0 4px 20px rgba(24, 144, 255, 0.2);
-}
-
-/* Enhanced form styling for project step */
-.project-step .ant-input-affix-wrapper {
-  transition: all 0.3s ease;
-}
-
-.project-step .ant-input-affix-wrapper:focus-within {
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
-}
-
-.project-step .ant-card {
-  transition: all 0.3s ease;
-}
-
-.project-step .ant-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-}
-
-/* Organization step enhancements */
-.organization-step .ant-input-affix-wrapper {
-  transition: all 0.3s ease;
-}
-
-.organization-step .ant-input-affix-wrapper:focus-within {
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
-  border-color: #1890ff;
-}
-
-.organization-step .ant-card {
-  transition: all 0.3s ease;
-}
-
-.organization-step .ant-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-}
-
-.organization-suggestion-button {
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.organization-suggestion-button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.organization-suggestion-button:active {
-  transform: translateY(0);
-}
-
-/* Character counter styling */
-.organization-step .character-counter {
-  font-size: 12px;
-  opacity: 0.7;
-  transition: opacity 0.3s ease;
-}
-
-.organization-step .character-counter.active {
-  opacity: 1;
-}
-
-/* Naming tips hover effect */
-.organization-step .naming-tip {
-  transition: all 0.2s ease;
-  padding: 8px;
-}
-
-.organization-step .naming-tip:hover {
-  background-color: rgba(24, 144, 255, 0.05);
-}
-
-/* Tasks step enhancements */
 .tasks-step .task-item-card {
   transition: all 0.3s ease;
 }
@@ -377,47 +96,70 @@
   box-shadow: none !important;
 }
 
-.task-suggestion-button {
+/* Project step specific styles */
-  transition: all 0.2s ease;
+.project-step .ant-input-affix-wrapper {
-  cursor: pointer;
-}
-
-.task-suggestion-button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-}
-
-.task-suggestion-button:active {
-  transform: translateY(0);
-}
-
-/* Members step enhancements */
-.members-step .member-item-card {
   transition: all 0.3s ease;
 }
 
-.members-step .member-item-card:hover {
+.project-step .ant-input-affix-wrapper:focus-within {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
 }
 
-.members-step .member-input {
+.project-suggestion-button {
-  font-size: 16px;
-}
-
-.members-step .member-input:focus {
-  box-shadow: none !important;
-}
-
-.email-suggestion-button {
   transition: all 0.2s ease;
   cursor: pointer;
 }
 
-.email-suggestion-button:hover {
+.project-suggestion-button:hover {
   transform: translateY(-1px);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.email-suggestion-button:active {
+.project-suggestion-button:active {
   transform: translateY(0);
+}
+
+/* Organization step specific styles */
+.organization-step .ant-input-affix-wrapper {
+  transition: all 0.3s ease;
+}
+
+.organization-step .ant-input-affix-wrapper:focus-within {
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+  border-color: #1890ff;
+}
+
+.organization-suggestion-button {
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.organization-suggestion-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.organization-suggestion-button:active {
+  transform: translateY(0);
+}
+
+/* Survey step animations */
+.survey-page-transition {
+  animation: fadeInUp 0.4s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Theme transitions */
+* {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }

worklenz-frontend/src/pages/account-setup/account-setup.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Space, Steps, Button, Typography, theme, Dropdown, MenuProps } from '@/shared/antd-imports';
-import { GlobalOutlined } from '@/shared/antd-imports';
+import { GlobalOutlined, MoonOutlined, SunOutlined } from '@/shared/antd-imports';
 
 import logger from '@/utils/errorLogger';
 import { setCurrentStep, setSurveySubStep } from '@/features/account-setup/account-setup.slice';
@@ -33,9 +33,11 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';
 import './account-setup.css';
 import { IAccountSetupRequest } from '@/types/project-templates/project-templates.types';
 import { profileSettingsApiService } from '@/api/settings/profile/profile-settings.api.service';
+import { projectTemplatesApiService } from '@/api/project-templates/project-templates.api.service';
 import { surveyApiService } from '@/api/survey/survey.api.service';
 import { ISurveySubmissionRequest, ISurveyAnswer } from '@/types/account-setup/survey.types';
 import { setLanguage } from '@/features/i18n/localesSlice';
+import { toggleTheme } from '@/features/theme/themeSlice';
 
 const { Title } = Typography;
 
@@ -211,6 +213,47 @@ const AccountSetup: React.FC = () => {
     }
   };
 
+  const completeAccountSetupWithTemplate = async () => {
+    try {
+      await saveSurveyData(); // Save survey data first
+      
+      const model: IAccountSetupRequest = {
+        team_name: sanitizeInput(organizationName),
+        project_name: null, // No project name when using template
+        template_id: templateId,
+        tasks: [],
+        team_members: [],
+        survey_data: {
+          organization_type: surveyData.organization_type,
+          user_role: surveyData.user_role,
+          main_use_cases: surveyData.main_use_cases,
+          previous_tools: surveyData.previous_tools,
+          how_heard_about: surveyData.how_heard_about,
+        },
+      };
+      
+      const res = await projectTemplatesApiService.setupAccount(model);
+      if (res.done && res.body.id) {
+        trackMixpanelEvent(evt_account_setup_complete);
+        
+        // Refresh user session to update setup_completed status
+        try {
+          const authResponse = await dispatch(verifyAuthentication()).unwrap() as IAuthorizeResponse;
+          if (authResponse?.authenticated && authResponse?.user) {
+            setSession(authResponse.user);
+            dispatch(setUser(authResponse.user));
+          }
+        } catch (error) {
+          logger.error('Failed to refresh user session after template setup completion', error);
+        }
+        
+        navigate(`/worklenz/projects/${res.body.id}?tab=tasks-list&pinned_tab=tasks-list`);
+      }
+    } catch (error) {
+      logger.error('completeAccountSetupWithTemplate', error);
+    }
+  };
+
   const steps = [
     {
       title: '',
@@ -389,6 +432,15 @@ const AccountSetup: React.FC = () => {
         dispatch(setCurrentStep(currentStep + 1));
         dispatch(setSurveySubStep(0)); // Reset for next time
       }
+    } else if (currentStep === 2) {
+      // Project step - check if template is selected
+      if (templateId) {
+        // Template selected, complete account setup with template
+        await completeAccountSetupWithTemplate();
+      } else {
+        // No template, proceed to tasks step
+        dispatch(setCurrentStep(currentStep + 1));
+      }
     } else if (currentStep === 4) {
       // Complete setup after members step
       completeAccountSetup();
@@ -412,6 +464,10 @@ const AccountSetup: React.FC = () => {
     i18n.changeLanguage(languageKey);
   };
 
+  const handleThemeToggle = () => {
+    dispatch(toggleTheme());
+  };
+
   const languageMenuItems: MenuProps['items'] = languages.map(lang => ({
     key: lang.key,
     label: (
@@ -427,11 +483,23 @@ const AccountSetup: React.FC = () => {
 
   return (
     <div 
-      className="min-h-screen w-full flex flex-col items-center py-8 px-4 relative"
+      className="account-setup-container min-h-screen w-full flex flex-col items-center py-8 px-4 relative"
       style={{ backgroundColor: token.colorBgLayout }}
     >
-      {/* Language Switcher - Top Right */}
+      {/* Controls - Top Right */}
-      <div className="absolute top-6 right-6">
+      <div className="absolute top-6 right-6 flex items-center space-x-3">
+        {/* Theme Switcher */}
+        <Button
+          type="text"
+          size="small"
+          icon={isDarkMode ? <SunOutlined /> : <MoonOutlined />}
+          onClick={handleThemeToggle}
+          className="flex items-center"
+          style={{ color: token?.colorTextTertiary }}
+          title={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+        />
+        
+        {/* Language Switcher */}
         <Dropdown
           menu={{ items: languageMenuItems }}
           placement="bottomRight"
@@ -534,7 +602,6 @@ const AccountSetup: React.FC = () => {
                 type="primary"
                 htmlType="submit"
                 disabled={isContinueDisabled()}
-                className="min-h-10 font-medium px-8"
                 onClick={nextStep}
               >
                 {t('continue')}