diff --git a/web/pages/storage.tsx b/web/pages/storage.tsx
index 8052d4477..88b083f0b 100644
--- a/web/pages/storage.tsx
+++ b/web/pages/storage.tsx
@@ -1,12 +1,21 @@
-import React, { useState, useEffect } from 'react';
-import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from './utils/apis';
-import KeyValueTable  from './components/key-value-table';
+import React, { useState, useEffect } from "react";
+import { SERVER_CONFIG, fetchData, FETCH_INTERVAL } from "./utils/apis";
+import KeyValueTable from "./components/key-value-table";
 
 function Storage({ config }) {
   if (!config) {
     return null;
   }
 
+  if (!config.s3.enabled) {
+    return (
+      <h3>
+        Local storage is being used. Enable external S3 storage if you want
+        to use it.
+      </h3>
+    );
+  }
+
   const data = [
     {
       name: "Enabled",
@@ -36,31 +45,30 @@ function Storage({ config }) {
   return <KeyValueTable title="External Storage" data={data} />;
 }
 
-export default function ServerConfig() {  
+export default function ServerConfig() {
   const [config, setConfig] = useState();
 
   const getInfo = async () => {
     try {
       const result = await fetchData(SERVER_CONFIG);
-      console.log("viewers result", result)
+      console.log("viewers result", result);
 
       setConfig({ ...result });
-
     } catch (error) {
       setConfig({ ...config, message: error.message });
     }
   };
-  
+
   useEffect(() => {
     let getStatusIntervalId = null;
 
     getInfo();
     getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL);
-  
-    // returned function will be called on component unmount 
+
+    // returned function will be called on component unmount
     return () => {
       clearInterval(getStatusIntervalId);
-    }
+    };
   }, []);
 
   return (
@@ -80,6 +88,5 @@ export default function ServerConfig() {
         <Storage config={config} />
       </div>
     </div>
-  ); 
+  );
 }
-