diff --git a/src/cloudflare.png b/src/cloudflare.png
new file mode 100644
index 0000000..4480ee8
Binary files /dev/null and b/src/cloudflare.png differ
diff --git a/src/element/live-chat.tsx b/src/element/live-chat.tsx
index 9c4dbeb..b463a97 100644
--- a/src/element/live-chat.tsx
+++ b/src/element/live-chat.tsx
@@ -232,7 +232,7 @@ function WriteMessage({ link }: { link: NostrLink }) {
 
   return (
     <>
-      <div className="input">
+      <div className="paper">
         <Textarea
           emojis={emojis}
           value={chat}
diff --git a/src/element/new-stream.css b/src/element/new-stream.css
index 0c1ef08..e3ad1a1 100644
--- a/src/element/new-stream.css
+++ b/src/element/new-stream.css
@@ -9,7 +9,7 @@
     margin: 0;
 }
 
-.new-stream div.input {
+.new-stream div.paper {
     background: #262626;
     height: 32px;
 }
diff --git a/src/element/new-stream.tsx b/src/element/new-stream.tsx
index f9c8363..27da545 100644
--- a/src/element/new-stream.tsx
+++ b/src/element/new-stream.tsx
@@ -84,7 +84,7 @@ export function NewStream({
       <h3>{ev ? "Edit Stream" : "New Stream"}</h3>
       <div>
         <p>Title</p>
-        <div className="input">
+        <div className="paper">
           <input
             type="text"
             placeholder="What are we steaming today?"
@@ -95,7 +95,7 @@ export function NewStream({
       </div>
       <div>
         <p>Summary</p>
-        <div className="input">
+        <div className="paper">
           <input
             type="text"
             placeholder="A short description of the content"
@@ -106,7 +106,7 @@ export function NewStream({
       </div>
       <div>
         <p>Cover image</p>
-        <div className="input">
+        <div className="paper">
           <input
             type="text"
             placeholder="https://"
@@ -117,7 +117,7 @@ export function NewStream({
       </div>
       <div>
         <p>Stream Url</p>
-        <div className="input">
+        <div className="paper">
           <input
             type="text"
             placeholder="https://"
diff --git a/src/element/send-zap.css b/src/element/send-zap.css
index 96ebb75..97bb855 100644
--- a/src/element/send-zap.css
+++ b/src/element/send-zap.css
@@ -37,7 +37,7 @@
     background: #353535;
 }
 
-.send-zap div.input {
+.send-zap div.paper {
     background: #262626;
 }
 
diff --git a/src/element/send-zap.tsx b/src/element/send-zap.tsx
index 84257f0..1652c82 100644
--- a/src/element/send-zap.tsx
+++ b/src/element/send-zap.tsx
@@ -114,7 +114,7 @@ function SendZaps({ lnurl, ev, targetName, onFinish }: SendZapsProps) {
         </div>
         <div>
           <small>Your comment for {name}</small>
-          <div className="input">
+          <div className="paper">
             <textarea
               placeholder="Nice!"
               value={comment}
diff --git a/src/element/state-pill.css b/src/element/state-pill.css
new file mode 100644
index 0000000..4015daa
--- /dev/null
+++ b/src/element/state-pill.css
@@ -0,0 +1,3 @@
+.pill.state {
+    text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/src/element/state-pill.tsx b/src/element/state-pill.tsx
new file mode 100644
index 0000000..bbd3af0
--- /dev/null
+++ b/src/element/state-pill.tsx
@@ -0,0 +1,6 @@
+import "./state-pill.css";
+import { StreamState } from "index";
+
+export function StatePill({ state }: { state: StreamState }) {
+    return <span className={`state pill${state === StreamState.Live ? " live" : ""}`}>{state}</span>
+}
\ No newline at end of file
diff --git a/src/element/video-tile.tsx b/src/element/video-tile.tsx
index c5bb349..2f40670 100644
--- a/src/element/video-tile.tsx
+++ b/src/element/video-tile.tsx
@@ -3,6 +3,8 @@ import { Profile } from "./profile";
 import "./video-tile.css";
 import { NostrEvent, encodeTLV, NostrPrefix } from "@snort/system";
 import { useInView } from "react-intersection-observer";
+import { StatePill } from "./state-pill";
+import { StreamState } from "index";
 
 export function VideoTile({ ev }: { ev: NostrEvent }) {
     const { inView, ref } = useInView({ triggerOnce: true });
@@ -10,20 +12,18 @@ export function VideoTile({ ev }: { ev: NostrEvent }) {
     const title = ev.tags.find(a => a[0] === "title")?.[1];
     const image = ev.tags.find(a => a[0] === "image")?.[1];
     const status = ev.tags.find(a => a[0] === "status")?.[1];
-    const isLive = status === "live";
+    const host = ev.tags.find(a => a[0] === "p" && a[3] === "host")?.[1] ?? ev.pubkey;
 
     const link = encodeTLV(NostrPrefix.Address, id, undefined, ev.kind, ev.pubkey);
     return <Link to={`/${link}`} className="video-tile" ref={ref}>
         <div style={{
             backgroundImage: `url(${inView ? image : ""})`
         }}>
-            <span className={`pill${isLive ? " live" : ""}`}>
-                {status}
-            </span>
+            <StatePill state={status as StreamState} />
         </div>
         <h3>{title}</h3>
         <div>
-            {inView && <Profile pubkey={ev.pubkey} />}
+            {inView && <Profile pubkey={host} />}
         </div>
     </Link>
 }
\ No newline at end of file
diff --git a/src/icons.svg b/src/icons.svg
index 7d5007e..7e290f8 100644
--- a/src/icons.svg
+++ b/src/icons.svg
@@ -18,6 +18,5 @@
     <symbol id="signal" viewBox="0 0 22 18" fill="none">
       <path d="M15.2426 4.75735C17.5858 7.1005 17.5858 10.8995 15.2426 13.2426M6.75736 13.2426C4.41421 10.8995 4.41421 7.10046 6.75736 4.75732M3.92893 16.0711C0.0236893 12.1658 0.0236893 5.83417 3.92893 1.92892M18.0711 1.92897C21.9763 5.83421 21.9763 12.1659 18.0711 16.0711M13 8.99999C13 10.1046 12.1046 11 11 11C9.89543 11 9 10.1046 9 8.99999C9 7.89542 9.89543 6.99999 11 6.99999C12.1046 6.99999 13 7.89542 13 8.99999Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </symbol>
-
   </defs>
 </svg>
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index d5e6082..ed64969 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,6 +25,10 @@ a {
   flex-grow: 1;
 }
 
+.f-col {
+  flex-direction: column;
+}
+
 .pill {
   background: #171717;
   padding: 4px 8px;
@@ -80,10 +84,11 @@ a {
 .btn>span {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 8px;
 }
 
-input[type="text"], textarea, input[type="datetime-local"] {
+input[type="text"], textarea, input[type="datetime-local"], input[type="password"] {
   font-family: inherit;
   border: unset;
   background-color: unset;
@@ -94,7 +99,7 @@ input[type="text"], textarea, input[type="datetime-local"] {
   outline: none;
 }
 
-div.input {
+div.paper {
   background: #171717;
   border-radius: 16px;
   padding: 8px 16px;
diff --git a/src/index.tsx b/src/index.tsx
index 1483aaa..0ee0182 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -10,6 +10,7 @@ import { LayoutPage } from "pages/layout";
 import { StreamPage } from "pages/stream-page";
 import { ChatPopout } from "pages/chat-popout";
 import { LoginStore } from "login";
+import { StreamProvidersPage } from "pages/providers";
 
 export enum StreamState {
   Live = "live",
@@ -41,14 +42,18 @@ const router = createBrowserRouter([
         path: "/",
         element: <RootPage />,
       },
+      {
+        path: "/:id",
+        element: <StreamPage />,
+      },
       {
         path: "/live/:id",
         element: <StreamPage />,
       },
       {
-        path: "/:id",
-        element: <StreamPage />,
-      },
+        path: "/providers/:id?",
+        element: <StreamProvidersPage />,
+      }
     ],
   },
   {
diff --git a/src/owncast.png b/src/owncast.png
new file mode 100644
index 0000000..f5c52e0
Binary files /dev/null and b/src/owncast.png differ
diff --git a/src/pages/layout.css b/src/pages/layout.css
index 321ad6a..6716a20 100644
--- a/src/pages/layout.css
+++ b/src/pages/layout.css
@@ -99,7 +99,7 @@ header .logo {
     cursor: pointer;
 }
 
-header .input {
+header .paper {
     min-width: 300px;
     height: 32px;
 }
@@ -131,11 +131,11 @@ header .profile img {
     gap: 8px;
   }
 
-  header .input {
+  header .paper {
     min-width: unset;
   }
 
-  header .input .search-input {
+  header .paper .search-input {
     display: none;
   }
 
diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx
index 3a2f8d9..c6545a8 100644
--- a/src/pages/layout.tsx
+++ b/src/pages/layout.tsx
@@ -81,7 +81,7 @@ export function LayoutPage() {
         <div className="logo" onClick={() => navigate("/")}>
           S
         </div>
-        <div className="input">
+        <div className="paper">
           <input className="search-input" type="text" placeholder="Search" />
           <Icon name="search" size={15} />
         </div>
diff --git a/src/pages/providers/index.css b/src/pages/providers/index.css
new file mode 100644
index 0000000..2214a22
--- /dev/null
+++ b/src/pages/providers/index.css
@@ -0,0 +1,35 @@
+.stream-providers-page {
+    padding: 40px;
+}
+
+.stream-providers-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+}
+
+.stream-providers-grid>div {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.stream-providers-grid>div img {
+    height: 64px;
+}
+
+.owncast-config {
+    display: flex;
+    gap: 16px;
+    padding: 40px;
+}
+
+.owncast-config>div {
+    flex: 1;
+}
+
+.owncast-config>div:nth-child(2) {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
\ No newline at end of file
diff --git a/src/pages/providers/index.tsx b/src/pages/providers/index.tsx
new file mode 100644
index 0000000..0bb1537
--- /dev/null
+++ b/src/pages/providers/index.tsx
@@ -0,0 +1,57 @@
+import "./index.css";
+import { StreamProviders } from "providers";
+
+import Owncast from "owncast.png";
+import Cloudflare from "cloudflare.png";
+import { useNavigate, useParams } from "react-router-dom";
+import { ConfigureOwncast } from "./owncast";
+
+export function StreamProvidersPage() {
+    const navigate = useNavigate();
+    const { id } = useParams();
+
+    function mapName(p: StreamProviders) {
+        switch (p) {
+            case StreamProviders.Owncast: return "Owncast"
+            case StreamProviders.Cloudflare: return "Cloudflare"
+        }
+        return "Unknown"
+    }
+
+    function mapLogo(p: StreamProviders) {
+        switch (p) {
+            case StreamProviders.Owncast: return <img src={Owncast} />
+            case StreamProviders.Cloudflare: return <img src={Cloudflare} />
+        }
+    }
+
+    function providerLink(p: StreamProviders) {
+        return <div className="paper">
+            <h3>{mapName(p)}</h3>
+            {mapLogo(p)}
+            <button className="btn btn-border" onClick={() => navigate(p)}>
+                + Configure
+            </button>
+        </div>
+    }
+
+    function index() {
+        return <div className="stream-providers-page">
+            <h1>Providers</h1>
+            <p>Stream providers streamline the process of streaming on Nostr, some event accept lightning payments!</p>
+            <div className="stream-providers-grid">
+                {[StreamProviders.Owncast, StreamProviders.Cloudflare].map(v => providerLink(v))}
+            </div>
+        </div >
+    }
+
+    if (!id) {
+        return index();
+    } else {
+        switch (id) {
+            case StreamProviders.Owncast: {
+                return <ConfigureOwncast />
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/providers/owncast.tsx b/src/pages/providers/owncast.tsx
new file mode 100644
index 0000000..b9a7054
--- /dev/null
+++ b/src/pages/providers/owncast.tsx
@@ -0,0 +1,86 @@
+import AsyncButton from "element/async-button";
+import { StatePill } from "element/state-pill";
+import { StreamState } from "index";
+import { StreamProviderInfo } from "providers";
+import { OwncastProvider } from "providers/owncast";
+import { useState } from "react";
+
+export function ConfigureOwncast() {
+    const [url, setUrl] = useState("");
+    const [token, setToken] = useState("");
+    const [info, setInfo] = useState<StreamProviderInfo>();
+
+    async function tryConnect() {
+        try {
+            const api = new OwncastProvider(url, token);
+            const i = await api.info();
+            setInfo(i);
+        }
+        catch (e) {
+            console.debug(e);
+        }
+    }
+
+    function status() {
+        if (!info) return;
+
+        return <>
+            <h3>Status</h3>
+            <div>
+                <StatePill state={info?.state ?? StreamState.Ended} />
+            </div>
+            <div>
+                <p>Name</p>
+                <div className="paper">
+                    {info?.name}
+                </div>
+            </div>
+            {info?.summary && <div>
+                <p>Summary</p>
+                <div className="paper">
+                    {info?.summary}
+                </div>
+            </div>}
+            {info?.viewers && <div>
+                <p>Viewers</p>
+                <div className="paper">
+                    {info?.viewers}
+                </div>
+            </div>}
+            {info?.version && <div>
+                <p>Version</p>
+                <div className="paper">
+                    {info?.version}
+                </div>
+            </div>}
+            <div>
+                <button className="btn btn-border">
+                    Save
+                </button>
+            </div>
+        </>
+    }
+
+    return <div className="owncast-config">
+        <div className="flex f-col g24">
+            <div>
+                <p>Owncast instance url</p>
+                <div className="paper">
+                    <input type="text" placeholder="https://" value={url} onChange={e => setUrl(e.target.value)} />
+                </div>
+            </div>
+            <div>
+                <p>API token</p>
+                <div className="paper">
+                    <input type="password" value={token} onChange={e => setToken(e.target.value)} />
+                </div>
+            </div>
+            <AsyncButton className="btn btn-primary" onClick={tryConnect}>
+                Connect
+            </AsyncButton>
+        </div>
+        <div>
+            {status()}
+        </div>
+    </div>
+}
\ No newline at end of file
diff --git a/src/pages/stream-page.tsx b/src/pages/stream-page.tsx
index 4db320d..c14f746 100644
--- a/src/pages/stream-page.tsx
+++ b/src/pages/stream-page.tsx
@@ -16,17 +16,18 @@ import { SendZapsDialog } from "element/send-zap";
 import type { NostrLink } from "@snort/system";
 import { useUserProfile } from "@snort/system-react";
 import { NewStreamDialog } from "element/new-stream";
+import { StatePill } from "element/state-pill";
 
 function ProfileInfo({ link }: { link: NostrLink }) {
   const thisEvent = useEventFeed(link, true);
   const login = useLogin();
   const navigate = useNavigate();
-  const profile = useUserProfile(System, thisEvent.data?.pubkey);
+  const host = thisEvent.data?.tags.find(a => a[0] === "p" && a[3] === "host")?.[1] ?? thisEvent.data?.pubkey;
+  const profile = useUserProfile(System, host);
   const zapTarget = profile?.lud16 ?? profile?.lud06;
 
   const status = findTag(thisEvent.data, "status");
   const start = findTag(thisEvent.data, "starts");
-  const isLive = status === "live";
   const isMine = link.author === login?.pubkey;
 
   async function deleteStream() {
@@ -46,7 +47,7 @@ function ProfileInfo({ link }: { link: NostrLink }) {
           <h1>{findTag(thisEvent.data, "title")}</h1>
           <p>{findTag(thisEvent.data, "summary")}</p>
           <div className="tags">
-            <span className={`pill${isLive ? " live" : ""}`}>{status}</span>
+            <StatePill state={status as StreamState} />
             {status === StreamState.Planned && (
               <span className="pill">
                 Starts {moment(Number(start) * 1000).fromNow()}
@@ -77,7 +78,7 @@ function ProfileInfo({ link }: { link: NostrLink }) {
           )}
         </div>
         <div className="profile-info flex g24">
-          <Profile pubkey={thisEvent.data?.pubkey ?? ""} />
+          <Profile pubkey={host ?? ""} />
           {zapTarget && thisEvent.data && (
             <SendZapsDialog
               lnurl={zapTarget}
@@ -104,13 +105,11 @@ function VideoPlayer({ link }: { link: NostrLink }) {
 }
 
 export function StreamPage() {
-  const ref = useRef(null);
   const params = useParams();
   const link = parseNostrLink(params.id!);
 
   return (
     <>
-      <div ref={ref}></div>
       <VideoPlayer link={link} />
       <ProfileInfo link={link} />
       <LiveChat link={link} />
diff --git a/src/providers/index.ts b/src/providers/index.ts
new file mode 100644
index 0000000..7c8c344
--- /dev/null
+++ b/src/providers/index.ts
@@ -0,0 +1,26 @@
+import { StreamState } from "index"
+
+export interface StreamProvider {
+    /**
+     * Get general info about connected provider to test everything is working
+     */
+    info(): Promise<StreamProviderInfo>
+
+    /**
+     * Create a config object to save in localStorage
+     */
+    createConfig(): any & { type: StreamProviders }
+}
+
+export enum StreamProviders {
+    Owncast = "owncast",
+    Cloudflare = "cloudflare"
+}
+
+export interface StreamProviderInfo {
+    name: string
+    summary?: string
+    version?: string
+    state: StreamState
+    viewers: number
+}
diff --git a/src/providers/owncast.ts b/src/providers/owncast.ts
new file mode 100644
index 0000000..3ebca09
--- /dev/null
+++ b/src/providers/owncast.ts
@@ -0,0 +1,66 @@
+import { StreamState } from "index";
+import { StreamProvider, StreamProviderInfo, StreamProviders } from "providers";
+
+export class OwncastProvider implements StreamProvider {
+    #url: string
+    #token: string
+
+    constructor(url: string, token: string) {
+        this.#url = url;
+        this.#token = token;
+    }
+
+    createConfig(): any & { type: StreamProviders; } {
+        return {
+            type: StreamProviders.Owncast,
+            url: this.#url,
+            token: this.#token
+        }
+    }
+
+    async info() {
+        const info = await this.#getJson<ConfigResponse>("GET", "/api/config");
+        const status = await this.#getJson<StatusResponse>("GET", "/api/status");
+        return {
+            name: info.name,
+            summary: info.summary,
+            version: info.version,
+            state: status.online ? StreamState.Live : StreamState.Ended,
+            viewers: status.viewerCount
+        } as StreamProviderInfo
+    }
+
+    async #getJson<T>(method: "GET" | "POST", path: string, body?: unknown): Promise<T> {
+        const rsp = await fetch(`${this.#url}${path}`, {
+            method: method,
+            body: body ? JSON.stringify(body) : undefined,
+            headers: {
+                "content-type": "application/json",
+                "authorization": `Bearer ${this.#token}`
+            },
+        });
+        const json = await rsp.text();
+        if (!rsp.ok) {
+            throw new Error(json);
+        }
+        return JSON.parse(json) as T;
+    }
+
+}
+
+interface ConfigResponse {
+    name?: string,
+    summary?: string,
+    logo?: string,
+    tags?: Array<string>,
+    version?: string
+}
+
+interface StatusResponse {
+    lastConnectTime?: string
+    lastDisconnectTime?: string
+    online: boolean
+    overallMaxViewerCount: number
+    sessionMaxViewerCount: number
+    viewerCount: number
+}
\ No newline at end of file