diff --git a/dashboard-prime/src/common-components/stores/UseAppConfig.js b/dashboard-prime/src/common-components/stores/UseAppConfig.js
index 1db68d05a9..64be67cc90 100644
--- a/dashboard-prime/src/common-components/stores/UseAppConfig.js
+++ b/dashboard-prime/src/common-components/stores/UseAppConfig.js
@@ -85,7 +85,6 @@ export const useAppConfig = defineStore('dashboardAppConfig', () => {
   const expireUnusedProjectsOlderThan = computed(() => config.value.expireUnusedProjectsOlderThan)
   const minimumProjectPoints = computed(() => config.value.minimumProjectPoints)
   const maxProjectsPerAdmin = computed(() => config.value.maxProjectsPerAdmin)
-  const numProjectsForTableView = computed(() => config.value.numProjectsForTableView)
   const minimumSubjectPoints = computed(() => config.value.minimumSubjectPoints)
   const maxSubjectsPerProject = computed(() => config.value.maxSubjectsPerProject)
   const userCommunityBeforeLabel = computed(() => config.value.userCommunityBeforeLabel || '')
@@ -123,6 +122,7 @@ export const useAppConfig = defineStore('dashboardAppConfig', () => {
   const minUsernameLength = computed(() => config.value.minUsernameLength)
   const minPasswordLength = computed(() => config.value.minPasswordLength)
   const maxPasswordLength = computed(() => config.value.maxPasswordLength)
+  const numProjectsToStartShowingAsCards = computed(() => config.value.numProjectsToStartShowingAsCards)
   return {
     loadConfigState,
     refreshConfig,
@@ -166,7 +166,6 @@ export const useAppConfig = defineStore('dashboardAppConfig', () => {
     expireUnusedProjectsOlderThan,
     minimumProjectPoints,
     maxProjectsPerAdmin,
-    numProjectsForTableView,
     minimumSubjectPoints,
     maxSubjectsPerProject,
     userCommunityBeforeLabel,
@@ -204,5 +203,6 @@ export const useAppConfig = defineStore('dashboardAppConfig', () => {
     minUsernameLength,
     minPasswordLength,
     maxPasswordLength,
+    numProjectsToStartShowingAsCards,
   }
 })
\ No newline at end of file
diff --git a/dashboard-prime/src/components/projects/MyProject.vue b/dashboard-prime/src/components/projects/MyProject.vue
index d74248e16b..866f222729 100644
--- a/dashboard-prime/src/components/projects/MyProject.vue
+++ b/dashboard-prime/src/components/projects/MyProject.vue
@@ -18,12 +18,14 @@ import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
 import ReminderMessage from '@/components/utils/misc/ReminderMessage.vue'
 import { useNumberFormat } from '@/common-components/filter/UseNumberFormat.js'
 import ProjectExpirationWarning from '@/components/projects/ProjectExpirationWarning.vue'
+import { useAdminProjectsState } from '@/stores/UseAdminProjectsState.js'
 
 const props = defineProps(['project', 'disableSortControl'])
 const appConfig = useAppConfig()
 const accessState = useAccessState()
 const emit = defineEmits(['project-deleted', 'copy-project', 'pin-removed', 'sort-changed-requested'])
 const numberFormat = useNumberFormat()
+const projectsState = useAdminProjectsState()
 const announcer = useSkillsAnnouncer()
 
 // data items
@@ -169,7 +171,11 @@ defineExpose({
   <div data-cy="projectCard" class="h-100">
     <Card :data-cy="`projectCard_${projectInternal.projectId}`" class="relative">
       <template #content>
-        <div class="flex flex-wrap">
+        <div class="flex flex-wrap"
+             :class="{
+            'flex-column gap-1 justify-content-left': projectsState.shouldTileProjectsCards,
+            '': !projectsState.shouldTileProjectsCards
+          }">
           <div class="text-truncate">
             <router-link
                 :to="{ name:'Subjects', params: { projectId: projectInternal.projectId }}"
@@ -317,8 +323,6 @@ defineExpose({
 }
 
 .sort-control:hover, .sort-control i:hover {
-  cursor: grab !important;
-  color: $info !important;
   font-size: 1.5rem;
 }
 </style>
diff --git a/dashboard-prime/src/components/projects/MyProjects.vue b/dashboard-prime/src/components/projects/MyProjects.vue
index b3651ef565..21f3d9a463 100644
--- a/dashboard-prime/src/components/projects/MyProjects.vue
+++ b/dashboard-prime/src/components/projects/MyProjects.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, nextTick, onMounted, provide, ref } from 'vue'
 import { useSkillsAnnouncer } from '@/common-components/utilities/UseSkillsAnnouncer.js'
-import { useElementHelper } from '@/components/utils/inputForm/UseElementHelper.js';
+import { useElementHelper } from '@/components/utils/inputForm/UseElementHelper.js'
 import SubPageHeader from '@/components/utils/pages/SubPageHeader.vue'
 import SkillsSpinner from '@/components/utils/SkillsSpinner.vue'
 import ProjectService from '@/components/projects/ProjectService'
@@ -11,129 +11,123 @@ import { SkillsReporter } from '@skilltree/skills-client-js'
 import NoContent2 from '@/components/utils/NoContent2.vue'
 import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
 import { useAccessState } from '@/stores/UseAccessState.js'
-import PinProjects from '@/components/projects/PinProjects.vue';
+import PinProjects from '@/components/projects/PinProjects.vue'
 import Sortable from 'sortablejs'
-import BlockUI from "primevue/blockui";
-import InputSanitizer from "@/components/utils/InputSanitizer.js";
-import SettingsService from "@/components/settings/SettingsService.js";
-import LengthyOperationProgressBarModal from "@/components/utils/modal/LengthyOperationProgressBarModal.vue";
+import BlockUI from 'primevue/blockui'
+import InputSanitizer from '@/components/utils/InputSanitizer.js'
+import SettingsService from '@/components/settings/SettingsService.js'
+import LengthyOperationProgressBarModal from '@/components/utils/modal/LengthyOperationProgressBarModal.vue'
+import { useAdminProjectsState } from '@/stores/UseAdminProjectsState.js'
+import { useLog } from '@/components/utils/misc/useLog.js'
 
 const appConfig = useAppConfig()
 const accessState = useAccessState()
 const announcer = useSkillsAnnouncer()
 const elementHelper = useElementHelper()
+const projectsState = useAdminProjectsState()
+const log = useLog()
 
 onMounted(() => {
-  loadProjects();
+  loadProjects()
 })
 
-const projRef = ref([]);
-const isLoading = ref(false);
-const projects = ref([]);
+const projRef = ref([])
+const isLoading = computed(() => projectsState.isLoadingProjects)
+const projects = computed(() => projectsState.projects)
 const newProject = ref({
   show: false,
   isEdit: false,
-  project: {},
-});
-const showSearchProjectModal = ref(false);
+  project: {}
+})
+const showSearchProjectModal = ref(false)
 const sortOrder = ref({
   loading: false,
-  loadingProjectId: '-1',
-});
+  loadingProjectId: '-1'
+})
 const copyProgressModal = ref({
   show: false,
   isComplete: false,
-  copiedProjectId: '',
-});
+  copiedProjectId: ''
+})
 
 const addProjectDisabled = computed(() => {
-  return projects.value && projects.value.length >= appConfig.maxProjectsPerAdmin && !accessState.isRoot;
-});
+  return projects.value && projects.value.length >= appConfig.maxProjectsPerAdmin && !accessState.isRoot
+})
 
 const addProjectsDisabledMsg = computed(() => `The maximum number of Projects allowed is ${appConfig.maxProjectsPerAdmin}`)
 const isRootUser = computed(() => accessState.isRoot)
 
 // Functions
 const pinModalClosed = () => {
-  showSearchProjectModal.value = false;
-  loadProjects();
+  showSearchProjectModal.value = false
+  loadProjects()
   nextTick(() => {
-    document.getElementById('pinProjectsButton').focus();
-  });
-};
+    document.getElementById('pinProjectsButton').focus()
+  })
+}
 const projectUnpinned = (project) => {
   loadProjects().then(() => {
     nextTick(() => {
-      announcer.polite(`Project ${project.name} has been unpinned from the root user projects view`);
-    });
-  });
-};
+      announcer.polite(`Project ${project.name} has been unpinned from the root user projects view`)
+    })
+  })
+}
 const loadProjects = () => {
-  isLoading.value = true;
-  return ProjectService.getProjects()
-      .then((response) => {
-        if(response && Object.keys(response).length > 0) {
-          projects.value = response.map((p) => ({...p, description: p.description || ''}))
-        }
-      })
-      .finally(() => {
-        isLoading.value = false;
-        enableDropAndDrop();
-      });
-};
+  return projectsState.loadProjects()
+    .finally(() => {
+      enableDropAndDrop()
+    })
+}
 const projectRemoved = (project) => {
-  isLoading.value = true;
+  isLoading.value = true
   ProjectService.deleteProject(project.projectId)
-      .then(() => {
-        loadProjects();
-        announcer.polite(`Project ${project.name} has been deleted`);
-      });
-};
+    .then(() => {
+      loadProjects()
+      announcer.polite(`Project ${project.name} has been deleted`)
+    })
+}
 const copyProject = (projectInfo) => {
-  copyProgressModal.value.isComplete = false;
-  copyProgressModal.value.copiedProjectId = '';
-  copyProgressModal.value.show = true;
+  copyProgressModal.value.isComplete = false
+  copyProgressModal.value.copiedProjectId = ''
+  copyProgressModal.value.show = true
   ProjectService.copyProject(projectInfo.originalProjectId, projectInfo.newProject)
-      .then(() => {
-        copyProgressModal.value.copiedProjectId = projectInfo.newProject.projectId;
-        copyProgressModal.value.isComplete = true;
-        announcer.polite(`Project ${projectInfo.newProject.name} was copied`);
-        SkillsReporter.reportSkill('CopyProject');
-        loadProjectsAfterCopy();
-      });
-};
+    .then(() => {
+      copyProgressModal.value.copiedProjectId = projectInfo.newProject.projectId
+      copyProgressModal.value.isComplete = true
+      announcer.polite(`Project ${projectInfo.newProject.name} was copied`)
+      SkillsReporter.reportSkill('CopyProject')
+      loadProjectsAfterCopy()
+    })
+}
 const loadProjectsAfterCopy = () => {
   loadProjects()
-      .then(() => {
-        focusOnProjectCard(copyProgressModal.value.copiedProjectId);
-      });
-};
+    .then(() => {
+      focusOnProjectCard(copyProgressModal.value.copiedProjectId)
+    })
+}
 
 
 const openProjectModal = (project = {}, isEdit = false) => {
   newProject.value.isEdit = isEdit
   newProject.value.project = project
-  newProject.value.show = true;
-};
+  newProject.value.show = true
+}
 provide('createOrUpdateProject', openProjectModal)
 
 const projectAdded = (project) => {
-
-  const existingIndex = projects.value.findIndex((item) => item.projectId === project.originalProjectId)
-  if (existingIndex >= 0) {
-    console.log(`edit: ${existingIndex} project at this indeex`)
-    projects.value.splice(existingIndex, 1, project)
-    announcer.polite(`Project ${project.name} has been updated`);
+  const isUpdated = projectsState.updateOrAddProject(project)
+  if (isUpdated) {
+    announcer.polite(`Project ${project.name} has been updated`)
   } else {
-    projects.value.push(project)
-    SkillsReporter.reportSkill('CreateProject');
-    announcer.polite(`Project ${project.name} has been created`);
+    SkillsReporter.reportSkill('CreateProject')
+    announcer.polite(`Project ${project.name} has been created`)
   }
-};
+}
 const enableDropAndDrop = () => {
-  if (projects.value && projects.value.length > 0 && projects.value.length < appConfig.numProjectsForTableView) {
+  if (projects.value && projects.value.length > 0) {
     nextTick(() => {
-      elementHelper.getElementById('projectCards').then((cards) => {
+      const projectCardId = 'projectCards'
+      elementHelper.getElementById(projectCardId).then((cards) => {
         // need to check for null because this logic is within nextTick method
         // an may actually run after the user moved onto another page
         if (cards) {
@@ -142,49 +136,53 @@ const enableDropAndDrop = () => {
             animation: 150,
             ghostClass: 'skills-sort-order-ghost-class',
             onUpdate(event) {
-              sortOrderUpdate(event);
-            },
-          });
+              sortOrderUpdate(event)
+            }
+          })
+        } else {
+          log.error(`Failed to find element with id [${projectCardId}] sort will not work property`)
         }
-      });
-    });
+      })
+    })
+  } else {
+    log.error(`Didn't attempt to enable sort - sort will not work property`)
   }
