diff --git a/react/src/components/NotEnoughInventory.jsx b/react/src/components/NotEnoughInventory.jsx
new file mode 100644
index 00000000..0e18dea9
--- /dev/null
+++ b/react/src/components/NotEnoughInventory.jsx
@@ -0,0 +1,16 @@
+import './complete.css';
+import { Link } from 'react-router-dom';
+
+function NotEnoughInventory() {
+  return (
+    <div className="not-enough-inventory">
+      <h2>Not Enough Inventory</h2>
+      <p>
+        The product you are interested is out of stock.Please accept our deepest
+        apologies. If you want to know when it will be available, please <Link to="/">contact us</Link>.
+      </p>
+    </div>
+  );
+}
+
+export default NotEnoughInventory;
diff --git a/react/src/index.js b/react/src/index.js
index 1cba3301..d6aee1dc 100644
--- a/react/src/index.js
+++ b/react/src/index.js
@@ -35,6 +35,7 @@ import CompleteError from './components/CompleteError';
 import Employee from './components/Employee';
 import Home from './components/Home';
 import NotFound from './components/NotFound';
+import NotEnoughInventory from './components/NotEnoughInventory';
 import Product from './components/Product';
 import Products from './components/Products';
 import ProductsJoin from './components/ProductsJoin';
@@ -360,6 +361,7 @@ class App extends Component {
                 path="/products-join"
                 element={<ProductsJoin backend={BACKEND_URL} />}
               ></Route>
+              <Route path="/not-enough-inventory" element={<NotEnoughInventory />} />NotEnoughInventory
               <Route path="*" element={<NotFound />} />
             </SentryRoutes>
           </div>
diff --git a/react/src/utils/errors.js b/react/src/utils/errors.js
index 73182599..52dc0f0e 100644
--- a/react/src/utils/errors.js
+++ b/react/src/utils/errors.js
@@ -17,6 +17,9 @@ const rangeError = () => {
 const unhandledError = () => {
   throw new UnhandledException('unhandled error');
 };
+const inventoryError = () => {
+  throw new InventoryException('unhandled error');
+};
 
 const randomErrors = [
   notAFunctionError,
@@ -24,6 +27,7 @@ const randomErrors = [
   syntaxError,
   rangeError,
   unhandledError,
+  inventoryError,
 ];
 
 const throwErrorNumber = (i) => {
@@ -61,4 +65,11 @@ class UnhandledException extends Error {
   }
 }
 
-export { crasher, UnhandledException };
+class InventoryException extends Error {
+  constructor(message, functionName) {
+    super(message);
+  }
+}
+
+
+export { crasher, UnhandledException, InventoryException };