diff --git a/app/Http/Controllers/ViewProjectsController.php b/app/Http/Controllers/ViewProjectsController.php
index d5660820b6..3423c8a187 100644
--- a/app/Http/Controllers/ViewProjectsController.php
+++ b/app/Http/Controllers/ViewProjectsController.php
@@ -6,21 +6,12 @@
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Gate;
 use Illuminate\View\View;
 
 final class ViewProjectsController extends AbstractController
 {
-    public function viewAllProjects(): View|RedirectResponse
-    {
-        return $this->viewProjects(true);
-    }
-
-    public function viewActiveProjects(): View|RedirectResponse
-    {
-        return $this->viewProjects();
-    }
-
-    private function viewProjects(bool $all = false): View|RedirectResponse
+    public function viewProjects(): View|RedirectResponse
     {
         $num_public_projects = (int) DB::select('
                                      SELECT COUNT(*) AS c FROM project WHERE public=?
@@ -31,8 +22,8 @@ private function viewProjects(bool $all = false): View|RedirectResponse
             return $this->redirectToLogin();
         }
 
-        return $this->vue('all-projects', 'Projects', [
-            'show-all' => $all,
-        ], false);
+        return $this->vue('projects-page', 'Projects', [
+            'can-create-projects' => Gate::allows('create', Project::class),
+        ]);
     }
 }
diff --git a/app/Models/Project.php b/app/Models/Project.php
index f982a70540..566bfffb85 100644
--- a/app/Models/Project.php
+++ b/app/Models/Project.php
@@ -3,6 +3,7 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
@@ -46,6 +47,7 @@
  * @property bool $viewsubprojectslink
  * @property ?string $ldapfilter
  * @property ?string $banner
+ * @property ?string $logoUrl
  *
  * @method Builder<Project> forUser()
  * @method Builder<Project> administeredByUser()
@@ -119,6 +121,22 @@ class Project extends Model
     public const ACCESS_PUBLIC = 1;
     public const ACCESS_PROTECTED = 2;
 