-};
+}
 const sortOrderUpdate = (updateEvent) => {
-  const { id } = updateEvent.item;
-  sortOrder.value.loadingProjectId = id;
-  sortOrder.value.loading = true;
+  const { id } = updateEvent.item
+  sortOrder.value.loadingProjectId = id
+  sortOrder.value.loading = true
   ProjectService.updateProjectDisplaySortOrder(id, updateEvent.newIndex)
-      .finally(() => {
-        sortOrder.value.loading = false;
-      });
-};
+    .finally(() => {
+      sortOrder.value.loading = false
+    })
+}
 const updateSortAndReloadProjects = (updateInfo) => {
   const currentIndex = projects.value.sort((a, b) => {
     if (a.displayOrder > b.displayOrder) {
-      return 1;
+      return 1
     }
     if (b.displayOrder > a.displayOrder) {
-      return -1;
+      return -1
     }
-    return 0;
+    return 0
   })
-      .findIndex((item) => item.projectId === updateInfo.projectId);
-  const newIndex = updateInfo.direction === 'up' ? currentIndex - 1 : currentIndex + 1;
+    .findIndex((item) => item.projectId === updateInfo.projectId)
+  const newIndex = updateInfo.direction === 'up' ? currentIndex - 1 : currentIndex + 1
   if (newIndex >= 0 && (newIndex) < projects.value.length) {
-    isLoading.value = true;
+    isLoading.value = true
     ProjectService.updateProjectDisplaySortOrder(updateInfo.projectId, newIndex)
-        .finally(() => {
-          loadProjects()
-              .then(() => {
-                const foundRef = projRef.value[updateInfo.projectId];
-                nextTick(() => {
-                  foundRef.focusSortControl();
-                });
-              });
-        });
+      .finally(() => {
+        loadProjects()
+          .then(() => {
+            const foundRef = projRef.value[updateInfo.projectId]
+            nextTick(() => {
+              foundRef.focusSortControl()
+            })
+          })
+      })
   }
-};
+}
 
 const saveProject = (values, isEdit, projectId) => {
   const projToSave = {
@@ -195,30 +193,30 @@ const saveProject = (values, isEdit, projectId) => {
     projectId: InputSanitizer.sanitize(values.projectId)
   }
   return ProjectService.saveProject(projToSave)
-      .then((projRes) => {
-        if (!isEdit && isRootUser.value) {
-          SettingsService.pinProject(projToSave.projectId)
-              .then(() => {
-                return {...projRes, originalProjectId: projectId}
-              })
-        }
-        return ProjectService.getProject(projRes.projectId)
-          .then((retrievedProj) => {
-            const projWithOriginalId = { ...retrievedProj, originalProjectId: projectId }
-            projectAdded(projWithOriginalId)
-            return projWithOriginalId
+    .then((projRes) => {
+      if (!isEdit && isRootUser.value) {
+        SettingsService.pinProject(projToSave.projectId)
+          .then(() => {
+            return { ...projRes, originalProjectId: projectId }
           })
-      })
+      }
+      return ProjectService.getProject(projRes.projectId)
+        .then((retrievedProj) => {
+          const projWithOriginalId = { ...retrievedProj, originalProjectId: projectId }
+          projectAdded(projWithOriginalId)
+          return projWithOriginalId
+        })
+    })
 }
 
 const focusOnProjectCard = (projectId) => {
   nextTick(() => {
-    const projCard = document.getElementById(`proj${projectId}`);
+    const projCard = document.getElementById(`proj${projectId}`)
     if (projCard) {
-      projCard.focus();
+      projCard.focus()
     }
-  });
-};
+  })
+}
 
 const hasData = computed(() => {
   return !isLoading.value && projects.value && projects.value.length > 0
@@ -255,15 +253,25 @@ const hasData = computed(() => {
         role="button" />
     </SubPageHeader>
 
-<!--    <div v-if="addProjectDisabled" class="alert alert-warning" data-cy="addProjectDisabled">-->
-<!--      <i class="fas fa-exclamation-circle"/> Cannot create or copy projects - -->
-<!--      {{ addProjectsDisabledMsg }}-->
-<!--    </div>-->
+    <!--    <div v-if="addProjectDisabled" class="alert alert-warning" data-cy="addProjectDisabled">-->
+    <!--      <i class="fas fa-exclamation-circle"/> Cannot create or copy projects - -->
+    <!--      {{ addProjectsDisabledMsg }}-->
+    <!--    </div>-->
 
     <SkillsSpinner :is-loading="isLoading" class="my-5" />
 
-    <div v-if="hasData" id="projectCards">
-      <div v-for="project of projects" :key="project.projectId" class="mb-3"
+    <div v-if="hasData" id="projectCards"
+         :class="{
+      'flex gap-3 flex-wrap justify-content-center': projectsState.shouldTileProjectsCards,
+      '': !projectsState.shouldTileProjectsCards
+    }">
+      <div v-for="project of projects"
+           :key="project.projectId"
+           class="mb-3"
+           :class="{
+            'max-w-25rem': projectsState.shouldTileProjectsCards,
+            '': !projectsState.shouldTileProjectsCards
+            }"
            :id="project.projectId">
         <BlockUI :blocked="sortOrder.loading">
           <div v-if="sortOrder.loading"
@@ -297,9 +305,9 @@ const hasData = computed(() => {
       :project="newProject.project"
       :is-edit="newProject.isEdit"
       @project-saved="saveProject"
-      :enable-return-focus="true"/>
+      :enable-return-focus="true" />
     <pin-projects v-if="showSearchProjectModal" v-model="showSearchProjectModal"
-                  @done="pinModalClosed"/>
+                  @done="pinModalClosed" />
 
     <lengthy-operation-progress-bar-modal v-if="copyProgressModal.show"
                                           v-model="copyProgressModal.show"
@@ -307,7 +315,7 @@ const hasData = computed(() => {
                                           @operation-done="loadProjectsAfterCopy"
                                           title="Copying Project"
                                           progress-message="Copying Project's Training Profile"
-                                          success-message="Project's training profile was successfully copied, please enjoy!"/>
+                                          success-message="Project's training profile was successfully copied, please enjoy!" />
   </div>
 </template>
 
diff --git a/dashboard-prime/src/components/projects/ProjectCardControls.vue b/dashboard-prime/src/components/projects/ProjectCardControls.vue
index 39188d8e03..f4f0a2423c 100644
--- a/dashboard-prime/src/components/projects/ProjectCardControls.vue
+++ b/dashboard-prime/src/components/projects/ProjectCardControls.vue
@@ -16,28 +16,24 @@ limitations under the License.
 <script setup>
 import { computed } from 'vue'
 import { useAccessState } from '@/stores/UseAccessState.js'
+import { useAdminProjectsState } from '@/stores/UseAdminProjectsState.js'
 
 const accessState = useAccessState()
+const projectsState = useAdminProjectsState()
+
 const props = defineProps(['project', 'isDeleteDisabled', 'deleteDisabledText', 'readOnlyProject'])
 const emit = defineEmits(['edit-project', 'unpin-project', 'copy-project', 'delete-project'])
 
 const isRootUser = computed(() => accessState.isRoot)
 
-const focusOnEdit = () => {
-  this.$refs.editBtn.focus();
-};
-
-const focusOnCopy = () => {
-  this.$refs.copyBtn.focus();
-};
-
-const focusOnDelete = () => {
-  this.$nextTick(() => this.$refs.deleteBtn.focus());
-};
 </script>
 
 <template>
-  <div class="flex justify-content-end flex-wrap">
+  <div class="flex flex-wrap"
+    :class="{
+      'justify-content-left': projectsState.shouldTileProjectsCards,
+      'justify-content-end': !projectsState.shouldTileProjectsCards
+    }">
     <router-link :to="{ name:'Subjects', params: { projectId: project.projectId }}">
       <SkillsButton
           size="small"
diff --git a/dashboard-prime/src/components/projects/ProjectCardFooter.vue b/dashboard-prime/src/components/projects/ProjectCardFooter.vue
index 752bfaf028..cca0cecfd4 100644
--- a/dashboard-prime/src/components/projects/ProjectCardFooter.vue
+++ b/dashboard-prime/src/components/projects/ProjectCardFooter.vue
@@ -3,10 +3,13 @@ import { computed } from 'vue';
 import ProjectDates from '@/components/projects/ProjectDates.vue';
 import UserRolesUtil from '@/components/utils/UserRolesUtil';
 import Badge from 'primevue/badge';
+import { useAdminProjectsState } from '@/stores/UseAdminProjectsState.js'
 
 const props = defineProps(['project']);
 const project = props.project;
 
+const projectsState = useAdminProjectsState()
+
 const hasIssues = computed(() => {
   return project.numErrors && project.numErrors > 0;
 });
@@ -28,8 +31,12 @@ const numIssuesForDisplay = computed(() => {
 
 <template>
   <div class="text-right">
-    <div class="grid">
-      <div class="col text-left small" data-cy="ProjectCardFooter_issues">
+    <div class="flex"
+         :class="{
+            'flex-column gap-2 justify-content-left': projectsState.shouldTileProjectsCards,
+            '': !projectsState.shouldTileProjectsCards
+          }">
+      <div class="flex-1 text-left small" data-cy="ProjectCardFooter_issues">
         <i class="fas fa-user-shield text-success" style="font-size: 1.05rem;" aria-hidden="true"></i> <i>Role:</i> <span data-cy="userRole">{{ userRoleForDisplay }}</span>
         <span v-if="!isReadOnlyProj" class="ml-2">
           <span v-if="!hasIssues"><i class="fas fa-check-circle text-success" style="font-size: 1rem;"
@@ -39,7 +46,10 @@ const numIssuesForDisplay = computed(() => {
             There {{ numIssues > 1 ? 'are' : 'is' }} <span style="font-size: 1rem;"><Badge variant="danger">{{ numIssuesForDisplay }}</Badge></span> {{ numIssues > 1 ? 'issues' : 'issue' }} to address </span>
         </span>
       </div>
-      <div class="col text-right" data-cy="projectCreated">
+      <div :class="{
+            'text-left': projectsState.shouldTileProjectsCards,
+            'text-right': !projectsState.shouldTileProjectsCards
+          }" data-cy="projectCreated">
         <ProjectDates :created="project.created"/>
       </div>
     </div>
diff --git a/dashboard-prime/src/components/quiz/QuizDefinitions.vue b/dashboard-prime/src/components/quiz/QuizDefinitions.vue
index d1d80e01d8..24f390cca6 100644
--- a/dashboard-prime/src/components/quiz/QuizDefinitions.vue
+++ b/dashboard-prime/src/components/quiz/QuizDefinitions.vue
@@ -166,7 +166,7 @@ defineExpose({
     <SkillsSpinner :is-loading="loading" class="my-5" />
     <NoContent2 v-if="!loading && !hasData"
                 title="No Quiz or Survey Definitions"
-                class="mt-5"
+                class="py-8"
                 message="Create a Survey or a Quiz to run independently or to associate to a skill in one of the existing SkillTree projects."
                 data-cy="noQuizzesYet"/>
     <div v-if="!loading && hasData">
diff --git a/dashboard-prime/src/stores/UseAdminProjectsState.js b/dashboard-prime/src/stores/UseAdminProjectsState.js
new file mode 100644
index 0000000000..abb8e100aa
--- /dev/null
+++ b/dashboard-prime/src/stores/UseAdminProjectsState.js
@@ -0,0 +1,45 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import ProjectService from '@/components/projects/ProjectService.js'
+import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
+
+export const useAdminProjectsState = defineStore('adminProjectsState', () => {
+  const appConfig = useAppConfig()
+
+  const projects = ref([]);
+  const isLoadingProjects = ref(true);
+  const loadProjects = () => {
+    isLoadingProjects.value = true;
+    return ProjectService.getProjects()
+      .then((response) => {
+        if(response && Object.keys(response).length > 0) {
+          projects.value = response.map((p) => ({...p, description: p.description || ''}))
+        }
+      })
+      .finally(() => {
+        isLoadingProjects.value = false;
+      });
+  }
+
+  const updateOrAddProject = (project) => {
+    const existingIndex = projects.value.findIndex((item) => item.projectId === project.originalProjectId)
+    if (existingIndex >= 0) {
+      projects.value.splice(existingIndex, 1, project)
+      return true
+    }
+    projects.value.push(project)
+    return false
+  }
+
+  const shouldTileProjectsCards = computed(() => {
+    return projects.value.length >= appConfig.numProjectsToStartShowingAsCards
+  })
+
+  return {
+    loadProjects,
+    isLoadingProjects,
+    projects,
+    updateOrAddProject,
+    shouldTileProjectsCards
+  }
+})
\ No newline at end of file
diff --git a/e2e-tests/cypress/e2e/projects_cards_spec.js b/e2e-tests/cypress/e2e/projects_cards_spec.js
new file mode 100644
index 0000000000..cce2b3807a
--- /dev/null
+++ b/e2e-tests/cypress/e2e/projects_cards_spec.js
@@ -0,0 +1,70 @@
+/*
+ * Copyright 2020 SkillTree
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import dayjs from 'dayjs';
+import utcPlugin from 'dayjs/plugin/utc';
+
+dayjs.extend(utcPlugin);
+
+describe('Projects Cards Tests', () => {
+    beforeEach(() => {
+    });
+
+    it('more than 5 projects will convert to cards', () => {
+        cy.createProject(1);
+        cy.createProject(2);
+        cy.createProject(3);
+        cy.createProject(4);
+        cy.createProject(5);
+
+        cy.visit('/administrator/');
+
+        cy.get('[data-cy="projCard_proj1_manageLink"]')
+        cy.get('[data-cy="projCard_proj2_manageLink"]')
+        cy.get('[data-cy="projCard_proj3_manageLink"]')
+        cy.get('[data-cy="projCard_proj4_manageLink"]')
+        cy.get('[data-cy="projCard_proj5_manageLink"]')
+
+        cy.get('#projectCards').should('not.have.class', 'flex')
+
+        cy.get('[data-cy="newProjectButton"]').click();
+        cy.get('[data-cy="projectName"]').type('Another');
+        cy.get('[data-cy="saveDialogBtn"]').click()
+
+        cy.get('[data-cy="projCard_proj1_manageLink"]')
+        cy.get('[data-cy="projCard_proj2_manageLink"]')
+        cy.get('[data-cy="projCard_proj3_manageLink"]')
+        cy.get('[data-cy="projCard_proj4_manageLink"]')
+        cy.get('[data-cy="projCard_proj5_manageLink"]')
+        cy.get('[data-cy="projCard_Another_manageLink"]')
+
+        cy.get('#projectCards').should('have.class', 'flex')
+
+        // refresh and re-validate
+        cy.visit('/administrator/');
+
+        cy.get('[data-cy="projCard_proj1_manageLink"]')
+        cy.get('[data-cy="projCard_proj2_manageLink"]')
+        cy.get('[data-cy="projCard_proj3_manageLink"]')
+        cy.get('[data-cy="projCard_proj4_manageLink"]')
+        cy.get('[data-cy="projCard_proj5_manageLink"]')
+        cy.get('[data-cy="projCard_Another_manageLink"]')
+        cy.get('#projectCards').should('have.class', 'flex')
+    });
+
+
+
+});
+
diff --git a/e2e-tests/cypress/e2e/projects_table_spec.js b/e2e-tests/cypress/e2e/projects_table_spec.js
deleted file mode 100644
index 546815f44e..0000000000
--- a/e2e-tests/cypress/e2e/projects_table_spec.js
+++ /dev/null
@@ -1,645 +0,0 @@
-/*
- * Copyright 2020 SkillTree
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import dayjs from 'dayjs';
-import utcPlugin from 'dayjs/plugin/utc';
-
-dayjs.extend(utcPlugin);
-
-describe('Projects Table Tests', () => {
-    const tableSelector = '[data-cy=projectsTable]';
-    const numProjCreated = 10;
-    beforeEach(() => {
-        cy.intercept('GET', '/app/projects')
-            .as('getProjects');
-        cy.intercept('GET', '/api/icons/customIconCss')
-            .as('getProjectsCustomIcons');
-        cy.intercept('GET', '/app/userInfo')
-            .as('getUserInfo');
-        cy.intercept('/admin/projects/proj1/users/root@skills.org/roles')
-            .as('getRolesForRoot');
-
-        for (let i = 1; i <= numProjCreated; i += 1) {
-            cy.createProject(i);
-        }
-    });
-
-    it('When more than 10 projects then projects should be displayed in a table', () => {
-
-        // wait a second and create another project to help validate date order sorting
-        cy.wait(1001);
-        cy.createProject(11);
-
-        cy.intercept('GET', '/app/projects')
-            .as('loadProjects');
-        cy.intercept('GET', '/app/userInfo')
-            .as('loadUserInfo');
-
-        cy.visit('/administrator/');
-        cy.wait('@loadUserInfo');
-        cy.wait('@loadProjects');
-
-        cy.get('[data-cy="projectsTable"]')
-            .should('be.visible');
-        cy.get('[data-cy=skillsBTableTotalRows]')
-            .should('have.text', '11');
-
-        // validate the projects are sorted in desc create date order
-        cy.validateTable(tableSelector, [
-            [{
-                colIndex: 0,
-                value: 'project 11'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 10'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 9'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 8'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 7'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 6'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 5'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 4'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 3'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 2'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 1'
-            }],
-        ], 10);
-
-        cy.get(`${tableSelector}`)
-            .contains('Created')
-            .click();
-
-        cy.validateTable(tableSelector, [
-            [{
-                colIndex: 0,
-                value: 'project 1'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 2'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 3'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 4'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 5'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 6'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 7'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 8'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 9'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 10'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 11'
-            }],
-        ], 10);
-    });
-
-    it('Create new project', function () {
-
-        cy.intercept('GET', '/app/projects')
-            .as('loadProjects');
-        cy.intercept('GET', '/app/userInfo')
-            .as('loadUserInfo');
-        cy.intercept('POST', '/app/projects/MyBrandNewtestProject')
-            .as('postNewProject');
-
-        cy.visit('/administrator/');
-        cy.wait('@loadUserInfo');
-        cy.wait('@loadProjects');
-
-        cy.get('[data-cy="projectsTable"]')
-            .should('exist');
-        cy.get('[data-cy=skillsBTableTotalRows]')
-            .should('have.text', 10);
-
-        cy.clickButton('Project');
-        cy.get('[data-cy="projectName"]')
-            .type('My Brand New test Project');
-        cy.clickSave();
-
-        cy.wait('@postNewProject');
-
-        cy.get('[data-cy=skillsBTableTotalRows]')
-            .should('have.text', 11);
-        cy.get('[data-cy="projectsTable-projectFilter"]')
-            .type('Brand');
-        cy.get('[data-cy="projectsTable-filterBtn"]')
-            .click();
-        cy.validateTable(tableSelector, [
-            [{
-                colIndex: 0,
-                value: 'My Brand New test Project'
-            }],
-        ], 10);
-
-        cy.get('[data-cy="projectsTable-resetBtn"]')
-            .click();
-        cy.get('[data-cy=skillsBTableTotalRows]')
-            .should('have.text', '11');
-    });
-
-    it('Delete an existing project', function () {
-
-        // add one more project so the table still exists after deletion
-        cy.createProject(11);
-
-        cy.intercept('GET', '/app/projects')
-            .as('loadProjects');
-        cy.intercept('GET', '/app/userInfo')
-            .as('loadUserInfo');
-        cy.intercept('DELETE', '/admin/projects/proj10')
-            .as('deleteProject');
-
-        cy.visit('/administrator/');
-        cy.wait('@loadUserInfo');
-        cy.wait('@loadProjects');
-
-        cy.get('[data-cy="projectsTable"]')
-            .should('exist');
-        cy.get('[data-cy=skillsBTableTotalRows]')
-            .should('have.text', '11');
-
-        cy.get('[data-cy="projectsTable-projectFilter"]')
-            .type('proj10');
-        cy.get('[data-cy="projectsTable-filterBtn"]')
-            .click();
-        cy.validateTable(tableSelector, [
-            [{
-                colIndex: 0,
-                value: 'project 10'
-            }],
-        ], 10);
-
-        cy.get('[data-cy=deleteProjectButton_proj10]')
-            .click();
-        cy.contains('Removal Safety Check');
-        cy.get('[data-cy=currentValidationText]')
-            .type('Delete Me');
-        cy.get('[data-cy=removeButton]')
-            .should('be.enabled')
-            .click();
-
-        cy.wait('@deleteProject');
-
-        cy.get('[data-cy="projectsTable-resetBtn"]')
-            .click();
-        cy.get('[data-cy=skillsBTableTotalRows]')
-            .should('have.text', '10');
-
-        cy.get('[data-cy="projectsTable-projectFilter"]')
-            .type('proj10');
-        cy.get('[data-cy="projectsTable-filterBtn"]')
-            .click();
-        cy.contains('There are no records to show');
-    });
-
-    it('Edit existing project', function () {
-        cy.intercept('GET', '/app/projects')
-            .as('loadProjects');
-        cy.intercept('GET', '/app/userInfo')
-            .as('loadUserInfo');
-
-        cy.visit('/administrator/');
-        cy.wait('@loadUserInfo');
-        cy.wait('@loadProjects');
-
-        cy.get('[data-cy="projectsTable"]')
-            .should('exist');
-        cy.get('[data-cy=skillsBTableTotalRows]')
-            .should('have.text', '10');
-
-        cy.get('[data-cy=editProjectIdproj1]')
-            .click();
-        cy.get('input[data-cy=projectName]')
-            .type('{selectall}I Am A Changed Project Name');
-        cy.get('button[data-cy=saveProjectButton]')
-            .click();
-
-        /* focus is automatically getting switched back to the edit button which pre-emptively moves the cursor out of the text input field
-          before the full text has been entered depending on test timing
-         */
-        cy.wait(2000);
-        cy.get('[data-cy="projectsTable-projectFilter"]').should('be.enabled')
-        cy.get('[data-cy="projectsTable-projectFilter"]')
-            .type('Changed');
-        cy.get('[data-cy="projectsTable-filterBtn"]')
-            .click();
-        cy.validateTable(tableSelector, [
-            [{
-                colIndex: 0,
-                value: 'I Am A Changed Project Name'
-            }],
-        ], 10);
-        cy.contains('I Am A Changed Project Name')
-            .should('be.visible');
-    });
-
-    it('Edit existing project id', function () {
-        cy.visit('/administrator/');
-        cy.get('[data-cy=skillsBTableTotalRows]')
-            .should('have.text', '10');
-
-        cy.get('[data-cy=editProjectIdproj1]')
-            .click();
-        cy.get('[data-cy=enableIdInput]').click({force: true});
-        cy.get('[data-cy="idInputValue"]')
-            .type('A');
-        cy.get('button[data-cy=saveProjectButton]')
-            .click();
-        cy.get('[data-cy="projCell_proj1A"]')
-    });
-
-    it('Manage existing project using Button', function () {
-        cy.intercept('GET', '/app/projects')
-            .as('loadProjects');
-        cy.intercept('GET', '/app/userInfo')
-            .as('loadUserInfo');
-
-        cy.visit('/administrator/');
-        cy.wait('@loadUserInfo');
-        cy.wait('@loadProjects');
-
-        cy.get('[data-cy="projectsTable"]')
-            .should('exist');
-        cy.get('[data-cy=skillsBTableTotalRows]')
-            .should('have.text', '10');
-
-        cy.get('[data-cy=manageProjBtn_proj1]')
-            .click();
-
-        cy.contains('PROJECT: This is project 1')
-            .should('be.visible');
-        cy.contains('ID: proj1')
-            .should('be.visible');
-    });
-
-    it('Manage existing project using Link', function () {
-        cy.intercept('GET', '/app/projects')
-            .as('loadProjects');
-        cy.intercept('GET', '/app/userInfo')
-            .as('loadUserInfo');
-
-        cy.visit('/administrator/');
-        cy.wait('@loadUserInfo');
-        cy.wait('@loadProjects');
-
-        cy.get('[data-cy="projectsTable"]')
-            .should('exist');
-        cy.get('[data-cy=skillsBTableTotalRows]')
-            .should('have.text', '10');
-
-        cy.get('[data-cy=manageProjLink_proj1]')
-            .click();
-
-        cy.contains('PROJECT: This is project 1')
-            .should('be.visible');
-        cy.contains('ID: proj1')
-            .should('be.visible');
-    });
-
-    it('Sort by project id', function () {
-        cy.intercept('GET', '/app/projects')
-            .as('loadProjects');
-        cy.intercept('GET', '/app/userInfo')
-            .as('loadUserInfo');
-
-        cy.visit('/administrator/');
-        cy.wait('@loadUserInfo');
-        cy.wait('@loadProjects');
-
-        cy.get('[data-cy="projectsTable"]')
-            .should('exist');
-        cy.get('[data-cy=skillsBTableTotalRows]')
-            .should('have.text', '10');
-
-        cy.get(`${tableSelector}`)
-            .contains('Project')
-            .click();
-        cy.validateTable(tableSelector, [
-            [{
-                colIndex: 0,
-                value: 'project 1'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 2'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 3'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 4'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 5'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 6'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 7'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 8'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 9'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 10'
-            }],
-        ], 10);
-
-        cy.get(`${tableSelector}`)
-            .contains('Project')
-            .click();
-        cy.validateTable(tableSelector, [
-            [{
-                colIndex: 0,
-                value: 'project 10'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 9'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 8'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 7'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 6'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 5'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 4'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 3'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 2'
-            }],
-            [{
-                colIndex: 0,
-                value: 'project 1'
-            }],
-        ], 10);
-    });
-
-    it('Validate project stats', function () {
-
-        const now = dayjs()
-            .utc();
-        cy.intercept('GET', '/app/projects')
-            .as('loadProjects');
-        cy.intercept('GET', '/app/userInfo')
-            .as('loadUserInfo');
-
-        cy.createProject(11);
-        cy.createSubject(11);
-        cy.createSkill(11);
-        cy.reportSkill(11, 1, 'user@skills.org', now.subtract(2, 'months')
-            .format('YYYY-MM-DD HH:mm'));
-
-        cy.visit('/administrator/');
-        cy.wait('@loadUserInfo');
-        cy.wait('@loadProjects');
-
-        cy.get('[data-cy="projectsTable"]')
-            .should('exist');
-        cy.get('[data-cy=skillsBTableTotalRows]')
-            .should('have.text', '11');
-
-        cy.get('[data-cy="projectsTable-projectFilter"]')
-            .type('project 11');
-        cy.get('[data-cy="projectsTable-filterBtn"]')
-            .click();
-
-        cy.get(`${tableSelector}`)
-            .contains('Project')
-            .click();
-        cy.validateTable(tableSelector, [
-            [
-                {
-                    colIndex: 0,
-                    value: 'project 1'
-                },
-                {
-                    colIndex: 1,
-                    value: '1'
-                },
-                {
-                    colIndex: 2,
-                    value: '1'
-                },
-                {
-                    colIndex: 3,
-                    value: '200'
-                },
-                {
-                    colIndex: 4,
-                    value: '0'
-                },
-            ],
-        ], 1);
-    });
-
-    it('Project Table View: edit focus should be returned to project edit button', () => {
-        cy.visit('/administrator/');
-        cy.get('[data-cy="editProjectIdproj10"]')
-            .click();
-
-        cy.get('[data-cy="closeProjectButton"]')
-            .click();
-        cy.get('[data-cy="editProjectIdproj10"]')
-            .should('have.focus');
-
-        cy.get('[data-cy="editProjectIdproj9"]')
-            .click();
-        cy.wait(250);
-        cy.get('body')
-            .type('{esc}{esc}');
-        cy.get('[data-cy="editProjectIdproj9"]')
-            .should('have.focus');
-
-        cy.get('[data-cy="editProjectIdproj8"]')
-            .click();
-
-        cy.get('[aria-label=Close]')
-            .click();
-        cy.get('[data-cy="editProjectIdproj8"]')
-            .should('have.focus');
-
-        cy.intercept('POST', '/admin/projects/proj7')
-            .as('nameChange');
-        cy.intercept('GET', '/admin/projects/proj7')
-            .as('reload');
-        cy.get('[data-cy="editProjectIdproj7"]')
-            .click();
-        cy.get('[data-cy=projectName]')
-            .type('123');
-        cy.get('[data-cy=saveProjectButton]')
-            .click();
-        cy.wait('@nameChange');
-        cy.wait('@reload');
-        cy.get('[data-cy="manageProjLink_proj7"]')
-            .contains('This is project 7123');
-        cy.get('[data-cy="editProjectIdproj7"]')
-            .should('have.focus');
-    });
-
-    it('Canceling delete dialog should return focus to delete button when projects are presented in table view', () => {
-
-        cy.intercept('GET', '/app/userInfo')
-            .as('loadUserInfo');
-        cy.visit('/administrator/');
-        cy.wait('@loadUserInfo');
-        cy.get('[data-cy=deleteProjectButton_proj10]')
-            .click();
-        cy.get('[data-cy=closeRemovalSafetyCheck]')
-            .click();
-        cy.wait(200);
-        cy.get('[data-cy=deleteProjectButton_proj10]')
-            .should('have.focus');
-    });
-
-    const maxNumProjects = 25;
-    it('projects table validation: user cannot create more than configured max projects', () => {
-        for (let i = numProjCreated + 1; i <= maxNumProjects; i += 1) {
-            cy.createProject(i);
-        }
-        cy.visit('/administrator/');
-        cy.get('[data-cy="addProjectDisabled"]')
-            .contains('Cannot create or copy projects - The maximum number of Projects allowed is 25');
-        cy.get('[data-cy="newProjectButton"]')
-            .should('be.disabled');
-        cy.get('[data-cy="copyProjectIdproj25"]')
-            .should('be.disabled');
-        cy.get('[data-cy="copyProjectIdproj24"]')
-            .should('be.disabled');
-        cy.get('[data-cy="copyProjectIdproj23"]')
-            .should('be.disabled');
-    });
-
-    it('root user can create unlimited number of projects', () => {
-        cy.logout();
-        cy.fixture('vars.json')
-            .then((vars) => {
-                cy.login(vars.rootUser, vars.defaultPass);
-            });
-        for (let i = numProjCreated + 1; i <= maxNumProjects; i += 1) {
-            cy.createProject(i);
-        }
-        for (let i = 1; i <= maxNumProjects; i += 1) {
-            cy.request('POST', `/root/pin/proj${i}`, {});
-        }
-        cy.visit('/administrator/');
-        cy.get('[data-cy="copyProjectIdproj25"]')
-        cy.get('[data-cy="addProjectDisabled"]').should('not.exist')
-        cy.get('[data-cy="newProjectButton"]').should('be.enabled');
-        cy.get('[data-cy="copyProjectIdproj25"]')
-            .should('be.enabled');
-        cy.get('[data-cy="copyProjectIdproj24"]')
-            .should('be.enabled');
-        cy.get('[data-cy="copyProjectIdproj23"]')
-            .should('be.enabled');
-
-        // save new project as root
-        cy.get('[data-cy="newProjectButton"]').click()
-        cy.get('[data-cy="projectName"]')
-            .type('NewProj');
-        cy.get('[data-cy="saveProjectButton"]').click();
-        cy.get('[data-cy="manageProjLink_NewProj"]')
-
-        // copy project as root
-        cy.get('[data-cy="copyProjectIdproj25"]').click();
-        cy.get('[data-cy="projectName"]')
-            .type('Copy Proj');
-        cy.get('[data-cy="saveProjectButton"]').click();
-        cy.get('[data-cy="allDoneBtn"]').click();
-        cy.get('[data-cy="manageProjLink_CopyProj"]')
-    });
-
-});
-
diff --git a/e2e-tests/cypress/e2e/register_root_user_spec.js b/e2e-tests/cypress/e2e/register_root_user_spec.js
index 67428ac592..fb059bcfb0 100644
--- a/e2e-tests/cypress/e2e/register_root_user_spec.js
+++ b/e2e-tests/cypress/e2e/register_root_user_spec.js
@@ -31,7 +31,7 @@ describe('Register Root Users', () => {
             });
     });
 
-    it('register root user', () => {
+    it.only('register root user', () => {
         const username = 'rob.smith@madeup.org';
         const pass = 'password';
 
diff --git a/service/src/main/resources/application.yml b/service/src/main/resources/application.yml
index e6f8721045..d2b11098d6 100644
--- a/service/src/main/resources/application.yml
+++ b/service/src/main/resources/application.yml
@@ -125,7 +125,7 @@ skills:
       maxSubjectsPerProject: 25
       maxBadgesPerProject: 25
       maxSkillsPerSubject: 100
-      numProjectsForTableView: 10
+      numProjectsToStartShowingAsCards: 6
       #it may be necessary to use the (?s) modifier for paragraph validation regexes, depending on the regex specified
       paragraphValidationRegex:
       paragraphValidationMessage: