diff --git a/client/package.json b/client/package.json
index 5e83ca5..5f86e4c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@material/web": "^1.5.0",
     "@rushstack/eslint-patch": "^1.10.3",
     "@tsconfig/node20": "^20.1.4",
     "@types/bootstrap": "^5.2.10",
diff --git a/client/src/components/DisplayTags.vue b/client/src/components/DisplayTags.vue
index e630a77..407f40c 100644
--- a/client/src/components/DisplayTags.vue
+++ b/client/src/components/DisplayTags.vue
@@ -1,40 +1,24 @@
 <template>
-  <div class="badge-container">
-    <div
-      v-for="tag in [...tags].sort((a, b) => a.name.localeCompare(b.name))"
-      :key="tag.id"
-      class="badge me-1"
-      @click="searchWord(tag.name)"
-    >
-      {{ tag.name }}
-    </div>
-  </div>
+  <md-chip-set>
+    <md-suggestion-chip v-for="tag in sortedTags()" v-bind:key="tag" :label="tag" @click="searchWord(tag)"></md-suggestion-chip>
+  </md-chip-set>
 </template>
 
-<style lang="scss">
-.badge-container {
-  padding: 0;
-  margin: 0;
-
-  .badge {
-    background-color: $badge-background-color;
-    color: $badge-text-color;
-    cursor: pointer;
-  }
-}
-</style>
-
 <script setup lang="ts">
-import type { Tag } from "@fumix/fu-blog-common";
 import type { PropType } from "vue";
 import { useRouter } from "vue-router";
+import "@material/web/chips/chip-set.js";
+import "@material/web/chips/filter-chip.js";
+import "@material/web/chips/suggestion-chip.js";
 
 const router = useRouter();
-const props = defineProps({ tags: { type: Array as PropType<Tag[]>, required: true } });
+const props = defineProps({ tags: { type: Array as PropType<string[]>, required: true } });
+
+const sortedTags = () => [...props.tags].sort((a, b) => a.localeCompare(b));
 
 const searchWord = (word: string): void => {
   if (word) {
-    router.push(`/posts/?search=${word}&operator=and`);
+    router.push(`/posts/?search=${encodeURIComponent(word)}&operator=and`);
   }
 };
 </script>
diff --git a/client/src/components/PostPreview.vue b/client/src/components/PostPreview.vue
index 6ca138a..df14951 100644
--- a/client/src/components/PostPreview.vue
+++ b/client/src/components/PostPreview.vue
@@ -4,12 +4,12 @@
       <div class="card flex-md-row mb-4 box-shadow h-md-250">
         <div v-bind:class="{ 'card-body': true, draft: post.draft }">
           <div class="clearfix mb-4">
-            <button v-if="props.userPermissions?.canDeletePost" class="btn btn-sm btn-danger float-end" @click="$emit('deletePost', post)">
+            <button v-if="props.post.permissions.canDelete" class="btn btn-sm btn-danger float-end" @click="$emit('deletePost', post)">
               <fa-icon :icon="faTrash" />
               {{ t("app.base.delete") }}
             </button>
             <button
-              v-if="props.userPermissions?.canEditPost"
+              v-if="props.post.permissions.canEdit"
               class="btn btn-sm btn-secondary float-end mx-2"
               @click="$emit('changePost', post)"
             >
@@ -24,16 +24,16 @@
 
           <p class="card-text my-4">{{ post.description }}</p>
 
-          <div v-if="post.createdAt" class="mb-1 text-muted creator">
+          <div v-if="post.created" class="mb-1 text-muted creator">
             <fa-icon :icon="faClock" />
-            {{ $luxonDateTime.fromISO(post.createdAt.toString(), { locale: locale }).toRelativeCalendar() }}
-            <i v-if="post.createdBy">{{ post.createdBy.fullName }}</i>
+            {{ $luxonDateTime.fromISO(post.created.at.toString(), { locale: locale }).toRelativeCalendar() }}
+            <i v-if="post.created.by">{{ post.created.by }}</i>
           </div>
 
-          <div v-if="post.updatedBy && post.updatedAt" class="mb-1 text-muted editor">
+          <div v-if="post.updated" class="mb-1 text-muted editor">
             <fa-icon :icon="faEdit" />
