diff --git a/app/(app)/create/[[...paramsArr]]/_client.tsx b/app/(app)/create/[[...paramsArr]]/_client.tsx
index eefef459f..5b6471796 100644
--- a/app/(app)/create/[[...paramsArr]]/_client.tsx
+++ b/app/(app)/create/[[...paramsArr]]/_client.tsx
@@ -20,7 +20,7 @@ import { config } from "@/markdoc/config";
 import { useParams, useRouter } from "next/navigation";
 import { usePrompt } from "@/components/PromptService";
 import { Switch } from "@/components/Switch/Switch";
-
+import copy from "copy-to-clipboard";
 import { PostStatus, getPostStatus, isValidScheduleTime } from "@/utils/post";
 
 const Create = () => {
@@ -39,6 +39,7 @@ const Create = () => {
   const [isPostScheduled, setIsPostScheduled] = useState<boolean>(false);
   const [shouldRefetch, setShouldRefetch] = useState<boolean>(true);
   const [unsavedChanges, setUnsavedChanges] = useState<boolean>(false);
+  const [copied, setCopied] = useState<boolean>(false);
 
   const { unsavedChanges: _unsaved, setUnsavedChanges: _setUnsaved } =
     usePrompt();
@@ -112,6 +113,13 @@ const Create = () => {
     },
   );
 
+  const PREVIEW_URL = `${process.env.VERCEL_URL || "http://localhost:3000"}/draft/${postId}`;
+
+  const handleCopyToClipboard = () => {
+    copy(PREVIEW_URL);
+    setCopied(true);
+  };
+
   useEffect(() => {
     if (isError) {
       toast.error("Error saving");
@@ -134,6 +142,11 @@ const Create = () => {
     }
   }, [dataStatus, shouldRefetch]);
 
+  useEffect(() => {
+    const to = setTimeout(setCopied, 2000, false);
+    return () => clearTimeout(to);
+  }, [copied]);
+
   const getFormData = () => {
     const data = getValues();
     const formData = {
@@ -304,193 +317,218 @@ const Create = () => {
     <>
       <form onSubmit={handleSubmit(onSubmit)}>
         <Transition.Root show={open} as={Fragment}>
-          <div className="fixed bottom-0 left-0 top-0 z-50 h-screen w-full bg-white dark:bg-black">
-            <button
-              type="button"
-              className="absolute right-8 top-8 z-50 cursor-pointer underline"
-              onClick={() => setOpen(false)}
-            >
-              Close
-            </button>
-            <div className="relative mx-4 flex h-full flex-col items-center justify-center overflow-y-auto">
-              <div className="pb-8 pt-16">
-                <div className="block w-full max-w-2xl gap-6 sm:grid sm:grid-cols-12">
-                  <div className="mt-8 sm:col-span-6 sm:mt-0">
-                    <label htmlFor="excerpt">Excerpt</label>
-                    <textarea
-                      maxLength={156}
-                      id="excerpt"
-                      rows={3}
-                      {...register("excerpt")}
-                    />
-                    <small className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
-                      What readers will see before they click on your article.
-                      Good SEO descriptions utilize keywords, summarize the
-                      story and are between 140-156 characters long.
-                    </small>
-                  </div>
-                  <div className="my-4 sm:col-span-6 sm:my-0">
-                    <label htmlFor="tags">Topics</label>
-                    <input
-                      id="tags"
-                      name="tag"
-                      disabled={tags.length >= 5}
-                      placeholder={
-                        tags.length >= 5
-                          ? "Maximum 5 tags"
-                          : "Comma seperated tags"
-                      }
-                      type="text"
-                      onChange={(e) => onChange(e)}
-                      value={tagValue}
-                      onKeyDown={onKeyDown}
-                    />
-                    {errors.tags && (
-                      <p className="mt-1 text-sm text-red-600">
-                        {`${
-                          errors.tags.message ||
-                          "Something is wrong with the tags"
-                        }`}
-                      </p>
-                    )}
-                    <div>
-                      {tags.map((tag) => (
-                        <div
-                          key={tag}
-                          className="mr-1 mt-2 inline-flex items-center overflow-hidden bg-neutral-300 text-sm"
-                        >
-                          <span
-                            className="ml-2 mr-1 max-w-xs truncate px-1 text-xs font-semibold leading-relaxed text-black"
-                            x-text="tag"
-                          >
-                            {tag}
-                          </span>
-                          <button
-                            onClick={() => onDelete(tag)}
-                            className="inline-block h-6 w-6 bg-neutral-600 align-middle text-white focus:outline-none"
+          <div className="fixed bottom-0 left-0 top-0 z-50 h-screen w-full overflow-y-scroll bg-white dark:bg-black">
+            <div className="m-2 max-w-full">
+              <button
+                type="button"
+                className="absolute right-8 top-8 z-50 cursor-pointer underline"
+                onClick={() => setOpen(false)}
+              >
+                Close
+              </button>
+              <div className="relative flex h-full flex-col items-center justify-center overflow-y-auto">
+                <div className="pb-8 pt-16">
+                  <div className="block w-full max-w-2xl gap-6 sm:grid sm:grid-cols-12">
+                    <div className="mt-8 sm:col-span-6 sm:mt-0">
+                      <label htmlFor="excerpt">Excerpt</label>
+                      <textarea
+                        maxLength={156}
+                        id="excerpt"
+                        rows={3}
+                        {...register("excerpt")}
+                      />
+                      <small className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+                        What readers will see before they click on your article.
+                        Good SEO descriptions utilize keywords, summarize the
+                        story and are between 140-156 characters long.
+                      </small>
+                    </div>
+                    <div className="my-4 sm:col-span-6 sm:my-0">
+                      <label htmlFor="tags">Topics</label>
+                      <input
+                        id="tags"
+                        name="tag"
+                        disabled={tags.length >= 5}
+                        placeholder={
+                          tags.length >= 5
+                            ? "Maximum 5 tags"
+                            : "Comma seperated tags"
+                        }
+                        type="text"
+                        onChange={(e) => onChange(e)}
+                        value={tagValue}
+                        onKeyDown={onKeyDown}
+                      />
+                      {errors.tags && (
+                        <p className="mt-1 text-sm text-red-600">
+                          {`${
+                            errors.tags.message ||
+                            "Something is wrong with the tags"
+                          }`}
+                        </p>
+                      )}
+                      <div>
+                        {tags.map((tag) => (
+                          <div
+                            key={tag}
+                            className="mr-1 mt-2 inline-flex items-center overflow-hidden bg-neutral-300 text-sm"
                           >
-                            <svg
-                              className="mx-auto h-6 w-6 fill-current"
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24"
+                            <span
+                              className="ml-2 mr-1 max-w-xs truncate px-1 text-xs font-semibold leading-relaxed text-black"
+                              x-text="tag"
                             >
-                              <path
-                                fillRule="evenodd"
-                                d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                      ))}
+                              {tag}
+                            </span>
+                            <button
+                              onClick={() => onDelete(tag)}
+                              className="inline-block h-6 w-6 bg-neutral-600 align-middle text-white focus:outline-none"
+                            >
+                              <svg
+                                className="mx-auto h-6 w-6 fill-current"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  fillRule="evenodd"
+                                  d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                      <small className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+                        Tag with up to 5 topics. This makes it easier for
+                        readers to find and know what your story is about.
+                      </small>
                     </div>
-                    <small className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
-                      Tag with up to 5 topics. This makes it easier for readers
-                      to find and know what your story is about.
-                    </small>
-                  </div>
 
-                  {data &&
-                    (data.published === null ||
-                      new Date(data.published) > new Date()) && (
-                      <div className="col-span-12">
-                        <div className="mb-2 flex items-center gap-2">
-                          <label
-                            htmlFor="schedule-switch"
-                            className="text-sm font-medium text-neutral-800 dark:text-white"
-                          >
-                            Schedule post
-                          </label>
-                          <Switch
-                            id="schedule-switch"
-                            checked={isPostScheduled}
-                            onCheckedChange={setIsPostScheduled}
-                          />
-                        </div>
-                        {isPostScheduled && (
-                          <input
-                            type="datetime-local"
-                            {...register("published")}
-                            min={new Date().toISOString().slice(0, 16)}
-                          />
-                        )}
-                        <small className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
-                          Publish your post at a later time.
-                        </small>
-                      </div>
-                    )}
-
-                  <div className="col-span-12  border-b border-neutral-300 pb-4">
-                    <Disclosure>
-                      {({ open }) => (
-                        <>
-                          <Disclosure.Button className="flex w-full justify-between py-2 text-left text-sm font-medium text-neutral-800 focus:outline-none focus-visible:ring focus-visible:ring-pink-500 focus-visible:ring-opacity-75 dark:text-white">
-                            <span>View advanced settings</span>
-                            <ChevronUpIcon
-                              className={`${
-                                open ? "" : "rotate-180 transform"
-                              } h-5 w-5 text-neutral-400`}
+                    {data &&
+                      (data.published === null ||
+                        new Date(data.published) > new Date()) && (
+                        <div className="col-span-12">
+                          <div className="mb-2 flex items-center gap-2">
+                            <label
+                              htmlFor="schedule-switch"
+                              className="text-sm font-medium text-neutral-800 dark:text-white"
+                            >
+                              Schedule post
+                            </label>
+                            <Switch
+                              id="schedule-switch"
+                              checked={isPostScheduled}
+                              onCheckedChange={setIsPostScheduled}
                             />
-                          </Disclosure.Button>
-                          <Disclosure.Panel className="pb-2 pt-4">
-                            <label htmlFor="canonicalUrl">Canonical URL</label>
+                          </div>
+                          {isPostScheduled && (
                             <input
-                              id="canonicalUrl"
-                              type="text"
-                              placeholder="https://www.somesite.com/i-posted-here-first"
-                              defaultValue={
-                                data?.canonicalUrl ? data.canonicalUrl : ""
-                              }
-                              {...register("canonicalUrl")}
+                              type="datetime-local"
+                              {...register("published")}
+                              min={new Date().toISOString().slice(0, 16)}
                             />
-                            <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
-                              Add this if the post was originally published
-                              elsewhere and you want to link to it as the
-                              original source.
-                            </p>
-                          </Disclosure.Panel>
-                        </>
+                          )}
+                          <small className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+                            Publish your post at a later time.
+                          </small>
+                        </div>
+                      )}
+
+                    <div className="col-span-12  border-b border-neutral-300 pb-4">
+                      <Disclosure>
+                        {({ open }) => (
+                          <>
+                            <Disclosure.Button className="flex w-full justify-between py-2 text-left text-sm font-medium text-neutral-800 focus:outline-none focus-visible:ring focus-visible:ring-pink-500 focus-visible:ring-opacity-75 dark:text-white">
+                              <span>More Options</span>
+                              <ChevronUpIcon
+                                className={`${
+                                  open ? "" : "rotate-180 transform"
+                                } h-5 w-5 text-neutral-400`}
+                              />
+                            </Disclosure.Button>
+                            <Disclosure.Panel className="pb-2 pt-4">
+                              <label htmlFor="canonicalUrl">
+                                Canonical URL
+                              </label>
+                              <input
+                                id="canonicalUrl"
+                                type="text"
+                                placeholder="https://www.somesite.com/i-posted-here-first"
+                                defaultValue={
+                                  data?.canonicalUrl ? data.canonicalUrl : ""
+                                }
+                                {...register("canonicalUrl")}
+                              />
+                              <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+                                Add this if the post was originally published
+                                elsewhere and you want to link to it as the
+                                original source.
+                              </p>
+                              <h3 className="mb-1 mt-2 text-sm font-medium text-neutral-800 dark:text-white">
+                                Draft link
+                              </h3>
+                              <button
+                                onClick={handleCopyToClipboard}
+                                type="button"
+                                className="relative flex w-full focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 active:hover:bg-neutral-50 disabled:opacity-50"
+                              >
+                                <div className="input-base flex max-w-full flex-1 overflow-hidden border text-left">
+                                  {PREVIEW_URL}
+                                </div>
+                                <div className="absolute bottom-0 right-0 top-0 w-[120px] border border-neutral-300 bg-white px-4 py-2 font-medium text-neutral-600 shadow-sm">
+                                  {copied ? "Copied" : "Copy Link"}
+                                </div>
+                              </button>
+                              <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+                                Share this link with others to preview your
+                                draft. Anyone with the link can view your draft.
+                              </p>
+                            </Disclosure.Panel>
+                          </>
+                        )}
+                      </Disclosure>
+                    </div>
+                    <div className="mt-4 flex w-full justify-end sm:col-span-12 sm:mt-0">
+                      {postStatus === PostStatus.DRAFT && (
+                        <button
+                          type="button"
+                          disabled={isDisabled}
+                          className="inline-flex justify-center border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-600 shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 active:hover:bg-neutral-50 disabled:opacity-50"
+                          onClick={async () => {
+                            if (isDisabled) return;
+                            await savePost();
+                            router.push("/my-posts?tab=drafts");
+                          }}
+                        >
+                          Save draft
+                        </button>
                       )}
-                    </Disclosure>
-                  </div>
-                  <div className="mt-4 flex w-full justify-end sm:col-span-12 sm:mt-0">
-                    {postStatus === PostStatus.DRAFT && (
                       <button
-                        type="button"
-                        disabled={isDisabled}
-                        className="inline-flex justify-center border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-600 shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 active:hover:bg-neutral-50 disabled:opacity-50"
-                        onClick={async () => {
-                          if (isDisabled) return;
-                          await savePost();
-                          router.push("/my-posts?tab=drafts");
-                        }}
+                        type="submit"
+                        disabled={
+                          isDisabled ||
+                          (isPostScheduled && isValidScheduleTime(published))
+                        }
+                        className="ml-5 inline-flex justify-center bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 active:hover:from-orange-300 active:hover:to-pink-500 disabled:opacity-50"
                       >
-                        Save draft
+                        {hasLoadingState ? (
+                          <>
+                            <div className="mr-2 h-5 w-5 animate-spin rounded-full border-2 border-orange-600 border-t-white" />
+                            {"Saving"}
+                          </>
+                        ) : (
+                          <>
+                            {postStatus === PostStatus.DRAFT &&
+                              (isPostScheduled ? "Schedule" : "Publish now")}
+                            {postStatus === PostStatus.SCHEDULED &&
+                              (isPostScheduled
+                                ? "Save changes"
+                                : "Publish now")}
+                            {postStatus === PostStatus.PUBLISHED &&
+                              "Save changes"}
+                          </>
+                        )}
                       </button>
-                    )}
-                    <button
-                      type="submit"
-                      disabled={
-                        isDisabled ||
-                        (isPostScheduled && isValidScheduleTime(published))
-                      }
-                      className="ml-5 inline-flex justify-center bg-gradient-to-r from-orange-400 to-pink-600 px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-300 focus:ring-offset-2 active:hover:from-orange-300 active:hover:to-pink-500 disabled:opacity-50"
-                    >
-                      {hasLoadingState ? (
-                        <>
-                          <div className="mr-2 h-5 w-5 animate-spin rounded-full border-2 border-orange-600 border-t-white" />
-                          {"Saving"}
-                        </>
-                      ) : (
-                        <>
-                          {postStatus === PostStatus.DRAFT &&
-                            (isPostScheduled ? "Schedule" : "Publish now")}
-                          {postStatus === PostStatus.SCHEDULED &&
-                            (isPostScheduled ? "Save changes" : "Publish now")}
-                          {postStatus === PostStatus.PUBLISHED &&
-                            "Save changes"}
-                        </>
-                      )}
-                    </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -518,7 +556,7 @@ const Create = () => {
             {/* Left sidebar & main wrapper */}
             <div className="min-w-0 flex-1 xl:flex">
               <div className="xl:w-64 xl:flex-shrink-0 ">
-                <div className="h-full py-6 pl-4 pr-6 sm:pl-6 lg:px-4  xl:pl-0">
+                <div className="h-full py-6 pl-4 pr-6 sm:pl-6 lg:px-4 xl:pl-0">
                   {/* Start left column area */}
                   <div className="relative h-full">
                     <div className="bg-white p-6 text-neutral-600 shadow dark:bg-neutral-900">
diff --git a/app/(app)/draft/[id]/page.tsx b/app/(app)/draft/[id]/page.tsx
new file mode 100644
index 000000000..d132565f7
--- /dev/null
+++ b/app/(app)/draft/[id]/page.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import Markdoc from "@markdoc/markdoc";
+import Link from "next/link";
+import BioBar from "@/components/BioBar/BioBar";
+import { markdocComponents } from "@/markdoc/components";
+import { config } from "@/markdoc/config";
+import { headers } from "next/headers";
+import { notFound } from "next/navigation";
+
+import { type Metadata } from "next";
+import { getPostPreview } from "@/server/lib/posts";
+import { getCamelCaseFromLower } from "@/utils/utils";
+
+type Props = { params: { id: string } };
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { id } = params;
+
+  const post = await getPostPreview({ id });
+
+  if (!post) return {};
+  const host = headers().get("host") || "";
+  return {
+    title: `Draft: ${post.title} | by ${post.user.name} | Codú`,
+    authors: {
+      name: post.user.name,
+      url: `https://www.${host}/${post.user.username}`,
+    },
+    description: post.excerpt,
+    alternates: {
+      canonical: post.canonicalUrl,
+    },
+    robots: "noindex, nofollow",
+  };
+}
+
+const PreviewPage = async ({ params }: Props) => {
+  const { id } = params;
+
+  const post = await getPostPreview({ id });
+
+  if (!post) {
+    notFound();
+  }
+
+  const ast = Markdoc.parse(post.body);
+  const content = Markdoc.transform(ast, config);
+
+  return (
+    <>
+      <div className="mx-auto break-words px-2 pb-4 sm:px-4 md:max-w-3xl">
+        <article className="prose mx-auto max-w-3xl dark:prose-invert lg:prose-lg">
+          <h1>{post.title}</h1>
+          {Markdoc.renderers.react(content, React, {
+            components: markdocComponents,
+          })}
+        </article>
+        {post.tags.length > 0 && (
+          <section className="flex flex-wrap gap-3">
+            {post.tags.map(({ tag }) => (
+              <Link
+                // only reason this is toLowerCase is to make url look nicer. Not needed for functionality
+                href={`/articles?tag=${tag.title.toLowerCase()}`}
+                key={tag.title}
+                className="rounded-full bg-gradient-to-r from-orange-400 to-pink-600 px-3 py-1 text-xs font-bold text-white hover:bg-pink-700"
+              >
+                {getCamelCaseFromLower(tag.title)}
+              </Link>
+            ))}
+          </section>
+        )}
+      </div>
+      <div className="mx-auto max-w-3xl px-2 pb-4 sm:px-4">
+        <BioBar author={post.user} />
+      </div>
+    </>
+  );
+};
+
+export default PreviewPage;
diff --git a/app/robots.ts b/app/robots.ts
index 9a4f697d4..5911a1e86 100644
--- a/app/robots.ts
+++ b/app/robots.ts
@@ -9,6 +9,7 @@ export default function robots(): MetadataRoute.Robots {
       disallow: [
         "/alpha/",
         "/api/",
+        "/draft/",
         "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/settings/",
         "/metrics/",
         "/notifications/",
diff --git a/server/lib/posts.ts b/server/lib/posts.ts
index 7055bf789..3a1811a04 100644
--- a/server/lib/posts.ts
+++ b/server/lib/posts.ts
@@ -10,11 +10,16 @@ export const GetPostSchema = z.object({
   slug: z.string(),
 });
 
+export const GetPreviewSchema = z.object({
+  id: z.string(),
+});
+
 export const GetTrendingSchema = z.object({
   currentUserId: z.string().optional(),
 });
 
 type GetPost = z.infer<typeof GetPostSchema>;
+type GetPreview = z.infer<typeof GetPreviewSchema>;
 type GetTrending = z.infer<typeof GetTrendingSchema>;
 
 export async function getPost({ slug }: GetPost) {
@@ -36,7 +41,6 @@ export async function getPost({ slug }: GetPost) {
       },
       where: (posts, { eq }) => eq(posts.slug, slug),
       with: {
-        bookmarks: { columns: { userId: true } },
         tags: {
           columns: { id: true },
           with: { tag: { columns: { title: true } } },
@@ -53,12 +57,56 @@ export async function getPost({ slug }: GetPost) {
       },
     });
 
-    if (!response || response.published === null) {
+    if (!response) {
       return null;
     }
-    const currentUserBookmarkedPost = !!response.bookmarks.length;
-    response.bookmarks = [];
-    return { ...response, currentUserBookmarkedPost };
+    return response;
+  } catch (error) {
+    Sentry.captureException(error);
+    throw new Error("Error fetching post");
+  }
+}
+
+export async function getPostPreview({ id }: GetPreview) {
+  try {
+    GetPreviewSchema.parse({ id });
+
+    const response = await db.query.post.findFirst({
+      columns: {
+        id: true,
+        title: true,
+        body: true,
+        published: true,
+        updatedAt: true,
+        readTimeMins: true,
+        slug: true,
+        excerpt: true,
+        canonicalUrl: true,
+        showComments: true,
+      },
+      where: (posts, { eq }) => eq(posts.id, id),
+      with: {
+        tags: {
+          columns: { id: true },
+          with: { tag: { columns: { title: true } } },
+        },
+        user: {
+          columns: {
+            name: true,
+            image: true,
+            username: true,
+            bio: true,
+            id: true,
+          },
+        },
+      },
+    });
+
+    if (!response) {
+      return null;
+    }
+
+    return response;
   } catch (error) {
     Sentry.captureException(error);
     throw new Error("Error fetching post");
diff --git a/styles/globals.css b/styles/globals.css
index c5b99ca07..05c5bd7e8 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -47,6 +47,10 @@ body {
   }
 }
 
+.input-base {
+  @apply block w-full border px-2 py-2 text-black shadow-sm ring-offset-1 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-neutral-300 disabled:opacity-50 dark:border-white dark:bg-black dark:text-white sm:text-sm;
+}
+
 .nav-button {
   @apply focus-style rounded-md  px-2 py-2 text-neutral-900 hover:bg-neutral-200 hover:text-black focus:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-900 dark:hover:text-white dark:focus:text-white;
 }