diff --git a/packages/shared/src/models/MetadataBase.ts b/packages/shared/src/models/MetadataBase.ts
index 2a65ce7b7..847c97c8a 100644
--- a/packages/shared/src/models/MetadataBase.ts
+++ b/packages/shared/src/models/MetadataBase.ts
@@ -14,7 +14,7 @@ export const MetadataBase = t.type(
      *
      * TODO: it may be replaced by the supporter id
      */
-    blang: t.union([t.string, t.null]),
+    blang: t.union([t.string, t.null, t.undefined]),
     supporter: t.string,
     researchTag: t.union([t.string, t.undefined]),
     experimentId: t.union([t.string, t.undefined]),
diff --git a/platforms/storybook/.storybook/main.js b/platforms/storybook/.storybook/main.js
index e2350718e..c9c6c3685 100644
--- a/platforms/storybook/.storybook/main.js
+++ b/platforms/storybook/.storybook/main.js
@@ -64,6 +64,36 @@ module.exports = {
     // console.log("config", config.resolve.plugins);
     // console.log("config", config);
 
+    config.module.rules.push({
+      test: /\.tsx?$/,
+      exclude: /node_modules/,
+      use: [
+        {
+          loader: require.resolve('babel-loader'),
+          options: {
+            presets: [
+              require('@babel/preset-typescript').default,
+              [
+                require('@babel/preset-react').default,
+                { runtime: 'automatic' },
+              ],
+              require('@babel/preset-env').default,
+            ],
+          },
+        },
+      ],
+    });
+
+    config.resolve.extensions.push('.ts', '.tsx');
+
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+    });
+
+    config.resolve.extensions.push('.mjs');
+
     return config;
   },
   env: (config) => ({
diff --git a/platforms/storybook/src/stories/Taboule.stories.tsx b/platforms/storybook/src/stories/Taboule.stories.tsx
index bece84f04..6da9abfb2 100644
--- a/platforms/storybook/src/stories/Taboule.stories.tsx
+++ b/platforms/storybook/src/stories/Taboule.stories.tsx
@@ -9,11 +9,39 @@ const Meta: ComponentMeta<typeof Taboule> = {
 
 export default Meta;
 
+const tkBaseURL = 'http://localhost:14000/api';
+const ytBaseURL = 'http://localhost:9000/api';
+
 const Template: ComponentStory<typeof Taboule> = (args) => {
   return <Taboule {...args} />;
 };
 
-export const Basic = Template.bind({});
-Basic.args = {
+export const YTPersonalSearches = Template.bind({});
+YTPersonalSearches.args = {
+  baseURL: ytBaseURL,
   query: 'youtubePersonalSearches',
 };
+
+export const YTPersonalHomes = Template.bind({});
+YTPersonalHomes.args = {
+  baseURL: ytBaseURL,
+  query: 'youtubePersonalHomes',
+};
+
+export const YTPersonalVideos = Template.bind({});
+YTPersonalVideos.args = {
+  baseURL: ytBaseURL,
+  query: 'youtubePersonalVideos',
+};
+
+export const TKPersonalNatives = Template.bind({});
+TKPersonalNatives.args = {
+  baseURL: tkBaseURL,
+  query: 'tikTokPersonalNative',
+};
+
+export const TKPersonalSearch = Template.bind({});
+TKPersonalSearch.args = {
+  baseURL: tkBaseURL,
+  query: 'tikTokPersonalSearch',
+};