diff --git a/frontend/src/components/PageHeader.vue b/frontend/src/components/PageHeader.vue
index 21ec32c4e0..5d9568736b 100644
--- a/frontend/src/components/PageHeader.vue
+++ b/frontend/src/components/PageHeader.vue
@@ -11,7 +11,7 @@
         <router-link :to="homeLink">
             <img class="ff-logo" src="/ff-logo--wordmark--dark.png">
         </router-link>
-        <global-search v-if="hasAMinimumTeamRoleOf(Roles.Viewer)" />
+        <global-search v-if="teams.length > 0 && hasAMinimumTeamRoleOf(Roles.Viewer)" />
         <!-- Mobile: Toggle(User Options) -->
         <div class="flex ff-mobile-navigation-right" data-el="mobile-nav-right">
             <NotificationsButton class="ff-header--mobile-notificationstoggle" :class="{'active': mobileTeamSelectionOpen}" />
diff --git a/frontend/src/components/TeamTypeSelection.vue b/frontend/src/components/TeamTypeSelection.vue
new file mode 100644
index 0000000000..2c41bfc209
--- /dev/null
+++ b/frontend/src/components/TeamTypeSelection.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <div class="flex gap-6 justify-center relative z-10 flex-wrap">
+            <team-type-tile v-for="type in types" :key="type.id" :team-type="type" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+import teamTypesApi from '../api/teamTypes.js'
+
+import TeamTypeTile from './TeamTypeTile.vue'
+
+export default {
+    name: 'TeamTypeSelection',
+    components: {
+        'team-type-tile': TeamTypeTile
+    },
+    data () {
+        return {
+            types: []
+        }
+    },
+    computed: {
+        ...mapState('account', ['user'])
+    },
+    async created () {
+        const { types } = await teamTypesApi.getTeamTypes()
+        this.types = types.sort((a, b) => a.order - b.order)
+    }
+}
+</script>
diff --git a/frontend/src/components/TeamTypeTile.vue b/frontend/src/components/TeamTypeTile.vue
new file mode 100644
index 0000000000..19b0e3c100
--- /dev/null
+++ b/frontend/src/components/TeamTypeTile.vue
@@ -0,0 +1,143 @@
+<template>
+    <div class="ff-team-type-tile">
+        <div v-if="isTrial(teamType)" class="trial-ribbon">
+            <label>{{ teamType.properties.trial.duration }} Days Free Trial</label>
+        </div>
+        <div class="space-y-2">
+            <img class="w-36 m-auto" src="../images/empty-states/application-instances.png">
+            <div class="flex flex-col gap-5">
+                <div class="flex justify-between items-center text-2xl">
+                    <label class="font-medium">{{ teamType.name }}</label>
+                    <span v-if="pricing?.value">
+                        {{ pricing.value }} <span class="text-xs">/{{ pricing.interval }}</span>
+                    </span>
+                </div>
+                <ff-markdown-viewer :content="teamType.description" />
+            </div>
+        </div>
+        <template v-if="enableCTA">
+            <ff-button v-if="isTrial(teamType)" kind="primary" class="w-full mt-4" :to="`/team/create?teamType=${teamType.id}`">
+                Start Free Trial
+            </ff-button>
+            <ff-button v-else-if="isManualBilling(teamType)" kind="secondary" class="w-full mt-4" @click="contactFF(teamType)">
+                Contact FlowFuse
+            </ff-button>
+            <ff-button v-else kind="secondary" class="w-full mt-4" :to="`/team/create?teamType=${teamType.id}`">
+                Select
+            </ff-button>
+        </template>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+import BillingAPI from '../api/billing.js'
+import Alerts from '../services/alerts.js'
+
+export default {
+    name: 'TeamTypeTile',
+    props: {
+        teamType: {
+            type: Object,
+            required: true
+        },
+        enableCTA: {
+            type: Boolean,
+            default: true
+        }
+    },
+    computed: {
+        ...mapState('account', ['user', 'teams']),
+        pricing: function () {
+            const billing = this.teamType.properties?.billing.description?.split('/')
+            const price = {}
+            if (typeof billing !== 'undefined') {
+                price.value = billing[0]
+                price.interval = billing[1]
+            }
+            return price
+        }
+    },
+    methods: {
+        isTrial (teamType) {
+            // A team trial can be offered if:
+            // 1. User has no other teams
+            return this.teams.length === 0 &&
+            // 2. User is less than a week old
+                (Date.now() - (new Date(this.user.createdAt)).getTime()) < 1000 * 60 * 60 * 24 * 7 &&
+            // 3. TeamType meta data says so
+                teamType.properties?.trial?.active
+        },
+        isManualBilling (teamType) {
+            return teamType.properties?.billing?.requireContact
+        },
+        contactFF (teamType) {
+            BillingAPI.sendTeamTypeContact(this.user, teamType, 'Create Team').then(() => {
+                Alerts.emit('A message has been sent to our team. We will contact you soon regarding your request. In the mean time, feel free to choose another plan to get started.', 'confirmation', 20000)
+            }).catch(err => {
+                Alerts.emit('Something went wrong with the request. Please try again or contact support for help.', 'warning', 15000)
+                console.error('Failed to submit hubspot form: ', err)
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.ff-team-type-tile {
+    position: relative;
+    border-radius: 6px;
+    border: 2px solid $ff-grey-300;
+    background: white;
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
+    padding: 24px;
+    width: 100%;
+    max-width: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    ul {
+        list-style: disc;
+        padding-left: 16px;
+        li {
+            margin-bottom: 6px;
+        }
+    }
+}
+.trial-ribbon {
+    --ribbon-overlap: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 30px;
+    left: calc(-1 * var(--ribbon-overlap));
+    line-height: 1.3;
+    width: calc(100% + 2 * var(--ribbon-overlap));
+    margin: 0;
+    position: absolute;
+    top: 8px;
+    color: white;
+    // text-shadow: 0 1px 1px #111;
+    border-top: 1px solid #363636;
+    border-bottom: 1px solid #202020;
+    background: $ff-red-500;
+    // background: linear-gradient($ff-red-500 0%, $ff-red-700 100%);
+    border-radius: 2px 2px 0 0;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
+}
+.trial-ribbon::before,
+.trial-ribbon::after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    position: absolute;
+    bottom: calc((-2 * var(--ribbon-overlap)) - 1px);
+    z-index: -10;
+    border: var(--ribbon-overlap) solid;
+    border-color: $ff-red-900 transparent transparent transparent;
+}
+.trial-ribbon::before {left: 0;}
+.trial-ribbon::after {right: 0;}
+</style>
diff --git a/frontend/src/pages/Home.vue b/frontend/src/pages/Home.vue
index c9c9de5165..3ad5432886 100644
--- a/frontend/src/pages/Home.vue
+++ b/frontend/src/pages/Home.vue
@@ -1,13 +1,20 @@
 <template>
-    <main>
+    <main class="min-h-full">
         <template v-if="pending">
             <div class="flex-grow flex flex-col items-center justify-center mx-auto text-gray-600 opacity-50">
                 <FlowFuseLogo class="max-w-xs mx-auto w-full" />
             </div>
         </template>
-        <template v-else-if="teams.length === 0">
-            <NoTeamsUser />
-        </template>
+        <ff-page v-else-if="teams.length === 0">
+            <template #header>
+                <ff-page-header title="Choose Team Type">
+                    <template #context>
+                        Choose which team type you'd like to get started with.
+                    </template>
+                </ff-page-header>
+            </template>
+            <TeamTypeSelection />
+        </ff-page>
     </main>
 </template>
 
@@ -17,13 +24,13 @@ import { mapGetters, mapState } from 'vuex'
 
 import FlowFuseLogo from '../components/Logo.vue'
 
-import NoTeamsUser from './account/NoTeamsUser.vue'
+import TeamTypeSelection from '../components/TeamTypeSelection.vue'
 
 export default {
     name: 'HomePage',
     components: {
         FlowFuseLogo,
-        NoTeamsUser
+        TeamTypeSelection
     },
     data () {
         return {
diff --git a/frontend/src/pages/account/NoTeamsUser.vue b/frontend/src/pages/account/NoTeamsUser.vue
deleted file mode 100644
index dfd7eb0aa8..0000000000
--- a/frontend/src/pages/account/NoTeamsUser.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-    <form class="py-8 text-center">
-        <p class="text-gray-700 text-lg">You need to be in a team to create projects.</p>
-        <p v-if="invitationCount === 0 && !user.admin && !settings['team:create']" class="text-gray-700 text-lg mt-10 ">Ask an Admin or Team Owner to add you to a team.</p>
-        <div class="pt-4 justify-center flex gap-5" :class="invitationCount > 0?'sm:grid-cols-2':'max-w-xs mx-auto'">
-            <router-link v-if="user.admin || settings['team:create']" to="/team/create" class="forge-button-secondary p-4 sm:h-36 inline-flex sm:flex-col items-center sm:justify-center gap-4">
-                <UserGroupIcon class="w-10" />
-                Create a new team
-            </router-link>
-            <router-link v-if="invitationCount>0" data-nav="team-invites" to="/account/teams/invitations" class="forge-button-secondary p-4 sm:h-36 inline-flex sm:flex-col items-center sm:justify-center gap-4">
-                <InboxInIcon class="w-10" />
-                You have {{ invitationCount }} team {{ $filters.pluralize(invitationCount,"invitation") }}
-            </router-link>
-        </div>
-    </form>
-</template>
-
-<script>
-
-import { InboxInIcon, UserGroupIcon } from '@heroicons/vue/outline'
-import { mapGetters, mapState } from 'vuex'
-
-export default {
-    name: 'NoTeamsUser',
-    components: {
-        UserGroupIcon,
-        InboxInIcon
-    },
-    computed: {
-        ...mapState('account', ['settings', 'user']),
-        ...mapGetters('account', {
-            invitationCount: 'teamInvitationsCount'
-        })
-    },
-    mounted () {
-        this.fetchData()
-    },
-    methods: {
-        async fetchData () {
-            await this.$store.dispatch('account/getInvitations')
-        }
-    }
-}
-</script>
diff --git a/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue b/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue
index 082c7b8b83..de0ff84900 100644
--- a/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue
+++ b/frontend/src/pages/admin/TeamTypes/dialogs/TeamTypeEditDialog.vue
@@ -14,7 +14,7 @@
                     Order
                     <template #description>Set the sort order when listing the types</template>
                 </FormRow>
-                <FormRow v-model="input.description" :error="errors.description" data-form="description">
+                <FormRow v-model="input.description" :error="errors.description" data-form="description" containerClass="w-full">
                     Description
                     <template #description>Use markdown for formatting</template>
                     <template #input><textarea v-model="input.description" class="w-full" rows="6" /></template>
diff --git a/frontend/src/pages/admin/TeamTypes/index.vue b/frontend/src/pages/admin/TeamTypes/index.vue
index 7f6573d94b..f975a3478f 100644
--- a/frontend/src/pages/admin/TeamTypes/index.vue
+++ b/frontend/src/pages/admin/TeamTypes/index.vue
@@ -79,7 +79,7 @@ export default {
     },
     computed: {
         activeTeamTypes () {
-            const types = this.teamTypes.filter(pt => pt.active)
+            const types = this.teamTypes.filter(pt => pt.active).sort((a, b) => a.order - b.order)
             return types
         },
         inactiveTeamTypes () {
diff --git a/frontend/src/pages/instance/components/InstanceForm.vue b/frontend/src/pages/instance/components/InstanceForm.vue
index 3e1c81cd24..24edd3c403 100644
--- a/frontend/src/pages/instance/components/InstanceForm.vue
+++ b/frontend/src/pages/instance/components/InstanceForm.vue
@@ -1,6 +1,4 @@
 <template>
-    <FeatureUnavailableToTeam v-if="teamRuntimeLimitReached" fullMessage="You have reached the runtime limit for this team." />
-    <FeatureUnavailableToTeam v-else-if="teamInstanceLimitReached" fullMessage="You have reached the instance limit for this team." />
     <form class="space-y-6" @submit.prevent="onSubmit">
         <SectionTopMenu v-if="hasHeader" :hero="heroTitle" />
         <!-- Form title -->
@@ -67,6 +65,8 @@
         </FormRow>
 
         <div v-if="!creatingApplication || input.createInstance" :class="creatingApplication ? 'ml-6' : ''" class="space-y-6">
+            <FeatureUnavailableToTeam v-if="teamRuntimeLimitReached" fullMessage="You have reached the runtime limit for this team." />
+            <FeatureUnavailableToTeam v-else-if="teamInstanceLimitReached" fullMessage="You have reached the instance limit for this team." />
             <!-- Instance Name -->
             <div>
                 <FormRow
@@ -452,6 +452,10 @@ export default {
             return (teamTypeRuntimeLimit > 0 && currentRuntimeCount >= teamTypeRuntimeLimit)
         },
         teamInstanceLimitReached () {
+            // this.projectTypes.length > 0 : There are Instance Types defined
+            // this.activeProjectTypeCount : How instance types are available for the user to select
+            //                               taking into account their limits
+            // Hence, if activeProjectTypeCount === 0, then they are at their limit of usage
             return this.projectTypes.length > 0 && this.activeProjectTypeCount === 0
         },
         atLeastOneFlowBlueprint () {
@@ -648,6 +652,9 @@ export default {
                 ...this.preDefinedInputs
             }
         }
+        if (this.teamInstanceLimitReached || this.teamRuntimeLimitReached) {
+            this.input.createInstance = false
+        }
     },
     async beforeMount () {
         // Billing feature must be enabled
diff --git a/frontend/src/pages/team/create.vue b/frontend/src/pages/team/create.vue
index cc0bc83c40..cd667c8775 100644
--- a/frontend/src/pages/team/create.vue
+++ b/frontend/src/pages/team/create.vue
@@ -1,13 +1,21 @@
 <template>
     <ff-page>
+        <template #header>
+            <ff-page-header title="Create New Team">
+                <template #context>
+                    Teams provide a way to organize who collaborates on your applications.
+                </template>
+            </ff-page-header>
+        </template>
         <ff-loading v-if="redirecting" message="Redirecting to Stripe..." />
         <ff-loading v-else-if="loading" message="Creating Team..." />
-        <div v-else class="m-auto">
-            <form class="space-y-6">
-                <FormHeading>Create a new team</FormHeading>
-                <div class="mb-8 text-sm text-gray-500">Teams are how you organize who collaborates on your applications.</div>
+        <div v-else class="m-auto max-w-5xl" :class="presetTeamType ? 'flex flex-col gap-4 sm:flex-row sm:gap-0' : 'space-y-6 max-w-4xl m-auto'">
+            <div v-if="presetTeamType" class="w-full max-w-lg">
+                <team-type-tile class="m-auto" :team-type="presetTeamType" :enableCTA="false" />
+            </div>
+            <form>
                 <!-- TeamType Type -->
-                <div class="grid">
+                <div v-if="!presetTeamType" class="grid mb-3">
                     <ff-tile-selection v-model="input.teamTypeId">
                         <ff-tile-selection-option
                             v-for="(teamType, index) in teamTypes" :key="index"
@@ -18,15 +26,15 @@
                         />
                     </ff-tile-selection>
                 </div>
-                <template v-if="!isContactRequired">
-                    <FormRow id="team" v-model="input.name" :error="errors.name">
+                <div v-if="!isContactRequired" class="space-y-3">
+                    <FormRow id="team" v-model="input.name" :error="errors.name" containerClass="max-w-md">
                         Team Name
                         <template #description>
                             eg. 'Development'
                         </template>
                     </FormRow>
 
-                    <FormRow id="team" v-model="input.slug" :error="input.slugError" :placeholder="input.defaultSlug">
+                    <FormRow id="team" v-model="input.slug" :error="input.slugError" :placeholder="input.defaultSlug" containerClass="max-w-md">
                         URL Slug
                         <template #description>
                             Use the default slug based on the team name or set your own.<br>
@@ -36,7 +44,8 @@
 
                     <template v-if="billingEnabled">
                         <div class="mb-8 text-sm text-gray-500 space-y-2">
-                            <p>To create the team we need to setup payment details via Stripe, our secure payment provider.</p>
+                            <p v-if="!presetTeamType || !presetTeamType.isFree">To create the team we need to setup payment details via Stripe, our secure payment provider.</p>
+                            <p v-else>Please note that, whilst we do require credit card details, this Team is free of charge, and no charges will be made.</p>
                         </div>
                         <ff-button :disabled="!formValid" @click="createTeam()">
                             <template #icon-right><ExternalLinkIcon /></template>
@@ -46,7 +55,7 @@
                     <ff-button v-else :disabled="!formValid" @click="createTeam()">
                         Create team
                     </ff-button>
-                </template>
+                </div>
                 <template v-else>
                     <div class="mb-8 text-sm text-gray-500 space-y-2">
                         <p>To learn more about our {{ input.teamType?.name }} plan, click below to contact our sales team.</p>
@@ -68,9 +77,9 @@ import billingApi from '../../api/billing.js'
 import teamApi from '../../api/team.js'
 import teamTypesApi from '../../api/teamTypes.js'
 import teamsApi from '../../api/teams.js'
-import FormHeading from '../../components/FormHeading.vue'
 import FormRow from '../../components/FormRow.vue'
 
+import TeamTypeTile from '../../components/TeamTypeTile.vue'
 import Alerts from '../../services/alerts.js'
 import slugify from '../../utils/slugify.js'
 
@@ -96,7 +105,8 @@ export default {
             needsBilling: false,
             newTeam: null,
             errors: {},
-            pendingSlugCheck: null
+            pendingSlugCheck: null,
+            presetTeamType: false
         }
     },
     watch: {
@@ -127,7 +137,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['user', 'team', 'features']),
+        ...mapState('account', ['user', 'team', 'teams', 'features']),
         formValid () {
             return this.input.teamTypeId && this.input.name && this.input.slug && !this.pendingSlugCheck && !this.input.slugError && !this.errors.name
         },
@@ -146,11 +156,22 @@ export default {
     async created () {
         const teamTypesPromise = await teamTypesApi.getTeamTypes()
 
-        this.teamTypes = (await teamTypesPromise).types
+        this.teamTypes = (await teamTypesPromise).types.sort((a, b) => a.order - b.order)
         this.input.teamTypeId = this.teamTypes[0].id
+
+        if (this.$route.query.teamType) {
+            this.input.teamTypeId = this.$route.query.teamType
+            for (const teamType of this.teamTypes) {
+                if (teamType.id === this.input.teamTypeId) {
+                    this.presetTeamType = teamType
+                    break
+                }
+            }
+        }
     },
     mounted () {
         this.mounted = true
+        // was a team type pre-determined
     },
     methods: {
         createTeam () {
@@ -161,6 +182,17 @@ export default {
                 slug: this.input.slug || this.input.defaultSlug,
                 type: this.input.teamTypeId
             }
+            // Check if we should set the trial flag
+            if (
+                // TeamType has trial mode enabled
+                this.input.teamType.properties?.trial?.active &&
+                // User has no other teams
+                this.teams.length === 0 &&
+                // User is less than a week old
+                (Date.now() - (new Date(this.user.createdAt)).getTime()) < 1000 * 60 * 60 * 24 * 7
+            ) {
+                opts.trial = true
+            }
 
             teamApi.create(opts).then(async result => {
                 await this.$store.dispatch('account/refreshTeams')
@@ -215,8 +247,8 @@ export default {
     },
     components: {
         FormRow,
-        FormHeading,
-        ExternalLinkIcon
+        ExternalLinkIcon,
+        'team-type-tile': TeamTypeTile
     }
 }
 </script>
diff --git a/frontend/src/ui-components/stylesheets/ff-components.scss b/frontend/src/ui-components/stylesheets/ff-components.scss
index 505e619cce..bf4c9691df 100644
--- a/frontend/src/ui-components/stylesheets/ff-components.scss
+++ b/frontend/src/ui-components/stylesheets/ff-components.scss
@@ -665,7 +665,7 @@ li.ff-list-item {
     }
     &.active {
       border: 2px solid var(--ff-tile-selection-color);
-      svg {
+      .ff-tile-selection-option--header svg {
         fill: var(--ff-tile-selection-color);
       }
     }
diff --git a/test/e2e/frontend/cypress/tests/invitations.spec.js b/test/e2e/frontend/cypress/tests/invitations.spec.js
index 7071a71f93..ff0b769e75 100644
--- a/test/e2e/frontend/cypress/tests/invitations.spec.js
+++ b/test/e2e/frontend/cypress/tests/invitations.spec.js
@@ -21,14 +21,15 @@ describe('FlowFuse platform invitees', () => {
     })
 
     it('can reject an invitation to a new team', () => {
-        // should show one pending invite
         cy.get('[data-el="desktop-nav-right"]').within(() => {
             cy.get('[data-el="notification-pill"]').should('have.text', '2')
+            cy.get('[data-el="notifications-button"]').click()
         })
 
+        cy.get('[data-el="notifications-drawer"]').should('be.visible')
+        cy.get('[data-el="invitation-message"]').eq(0).click()
+
         // user should see a message
-        cy.get('[data-nav="team-invites"]').should('be.visible')
-        cy.get('[data-nav="team-invites"]').click()
 
         cy.url().should('include', '/account/teams/invitations')
 
@@ -49,12 +50,12 @@ describe('FlowFuse platform invitees', () => {
     it('can accept an invitation to a new team and is navigated to the team\'s dashboard', () => {
         // should show one pending invite
         cy.get('[data-el="desktop-nav-right"]').within(() => {
-            cy.get('[data-el="notification-pill"]').should('have.text', '1')
+            cy.get('[data-el="notifications-button"]').click()
         })
 
-        // user should see a message
-        cy.get('[data-nav="team-invites"]').should('be.visible')
-        cy.get('[data-nav="team-invites"]').click()
+        cy.get('[data-el="notifications-drawer"]').should('be.visible')
+        cy.get('[data-action="show-read-check"]').click()
+        cy.get('[data-el="invitation-message"]').eq(0).click()
 
         cy.url().should('include', '/account/teams/invitations')