diff --git a/nuxt-pinia-tailwind/README.md b/nuxt-pinia-tailwind/README.md
index 715ef1126..20e6ca461 100644
--- a/nuxt-pinia-tailwind/README.md
+++ b/nuxt-pinia-tailwind/README.md
@@ -53,6 +53,7 @@ Open the project root directory in your terminal and navigate to the `nuxt-pinia
 cd nuxt-pinia-tailwind
 yarn
 ```
+
 ## Live Demo
 
 This demo app gets deployed to Netlify on changes to the `main` branch.
diff --git a/nuxt-pinia-tailwind/components/PrivacyBadge/PrivacyBadge.vue b/nuxt-pinia-tailwind/components/PrivacyBadge/PrivacyBadge.vue
index 73894ca78..ecab42819 100644
--- a/nuxt-pinia-tailwind/components/PrivacyBadge/PrivacyBadge.vue
+++ b/nuxt-pinia-tailwind/components/PrivacyBadge/PrivacyBadge.vue
@@ -1,6 +1,5 @@
 <template>
   <span
-    :class="customClass"
     class="py-0.5 px-2 text-xs rounded-xl text-gray-600 border border-gray-300 font-medium"
   >
     {{ badgetText }}
@@ -12,11 +11,6 @@ import { defineComponent, ref } from '@nuxtjs/composition-api';
 export default defineComponent({
   name: 'PrivacyBadge',
   props: {
-    customClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
     isPrivate: {
       type: Boolean,
       required: true,
diff --git a/nuxt-pinia-tailwind/components/ProfileNav/ProfileNav.vue b/nuxt-pinia-tailwind/components/ProfileNav/ProfileNav.vue
new file mode 100644
index 000000000..6fe47121c
--- /dev/null
+++ b/nuxt-pinia-tailwind/components/ProfileNav/ProfileNav.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <TabNavigation :tabs="tabList"></TabNavigation>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  computed: {
+    tabList() {
+      return [
+        {
+          title: 'Overview',
+          path: `${this.$route.path}`,
+          icon: 'GitOverviewIcon',
+        },
+        {
+          title: 'Repositories',
+          path: `${this.$route.path}?repositories`,
+          icon: 'GitRepoIcon',
+          label: this.$auth.user.public_repos,
+        },
+        {
+          title: 'Stars',
+          path: `${this.$route.path}?stars`,
+          icon: 'StarIcon',
+          label: this.$auth.user.stars_count,
+        },
+      ];
+    },
+  },
+});
+</script>
diff --git a/nuxt-pinia-tailwind/components/RepoMeta/RepoMeta.vue b/nuxt-pinia-tailwind/components/RepoMeta/RepoMeta.vue
index 66116f29d..8b445ff91 100644
--- a/nuxt-pinia-tailwind/components/RepoMeta/RepoMeta.vue
+++ b/nuxt-pinia-tailwind/components/RepoMeta/RepoMeta.vue
@@ -14,11 +14,11 @@
         v-if="stargazerCount"
         class="hover:cursor-pointer hover:text-blue-600"
       >
-        <StarIcon custom-class="w-4 h-4 inline mb-0.5" /> {{ stargazerCount }}
+        <StarIcon class="w-4 h-4 inline mb-0.5" /> {{ stargazerCount }}
       </span>
 
       <span v-if="forkCount" class="hover:cursor-pointer hover:text-blue-600">
-        <GitBranchIcon custom-class="w-4 h-4 inline mb-0.5" /> {{ forkCount }}
+        <GitBranchIcon class="w-4 h-4 inline mb-0.5" /> {{ forkCount }}
       </span>
     </div>
 
diff --git a/nuxt-pinia-tailwind/components/RepositoryCard/RepositoryCard.vue b/nuxt-pinia-tailwind/components/RepositoryCard/RepositoryCard.vue
index 2cd3889e4..c7139ac23 100644
--- a/nuxt-pinia-tailwind/components/RepositoryCard/RepositoryCard.vue
+++ b/nuxt-pinia-tailwind/components/RepositoryCard/RepositoryCard.vue
@@ -6,7 +6,7 @@
           {{ name }}
         </p>
       </nuxt-link>
-      <PrivacyBadge :is-private="false" :custom-class="'relative bottom-0.5'" />
+      <PrivacyBadge :is-private="false" :class="'relative bottom-0.5'" />
     </h3>
 
     <div>
diff --git a/nuxt-pinia-tailwind/components/TabNavigation/TabNavigation.vue b/nuxt-pinia-tailwind/components/TabNavigation/TabNavigation.vue
new file mode 100644
index 000000000..ad12185da
--- /dev/null
+++ b/nuxt-pinia-tailwind/components/TabNavigation/TabNavigation.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="tab-navigation border-gray-200">
+    <nav class="-mb-px flex" aria-label="Tabs">
+      <nuxt-link
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :to="tab.path"
+        class="group relative py-2 mx-2 border-b-2 border-transparent"
+      >
+        <div
+          class="inline-flex items-center py-1 px-2 font-medium text-sm rounded-lg group-hover:bg-gray-100"
+        >
+          <component :is="tab.icon" class="-ml-0.5 mr-2 h-4 w-4"></component>
+          <span>{{ tab.title }}</span>
+          <span
+            v-if="tab.label"
+            class="ml-2 bg-gray-200 font-medium text-xs text-gray-800 py-0.5 px-2 rounded-xl"
+          >
+            {{ tab.label }}
+          </span>
+        </div>
+      </nuxt-link>
+    </nav>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import { ITabItem } from './types';
+export default Vue.extend({
+  props: {
+    tabs: {
+      type: Array as PropType<Array<ITabItem>>,
+      default: () => [],
+    },
+  },
+});
+</script>
+
+<style>
+.tab-navigation .nuxt-link-exact-active::after {
+  @apply bg-orange-500;
+
+  position: absolute;
+  content: '';
+  right: 50%;
+  bottom: calc(50% - 24px);
+  width: 100%;
+  height: 2px;
+  border-radius: 6px;
+  transform: translate(50%, -50%);
+}
+</style>
diff --git a/nuxt-pinia-tailwind/components/TabNavigation/types.ts b/nuxt-pinia-tailwind/components/TabNavigation/types.ts
new file mode 100644
index 000000000..061d308bb
--- /dev/null
+++ b/nuxt-pinia-tailwind/components/TabNavigation/types.ts
@@ -0,0 +1,6 @@
+export interface ITabItem {
+  title: string;
+  path?: string;
+  icon: string;
+  label?: number | string;
+}
diff --git a/nuxt-pinia-tailwind/components/UserProfile/UserProfile.vue b/nuxt-pinia-tailwind/components/UserProfile/UserProfile.vue
new file mode 100644
index 000000000..55a8ada88
--- /dev/null
+++ b/nuxt-pinia-tailwind/components/UserProfile/UserProfile.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="w-[260px] h-[260px]">
+      <img
+        :src="userProfile.avatar"
+        alt="Avatar"
+        width="260"
+        height="260"
+        class="absolute rounded-full shadow z-30"
+      />
+    </div>
+    <h1 class="mt-2">
+      <div class="text-2xl text-gray-800 font-bold leading-tight">
+        {{ userProfile.name }}
+      </div>
+      <div class="text-xl text-gray-500 font-light">
+        {{ userProfile.username }}
+      </div>
+    </h1>
+    <div class="text-gray-800 mt-4">{{ userProfile.bio }}</div>
+    <div class="text-sm text-gray-600 my-4">
+      <UsersIcon class="w-4 h-4 mb-0.5 mr-1 inline" />
+      <span class="inline-block">
+        <span class="font-medium text-gray-900">{{
+          userProfile.followers
+        }}</span>
+        followers
+      </span>
+      <span class="mx-1">·</span>
+      <span class="inline-block">
+        <span class="font-medium text-gray-900">{{
+          userProfile.following
+        }}</span>
+        following
+      </span>
+    </div>
+    <div class="text-sm text-gray-800 space-y-1">
+      <div v-if="userProfile.company">
+        <OfficeBuildingIcon class="w-4 h-4 mb-0.5 mr-1 inline" />
+        {{ userProfile.company }}
+      </div>
+      <div v-if="userProfile.location">
+        <LocationMarkerIcon class="w-4 h-4 mb-0.5 mr-1 inline" />
+        {{ userProfile.location }}
+      </div>
+      <div v-if="userProfile.websiteUrl">
+        <LinkIcon class="w-4 h-4 mb-0.5 mr-1 inline" />
+        <a
+          class="hover:text-blue-600 hover:underline"
+          :href="userProfile.websiteUrl"
+          target="_blank"
+          rel="noreferrer"
+        >
+          {{ userProfile.websiteUrl }}
+        </a>
+      </div>
+      <div v-if="userProfile.twitterUsername">
+        <TwitterLogo class="w-4 h-4 mb-0.5 mr-1 inline" />
+        <a
+          class="hover:text-blue-600 hover:underline"
+          :href="`https:/twitter.com/${userProfile.twitterUsername}`"
+          target="_blank"
+          rel="noreferrer"
+        >
+          @{{ userProfile.twitterUsername }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+  computed: {
+    userProfile() {
+      return {
+        avatar: this.$auth.user.avatar_url,
+        name: this.$auth.user.name,
+        username: this.$auth.user.login,
+        bio: this.$auth.user.bio,
+        followers: this.$auth.user.followers,
+        following: this.$auth.user.following,
+        company: this.$auth.user.company,
+        location: this.$auth.user.location,
+        websiteUrl: this.$auth.user.website_url,
+        twitterUsername: this.$auth.user.twitter_username,
+      };
+    },
+  },
+});
+</script>
diff --git a/nuxt-pinia-tailwind/components/icons/GithubLogo/GitBranchIcon.vue b/nuxt-pinia-tailwind/components/icons/GitBranchIcon.vue
similarity index 97%
rename from nuxt-pinia-tailwind/components/icons/GithubLogo/GitBranchIcon.vue
rename to nuxt-pinia-tailwind/components/icons/GitBranchIcon.vue
index 575610616..14eab1a7c 100644
--- a/nuxt-pinia-tailwind/components/icons/GithubLogo/GitBranchIcon.vue
+++ b/nuxt-pinia-tailwind/components/icons/GitBranchIcon.vue
@@ -12,7 +12,7 @@
   </svg>
 </template>
 
-<script lang="ts">
+<script>
 export default {
   name: 'GitBranchIcon',
   props: {
diff --git a/nuxt-pinia-tailwind/components/icons/GitOverviewIcon.vue b/nuxt-pinia-tailwind/components/icons/GitOverviewIcon.vue
new file mode 100644
index 000000000..8765c1a01
--- /dev/null
+++ b/nuxt-pinia-tailwind/components/icons/GitOverviewIcon.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" version="1.1">
+    <path
+      fill-rule="evenodd"
+      d="M0 1.75A.75.75 0 01.75 1h4.253c1.227 0 2.317.59 3 1.501A3.744 3.744 0 0111.006 1h4.245a.75.75 0 01.75.75v10.5a.75.75 0 01-.75.75h-4.507a2.25 2.25 0 00-1.591.659l-.622.621a.75.75 0 01-1.06 0l-.622-.621A2.25 2.25 0 005.258 13H.75a.75.75 0 01-.75-.75V1.75zm8.755 3a2.25 2.25 0 012.25-2.25H14.5v9h-3.757c-.71 0-1.4.201-1.992.572l.004-7.322zm-1.504 7.324l.004-5.073-.002-2.253A2.25 2.25 0 005.003 2.5H1.5v9h3.757a3.75 3.75 0 011.994.574z"
+    ></path>
+  </svg>
+</template>
diff --git a/nuxt-pinia-tailwind/components/icons/GitRepoIcon.vue b/nuxt-pinia-tailwind/components/icons/GitRepoIcon.vue
new file mode 100644
index 000000000..7c073bbf7
--- /dev/null
+++ b/nuxt-pinia-tailwind/components/icons/GitRepoIcon.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M13 21v2.5l-3-2-3 2V21h-.5A3.5 3.5 0 0 1 3 17.5V5a3 3 0 0 1 3-3h14a1 1 0 0 1 1 1v17a1 1 0 0 1-1 1h-7zm0-2h6v-3H6.5a1.5 1.5 0 0 0 0 3H7v-2h6v2zm6-5V4H6v10.035A3.53 3.53 0 0 1 6.5 14H19zM7 5h2v2H7V5zm0 3h2v2H7V8zm0 3h2v2H7v-2z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'GitRepo',
+};
+</script>
diff --git a/nuxt-pinia-tailwind/components/icons/GithubLogo/GithubLogo.vue b/nuxt-pinia-tailwind/components/icons/GithubLogo.vue
similarity index 97%
rename from nuxt-pinia-tailwind/components/icons/GithubLogo/GithubLogo.vue
rename to nuxt-pinia-tailwind/components/icons/GithubLogo.vue
index 3ba496b64..5f49fbf4f 100644
--- a/nuxt-pinia-tailwind/components/icons/GithubLogo/GithubLogo.vue
+++ b/nuxt-pinia-tailwind/components/icons/GithubLogo.vue
@@ -4,7 +4,7 @@
     viewBox="0 0 120.78 117.79"
     :class="customClass"
   >
-    <title>gh-logo-lg-dark-bg</title>
+    <title>Github Logo</title>
     <g id="Layer_2" data-name="Layer 2">
       <g id="Layer_1-2" data-name="Layer 1">
         <path
@@ -44,7 +44,7 @@
   </svg>
 </template>
 
-<script lang="ts">
+<script>
 export default {
   name: 'GithubLogo',
   props: {
diff --git a/nuxt-pinia-tailwind/components/icons/LocationMarkerIcon.vue b/nuxt-pinia-tailwind/components/icons/LocationMarkerIcon.vue
new file mode 100644
index 000000000..4bb896cd5
--- /dev/null
+++ b/nuxt-pinia-tailwind/components/icons/LocationMarkerIcon.vue
@@ -0,0 +1,27 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+    ></path>
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+    ></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'LocationMarkerIcon',
+};
+</script>
diff --git a/nuxt-pinia-tailwind/components/icons/OfficeBuildingIcon.vue b/nuxt-pinia-tailwind/components/icons/OfficeBuildingIcon.vue
new file mode 100644
index 000000000..68be87e19
--- /dev/null
+++ b/nuxt-pinia-tailwind/components/icons/OfficeBuildingIcon.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    aria-hidden="true"
+    class="UserProfile_icon__3z6av"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+    ></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'OfficeBuildingIcon',
+};
+</script>
diff --git a/nuxt-pinia-tailwind/components/icons/GithubLogo/StarIcon.vue b/nuxt-pinia-tailwind/components/icons/StarIcon.vue
similarity index 97%
rename from nuxt-pinia-tailwind/components/icons/GithubLogo/StarIcon.vue
rename to nuxt-pinia-tailwind/components/icons/StarIcon.vue
index 274bcfb82..0c34a2000 100644
--- a/nuxt-pinia-tailwind/components/icons/GithubLogo/StarIcon.vue
+++ b/nuxt-pinia-tailwind/components/icons/StarIcon.vue
@@ -21,7 +21,7 @@ export default {
     customClass: {
       type: String,
       required: false,
-      default: 'h-6',
+      default: 'h-4',
     },
   },
 };
diff --git a/nuxt-pinia-tailwind/components/icons/TwitterLogo.vue b/nuxt-pinia-tailwind/components/icons/TwitterLogo.vue
new file mode 100644
index 000000000..1ab3af25c
--- /dev/null
+++ b/nuxt-pinia-tailwind/components/icons/TwitterLogo.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'TwitterLogo',
+};
+</script>
diff --git a/nuxt-pinia-tailwind/components/icons/UsersIcon.vue b/nuxt-pinia-tailwind/components/icons/UsersIcon.vue
new file mode 100644
index 000000000..c4e4b7caa
--- /dev/null
+++ b/nuxt-pinia-tailwind/components/icons/UsersIcon.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+    ></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'UsersIcon',
+};
+</script>
diff --git a/nuxt-pinia-tailwind/layouts/LoggedIn.vue b/nuxt-pinia-tailwind/layouts/LoggedIn.vue
new file mode 100644
index 000000000..2b7efda37
--- /dev/null
+++ b/nuxt-pinia-tailwind/layouts/LoggedIn.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <TheNavBar />
+    <Nuxt />
+  </div>
+</template>
diff --git a/nuxt-pinia-tailwind/package.json b/nuxt-pinia-tailwind/package.json
index 0e755299b..9c7e14aa6 100644
--- a/nuxt-pinia-tailwind/package.json
+++ b/nuxt-pinia-tailwind/package.json
@@ -56,6 +56,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/vue": "5",
     "@types/jest": "^27.5.1",
