diff --git a/package.json b/package.json
index 1632bcca..d5003b05 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@dicebear/initials": "^6.0.4",
     "lemmy-js-client": "^0.18.0-rc.2",
     "markdown-it": "^13.0.1",
-    "mono-svelte": "^0.3.2"
+    "mono-svelte": "^0.3.3"
   },
   "type": "module"
 }
diff --git a/src/lib/components/lemmy/post/Post.svelte b/src/lib/components/lemmy/post/Post.svelte
index 5641b251..0e78a320 100644
--- a/src/lib/components/lemmy/post/Post.svelte
+++ b/src/lib/components/lemmy/post/Post.svelte
@@ -30,142 +30,144 @@
 >
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <div id={post.post.id.toString()} class="relative flex flex-col gap-2.5">
-    <div
-      class="flex {$userSettings.leftAlign
-        ? 'flex-row-reverse'
-        : 'flex-row'} gap-4 max-w-full w-full"
-    >
+  <div
+    class="absolute -inset-x-2 md:-inset-x-4 inset-y-2 scale-95 opacity-0 bg-slate-100 dark:bg-zinc-900
+    -z-10 rounded-xl group-hover:opacity-100 group-hover:scale-100 transition-all"
+  />
+  <div
+    class="flex {$userSettings.leftAlign
+      ? 'flex-row-reverse'
+      : 'flex-row'} gap-4 max-w-full w-full"
+  >
+    <div class="flex flex-col w-full gap-2">
       <div class="flex flex-col w-full gap-2">
