diff --git a/dashboard/src/components/projects.js b/dashboard/src/components/projects.js
index 25ce168..8edb998 100644
--- a/dashboard/src/components/projects.js
+++ b/dashboard/src/components/projects.js
@@ -463,7 +463,7 @@ export default {
     const toolbar = m("div.d-sm-flex.mb-4", [
       m(
         "h1.h3.mb-0.mr-auto.text-gray-800",
-        LocalState.currentProject ? LocalState.currentProject : "Projects"
+        LocalState.currentProject ? LocalState.currentProject.name : "Projects"
       ),
       m("div.dropdown.mr-2", [
         m(
@@ -480,9 +480,9 @@ export default {
             return m(
               "a.btn.dropdown-item",
               {
-                onclick: LocalState.fetchProjectStats
+                onclick: () => { LocalState.fetchProjectStats(project) }
               },
-              project
+              project.name
             );
           })
         )
diff --git a/dashboard/src/models/ProjectState.js b/dashboard/src/models/ProjectState.js
index 3a4c2b6..6801dea 100644
--- a/dashboard/src/models/ProjectState.js
+++ b/dashboard/src/models/ProjectState.js
@@ -5,8 +5,17 @@ import TimeRange from "./TimeRange";
 import utils from "../utils.js";
 import * as auth from "../auth";
 
+/**
+ * @typedef {Object} Project
+ * @property {string} name
+ * @property {string} desc
+ * @property {number} totalSeconds
+*/
+
 const Model = {
+  /** @type {Project[]} */
   projects: [],
+  /** @type {Project?} */
   currentProject: null,
   dates: null,
   obj: null,
@@ -16,10 +25,11 @@ const Model = {
     Model.dates = null;
     Model.obj = null;
   },
+  /** @param {Project[]} projects */
   initProjectList: projects => {
-    Model.projects = _.orderBy(projects, ["totalSeconds"], ["desc"])
-      .map(p => p.name)
-      .filter(n => n !== "Other");
+    Model.projects = _.orderBy(projects, ["totalSeconds", "name"], ["desc", "asc"])
+      .filter(n => n.name !== "Other")
+      .sort((a, b) => a.name.localeCompare(b.name));
 
     if (Model.projects.length > 0) {
       Model.currentProject = Model.projects[0];
@@ -27,16 +37,17 @@ const Model = {
 
     Model.fetchProjectStats();
   },
-  fetchProjectStats: event => {
+  /** @param {Project?} project */
+  fetchProjectStats: project => {
     // If it was triggered by a click event.
-    if (event) Model.currentProject = event.target.innerHTML;
+    if (project) Model.currentProject = project
 
     const start = new Date();
     const today = new Date();
     start.setDate(start.getDate() - TimeRange.numOfDays);
 
     m.request({
-      url: `/api/v1/users/current/projects/${Model.currentProject}`,
+      url: `/api/v1/users/current/projects/${Model.currentProject.name}`,
       responseType: "json",
       headers: {
         authorization: auth.getHeaderToken()
@@ -54,7 +65,7 @@ const Model = {
           new Date(obj.endDate)
         );
       })
-      .catch(err => auth.retryCall(err, () => Model.fetchProjectStats(event)));
+      .catch(err => auth.retryCall(err, () => Model.fetchProjectStats(project)));
   }
 };