diff --git a/tubearchivist/www/src/lib/constants.ts b/tubearchivist/www/src/lib/constants.ts
new file mode 100644
index 0000000..78c1d75
--- /dev/null
+++ b/tubearchivist/www/src/lib/constants.ts
@@ -0,0 +1 @@
+export const TA_BASE_URL = process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL;
diff --git a/tubearchivist/www/src/lib/getChannels.ts b/tubearchivist/www/src/lib/getChannels.ts
new file mode 100644
index 0000000..117ee63
--- /dev/null
+++ b/tubearchivist/www/src/lib/getChannels.ts
@@ -0,0 +1,15 @@
+import { Channel } from "../types/channel";
+
+export const getChannels = async (): Promise<Channel> => {
+  return await fetch(
+    `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/channel/`,
+    {
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `Token b4d4330462c7fc16c51873e45579b29a1a12fc90`,
+        mode: "no-cors",
+      },
+    }
+  ).then((res) => res.json());
+};
diff --git a/tubearchivist/www/src/lib/getVideos.ts b/tubearchivist/www/src/lib/getVideos.ts
new file mode 100644
index 0000000..16bf031
--- /dev/null
+++ b/tubearchivist/www/src/lib/getVideos.ts
@@ -0,0 +1,15 @@
+import { Videos } from "../types/video";
+
+export const getVideos = async (): Promise<Videos> => {
+  return await fetch(
+    `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/video/`,
+    {
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `Token b4d4330462c7fc16c51873e45579b29a1a12fc90`,
+        mode: "no-cors",
+      },
+    }
+  ).then((res) => res.json());
+};
diff --git a/tubearchivist/www/src/pages/channel.tsx b/tubearchivist/www/src/pages/channel.tsx
new file mode 100644
index 0000000..1df863c
--- /dev/null
+++ b/tubearchivist/www/src/pages/channel.tsx
@@ -0,0 +1,157 @@
+import { GetServerSideProps, NextPage } from "next";
+import { CustomHead } from "../components/CustomHead";
+import { Layout } from "../components/Layout";
+import { TA_BASE_URL } from "../lib/constants";
+import { getChannels } from "../lib/getChannels";
+import { Channel } from "../types/channel";
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  const channels = await getChannels();
+  return { props: { channels } };
+};
+
+const Channel: NextPage<{ channels: Channel }> = ({ channels }) => {
+  return (
+    <>
+      <CustomHead title="Channels" />
+
+      <Layout>
+        <div className="boxed-content">
+          <div className="title-split">
+            <div className="title-bar">
+              <h1>Channels</h1>
+            </div>
+            <div className="title-split-form">
+              <img
+                id="animate-icon"
+                onClick={() => console.log("showForm()")}
+                src="/img/icon-add.svg"
+                alt="add-icon"
+                title="Subscribe to Channels"
+              />
+              <div className="show-form">
+                <form id="hidden-form" action="/channel/" method="post">
+                  {/* {% csrf_token %}
+                    {{ subscribe_form }} */}
+                  <button type="submit">Subscribe</button>
+                </form>
+              </div>
+            </div>
+          </div>
+          <div className="view-controls">
+            <div className="toggle">
+              <span>Show subscribed only:</span>
+              <div className="toggleBox">
+                <input
+                  id="show_subed_only"
+                  onClick={() => console.log("toggleCheckbox(this)")}
+                  type="checkbox"
+                  checked
+                />
+                {/* {% if not show_subed_only %} */}
+                <label htmlFor="" className="ofbtn">
+                  Off
+                </label>
+                {/* {% else %} */}
+                <label htmlFor="" className="onbtn">
+                  On
+                </label>
+                {/* {% endif %} */}
+              </div>
+            </div>
+            <div className="view-icons">
+              <img
+                src="/img/icon-gridview.svg"
+                onClick={() => console.log("changeView(this)")}
+                data-origin="channel"
+                data-value="grid"
+                alt="grid view"
+              />
+              <img
+                src="/img/icon-listview.svg"
+                onClick={() => console.log("changeView(this)")}
+                data-origin="channel"
+                data-value="list"
+                alt="list view"
+              />
+            </div>
+          </div>
+          <h2>Total matching channels: {channels.data.length} </h2>
+          <div className="channel-list list">
+            {/* {% if results %}
+            {% for channel in results %} */}
+            {channels &&
+              channels.data.map((channel) => {
+                return (
+                  <div key={channel.channel_id} className="channel-item list">
+                    <div className="channel-banner list">
+                      <a href="{% url 'channel_id' channel.source.channel_id %}">
+                        <img
+                          src={`${TA_BASE_URL}${channel.channel_banner_url}`}
+                          alt="{{ channel.source.channel_id }}-banner"
+                        />
+                      </a>
+                    </div>
+                    <div className="info-box info-box-2 list">
+                      <div className="info-box-item">
+                        <div className="round-img">
+                          <a href="{% url 'channel_id' channel.source.channel_id %}">
+                            <img
+                              src={`${TA_BASE_URL}${channel.channel_thumb_url}`}
+                              alt="channel-thumb"
+                            />
+                          </a>
+                        </div>
+                        <div>
+                          <h3>
+                            <a href="{% url 'channel_id' channel.source.channel_id %}">
+                              {" "}
+                              {channel.channel_name}{" "}
+                            </a>
+                          </h3>
+                          {/* {% if channel.source.channel_subs >= 1000000 %} */}
+                          <p>Subscribers: {channel.channel_subs} </p>
+                          {/* {% else %} */}
+                        </div>
+                      </div>
+                      <div className="info-box-item">
+                        <div>
+                          <p>Last refreshed: {channel.channel_last_refresh} </p>
+                          {/* {% if channel.source.channel_subscribed %} */}
+                          <button
+                            className="unsubscribe"
+                            type="button"
+                            id="{{ channel.source.channel_id }}"
+                            onClick={() => console.log("unsubscribe(this.id)")}
+                            title="Unsubscribe from {{ channel.source.channel_name }}"
+                          >
+                            Unsubscribe
+                          </button>
+                          {/* {% else %} */}
+                          <button
+                            type="button"
+                            id="{{ channel.source.channel_id }}"
+                            onClick={() => console.log("subscribe(this.id)")}
+                            title="Subscribe to {{ channel.source.channel_name }}"
+                          >
+                            Subscribe
+                          </button>
+                          {/* {% endif %} */}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            {/* {% endfor %}
+        {% else %} */}
+            {/* <h2>No channels found...</h2> */}
+            {/* {% endif %} */}
+          </div>
+        </div>
+      </Layout>
+    </>
+  );
+};
+
+export default Channel;
diff --git a/tubearchivist/www/src/pages/index.tsx b/tubearchivist/www/src/pages/index.tsx
index fc1dc03..f101f65 100644
--- a/tubearchivist/www/src/pages/index.tsx
+++ b/tubearchivist/www/src/pages/index.tsx
@@ -1,9 +1,15 @@
 import type { GetServerSideProps, NextPage } from "next";
 import { signIn, signOut, useSession } from "next-auth/react";
-import { Videos } from "../types/video";
 import { CustomHead } from "../components/CustomHead";
 import { Layout } from "../components/Layout";
 import { VideoList } from "../components/VideoList";
+import { getVideos } from "../lib/getVideos";
+import { Videos } from "../types/video";
+
+type HomeProps = {
+  videos: Videos;
+  imagePlaceholders?: string[];
+};
 
 const SignInOutButton = ({ isSignedIn }: { isSignedIn: boolean }) => {
   if (isSignedIn) {
@@ -12,7 +18,7 @@ const SignInOutButton = ({ isSignedIn }: { isSignedIn: boolean }) => {
   return <button onClick={() => signIn()}>Sign in</button>;
 };
 
-const Home: NextPage<{ videos: Videos }> = ({ videos }) => {
+const Home: NextPage<HomeProps> = ({ videos }) => {
   const { data: session, status } = useSession();
   const authData = {
     session,
@@ -33,19 +39,10 @@ const Home: NextPage<{ videos: Videos }> = ({ videos }) => {
 
 export default Home;
 
+// http://localhost:8000/cache/videos/3/37Kn-kIsVu8.jpg
+
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const response = await fetch(
-    `${process.env.NEXT_PUBLIC_TUBEARCHIVIST_URL}/api/video/`,
-    {
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-        Authorization: `Token b4d4330462c7fc16c51873e45579b29a1a12fc90`,
-        mode: "no-cors",
-      },
-    }
-  );
-  const videos = await response.json();
+  const videos = await getVideos();
 
   return { props: { videos } };
 };
diff --git a/tubearchivist/www/src/types/channel.ts b/tubearchivist/www/src/types/channel.ts
new file mode 100644
index 0000000..8e68464
--- /dev/null
+++ b/tubearchivist/www/src/types/channel.ts
@@ -0,0 +1,93 @@
+export interface Channel {
+  data: Datum[];
+  config: Config;
+  paginate: boolean;
+}
+
+export interface Config {
+  archive: Archive;
+  default_view: DefaultView;
+  subscriptions: Subscriptions;
+  downloads: Downloads;
+  application: Application;
+  scheduler: Scheduler;
+}
+
+export interface Application {
+  app_root: string;
+  cache_dir: string;
+  videos: string;
+  file_template: string;
+  colors: string;
+  enable_cast: boolean;
+  REDIS_HOST: string;
+  es_url: string;
+  es_auth: string[];
+  HOST_UID: number;
+  HOST_GID: number;
+}
+
+export interface Archive {
+  sort_by: string;
+  sort_order: string;
+  page_size: number;
+}
+
+export interface DefaultView {
+  home: string;
+  channel: string;
+  downloads: string;
+  playlist: string;
+}
+
+export interface Downloads {
+  limit_count: boolean;
+  limit_speed: boolean;
+  sleep_interval: number;
+  autodelete_days: boolean;
+  format: boolean;
+  add_metadata: boolean;
+  add_thumbnail: boolean;
+  subtitle: boolean;
+  subtitle_source: boolean;
+  subtitle_index: boolean;
+  throttledratelimit: boolean;
+  integrate_ryd: boolean;
+  integrate_sponsorblock: boolean;
+}
+
+export interface Scheduler {
+  update_subscribed: boolean;
+  download_pending: boolean;
+  check_reindex: CheckReindex;
+  check_reindex_days: number;
+  thumbnail_check: CheckReindex;
+  run_backup: CheckReindex;
+  run_backup_rotate: number;
+}
+
+export interface CheckReindex {
+  minute: string;
+  hour: string;
+  day_of_week: string;
+}
+
+export interface Subscriptions {
+  auto_search: boolean;
+  auto_download: boolean;
+  channel_size: number;
+}
+
+export interface Datum {
+  channel_active: boolean;
+  channel_banner_url: string;
+  channel_description: string;
+  channel_id: string;
+  channel_last_refresh: string;
+  channel_name: string;
+  channel_subs: number;
+  channel_subscribed: boolean;
+  channel_thumb_url: string;
+  channel_tvart_url: boolean;
+  channel_views: number;
+}