diff --git a/web/README.md b/web/README.md
index 13d24a0ab..51b274fe9 100644
--- a/web/README.md
+++ b/web/README.md
@@ -10,7 +10,7 @@ npm run dev
 yarn dev
 ```
 
-Open [http://localhost:3000/admin](http://localhost:3000/admin) with your browser to see the result.
+In production this Admin instance would ideally live on the domain as your Owncast instance, for example: `myowncast-site.com/admin`. So open [http://localhost:3000/admin](http://localhost:3000/admin) with your browser to see the result.
 
 You can start editing a page by modifying `pages/something.js`. The page auto-updates as you edit the file.
 
@@ -18,6 +18,15 @@ Add new pages by adding files to the `pages` directory and [routes](https://next
 
 Since this project hits API endpoints you should make requests in [`componentDidMount`](https://reactjs.org/docs/react-component.html#componentdidmount), and not in [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching), since they're not static and we don't want to fetch them at build time, but instead at runtime.
 
+
+A list of API end points can be found here:
+https://github.com/owncast/owncast/blob/master/router/router.go
+
+### Auth-ing for APIs
+username: admin
+pw: [your stramkey]
+
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
@@ -26,3 +35,4 @@ To learn more about Next.js, take a look at the following resources:
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
diff --git a/web/pages/index2.tsx b/web/pages/index2.tsx
new file mode 100644
index 000000000..bb35f0dc3
--- /dev/null
+++ b/web/pages/index2.tsx
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import { BROADCASTER, fetchData } from './utils/apis';
+
+export default function Admin() {
+  const [broadcasterStatus, setBroadcasterStatus] = useState({});
+  let getStatusIntervalId = null;
+
+
+  const getBroadcastStatus = async () =>  {
+    try {
+      const result = await fetchData(BROADCASTER);
+      const active = !!result.broadcaster;
+
+      setBroadcasterStatus({ ...result, active });
+    } catch(error) {
+      setBroadcasterStatus({ ...broadcasterStatus, message: error.message });
+    };
+
+    
+  };
+
+  useEffect(() => { getBroadcastStatus(); }, []);
+
+
+  console.log("============",broadcasterStatus)
+  // getStatusIntervalId = setInterval(getBroadcastStatus, 15000);
+  return (
+    <div>
+      {JSON.stringify(broadcasterStatus)}
+    </div>
+  );
+}
diff --git a/web/pages/utils/apis.ts b/web/pages/utils/apis.ts
new file mode 100644
index 000000000..30ffd327d
--- /dev/null
+++ b/web/pages/utils/apis.ts
@@ -0,0 +1,62 @@
+
+
+const IS_DEV = true;
+const ADMIN_USERNAME = 'admin';
+const ADMIN_STREAMKEY = 'abc123';
+
+const API_LOCATION = 'http://localhost:8080/api/admin/';
+
+// Current inbound broadcaster info
+export const BROADCASTER = `${API_LOCATION}broadcaster`;
+
+// Disconnect inbound stream
+export const DISCONNECT = `${API_LOCATION}disconnect`;
+
+// Change the current streaming key in memory
+export const STREAMKEY_CHANGE = `${API_LOCATION}changekey`;
+
+// Current server config
+export const SERVER_CONFIG = `${API_LOCATION}serverconfig`;
+
+// Get viewer count over time
+export const VIEWERS_OVER_TIME = `${API_LOCATION}viewersOverTime`;
+
+// Get hardware stats
+export const HARDWARE_STATS = `${API_LOCATION}hardwarestats`;
+
+
+
+// Current Stream status (no auth)
+// use `admin/broadcaster` instead
+// export const STREAM_STATUS = '/api/status';
+
+export async function fetchData(url) {
+  const headers = new Headers();
+  const encoded = btoa(`${ADMIN_USERNAME}:${ADMIN_STREAMKEY}`);
+  // headers.set('Authorization', `Basic ${encoded}`);
+  console.log({encoded}, `${ADMIN_USERNAME}:${ADMIN_STREAMKEY}`)
+
+
+  const response = await fetch(url, {
+    headers: {
+      'Authorization': `Basic ${encoded}`,
+      'Credentials': 'include',
+    },
+    mode: 'no-cors',
+  });
+  // waits until the request completes...
+  // console.log(response);
+
+  if (!response.ok) {
+    const message = `An error has occured: ${response.status}`;
+    throw new Error(message);
+  }
+
+  const json = await response.json();
+  return json;
+}
+
+// fetch error cases
+// json.catch(error => {
+//   error.message; // 'An error has occurred: 404'
+// });