diff --git a/twenty-backend/lib/twenty-backend/migration/3_add_color_to_projects.rb b/twenty-backend/lib/twenty-backend/migration/3_add_color_to_projects.rb
new file mode 100644
index 0000000..21b6c19
--- /dev/null
+++ b/twenty-backend/lib/twenty-backend/migration/3_add_color_to_projects.rb
@@ -0,0 +1,10 @@
+class AddColorToProjects < ActiveRecord::Migration[7.1]
+  def up
+    default = Twenty::ColorableMixin.random_color
+    add_column :projects, :color, :string, null: false, default:
+  end
+
+  def down
+    drop_column :projects, :color
+  end
+end
diff --git a/twenty-backend/lib/twenty-backend/model.rb b/twenty-backend/lib/twenty-backend/model.rb
index 1acb7b0..3518861 100644
--- a/twenty-backend/lib/twenty-backend/model.rb
+++ b/twenty-backend/lib/twenty-backend/model.rb
@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 class Twenty::Model < ActiveRecord::Base
+  require_relative "model/mixin/colorable_mixin"
   require_relative "model/project"
   require_relative "model/task"
 end
diff --git a/twenty-backend/lib/twenty-backend/model/mixin/colorable_mixin.rb b/twenty-backend/lib/twenty-backend/model/mixin/colorable_mixin.rb
new file mode 100644
index 0000000..d243c4f
--- /dev/null
+++ b/twenty-backend/lib/twenty-backend/model/mixin/colorable_mixin.rb
@@ -0,0 +1,24 @@
+module Twenty::ColorableMixin
+  extend self
+
+  COLORS =  [
+    '#222222', '#333333', '#444444', '#555555', '#666666',
+    '#777777', '#888888', '#999999', '#AAAAAA', '#BBBBBB',
+    '#CCCCCC', '#DDDDDD', '#990000', '#009900', '#000099',
+    '#990099', '#009999', '#999900', '#990099', '#999999'
+  ]
+
+  def self.included(klass)
+    klass.before_validation :set_random_color, on: :create
+  end
+
+  def random_color
+    COLORS.sample
+  end
+
+  private
+
+  def set_random_color
+    self.color = random_color
+  end
+end
diff --git a/twenty-backend/lib/twenty-backend/model/project.rb b/twenty-backend/lib/twenty-backend/model/project.rb
index 6be8248..1ed619f 100644
--- a/twenty-backend/lib/twenty-backend/model/project.rb
+++ b/twenty-backend/lib/twenty-backend/model/project.rb
@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 class Twenty::Project < Twenty::Model
+  include Twenty::ColorableMixin
   self.table_name = "projects"
 
   ##
@@ -13,7 +14,7 @@ class Twenty::Project < Twenty::Model
   has_many :tasks, class_name: "Twenty::Task"
 
   def to_json(options = {})
-    {id:, name:, path:}.to_json(options)
+    {id:, name:, path:, color:}.to_json(options)
   end
 
   ##
diff --git a/twenty-frontend/src/css/_lists.scss b/twenty-frontend/src/css/_lists.scss
index d0fe82b..8b6d756 100644
--- a/twenty-frontend/src/css/_lists.scss
+++ b/twenty-frontend/src/css/_lists.scss
@@ -21,7 +21,8 @@ ul.collection {
 ul.collection li.item {
   display: flex;
   flex-wrap: wrap;
-  padding-bottom: 5px;
+  height: 85px;
+
   a {
     display: flex;
     flex-direction: column;
@@ -33,9 +34,24 @@ ul.collection li.item {
       padding-bottom: 5px;
       font-size: smaller;
     }
+
     .subtitle {
       font-size: small;
       color: $secondary-color;
+      .tag {
+        padding: 2.5px;
+        color: $primary-color;
+        border: 1px solid $secondary-color;
+        border-radius: 5px;
+        font-size: small;
+        font-weight: bold;
+      }
+    }
+
+    .break {
+      display: flex;
+      height: 10px;
+      width: 100%;
     }
   }
   ul.actions {
diff --git a/twenty-frontend/src/js/components/Tasks.tsx b/twenty-frontend/src/js/components/Tasks.tsx
index 298e04b..4ac4e05 100644
--- a/twenty-frontend/src/js/components/Tasks.tsx
+++ b/twenty-frontend/src/js/components/Tasks.tsx
@@ -71,8 +71,14 @@ export function Tasks() {
                     <a className="w-85" href={editHref}>
                       <span className="title">{task.title}</span>
                       <span className="subtitle">
-                        {datetime.toFormat("dd LLL, yyyy")} at{" "}
-                        {datetime.toFormat("HH:mm")}
+                        <span className="datetime">
+                          {datetime.toFormat("dd LLL, yyyy")} at{" "}
+                          {datetime.toFormat("HH:mm")}
+                        </span>
+                        <span className="break"></span>
+                        <span style={{backgroundColor: task.project.color}} className="tag">
+                          {task.project.name}
+                        </span>
                       </span>
                     </a>
                     <ul className="actions">
diff --git a/twenty-frontend/src/js/types/schema.ts b/twenty-frontend/src/js/types/schema.ts
index c5968e0..b347b46 100644
--- a/twenty-frontend/src/js/types/schema.ts
+++ b/twenty-frontend/src/js/types/schema.ts
@@ -7,6 +7,7 @@ export type Project = {
   id: number;
   name: string;
   path: string;
+  color: string;
 };
 
 export type Task = {
@@ -14,7 +15,7 @@ export type Task = {
   title: string;
   content: string;
   status: TASK_STATUS;
+  project: Project;
   created_at: string;
   updated_at: string;
-  project_id: number;
 };