diff --git a/app/(datasets)/stories/hub.tsx b/app/(datasets)/stories/hub.tsx
new file mode 100644
index 0000000..dc44dfc
--- /dev/null
+++ b/app/(datasets)/stories/hub.tsx
@@ -0,0 +1,29 @@
+'use client';
+import React from 'react';
+import { StoriesHubContent, useFiltersWithQS } from '@lib';
+import Link from 'next/link';
+
+
+export default function Hub({
+  stories: allStories
+}: {
+  stories: any;
+}) {
+  const controlVars = useFiltersWithQS();
+
+  return (
+    <StoriesHubContent
+      allStories={allStories}
+      onFilterchanges={() => controlVars}
+      storiesString= {{
+        one: 'story',
+        other: 'stories'
+      }}
+      linkProperties={{
+        LinkElement: Link,
+        pathAttributeKeyName: 'href'
+      }}
+      storiesPagePath={'stories'}
+    />
+  );
+}
\ No newline at end of file
diff --git a/app/(datasets)/stories/page.tsx b/app/(datasets)/stories/page.tsx
index 65a28b1..363d0ea 100644
--- a/app/(datasets)/stories/page.tsx
+++ b/app/(datasets)/stories/page.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import { BlogPosts } from 'app/components/posts';
-import { getStories } from 'app/content/utils/mdx';
+import { getStoriesMetadata } from 'app/content/utils/mdx';
+import Hub from './hub';
 
 export default function Page() {
-  const posts = getStories();
+  const stories = getStoriesMetadata().map(d => ({...d.metadata, path: `stories/${d.slug}`}));
 
   return (
     <section>
       <h1 className='font-semibold text-2xl mb-8 tracking-tighter'>Stories</h1>
-      <BlogPosts postType='story' posts={posts} />
+      <Hub stories={stories} />
     </section>
   );
 }
diff --git a/app/content/stories/lahina-fire.mdx b/app/content/stories/lahina-fire.mdx
index 2fe0066..4c87d46 100644
--- a/app/content/stories/lahina-fire.mdx
+++ b/app/content/stories/lahina-fire.mdx
@@ -73,7 +73,7 @@ taxonomy:
       center={[-156.68108, 20.88130]}
       zoom={12}
       datasetId='lahaina-fire'
-      layerId='hls-swir-falsecolor-composite'
+      layerId='landsat-nighttime-thermal'
       dateTime='2023-08-08'
       compareDateTime='2023-08-13'
     />
diff --git a/app/content/utils/mdx.ts b/app/content/utils/mdx.ts
index b635b37..abed815 100644
--- a/app/content/utils/mdx.ts
+++ b/app/content/utils/mdx.ts
@@ -115,6 +115,10 @@ function getMDXMetaData(dir) {
   });
 }
 
+export function getStoriesMetadata() {
+  return getMDXMetaData(path.join(process.cwd(), 'app', 'content', 'stories'));
+}
+
 export function getDatasetsMetadata() {
   return getMDXMetaData(path.join(process.cwd(), 'app', 'content', 'datasets'));
 }
diff --git a/app/lib/index.ts b/app/lib/index.ts
index 945987a..e63659e 100644
--- a/app/lib/index.ts
+++ b/app/lib/index.ts
@@ -19,11 +19,11 @@ import {
   LogoContainer,
   NavItem,
   InternalNavLink,
-  NavItemType,
   ExplorationAndAnalysis,
   DatasetSelectorModal,
   timelineDatasetsAtom,
   useTimelineDatasetAtom,
+  StoriesHubContent,
   externalDatasetsAtom
 } from '@developmentseed/veda-ui';
 
@@ -47,6 +47,7 @@ export {
   LogoContainer,
   ExplorationAndAnalysis,
   DatasetSelectorModal,
+  StoriesHubContent,
 
   // MDX Components
   Block,
@@ -56,7 +57,6 @@ export {
   Image,
   MapBlock,
   CompareImage,
-  NavItemType,
 
   // Hooks
   useFiltersWithQS,
diff --git a/package.json b/package.json
index 19f7710..fd854e5 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "fix": "yarn run format && yarn run lint:fix"
   },
   "dependencies": {
-    "@developmentseed/veda-ui": "v5.10.0-a",
+    "@developmentseed/veda-ui": "v5.11.0",
     "@devseed-ui/theme-provider": "^4.1.0",
     "@tailwindcss/postcss": "4.0.0-alpha.13",
     "@types/node": "20.11.17",