diff --git a/backend/src/app/rpc/mutations/profile.clj b/backend/src/app/rpc/mutations/profile.clj
index 906ec83ad..12b8e9d64 100644
--- a/backend/src/app/rpc/mutations/profile.clj
+++ b/backend/src/app/rpc/mutations/profile.clj
@@ -16,7 +16,6 @@
    [app.loggers.audit :as audit]
    [app.media :as media]
    [app.metrics :as mtx]
-   [app.rpc.mutations.projects :as projects]
    [app.rpc.mutations.teams :as teams]
    [app.rpc.queries.profile :as profile]
    [app.setup.initial-data :as sid]
@@ -256,28 +255,15 @@
                       :code :email-already-exists
                       :cause e)))))))
 
-
 (defn create-profile-relations
   [conn profile]
-  (let [team    (teams/create-team conn {:profile-id (:id profile)
-                                         :name "Default"
-                                         :is-default true})
-        project (projects/create-project conn {:profile-id (:id profile)
-                                               :team-id (:id team)
-                                               :name "Drafts"
-                                               :is-default true})
-        params  {:team-id (:id team)
-                 :profile-id (:id profile)
-                 :project-id (:id project)
-                 :role :owner}]
-
-    (teams/create-team-role conn params)
-    (projects/create-project-role conn params)
-
+  (let [team (teams/create-team conn {:profile-id (:id profile)
+                                      :name "Default"
+                                      :is-default true})]
     (-> profile
         (profile/strip-private-attrs)
         (assoc :default-team-id (:id team))
-        (assoc :default-project-id (:id project)))))
+        (assoc :default-project-id (:default-project-id team)))))
 
 ;; --- MUTATION: Login
 
diff --git a/backend/src/app/rpc/mutations/teams.clj b/backend/src/app/rpc/mutations/teams.clj
index 625a13af6..0f44afb17 100644
--- a/backend/src/app/rpc/mutations/teams.clj
+++ b/backend/src/app/rpc/mutations/teams.clj
@@ -32,6 +32,7 @@
 ;; --- Mutation: Create Team
 
 (declare create-team)
+(declare create-team-entry)
 (declare create-team-role)
 (declare create-team-default-project)
 
@@ -42,15 +43,21 @@
 (sv/defmethod ::create-team
   [{:keys [pool] :as cfg} params]
   (db/with-atomic [conn pool]
-    (let [team   (create-team conn params)
-          params (assoc params
-                        :team-id (:id team)
-                        :role :owner)]
-      (create-team-role conn params)
-      (create-team-default-project conn params)
-      team)))
+    (create-team conn params)))
 
 (defn create-team
+  "This is a complete team creation process, it creates the team
+  object and all related objects (default role and default project)."
+  [conn params]
+  (let [team    (create-team-entry conn params)
+        params  (assoc params
+                       :team-id (:id team)
+                       :role :owner)
+        project (create-team-default-project conn params)]
+    (create-team-role conn params)
+    (assoc team :default-project-id (:id project))))
+
+(defn- create-team-entry
   [conn {:keys [id name is-default] :as params}]
   (let [id         (or id (uuid/next))
         is-default (if (boolean? is-default) is-default false)]
@@ -59,23 +66,24 @@
                  :name name
                  :is-default is-default})))
 
-(defn create-team-role
+(defn- create-team-role
   [conn {:keys [team-id profile-id role] :as params}]
   (let [params {:team-id team-id
                 :profile-id profile-id}]
     (->> (perms/assign-role-flags params role)
          (db/insert! conn :team-profile-rel))))
 
-(defn create-team-default-project
+(defn- create-team-default-project
   [conn {:keys [team-id profile-id] :as params}]
   (let [project {:id (uuid/next)
                  :team-id team-id
                  :name "Drafts"
-                 :is-default true}]
-    (projects/create-project conn project)
+                 :is-default true}
+        project (projects/create-project conn project)]
     (projects/create-project-role conn {:project-id (:id project)
                                         :profile-id profile-id
-                                        :role :owner})))
+                                        :role :owner})
+    project))
 
 ;; --- Mutation: Update Team
 
@@ -293,28 +301,18 @@
 
 ;; --- Mutation: Invite Member
 
+(declare create-team-invitation)
+
 (s/def ::email ::us/email)
 (s/def ::invite-team-member
   (s/keys :req-un [::profile-id ::team-id ::email ::role]))
 
 (sv/defmethod ::invite-team-member
-  [{:keys [pool tokens] :as cfg} {:keys [profile-id team-id email role] :as params}]
+  [{:keys [pool] :as cfg} {:keys [profile-id team-id email role] :as params}]
   (db/with-atomic [conn pool]
     (let [perms    (teams/get-permissions conn profile-id team-id)
           profile  (db/get-by-id conn :profile profile-id)
-          member   (profile/retrieve-profile-data-by-email conn email)
-          team     (db/get-by-id conn :team team-id)
-          itoken   (tokens :generate
-                           {:iss :team-invitation
-                            :exp (dt/in-future "48h")
-                            :profile-id (:id profile)
-                            :role role
-                            :team-id team-id
-                            :member-email (:email member email)
-                            :member-id (:id member)})
-          ptoken   (tokens :generate-predefined
-                           {:iss :profile-identity
-                            :profile-id (:id profile)})]
+          team     (db/get-by-id conn :team team-id)]
 
       (when-not (:is-admin perms)
         (ex/raise :type :validation
@@ -326,24 +324,71 @@
                   :code :profile-is-muted
                   :hint "looks like the profile has reported repeatedly as spam or has permanent bounces"))
 
-      (when (and member (not (eml/allow-send-emails? conn member)))
-        (ex/raise :type :validation
-                  :code :member-is-muted
-                  :hint "looks like the profile has reported repeatedly as spam or has permanent bounces"))
-
-      ;; Secondly check if the invited member email is part of the
-      ;; global spam/bounce report.
-      (when (eml/has-bounce-reports? conn email)
-        (ex/raise :type :validation
-                  :code :email-has-permanent-bounces
-                  :hint "looks like the email you invite has been repeatedly reported as spam or permanent bounce"))
-
-      (eml/send! {::eml/conn conn
-                  ::eml/factory eml/invite-to-team
-                  :public-uri (:public-uri cfg)
-                  :to email
-                  :invited-by (:fullname profile)
-                  :team (:name team)
-                  :token itoken
-                  :extra-data ptoken})
+      (create-team-invitation
+       (assoc cfg
+              :email email
+              :conn conn
+              :team team
+              :profile profile
+              :role role))
       nil)))
+
+(defn- create-team-invitation
+  [{:keys [conn tokens team profile role email] :as cfg}]
+  (let [member   (profile/retrieve-profile-data-by-email conn email)
+        itoken   (tokens :generate
+                         {:iss :team-invitation
+                          :exp (dt/in-future "48h")
+                          :profile-id (:id profile)
+                          :role role
+                          :team-id (:id team)
+                          :member-email (:email member email)
+                          :member-id (:id member)})
+        ptoken   (tokens :generate-predefined
+                         {:iss :profile-identity
+                          :profile-id (:id profile)})]
+
+    (when (and member (not (eml/allow-send-emails? conn member)))
+      (ex/raise :type :validation
+                :code :member-is-muted
+                :hint "looks like the profile has reported repeatedly as spam or has permanent bounces"))
+
+    ;; Secondly check if the invited member email is part of the
+    ;; global spam/bounce report.
+    (when (eml/has-bounce-reports? conn email)
+      (ex/raise :type :validation
+                :code :email-has-permanent-bounces
+                :hint "looks like the email you invite has been repeatedly reported as spam or permanent bounce"))
+
+    (eml/send! {::eml/conn conn
+                ::eml/factory eml/invite-to-team
+                :public-uri (:public-uri cfg)
+                :to email
+                :invited-by (:fullname profile)
+                :team (:name team)
+                :token itoken
+                :extra-data ptoken})))
+
+
+;; --- Mutation: Create Team & Invite Members
+
+(s/def ::emails ::us/set-of-emails)
+(s/def ::create-team-and-invite-members
+  (s/and ::create-team (s/keys :req-un [::emails ::role])))
+
+(sv/defmethod ::create-team-and-invite-members
+  [{:keys [pool] :as cfg} {:keys [profile-id emails role] :as params}]
+  (db/with-atomic [conn pool]
+    (let [team    (create-team conn params)
+          profile (db/get-by-id conn :profile profile-id)]
+
+      ;; Create invitations for all provided emails.
+      (doseq [email emails]
+        (create-team-invitation
+         (assoc cfg
+                :conn conn
+                :team team
+                :profile profile
+                :email email
+                :role role)))
+      team)))
diff --git a/backend/src/app/rpc/queries/projects.clj b/backend/src/app/rpc/queries/projects.clj
index 47886784a..1e92869e4 100644
--- a/backend/src/app/rpc/queries/projects.clj
+++ b/backend/src/app/rpc/queries/projects.clj
@@ -79,12 +79,14 @@
             where f.project_id = p.id
               and deleted_at is null) as count
      from project as p
+    inner join team as t on (t.id = p.team_id)
      left join team_project_profile_rel as tpp
             on (tpp.project_id = p.id and
                 tpp.team_id = p.team_id and
                 tpp.profile_id = ?)
     where p.team_id = ?
       and p.deleted_at is null
