diff --git a/src/comp/card.svelte b/src/comp/card.svelte
new file mode 100644
index 0000000..906a76d
--- /dev/null
+++ b/src/comp/card.svelte
@@ -0,0 +1,34 @@
+<script>
+    import Glowfx from "./fx/glowfx.svelte";
+
+  /**
+   * @type {boolean | null}
+   */
+  export let horizontal = null;
+
+  /**
+   * @type {string}
+   */
+  export let background = 'var(--gray-dim)';
+</script>
+
+<style lang="scss">
+  .card {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 8px;
+    padding: 16px;
+    border-radius: 16px;
+    background: var(--card-bg);
+
+    &[data-horizontal] {
+      flex-direction: row;
+    }
+  }
+</style>
+
+<Glowfx borderRadius={16}>
+  <div class="card" data-horizontal={horizontal} {...$$restProps} style="--card-bg: {background}; {$$props.style}">
+    <slot />
+  </div>
+</Glowfx>
diff --git a/src/routes/(app)/posts/+page.svelte b/src/routes/(app)/posts/+page.svelte
index 4bc072e..5f42791 100644
--- a/src/routes/(app)/posts/+page.svelte
+++ b/src/routes/(app)/posts/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Card from "$comp/card.svelte";
   import Postlist from "$comp/page/posts/postlist.svelte";
 
   /**
@@ -10,5 +11,23 @@
   export let data;
 </script>
 
-<h1>Posts</h1>
-<Postlist posts={data.posts} glancePost={data.glancePost}></Postlist>
+<style>
+  .icon {
+    height: 24px;
+  }
+
+  .content {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 16px;
+  }
+</style>
+
+<h1 class="typeTitle">Posts</h1>
+<main class="content">
+  <Card background="#ffcc0020" style="align-items: center; gap: 16px;" horizontal>
+    <img class="icon" src="waving-hand-sign.png" alt="wave">
+    <span>Welcome to ECHO</span>
+  </Card>
+  <Postlist posts={data.posts} glancePost={data.glancePost}></Postlist>
+</main>
diff --git a/static/waving-hand-sign.png b/static/waving-hand-sign.png
new file mode 100644
index 0000000..bcd7daa
Binary files /dev/null and b/static/waving-hand-sign.png differ