diff --git a/src/views/CollectionView/CollectionMerchCard.vue b/src/views/CollectionView/CollectionMerchCard.vue
new file mode 100644
index 0000000..058b395
--- /dev/null
+++ b/src/views/CollectionView/CollectionMerchCard.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import BoxIcon from '@/components/icons/BoxIcon.vue'
+</script>
+
+<template>
+  <n-card title="Card template" class="responsive-card">
+    <template #cover>
+      <div class="cover-wrapper">
+        <BoxIcon />
+      </div>
+    </template>
+    Card Content
+  </n-card>
+</template>
+
+<style scoped>
+.responsive-card {
+  max-width: 200px;
+  min-width: 180px;
+}
+
+.cover-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 12px 0;
+  overflow: hidden;
+}
+
+.cover-wrapper :deep(svg) {
+  width: 100%;
+  height: auto;
+  max-width: 80%;
+}
+</style>