+    "@vue/runtime-dom": "^3.2.40",
     "@vue/test-utils": "^1.3.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^27.4.4",
diff --git a/nuxt-pinia-tailwind/pages/_user/index.vue b/nuxt-pinia-tailwind/pages/_user/index.vue
new file mode 100644
index 000000000..972b315b3
--- /dev/null
+++ b/nuxt-pinia-tailwind/pages/_user/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="relative pt-8">
+    <div
+      class="border-b border-gray-200 sticky top-0 bg-white z-20 hidden md:block"
+    >
+      <div class="grid grid-cols-12 gap-8 max-w-screen-2xl mx-auto">
+        <div class="col-span-12 md:col-span-4 xl:col-span-3"></div>
+        <div class="col-span-12 md:col-span-8 xl:col-span-9">
+          <ProfileNav></ProfileNav>
+        </div>
+      </div>
+    </div>
+    <div class="max-w-screen-2xl mx-auto py-8 px-4">
+      <div class="grid grid-cols-12 gap-8">
+        <div
+          class="col-span-12 md:col-span-4 xl:col-span-3 relative md:-top-20"
+        >
+          <UserProfile></UserProfile>
+        </div>
+        <div class="col-span-12 md:col-span-8 xl:col-span-9">
+          {{ $route.fullPath }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+  layout: 'LoggedIn',
+});
+</script>
diff --git a/nuxt-pinia-tailwind/pages/index.vue b/nuxt-pinia-tailwind/pages/index.vue
index 91a7e8cbb..9766f2beb 100644
--- a/nuxt-pinia-tailwind/pages/index.vue
+++ b/nuxt-pinia-tailwind/pages/index.vue
@@ -1,19 +1,16 @@
 <template>