+    /**
+     * @return Attribute<?string,void>
+     */
+    protected function logoUrl(): Attribute
+    {
+        return Attribute::make(
+            get: function (mixed $value, array $attributes): ?string {
+                if ((int) $attributes['imageid'] === 0) {
+                    return null;
+                }
+
+                return url('/image/' . $attributes['imageid']);
+            },
+        );
+    }
+
     /**
      * Get the users who have been added to this project.  Note that this selects users with all roles.
      *
diff --git a/app/cdash/tests/CMakeLists.txt b/app/cdash/tests/CMakeLists.txt
index 7e18b6fd60..4db716b11d 100644
--- a/app/cdash/tests/CMakeLists.txt
+++ b/app/cdash/tests/CMakeLists.txt
@@ -260,7 +260,10 @@ add_browser_test(/Browser/Pages/ProjectSitesPageTest)
 
 add_browser_test(/Browser/Pages/ProjectMembersPageTest)
 
-add_browser_test(/Browser/Pages/ProjectPageTest)
+add_browser_test(/Browser/Pages/ProjectBuildsPageTest)
+
+add_browser_test(/Browser/Pages/ProjectsPageTest)
+set_property(TEST /Browser/Pages/ProjectsPageTest APPEND PROPERTY RUN_SERIAL TRUE)
 
 add_feature_test(/Feature/PurgeUnusedProjectsCommand)
 set_property(TEST /Feature/PurgeUnusedProjectsCommand APPEND PROPERTY RUN_SERIAL TRUE)
diff --git a/graphql/schema.graphql b/graphql/schema.graphql
index a3c48cf6a4..0e5a6fe7fc 100644
--- a/graphql/schema.graphql
+++ b/graphql/schema.graphql
@@ -160,6 +160,9 @@ type Project {
   "A LDAP group users must be a member of to access the project."
   ldapFilter: String @rename(attribute: "ldapfilter")
 
+  "A full URL string pointing to the location of the project's logo."
+  logoUrl: String
+
   builds(
     filters: _ @filter
   ): [Build!]! @hasMany(type: CONNECTION) @orderBy(column: "id")
diff --git a/phpstan-baseline.neon b/phpstan-baseline.neon
index e4e337a465..8eca736f97 100644
--- a/phpstan-baseline.neon
+++ b/phpstan-baseline.neon
@@ -5835,6 +5835,18 @@ parameters:
 			count: 1
 			path: app/Models/CoverageView.php
 
+		-
+			rawMessage: Binary operation "." between '/image/' and mixed results in an error.
+			identifier: binaryOp.invalid
+			count: 1
+			path: app/Models/Project.php
+
+		-
+			rawMessage: Cannot cast mixed to int.
+			identifier: cast.int
+			count: 1
+			path: app/Models/Project.php
+
 		-
 			rawMessage: Binary operation "." between non-falsy-string and mixed results in an error.
 			identifier: binaryOp.invalid
diff --git a/resources/js/vue/app.js b/resources/js/vue/app.js
index 78fc3a4328..0ec1f69312 100755
--- a/resources/js/vue/app.js
+++ b/resources/js/vue/app.js
@@ -20,7 +20,7 @@ const TestDetails = Vue.defineAsyncComponent(() => import('./components/TestDeta
 const HeaderNav = Vue.defineAsyncComponent(() => import('./components/page-header/HeaderNav.vue'));
 const ViewDynamicAnalysis = Vue.defineAsyncComponent(() => import('./components/ViewDynamicAnalysis.vue'));
 const ViewDynamicAnalysisFile = Vue.defineAsyncComponent(() => import('./components/ViewDynamicAnalysisFile.vue'));
-const AllProjects = Vue.defineAsyncComponent(() => import('./components/AllProjects.vue'));
+const ProjectsPage = Vue.defineAsyncComponent(() => import('./components/ProjectsPage.vue'));
 const SubProjectDependencies = Vue.defineAsyncComponent(() => import('./components/SubProjectDependencies.vue'));
 const BuildTestsPage = Vue.defineAsyncComponent(() => import('./components/BuildTestsPage.vue'));
 const ProjectSitesPage = Vue.defineAsyncComponent(() => import('./components/ProjectSitesPage.vue'));
@@ -47,7 +47,7 @@ const cdash_components = {
   HeaderNav,
   ViewDynamicAnalysis,
   ViewDynamicAnalysisFile,
-  AllProjects,
+  ProjectsPage,
   SubProjectDependencies,
   BuildTestsPage,
   ProjectSitesPage,
diff --git a/resources/js/vue/components/AllProjects.vue b/resources/js/vue/components/AllProjects.vue
deleted file mode 100644
index 967793d577..0000000000
--- a/resources/js/vue/components/AllProjects.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<template>
-  <loading-indicator :is-loading="!result">
-    <h1
-      v-if="result.projects.edges.length === 0"
-      class="text-info text-center"
-    >
-      No Projects Found
-    </h1>
-
-    <div v-else-if="error">
-      Unable to load projects!
-    </div>
-
-    <div v-else>
-      <DataTable
-        :columns="[
-          {
-            name: 'project',
-            displayName: 'Project',
-          },
-          {
-            name: 'description',
-            displayName: 'Description',
-            expand: true,
-          },
-          {
-            name: 'last_submission',
-            displayName: 'Last Submission',
-          },
-          {
-            name: 'activity',
-            displayName: 'Activity',
-          }
-        ]"
-        :rows="formatProjectResults(result.projects.edges)"
-        :full-width="true"
-        class="projects-table"
-        data-cy="all-projects"
-      >
-        <template #last_submission="{ props: { project } }">
-          <a
-            v-if="project.mostRecentBuild"
-            :href="$baseURL + '/index.php?project=' + project.name + '&date=' + DateTime.fromISO(project.mostRecentBuild.startTime).toISODate()"
-          >
-            {{ DateTime.fromISO(project.mostRecentBuild.startTime).toRelative() }}
-          </a>
-          <span v-else>never</span>
-        </template>
-        <template #activity="{ props: { activity_level } }">
-          <img
-            alt="Activity level"
-            :src="$baseURL + '/img/cleardot.gif'"
-            :class="'activity-level-' + activity_level"
-          >
-        </template>
-      </DataTable>
-      <div
-        v-if="result.projects.edges.length > 0"
-        style="float: right;"
-      >
-        <a
-          v-if="showAll"
-          :href="$baseURL + '/projects'"
-        >Show Active Projects</a>
-        <a
-          v-else
-          :href="$baseURL + '/projects/all'"
-        >Show All Projects</a>
-      </div>
-    </div>
-  </loading-indicator>
-</template>
-
-<script>
-
-import LoadingIndicator from './shared/LoadingIndicator.vue';
-import DataTable from './shared/DataTable.vue';
-import gql from 'graphql-tag';
-import { useQuery } from '@vue/apollo-composable';
-import { DateTime } from 'luxon';
-
-export default {
-  name: 'AllProjects',
-
-  components: {
-    DataTable,
-    LoadingIndicator,
-  },
-
-  props: {
-    showAll: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  setup() {
-    const { result, loading, error, onResult, fetchMore } = useQuery(gql`
-      query($after: String) {
-        projects(after: $after) {
-          edges {
-            node {
-              id
-              name
-              description
-              mostRecentBuild {
-                startTime
-              }
-              buildCount(filters: {
-                gt: {
-                  submissionTime: "${DateTime.now().minus({days: 7}).startOf('second').toISO({suppressMilliseconds: true})}"
-                }
-              })
-            }
-          }
-          pageInfo {
-            hasNextPage
-            hasPreviousPage
-            startCursor
-            endCursor
-          }
-        }
-      }
-    `);
-
-    onResult(async queryResult => {
-      if (queryResult.data && queryResult.data.projects.pageInfo.hasNextPage) {
-        fetchMore({
-          variables: {
-            after: queryResult.data.projects.pageInfo.endCursor,
-          },
-        });
-      }
-    });
-
-    return {
-      result,
-      loading,
-      error,
-    };
-  },
-  computed: {
-    DateTime() {
-      return DateTime;
-    },
-  },
-
-  methods: {
-    formatProjectResults: function (project_edges) {
-      return project_edges
-        .filter((project) => this.showAll ? true : project.node.buildCount > 0)
-        .map((project) => {
-          const num_builds_in_last_week = project.node.buildCount;
-
-          let activity_level;
-          if (num_builds_in_last_week >= 70) {
-            activity_level = 'high';
-          }
-          else if (num_builds_in_last_week >= 20) {
-            activity_level = 'medium';
-          }
-          else if (num_builds_in_last_week > 0) {
-            activity_level = 'low';
-          }
-          else {
-            activity_level = 'none';
-          }
-
-          return {
-            project: {
-              value: project.node.id,
-              text: project.node.name,
-              href: `${this.$baseURL}/index.php?project=${project.node.name}`,
-            },
-            description: project.node.description,
-            last_submission: {
-              value: project.node.mostRecentBuild?.startTime ?? '',
-              project: project.node,
-            },
-            activity: {
-              value: num_builds_in_last_week,
-              activity_level: activity_level,
-            },
-          };
-        });
-    },
-  },
-};
-</script>
diff --git a/resources/js/vue/components/ProjectsPage.vue b/resources/js/vue/components/ProjectsPage.vue
new file mode 100644
index 0000000000..b4404d09cc
--- /dev/null
+++ b/resources/js/vue/components/ProjectsPage.vue
@@ -0,0 +1,214 @@
+<template>
+  <div
+    class="tw-flex tw-flex-row tw-gap-4"
+    data-test="projects-page"
+  >
+    <div class="tw-flex tw-flex-col tw-gap-4 tw-w-full">
+      <div class="tw-flex tw-flex-row">
+        <div
+          role="tablist"
+          class="tw-tabs tw-tabs-bordered"
+        >
+          <a
+            role="tab"
+            class="tw-tab"
+            :class="{'tw-tab-active': currentTab === 'ACTIVE', 'tw-font-bold': currentTab === 'ACTIVE' }"
+            data-test="active-tab"
+            @click="currentTab = 'ACTIVE'"
+          >
+            Active
+          </a>
+          <a
+            role="tab"
+            class="tw-tab"
+            :class="{'tw-tab-active': currentTab === 'ALL', 'tw-font-bold': currentTab === 'ALL' }"
+            data-test="all-tab"
+            @click="currentTab = 'ALL'"
+          >
+            All
+          </a>
+        </div>
+        <span class="tw-flex-grow" />
+        <a
+          v-if="canCreateProjects"
+          role="button"
+          class="tw-btn"
+          :href="$baseURL + '/projects/new'"
+          data-test="create-project-button"
+        >
+          Create Project
+        </a>
+      </div>
+      <loading-indicator :is-loading="projects === null">
+        <div
+          v-if="projects.length === 0 && currentTab === 'ACTIVE'"
+          class="tw-italic tw-font-medium tw-text-neutral-500"
+          data-test="no-active-projects-message"
+        >
+          No projects with builds in the last 24 hours...
+        </div>
+        <div
+          v-else-if="projects.length === 0 && currentTab === 'ALL'"
+          class="tw-italic tw-font-medium tw-text-neutral-500"
+          data-test="no-projects-message"
+        >
+          No projects to display...
+        </div>
+        <table
+          v-else
+          class="tw-table tw-w-full"
+          data-test="projects-table"
+        >
+          <tbody>
+            <tr
+              v-for="{ node: project } in projects"
+              data-test="projects-table-row"
+            >
+              <td>
+                <project-logo
+                  :image-url="project.logoUrl"
+                  :project-name="project.name"
+                />
+              </td>
+              <td class="tw-align-middle tw-w-full">
+                <div class="tw-flex tw-flex-col tw-justify-center tw-h-full">
+                  <a
+                    class="tw-link tw-link-hover tw-font-bold"
+                    :href="$baseURL + '/index.php?project=' + project.name"
+                    data-test="project-name"
+                  >
+                    {{ project.name }}
+                    <font-awesome-icon
+                      :icon="projectVisibilityToIcon(project.visibility)"
+                      class="tw-text-neutral-500"
+                    />
+                  </a>
+                  <div
+                    v-if="project.description"
+                    class="tw-text-neutral-500"
+                  >
+                    {{ project.description }}
+                  </div>
+                </div>
+              </td>
+              <td>
+                <span
+                  v-if="project.mostRecentBuild"
+                  class="tw-text-nowrap tw-text-neutral-500"
+                >
+                  <font-awesome-icon :icon="FA.faCalendar" /> {{ DateTime.fromISO(project.mostRecentBuild?.submissionTime).toRelative() }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </loading-indicator>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import LoadingIndicator from './shared/LoadingIndicator.vue';
+import gql from 'graphql-tag';
+import {DateTime} from 'luxon';
+import ProjectLogo from './shared/ProjectLogo.vue';
+import {
+  faCalendar,
+  faEarthAmericas,
+  faShieldHalved,
+  faLock,
+} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+
+export default {
+  components: {FontAwesomeIcon, ProjectLogo, LoadingIndicator},
+  props: {
+    canCreateProjects: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      currentTab: 'ACTIVE', // Options: 'ACTIVE', 'ALL'
+    };
+  },
+
+  apollo: {
+    allVisibleProjects: {
+      query: gql`
+        query allVisibleProjects($countBuildsSince: DateTimeTz!) {
+          allVisibleProjects: projects {
+            edges {
+              node {
+                id
+                name
+                description
+                logoUrl
+                visibility
+                buildCount(filters: {
+                  gt: {
+                    submissionTime: $countBuildsSince
+                  }
+                })
+                mostRecentBuild {
+                  id
+                  startTime
+                  submissionTime
+                }
+              }
+            }
+          }
+        }
+      `,
+      variables() {
+        return {
+          countBuildsSince: DateTime.now().minus({days: 1}).startOf('second').toISO({suppressMilliseconds: true}),
+        };
+      },
+    },
+  },
+
+  computed: {
+    DateTime() {
+      return DateTime;
+    },
+
+    FA() {
+      return {
+        faCalendar,
+        faEarthAmericas,
+        faShieldHalved,
+        faLock,
+      };
+    },
+
+    projects() {
+      const edges = this.allVisibleProjects?.edges.filter(({node: project}) => this.currentTab === 'ALL' || project.buildCount > 0);
+      if (edges === null || edges === undefined) {
+        return null;
+      }
+
+      edges.sort((a, b) => b.node.buildCount - a.node.buildCount);
+      return edges;
+    },
+  },
+
+  methods: {
+    projectVisibilityToIcon(visibility) {
+      switch (visibility) {
+      case 'PUBLIC':
+        return this.FA.faEarthAmericas;
+      case 'PROTECTED':
+        return this.FA.faShieldHalved;
+      case 'PRIVATE':
+        return this.FA.faLock;
+      default:
+        throw `Invalid visibility ${visibility}`;
+      }
+    },
+  },
+};
+</script>
diff --git a/resources/js/vue/components/shared/ProjectLogo.vue b/resources/js/vue/components/shared/ProjectLogo.vue
new file mode 100644
index 0000000000..22d9ac1cc0
--- /dev/null
+++ b/resources/js/vue/components/shared/ProjectLogo.vue
@@ -0,0 +1,58 @@
+<template>
+  <div v-if="imageUrl">
+    <div class="tw-rounded tw-w-8">
+      <img
+        :alt="projectName + ' logo'"
+        :src="imageUrl"
+      >
+    </div>
+  </div>
+  <div
+    v-else
+    class="tw-avatar tw-placeholder"
+  >
+    <div
+      class="tw-rounded tw-w-8"
+      :class="placeholderColorClass"
+    >
+      <span>{{ projectName[0].toUpperCase() }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    projectName: {
+      type: String,
+      required: true,
+    },
+
+    imageUrl: {
+      type: [String, null],
+      required: true,
+    },
+  },
+
+  computed: {
+    placeholderColorClass() {
+      const colors = [
+        { bg: 'tw-bg-blue-100', text: 'tw-text-blue-800' },
+        { bg: 'tw-bg-green-100', text: 'tw-text-green-800' },
+        { bg: 'tw-bg-red-100', text: 'tw-text-red-800' },
+        { bg: 'tw-bg-purple-100', text: 'tw-text-purple-800' },
+        { bg: 'tw-bg-pink-100', text: 'tw-text-pink-800' },
+      ];
+
+      // We always want project names to map to the same color.
+      let hash = 0;
+      for (let i = 0; i < this.projectName.length; i++) {
+        hash += this.projectName.charCodeAt(i);
+      }
+      const color = colors[hash % colors.length];
+      return [color.bg, color.text];
+    },
+  },
+};
+</script>
diff --git a/routes/web.php b/routes/web.php
index bbc0e3f5ce..5c6b93dfc2 100755
--- a/routes/web.php
+++ b/routes/web.php
@@ -209,9 +209,9 @@
 // TODO: (williamjallen) This should be in the auth section, but needs to be here until we get rid of Protractor..
 Route::get('/manageOverview.php', 'ProjectOverviewController@manageOverview');
 
-Route::match(['get', 'post'], '/projects', 'ViewProjectsController@viewActiveProjects');
+Route::match(['get', 'post'], '/projects', 'ViewProjectsController@viewProjects');
 Route::permanentRedirect('/viewProjects.php', url('/projects'));
-Route::match(['get', 'post'], '/projects/all', 'ViewProjectsController@viewAllProjects');
+Route::permanentRedirect('/projects/all', url('/projects'));
 
 Route::get('/viewTest.php', 'ViewTestController@viewTest');
 
diff --git a/tests/Browser/Pages/ProjectPageTest.php b/tests/Browser/Pages/ProjectBuildsPageTest.php
similarity index 96%
rename from tests/Browser/Pages/ProjectPageTest.php
rename to tests/Browser/Pages/ProjectBuildsPageTest.php
index 967367c77e..adc7e901f5 100644
--- a/tests/Browser/Pages/ProjectPageTest.php
+++ b/tests/Browser/Pages/ProjectBuildsPageTest.php
@@ -8,7 +8,7 @@
 use Tests\BrowserTestCase;
 use Tests\Traits\CreatesProjects;
 
-class ProjectPageTest extends BrowserTestCase
+class ProjectBuildsPageTest extends BrowserTestCase
 {
     use CreatesProjects;
 
diff --git a/tests/Browser/Pages/ProjectsPageTest.php b/tests/Browser/Pages/ProjectsPageTest.php
new file mode 100644
index 0000000000..228918d43f
--- /dev/null
+++ b/tests/Browser/Pages/ProjectsPageTest.php
@@ -0,0 +1,236 @@
+<?php
+
+namespace Tests\Browser\Pages;
+
+use App\Http\Submission\Traits\UpdatesSiteInformation;
+use App\Models\Project;
+use App\Models\Site;
+use App\Models\SiteInformation;
+use App\Models\User;
+use Illuminate\Foundation\Testing\DatabaseTruncation;
+use Illuminate\Support\Carbon;
+use Illuminate\Support\Str;
+use Laravel\Dusk\Browser;
+use Tests\BrowserTestCase;
+use Tests\Traits\CreatesProjects;
+use Tests\Traits\CreatesSites;
+use Tests\Traits\CreatesUsers;
+
+class ProjectsPageTest extends BrowserTestCase
+{
+    use CreatesProjects;
+    use CreatesSites;
+    use CreatesUsers;
+    use DatabaseTruncation;
+    use UpdatesSiteInformation;
+
+    /**
+     * @var array<User>
+     */
+    private array $users = [];
+
+    /**
+     * @var array<Project>
+     */
+    private array $projects = [];
+
+    private Site $site;
+
+    public function setUp(): void
+    {
+        parent::setUp();
+
+        $this->site = $this->makeSite();
+        $this->updateSiteInfoIfChanged($this->site, new SiteInformation([]));
+    }
+
+    public function tearDown(): void
+    {
+        foreach ($this->users as $user) {
+            $user->delete();
+        }
+        $this->users = [];
+
+        foreach ($this->projects as $project) {
+            $project->delete();
+        }
+        $this->projects = [];
+
+        $this->site->delete();
+
+        parent::tearDown();
+    }
+
+    public function testCreateProjectButtonOnlyVisibleToAdminsByDefault(): void
+    {
+        $this->users['admin'] = $this->makeAdminUser();
+        $this->users['normal'] = $this->makeNormalUser();
+
+        $this->browse(function (Browser $browser): void {
+            $browser->loginAs($this->users['admin'])
+                ->visit('/projects')
+                ->whenAvailable('@projects-page', function (Browser $browser): void {
+                    $browser->assertVisible('@create-project-button');
+                });
+            $browser->loginAs($this->users['normal'])
+                ->visit('/projects')
+                ->whenAvailable('@projects-page', function (Browser $browser): void {
+                    $browser->assertMissing('@create-project-button');
+                });
+
+            $browser
+                ->visit('/projects')
+                ->whenAvailable('@projects-page', function (Browser $browser): void {
+                    $browser->assertMissing('@create-project-button');
+                });
+        });
+    }
+
+    public function testShowsMessageWhenNoProjects(): void
+    {
+        $this->users['admin'] = $this->makeAdminUser();
+
+        $this->browse(function (Browser $browser): void {
+            $browser->loginAs($this->users['admin'])
+                ->visit('/projects')
+                ->whenAvailable('@projects-page', function (Browser $browser): void {
+                    $browser->click('@all-tab')
+                        ->waitFor('@no-projects-message')
+                        ->assertVisible('@no-projects-message')
+                        ->assertMissing('@projects-table')
+                    ;
+                });
+
+            $this->projects['project1'] = $this->makePublicProject();
+
+            $browser->loginAs($this->users['admin'])
+                ->visit('/projects')
+                ->whenAvailable('@projects-page', function (Browser $browser): void {
+                    $browser->click('@all-tab')
+                        ->waitFor('@projects-table')
+                        ->assertMissing('@no-projects-message')
+                        ->assertSeeIn('@projects-table', $this->projects['project1']->name)
+                    ;
+                });
+        });
+    }
+
+    public function testShowsMessageWhenNoActiveProjects(): void
+    {
+        $this->projects['project1'] = $this->makePublicProject();
+        $build = $this->projects['project1']->builds()->create([
+            'siteid' => $this->site->id,
+            'name' => Str::uuid()->toString(),
+            'uuid' => Str::uuid()->toString(),
+            'submittime' => Carbon::now()->subDays(2),
+        ]);
+
+        $this->browse(function (Browser $browser) use ($build): void {
+            $browser->visit('/projects')
+                ->whenAvailable('@projects-page', function (Browser $browser): void {
+                    $browser->click('@active-tab')
+                        ->waitFor('@no-active-projects-message')
+                        ->assertVisible('@no-active-projects-message')
+                        ->assertMissing('@projects-table')
+                    ;
+                });
+
+            $build->submittime = Carbon::now();
+            $build->save();
+
+            $browser->visit('/projects')
+                ->whenAvailable('@projects-page', function (Browser $browser): void {
+                    $browser->click('@active-tab')
+                        ->waitFor('@projects-table')
+                        ->assertMissing('@no-active-projects-message')
+                        ->assertSeeIn('@projects-table', $this->projects['project1']->name)
+                    ;
+                });
+        });
+    }
+
+    public function testSortsProjectsByNumberOfBuildsInLastDay(): void
+    {
+        $this->projects['project1'] = $this->makePublicProject();
+        $this->projects['project1']->builds()->create([
+            'siteid' => $this->site->id,
+            'name' => Str::uuid()->toString(),
+            'uuid' => Str::uuid()->toString(),
+            'submittime' => Carbon::now()->subWeek(),
+        ]);
+        $this->projects['project1']->builds()->create([
+            'siteid' => $this->site->id,
+            'name' => Str::uuid()->toString(),
+            'uuid' => Str::uuid()->toString(),
+            'submittime' => Carbon::now(),
+        ]);
+
+        $this->projects['project2'] = $this->makePublicProject();
+        $this->projects['project2']->builds()->create([
+            'siteid' => $this->site->id,
+            'name' => Str::uuid()->toString(),
+            'uuid' => Str::uuid()->toString(),
+            'submittime' => Carbon::now(),
+        ]);
+        $this->projects['project2']->builds()->create([
+            'siteid' => $this->site->id,
+            'name' => Str::uuid()->toString(),
+            'uuid' => Str::uuid()->toString(),
+            'submittime' => Carbon::now()->subHour(),
+        ]);
+        $this->projects['project2']->builds()->create([
+            'siteid' => $this->site->id,
+            'name' => Str::uuid()->toString(),
+            'uuid' => Str::uuid()->toString(),
+            'submittime' => Carbon::now()->subHours(2),
+        ]);
+
+        $this->projects['project3'] = $this->makePublicProject();
+        $this->projects['project3']->builds()->create([
+            'siteid' => $this->site->id,
+            'name' => Str::uuid()->toString(),
+            'uuid' => Str::uuid()->toString(),
+            'submittime' => Carbon::now(),
+        ]);
+        $this->projects['project3']->builds()->create([
+            'siteid' => $this->site->id,
+            'name' => Str::uuid()->toString(),
+            'uuid' => Str::uuid()->toString(),
+            'submittime' => Carbon::now()->subHour(),
+        ]);
+
+        $this->browse(function (Browser $browser): void {
+            $browser->visit('/projects')
+                ->whenAvailable('@projects-page', function (Browser $browser): void {
+                    $browser->click('@all-tab')
+                        ->waitFor('@projects-table')
+                    ;
+
+                    self::assertSame($this->projects['project2']->name, $browser->elements('@project-name')[0]->getText());
+                    self::assertSame($this->projects['project3']->name, $browser->elements('@project-name')[1]->getText());
+                    self::assertSame($this->projects['project1']->name, $browser->elements('@project-name')[2]->getText());
+                });
+        });
+    }
+
+    public function testShowsDateOfLastSubmission(): void
+    {
+        $this->projects['project1'] = $this->makePublicProject();
+        $this->projects['project1']->builds()->create([
+            'siteid' => $this->site->id,
+            'name' => Str::uuid()->toString(),
+            'uuid' => Str::uuid()->toString(),
+            'submittime' => Carbon::now()->subWeek(),
+        ]);
+
+        $this->browse(function (Browser $browser): void {
+            $browser->visit('/projects')
+                ->whenAvailable('@projects-page', function (Browser $browser): void {
+                    $browser->click('@all-tab')
+                        ->waitFor('@projects-table')
+                        ->assertSeeIn('@projects-table', '7 days ago')
+                    ;
+                });
+        });
+    }
+}