diff --git a/src/lib/components/atoms/buttons/ActionEntryButton.svelte b/src/lib/components/atoms/buttons/ActionEntryButton.svelte
new file mode 100644
index 0000000..94e9235
--- /dev/null
+++ b/src/lib/components/atoms/buttons/ActionEntryButton.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Component, Snippet } from "svelte";
+  import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
+
+  interface Props {
+    actionButtonClass?: ClassValue;
+    actionButtonIcon?: Component<SvelteHTMLElements["svg"]>;
+    children?: Snippet;
+    class?: ClassValue;
+    onActionButtonClick?: () => void;
+    onclick?: () => void;
+  }
+
+  let {
+    actionButtonIcon: ActionButtonIcon,
+    children,
+    onActionButtonClick,
+    onclick,
+    ...props
+  }: Props = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+  id="container"
+  onclick={onclick && (() => setTimeout(onclick, 100))}
+  class={["rounded-xl", props.class]}
+>
+  <div id="children" class="flex h-full items-center justify-between gap-x-4 p-2 transition">
+    <div class="flex-grow overflow-x-hidden">
+      {@render children?.()}
+    </div>
+    {#if ActionButtonIcon}
+      <button
+        id="action-button"
+        onclick={(e) => {
+          e.stopPropagation();
+          if (onActionButtonClick) {
+            setTimeout(onActionButtonClick, 100);
+          }
+        }}
+        class={[
+          "flex-shrink-0 rounded-full p-1 text-lg active:bg-gray-100",
+          props.actionButtonClass,
+        ]}
+      >
+        <ActionButtonIcon />
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  #container:active:not(:has(#action-button:active)) {
+    @apply bg-gray-100;
+  }
+  #children:active:not(:has(#action-button:active)) {
+    @apply scale-95;
+  }
+</style>
diff --git a/src/lib/components/atoms/buttons/index.ts b/src/lib/components/atoms/buttons/index.ts
index 1765400..fc5022f 100644
--- a/src/lib/components/atoms/buttons/index.ts
+++ b/src/lib/components/atoms/buttons/index.ts
@@ -1,3 +1,4 @@
+export { default as ActionEntryButton } from "./ActionEntryButton.svelte";
 export { default as Button } from "./Button.svelte";
 export { default as EntryButton } from "./EntryButton.svelte";
 export { default as FloatingButton } from "./FloatingButton.svelte";
diff --git a/src/lib/components/molecules/labels/IconLabel.svelte b/src/lib/components/molecules/labels/IconLabel.svelte
index c4a982a..038f6c9 100644
--- a/src/lib/components/molecules/labels/IconLabel.svelte
+++ b/src/lib/components/molecules/labels/IconLabel.svelte
@@ -18,12 +18,12 @@
   <div class={["flex-shrink-0 text-lg", props.iconClass]}>
     <Icon />
   </div>