-  <div>
-    <TheNavBar />
-    <div
-      class="w-full min-h-[calc(100vh-70px)] flex flex-col-reverse lg:flex-row bg-gray-100"
-    >
-      <aside class="w-full lg:w-96 bg-white p-8">
-        <UserGists />
-      </aside>
-      <main class="max-w-screen-lg w-full">
-        <div class="p-12">
-          <h2 class="text-lg font-medium mb-4">Top Repositories</h2>
-          <UserRepos />
-        </div>
-      </main>
-    </div>
+  <div
+    class="w-full min-h-[calc(100vh-70px)] flex flex-col-reverse lg:flex-row bg-gray-100"
+  >
+    <aside class="w-full lg:w-96 bg-white p-8">
+      <UserGists />
+    </aside>
+    <main class="max-w-screen-lg w-full">
+      <div class="p-12">
+        <h2 class="text-lg font-medium mb-4">Top Repositories</h2>
+        <UserRepos />
+      </div>
+    </main>
   </div>
 </template>
 
@@ -23,6 +20,7 @@ import Vue from 'vue';
 
 export default Vue.extend({
   name: 'IndexPage',
+  layout: 'LoggedIn',
   setup() {
     const { $auth } = useContext();
 
diff --git a/nuxt-pinia-tailwind/pages/sign-in/Signin.test.ts b/nuxt-pinia-tailwind/pages/sign-in/Signin.test.ts
index e338cb5ff..06a508801 100644
--- a/nuxt-pinia-tailwind/pages/sign-in/Signin.test.ts
+++ b/nuxt-pinia-tailwind/pages/sign-in/Signin.test.ts
@@ -6,14 +6,14 @@ describe('<SignIn />', () => {
   it('Should redirect the user when clicking at the signin button', async () => {
     // Arrange
     const STARTER_API_URL =
-      process.env.STARTER_API_URL || 'https://api.starter.dev/api';
+      process.env.STARTER_API_URL ||
+      'https://api.starter.dev/.netlify/functions/server/api';
     const BASE_URL = process.env.BASE_URL || 'http://localhost:3000';
 
     // Redefine window.location in order to mock it
     const windowLocation = JSON.stringify(window.location);
 
-    global.window = Object.create(window);
-    Object.defineProperty(window, 'location', {
+    Object.defineProperty(globalThis, 'location', {
       writable: true,
       value: JSON.parse(windowLocation),
     });
diff --git a/nuxt-pinia-tailwind/schemes/authScheme.ts b/nuxt-pinia-tailwind/schemes/authScheme.ts
index eeb395cff..54242698c 100644
--- a/nuxt-pinia-tailwind/schemes/authScheme.ts
+++ b/nuxt-pinia-tailwind/schemes/authScheme.ts
@@ -35,7 +35,6 @@ export default class CustomLoginScheme extends LocalScheme {
       };
 
       const getOrgs = this.$auth.requestWith(this.name, orgsEndpoint);
-      //
 
       // Fetch stars
       const starsEndpoint: HTTPRequest = {
@@ -44,7 +43,6 @@ export default class CustomLoginScheme extends LocalScheme {
       };
 
       const getStars = this.$auth.requestWith(this.name, starsEndpoint);
-      //
 
       const [{ data: orgs }, { data: stars }] = await Promise.all([
         getOrgs,
@@ -55,6 +53,8 @@ export default class CustomLoginScheme extends LocalScheme {
         ...user,
         orgs,
         stars,
+        orgs_count: orgs.length,
+        stars_count: stars.length,
       };
 
       this.$auth.setUser(customUser);
diff --git a/nuxt-pinia-tailwind/tsconfig.node.json b/nuxt-pinia-tailwind/tsconfig.node.json
new file mode 100644
index 000000000..9057a0515
--- /dev/null
+++ b/nuxt-pinia-tailwind/tsconfig.node.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"],
+  "vueCompilerOptions": {
+    "experimentalCompatMode": 2, // delete after migrating to nuxt3
+    "experimentalTemplateCompilerOptions": {
+      "compatConfig": {
+        "MODE": 2
+      } // delete after migrating to nuxt3
+    }
+  }
+}
diff --git a/nuxt-pinia-tailwind/types/user/interfaces.ts b/nuxt-pinia-tailwind/types/user/interfaces.ts
index ee40e4b99..6243806b7 100644
--- a/nuxt-pinia-tailwind/types/user/interfaces.ts
+++ b/nuxt-pinia-tailwind/types/user/interfaces.ts
@@ -55,6 +55,7 @@ export interface IUserApiResponse {
   email: string;
   hireable: boolean;
   bio: string;
+  website_url: string;
   twitter_username: string;
   public_repos: number;
   public_gists: number;
@@ -65,6 +66,6 @@ export interface IUserApiResponse {
 }
 
 export interface IUser extends IUserApiResponse {
-  orgs: IUserOrg[];
-  stars: IUserStar[];
+  orgs_count: number;
+  stars_count: number;
 }
diff --git a/nuxt-pinia-tailwind/yarn.lock b/nuxt-pinia-tailwind/yarn.lock
index 45a9a1cc2..e4e7d6ae0 100644
--- a/nuxt-pinia-tailwind/yarn.lock
+++ b/nuxt-pinia-tailwind/yarn.lock
@@ -4123,15 +4123,39 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/shared@3.2.33":
+"@vue/reactivity@3.2.40":
+  version "3.2.40"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.40.tgz#ae65496f5b364e4e481c426f391568ed7d133cca"
+  integrity sha512-N9qgGLlZmtUBMHF9xDT4EkD9RdXde1Xbveb+niWMXuHVWQP5BzgRmE3SFyUBBcyayG4y1lhoz+lphGRRxxK4RA==
+  dependencies:
+    "@vue/shared" "3.2.40"
+
+"@vue/runtime-core@3.2.40":
+  version "3.2.40"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.40.tgz#e814358bf1b0ff6d4a6b4f8f62d9f341964fb275"
+  integrity sha512-U1+rWf0H8xK8aBUZhnrN97yoZfHbjgw/bGUzfgKPJl69/mXDuSg8CbdBYBn6VVQdR947vWneQBFzdhasyzMUKg==
+  dependencies:
+    "@vue/reactivity" "3.2.40"
+    "@vue/shared" "3.2.40"
+
+"@vue/runtime-dom@^3.2.40":
+  version "3.2.40"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.40.tgz#975119feac5ab703aa9bbbf37c9cc966602c8eab"
+  integrity sha512-AO2HMQ+0s2+MCec8hXAhxMgWhFhOPJ/CyRXnmTJ6XIOnJFLrH5Iq3TNwvVcODGR295jy77I6dWPj+wvFoSYaww==
+  dependencies:
+    "@vue/runtime-core" "3.2.40"
+    "@vue/shared" "3.2.40"
+    csstype "^2.6.8"
+
+"@vue/shared@3.2.33", "@vue/shared@^3.2.26":
   version "3.2.33"
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz"
   integrity sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg==
 
-"@vue/shared@^3.2.26":
-  version "3.2.39"
-  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz"
-  integrity sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==
+"@vue/shared@3.2.40":
+  version "3.2.40"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.40.tgz#e57799da2a930b975321981fcee3d1e90ed257ae"
+  integrity sha512-0PLQ6RUtZM0vO3teRfzGi4ltLUO5aO+kLgwh4Um3THSR03rpQWLTuRCkuO5A41ITzwdWeKdPHtSARuPkoo5pCQ==
 
 "@vue/test-utils@^1.1.0", "@vue/test-utils@^1.3.0":
   version "1.3.0"
@@ -6664,6 +6688,11 @@ csstype@^2.5.7:
   resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz"
   integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
 
+csstype@^2.6.8:
+  version "2.6.21"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
+  integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
+
 csstype@^3.0.2:
   version "3.0.11"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz"