diff --git a/package-lock.json b/package-lock.json
index 02a251edd..a86945926 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5681,6 +5681,12 @@
         "ylru": "^1.2.0"
       }
     },
+    "cached-iterable": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/cached-iterable/-/cached-iterable-0.2.1.tgz",
+      "integrity": "sha512-8zAVjMjdn/S/QXJaOnqsko0+ZJzXT2Dum2u9TMGg5YR9fxONPrUjuO9VYqnb1AoldXeYVAcNJLgT5Q8WaIJSgA==",
+      "dev": true
+    },
     "call-me-maybe": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
@@ -9943,9 +9949,9 @@
       "integrity": "sha1-A5/fI/iCPkQMOPMnfm/vEXQhWzA="
     },
     "fluent": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/fluent/-/fluent-0.6.4.tgz",
-      "integrity": "sha512-EXfMJmnGbUgaIC1myIzDk5akAF6+1JrI7KVnNCba2ou7WCKc/2CWa8QshfhImVtettOvEs0z0UVdMrS6zX7pxA==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/fluent/-/fluent-0.8.0.tgz",
+      "integrity": "sha512-bZfthhubEH1lKgGIi0fIDeNkZrfEOu3MrLbi284LdxNG+9Q5gq2KsuoocumqNPStVtWo3S3/1p8RIqd34u3Mzw==",
       "dev": true
     },
     "fluent-intl-polyfill": {
@@ -9964,15 +9970,22 @@
       "dev": true
     },
     "fluent-react": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/fluent-react/-/fluent-react-0.7.0.tgz",
-      "integrity": "sha512-XgAG06hcVW6oQu3NqLB4KACFBDC9broXG4XDP2xqmj+/DPmZlhHMMD73tFz1mBxCs1pLeojmsYdgyl8l6fF4SA==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/fluent-react/-/fluent-react-0.8.0.tgz",
+      "integrity": "sha512-mO8iPb+muWopEDcbNgb66kr6Tl9tPjRpguDaez9W0xU1hiJ9fQ6EfdCxCUQOYsnVnbruLJqxaRsExSRrCamLCg==",
       "dev": true,
       "requires": {
-        "fluent": "^0.4.0 || ^0.6.0",
+        "cached-iterable": "^0.2.1",
+        "fluent-sequence": "^0.2.0",
         "prop-types": "^15.6.0"
       }
     },
+    "fluent-sequence": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/fluent-sequence/-/fluent-sequence-0.2.0.tgz",
+      "integrity": "sha512-t8fc4rHvzO9Yk8otP8LkTqWo6mzjdemooQcnHlDrNzrYAnwsSbVFIlthnkzK2pLsRnO9Ybmw4lXOYUx+fAIyJw==",
+      "dev": true
+    },
     "flush-write-stream": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz",
diff --git a/package.json b/package.json
index 5c2f34d7d..32146395e 100644
--- a/package.json
+++ b/package.json
@@ -151,10 +151,10 @@
     "eventemitter2": "^5.0.1",
     "final-form": "^4.8.1",
     "flat": "^4.1.0",
-    "fluent": "^0.6.4",
+    "fluent": "^0.8.0",
     "fluent-intl-polyfill": "^0.1.0",
     "fluent-langneg": "^0.1.0",
-    "fluent-react": "^0.7.0",
+    "fluent-react": "^0.8.0",
     "graphql-playground-middleware-express": "^1.7.2",
     "graphql-schema-typescript": "^1.2.1",
     "gulp": "^4.0.0",
diff --git a/src/core/client/framework/lib/bootstrap/TalkContext.tsx b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
index 6c0d8f41d..a77a14576 100644
--- a/src/core/client/framework/lib/bootstrap/TalkContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
@@ -1,5 +1,5 @@
 import { LocalizationProvider } from "fluent-react/compat";
