diff --git a/content/_data/works/vue-ts.md b/content/_data/works/vue-ts.md
new file mode 100644
index 0000000..6e928cf
--- /dev/null
+++ b/content/_data/works/vue-ts.md
@@ -0,0 +1,18 @@
+[`Vue 3 TS`](https://vuejs.org/) implementation written with Composition API. Instead of using outdated [Bootstrap v4 alpha 2 theme](https://github.com/gothinkster/conduit-bootstrap-template), I rewrite it on [UnoCSS](https://github.com/unocss/unocss), an awesome efficient Tailwind-like utility-first CSS framework.
+
+For API communication, as we have full proper OpenAPI spec, it's a real benefit to have a generated Typescript client for full autocompletion feature. I generally hate generated boilerplate code and the well known [OpenAPI Generator](https://github.com/OpenAPITools/openapi-generator) is not very nice to use.
+
+Thankfully this [openapi-typescript](https://github.com/drwpow/openapi-typescript) package was the perfect solution. It simply translates the OpenAPI spec to a simple Typescript file, with only types. No code generation involved ! In order to work, we need to use a specific **fetch** tool which will use all advanced features of Typescript 4 in order to guess type all the API with only a single TS file in runtime !
+
+Main packages involved :
+
+* [Vite](https://vitejs.dev/) as main bundler
+* [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc) as main TS checker and compiler for Vue components, with full VS Code support with [Volar](https://github.com/johnsoncodehk/volar) plugin
+* [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and code formatting
+* [UnoCSS](https://github.com/unocss/unocss) as utility-first CSS framework
+* [Iconify](https://github.com/iconify/iconify) as universal icons
+* [Pinia](https://pinia.vuejs.org/) as main store system
+* [VueUse](https://vueuse.org/) for many composition function helpers
+* [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) and [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) for vue 3 reactivity functions and components auto import, while preserving TS support
+* [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages) and [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) for file-based route system with layout support, preventing us maintenance of separated route file, which made the DX similar to [Nuxt](https://nuxtjs.org/)
+* [openapi-typescript](https://github.com/drwpow/openapi-typescript) as advanced minimal client-side OpenAPI generator which use advanced Typescript features for autodiscovering all API types without any boilerplate code thanks to [separated fetcher](https://github.com/ajaishankar/openapi-typescript-fetch)
diff --git a/data/works.yaml b/data/works.yaml
index bcd44f3..37cab4d 100644
--- a/data/works.yaml
+++ b/data/works.yaml
@@ -2,54 +2,65 @@
   title: Conduit Apps Collection
   description: true
   projects:
-    - name: aspnet-core
-      title: ASP.NET Core Realworld
-      repo: adr1enbe4udou1n/aspnetcore-realworld-example-app
-      demo: https://aspnetrealworld.okami101.io/api
+    - title: Frontend
+      apps:
+        - name: vue-ts
+          title: Vue 3 TS Realworld
+          repo: adr1enbe4udou1n/vue-ts-realworld-example-app
+          demo: https://vuetsrealworld.okami101.io
+          color: green
 
-    - name: spring-boot
-      title: Spring Boot Realworld
-      repo: adr1enbe4udou1n/spring-boot-realworld-example-app
-      demo: https://springbootrealworld.okami101.io/api
-      color: green
+    - title: Backend
+      apps:
+        - name: aspnet-core
+          title: ASP.NET Core Realworld
+          repo: adr1enbe4udou1n/aspnetcore-realworld-example-app
+          demo: https://aspnetrealworld.okami101.io/api
 
-    - name: symfony
-      title: Symfony Realworld
-      repo: adr1enbe4udou1n/symfony-realworld-example-app
-      demo: https://symfonyrealworld.okami101.io/api
-      color: black
+        - name: spring-boot
+          title: Spring Boot Realworld
+          repo: adr1enbe4udou1n/spring-boot-realworld-example-app
+          demo: https://springbootrealworld.okami101.io/api
+          color: green
 
-    - name: laravel
-      title: Laravel Realworld
-      repo: adr1enbe4udou1n/laravel-realworld-example-app
-      demo: https://laravelrealworld.okami101.io/api
-      color: orange
+        - name: symfony
+          title: Symfony Realworld
+          repo: adr1enbe4udou1n/symfony-realworld-example-app
+          demo: https://symfonyrealworld.okami101.io/api
+          color: black
 
-    - name: nestjs
-      title: NestJS Realworld
-      repo: adr1enbe4udou1n/nestjs-realworld-example-app
-      demo: https://nestjsrealworld.okami101.io/api
-      color: red
+        - name: laravel
+          title: Laravel Realworld
+          repo: adr1enbe4udou1n/laravel-realworld-example-app
+          demo: https://laravelrealworld.okami101.io/api
+          color: orange
 
-    - name: fastapi
-      title: FastAPI Realworld
-      repo: adr1enbe4udou1n/fastapi-realworld-example-app
-      demo: https://fastapirealworld.okami101.io/api
-      color: teal
+        - name: nestjs
+          title: NestJS Realworld
+          repo: adr1enbe4udou1n/nestjs-realworld-example-app
+          demo: https://nestjsrealworld.okami101.io/api
+          color: red
+
+        - name: fastapi
+          title: FastAPI Realworld
+          repo: adr1enbe4udou1n/fastapi-realworld-example-app
+          demo: https://fastapirealworld.okami101.io/api
+          color: teal
 
 - name: others
   title: Other projects
   description: false
   projects:
-    - name: vuetify-admin
-      title: Vuetify Admin
-      date: 11/2020
-      repo: okami101/vuetify-admin
-      demo: https://va-demo.okami101.io/
-      docs: https://www.okami101.io/vuetify-admin
+    - apps:
+      - name: vuetify-admin
+        title: Vuetify Admin
+        date: 11/2020
+        repo: okami101/vuetify-admin
+        demo: https://va-demo.okami101.io/
+        docs: https://www.okami101.io/vuetify-admin
 
-    - name: laravel-rad-stack
-      title: Laravel RAD Stack
-      date: 10/2021
-      repo: adr1enbe4udou1n/laravel-rad-stack
-      demo: https://laravel-rad-stack.okami101.io/
+      - name: laravel-rad-stack
+        title: Laravel RAD Stack
+        date: 10/2021
+        repo: adr1enbe4udou1n/laravel-rad-stack
+        demo: https://laravel-rad-stack.okami101.io/
diff --git a/layouts/works/single.html b/layouts/works/single.html
index 648f30a..f2b20d8 100644
--- a/layouts/works/single.html
+++ b/layouts/works/single.html
@@ -18,36 +18,45 @@
         </div>
         {{ end }}
 
-        <div class="grid md:grid-cols-2 gap-4">
+        <div>
             {{ range .projects }}
-            {{ $borders := dict "green" "border-green-500" "orange" "border-orange-500" "black" "border-black dark:border-white"
-"red" "border-red-500" "teal" "border-teal-500" "primary" "border-purple-500" }}
-            <div class="flex flex-col gap-4 rounded border-2 p-4 {{ (index $borders (or .color "primary")) }}">
-                <div class="text-center">
-                    <a href="https://github.com/{{ .repo }}" target="_blank">
-                        <h3 class="pb-1 font-bold border-b-2 border-purple-500 inline-block">
-                            {{ .title }}
-                        </h3>
-                    </a>
-                </div>
-                {{ if .date }}
-                <div class="flex justify-end">
-                    {{ partial "badge.html" (print "Date : " .date) }}
+            {{ if .title }}
+            <h3 class="pb-1 font-bold border-b-2 border-purple-500 inline-block mb-4">
+                {{ .title }}
+            </h3>
+            {{ end }}
+            <div class="grid md:grid-cols-2 gap-4 mb-4">
+                {{ range .apps }}
+                {{ $borders := dict "green" "border-green-500" "orange" "border-orange-500" "black" "border-black dark:border-white"
+    "red" "border-red-500" "teal" "border-teal-500" "primary" "border-purple-500" }}
+                <div class="flex flex-col gap-4 rounded border-2 p-4 {{ (index $borders (or .color "primary")) }}">
+                    <div class="text-center">
+                        <a href="https://github.com/{{ .repo }}" target="_blank">
+                            <h4 class="pb-1 font-bold border-b-2 border-purple-500 inline-block">
+                                {{ .title }}
+                            </h4>
+                        </a>
+                    </div>
+                    {{ if .date }}
+                    <div class="flex justify-end">
+                        {{ partial "badge.html" (print "Date : " .date) }}
+                    </div>
+                    {{ end }}
+                    <div class="prose dark:prose-invert flex-grow">
+                        {{ readFile (print "_data/works/" .name ".md") | markdownify }}
+                    </div>
+                    <div class="flex justify-center gap-4">
+                        {{ partial "button.html" (dict "text" (partial "icon.html" "github") "href" (print
+                        "https://github.com/" .repo) "color" .color) }}
+                        {{ if .demo }}
+                        {{ partial "button.html" (dict "text" "Demo" "href" .demo "color" .color) }}
+                        {{ end }}
+                        {{ if .docs }}
+                        {{ partial "button.html" (dict "text" "Docs" "href" .docs "color" .color) }}
+                        {{ end }}
+                    </div>
                 </div>
                 {{ end }}
-                <div class="prose dark:prose-invert flex-grow">
-                    {{ readFile (print "_data/works/" .name ".md") | markdownify }}
-                </div>
-                <div class="flex justify-center gap-4">
-                    {{ partial "button.html" (dict "text" (partial "icon.html" "github") "href" (print
-                    "https://github.com/" .repo) "color" .color) }}
-                    {{ if .demo }}
-                    {{ partial "button.html" (dict "text" "Demo" "href" .demo "color" .color) }}
-                    {{ end }}
-                    {{ if .docs }}
-                    {{ partial "button.html" (dict "text" "Docs" "href" .docs "color" .color) }}
-                    {{ end }}
-                </div>
             </div>
             {{ end }}
         </div>