diff --git a/src/shared/lib/components/ChipCard.vue b/src/shared/lib/components/ChipCard.vue
new file mode 100644
index 0000000..6298a04
--- /dev/null
+++ b/src/shared/lib/components/ChipCard.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Button from 'primevue/button';
+defineProps<{
+  label: string;
+}>();
+</script>
+
+<template>
+  <Button
+    ><span>{{ label }}</span></Button
+  >
+</template>
diff --git a/src/shared/lib/components/Chiptag.vue b/src/shared/lib/components/ChipTag.vue
similarity index 50%
rename from src/shared/lib/components/Chiptag.vue
rename to src/shared/lib/components/ChipTag.vue
index b85ec46..501a084 100644
--- a/src/shared/lib/components/Chiptag.vue
+++ b/src/shared/lib/components/ChipTag.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import { defineProps } from 'vue';
+import chip from 'primevue/chip';
 
 defineProps<{
-  name: string;
+  label: string;
 }>();
 </script>
 <template>
-  <div>
-    <div class="p-chip">
-      <span>{{ name }}</span>
-    </div>
-  </div>
+  <chip class="p-chip">
+    <span>{{ label }}</span>
+  </chip>
 </template>
diff --git a/src/shared/lib/components/Chipcard.vue b/src/shared/lib/components/Chipcard.vue
deleted file mode 100644
index 8fb678e..0000000
--- a/src/shared/lib/components/Chipcard.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import Button from 'primevue/button';
-</script>
-
-<template>
-  <div>
-    <div class="p-button p-button-rounded p-button-outlined">
-      <span class="p-button-label">物品を登録</span>
-    </div>
-  </div>
-</template>
diff --git a/src/shared/lib/components/IconAvatar.vue b/src/shared/lib/components/IconAvatar.vue
new file mode 100644
index 0000000..43e7cf7
--- /dev/null
+++ b/src/shared/lib/components/IconAvatar.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import Avatar from 'primevue/avatar';
+defineProps<{
+  name: string;
+}>();
+</script>
+<template>
+  <Avatar
+    :image="`https://q.trap.jp/api/v3/public/icon/${name}`"
+    class="mr-2"
+    size="xlarge"
+    shape="circle"
+  />
+</template>
diff --git a/src/shared/lib/components/Iconavatar.vue b/src/shared/lib/components/Iconavatar.vue
deleted file mode 100644
index 0bdc48e..0000000
--- a/src/shared/lib/components/Iconavatar.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import Avatar from 'primevue/avatar';
-defineProps<{
-  name: string;
-}>();
-</script>
-<template>
-  <div>
-    <Avatar
-      :image="`https://q.trap.jp/api/v3/public/icon/${name}`"
-      class="mr-2"
-      size="xlarge"
-      shape="circle"
-    />
-  </div>
-</template>
diff --git a/src/shared/lib/components/MainHeader.vue b/src/shared/lib/components/MainHeader.vue
index 0ae2111..050c835 100644
--- a/src/shared/lib/components/MainHeader.vue
+++ b/src/shared/lib/components/MainHeader.vue
@@ -1,39 +1,34 @@
 <template>
-  <div>
+  <div class="content">
     <div class="header">
-      <Iconavatar :name="dynamicName" />
-    </div>
-    <div class="content">
-      <Chiptag :name="dynamicName2" />
-    </div>
-    <div class="content">
-      <Chipcard></Chipcard>
+      <img
+        src="/safari-pinned-tab.svg"
+        alt="Safari Pinned Tab Icon"
+        style="width: 40px; filter: brightness(70%)"
+      />
+      <ChipCard :label="ChipLabel" />
+      <IconAvatar :name="UserName" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import Iconavatar from '@/shared/lib/components/Iconavatar.vue';
-import Chipcard from '@/shared/lib/components/Chipcard.vue';
-import Chiptag from '@/shared/lib/components/Chiptag.vue';
-const dynamicName = 'o_ER4'; // 実際は指定のユーザーの名前を取得する
-const dynamicName2 = 'test1';
+import IconAvatar from '@/shared/lib/components/IconAvatar.vue';
+import ChipCard from '@/shared/lib/components/ChipCard.vue';
+const UserName = 'o_ER4'; // 実際は指定のユーザーの名前を取得する
+const ChipLabel = '物品を追加'; //ボタンのラベルをpropsで使えるようにして使いまわす
 </script>
 
 <style lang="scss" module>
-.header {
+.content {
   display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: 10px;
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  background-color: white;
+  flex: auto;
+  flex-direction: column;
+  justify-content: flex-start;
+  justify-content: space-between;
 }
-
-.content {
-  padding: 20px;
+.header {
+  display: flex;
+  justify-content: space-between;
 }
 </style>
diff --git a/src/shared/lib/components/TextInput.vue b/src/shared/lib/components/TextInput.vue
new file mode 100644
index 0000000..2b692fa
--- /dev/null
+++ b/src/shared/lib/components/TextInput.vue
@@ -0,0 +1,2 @@
+<script></script>
+<template></template>