+      and t.deleted_at is null
     order by p.modified_at desc")
 
 (defn retrieve-projects
@@ -108,26 +110,26 @@
 (def sql:all-projects
   "select p1.*, t.name as team_name, t.is_default as is_default_team
      from project as p1
-    inner join team as t
-            on t.id = p1.team_id
+    inner join team as t on (t.id = p1.team_id)
     where t.id in (select team_id
                      from team_profile_rel as tpr
                     where tpr.profile_id = ?
                       and (tpr.can_edit = true or
                            tpr.is_owner = true or
                            tpr.is_admin = true))
+      and t.deleted_at is null
       and p1.deleted_at is null
    union
    select p2.*, t.name as team_name, t.is_default as is_default_team
      from project as p2
-    inner join team as t
-              on t.id = p2.team_id
+    inner join team as t on (t.id = p2.team_id)
     where p2.id in (select project_id
                      from project_profile_rel as ppr
                     where ppr.profile_id = ?
                       and (ppr.can_edit = true or
                            ppr.is_owner = true or
                            ppr.is_admin = true))
+      and t.deleted_at is null
       and p2.deleted_at is null
     order by team_name, name;")
 
diff --git a/backend/test/app/services_projects_test.clj b/backend/test/app/services_projects_test.clj
index 5f23577f3..a59991e38 100644
--- a/backend/test/app/services_projects_test.clj
+++ b/backend/test/app/services_projects_test.clj
@@ -43,7 +43,7 @@
 
       (t/is (nil? (:error out)))
       (let [result (:result out)]
-        (t/is (= 1 (count result)))
+        (t/is (= 2 (count result)))
         (t/is project-id (get-in result [0 :id]))
         (t/is (= "test project" (get-in result [0 :name])))))
 
@@ -55,15 +55,15 @@
 
       (t/is (nil? (:error out)))
       (let [result (:result out)]
-        (t/is (= 2 (count result)))
+        (t/is (= 3 (count result)))
         (t/is (not= project-id (get-in result [0 :id])))
         (t/is (= "Drafts" (get-in result [0 :name])))
         (t/is (= "Default" (get-in result [0 :team-name])))
         (t/is (= true (get-in result [0 :is-default-team])))
-        (t/is project-id (get-in result [1 :id]))
-        (t/is (= "test project" (get-in result [1 :name])))
-        (t/is (= "team1" (get-in result [1 :team-name])))
-        (t/is (= false (get-in result [1 :is-default-team])))))
+        (t/is project-id (get-in result [2 :id]))
+        (t/is (= "test project" (get-in result [2 :name])))
+        (t/is (= "team1" (get-in result [2 :team-name])))
+        (t/is (= false (get-in result [2 :is-default-team])))))
 
     ;; rename project
     (let [data {::th/type :rename-project
@@ -95,7 +95,7 @@
       (t/is (nil? (:error out)))
       (t/is (nil? (:result out))))
 
-    ;; query a list of projects after delete"
+    ;; query a list of projects after delete
     (let [data {::th/type :projects
                 :team-id (:id team)
                 :profile-id (:id profile)}
@@ -103,7 +103,7 @@
       ;; (th/print-result! out)
       (t/is (nil? (:error out)))
       (let [result (:result out)]
-        (t/is (= 0 (count result)))))
+        (t/is (= 1 (count result)))))
   ))
 
 (t/deftest permissions-checks-create-project
diff --git a/backend/test/app/services_teams_test.clj b/backend/test/app/services_teams_test.clj
index 6dd7470da..6e2aaeea7 100644
--- a/backend/test/app/services_teams_test.clj
+++ b/backend/test/app/services_teams_test.clj
@@ -130,7 +130,7 @@
     (let [result (task {:max-age (dt/duration {:minutes 1})})]
       (t/is (nil? result)))
 
-    ;; query the list of projects of a after hard deletion
+    ;; query the list of projects after hard deletion
     (let [data {::th/type :projects
                 :team-id (:id team)
                 :profile-id (:id profile1)}
diff --git a/backend/test/app/test_helpers.clj b/backend/test/app/test_helpers.clj
index 43334b883..f503e5d66 100644
--- a/backend/test/app/test_helpers.clj
+++ b/backend/test/app/test_helpers.clj
@@ -126,7 +126,8 @@
                         :password "123123"
                         :is-demo false}
                        params)]
