diff --git a/app/(app)/(profile)/[npub]/page.tsx b/app/(app)/(profile)/[npub]/page.tsx
index 29f3a28..807d82f 100644
--- a/app/(app)/(profile)/[npub]/page.tsx
+++ b/app/(app)/(profile)/[npub]/page.tsx
@@ -18,7 +18,13 @@ export default function ProfilePage({
   };
 }) {
   const [activeTab, setActiveTab] = useState("feed");
-  const pubkey = nip19.decode(npub).data.toString();
+  console.log("calling with ", npub);
+  const { type, data } = nip19.decode(npub);
+  console.log("RES", data);
+  if (type !== "npub") {
+    throw new Error("Invalid list");
+  }
+  const pubkey = data.toString();
   const { profile } = useProfile(pubkey);
 
   const demo = [
diff --git a/app/(app)/(profile)/layout.tsx b/app/(app)/(profile)/layout.tsx
new file mode 100644
index 0000000..9507d26
--- /dev/null
+++ b/app/(app)/(profile)/layout.tsx
@@ -0,0 +1,15 @@
+import { redirect } from "next/navigation";
+import { nip19 } from "nostr-tools";
+
+export default function Layout(props: {
+  children: React.ReactNode;
+  params: {
+    npub?: string;
+  };
+}) {
+  const key = props.params.npub;
+  if (key === "service-worker.js") {
+    redirect("/");
+  }
+  return props.children;
+}
diff --git a/app/(app)/_layout/Sidebar.tsx b/app/(app)/_layout/Sidebar.tsx
index 2633a2d..d09c499 100644
--- a/app/(app)/_layout/Sidebar.tsx
+++ b/app/(app)/_layout/Sidebar.tsx
@@ -19,10 +19,15 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import ZapPicker from "@/components/Modals/ZapPicker";
+import dynamic from "next/dynamic";
 import { useModal } from "@/app/_providers/modal/provider";
 import { IconType } from "react-icons";
-
+const ZapPickerModal = dynamic(() => import("@/components/Modals/ZapPicker"), {
+  ssr: false,
+});
+const NewEventModal = dynamic(() => import("@/components/Modals/NewEvent"), {
+  ssr: false,
+});
 type NavigationLink = {
   type: "link";
   href: string;
@@ -71,7 +76,7 @@ export default function Sidebar() {
       active: false,
     },
     {
-      onClick: () => modal?.show(<ZapPicker />),
+      onClick: () => modal?.show(<ZapPickerModal />),
       name: "zap",
       label: "Zap Flockstr",
       icon: HiOutlineLightningBolt,
@@ -192,14 +197,14 @@ export default function Sidebar() {
             })}
             <div className="center py-2 xl:justify-start">
               <Button
-                onClick={() => modal?.show(<ZapPicker />)}
+                onClick={() => modal?.show(<NewEventModal />)}
                 size={"icon"}
                 className="xl:hidden"
               >
                 <RiAddFill className="h-6 w-6" />
               </Button>
               <Button
-                onClick={() => modal?.show(<ZapPicker />)}
+                onClick={() => modal?.show(<NewEventModal />)}
                 size={"lg"}
                 className="hidden xl:flex"
               >
diff --git a/app/(app)/app/_sections/FeaturedLists.tsx b/app/(app)/app/_sections/FeaturedLists.tsx
index 8ff52f4..6852362 100644
--- a/app/(app)/app/_sections/FeaturedLists.tsx
+++ b/app/(app)/app/_sections/FeaturedLists.tsx
@@ -72,7 +72,9 @@ export default function FeaturedLists() {
       </SectionHeader>
       <SectionContent className="sm:md-feed-cols relative flex flex-col gap-3">
         {processedEvents.map((e) => (
-          <ListCard key={e.id} event={e} />
+          <Link href={`/list/${e.encode()}`}>
+            <ListCard key={e.id} event={e} />
+          </Link>
         ))}
       </SectionContent>
     </Section>
diff --git a/app/(app)/list/[naddr]/page.tsx b/app/(app)/list/[naddr]/page.tsx
new file mode 100644
index 0000000..57a4503
--- /dev/null
+++ b/app/(app)/list/[naddr]/page.tsx
@@ -0,0 +1,165 @@
+"use client";
+import { useState } from "react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import SubscriptionCard from "@/components/SubscriptionCard";
+import { HiCheckBadge } from "react-icons/hi2";
+import Tabs from "@/components/Tabs";
+import useProfile from "@/lib/hooks/useProfile";
+import { getTwoLetters, truncateText } from "@/lib/utils";
+import { nip19 } from "nostr-tools";
+import useEvents from "@/lib/hooks/useEvents";
+import Spinner from "@/components/spinner";
+import { getTagValues } from "@/lib/nostr/utils";
+
+const demo = [
+  {
+    id: "1",
+    title: "BTC Radio",
+    description:
+      "BTC Radio is the best fuking show ever. you should sub to it. now",
+    picture:
+      "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/51602.original.png?1693358530",
+    tags: ["music", "crypto", "art"],
+  },
+];
+
+export default function ListPage({
+  params: { naddr },
+}: {
+  params: {
+    naddr: string;
+  };
+}) {
+  const [activeTab, setActiveTab] = useState("feed");
+  const { type, data } = nip19.decode(naddr);
+  console.log("PASSED", naddr, data);
+  if (type !== "naddr") {
+    throw new Error("Invalid list");
+  }
+  const { identifier, kind, pubkey } = data;
+  const { profile } = useProfile(pubkey);
+  const { events } = useEvents({
+    filter: {
+      authors: [pubkey],
+      kinds: [kind],
+      ["#d"]: [identifier],
+      limit: 1,
+    },
+  });
+  const event = events[0];
+
+  if (!event) {
+    return (
+      <div className="center ">
+        <Spinner />
+      </div>
+    );
+  }
+  const title =
+    getTagValues("title", event.tags) ??
+    getTagValues("name", event.tags) ??
+    "Untitled";
+  const image =
+    getTagValues("image", event.tags) ??
+    getTagValues("picture", event.tags) ??
+    getTagValues("benner", event.tags);
+
+  const description = getTagValues("description", event.tags);
+  return (
+    <div className="relative mx-auto max-w-5xl space-y-6">
+      <div className="relative bg-muted @container">
+        <div className="absolute top-0 h-[8rem] w-full" />
+        <div className="mx-auto max-w-5xl p-0">
+          <div className="m-0 @5xl:px-5 @5xl:pt-8">
+            <div className="relative w-full overflow-hidden bg-gradient-to-b from-primary pb-[29%] @5xl:rounded-[20px]">
+              {!!profile?.banner && (
+                <Image
+                  className="absolute inset-0 h-full w-full object-cover align-middle"
+                  src={profile.banner}
+                  width={400}
+                  height={100}
+                  alt="banner"
+                  unoptimized
+                />
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="relative mx-auto mb-4 mt-[calc(-0.4375_*_4rem)] flex max-w-[800px] items-end justify-between gap-2 px-3 sm:mt-[calc(-0.4375_*_4.5rem)] sm:px-5 md:mt-[calc(-0.5625_*_5rem)] lg:mt-[calc(-0.5625_*_6rem)]">
+          <div className="z-1 ml-[calc(-1_*_3px)] overflow-hidden rounded-[0.5rem] bg-background p-[3px] sm:ml-[calc(-1_*_4px)] sm:p-[4px] lg:ml-[calc(-1_*_6px)] lg:rounded-[1rem] lg:p-[6px]">
+            {profile?.image ? (
+              <Image
+                src={profile.image}
+                className="aspect-square w-[4rem] overflow-hidden rounded-[calc(0.5rem_-_3px)] object-cover object-center sm:w-[4.5rem] sm:rounded-[calc(0.5rem_-_4px)] md:w-[5rem] lg:w-[6rem] lg:rounded-[calc(1rem_-_6px)]"
+                unoptimized
+                alt="profile picture"
+                width={16}
+                height={16}
+              />
+            ) : (
+              <div className="center aspect-square w-[4rem] overflow-hidden rounded-[calc(0.5rem_-_3px)] bg-muted object-cover object-center text-primary @xl:text-2xl sm:w-[4.5rem] sm:rounded-[calc(0.5rem_-_4px)] md:w-[5rem] lg:w-[6rem] lg:rounded-[calc(1rem_-_6px)]"></div>
+            )}
+          </div>
+          <Button size={"sm"} className="rounded-sm px-5 sm:hidden">
+            Follow
+          </Button>
+          <Button className="rounded-sm px-5 max-sm:hidden">Follow</Button>
+        </div>
+        <div className="mx-auto max-w-[800px] space-y-1 px-4">
+          <div className="flex items-center gap-x-1.5 lg:gap-x-2.5">
+            <h2 className="text-xl font-semibold sm:text-2xl lg:text-3xl">
+              {title}
+            </h2>
+            {!!profile?.nip05 && (
+              <HiCheckBadge className="h-5 w-5 text-primary lg:h-7 lg:w-7" />
+            )}
+          </div>
+          <div className="flex items-center text-xs text-muted-foreground/80 md:text-sm">
+            {!!profile?.name && <p>{profile.name}</p>}
+            {!!profile?.name && !!profile.nip05 && (
+              <>
+                <div className="inline-flex px-1">·</div>
+                <p>{profile.nip05}</p>
+              </>
+            )}
+          </div>
+          <div className="pt-1 md:pt-2">
+            {!!description && (
+              <p className="line-clamp-3 text-xs text-muted-foreground md:text-sm">
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="mx-auto max-w-[800px] space-y-6">
+        <div className="flex max-w-2xl flex-col gap-5">
+          {demo.map((e) => (
+            <SubscriptionCard key={e.id} {...e} />
+          ))}
+        </div>
+        <div className="">
+          <Tabs
+            tabs={[
+              {
+                name: "feed",
+                label: "Feed",
+              },
+              {
+                name: "media",
+                label: "Media",
+              },
+              {
+                name: "subscriptions",
+                label: "Subscriptions",
+              },
+            ]}
+            activeTab={activeTab}
+            setActiveTab={(t) => setActiveTab(t.name)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/_providers/modal/provider.tsx b/app/_providers/modal/provider.tsx
index 07407bd..d5132ed 100644
--- a/app/_providers/modal/provider.tsx
+++ b/app/_providers/modal/provider.tsx
@@ -21,6 +21,7 @@ type ModalProps = ReactElement | Modals;
 
 type ModalContextProps = {
   show: (content: ModalProps) => void;
+  swap: (content: ModalProps) => void;
   hide: () => void;
 };
 
@@ -40,6 +41,13 @@ export function ModalProvider({ children }: { children: ReactNode }) {
     setShowModal(true);
   };
 
+  const swap = (content: ModalProps) => {
+    hide();
+    setTimeout(() => {
+      show(content);
+    }, 300);
+  };
+
   const hide = () => {
     setShowModal(false);
     setTimeout(() => {
@@ -48,7 +56,7 @@ export function ModalProvider({ children }: { children: ReactNode }) {
   };
 
   return (
-    <ModalContext.Provider value={{ show, hide }}>
+    <ModalContext.Provider value={{ show, hide, swap }}>
       {children}
       {showModal && (
         <Modal showModal={showModal} setShowModal={setShowModal}>
diff --git a/components/Modals/NewEvent.tsx b/components/Modals/NewEvent.tsx
new file mode 100644
index 0000000..ec59a45
--- /dev/null
+++ b/components/Modals/NewEvent.tsx
@@ -0,0 +1,47 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+import Link from "next/link";
+import Template from "./Template";
+import { Button } from "@/components/ui/button";
+import { useModal } from "@/app/_providers/modal/provider";
+import { nip19 } from "nostr-tools";
+// import { useKeys } from "@/app/_providers/keysProvider";
+import { useNDK } from "@/app/_providers/ndk";
+import useCurrentUser from "@/lib/hooks/useCurrentUser";
+import {
+  HiChatBubbleLeftEllipsis,
+  HiBookmarkSquare,
+  HiNewspaper,
+} from "react-icons/hi2";
+import { RiSubtractFill, RiAddFill } from "react-icons/ri";
+import { formatCount } from "@/lib/utils";
+import LoginModal from "./Login";
+
+export default function NewEventModal() {
+  const modal = useModal();
+  return (
+    <Template title="New Event" className="md:max-w-[400px]">
+      <div className="flex flex-col gap-y-5">
+        <Button
+          onClick={() => {
+            modal?.swap(<LoginModal />);
+          }}
+          className="w-full gap-x-1"
+        >
+          <span>Short Text</span>
+          <HiChatBubbleLeftEllipsis className="h-4 w-4" />
+        </Button>
+        <Link href={`/article/new`}>
+          <Button className="w-full gap-x-1">
+            <span>Long Form</span>
+            <HiNewspaper className="h-4 w-4" />
+          </Button>
+        </Link>
+        <Button className="w-full gap-x-1">
+          <span>Content List</span>
+          <HiBookmarkSquare className="h-4 w-4" />
+        </Button>
+      </div>
+    </Template>
+  );
+}