diff --git a/src/app/features/project/migrate-projects-state.util.ts b/src/app/features/project/migrate-projects-state.util.ts
index cf78498a32..3582eb0d9e 100644
--- a/src/app/features/project/migrate-projects-state.util.ts
+++ b/src/app/features/project/migrate-projects-state.util.ts
@@ -46,7 +46,9 @@ const _updateThemeModel = (project: Project): Project => {
         ...project,
         theme: {
           ...DEFAULT_PROJECT_THEME,
-          primary: THEME_COLOR_MAP[project.themeColor],
+          primary: (project.themeColor)
+            ? THEME_COLOR_MAP[project.themeColor]
+            : DEFAULT_PROJECT_THEME.primary,
           isDarkTheme: project.isDarkTheme,
           isReducedTheme: project.isReducedTheme,
         }
diff --git a/src/app/pages/project-page/project-page.component.html b/src/app/pages/project-page/project-page.component.html
index 94718aeb28..0754533e86 100644
--- a/src/app/pages/project-page/project-page.component.html
+++ b/src/app/pages/project-page/project-page.component.html
@@ -9,7 +9,7 @@
          dragula="PROJECTS">
       <mat-card *ngFor="let project of (projectService.list$|async); trackBy:trackById;"
                 class="project">
-        <div [ngStyle]="getThemeColor(project.themeColor)"
+        <div [ngStyle]="getThemeColor(project.theme?.primary || project.themeColor)"
              class="project-color drag-handle">
           <mat-icon class="color-contrast"
                     svgIcon="drag_handle">
@@ -90,7 +90,7 @@
 
     <mat-card *ngFor="let project of (projectService.archived$|async); trackBy:trackById;"
               class="project">
-      <div [ngStyle]="getThemeColor(project.themeColor)"
+      <div [ngStyle]="getThemeColor(project.theme?.primary || project.themeColor)"
            class="project-color">
       </div>