-     (->> (#'profile/create-profile conn params)
+     (->> params
+          (#'profile/create-profile conn)
           (#'profile/create-profile-relations conn)))))
 
 (defn create-project*
@@ -159,15 +160,10 @@
   ([i params] (create-team* *pool* i params))
   ([conn i {:keys [profile-id] :as params}]
    (us/assert uuid? profile-id)
-   (let [id   (mk-uuid "team" i)
-         team (#'teams/create-team conn {:id id
-                                         :profile-id profile-id
-                                         :name (str "team" i)})]
-     (#'teams/create-team-role conn
-                               {:team-id id
-                                :profile-id profile-id
-                                :role :owner})
-     team)))
+   (let [id   (mk-uuid "team" i)]
+     (teams/create-team conn {:id id
+                              :profile-id profile-id
+                              :name (str "team" i)}))))
 
 (defn create-file-media-object*
   ([params] (create-file-media-object* *pool* params))
@@ -350,3 +346,11 @@
 (defn reset-mock!
   [m]
   (reset! m @(mk/make-mock {})))
+
+(defn pause
+  []
+  (let [^java.io.Console cnsl (System/console)]
+    (println "[waiting RETURN]")
+    (.readLine cnsl)
+    nil))
+
diff --git a/frontend/resources/images/on-solo-hover.svg b/frontend/resources/images/on-solo-hover.svg
new file mode 100644
index 000000000..d75553178
--- /dev/null
+++ b/frontend/resources/images/on-solo-hover.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="24.47353642154394" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="10.276508697997087 -10.666460420698968 24.47353642154394 45.833972589785844" height="45.833972589785844" style="-webkit-print-color-adjust: exact;"><g id="shape-68c61310-2040-11ec-9082-1597698bcafa" width="133" height="70" fill="none"><g id="shape-68c61311-2040-11ec-9082-1597698bcafa"><path d="M34.15111509349208,-6.042576477324019C32.728545198285246,-6.330271155262835,31.92939323677365,-3.376021339875024,31.573755956590503,-2.4511143742279273C31.03134089353898,-4.792719923592813,32.95730466396617,-10.268928805500309,31.43334627304739,-10.431571776022338C29.909377991244583,-10.594250374600506,28.25067219538414,-7.913146659964696,27.49821990591863,-6.170389430908017C26.74573283532027,-4.427587759031667,25.891378375591557,-1.7644073640558418,25.713212854031553,-2.2272258928269366C25.535081233357232,-2.6900095615483224,27.15263561710435,-6.757552580227184,25.941143250794084,-7.1652527066157745C24.72968451746874,-7.572893837298125,23.954342086512952,-5.090038220419956,23.25052490786311,-3.268314742871553C21.417817942427064,1.4754114884185583,10.659070475242515,0.4358613513782075,10.659070475242515,0.4358613513782075L10.492289692115264,34.903869918353394C10.950455754343238,34.90895547471155,28.014759237585167,30.129601494621056,32.24939430527593,19.872789654186818C35.25119864070166,13.145361698193483,32.406657583041124,6.514941655593702,33.309134176787666,1.1371823352346837C33.78537439733827,-1.58885192629441,35.57368117762144,-5.754847357929975,34.15111509349208,-6.042576477324019ZZ" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g><g id="shape-68c61312-2040-11ec-9082-1597698bcafa"><path d="M22.85523475939408,17.21695965203071C22.427431361919844,16.01479714589459,23.05111296555242,14.69085378511636,24.24829081777807,14.259819026323385C25.445434386402667,13.828783886987821,26.762725789724755,14.45390600122937,27.19052918719808,15.656068507365035C27.618298301069444,16.85823063295993,26.994616697437777,18.18217399373725,25.79747312881318,18.61320913307327C24.60029527658753,19.044243891866245,23.283003873265443,18.41912177762515,22.85523475939408,17.21695965203071ZZ" style="stroke-width: 1; stroke: rgb(49, 239, 184); stroke-opacity: 1;"/></g><g id="shape-68c61313-2040-11ec-9082-1597698bcafa"><path d="M17.110277419337763,8.332660542501344C14.855684713780647,9.317767677909615,11.627251872240777,12.863450146366631,13.47442592751213,18.054309980863763C15.321633118238424,23.24527363442894,19.819776888222805,23.267580687635473,22.247438584220617,22.768891367604738" style="stroke-width: 1; stroke: rgb(49, 239, 184); stroke-opacity: 1;"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/on-solo.svg b/frontend/resources/images/on-solo.svg
new file mode 100644
index 000000000..08d76020d
--- /dev/null
+++ b/frontend/resources/images/on-solo.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="24.47353642154485" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="10.276508697995268 -10.66646042069624 24.47353642154485 45.833972589782206" height="45.833972589782206" style="-webkit-print-color-adjust: exact;"><g id="shape-b0db2ad1-203d-11ec-9082-1597698bcafa" width="133" height="70" fill="none"><g id="shape-b0db2ad2-203d-11ec-9082-1597698bcafa"><path d="M34.15111509349208,-6.042576477324474C32.728545198285246,-6.3302711552623805,31.92939323677365,-3.376021339874569,31.573755956590503,-2.4511143742274726C31.03134089353898,-4.792719923592813,32.95730466396617,-10.268928805500764,31.43334627304739,-10.431571776021883C29.909377991244583,-10.59425037460096,28.25067219538414,-7.913146659964696,27.49821990591863,-6.170389430908472C26.74573283532027,-4.427587759031667,25.891378375591557,-1.7644073640558418,25.713212854031553,-2.2272258928269366C25.535081233357232,-2.6900095615483224,27.15263561710435,-6.757552580227639,25.941143250794084,-7.165252706616229C24.72968451746874,-7.57289383729767,23.954342086512952,-5.090038220419956,23.25052490786311,-3.268314742871553C21.417817942427064,1.4754114884181035,10.659070475242515,0.4358613513777527,10.659070475242515,0.4358613513777527L10.492289692115264,34.90386991835294C10.950455754343238,34.90895547471155,28.014759237585167,30.129601494621056,32.24939430527593,19.872789654186818C35.25119864070166,13.145361698193483,32.406657583041124,6.514941655594157,33.309134176787666,1.1371823352346837C33.78537439733827,-1.58885192629441,35.57368117762144,-5.754847357929975,34.15111509349208,-6.042576477324474ZZ" style="fill: rgb(250, 181, 245);"/></g><g id="shape-b0db51e0-203d-11ec-9082-1597698bcafa"><path d="M22.85523475939408,17.21695965203071C22.427431361919844,16.01479714589459,23.05111296555242,14.690853785115905,24.24829081777807,14.259819026323385C25.445434386402667,13.828783886987367,26.762725789724755,14.45390600122937,27.19052918719808,15.65606850736549C27.618298301069444,16.85823063295993,26.994616697437777,18.182173993736797,25.79747312881318,18.613209133072814C24.60029527658753,19.044243891866245,23.283003873265443,18.41912177762515,22.85523475939408,17.21695965203071ZZ" style="stroke-width: 1; stroke: white;"/></g><g id="shape-b0db51e1-203d-11ec-9082-1597698bcafa"><path d="M17.110277419337763,8.33266054250089C14.855684713780647,9.317767677909615,11.627251872240777,12.863450146366631,13.47442592751213,18.054309980863763C15.321633118238424,23.245273634429395,19.819776888222805,23.267580687635927,22.247438584220617,22.768891367604738" style="stroke-width: 1; stroke: white;"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/on-teamup-hover.svg b/frontend/resources/images/on-teamup-hover.svg
new file mode 100644
index 000000000..c012588a0
--- /dev/null
+++ b/frontend/resources/images/on-teamup-hover.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="58.97218209120183" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="0 0 58.97218209120183 34.02461765404769" height="34.02461765404769" style="-webkit-print-color-adjust: exact;"><g id="shape-56b9b850-3ba4-11ec-a51e-9dc34ea791b7"><g id="shape-0431a4b0-2044-11ec-9082-1597698bcafa" width="96" height="107" fill="none"><g id="shape-0431a4b1-2044-11ec-9082-1597698bcafa"><path d="M11.602428230001351,20.29156831594628C12.96091601317039,20.246694227447506,14.141179330516024,20.105337800590405,14.676638164904034,20.052727380546685C16.104560413273248,19.912431232226254,18.070963388380733,19.669672407356757,18.249168931040003,19.122483239904568C18.646677342781913,17.90193438961137,17.31910625621822,17.646456981843585,15.343966676359742,17.293366035031795C12.691381181413817,16.819172878339486,13.000606671054811,15.52582487655286,12.892396662949068,14.101330684896084C12.75297750712798,12.265864668423092,11.97626475040488,10.955493769995883,10.058874331964944,10.687813096056516C8.163646789748782,10.423225671403543,9.30724176959211,7.142206106756021,13.948158437434358,5.840002658534331C18.335963374422136,4.60885836276384,18.136935263438318,0.4596849111167103,18.136935263438318,0.4596849111167103L0.02253717583789694,0.5287075987273511C0.02253717583789694,0.5287075987273511,-0.20150582308633602,1.9811727180626804,1.1450954357324008,3.6178556226475393C2.4916961404151152,5.254519555615843,6.482940492022863,5.0919332480982575,6.782266936440465,7.347466732293697C6.903558382829033,9.84110475846569,5.386938093891331,11.315412538593364,3.471298117720835,11.342865107158332C2.894864812139531,11.359739921987739,2.4408166919829455,11.827095340908727,2.457125783853371,12.386778122409396C2.3485513314271884,13.394745944208807,4.045872147769842,13.099828102716401,3.977479116536415,13.540557924901123C3.8216582745344567,13.948220278861754,2.9234340028315273,13.295794177475727,2.4262748894770994,13.30179000137241C1.7737003729280332,13.320850822652574,1.2596836917246037,13.84995929679826,1.278190149450893,14.483554372966182C1.2966966071790011,15.117149449134331,1.8407191625474297,15.615335036713759,2.493293679094677,15.596274215433596C2.8382692138893617,15.590128420470364,3.74169682536467,15.0536142290091,3.778215936329616,15.320256576048678C3.0257684573107326,15.951439192579983,1.6696887978805535,16.07941768073647,1.6673134217244296,17.237363230855635C1.6927807600714004,18.10861518528486,2.4408558940349394,18.793648510604044,3.3382132606611776,18.76744171005521C3.9803081790641954,18.748662299556827,4.551440953341626,18.36452453900256,4.795581229288473,17.78722781114743C4.923075422148941,18.072004542010973,5.133965692955826,18.429043399179818,5.486484599065989,18.85442951049299C6.57926929862424,20.17316437001682,9.338281885930883,20.366357135430917,11.602428230001351,20.29156831594628ZZ" style="fill: rgb(255, 255, 255);"/></g><g id="shape-0431a4b2-2044-11ec-9082-1597698bcafa"><path d="M7.71249313745011,16.384882897213856C8.22060129817055,16.264887295582184,8.730376864878963,16.57487873194259,8.851122116918305,17.077262923656008C8.971867368957646,17.579647115369426,8.657863708510376,18.084172518387504,8.14977477508819,18.204167558415747C7.641685841664184,18.324162598443763,7.13189160179445,18.01419069530357,7.011127122455036,17.51180706519358C6.890381870415695,17.009422873480162,7.204404204027014,16.504877937241872,7.71249313745011,16.384882897213856ZZ" style="stroke-width: 1; stroke: rgb(49, 239, 184); stroke-opacity: 1;"/></g><g id="shape-0431a4b3-2044-11ec-9082-1597698bcafa"><path d="M11.624898516201029,14.358535148349802C11.356573396985368,13.501041460592432,10.191539442935209,12.188607512236104,8.21790163886817,12.653619115011224C6.2442259343361,13.11865081260953,6.052639608603386,14.750722925934042,6.136035752132557,15.651802609503648" style="stroke-width: 1; stroke: rgb(49, 239, 184); stroke-opacity: 1;"/></g></g><g id="shape-0431a4b4-2044-11ec-9082-1597698bcafa" width="115" height="120" fill="none"><g id="shape-0431a4b5-2044-11ec-9082-1597698bcafa"><path d="M11.862488256155302,33.441762024086756C11.862488256155302,33.441762024086756,12.720858484573,32.75523040950952,13.934561097475125,32.52559708434819C15.14800775439835,32.29595331943665,16.28633969733619,32.51987715549126,17.55573219400594,31.442430937011977C19.25077445484203,30.306307060000336,19.604498278121355,29.67029873345541,21.744686454311704,29.410589098655237C21.748427728015486,29.411412302940562,21.752607803230603,29.413107299721332,21.756242686972655,29.41353853720034C24.536115188827353,29.286490195458327,25.423494767207558,30.106207873591757,27.339726143598455,28.95439352250378C29.776074386952132,27.38317423583021,30.87042639316769,24.645090640941135,30.87042639316769,24.645090640941135C30.87042639316769,24.645090640941135,32.560869444104355,25.415939659260175,33.42132107923226,23.882396651011277C34.37427833597485,22.183996371967396,32.65875281433273,21.112831953185605,32.65875281433273,21.112831953185605C32.65875281433273,21.112831953185605,33.75616983587224,19.040996281273465,33.396495907524695,16.937653855708504C33.03679352785821,14.834310888904838,31.49985713935621,9.867588190290235,33.96985902130564,7.519240112441139C36.439831392599444,5.170947179330824,39.62406153370557,6.287013782444774,41.543234103571194,4.946328040665321C43.462404769560635,3.6055029973408637,43.10938507854917,1.3084298230205604,43.056145811086026,0.8380928838082582L20.94546201295543,0.3940772500964158C20.94546201295543,0.3940772500964158,20.083533287267528,2.8610597900371886,21.385402509808955,6.13728112342551C22.953890361618505,10.084290547725914,27.122847892115715,8.282234895293414,27.539225812382938,10.844449001662952C27.96722529724866,13.477993064751672,23.125505664977936,11.685597013264214,20.99561748290398,14.889877975621175C19.6776711685352,17.514245513251808,19.350913140147895,20.199304066899458,19.496309586241296,22.535516245647386C19.083635969230272,22.45218400806266,18.229497598652415,22.316306527785628,17.081936918716565,22.80193108755907C15.748075041366064,23.36640094347831,16.066707484655126,24.100764348625034,14.9172182933753,23.66739603781093C13.19808501235002,23.019278902559563,12.69832182250957,23.287383239375913,12.69832182250957,23.287383239375913L12.989709489634151,24.741759304450397C12.989709489634151,24.741759304450397,14.029680175024623,24.8773003599847,15.198522096507077,25.147650743244185C16.801622665480863,25.696743293718782,17.123839654824224,23.983503215360088,18.401647446283278,24.140865480622324C19.679454708075355,24.29825558887387,19.843586707033865,25.037673709259252,19.509293705707023,24.999366873871622C16.826892835212675,25.05958379255094,16.326642922236715,26.304820107565547,14.796612269686193,26.86090671624038C13.24430109359946,27.33743891638369,13.311327268943387,27.000856295873973,12.100544143645493,27.032136633992423C10.889761548011847,27.063389129121788,10.17180504587941,27.759733686253185,10.17180504587941,27.759733686253185L10.60825193497567,29.38368127040735C12.207860084073218,28.16838281422679,13.977830309117962,28.710037765045854,14.95019719211723,28.552726882758634C17.05577014361097,28.22899302717792,18.06022364709588,26.432861115284823,19.87928913081032,26.982051198388262C17.174564387548344,28.35790077846491,17.615691336552118,29.394711217003987,16.401060728817356,30.180318637148275C15.573401214586738,30.69027254339153,14.352679667236771,30.9701919638037,13.402935042723584,31.072394184775703C12.453218710633337,31.174605299883524,11.007620191902788,31.924403466527338,11.007620191902788,31.924403466527338L11.862488256155302,33.441762024086756ZZ" style="fill: rgb(255, 255, 255);"/></g><g id="shape-0431a4b6-2044-11ec-9082-1597698bcafa"><path d="M26.367916328855245,21.541864617551028C25.752024052401794,21.084638509604474,24.874335589574002,21.203753489894325,24.407570785847383,21.807892178728707C23.940805982120764,22.412030867562862,24.061708216020634,23.272455921100345,24.677600492474085,23.729682029047126C25.293520690586774,24.18693652122238,26.17118070209017,24.067820999693367,26.637945505817697,23.463682310858985C27.104710839211293,22.859515779035064,26.983808605310514,21.99909072549758,26.367916328855245,21.541864617551028ZZ" style="stroke-width: 1; stroke: rgb(49, 239, 184); stroke-opacity: 1;"/></g><g id="shape-0431a4b7-2044-11ec-9082-1597698bcafa"><path d="M22.290717374943597,16.541050556458003C23.171689612728187,15.546130552714885,25.54200073357333,14.462977670809778,27.935050108376345,16.23759190460669C30.328155856161175,18.012235063871458,29.602746949542052,20.315197630067587,28.945962813089864,21.47640372124374" style="stroke-width: 1; stroke: rgb(49, 239, 184); stroke-opacity: 1;"/></g></g><g id="shape-0431a4b8-2044-11ec-9082-1597698bcafa" width="101" height="114" fill="none"><g id="shape-0431a4b9-2044-11ec-9082-1597698bcafa"><path d="M37.367513280914864,20.133292488739926C37.367513280914864,20.133292488739926,34.47324632323489,22.306539800594464,34.84863363869681,25.35643818049425C35.22402695335677,28.406336462319132,41.879424902604114,29.29405617621819,46.87282537913234,28.083008645274504C51.86624767451849,26.871984813334848,53.88083298476067,30.625859726817225,53.88083298476067,30.625859726817225L53.83623996239203,23.916641636305712C53.83623996239203,23.916641636305712,54.7814403921011,26.233739014496905,56.22537117411866,26.940924119363217C57.66919482759204,27.648110975533427,58.90788052120024,27.48766036815573,58.90788052120024,27.48766036815573L58.62188616189724,9.114836810030056C58.62188616189724,9.114836810030056,54.14155875509368,8.71759425925643,52.30578058531228,11.63949281358532C50.469980989822034,14.561391718175628,51.25416169458822,15.029686005807207,50.53323418202854,14.724504968003885C49.812285601169606,14.419346143429948,50.13895137746567,8.829826936175095,50.13895137746567,8.829826936175095C50.13895137746567,8.829826936175095,47.311935842498315,11.134827867711692,42.578878758490646,12.341595327470941C37.84582203189075,13.548384650198614,30.80430857443389,16.918822766545645,37.367513280914864,20.133292488739926ZZ" style="fill: rgb(255, 255, 255);"/></g><g id="shape-0431a4ba-2044-11ec-9082-1597698bcafa"><path d="M43.78310756909923,21.898392426748387C43.71040464575435,21.16903145811534,43.07154757977605,20.6376317756974,42.356130134013256,20.711456496495202C41.6407341139593,20.785280867033862,41.11970689025384,21.43636973165053,41.19238874529856,22.165752913512506C41.265091668644345,22.89511388214646,41.903949449440915,23.426557290499886,42.6193668952028,23.352732569701175C43.33476255784717,23.278886336195,43.85578942414486,22.627775608611273,43.78310756909923,21.898392426748387ZZ" style="stroke-width: 1; stroke: rgb(49, 239, 184); stroke-opacity: 1;"/></g><g id="shape-0431cbc0-2044-11ec-9082-1597698bcafa"><path d="M44.564542765305305,15.866730564345517C45.95380390294031,15.817601817570676,48.46007021846344,16.85388775037177,48.77394038244802,20.003267049274427C49.08781090384218,23.152668211144146,46.79729976525323,24.281104032500707,45.437423948057585,24.625374981520736" style="stroke-width: 1; stroke: rgb(49, 239, 184); stroke-opacity: 1;"/></g></g></g></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/on-teamup.svg b/frontend/resources/images/on-teamup.svg
new file mode 100644
index 000000000..10b85bf13
--- /dev/null
+++ b/frontend/resources/images/on-teamup.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="58.97218285395502" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="0 0 58.97218285395502 34.02461708792089" height="34.02461708792089" style="-webkit-print-color-adjust: exact;"><g id="shape-eb85b840-3ba3-11ec-a51e-9dc34ea791b7"><g id="shape-b0dba000-203d-11ec-9082-1597698bcafa" width="96" height="107" fill="none"><g id="shape-b0dba001-203d-11ec-9082-1597698bcafa"><path d="M11.602428229999532,20.291568315949007C12.960916013168571,20.24669422745046,14.141179330514206,20.10533780059268,14.676638164902215,20.052727380549186C16.10456041327143,19.9124312322283,18.070963388378914,19.66967240735903,18.249168931038184,19.122483239906614C18.646677342780094,17.901934389613416,17.3191062562164,17.646456981846313,15.343966676357923,17.293366035034524C12.691381181411998,16.819172878341305,13.000606671052992,15.525824876555816,12.892396662947249,14.10133068489904C12.752977507126161,12.26586466842582,11.976264750403061,10.955493769998611,10.058874331963125,10.687813096058562C8.163646789746963,10.423225671405817,9.307241769590291,7.14220610675784,13.94815843743254,5.840002658536832C18.335963374420317,4.608858362767023,18.1369352634365,0.45968491111943877,18.1369352634365,0.45968491111943877L0.02253717583607795,0.5287075987298522C0.02253717583607795,0.5287075987298522,-0.201505823088155,1.981172718064954,1.1450954357305818,3.617855622650495C2.4916961404132962,5.254519555618572,6.482940492021044,5.091933248100759,6.782266936438646,7.347466732296198C6.903558382827214,9.841104758467736,5.386938093889512,11.31541253859632,3.471298117719016,11.342865107160833C2.894864812137712,11.359739921989785,2.4408166919811265,11.827095340911,2.457125783851552,12.38677812241167C2.3485513314253694,13.394745944211536,4.045872147768023,13.099828102718675,3.977479116534596,13.540557924903624C3.8216582745326377,13.948220278864937,2.9234340028297083,13.295794177478456,2.4262748894752804,13.301790001375593C1.7737003729262142,13.320850822655302,1.2596836917227847,13.84995929680099,1.278190149449074,14.483554372968683C1.2966966071771822,15.117149449136377,1.8407191625456107,15.615335036715805,2.493293679092858,15.596274215436097C2.8382692138875427,15.590128420472865,3.741696825362851,15.053614229012055,3.778215936327797,15.320256576051179C3.0257684573089136,15.951439192582257,1.6696887978787345,16.079417680738516,1.6673134217226107,17.237363230858136C1.6927807600695814,18.108615185287817,2.4408558940331204,18.793648510606545,3.3382132606593586,18.767441710057938C3.9803081790623764,18.748662299559328,4.551440953339807,18.364524539005288,4.795581229286654,17.787227811149933C4.923075422147122,18.07200454201393,5.133965692954007,18.429043399181865,5.48648459906417,18.85442951049572C6.579269298622421,20.17316437001955,9.338281885929064,20.366357135433645,11.602428229999532,20.291568315949007ZZ" style="fill: rgb(250, 181, 245);"/></g><g id="shape-b0dba002-203d-11ec-9082-1597698bcafa"><path d="M7.712493137448291,16.384882897215903C8.22060129816873,16.26488729558423,8.730376864877144,16.57487873194532,8.851122116916486,17.077262923658964C8.971867368955827,17.5796471153717,8.657863708508557,18.084172518390005,8.149774775086371,18.204167558417794C7.641685841662365,18.32416259844649,7.131891601792631,18.014190695305842,7.0111271224532175,17.51180706519608C6.890381870413876,17.009422873482436,7.204404204025195,16.5048779372446,7.712493137448291,16.384882897215903ZZ" style="stroke-width: 1; stroke: white;"/></g><g id="shape-b0dba003-203d-11ec-9082-1597698bcafa"><path d="M11.62489851619921,14.35853514835253C11.35657339698355,13.501041460594934,10.19153944293339,12.188607512239287,8.217901638866351,12.653619115013498C6.244225934334281,13.118650812612032,6.052639608601567,14.750722925936316,6.136035752130738,15.651802609506376" style="stroke-width: 1; stroke: white;"/></g></g><g id="shape-b0db51e2-203d-11ec-9082-1597698bcafa" width="115" height="120" fill="none"><g id="shape-b0db51e3-203d-11ec-9082-1597698bcafa"><path d="M11.862488256153483,33.44176202408926C11.862488256153483,33.44176202408926,12.720858484571181,32.75523040951248,13.934561097473306,32.52559708435092C15.14800775439653,32.29595331943892,16.28633969733437,32.519877155494214,17.555732194004122,31.44243093701425C19.25077445484021,30.306307060002837,19.604498278119536,29.670298733458367,21.744686454309885,29.41058909865751C21.748427728013667,29.411412302943063,21.752607803228784,29.41310729972338,21.756242686970836,29.41353853720284C24.536115188825534,29.28649019546083,25.42349476720574,30.10620787359403,27.339726143596636,28.954393522506507C29.776074386950313,27.383174235832485,30.87042639316587,24.645090640943636,30.87042639316587,24.645090640943636C30.87042639316587,24.645090640943636,32.560869444102536,25.41593965926313,33.42132107923044,23.88239665101355C34.37427833597303,22.183996371969442,32.65875281433091,21.112831953188106,32.65875281433091,21.112831953188106C32.65875281433091,21.112831953188106,33.75616983587042,19.04099628127642,33.396495907522876,16.937653855710778C33.03679352785639,14.834310888907567,31.49985713935439,9.867588190292736,33.96985902130382,7.519240112443185C36.439831392597625,5.17094717933378,39.62406153370375,6.287013782447502,41.543234103569375,4.94632804066805C43.462404769558816,3.6055029973431374,43.10938507854735,1.308429823023289,43.05614581108421,0.8380928838105319L20.945462012953612,0.3940772500991443C20.945462012953612,0.3940772500991443,20.08353328726571,2.8610597900396897,21.385402509807136,6.137281123427783C22.953890361616686,10.084290547728415,27.122847892113896,8.282234895295915,27.53922581238112,10.844449001665453C27.96722529724684,13.477993064753718,23.125505664976117,11.685597013266488,20.995617482902162,14.889877975623676C19.67767116853338,17.514245513254536,19.350913140146076,20.199304066902187,19.496309586239477,22.535516245649887C19.083635969228453,22.45218400806516,18.229497598650596,22.316306527788583,17.081936918714746,22.80193108756157C15.748075041364245,23.366400943480585,16.066707484653307,24.100764348627308,14.91721829337348,23.667396037812978C13.198085012348201,23.01927890256229,12.69832182250775,23.28738323937887,12.69832182250775,23.28738323937887L12.989709489632332,24.7417593044529C12.989709489632332,24.7417593044529,14.029680175022804,24.877300359987203,15.198522096505258,25.14765074324623C16.801622665479044,25.69674329372083,17.123839654822405,23.98350321536236,18.40164744628146,24.140865480624598C19.679454708073536,24.2982555888766,19.843586707032046,25.03767370926198,19.509293705705204,24.99936687387435C16.826892835210856,25.059583792552985,16.326642922234896,26.304820107568048,14.796612269684374,26.860906716242425C13.244301093597642,27.337438916386418,13.311327268941568,27.000856295876474,12.100544143643674,27.032136633994924C10.889761548010028,27.063389129124516,10.17180504587759,27.75973368625546,10.17180504587759,27.75973368625546L10.60825193497385,29.383681270409397C12.207860084071399,28.168382814229517,13.977830309116143,28.710037765048583,14.95019719211541,28.552726882761817C17.055770143609152,28.228993027180877,18.060223647094062,26.43286111528778,19.879289130808502,26.982051198390764C17.174564387546525,28.35790077846741,17.6156913365503,29.39471121700626,16.401060728815537,30.180318637150776C15.57340121458492,30.690272543393803,14.352679667234952,30.97019196380643,13.402935042721765,31.072394184778204C12.453218710631518,31.174605299886025,11.007620191900969,31.92440346652984,11.007620191900969,31.92440346652984L11.862488256153483,33.44176202408926ZZ" style="fill: rgb(177, 247, 228);"/></g><g id="shape-b0db78f0-203d-11ec-9082-1597698bcafa"><path d="M26.367916328853426,21.541864617553983C25.752024052399975,21.08463850960743,24.874335589572183,21.20375348989637,24.407570785845564,21.80789217873189C23.940805982118945,22.41203086756559,24.061708216018815,23.272455921102846,24.677600492472266,23.7296820290494C25.293520690584955,24.186936521225107,26.17118070208835,24.06782099969587,26.63794550581588,23.46368231086126C27.104710839209474,22.859515779037793,26.983808605308695,21.999090725500537,26.367916328853426,21.541864617553983ZZ" style="stroke-width: 1; stroke: white;"/></g><g id="shape-b0db78f1-203d-11ec-9082-1597698bcafa"><path d="M22.290717374941778,16.541050556460505C23.171689612726368,15.546130552717841,25.542000733571513,14.462977670812506,27.935050108374526,16.237591904608962C30.328155856159356,18.01223506387396,29.602746949540233,20.315197630069633,28.945962813088045,21.476403721246243" style="stroke-width: 1; stroke: white;"/></g></g><g id="shape-b0dab5a0-203d-11ec-9082-1597698bcafa" width="101" height="114" fill="none"><g id="shape-b0dab5a1-203d-11ec-9082-1597698bcafa"><path d="M37.367513280913045,20.133292488741972C37.367513280913045,20.133292488741972,34.47324632323307,22.30653980059742,34.84863363869499,25.356438180496298C35.22402695335495,28.406336462321633,41.879424902602295,29.294056176220693,46.87282537913052,28.083008645277005C51.86624767451667,26.871984813337804,53.880832984758854,30.625859726819726,53.880832984758854,30.625859726819726L53.83623996239021,23.91664163630867C53.83623996239021,23.91664163630867,54.781440392099285,26.233739014499406,56.225371174116844,26.940924119365263C57.66919482759022,27.64811097553593,58.90788052119842,27.487660368157776,58.90788052119842,27.487660368157776L58.62188616189542,9.114836810032102C58.62188616189542,9.114836810032102,54.141558755091864,8.717594259259386,52.30578058531046,11.639492813587822C50.469980989820215,14.561391718178129,51.2541616945864,15.029686005809708,50.53323418202672,14.72450496800684C49.81228560116779,14.419346143432449,50.138951377463854,8.829826936177597,50.138951377463854,8.829826936177597C50.138951377463854,8.829826936177597,47.311935842496496,11.134827867714193,42.57887875848883,12.341595327473442C37.84582203188893,13.548384650201115,30.80430857443207,16.918822766548146,37.367513280913045,20.133292488741972ZZ" style="fill: rgb(250, 181, 245);"/></g><g id="shape-b0dab5a2-203d-11ec-9082-1597698bcafa"><path d="M43.78310756909741,21.898392426751343C43.71040464575253,21.169031458118297,43.07154757977423,20.637631775699447,42.35613013401144,20.711456496497703C41.64073411395748,20.785280867036818,41.11970689025202,21.43636973165303,41.19238874529674,22.165752913514552C41.265091668642526,22.895113882149417,41.9039494494391,23.426557290502387,42.61936689520098,23.35273256970413C43.33476255784535,23.278886336197502,43.85578942414304,22.627775608613774,43.78310756909741,21.898392426751343ZZ" style="stroke-width: 1; stroke: white;"/></g><g id="shape-b0dab5a3-203d-11ec-9082-1597698bcafa"><path d="M44.564542765303486,15.866730564347563C45.95380390293849,15.817601817573632,48.460070218461624,16.85388775037427,48.7739403824462,20.003267049277383C49.087810903840364,23.152668211146192,46.79729976525141,24.281104032503208,45.437423948055766,24.625374981523237" style="stroke-width: 1; stroke: white;"/></g></g></g></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/ph-file.svg b/frontend/resources/images/ph-file.svg
new file mode 100644
index 000000000..6859f17f5
--- /dev/null
+++ b/frontend/resources/images/ph-file.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="206.95680443620125" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="-1.9573043775739962 -2.7988168413976156 206.95680443620125 158.15679986166066" height="158.15679986166066" style="-webkit-print-color-adjust: exact;"><g id="shape-575c9093-25c2-11ec-9877-05429cda5971"><g id="shape-575c9094-25c2-11ec-9877-05429cda5971"><defs><mask id="outer-stroke-ddd0b3b0-3bbe-11ec-880d-a73a7db30a35" x="-1.9573043775739962" y="-2.7988168413976156" width="206.95680443620125" height="158.15679986166066" maskUnits="userSpaceOnUse"><use xlink:href="#stroke-shape-ddd0b3b0-3bbe-11ec-880d-a73a7db30a35" style="fill: none; stroke: white; stroke-width: 4;"/><use xlink:href="#stroke-shape-ddd0b3b0-3bbe-11ec-880d-a73a7db30a35" style="fill: black;"/></mask></defs><g class="outer-stroke-shape"><defs><rect width="201" height="152" x="1" id="stroke-shape-ddd0b3b0-3bbe-11ec-880d-a73a7db30a35" transform="matrix(0.9999999978661108,-1.745329248269963e-8,1.7453292541199837e-7,1.0000000006480119,-0.000013047912574393195,0.0000017222602934907627)" ry="3" rx="3" y="0" data-style="fill:none;stroke-width:2;stroke:#E3E3E3;stroke-opacity:1;stroke-dasharray:"/></defs><use xlink:href="#stroke-shape-ddd0b3b0-3bbe-11ec-880d-a73a7db30a35" mask="url(#outer-stroke-ddd0b3b0-3bbe-11ec-880d-a73a7db30a35)" style="stroke-width: 4; stroke: rgb(227, 227, 227); stroke-opacity: 1; fill: none;"/><use xlink:href="#stroke-shape-ddd0b3b0-3bbe-11ec-880d-a73a7db30a35" style="fill: none;"/></g></g><g id="shape-575c9095-25c2-11ec-9877-05429cda5971"><path d="M0,91 h202 a0,0 0 0 1 0,0 v59 a3,3 0 0 1 -3,3 h-196 a3,3 0 0 1 -3,-3 v-59 a0,0 0 0 1 0,0 z" x="0" y="91" transform="matrix(1.0000000024760176,-1.0471975568525078e-7,3.490658523073093e-8,1.0000000103484785,-0.000004508681172410434,0.000009314180957176177)" width="202" height="62" style="fill: none; stroke-width: 2; stroke: rgb(227, 227, 227); stroke-opacity: 1;"/></g><g id="shape-575c9096-25c2-11ec-9877-05429cda5971"><rect rx="3" ry="3" x="10" y="103" transform="matrix(0.9999999995870766,-4.810081334728633e-16,-4.810081268554315e-16,1.000000030940994,3.1795153176972235e-8,-0.0000034653912877047333)" width="134" height="18" style="fill: rgb(227, 227, 227); fill-opacity: 1;"/></g><g id="shape-575c9097-25c2-11ec-9877-05429cda5971"><rect rx="3" ry="3" x="10" y="131" transform="matrix(1.0000000022017677,6.948317137937551e-23,6.617444834426139e-23,1.0000000667740845,-2.234794180822064e-7,-0.000009114662532283546)" width="183" height="11" style="fill: rgb(227, 227, 227); fill-opacity: 1;"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/ph-left.svg b/frontend/resources/images/ph-left.svg
new file mode 100644
index 000000000..7853a1b55
--- /dev/null
+++ b/frontend/resources/images/ph-left.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="81.5877720738863" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="-0.43500565160593396 0.14985215967590193 81.5877720738863 128.8502825397186" height="128.8502825397186" style="-webkit-print-color-adjust: exact;"><g id="shape-305b39c3-25c6-11ec-9877-05429cda5971" width="90" height="140" fill="none"><g id="shape-305b39c4-25c6-11ec-9877-05429cda5971"><path d="M18.180074555850297,34.13571661820788C16.328443710368447,37.802933917027985,15.363633970810042,41.85364142381468,15.363541785663983,45.96187246179579C15.363449600517924,49.407753224720636,16.04230101673238,52.81989422415609,17.360917347203213,56.00341606115035C18.679625862816465,59.187030083290665,20.612379636906553,62.07970778419531,23.049017419827578,64.51634556711724C25.485655202748603,66.95298335003963,28.378332903652336,68.88573712412926,31.561946925794473,70.20444563974297C34.74556094793297,71.52306197021062,38.157794132515846,72.20182120128084,41.603674895442964,72.20182120128084C48.56282376312447,72.20172901613478,55.23693615892262,69.43709648322647,60.15777926017472,64.51616119682512C65.07871454658016,59.59522591042378,67.84316270919953,52.92102132947775,67.8430705240462,45.96187246179579C67.84316270919953,41.85373360896074,66.87872171022173,37.802933917027985,65.027275235032,34.13571661820788L18.180074555850297,34.13571661820788ZZ" style="fill: rgb(227, 227, 227); fill-opacity: 1;"/></g><g id="shape-305b39c5-25c6-11ec-9877-05429cda5971"><path d="M40.358622311596264,76.81790020937888C29.539497004501754,76.81799239452494,19.163413509784732,80.76582127821257,11.513152601448382,87.79300278375013C3.862873256086459,94.81972336355693,-0.4349826275210944,104.35074562355658,-0.43500383010177757,114.28922622951995C-0.4349070356984157,119.34558149560962,0.6793145450319571,124.34939122839569,2.840650607504358,129.00013185144462L77.87714712656452,129.00013185144462C80.03842787794929,124.34939122839569,81.15276192455713,119.34558149560962,81.15276192455713,114.28922622951995C81.15276192455713,109.36838312826512,80.09761074177368,104.49547630300549,78.04750527664146,99.94890489510135C75.99739981150924,95.40325533865871,72.99244060259662,91.27234675472573,69.20436857717868,87.79281841345801C65.41629655176075,84.31329007218983,60.919228567337996,81.55317461144296,55.96990025592095,79.67010863112546C51.02047975936148,77.78704265080796,45.715777709559916,76.81790020937888,40.358622311596264,76.81790020937888ZZ" style="fill: rgb(227, 227, 227); fill-opacity: 1;"/></g><g id="shape-305b39c6-25c6-11ec-9877-05429cda5971"><path d="M22.63741074228892,55.77654841648564C22.63741074228892,55.77654841648564,28.038261899520876,66.05546876716517,39.71092947477882,65.88123884095012C51.38359705003313,65.70700891473462,57.30695361562539,56.473468121347196,57.30695361562539,56.473468121347196" style="stroke-width: 2; stroke: white;"/></g><g id="shape-305b39c7-25c6-11ec-9877-05429cda5971"><path d="M33.141447219852125,53.60300704066367C36.667529059923254,53.60300704066367,39.52591388646397,50.77716357071449,39.52591388646397,47.29136663950885C39.52591388646397,43.805569708302755,36.667529059923254,40.97972623835358,33.141447219852125,40.97972623835358C29.615457564927056,40.97972623835358,26.75698055324392,43.805569708302755,26.75698055324392,47.29136663950885C26.75698055324392,50.77716357071449,29.615457564927056,53.60300704066367,33.141447219852125,53.60300704066367ZZ" style="fill: rgb(227, 227, 227); fill-opacity: 1; stroke-width: 2; stroke: white;"/></g><g id="shape-305b39c8-25c6-11ec-9877-05429cda5971"><path d="M52.22921139562823,5.9902455968044706C47.897615748537646,2.9522656685448965,42.82503589672706,1.0223696339853632,37.493231413951435,0.383799439228369C32.16142693117581,-0.2547744429339218,26.74730111289682,0.4191478335183092,21.76469396372704,2.341603604932061L64.9989743951628,32.66471824116161C65.42634473269572,27.547336408323645,64.47748302341643,22.41059569479512,62.24254634026147,17.742063338540447C60.007609657106514,13.073623167432288,56.56080704272608,9.028299273180437,52.22921139562823,5.9902455968044706ZZ" style="fill: rgb(227, 227, 227); fill-opacity: 1;"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/ph-right.svg b/frontend/resources/images/ph-right.svg
new file mode 100644
index 000000000..6e2852f31
--- /dev/null
+++ b/frontend/resources/images/ph-right.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="102.12322708597458" xmlns="http://www.w3.org/2000/svg" id="screenshot" version="1.1" viewBox="-0.2830548330293823 0.00013327541864782688 102.12322708597458 54.02153523420793" height="54.02153523420793" style="-webkit-print-color-adjust: exact;"><g id="shape-305b39ca-25c6-11ec-9877-05429cda5971" width="133" height="70" fill="none"><g id="shape-305b39cb-25c6-11ec-9877-05429cda5971"><path d="M92.06001883709541,52.780900512351764C92.66931429164106,49.56773051235177,86.02942338254798,47.840623239624165,83.94800520073477,47.06227823962445C89.18168701891409,45.781289603260575,101.50092247346038,49.98474823962442,101.82747470073446,46.54621233053331C102.1541065189158,43.10765323962414,96.1049138370945,39.43658051235161,92.18095065527814,37.78441233053354C88.2568870189134,36.13216687598788,82.26786429164349,34.273371421442334,83.30053701891302,33.860271421442576C84.33313247346086,33.4472486941695,93.48809610982426,36.99089869416957,94.37155520073429,34.2504214214423C95.25488292800583,31.510021421442616,89.671905200732,29.82478051235148,85.57220065527872,28.284194148715414C74.89666429164208,24.27258051235185,76.95853247345804,0.00013505780589184724,76.95853247345804,0.00013505780589184724L-0.28305389017623384,0.486489603260452C-0.28305389017623384,1.519162330533618,10.851173382550769,39.85655778507862,33.94041883709724,49.143364148715136C49.09020065527875,55.740090512351344,63.87718701891572,49.16363278507879,75.95035520072997,51.06297323962417C82.07081883709907,52.068059603260735,91.45064610982081,55.99406278507877,92.06001883709541,52.780900512351764ZZ" style="fill: rgb(227, 227, 227); fill-opacity: 1;"/></g><g id="shape-305b39cc-25c6-11ec-9877-05429cda5971"><path d="M39.658059746187064,27.905789603260928C42.341277928004274,26.911598694169697,45.32354156436486,28.28403960326068,46.31920065527811,30.971275966897338C47.314859746184084,33.658435057805946,45.946823382550065,36.64278505780612,43.263605200732854,37.6369759668969C40.580387018912006,38.631089603260534,37.59812338255142,37.258648694170006,36.60246429163817,34.57148960326049C35.6068052007322,31.884253239624286,36.974841564369854,28.89990323962411,39.658059746187064,27.905789603260928ZZ" style="stroke-width: 2; stroke: white;"/></g><g id="shape-305b39cd-25c6-11ec-9877-05429cda5971"><path d="M59.423496109822736,14.73643051235149C57.15994610982307,9.680012330533373,49.1343233825537,2.492953239624512,37.54835974618618,6.785685057806404C25.962164291642694,11.078494148715436,26.02405974618887,21.21628960326052,27.201927928006626,26.674912330533516" style="stroke-width: 2; stroke: white;"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss
index 032bab70c..bbf80ec67 100644
--- a/frontend/resources/styles/main/partials/dashboard-grid.scss
+++ b/frontend/resources/styles/main/partials/dashboard-grid.scss
@@ -335,6 +335,20 @@
   padding: 3rem;
   justify-content: center;
 
+  &.drafts {
+    background-image: url("/images/ph-left.svg"), url("/images/ph-right.svg");
+    background-position: 15% bottom, 85% top;
+    background-repeat: no-repeat;
+    .text {
+      p {
+        max-width: 360px;
+        text-align: center;
+        font-size: $fs16;
+      }
+    }
+  }
+
+
   svg {
     width: 36px;
     height: 36px;
@@ -346,5 +360,10 @@
     color: $color-gray-30;
     font-size: $fs16;
   }
+
+  img.ph-files {
+    height: 150px;
+    margin-right: calc(100% - 148px);
+  }
 }
 
diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss
index 27da8245d..bff16696c 100644
--- a/frontend/resources/styles/main/partials/modal.scss
+++ b/frontend/resources/styles/main/partials/modal.scss
@@ -63,7 +63,7 @@
   display: flex;
   flex-direction: column;
   width: 448px;
-  background-color: $color-dashboard;
+  background-color: $color-white;
 
   .modal-header {
     align-items: center;
@@ -705,7 +705,7 @@
   background-color: $color-white;
   box-shadow: 0 10px 10px rgba(0,0,0,.2);
   display: flex;
-  min-height: 370px;
+  min-height: 420px;
   flex-direction: row;
   font-family: "sourcesanspro", sans-serif;
   min-width: 620px;
@@ -824,21 +824,93 @@
   }
 
   &.final {
+    // TODO: Juan revisa TODA esta parte
+
     padding: $size-5 0 0 0;
+    flex-direction: column;
+
+    .modal-top {
+      padding-top: 40px;
+      color: $color-gray-60;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      h1 {
+        font-family: 'worksans', sans-serif;
+        font-weight: 700;
+        font-size: 27px;
+        margin-bottom: $size-3;
+      }
+      p {
+        font-family: 'worksans', sans-serif;
+        font-weight: 500;
+        font-size: $fs18;
+      }
+
+    }
+
+    .modal-columns {
+      display: flex;
+      margin: 17px;
+
+      .modal-left {
+        background-image: url("/images/on-solo.svg");
+        background-position: left top;
+        background-size: 11%;
+      }
+      
+      .modal-left:hover {
+        background-image: url("/images/on-solo-hover.svg");
+        background-size: 15%;
+      }
+      
+      .modal-right {
+        background-image: url("/images/on-teamup.svg");
+        background-position: right top;
+        background-size: 28%;
+      }
+      
+      .modal-right:hover {
+        background-image: url("/images/on-teamup-hover.svg");
+        background-size: 32%;
+      }
+      
+      .modal-right,
+      .modal-left {
+        background-repeat: no-repeat;
+        border-radius: $br-medium;
+        transition: all ease .3s;
+        &:hover {
+          background-color: $color-primary;
+        }
+      }
+    }
+
+    .modal-left {
+      margin-right: 35px;
+    }
 
     .modal-left,
     .modal-right {
+      justify-content: center;
       align-items: center;
       background-color: $color-white;
       color: $color-black;
       flex: 1;
       flex-direction: column;
-      overflow: visible;
-      padding: $size-6 40px;
+      // overflow: visible;
+      // padding: $size-6 40px;
       text-align: center;
 
+      border: 1px solid $color-gray-10;
+      border-radius: 2px;
+      min-height: 180px;
+      width: 233px;
+      cursor: pointer;
+
       h2 {
-        font-weight: 900;
+        font-weight: 700;
         margin-bottom: $size-5;
         font-size: $fs24;
       }
@@ -847,12 +919,6 @@
         font-size: $fs14;
       }
 
-      .btn-primary {
-        margin-bottom: 0;
-        margin-top: auto;
-        width: 200px;
-      }
-
       img {
         box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
         border-radius: $br-medium;
@@ -861,26 +927,6 @@
         width: 150px;
       }
     }
-
-    .modal-left {
-      border-right: 1px solid $color-gray-10;
-
-      form {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        margin-top: auto;
-
-        .custom-input {
-          margin-bottom: $size-4;
-
-          input {
-            width: 200px;
-          }
-        }
-      }
-    }
-
   }
 }
 
