diff --git a/__tests__/__snapshots__/blog-page.test.tsx.snap b/__tests__/__snapshots__/blog-page.test.tsx.snap
new file mode 100644
index 0000000..59ef779
--- /dev/null
+++ b/__tests__/__snapshots__/blog-page.test.tsx.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Blog Page renders blog page unchanged 1`] = `
+<div>
+  <div
+    class="ml-4 mr-4 flex flex-col items-center space-y-10"
+  >
+    <h1
+      class="text-4xl font-semibold text-neutral-800 dark:text-neutral-100"
+    >
+      Blog
+    </h1>
+    <div
+      class="grid grid-cols-2 gap-20 md:grid-cols-3 lg:grid-cols-4"
+    >
+      <div
+        class="space-y-4 text-center"
+      >
+        <a
+          href="blog/posts/blog-welcome"
+        >
+          <img
+            alt="post cover image"
+            class="aspect-video w-full rounded-md object-cover"
+            data-nimg="1"
+            decoding="async"
+            height="100"
+            loading="lazy"
+            src="/hero.svg"
+            style="color: transparent;"
+            width="300"
+          />
+          <h2
+            class="text-lg font-semibold text-neutral-800 dark:text-neutral-100"
+          >
+            Welcome to the Blog!
+          </h2>
+          <p
+            class="text-sm text-neutral-700 dark:text-neutral-200"
+          >
+            Welcome to our new blog page!
+          </p>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/__tests__/blog-page.test.tsx b/__tests__/blog-page.test.tsx
new file mode 100644
index 0000000..55cd38d
--- /dev/null
+++ b/__tests__/blog-page.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+
+import Page from '@/app/(main)/blog/page';
+
+describe('Blog Page', () => {
+  it('renders blog page unchanged', () => {
+    const { container } = render(<Page />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders a heading', () => {
+    render(<Page />);
+
+    const heading = screen.getByRole('heading', { level: 1 });
+
+    expect(heading).toBeInTheDocument();
+  });
+
+  it('renders blog posts', () => {
+    render(<Page />);
+
+    const posts = screen.getAllByRole('heading', { level: 2 });
+
+    expect(posts.length).toBeGreaterThan(0);
+  });
+});
diff --git a/app/(main)/blog/posts/[post]/page.tsx b/app/(main)/blog/posts/[post]/page.tsx
index f14cc20..0ce94a2 100644
--- a/app/(main)/blog/posts/[post]/page.tsx
+++ b/app/(main)/blog/posts/[post]/page.tsx
@@ -12,7 +12,7 @@ const PostPage = async (props: PostPageProps) => {
 
   if (!post) {
     return (
-      <h1 className='text-6xl font-semibold text-neutral-900'>
+      <h1 className='mx-auto text-center text-6xl font-semibold text-neutral-800 dark:text-neutral-100'>
         Post not found
       </h1>
     );
@@ -27,10 +27,10 @@ const PostPage = async (props: PostPageProps) => {
         height={600}
         alt='post cover image'
       />
-      <h1 className='mb-12 text-center text-6xl font-bold text-neutral-900'>
+      <h1 className='mb-12 text-center text-6xl font-bold text-neutral-800 dark:text-neutral-100'>
         {post.title}
       </h1>{' '}
-      <div className='container prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-p:text-xl dark:prose-headings:text-white'>
+      <div className='container prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-neutral-800 prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-p:text-xl prose-p:text-neutral-700 dark:prose-headings:text-neutral-100 dark:prose-p:text-neutral-200'>
         <MDXContent code={post.mdx} />
       </div>
     </div>
diff --git a/app/(platform)/(dashboard)/board/[boardId]/_components/board-liveblocks.tsx b/app/(platform)/(dashboard)/board/[boardId]/_components/board-liveblocks.tsx
index 9d4f282..aeee29c 100644
--- a/app/(platform)/(dashboard)/board/[boardId]/_components/board-liveblocks.tsx
+++ b/app/(platform)/(dashboard)/board/[boardId]/_components/board-liveblocks.tsx
@@ -50,14 +50,14 @@ BoardLiveblocks.Skeleton = function SkeletonBoardLiveblocks() {
     <div className='h-full overflow-x-auto p-4'>
       <ol className='flex h-full gap-x-3'>
         <li className='h-full w-[272px] shrink-0 select-none'>
-          <div className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md'>
+          <div className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md dark:bg-[#1f1f1f]'>
             <div className='flex items-start justify-between gap-x-2 px-2 pt-2 text-sm font-semibold'>
               <Skeleton className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium' />
             </div>
             <ol className='mx-1 mt-2 flex flex-col gap-y-2 px-1 py-0.5'>
-              <Skeleton className='h-12 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm' />
-              <Skeleton className='h-24 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm' />
-              <Skeleton className='h-16 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm' />
+              <Skeleton className='h-12 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm dark:bg-black' />
+              <Skeleton className='h-24 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm dark:bg-black' />
+              <Skeleton className='h-16 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm dark:bg-black' />
             </ol>
           </div>
         </li>
diff --git a/app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx b/app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx
index 8db1612..cc0a599 100644
--- a/app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx
+++ b/app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx
@@ -76,7 +76,7 @@ export const ListForm = () => {
             className='h-7 border-transparent px-2 py-1 text-sm font-medium transition hover:border-input focus:border-input'
             placeholder='Enter list title...'
           />
-          <input hidden value={params.boardId} name='boardId' />
+          <input hidden defaultValue={params.boardId} name='boardId' />
           <div className='flex items-center gap-x-1'>
             <FormSubmit>Add list</FormSubmit>
             <Button onClick={disableEditing} size='sm' variant='ghost'>
diff --git a/app/(platform)/(dashboard)/board/[boardId]/_components/list-header.tsx b/app/(platform)/(dashboard)/board/[boardId]/_components/list-header.tsx
index c174a1d..184ba3c 100644
--- a/app/(platform)/(dashboard)/board/[boardId]/_components/list-header.tsx
+++ b/app/(platform)/(dashboard)/board/[boardId]/_components/list-header.tsx
@@ -88,7 +88,7 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
             id='title'
             placeholder='Enter list title...'
             defaultValue={title}
-            className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium transition hover:border-input focus:border-input focus:bg-white'
+            className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium transition hover:border-input focus:border-input focus:bg-white dark:focus:bg-black'
           />
           <button hidden type='submit' />
         </form>
diff --git a/app/(platform)/(dashboard)/board/[boardId]/_components/list-options.tsx b/app/(platform)/(dashboard)/board/[boardId]/_components/list-options.tsx
index 2dbb940..c932c9a 100644
--- a/app/(platform)/(dashboard)/board/[boardId]/_components/list-options.tsx
+++ b/app/(platform)/(dashboard)/board/[boardId]/_components/list-options.tsx
@@ -68,12 +68,12 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
         </Button>
       </PopoverTrigger>
       <PopoverContent className='px-0 pb-3 pt-3' side='bottom' align='start'>
-        <div className='pb-4 text-center text-sm font-medium text-neutral-600'>
+        <div className='pb-4 text-center text-sm font-medium text-neutral-600 dark:text-neutral-200'>
           List Actions
         </div>
         <PopoverClose ref={closeRef} asChild>
           <Button
-            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
+            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600 dark:text-neutral-200'
             variant='ghost'
           >
             <X className='h-4 w-4' />
@@ -87,8 +87,13 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
           Add card...
         </Button>
         <form action={onCopy}>
-          <input hidden name='id' id='id' value={data.id} />
-          <input hidden name='boardId' id='boardId' value={data.boardId} />
+          <input hidden name='id' id='id' defaultValue={data.id} />
+          <input
+            hidden
+            name='boardId'
+            id='boardId'
+            defaultValue={data.boardId}
+          />
           <FormSubmit
             className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal'
             variant='ghost'
@@ -98,10 +103,15 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
         </form>
         <Separator />
         <form action={onDelete}>
-          <input hidden name='id' id='id' value={data.id} />
-          <input hidden name='boardId' id='boardId' value={data.boardId} />
+          <input hidden name='id' id='id' defaultValue={data.id} />
+          <input
+            hidden
+            name='boardId'
+            id='boardId'
+            defaultValue={data.boardId}
+          />
           <FormSubmit
-            className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive'
+            className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive dark:text-red-500 dark:hover:text-red-500'
             variant='ghost'
           >
             Delete this list
diff --git a/app/(platform)/layout.tsx b/app/(platform)/layout.tsx
index c655a66..2b4236e 100644
--- a/app/(platform)/layout.tsx
+++ b/app/(platform)/layout.tsx
@@ -9,17 +9,17 @@ import { ModalProvider } from '@/components/providers/modal-provider';
 import { QueryProvider } from '@/components/providers/query-provider';
 
 const PlatformLayout = ({ children }: { children: React.ReactNode }) => {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   return (
     <ClerkProvider
       afterSignOutUrl='/'
       appearance={{
-        baseTheme: theme === 'dark' ? dark : undefined,
+        baseTheme: resolvedTheme === 'dark' ? dark : undefined,
       }}
     >
       <QueryProvider>
-        <Toaster theme='system' />
+        <Toaster theme={resolvedTheme === 'dark' ? 'dark' : 'light'} />
         <ModalProvider />
         {children}
       </QueryProvider>
diff --git a/components/form/form-textarea.tsx b/components/form/form-textarea.tsx
index b7896f0..742d388 100644
--- a/components/form/form-textarea.tsx
+++ b/components/form/form-textarea.tsx
@@ -48,7 +48,7 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
           {label ? (
             <Label
               htmlFor={id}
-              className='text-xs font-semibold text-neutral-700'
+              className='text-xs font-semibold text-neutral-700 dark:text-neutral-200'
             >
               {label}
             </Label>
diff --git a/docs/mint.json b/docs/mint.json
index 2539199..a0185f1 100644
--- a/docs/mint.json
+++ b/docs/mint.json
@@ -2,8 +2,8 @@
   "$schema": "https://mintlify.com/schema.json",
   "name": "Tasko",
   "logo": {
-    "dark": "/public/logo-light.svg",
-    "light": "/public/logo-dark.svg",
+    "dark": "/public/logo-dark.svg",
+    "light": "/public/logo-light.svg",
     "href": "https://tasko.ahmadk953.org/"
   },
   "favicon": "/public/favicon.svg",