diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index 404996ce6..31299f316 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@@ -20,6 +20,7 @@ import { Recommendation } from '../../../lib/networking/queries/useGetLibraryIte
 import { Avatar } from '../../elements/Avatar'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
 import { AISummary } from './AISummary'
+import { userHasFeature } from '../../../lib/featureFlag'
 
 type ArticleContainerProps = {
   viewer: UserBasicData
@@ -445,14 +446,16 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
               recommendationsWithNotes={recommendationsWithNotes}
             />
           )}
-          <AISummary
-            libraryItemId={props.article.id}
-            idx="latest"
-            fontFamily={styles.fontFamily}
-            fontSize={styles.fontSize}
-            lineHeight={styles.lineHeight}
-            readerFontColor={styles.readerFontColor}
-          />
+          {userHasFeature(props.viewer, 'ai-summaries') && (
+            <AISummary
+              libraryItemId={props.article.id}
+              idx="latest"
+              fontFamily={styles.fontFamily}
+              fontSize={styles.fontSize}
+              lineHeight={styles.lineHeight}
+              readerFontColor={styles.readerFontColor}
+            />
+          )}
         </VStack>
         <Article
           articleId={props.article.id}
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index ad6fb102a..5743f4e95 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -22,6 +22,7 @@ import { HeaderToggleGridIcon } from '../../elements/icons/HeaderToggleGridIcon'
 import { HeaderToggleListIcon } from '../../elements/icons/HeaderToggleListIcon'
 import { HeaderToggleTLDRIcon } from '../../elements/icons/HeaderToggleTLDRIcon'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
+import { userHasFeature } from '../../../lib/featureFlag'
 
 export type MultiSelectMode = 'off' | 'none' | 'some' | 'visible' | 'search'
 
@@ -183,7 +184,7 @@ const HeaderControls = (props: LibraryHeaderProps): JSX.Element => {
       <SearchBox {...props} />
 
       <SpanBox css={{ display: 'flex', ml: 'auto', gap: '10px' }}>
-        {props.viewer?.features.includes('ai-summaries') && (
+        {userHasFeature(props.viewer, 'ai-summaries') && (
           <Button
             title="TLDR Summaries"
             style="plainIcon"
diff --git a/packages/web/lib/featureFlag.ts b/packages/web/lib/featureFlag.ts
index ab7258a5c..5eb198e11 100644
--- a/packages/web/lib/featureFlag.ts
+++ b/packages/web/lib/featureFlag.ts
@@ -1,7 +1,17 @@
-import { UserBasicData } from "./networking/queries/useGetViewerQuery"
+import { UserBasicData } from './networking/queries/useGetViewerQuery'
 
 const VIP_USERS = ['jacksonh', 'satindar', 'hongbo', 'nat']
 
 export const isVipUser = (user: UserBasicData): boolean => {
   return VIP_USERS.includes(user.profile.username)
 }
+
+export const userHasFeature = (
+  user: UserBasicData | undefined,
+  feature: string
+): boolean => {
+  if (!user) {
+    return false
+  }
+  return user.features.includes(feature)
+}