diff --git a/examples/nextjs-api-sales/components/layout.tsx b/examples/nextjs-api-sales/components/layout.tsx
index 63049af025..48052028d7 100644
--- a/examples/nextjs-api-sales/components/layout.tsx
+++ b/examples/nextjs-api-sales/components/layout.tsx
@@ -8,21 +8,20 @@ function layout(props: any) {
       <nav className="navbar" role="navigation" aria-label="main navigation">
         <div id="navbar" className="navbar-menu">
           <div className="logo">
-          <Image src="/bb-emblem.svg" width="50" height="50" />
+            <Image alt="logo" src="/bb-emblem.svg" width="50" height="50" />
           </div>
           <div className="navbar-start">
             <Link href="/">
               <a className="navbar-item">
-                Home
+                List
               </a>
             </Link>
             <Link href="/save">
               <a className="navbar-item">
-                Save
+                New sale
               </a>
             </Link>
           </div>
-
           <div className="navbar-end">
             <div className="navbar-item">
               <div className="buttons">
diff --git a/examples/nextjs-api-sales/pages/_app.tsx b/examples/nextjs-api-sales/pages/_app.tsx
index c6c68091e3..0669422fa4 100644
--- a/examples/nextjs-api-sales/pages/_app.tsx
+++ b/examples/nextjs-api-sales/pages/_app.tsx
@@ -1,10 +1,14 @@
 import "../styles/global.sass"
 import type { AppProps } from "next/app"
+import Head from "next/head"
 import Layout from "../components/layout"
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <Layout>
+      <Head>
+        <title>BB NextJS Sales Example</title>
+      </Head>
       <Component {...pageProps} />
     </Layout>
   )
diff --git a/examples/nextjs-api-sales/pages/index.tsx b/examples/nextjs-api-sales/pages/index.tsx
index 01e1feb67a..eae1909ff4 100644
--- a/examples/nextjs-api-sales/pages/index.tsx
+++ b/examples/nextjs-api-sales/pages/index.tsx
@@ -65,7 +65,7 @@ const Home: NextPage = () => {
                 <tr key={sale.sale_id}>
                   <th>{sale.sale_id}</th>
                   <th>{sale.sale_name}</th>
-                  <th>{sale.sales_people?.map((person: any) => person.primaryDisplay)[0]}</th>
+                  <th>{sale.sales_person?.map((person: any) => person.primaryDisplay)[0]}</th>
                 </tr>
               )}
             </tbody>
diff --git a/examples/nextjs-api-sales/styles/global.sass b/examples/nextjs-api-sales/styles/global.sass
index 85e46f8591..b26af79b39 100644
--- a/examples/nextjs-api-sales/styles/global.sass
+++ b/examples/nextjs-api-sales/styles/global.sass
@@ -9,6 +9,7 @@ $family-sans-serif: "Roboto", sans-serif
   justify-content: flex-start
   align-items: stretch
   height: 100vh
+  --bg-color: #f5f5f5
 
 .logo
   padding: 0.75rem
@@ -21,5 +22,5 @@ html
   overflow-y: auto
 
 .navbar
-  background-color: #D3D3D3
+  background-color: var(--bg-color)
   color: white
\ No newline at end of file
diff --git a/examples/nextjs-api-sales/styles/home.module.css b/examples/nextjs-api-sales/styles/home.module.css
index eb71c1072e..23e0fc8bf9 100644
--- a/examples/nextjs-api-sales/styles/home.module.css
+++ b/examples/nextjs-api-sales/styles/home.module.css
@@ -15,7 +15,7 @@
 
 .tableSection {
   padding: 2rem;
-  background: #D3D3D3;
+  background: var(--bg-color);
   width: 800px;
   border-radius: 10px;
 }
diff --git a/examples/nextjs-api-sales/styles/save.module.css b/examples/nextjs-api-sales/styles/save.module.css
index 177d317afd..9c39943008 100644
--- a/examples/nextjs-api-sales/styles/save.module.css
+++ b/examples/nextjs-api-sales/styles/save.module.css
@@ -9,7 +9,7 @@
 
 .formSection {
   padding: 2rem;
-  background: #D3D3D3;
+  background: var(--bg-color);
   width: 400px;
   border-radius: 10px;
 }