-import { MessageContext } from "fluent/compat";
+import { FluentBundle } from "fluent/compat";
 import { Child as PymChild } from "pym.js";
 import React, { StatelessComponent } from "react";
 import { MediaQueryMatchers } from "react-responsive";
@@ -15,8 +15,8 @@ export interface TalkContext {
   /** relayEnvironment for our relay framework. */
   relayEnvironment: Environment;
 
-  /** localMessages for our i18n framework. */
-  localeMessages: MessageContext[];
+  /** localeBundles for our i18n framework. */
+  localeBundles: FluentBundle[];
 
   /** formatter for timeago. */
   timeagoFormatter?: Formatter;
@@ -61,7 +61,7 @@ export const TalkContextProvider: StatelessComponent<{
   value: TalkContext;
 }> = ({ value, children }) => (
   <Provider value={value}>
-    <LocalizationProvider messages={value.localeMessages}>
+    <LocalizationProvider bundles={value.localeBundles}>
       <UIContext.Provider
         value={{
           timeagoFormatter: value.timeagoFormatter,
diff --git a/src/core/client/framework/lib/bootstrap/createContext.tsx b/src/core/client/framework/lib/bootstrap/createContext.tsx
index e9f6dec89..325c2e54e 100644
--- a/src/core/client/framework/lib/bootstrap/createContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/createContext.tsx
@@ -14,7 +14,7 @@ import {
 import { RestClient } from "talk-framework/lib/rest";
 import { ClickFarAwayRegister } from "talk-ui/components/ClickOutside";
 
-import { generateMessages, LocalesData, negotiateLanguages } from "../i18n";
+import { generateBundles, LocalesData, negotiateLanguages } from "../i18n";
 import { createFetch, TokenGetter } from "../network";
 import { PostMessageService } from "../postMessage";
 import { TalkContext } from "./TalkContext";
@@ -104,12 +104,12 @@ export default async function createContext({
     console.log(`Negotiated locales ${JSON.stringify(locales)}`);
   }
 
-  const localeMessages = await generateMessages(locales, localesData);
+  const localeBundles = await generateBundles(locales, localesData);
 
   // Assemble context.
   const context = {
     relayEnvironment,
-    localeMessages,
+    localeBundles,
     timeagoFormatter,
     pym,
     eventEmitter,
diff --git a/src/core/client/framework/lib/i18n.ts b/src/core/client/framework/lib/i18n.ts
index d5afcd0b6..de76266d4 100644
--- a/src/core/client/framework/lib/i18n.ts
+++ b/src/core/client/framework/lib/i18n.ts
@@ -1,6 +1,6 @@
 import "fluent-intl-polyfill/compat";
 import { negotiateLanguages as negotiate } from "fluent-langneg/compat";
-import { MessageContext } from "fluent/compat";
+import { FluentBundle } from "fluent/compat";
 
 export interface BundledLocales {
   [locale: string]: string;
@@ -47,18 +47,20 @@ export function negotiateLanguages(
 }
 
 // Don't warn in production.
-let decorateWarnMissing = (cx: MessageContext) => cx;
+let decorateWarnMissing = (bundle: FluentBundle) => bundle;
 
 // Warn about missing locales if we are not in production.
 if (process.env.NODE_ENV !== "production") {
   decorateWarnMissing = (() => {
     const warnings: string[] = [];
-    return (cx: MessageContext) => {
-      const original = cx.hasMessage;
-      cx.hasMessage = (id: string) => {
-        const result = original.apply(cx, [id]);
+    return (bundle: FluentBundle) => {
+      const original = bundle.hasMessage;
+      bundle.hasMessage = (id: string) => {
+        const result = original.apply(bundle, [id]);
         if (!result) {
-          const warn = `${cx.locales} translation for key "${id}" not found`;
+          const warn = `${
+            bundle.locales
+          } translation for key "${id}" not found`;
           if (!warnings.includes(warn)) {
             // tslint:disable:next-line: no-console
             console.warn(warn);
@@ -67,7 +69,7 @@ if (process.env.NODE_ENV !== "production") {
         }
         return result;
       };
-      return cx;
+      return bundle;
     };
   })();
 }
@@ -79,21 +81,21 @@ if (process.env.NODE_ENV !== "production") {
  *
  * Use it in conjunction with `negotiateLanguages`.
  */
-export async function generateMessages(
+export async function generateBundles(
   locales: ReadonlyArray<string>,
   data: LocalesData
-): Promise<MessageContext[]> {
+): Promise<FluentBundle[]> {
   const promises = [];
 
   for (const locale of locales) {
-    const cx = new MessageContext(locale);
+    const bundle = new FluentBundle(locale);
     if (locale in data.bundled) {
-      cx.addMessages(data.bundled[locale]);
-      promises.push(decorateWarnMissing(cx));
+      bundle.addMessages(data.bundled[locale]);
+      promises.push(decorateWarnMissing(bundle));
     } else if (locale in data.loadables) {
       const content = await data.loadables[locale]();
-      cx.addMessages(content);
-      promises.push(decorateWarnMissing(cx));
+      bundle.addMessages(content);
+      promises.push(decorateWarnMissing(bundle));
     } else {
       throw Error(`Locale ${locale} not available`);
     }
diff --git a/src/core/client/stream/components/UserBoxAuthenticated.tsx b/src/core/client/stream/components/UserBoxAuthenticated.tsx
index 410b143c0..94ed90ac6 100644
--- a/src/core/client/stream/components/UserBoxAuthenticated.tsx
+++ b/src/core/client/stream/components/UserBoxAuthenticated.tsx
@@ -24,7 +24,7 @@ const UserBoxAuthenticated: StatelessComponent<
         username={<Username />}
       >
         <Typography variant="bodyCopy" container="div">
-          {"Signed in as <username />."}
+          {"Signed in as <username></username>."}
         </Typography>
       </Localized>
       <Localized
diff --git a/src/locales/en-US/stream.ftl b/src/locales/en-US/stream.ftl
index 35a8cd34e..a6aed78a7 100644
--- a/src/locales/en-US/stream.ftl
+++ b/src/locales/en-US/stream.ftl
@@ -17,7 +17,7 @@ comments-userBoxUnauthenticated-signIn = Sign in
 comments-userBoxUnauthenticated-register = Register
 
 comments-userBoxAuthenticated-signedInAs =
-  Signed in as <username />.
+  Signed in as <username></username>.
 
 comments-userBoxAuthenticated-notYou =
   Not you? <button>Sign Out</button>
diff --git a/src/types/fluent.d.ts b/src/types/fluent.d.ts
index 4e41c3fae..b64509258 100644
--- a/src/types/fluent.d.ts
+++ b/src/types/fluent.d.ts
@@ -2,11 +2,11 @@
 declare module "*.ftl";
 
 declare module "fluent-react/compat" {
-  import { MessageContext } from "fluent/compat";
+  import { FluentBundle } from "fluent/compat";
   import { ComponentType } from "react";
 
   export interface LocalizationProviderProps {
-    messages: MessageContext[];
+    bundles: FluentBundle[];
   }
   export const LocalizationProvider: ComponentType<LocalizationProviderProps>;
 
@@ -30,14 +30,14 @@ declare module "fluent-langneg/compat" {
 }
 
 declare module "fluent/compat" {
-  export interface MessageContextOptions {
+  export interface FluentBundleOptions {
     functions: { [key: string]: (...args: any[]) => string };
     useIsolating: boolean;
     transform: ((s: string) => string);
   }
 
-  export class MessageContext {
-    constructor(locales: string, options?: MessageContext);
+  export class FluentBundle {
+    constructor(locales: string, options?: FluentBundleOptions);
     public locales: string[];
     public readonly messages: Iterator<[string, any]>;
     public hasMessage(id: string): boolean;