@@ -899,3 +945,193 @@
 .relnotes .onboarding {
   height: 420px;
 }
+
+.onboarding-templates {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 348px;
+  height: 100vh;
+
+  .modal-close-button {
+    width: 34px;
+    height: 34px;
+    margin-right: 13px;
+    margin-top: 13px;
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .modal-header {
+    height: unset;
+    border-radius: unset;
+    justify-content: flex-end;
+  }
+
+  .modal-content {
+    border: 0px;
+    padding: 0px 25px;
+    background-color: $color-white;
+    flex-grow: 1;
+
+    p, h3 {
+      color: $color-gray-60;
+      text-align: center;
+    }
+
+    h3 {
+      font-size: $fs18;
+      font-weight: bold;
+    }
+
+    p {
+      font-size: $fs16;
+    }
+
+
+    .templates {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 8%;
+    }
+
+    .template-item {
+      width: 275px;
+      border: 1px solid $color-gray-10;
+      
+      display: flex;
+      flex-direction: column;
+      text-align: left;
+      border-radius: $br-small;
+      
+      &:not(:last-child) {
+        margin-bottom: 22px;
+      }
+    }
+    
+    .template-item-content {
+      // height: 144px;
+      flex-grow: 1;
+
+      img {
+        border-radius: $br-small $br-small 0 0;
+      }
+    }
+    
+    .template-item-title {
+      padding: 6px 12px;
+      height: 64px;
+      border-top: 1px solid $color-gray-10;
+
+      .label {
+        color: $color-black;
+        padding: 0px 4px;
+        font-size: $fs16;
+        display: flex;
+      }
+
+      .action {
+        color: $color-primary-dark;
+        cursor: pointer;
+        font-size: $fs14;
+        font-weight: 600;
+        display: flex;
+        justify-content: flex-end;
+        margin-top: $size-2;
+      }
+
+    }
+  }
+}
+
+
+.onboarding-team {
+  display: flex;
+  min-width: 620px;
+  min-height: 420px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  .title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 408px;
+
+    color: $color-gray-60;
+    h2 {
+      font-weight: 700;
+      padding-bottom: 10px;
+    }
+
+    p {
+      text-align: center;
+      font-size: $fs18;
+    }
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    margin-top: $size-6;
+
+    .buttons {
+      margin-top: 30px;
+      display: flex;
+      justify-content: flex-end;
+
+      > *:not(:last-child) {
+        margin-right: 13px;
+      }
+
+      input { margin-bottom: unset; }
+      input[type=submit] {
+      }
+
+      .btn-primary {
+        width: 117px;
+      }
+    }
+
+    .team-row {
+      .custom-input {
+        width: 459px;
+      }
+    }
+
+    .invite-row {
+      display: flex;
+      justify-content: space-between;
+
+      > *:not(:last-child) {
+        margin-right: 13px;
+      }
+
+      .custom-input {
+        width: 321px;
+      }
+
+      .custom-select {
+        width: 118px;
+      }
+    }
+
+    .skip-action {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 15px;
+      .action {
+        color: $color-primary-dark;
+        font-weight: 500;
+        font-size: $fs16;
+        cursor: pointer;
+      }
+    }
+
+  }
+}
diff --git a/frontend/src/app/main/data/dashboard.cljs b/frontend/src/app/main/data/dashboard.cljs
index 7025dc5ea..e15b8d7fb 100644
--- a/frontend/src/app/main/data/dashboard.cljs
+++ b/frontend/src/app/main/data/dashboard.cljs
@@ -300,6 +300,28 @@
              (rx/map team-created)
              (rx/catch on-error))))))
 