-        <div class="flex flex-col w-full gap-2">
-          <PostMeta
-            community={hideCommunity ? undefined : post.community}
-            user={post.creator}
-            published={new Date(post.post.published + 'Z')}
-            upvotes={post.counts.upvotes}
-            downvotes={post.counts.downvotes}
-            deleted={post.post.deleted}
-            removed={post.post.removed}
-            locked={post.post.locked}
-            featured={post.post.featured_local || post.post.featured_community}
-            nsfw={post.post.nsfw}
-            saved={post.saved}
-          />
-          <a
-            href="/post/{getInstance()}/{post.post.id}"
-            class="font-medium max-w-full w-full break-words text-base"
-            style="word-break: break-word;"
-            class:text-slate-500={post.read && $userSettings.markReadPosts}
-            class:dark:text-zinc-400={post.read && $userSettings.markReadPosts}
+        <PostMeta
+          community={hideCommunity ? undefined : post.community}
+          user={post.creator}
+          published={new Date(post.post.published + 'Z')}
+          upvotes={post.counts.upvotes}
+          downvotes={post.counts.downvotes}
+          deleted={post.post.deleted}
+          removed={post.post.removed}
+          locked={post.post.locked}
+          featured={post.post.featured_local || post.post.featured_community}
+          nsfw={post.post.nsfw}
+          saved={post.saved}
+        />
+        <a
+          href="/post/{getInstance()}/{post.post.id}"
+          class="font-medium max-w-full w-full break-words text-base"
+          style="word-break: break-word;"
+          class:text-slate-500={post.read && $userSettings.markReadPosts}
+          class:dark:text-zinc-400={post.read && $userSettings.markReadPosts}
+        >
+          <Markdown source={post.post.name} inline />
+        </a>
+      </div>
+      {#if $userSettings.view == 'card'}
+        {#if isImage(post.post.url)}
+          <!--disabled preloads here since most people will hover over every image while scrolling-->
+          <svelte:component
+            this={$userSettings.expandImages ? ExpandableImage : Empty}
+            url={bestImageURL(post.post, false, 2048)}
+            class="self-start max-w-full"
           >
-            <Markdown source={post.post.name} inline />
-          </a>
-        </div>
-        {#if $userSettings.view == 'card'}
-          {#if isImage(post.post.url)}
-            <!--disabled preloads here since most people will hover over every image while scrolling-->
-            <svelte:component
-              this={$userSettings.expandImages ? ExpandableImage : Empty}
-              url={bestImageURL(post.post, false, 2048)}
-              class="self-start max-w-full"
+            <svelte:element
+              this={$userSettings.expandImages ? 'div' : 'a'}
+              href={postLink(post.post)}
+              class="self-start overflow-hidden z-10 relative bg-slate-200 dark:bg-zinc-800 rounded-md max-w-full"
+              data-sveltekit-preload-data="off"
+              aria-label={post.post.name}
             >
-              <svelte:element
-                this={$userSettings.expandImages ? 'div' : 'a'}
-                href={postLink(post.post)}
-                class="self-start overflow-hidden z-10 relative bg-slate-200 dark:bg-zinc-800 rounded-md max-w-full"
-                data-sveltekit-preload-data="off"
-                aria-label={post.post.name}
+              <picture
+                class="rounded-md overflow-hidden max-h-[min(50vh,500px)] w-full max-w-full"
               >
-                <picture
-                  class="rounded-md overflow-hidden max-h-[min(50vh,500px)] w-full max-w-full"
-                >
-                  <source
-                    srcset={bestImageURL(post.post, false, 512)}
-                    media="(max-width: 256px)"
-                  />
-                  <source
-                    srcset={bestImageURL(post.post, false, 512)}
-                    media="(max-width: 512px)"
-                  />
-                  <!-- svelte-ignore a11y-missing-attribute -->
-                  <img
-                    src={bestImageURL(post.post, false, 1024)}
-                    loading="lazy"
-                    class="max-w-full w-max object-cover rounded-md max-h-[80vh] h-auto z-30 opacity-0 transition-opacity duration-300"
-                    class:opacity-100={loaded}
-                    width={512}
-                    height={300}
-                    class:blur-3xl={post.post.nsfw && $userSettings.nsfwBlur}
-                    on:load={() => (loaded = true)}
-                  />
-                </picture>
-              </svelte:element>
-            </svelte:component>
-          {:else if post.post.url}
-            <PostLink
-              url={post.post.url}
-              thumbnail_url={post.post.thumbnail_url
-                ? `${post.post.thumbnail_url}?format=webp&thumbnail=512`
-                : undefined}
-              nsfw={post.post.nsfw}
-            />
-          {/if}
+                <source
+                  srcset={bestImageURL(post.post, false, 512)}
+                  media="(max-width: 256px)"
+                />
+                <source
+                  srcset={bestImageURL(post.post, false, 512)}
+                  media="(max-width: 512px)"
+                />
+                <!-- svelte-ignore a11y-missing-attribute -->
+                <img
+                  src={bestImageURL(post.post, false, 1024)}
+                  loading="lazy"
+                  class="max-w-full w-max object-cover rounded-md max-h-[80vh] h-auto z-30 opacity-0 transition-opacity duration-300"
+                  class:opacity-100={loaded}
+                  width={512}
+                  height={300}
+                  class:blur-3xl={post.post.nsfw && $userSettings.nsfwBlur}
+                  on:load={() => (loaded = true)}
+                />
+              </picture>
+            </svelte:element>
+          </svelte:component>
+        {:else if post.post.url}
+          <PostLink
+            url={post.post.url}
+            thumbnail_url={post.post.thumbnail_url
+              ? `${post.post.thumbnail_url}?format=webp&thumbnail=512`
+              : undefined}
+            nsfw={post.post.nsfw}
+          />
         {/if}
-        {#if post.post.body && !post.post.nsfw && (view == 'list' || view == 'card')}
-          <div
-            class="text-sm relative overflow-hidden {view == 'list'
-              ? `text-zinc-600 dark:text-zinc-400 max-h-24`
-              : 'text-slate-600 dark:text-zinc-400 max-h-48'} paragraph"
-          >
-            <Markdown inline source={post.post.body.slice(0, 400)} />
-            {#if post.post.body.length > (view == 'list' ? 200 : 600)}
-              <div
-                class="absolute bottom-0 w-full h-16 bg-gradient-to-b {view ==
-                'list'
-                  ? `dark:from-zinc-950/0 dark:to-zinc-950
+      {/if}
+      {#if post.post.body && !post.post.nsfw && (view == 'list' || view == 'card')}
+        <div
+          class="text-sm relative overflow-hidden {view == 'list'
+            ? `text-zinc-600 dark:text-zinc-400 max-h-24`
+            : 'text-slate-600 dark:text-zinc-400 max-h-48'} paragraph"
+        >
+          <Markdown inline source={post.post.body.slice(0, 400)} />
+          {#if post.post.body.length > (view == 'list' ? 200 : 600)}
+            <div
+              class="absolute bottom-0 w-full h-16 bg-gradient-to-b {view ==
+              'list'
+                ? `dark:from-zinc-950/0 dark:to-zinc-950
                   from-slate-25/0 to-slate-25 transition-all`
-                  : 'dark:from-zinc-900/0 dark:to-zinc-900 from-white/0 to-white'}"
-              />
-            {/if}
-          </div>
-        {/if}
-      </div>
-      {#if ($userSettings.view == 'list' || $userSettings.view == 'compact') && (post.post.thumbnail_url || isImage(post.post.url))}
-        <div class="flex-none w-24 h-24">
-          {#if !$userSettings.expandImages || (post.post.thumbnail_url && !isImage(post.post.url))}
-            <a href={postLink(post.post)}>
-              <!-- svelte-ignore a11y-missing-attribute -->
-              <img
-                src={bestImageURL(post.post, true)}
-                loading="lazy"
-                class="object-cover bg-slate-100 rounded-md h-24 w-24 border border-slate-200 dark:border-zinc-700"
-              />
-            </a>
-          {:else}
-            <ExpandableImage url={bestImageURL(post.post, false, 2048)}>
-              <!-- svelte-ignore a11y-missing-attribute -->
-              <img
-                src={bestImageURL(post.post, true)}
-                loading="lazy"
-                class="object-cover bg-slate-100 rounded-md h-24 w-24 border border-slate-200 dark:border-zinc-700"
-              />
-            </ExpandableImage>
+                : 'dark:from-zinc-900/0 dark:to-zinc-900 from-white/0 to-white'}"
+            />
           {/if}
         </div>
       {/if}
     </div>
-    {#if actions}
-      <div class="w-full" class:mt-2={view == 'list'}>
-        <PostActions
-          bind:post
-          on:edit={(e) => {
-            toast({
-              content: 'The post was edited successfully.',
-              type: 'success',
-            })
-          }}
-        />
+    {#if ($userSettings.view == 'list' || $userSettings.view == 'compact') && (post.post.thumbnail_url || isImage(post.post.url))}
+      <div class="flex-none w-24 h-24">
+        {#if !$userSettings.expandImages || (post.post.thumbnail_url && !isImage(post.post.url))}
+          <a href={postLink(post.post)}>
+            <!-- svelte-ignore a11y-missing-attribute -->
+            <img
+              src={bestImageURL(post.post, true)}
+              loading="lazy"
+              class="object-cover bg-slate-100 rounded-md h-24 w-24 border border-slate-200 dark:border-zinc-700"
+            />
+          </a>
+        {:else}
+          <ExpandableImage url={bestImageURL(post.post, false, 2048)}>
+            <!-- svelte-ignore a11y-missing-attribute -->
+            <img
+              src={bestImageURL(post.post, true)}
+              loading="lazy"
+              class="object-cover bg-slate-100 rounded-md h-24 w-24 border border-slate-200 dark:border-zinc-700"
+            />
+          </ExpandableImage>
+        {/if}
       </div>
     {/if}
   </div>
+  {#if actions}
+    <div class="w-full" class:mt-2={view == 'list'}>
+      <PostActions
+        bind:post
+        on:edit={(e) => {
+          toast({
+            content: 'The post was edited successfully.',
+            type: 'success',
+          })
+        }}
+      />
+    </div>
+  {/if}
 </Material>
diff --git a/src/lib/components/lemmy/post/PostActions.svelte b/src/lib/components/lemmy/post/PostActions.svelte
index 6daf1d1c..8fbe3447 100644
--- a/src/lib/components/lemmy/post/PostActions.svelte
+++ b/src/lib/components/lemmy/post/PostActions.svelte
@@ -7,6 +7,7 @@
     Bookmark,
     BookmarkSlash,
     BugAnt,
+    ChatBubbleOvalLeft,
     ChatBubbleOvalLeftEllipsis,
     EllipsisHorizontal,
     Eye,
@@ -75,12 +76,10 @@
   </Modal>
 {/if}
 
-<div class="flex flex-row gap-2 items-center h-8">
+<div class="flex flex-row gap-2 items-center h-8 z-10">
   <PostVote
     post={post.post}
     bind:vote={post.my_vote}
-    bind:upvotes={post.counts.upvotes}
-    bind:downvotes={post.counts.downvotes}
     bind:score={post.counts.score}
   />
 
@@ -89,7 +88,7 @@
     href="/post/{getInstance()}/{post.post.id}"
     class="!text-inherit h-8 px-3"
   >
-    <Icon slot="prefix" src={ChatBubbleOvalLeftEllipsis} mini size="16" />
+    <Icon slot="prefix" src={ChatBubbleOvalLeft} mini size="14" />
     <FormattedNumber number={post.counts.comments} />
   </Button>
   <div class="ml-auto" />
diff --git a/src/lib/components/lemmy/post/PostFeed.svelte b/src/lib/components/lemmy/post/PostFeed.svelte
index c48fa2e0..751e6a78 100644
--- a/src/lib/components/lemmy/post/PostFeed.svelte
+++ b/src/lib/components/lemmy/post/PostFeed.svelte
@@ -13,7 +13,7 @@
 <div
   class="flex flex-col {$userSettings.view == 'card'
     ? 'gap-3 md:gap-4'
-    : ''} divide-slate-200 dark:divide-zinc-800"
+    : ''} divide-slate-200 dark:divide-zinc-800 z-[5]"
   class:divide-y={$userSettings.view == 'compact' ||
     $userSettings.view == 'list'}
 >
diff --git a/src/lib/components/lemmy/post/PostVote.svelte b/src/lib/components/lemmy/post/PostVote.svelte
index f3f6610f..02eedba4 100644
--- a/src/lib/components/lemmy/post/PostVote.svelte
+++ b/src/lib/components/lemmy/post/PostVote.svelte
@@ -13,12 +13,10 @@
   } from 'svelte-hero-icons'
   import { profile } from '$lib/auth.js'
   import { vote as voteItem } from '$lib/lemmy/contentview.js'
-  import { Button, Popover } from 'mono-svelte'
+  import { Button, Material, Popover } from 'mono-svelte'
 
   export let post: Post
   export let vote: number = 0
-  export let upvotes: number = 0
-  export let downvotes: number = 0
   export let score: number
 
   const voteColor = (vote: number, border: boolean = false) =>
@@ -26,54 +24,39 @@
 </script>
 
 <slot {vote} {score}>
-  <Popover targetClass="h-8" openOnHover>
-    <div
-      class=" flex items-center text-sm gap-1 rounded-md border border-slate-200
-    dark:border-zinc-700 px-1 h-8 duration-200 dark:bg-zinc-900"
-      slot="target"
+  <div
+    class=" flex items-center text-sm gap-1 rounded-md border border-slate-200
+      dark:border-zinc-800 bg-white dark:bg-zinc-900 px-1 h-8 cursor-pointer"
+  >
+    <Button
+      aria-label="Upvote"
+      class={vote == 1 ? voteColor(vote) : ''}
+      on:click={async () => {
+        if (!$profile?.jwt) return
+        vote = vote == 1 ? 0 : 1
+        score = await voteItem(post, vote, $profile.jwt)
+      }}
+      size="square-sm"
+      color="tertiary"
+      alignment="center"
     >
-      <Button
-        aria-label="Upvote"
-        class={vote == 1 ? voteColor(vote) : ''}
-        on:click={async () => {
-          if (!$profile?.jwt) return
-          vote = vote == 1 ? 0 : 1
-          score = await voteItem(post, vote, $profile.jwt)
-        }}
-        size="square-sm"
-        color="tertiary"
-        alignment="center"
-      >
-        <Icon src={ChevronUp} mini size="18" />
-      </Button>
-      <span
-        class="font-medium transition-colors duration-200 {voteColor(vote)}"
-      >
-        <FormattedNumber number={score} />
-      </span>
-      <Button
-        aria-label="Downvote"
-        class={vote == -1 ? voteColor(vote) : ''}
-        on:click={async () => {
-          if (!$profile?.jwt) return
-          vote = vote == -1 ? 0 : -1
-          score = await voteItem(post, vote, $profile.jwt)
-        }}
-        size="square-sm"
-        color="tertiary"
-      >
-        <Icon src={ChevronDown} mini size="18" />
-      </Button>
-    </div>
-    <div class="flex flex-row items-center gap-2">
-      <span class="flex items-center gap-1 text-blue-500 font-medium">
-        <Icon src={ArrowUp} mini size="18" />
-        <FormattedNumber number={upvotes} />
-      </span>
-      <span class="flex items-center gap-1 text-red-500 font-medium">
-        <Icon src={ArrowDown} mini size="18" />
-        <FormattedNumber number={downvotes} />
-      </span>
-    </div>
-  </Popover>
+      <Icon src={ChevronUp} mini size="18" />
+    </Button>
+    <span class="font-medium transition-colors duration-200 {voteColor(vote)}">
+      <FormattedNumber number={score} />
+    </span>
+    <Button
+      aria-label="Downvote"
+      class={vote == -1 ? voteColor(vote) : ''}
+      on:click={async () => {
+        if (!$profile?.jwt) return
+        vote = vote == -1 ? 0 : -1
+        score = await voteItem(post, vote, $profile.jwt)
+      }}
+      size="square-sm"
+      color="tertiary"
+    >
+      <Icon src={ChevronDown} mini size="18" />
+    </Button>
+  </div>
 </slot>
diff --git a/tailwind.config.js b/tailwind.config.js
index d92cdc44..165e6998 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,7 @@ export default {
       },
       colors: {
         slate: {
+          200: '#e8edf4',
           25: 'rgb(252,253,254)',
         },
         zinc: {
diff --git a/yarn.lock b/yarn.lock
index f6019091..83cb49ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3023,10 +3023,10 @@ mlly@^1.2.0, mlly@^1.4.0:
     pkg-types "^1.0.3"
     ufo "^1.1.2"
 
-mono-svelte@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/mono-svelte/-/mono-svelte-0.3.2.tgz#646a247698b7aac4cd8c6c0d03ad448081e6b310"
-  integrity sha512-CiJzyCtQ6xM8XXhowyqIqCp8R4Q7IVDHbg7Ly+W5QSjfaBRYFbv2L/qhi0FkvBzQ6WOSoCK8Lz0vN81WbaPbyA==
+mono-svelte@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/mono-svelte/-/mono-svelte-0.3.3.tgz#001a4f0d95f4a33f7bb0c7e3b5681eb1ff21eabd"
+  integrity sha512-EmGgBESe0YiVAbolHFZ+/JWiAnqPqcwhJS1kNQCJjoSEY1VDPxswkZQ60yJHZad34U6jaYbRZRU2Mop1Xa7eYA==
 
 mri@^1.1.0:
   version "1.2.0"