diff --git a/src/routes/(app)/posts/+page.svelte b/src/routes/(app)/posts/+page.svelte
index 56bca75..a3caf07 100644
--- a/src/routes/(app)/posts/+page.svelte
+++ b/src/routes/(app)/posts/+page.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { page } from "$app/stores";
-  import Card from "$comp/card.svelte";
+  import Cardicon from "$comp/cardicon.svelte";
   import Postlist from "$comp/page/posts/postlist.svelte";
 
   /**
@@ -15,10 +14,6 @@
 </script>
 
 <style>
-  .icon {
-    height: 24px;
-  }
-
   .content {
     display: flex;
     flex-flow: column nowrap;
@@ -27,10 +22,11 @@
 </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>
+  <Cardicon iconSrc="waving-hand-sign.png" iconName="wave" colorIcon="var(--yellow)" colorBackground="var(--yellow-transparent)">
+    <span style="align-self: center;">Welcome to ECHO</span>
+  </Cardicon>
+  
   <Postlist posts={data.posts} itemsCount={data.itemsCount} pageIndex={data.pageIndex} totalResultCount={data.totalResultCount}></Postlist>
 </main>