+;; --- EVENT: create-team-with-invitations
+
+;; NOTE: right now, it only handles a single email, in a near future
+;; this will be changed to the ability to specify multiple emails.
+
+(defn create-team-with-invitations
+  [{:keys [name email role] :as params}]
+  (us/assert string? name)
+  (ptk/reify ::create-team-with-invitations
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (let [{:keys [on-success on-error]
+             :or {on-success identity
+                  on-error rx/throw}} (meta params)
+            params {:name name
+                    :emails #{email}
+                    :role role}]
+        (->> (rp/mutation! :create-team-and-invite-members params)
+             (rx/tap on-success)
+             (rx/map team-created)
+             (rx/catch on-error))))))
+
 ;; --- EVENT: update-team
 
 (defn update-team
diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs
index 3612d8490..adc3cfaf6 100644
--- a/frontend/src/app/main/refs.cljs
+++ b/frontend/src/app/main/refs.cljs
@@ -61,12 +61,6 @@
 (def dashboard-search-result
   (l/derived :dashboard-search-result st/state))
 
-(def dashboard-team
-  (l/derived (fn [state]
-               (let [team-id (:current-team-id state)]
-                 (get-in state [:teams team-id])))
-             st/state))
-
 (def dashboard-team-stats
   (l/derived :dashboard-team-stats st/state))
 
diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs
index b005dc11c..545471615 100644
--- a/frontend/src/app/main/ui.cljs
+++ b/frontend/src/app/main/ui.cljs
@@ -72,7 +72,10 @@
         :dashboard-team-settings)
        [:*
         #_[:div.modal-wrapper
-           [:& app.main.ui.onboarding/release-notes-modal {:version "1.8"}]]
+           #_[:& app.main.ui.onboarding/onboarding-templates-modal]
+           #_[:& app.main.ui.onboarding/onboarding-modal]
+           #_[:& app.main.ui.onboarding/onboarding-team-modal]
+           ]
         [:& dashboard {:route route}]]
 
        :viewer
diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs
index 9d2f00178..1292c6eaf 100644
--- a/frontend/src/app/main/ui/dashboard.cljs
+++ b/frontend/src/app/main/ui/dashboard.cljs
@@ -104,11 +104,11 @@
          (when (and (:onboarding-viewed props)
                     (not= version (:main @cf/version))
                     (not= "0.0" (:main @cf/version)))
-           (tm/schedule 1000 #(st/emit! (modal/show {:type :release-notes :version (:main @cf/version)})))))))
+           (tm/schedule 1000 #(st/emit! (modal/show {:type :release-notes
+                                                     :version (:main @cf/version)})))))))
 
     [:& (mf/provider ctx/current-team-id) {:value team-id}
      [:& (mf/provider ctx/current-project-id) {:value project-id}
-
       ;; NOTE: dashboard events and other related functions assumes
       ;; that the team is a implicit context variable that is
       ;; available using react context or accessing
diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs
index 4ce733033..ef413c78c 100644
--- a/frontend/src/app/main/ui/dashboard/files.cljs
+++ b/frontend/src/app/main/ui/dashboard/files.cljs
@@ -120,6 +120,6 @@
     [:*
      [:& header {:team team :project project}]
      [:section.dashboard-container
-      [:& grid {:project-id (:id project)
+      [:& grid {:project project
                 :files files}]]]))
 
diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs
index 3bd48a1ce..f91e1de5c 100644
--- a/frontend/src/app/main/ui/dashboard/grid.cljs
+++ b/frontend/src/app/main/ui/dashboard/grid.cljs
@@ -15,6 +15,7 @@
    [app.main.ui.dashboard.file-menu :refer [file-menu]]
    [app.main.ui.dashboard.import :refer [use-import-file]]
    [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
+   [app.main.ui.dashboard.placeholder :refer [empty-placeholder loading-placeholder]]
    [app.main.ui.icons :as i]
    [app.main.worker :as wrk]
    [app.util.dom :as dom]
@@ -195,24 +196,10 @@
                         :on-edit on-edit
                         :on-menu-close on-menu-close}])]]]))
 