-  <div class="flex flex-grow flex-col gap-y-1 truncate text-left">
-    <p class={["font-medium", props.textClass]}>
+  <div class="flex flex-grow flex-col overflow-x-hidden text-left">
+    <p class={["truncate font-medium", props.textClass]}>
       {@render children?.()}
     </p>
     {#if subtext}
-      <p class="text-xs text-gray-800">
+      <p class="truncate text-xs text-gray-800">
         {@render subtext()}
       </p>
     {/if}
diff --git a/src/lib/molecules/Categories/Category.svelte b/src/lib/molecules/Categories/Category.svelte
index ea2c392..aab227c 100644
--- a/src/lib/molecules/Categories/Category.svelte
+++ b/src/lib/molecules/Categories/Category.svelte
@@ -2,11 +2,11 @@
   import type { Component } from "svelte";
   import type { SvelteHTMLElements } from "svelte/elements";
   import type { Writable } from "svelte/store";
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { CategoryLabel } from "$lib/components/molecules";
   import type { CategoryInfo } from "$lib/modules/filesystem";
   import type { SelectedCategory } from "./service";
 
-  import IconCategory from "~icons/material-symbols/category";
-
   interface Props {
     info: Writable<CategoryInfo | null>;
     menuIcon?: Component<SvelteHTMLElements["svg"]>;
@@ -14,58 +14,30 @@
     onMenuClick?: (category: SelectedCategory) => void;
   }
 
-  let { info, menuIcon: MenuIcon, onclick, onMenuClick }: Props = $props();
+  let { info, menuIcon, onclick, onMenuClick }: Props = $props();
 
   const openCategory = () => {
     const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onclick({ id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onclick({ id, dataKey, dataKeyVersion, name });
   };
 
-  const openMenu = (e: Event) => {
-    e.stopPropagation();
-
+  const openMenu = () => {
     const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onMenuClick!({ id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onMenuClick!({ id, dataKey, dataKeyVersion, name });
   };
 </script>
 
 {#if $info}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div id="button" onclick={openCategory} class="h-12 rounded-xl">
-    <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
-      <div class="flex-shrink-0 text-lg">
-        <IconCategory />
-      </div>
-      <p title={$info.name} class="flex-grow truncate font-medium">
-        {$info.name}
-      </p>
-      {#if MenuIcon && onMenuClick}
-        <button
-          id="open-menu"
-          onclick={openMenu}
-          class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
-        >
-          <MenuIcon class="text-lg" />
-        </button>
-      {/if}
-    </div>
-  </div>
+  <ActionEntryButton
+    class="h-12"
+    onclick={openCategory}
+    actionButtonIcon={menuIcon}
+    onActionButtonClick={openMenu}
+  >
+    <CategoryLabel name={$info.name!} />
+  </ActionEntryButton>
 {/if}
-
-<style>
-  #button:active:not(:has(#open-menu:active)) {
-    @apply bg-gray-100;
-  }
-  #button-content:active:not(:has(#open-menu:active)) {
-    @apply scale-95;
-  }
-</style>
diff --git a/src/lib/organisms/Category/File.svelte b/src/lib/organisms/Category/File.svelte
index e611b0b..5263b95 100644
--- a/src/lib/organisms/Category/File.svelte
+++ b/src/lib/organisms/Category/File.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { DirectoryEntryLabel } from "$lib/components/molecules";
   import type { FileInfo } from "$lib/modules/filesystem";
   import type { SelectedFile } from "./service";
 
-  import IconDraft from "~icons/material-symbols/draft";
   import IconClose from "~icons/material-symbols/close";
 
   interface Props {
@@ -18,52 +19,24 @@
     const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onclick({ id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onclick({ id, dataKey, dataKeyVersion, name });
   };
 
-  const removeFile = (e: Event) => {
-    e.stopPropagation();
-
+  const removeFile = () => {
     const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onRemoveClick!({ id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onRemoveClick!({ id, dataKey, dataKeyVersion, name });
   };
 </script>
 
 {#if $info}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div id="button" onclick={openFile} class="h-12 rounded-xl">
-    <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
-      <div class="flex-shrink-0 text-lg text-blue-400">
-        <IconDraft />
-      </div>
-      <p title={$info.name} class="flex-grow truncate font-medium">
-        {$info.name}
-      </p>
-      {#if onRemoveClick}
-        <button
-          id="remove-file"
-          onclick={removeFile}
-          class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
-        >
-          <IconClose class="text-lg" />
-        </button>
-      {/if}
-    </div>
-  </div>
+  <ActionEntryButton
+    class="h-12"
+    onclick={openFile}
+    actionButtonIcon={onRemoveClick && IconClose}
+    onActionButtonClick={removeFile}
+  >
+    <DirectoryEntryLabel type="file" name={$info.name} />
+  </ActionEntryButton>
 {/if}
-
-<style>
-  #button:active:not(:has(#remove-file:active)) {
-    @apply bg-gray-100;
-  }
-  #button-content:active:not(:has(#remove-file:active)) {
-    @apply scale-95;
-  }
-</style>
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
index b25bd2f..fd59d03 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { DirectoryEntryLabel } from "$lib/components/molecules";
   import type { FileInfo } from "$lib/modules/filesystem";
   import { formatDateTime } from "$lib/modules/util";
   import type { SelectedEntry } from "../service.svelte";
 
-  import IconDraft from "~icons/material-symbols/draft";
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
   interface Props {
@@ -19,55 +20,28 @@
     const { id, dataKey, dataKeyVersion, name } = $info!;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onclick({ type: "file", id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onclick({ type: "file", id, dataKey, dataKeyVersion, name });
   };
 
-  const openMenu = (e: Event) => {
-    e.stopPropagation();
-
+  const openMenu = () => {
     const { id, dataKey, dataKeyVersion, name } = $info!;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onOpenMenuClick({ type: "file", id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onOpenMenuClick({ type: "file", id, dataKey, dataKeyVersion, name });
   };
 </script>
 
 {#if $info}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div id="button" onclick={openFile} class="h-14 rounded-xl">
-    <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
-      <div class="flex-shrink-0 text-lg">
-        <IconDraft class="text-blue-400" />
-      </div>
-      <div class="flex-grow overflow-hidden">
-        <p title={$info.name} class="truncate font-medium">
-          {$info.name}
-        </p>
-        <p class="text-xs text-gray-800">
-          {formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
-        </p>
-      </div>
-      <button
-        id="open-menu"
-        onclick={openMenu}
-        class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
-      >
-        <IconMoreVert class="text-lg" />
-      </button>
-    </div>
-  </div>
+  <ActionEntryButton
+    class="h-14"
+    onclick={openFile}
+    actionButtonIcon={IconMoreVert}
+    onActionButtonClick={openMenu}
+  >
+    <DirectoryEntryLabel
+      type="file"
+      name={$info.name}
+      subtext={formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
+    />
+  </ActionEntryButton>
 {/if}
-
-<style>
-  #button:active:not(:has(#open-menu:active)) {
-    @apply bg-gray-100;
-  }
-  #button-content:active:not(:has(#open-menu:active)) {
-    @apply scale-95;
-  }
-</style>
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
index bea9e73..5454695 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { DirectoryEntryLabel } from "$lib/components/molecules";
   import type { DirectoryInfo } from "$lib/modules/filesystem";
   import type { SelectedEntry } from "../service.svelte";
 
-  import IconFolder from "~icons/material-symbols/folder";
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
   type SubDirectoryInfo = DirectoryInfo & { id: number };
@@ -20,50 +21,24 @@
     const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onclick({ type: "directory", id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onclick({ type: "directory", id, dataKey, dataKeyVersion, name });
   };
 
-  const openMenu = (e: Event) => {
-    e.stopPropagation();
-
+  const openMenu = () => {
     const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo;
     if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
 
-    setTimeout(() => {
-      onOpenMenuClick({ type: "directory", id, dataKey, dataKeyVersion, name });
-    }, 100);
+    onOpenMenuClick({ type: "directory", id, dataKey, dataKeyVersion, name });
   };
 </script>
 
 {#if $info}
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <div id="button" onclick={openDirectory} class="h-14 rounded-xl">
-    <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
-      <div class="flex-shrink-0 text-lg">
-        <IconFolder />
-      </div>
-      <p title={$info.name} class="flex-grow truncate font-medium">
-        {$info.name}
-      </p>
-      <button
-        id="open-menu"
-        onclick={openMenu}
-        class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
-      >
-        <IconMoreVert class="text-lg" />
-      </button>
-    </div>
-  </div>
+  <ActionEntryButton
+    class="h-14"
+    onclick={openDirectory}
+    actionButtonIcon={IconMoreVert}
+    onActionButtonClick={openMenu}
+  >
+    <DirectoryEntryLabel type="directory" name={$info.name!} />
+  </ActionEntryButton>
 {/if}
-
-<style>
-  #button:active:not(:has(#open-menu:active)) {
-    @apply bg-gray-100;
-  }
-  #button-content:active:not(:has(#open-menu:active)) {
-    @apply scale-95;
-  }
-</style>