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 b7600db..e5b8db9 100644
--- a/src/element/live-chat.tsx
+++ b/src/element/live-chat.tsx
@@ -217,7 +217,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 0931917..c89fc0e 100644
--- a/src/element/send-zap.tsx
+++ b/src/element/send-zap.tsx
@@ -1,24 +1,30 @@
 import "./send-zap.css";
 import * as Dialog from "@radix-ui/react-dialog";
-import { useEffect, useState, ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { LNURL } from "@snort/shared";
 import { NostrEvent, EventPublisher } from "@snort/system";
 import { formatSats } from "../number";
 import { Icon } from "./icon";
 import AsyncButton from "./async-button";
-import { findTag } from "utils";
 import { Relays } from "index";
 import QrCode from "./qr-code";
 
 interface SendZapsProps {
   lnurl: string;
-  ev?: NostrEvent;
+  pubkey?: string;
+  aTag?: string;
   targetName?: string;
   onFinish: () => void;
   button?: ReactNode;
 }
 
-function SendZaps({ lnurl, ev, targetName, onFinish }: SendZapsProps) {
+function SendZaps({
+  lnurl,
+  pubkey,
+  aTag,
+  targetName,
+  onFinish,
+}: SendZapsProps) {
   const UsdRate = 30_000;
 
   const satsAmounts = [
@@ -51,15 +57,15 @@ function SendZaps({ lnurl, ev, targetName, onFinish }: SendZapsProps) {
 
     const amountInSats = isFiat ? Math.floor((amount / UsdRate) * 1e8) : amount;
     let zap: NostrEvent | undefined;
-    if (ev) {
+    if (pubkey && aTag) {
       zap = await pub.zap(
         amountInSats * 1000,
-        ev.pubkey,
+        pubkey,
         Relays,
         undefined,
         comment,
         (eb) => {
-          return eb.tag(["a", `${ev.kind}:${ev.pubkey}:${findTag(ev, "d")}`]);
+          return eb.tag(["a", aTag]);
         }
       );
     }
@@ -115,7 +121,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}
@@ -151,18 +157,13 @@ function SendZaps({ lnurl, ev, targetName, onFinish }: SendZapsProps) {
   );
 }
 
-export function SendZapsDialog({
-  lnurl,
-  ev,
-  targetName,
-  button,
-}: Omit<SendZapsProps, "onFinish">) {
+export function SendZapsDialog(props: Omit<SendZapsProps, "onFinish">) {
   const [isOpen, setIsOpen] = useState(false);
   return (
     <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
       <Dialog.Trigger asChild>
-        {button ? (
-          button
+        {props.button ? (
+          props.button
         ) : (
           <button className="btn btn-primary zap">
             <span className="hide-on-mobile">Zap</span>
@@ -173,12 +174,7 @@ export function SendZapsDialog({
       <Dialog.Portal>
         <Dialog.Overlay className="dialog-overlay" />
         <Dialog.Content className="dialog-content">
-          <SendZaps
-            lnurl={lnurl}
-            ev={ev}
-            targetName={targetName}
-            onFinish={() => setIsOpen(false)}
-          />
+          <SendZaps {...props} onFinish={() => setIsOpen(false)} />
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
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/tags.tsx b/src/element/tags.tsx
index 4cd5c05..166135c 100644
--- a/src/element/tags.tsx
+++ b/src/element/tags.tsx
@@ -10,7 +10,8 @@ export function Tags({ ev }: { ev: TaggedRawEvent }) {
     <div className="tags">
       {status === StreamState.Planned && (
         <span className="pill">
-          Starts {moment(Number(start) * 1000).fromNow()}
+          {status === StreamState.Planned ? "Starts " : ""}
+          {moment(Number(start) * 1000).fromNow()}
         </span>
       )}
       {ev.tags
diff --git a/src/element/video-tile.tsx b/src/element/video-tile.tsx
index c5bb349..a803af6 100644
--- a/src/element/video-tile.tsx
+++ b/src/element/video-tile.tsx
@@ -3,27 +3,42 @@ 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 });
-    const id = ev.tags.find(a => a[0] === "d")?.[1]!;
-    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";
+export function VideoTile({
+  ev,
+  showAuthor = true,
+}: {
+  ev: NostrEvent;
+  showAuthor?: boolean;
+}) {
+  const { inView, ref } = useInView({ triggerOnce: true });
+  const id = ev.tags.find((a) => a[0] === "d")?.[1]!;
+  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 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>
-        </div>
-        <h3>{title}</h3>
-        <div>
-            {inView && <Profile pubkey={ev.pubkey} />}
-        </div>
+  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 : ""})`,
+        }}
+      >
+        <StatePill state={status as StreamState} />
+      </div>
+      <h3>{title}</h3>
+      {showAuthor && <div>{inView && <Profile pubkey={host} />}</div>}
     </Link>
-}
\ No newline at end of file
+  );
+}
diff --git a/src/icons.svg b/src/icons.svg
index 4076155..49be568 100644
--- a/src/icons.svg
+++ b/src/icons.svg
@@ -21,6 +21,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>
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 ae3af0d..a7164e9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,6 +11,7 @@ import { ProfilePage } from "pages/profile-page";
 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",
@@ -47,12 +48,12 @@ const router = createBrowserRouter([
         element: <ProfilePage />,
       },
       {
-        path: "/:id",
+        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 81becb4..2bf8847 100644
--- a/src/pages/layout.css
+++ b/src/pages/layout.css
@@ -102,7 +102,7 @@ header .logo {
     cursor: pointer;
 }
 
-header .input {
+header .paper {
     min-width: 300px;
     height: 32px;
 }
@@ -134,11 +134,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 1f85581..92b981d 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/profile-page.css b/src/pages/profile-page.css
index 88f29d8..5ce2463 100644
--- a/src/pages/profile-page.css
+++ b/src/pages/profile-page.css
@@ -151,7 +151,7 @@
 
 .tabs-content {
   flex-grow: 1;
-  padding-top: 6px;
+  padding: 6px;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   outline: none;
diff --git a/src/pages/profile-page.tsx b/src/pages/profile-page.tsx
index 1a44a0f..51c4541 100644
--- a/src/pages/profile-page.tsx
+++ b/src/pages/profile-page.tsx
@@ -78,7 +78,7 @@ export function ProfilePage() {
         liveEvent.kind,
         liveEvent.pubkey
       );
-      navigate(`/${naddr}`);
+      navigate(`/live/${naddr}`);
     }
   }
 
@@ -111,7 +111,14 @@ export function ProfilePage() {
           <div className="profile-actions">
             {zapTarget && (
               <SendZapsDialog
-                ev={liveEvent}
+                aTag={
+                  liveEvent
+                    ? `${liveEvent.kind}:${liveEvent.pubkey}:${findTag(
+                        liveEvent,
+                        "d"
+                      )}`
+                    : undefined
+                }
                 lnurl={zapTarget}
                 button={
                   <button className="btn">
@@ -158,7 +165,7 @@ export function ProfilePage() {
               <div className="stream-list">
                 {pastStreams.map((ev) => (
                   <div key={ev.id} className="stream-item">
-                    <VideoTile ev={ev} />
+                    <VideoTile ev={ev} showAuthor={false} />
                     <Tags ev={ev} />
                   </div>
                 ))}
@@ -168,7 +175,7 @@ export function ProfilePage() {
               <div className="stream-list">
                 {futureStreams.map((ev) => (
                   <div key={ev.id} className="stream-item">
-                    <VideoTile ev={ev} />
+                    <VideoTile ev={ev} showAuthor={false} />
                     <Tags ev={ev} />
                   </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 e9eae89..0e5f70b 100644
--- a/src/pages/stream-page.tsx
+++ b/src/pages/stream-page.tsx
@@ -1,5 +1,4 @@
 import "./stream-page.css";
-import { useRef } from "react";
 import { parseNostrLink, EventPublisher } from "@snort/system";
 import { useNavigate, useParams } from "react-router-dom";
 
@@ -10,20 +9,25 @@ import { Profile, getName } from "element/profile";
 import { LiveChat } from "element/live-chat";
 import AsyncButton from "element/async-button";
 import { useLogin } from "hooks/login";
-import { System } from "index";
+import { StreamState, System } from "index";
 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 { Tags } from "element/tags";
+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 = thisEvent?.data ? findTag(thisEvent.data, "status") : "";
   const isMine = link.author === login?.pubkey;
 
   async function deleteStream() {
@@ -42,6 +46,7 @@ function ProfileInfo({ link }: { link: NostrLink }) {
         <div className="f-grow stream-info">
           <h1>{findTag(thisEvent.data, "title")}</h1>
           <p>{findTag(thisEvent.data, "summary")}</p>
+          <StatePill state={status as StreamState} />
           {thisEvent?.data && <Tags ev={thisEvent.data} />}
           {isMine && (
             <div className="actions">
@@ -59,11 +64,15 @@ 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}
-              ev={thisEvent.data}
+              pubkey={host}
+              aTag={`${thisEvent.data.kind}:${thisEvent.data.pubkey}:${findTag(
+                thisEvent.data,
+                "d"
+              )}`}
               targetName={getName(thisEvent.data.pubkey, profile)}
             />
           )}
@@ -86,13 +95,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