-(mf/defc empty-placeholder
-  [{:keys [dragging?] :as props}]
-  (if-not dragging?
-    [:div.grid-empty-placeholder
-     [:div.icon i/file-html]
-     [:div.text (tr "dashboard.empty-files")]]
-    [:div.grid-row.no-wrap
-     [:div.grid-item]]))
-
-(mf/defc loading-placeholder
-  []
-  [:div.grid-empty-placeholder
-   [:div.icon i/loader]
-   [:div.text (tr "dashboard.loading-files")]])
-
 (mf/defc grid
-  [{:keys [files project-id] :as props}]
-  (let [dragging? (mf/use-state false)
+  [{:keys [files project] :as props}]
+  (let [dragging?  (mf/use-state false)
+        project-id (:id project)
 
         on-finish-import
         (mf/use-callback
@@ -272,7 +259,7 @@
             :navigate? true}])]
 
        :else
-       [:& empty-placeholder])]))
+       [:& empty-placeholder {:default? (:is-default project)}])]))
 
 (mf/defc line-grid-row
   [{:keys [files selected-files on-load-more dragging?] :as props}]
@@ -330,8 +317,11 @@
          (tr "dashboard.show-all-files")]])]))
 
 (mf/defc line-grid
-  [{:keys [project-id team-id files on-load-more] :as props}]
+  [{:keys [project team files on-load-more] :as props}]
   (let [dragging?        (mf/use-state false)
+        project-id       (:id project)
+        team-id          (:id team)
+
         selected-files   (mf/deref refs/dashboard-selected-files)
         selected-project (mf/deref refs/dashboard-selected-project)
 
@@ -413,5 +403,6 @@
                           :dragging? @dragging?}]
 
        :else
-       [:& empty-placeholder {:dragging? @dragging?}])]))
+       [:& empty-placeholder {:dragging? @dragging?
+                              :default? (:is-default project)}])]))
 
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.cljs b/frontend/src/app/main/ui/dashboard/placeholder.cljs
new file mode 100644
index 000000000..1df3839bd
--- /dev/null
+++ b/frontend/src/app/main/ui/dashboard/placeholder.cljs
@@ -0,0 +1,34 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) UXBOX Labs SL
+
+(ns app.main.ui.dashboard.placeholder
+  (:require
+   [app.main.ui.icons :as i]
+   [app.util.i18n :as i18n :refer [tr]]
+   [rumext.alpha :as mf]))
+
+(mf/defc empty-placeholder
+  [{:keys [dragging? default?] :as props}]
+  (cond
+    (true? dragging?)
+    [:div.grid-row.no-wrap
+     [:div.grid-item]]
+
+    (true? default?)
+    [:div.grid-empty-placeholder.drafts
+     [:div.text
+      [:& i18n/tr-html {:label "dashboard.empty-placeholder-drafts"}]]]
+
+    :else
+    [:div.grid-empty-placeholder
+     [:img.ph-files {:src "images/ph-file.svg"}]]))
+
+(mf/defc loading-placeholder
+  []
+  [:div.grid-empty-placeholder
+   [:div.icon i/loader]
+   [:div.text (tr "dashboard.loading-files")]])
+
diff --git a/frontend/src/app/main/ui/dashboard/project_menu.cljs b/frontend/src/app/main/ui/dashboard/project_menu.cljs
index b3654ff59..e1820cc1a 100644
--- a/frontend/src/app/main/ui/dashboard/project_menu.cljs
+++ b/frontend/src/app/main/ui/dashboard/project_menu.cljs
@@ -73,7 +73,6 @@
            :accept-label (tr "modals.delete-project-confirm.accept")
            :on-accept delete-fn}))
 
-
         file-input (mf/use-ref nil)
 
         on-import-files
diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs
index 7089ba721..c171aab38 100644
--- a/frontend/src/app/main/ui/dashboard/projects.cljs
+++ b/frontend/src/app/main/ui/dashboard/projects.cljs
@@ -33,10 +33,8 @@
       (tr "dashboard.new-project")]]))
 
 (mf/defc project-item
-  [{:keys [project first? files] :as props}]
+  [{:keys [project first? team files] :as props}]
   (let [locale     (mf/deref i18n/locale)
-
-        team-id    (:team-id project)
         file-count (or (:count project) 0)
 
         dstate     (mf/deref refs/dashboard-local)
@@ -145,9 +143,8 @@
        i/actions]]
 
      [:& line-grid
-      {:project-id (:id project)
-       :project project
-       :team-id team-id
+      {:project project
+       :team team
        :on-load-more on-nav
        :files files}]]))
 
@@ -186,7 +183,8 @@
                              (filterv #(= id (:project-id %)))
                              (sort-by :modified-at #(compare %2 %1))))]
             [:& project-item {:project project
-                              :files   files
+                              :team team
+                              :files files
                               :first? (= project (first projects))
                               :key (:id project)}]))]])))
 
diff --git a/frontend/src/app/main/ui/modal.cljs b/frontend/src/app/main/ui/modal.cljs
index b07e3dd57..e4ae3e4bc 100644
--- a/frontend/src/app/main/ui/modal.cljs
+++ b/frontend/src/app/main/ui/modal.cljs
@@ -72,8 +72,9 @@
          #(doseq [key keys]
             (events/unlistenByKey key)))))
 
-    [:div.modal-wrapper {:ref wrapper-ref}
-     (mf/element (get components (:type data)) (:props data))]))
+    (when-let [component (get components (:type data))]
+      [:div.modal-wrapper {:ref wrapper-ref}
+       (mf/element component (:props data))])))
 
 
 (def modal-ref
diff --git a/frontend/src/app/main/ui/onboarding.cljs b/frontend/src/app/main/ui/onboarding.cljs
index c980f45c0..e0f6e1066 100644
--- a/frontend/src/app/main/ui/onboarding.cljs
+++ b/frontend/src/app/main/ui/onboarding.cljs
@@ -12,8 +12,10 @@
    [app.main.data.messages :as dm]
    [app.main.data.modal :as modal]
    [app.main.data.users :as du]
+   [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.forms :as fm]
+   [app.main.ui.icons :as i]
    [app.main.ui.releases.common :as rc]
    [app.main.ui.releases.v1-4]
    [app.main.ui.releases.v1-5]
@@ -21,10 +23,13 @@
    [app.main.ui.releases.v1-7]
    [app.main.ui.releases.v1-8]
    [app.main.ui.releases.v1-9]
+   [app.util.dom :as dom]
+   [app.util.http :as http]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.object :as obj]
    [app.util.router :as rt]
    [app.util.timers :as tm]
+   [beicon.core :as rx]
    [cljs.spec.alpha :as s]
    [rumext.alpha :as mf]))
 