-            {{ $luxonDateTime.fromISO(post.updatedAt.toString(), { locale: locale }).toRelativeCalendar() }}
-            <i>{{ post.updatedBy.fullName }}</i>
+            {{ $luxonDateTime.fromISO(post.updated.at.toString(), { locale: locale }).toRelativeCalendar() }}
+            <i v-if="post.updated.by">{{ post.updated.by }}</i>
           </div>
 
           <display-tags v-if="post.tags" :tags="post.tags"></display-tags>
@@ -71,7 +71,7 @@
 import DisplayTags from "@client/components/DisplayTags.vue";
 import { faClock } from "@fortawesome/free-regular-svg-icons";
 import { faBookReader, faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
-import type { Post, UserRolePermissionsType } from "@fumix/fu-blog-common";
+import type { Post, PublicPost, UserRolePermissionsType } from "@fumix/fu-blog-common";
 import type { PropType } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
@@ -82,7 +82,7 @@ const locale = useI18n().locale.value;
 
 const props = defineProps({
   post: {
-    type: Object as PropType<Post>,
+    type: Object as PropType<PublicPost>,
     required: true,
   },
   userPermissions: {
diff --git a/client/src/util/api-client.ts b/client/src/util/api-client.ts
index 4446a93..408d3b3 100644
--- a/client/src/util/api-client.ts
+++ b/client/src/util/api-client.ts
@@ -7,7 +7,7 @@ import type {
   JsonMimeType,
   LoggedInUserInfo,
   NewPostRequestDto,
-  Post,
+  PublicPost,
   SupportedImageMimeType,
 } from "@fumix/fu-blog-common";
 import { HttpHeader, imageBytesToDataUrl } from "@fumix/fu-blog-common";
@@ -141,7 +141,7 @@ export class PostEndpoints {
   }
 
   static async findPosts(pageIndex: number, itemsPerPage = 12, search: string | undefined = undefined, operator: "and" | "or" = "and") {
-    return callServer<void, JsonMimeType, { data: [Post[], number | null] }>(
+    return callServer<void, JsonMimeType, { data: [PublicPost[], number | null] }>(
       `/api/posts/page/${pageIndex}/count/${itemsPerPage}${search ? `/search/${encodeURIComponent(search)}/operator/${operator}` : ""}###`,
       "GET",
       "application/json",
diff --git a/client/src/views/PostView.vue b/client/src/views/PostView.vue
index 3518992..65c9f38 100644
--- a/client/src/views/PostView.vue
+++ b/client/src/views/PostView.vue
@@ -46,7 +46,7 @@
               <i>{{ post.updatedBy.fullName }}</i>
             </div>
 
-            <display-tags v-if="post.tags" :tags="post.tags"></display-tags>
+            <display-tags v-if="post?.tags" :tags="post?.tags?.map((it) => it.name) ?? []"></display-tags>
 
             <div v-html="post.sanitizedHtml" class="mt-4"></div>
           </div>
diff --git a/client/src/views/PostsView.vue b/client/src/views/PostsView.vue
index 29baeda..a144757 100644
--- a/client/src/views/PostsView.vue
+++ b/client/src/views/PostsView.vue
@@ -77,7 +77,8 @@ import WordCloud from "@client/components/WordCloud.vue";
 import { PostEndpoints } from "@client/util/api-client";
 import { faSadTear } from "@fortawesome/free-regular-svg-icons";
 import { faAdd } from "@fortawesome/free-solid-svg-icons";
-import { asSearchOperator, type ConfirmDialogData, type Post, type UserRolePermissionsType } from "@fumix/fu-blog-common";
+import type { ConfirmDialogData, PublicPost, UserRolePermissionsType } from "@fumix/fu-blog-common";
+import { asSearchOperator } from "@fumix/fu-blog-common";
 import type { PropType } from "vue";
 import { onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
@@ -88,10 +89,10 @@ const route = useRoute();
 const router = useRouter();
 const itemsPerPage = 12;
 const loading = ref(true);
-const posts = ref<Post[]>([]);
+const posts = ref<PublicPost[]>([]);
 const showDialog = ref<boolean>(false);
 const dialogData = ref<ConfirmDialogData | null>(null);
-const currentPost = ref<Post | null>(null);
+const currentPost = ref<PublicPost | null>(null);
 const totalPages = ref<number>(1);
 const { t } = useI18n();
 
@@ -142,7 +143,7 @@ onMounted(() => {
   loadPostsWithPagination(1, searchValue, operator);
 });
 
-const deletePost = async (post: Post) => {
+const deletePost = async (post: PublicPost) => {
   try {
     const res = await fetch(`/api/posts/delete/${post.id}`);
     await res.json();
@@ -162,8 +163,8 @@ const searchWord = (event: any) => {
   goTo(`/posts/?search=${event[0]}&operator=and`);
 };
 
-const showConfirm = (post: Post) => {
-  currentPost.value = post as Post;
+const showConfirm = (post: PublicPost) => {
+  currentPost.value = post as PublicPost;
   dialogData.value = {
     title: t("posts.confirm.title"),
     message: t("posts.confirm.message", { post: currentPost.value.title }),
@@ -176,12 +177,12 @@ const canceled = () => {
 };
 
 const confirmed = () => {
-  deletePost(currentPost.value as Post);
+  deletePost(currentPost.value as PublicPost);
   currentPost.value = null;
   showDialog.value = false;
 };
 
-const changePost = (post: Post) => {
+const changePost = (post: PublicPost) => {
   goTo(`/posts/post/${post.id}/edit`);
 };
 </script>
diff --git a/common/src/entity/UserRole.ts b/common/src/entity/UserRole.ts
index 5202700..fb42156 100644
--- a/common/src/entity/UserRole.ts
+++ b/common/src/entity/UserRole.ts
@@ -20,6 +20,8 @@ export const UserRoles = {
   ),
 } as const;
 
+export const DEFAULT_ROLE = new UserRolePermissions("Permissions of the logged out user (basically no permissions at all)", {});
+
 export function permissionsForUser(user: User): UserRolePermissionsType {
   return mergePermissions(user.roles.map((it) => UserRoles[it]));
 }
diff --git a/common/src/index.ts b/common/src/index.ts
index 2451106..be9eada 100644
--- a/common/src/index.ts
+++ b/common/src/index.ts
@@ -23,6 +23,7 @@ export * from "./entity/UserRole.js";
 export * from "./entity/permission/UserRolePermissions.js";
 export * from "./markdown-converter-common.js";
 export * from "./types/logged-in-user-info.js";
+export * from "./types/public-post.js";
 export * from "./types/search-operator.js";
 export * from "./util/base64.js";
 export * from "./util/cookie-header-helpers.js";
diff --git a/common/src/types/public-post.ts b/common/src/types/public-post.ts
new file mode 100644
index 0000000..896ef84
--- /dev/null
+++ b/common/src/types/public-post.ts
@@ -0,0 +1,42 @@
+import { Post } from "@common/entity/Post.js";
+import { LoggedInUserInfo } from "@common/types/logged-in-user-info.js";
+
+export type PublicPost = {
+  id: number | undefined;
+  title: string;
+  description: string;
+  created:
+    | {
+        at: Date;
+        by: string | undefined;
+      }
+    | undefined;
+  updated:
+    | {
+        at: Date;
+        by: string | undefined;
+      }
+    | undefined;
+  draft: boolean;
+  tags: string[];
+  permissions: {
+    canEdit: boolean;
+    canDelete: boolean;
+  };
+};
+
+export function createPublicPostFromPostEntity(loggedInUser: LoggedInUserInfo | undefined, post: Post): PublicPost {
+  return {
+    id: post.id,
+    title: post.title,
+    description: post.description,
+    tags: post.tags?.map((it) => it.name) ?? [],
+    created: post.createdAt ? { at: post.createdAt, by: post.createdBy?.fullName } : undefined,
+    updated: post.updatedAt ? { at: post.updatedAt, by: post.updatedBy?.fullName } : undefined,
+    draft: post.draft,
+    permissions: {
+      canEdit: loggedInUser?.permissions?.canEditPost === true || loggedInUser?.user?.id === post.createdBy?.id,
+      canDelete: loggedInUser?.permissions?.canDeletePost === true || loggedInUser?.user?.id === post.createdBy?.id,
+    },
+  };
+}
diff --git a/package-lock.json b/package-lock.json
index cca3931..7247a67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,6 +52,7 @@
       },
       "devDependencies": {
         "@intlify/unplugin-vue-i18n": "^4.0.0",
+        "@material/web": "^1.5.0",
         "@rushstack/eslint-patch": "^1.10.3",
         "@tsconfig/node20": "^20.1.4",
         "@types/bootstrap": "^5.2.10",
@@ -1427,6 +1428,21 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==",
+      "dev": true
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
+      "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
+      "dev": true,
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0"
+      }
+    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
@@ -1484,6 +1500,19 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "node_modules/@material/web": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.5.0.tgz",
+      "integrity": "sha512-aM2TVCU8Ozh3QS5cckRalmWkNCKK3Y6uhB3skIozP6jIqYX1PDhme/URrHGcWk44k2qqmR7R+X8GEBAu8N/NCQ==",
+      "dev": true,
+      "workspaces": [
+        "catalog"
+      ],
+      "dependencies": {
+        "lit": "^2.7.4 || ^3.0.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -8691,6 +8720,37 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/lit": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.4.tgz",
+      "integrity": "sha512-q6qKnKXHy2g1kjBaNfcoLlgbI3+aSOZ9Q4tiGa9bGYXq5RBXxkVTqTIVmP2VWMp29L4GyvCFm8ZQ2o56eUAMyA==",
+      "dev": true,
+      "dependencies": {
+        "@lit/reactive-element": "^2.0.4",
+        "lit-element": "^4.0.4",
+        "lit-html": "^3.1.2"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.6.tgz",
+      "integrity": "sha512-U4sdJ3CSQip7sLGZ/uJskO5hGiqtlpxndsLr6mt3IQIjheg93UKYeGQjWMRql1s/cXNOaRrCzC2FQwjIwSUqkg==",
+      "dev": true,
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0",
+        "@lit/reactive-element": "^2.0.4",
+        "lit-html": "^3.1.2"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.4.tgz",
+      "integrity": "sha512-yKKO2uVv7zYFHlWMfZmqc+4hkmSbFp8jgjdZY9vvR9jr4J8fH6FUMXhr+ljfELgmjpvlF7Z1SJ5n5/Jeqtc9YA==",
+      "dev": true,
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/load-json-file": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
diff --git a/server/src/routes/posts.ts b/server/src/routes/posts.ts
index e4e0439..a20b41c 100644
--- a/server/src/routes/posts.ts
+++ b/server/src/routes/posts.ts
@@ -1,4 +1,11 @@
-import { DraftResponseDto, EditPostRequestDto, LoggedInUserInfo, NewPostRequestDto, PostRequestDto } from "@fumix/fu-blog-common";
+import {
+  createPublicPostFromPostEntity,
+  DraftResponseDto,
+  EditPostRequestDto,
+  LoggedInUserInfo,
+  NewPostRequestDto,
+  PostRequestDto,
+} from "@fumix/fu-blog-common";
 import logger from "@server/logger.js";
 import express, { NextFunction, Request, Response, Router } from "express";
 import { In } from "typeorm";
@@ -64,7 +71,9 @@ router.get(
             where: { id: In(idArray) },
             relations: ["createdBy", "updatedBy", "tags"],
           })
-          .then((result) => res.status(200).json({ data: [result, count[0]] }));
+          .then((result) =>
+            res.status(200).json({ data: [result.map((it) => createPublicPostFromPostEntity(loggedInUser, it)), count[0]] }),
+          );
       })
       .catch((err) => next(err));
   },
@@ -101,7 +110,7 @@ router.get("/page/:page([0-9]+)/count/:count([0-9]+)/", authMiddleware, async (r
       take: itemsPerPage,
       relations: ["createdBy", "updatedBy", "tags"],
     })
-    .then((result) => res.status(200).json({ data: result }))
+    .then(([posts, count]) => res.status(200).json({ data: [posts.map((it) => createPublicPostFromPostEntity(loggedInUser, it)), count] }))
     .catch((error) => {
       next(error);
     });