@@ -159,7 +164,7 @@
         skip
         (mf/use-callback
          (st/emitf (modal/hide)
-                   (modal/show {:type :onboarding-team})
+                   (modal/show {:type :onboarding-choice})
                    (du/mark-onboarding-as-viewed)))]
 
     (mf/use-layout-effect
@@ -187,57 +192,232 @@
 (s/def ::team-form
   (s/keys :req-un [::name]))
 
+(mf/defc onboarding-choice-modal
+  {::mf/register modal/components
+   ::mf/register-as :onboarding-choice}
+  []
+  (let [;; When user choices the option of `fly solo`, we proceed to show
+        ;; the onboarding templates modal.
+        on-fly-solo
+        (fn []
+          (tm/schedule 400  #(st/emit! (modal/show {:type :onboarding-templates}))))
+
+        ;; When user choices the option of `team up`, we proceed to show
+        ;; the team creation modal.
+        on-team-up
+        (fn []
+          (st/emit! (modal/show {:type :onboarding-team})))
+        ]
+
+    [:div.modal-overlay
+     [:div.modal-container.onboarding.final.animated.fadeInUp
+      [:div.modal-top
+       [:h1 (tr "onboarding.welcome.title")]
+       [:p (tr "onboarding.welcome.desc3")]]
+      [:div.modal-columns
+       [:div.modal-left
+        [:div.content-button {:on-click on-fly-solo}
+         [:h2 (tr "onboarding.choice.fly-solo")]
+         [:p (tr "onboarding.choice.fly-solo-desc")]]]
+       [:div.modal-right
+        [:div.content-button {:on-click on-team-up}
+         [:h2 (tr "onboarding.choice.team-up")]
+         [:p (tr "onboarding.choice.team-up-desc")]]]]
+      [:img.deco {:src "images/deco-left.png" :border "0"}]
+      [:img.deco.right {:src "images/deco-right.png" :border "0"}]]]))
+
 (mf/defc onboarding-team-modal
   {::mf/register modal/components
    ::mf/register-as :onboarding-team}
   []
-  (let [close (mf/use-fn (st/emitf (modal/hide)))
-        form  (fm/use-form :spec ::team-form
+  (let [form  (fm/use-form :spec ::team-form
                            :initial {})
+        on-submit
+        (mf/use-callback
+         (fn [form _]
+           (let [tname (get-in @form [:clean-data :name])]
+             (st/emit! (modal/show {:type :onboarding-team-invitations :name tname})))))]
+
+    [:div.modal-overlay
+     [:div.modal-container.onboarding-team
+      [:div.title
+       [:h2 (tr "onboarding.choice.team-up")]
+       [:p (tr "onboarding.choice.team-up-desc")]]
+
+      [:& fm/form {:form form
+                   :on-submit on-submit}
+
+       [:div.team-row
+        [:& fm/input {:type "text"
+                      :name :name
+                      :label (tr "onboarding.team-input-placeholder")}]]
+
+       [:div.buttons
+        [:button.btn-secondary.btn-large
+         {:on-click #(st/emit! (modal/show {:type :onboarding-choice}))}
+         (tr "labels.cancel")]
+        [:& fm/submit-button
+         {:label (tr "labels.next")}]]]
+
+      [:img.deco {:src "images/deco-left.png" :border "0"}]
+      [:img.deco.right {:src "images/deco-right.png" :border "0"}]]]))
+
+(defn get-available-roles
+  []
+  [{:value "editor" :label (tr "labels.editor")}
+   {:value "admin" :label (tr "labels.admin")}])
+
+(s/def ::email ::us/email)
+(s/def ::role  ::us/keyword)
+(s/def ::invite-form
+  (s/keys :req-un [::role ::email]))
+
+;; This is the final step of team creation, consists in provide a
+;; shortcut for invite users.
+
+(mf/defc onboarding-team-invitations-modal
+  {::mf/register modal/components
+   ::mf/register-as :onboarding-team-invitations}
+  [{:keys [name] :as props}]
+  (let [initial (mf/use-memo (constantly
+                              {:role "editor"
+                               :name name}))
+        form    (fm/use-form :spec ::invite-form
+                             :initial initial)
+
+        roles   (mf/use-memo #(get-available-roles))
+
         on-success
         (mf/use-callback
          (fn [_form response]
-           (st/emit! (modal/hide)
-                     (rt/nav :dashboard-projects {:team-id (:id response)}))))
+           (let [project-id (:default-project-id response)
+                 team-id    (:id response)]
+             (st/emit!
+              (modal/hide)
+              (rt/nav :dashboard-projects {:team-id team-id}))
+             (tm/schedule 400 #(st/emit!
+                                (modal/show {:type :onboarding-templates
+                                             :project-id project-id}))))))
 
         on-error
         (mf/use-callback
          (fn [_form _response]
            (st/emit! (dm/error "Error on creating team."))))
 
-        on-submit
+        ;; The SKIP branch only creates the team, without invitations
+        on-skip
         (mf/use-callback
-         (fn [form _event]
+         (fn [_]
            (let [mdata  {:on-success (partial on-success form)
                          :on-error   (partial on-error form)}
-                 params {:name (get-in @form [:clean-data :name])}]
-             (st/emit! (dd/create-team (with-meta params mdata))))))]
+                 params {:name name}]
+             (st/emit! (dd/create-team (with-meta params mdata))))))
+
+        ;; The SUBMIT branch creates the team with the invitations
+        on-submit
+        (mf/use-callback
+         (fn [form _]
+           (let [mdata  {:on-success (partial on-success form)
+                         :on-error   (partial on-error form)}
+                 params (:clean-data @form)]
+             (st/emit! (dd/create-team-with-invitations (with-meta params mdata))))))]
 
     [:div.modal-overlay
-     [:div.modal-container.onboarding.final.animated.fadeInUp
-      [:div.modal-left
-       [:img {:src "images/onboarding-team.jpg" :border "0" :alt (tr "onboarding.team.create.title")}]
-       [:h2 (tr "onboarding.team.create.title")]
-       [:p (tr "onboarding.team.create.desc1")]
+     [:div.modal-container.onboarding-team
+      [:div.title
+       [:h2 (tr "onboarding.choice.team-up")]
+       [:p (tr "onboarding.choice.team-up-desc")]]
 
-       [:& fm/form {:form form
-                    :on-submit on-submit}
-        [:& fm/input {:type "text"
-                   :name :name
-                   :label (tr "onboarding.team.create.input-placeholder")}]
+      [:& fm/form {:form form
+                   :on-submit on-submit}
+
+      [:div.invite-row
+       [:& fm/input {:name :email
+                     :label (tr "labels.email")}]
+       [:& fm/select {:name :role
+                      :options roles}]]
+
+       [:div.buttons
+        [:button.btn-secondary.btn-large
+         {:on-click #(st/emit! (modal/show {:type :onboarding-choice}))}
+         (tr "labels.cancel")]
         [:& fm/submit-button
-         {:label (tr "onboarding.team.create.button")}]]]
-
-      [:div.modal-right
-       [:img {:src "images/onboarding-start.jpg" :border "0" :alt (tr "onboarding.team.start.title")}]
-       [:h2 (tr "onboarding.team.start.title")]
-       [:p (tr "onboarding.team.start.desc1")]
-       [:button.btn-primary.btn-large {:on-click close} (tr "onboarding.team.start.button")]]
-
-
+         {:label (tr "labels.create")}]]
+       [:div.skip-action
+        {:on-click on-skip}
+        [:div.action "Skip and invite later"]]]
       [:img.deco {:src "images/deco-left.png" :border "0"}]
       [:img.deco.right {:src "images/deco-right.png" :border "0"}]]]))
 
+(mf/defc template-item
+  [{:keys [name path image project-id]}]
+  (let [downloading? (mf/use-state false)
+        link         (str (assoc cf/public-uri :path path))
+
+        on-finish-import
+        (fn []
+          (st/emit! (dd/fetch-recent-files)))
+
+        open-import-modal
+        (fn [file]
+          (st/emit! (modal/show
+                     {:type :import
+                      :project-id project-id
+                      :files [file]
+                      :on-finish-import on-finish-import})))
+        on-click
+        (fn []
+          (reset! downloading? true)
+          (->> (http/send! {:method :get :uri link :response-type :blob :mode :no-cors})
+               (rx/subs (fn [{:keys [body] :as response}]
+                          (open-import-modal {:name name :uri (dom/create-uri body)}))
+                        (fn [error]
+                          (js/console.log "error" error))
+                        (fn []
+                          (reset! downloading? false)))))
+        ]
+
+    [:div.template-item
+     [:div.template-item-content
+      [:img {:src image}]]
+     [:div.template-item-title
+      [:div.label name]
+      (if @downloading?
+        [:div.action "Fetching..."]
+        [:div.action {:on-click on-click} "+ Add to drafts"])]]))
+
+(mf/defc onboarding-templates-modal
+  {::mf/wrap-props false
+   ::mf/register modal/components
+   ::mf/register-as :onboarding-templates}
+  ;; NOTE: the project usually comes empty, it only comes fullfilled
+  ;; when a user creates a new team just after signup.
+  [{:keys [project-id] :as props}]
+  (let [close-fn   (mf/use-callback #(st/emit! (modal/hide)))
+        profile    (mf/deref refs/profile)
+        project-id (or project-id (:default-project-id profile))]
+    [:div.modal-overlay
+     [:div.modal-container.onboarding-templates
+      [:div.modal-header
+       [:div.modal-close-button
+        {:on-click close-fn} i/close]]
+
+      [:div.modal-content
+       [:h3 (tr "onboarding.templates.title")]
+       [:p (tr "onboarding.templates.subtitle")]
+
+       [:div.templates
+        [:& template-item
+         {:path "/github/penpot-files/Penpot-Design-system.penpot"
+          :image "https://penpot.app/images/libraries/cover-ds-penpot.jpg"
+          :name "Penpot Design System"
+          :project-id project-id}]
+        [:& template-item
+         {:path "/github/penpot-files/Material-Design-Kit.penpot"
+          :image "https://penpot.app/images/libraries/cover-material.jpg"
+          :name "Material Design Kit"
+          :project-id project-id}]]]]]))
+
 
 ;;; --- RELEASE NOTES MODAL
 
diff --git a/frontend/src/app/worker/import.cljs b/frontend/src/app/worker/import.cljs
index d36ec13a6..04c9521f3 100644
--- a/frontend/src/app/worker/import.cljs
+++ b/frontend/src/app/worker/import.cljs
@@ -169,7 +169,7 @@
                   (rx/tap #(do (swap! current inc)
                                (progress! context
                                           :upload-data @current total))))))
-          
+
           (rx/map first)
           (rx/tap #(reset! revn (:revn %)))
           (rx/ignore))
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index 691cc14e6..7297aa88b 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -250,6 +250,12 @@ msgstr "Duplicate %s files"
 msgid "dashboard.empty-files"
 msgstr "You still have no files here"
 
+
+#: src/app/main/ui/dashboard/grid.cljs
+#, markdown
+msgid "dashboard.empty-placeholder-drafts"
+msgstr "Oh no! You have no files jet!</br> If you want to try with some templates go to [templates.penpot.app](https://penpot.app/libraries-templates.html)"
+
 msgid "dashboard.export-frames"
 msgstr "Export artboards to PDF..."
 
@@ -1533,6 +1539,13 @@ msgstr "Profile saved successfully!"
 msgid "notifications.validation-email-sent"
 msgstr "Verification email sent to %s. Check your email!"
 
+
+msgid "onboarding.templates.title"
+msgstr "Start designing"
+
+msgid "onboarding.templates.subtitle"
+msgid "Here are some templates."
+
 msgid "onboarding.contrib.alt"
 msgstr "Open Source"
 
@@ -1606,31 +1619,27 @@ msgstr ""
 msgid "onboarding.slide.3.title"
 msgstr "One shared source of truth"
 
-msgid "onboarding.team.create.button"
-msgstr "Create a team"
+msgid "onboarding.choice.fly-solo"
+msgstr "Fly solo"
 
-msgid "onboarding.team.create.desc1"
-msgstr ""
-"Are you working with someone? Create a team to work together on projects "
-"and share design assets."
+msgid "onboarding.choice.fly-solo-desc"
+msgstr "Jump away into Penpot and start designing by your own."
 
-msgid "onboarding.team.create.input-placeholder"
+msgid "onboarding.choice.team-up"
+msgstr "Team up"
+
+msgid "onboarding.team.skip-and-invite-later"
+msgstr "Skip and invite later"
+
+msgid "onboarding.choice.team-up-desc"
+msgstr "Are you working with someone? Create a team and invite people to work together on projects and share design assets."
+
+msgid "labels.next"
+msgstr "Next"
+
+msgid "onboarding.team-input-placeholder"
 msgstr "Enter new team name"
 
-msgid "onboarding.team.create.title"
-msgstr "Create team"
-
-msgid "onboarding.team.start.button"
-msgstr "Start right away"
-
-msgid "onboarding.team.start.desc1"
-msgstr ""
-"Jump right away into Penpot and start designing by your own. You will still "
-"have the chance to create teams later."
-
-msgid "onboarding.team.start.title"
-msgstr "Start designing"
-
 msgid "onboarding.welcome.alt"
 msgstr "Penpot"
 
@@ -1642,6 +1651,9 @@ msgstr ""
 "Penpot is still at development stage and there will be constant updates. We "
 "hope you enjoy the first stable version."
 
+msgid "onboarding.welcome.desc3"
+msgstr "How do you want to start?"
+
 msgid "onboarding.welcome.title"
 msgstr "Welcome to Penpot!"
 
@@ -3187,4 +3199,5 @@ msgid "workspace.updates.update"
 msgstr "Update"
 
 msgid "workspace.viewport.click-to-close-path"
-msgstr "Click to close the path"
\ No newline at end of file
+msgstr "Click to close the path"
+