diff --git a/src/App.vue b/src/App.vue
index 118466e..b5830a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <Main/>
+  <Main />
 </template>
 
 <script lang="ts">
@@ -20,11 +20,40 @@ export default defineComponent({
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: #aab0b5;
   margin-top: 20px;
   font-size: 30px;
+  font-weight: 500;
 }
+
 html {
-  background: #ccc;
+  background: #222;
+}
+
+input {
+  padding: 5px;
+  margin: 5px;
+  border: none;
+  font-size: 20px;
+  background: transparent;
+  width: 150px;
+  color: #e0e4e8;
+  text-align: center;
+}
+
+input:focus {
+  outline: none;
+}
+
+td {
+  width: 150px;
+}
+
+.text-sm {
+  font-size: 20px;
+}
+
+.text-lg {
+  font-size: 40px;
 }
 </style>
diff --git a/src/components/components/EarthlyBranchIcon.vue b/src/components/components/EarthlyBranchIcon.vue
index bb63beb..1136445 100644
--- a/src/components/components/EarthlyBranchIcon.vue
+++ b/src/components/components/EarthlyBranchIcon.vue
@@ -1,11 +1,12 @@
 <template>
-<span>{{src?.name}}</span>
-<span v-for="(item, index) of src?.containingHeavenlyStems" :style="{'font-size': (20 - index * 4) + 'px'}">
+<span :style="getRenderStyle(src?.containingHeavenlyStems[0].element?.type,src?.containingHeavenlyStems[0].gender)">{{src?.name}}</span>
+<span v-if="showHs" v-for="(item, index) of src?.containingHeavenlyStems" :style="{'font-size': (20 - index * 4) + 'px'}">
     <HeavenlyStemIcon :src="item" />
 </span>
 </template>
 <script setup>
 import HeavenlyStemIcon from './HeavenlyStemIcon.vue'
+import { getRenderStyle } from '../../service/util';
 
-defineProps(['src'])
+defineProps(['src', 'showHs'])
 </script>
\ No newline at end of file
diff --git a/src/components/item.vue b/src/components/item.vue
index e1501be..8feb735 100644
--- a/src/components/item.vue
+++ b/src/components/item.vue
@@ -1,73 +1,85 @@
 <template>
-    <div>
-      <input :value="birthday.year" placeholder="年份, 如: 2023" autofocus @input="yearChange"
-        :style="{ border: valid(birthday.year) ? 'none' : '1px solid red' }" />
-      <input :value="birthday.monthday" placeholder="月日, 如: 1107" ref="input2Ref" @input="mdChange"
-        :style="{ border: valid(birthday.monthday) ? 'none' : '1px solid red' }" />
-      <input :value="birthday.hrminsec" placeholder="时分, 如: 2308" ref="input3Ref" @input="timeChange"
-        :style="{ border: valid(birthday.hrminsec) ? 'none' : '1px solid red' }" />
+    <div style="border: 2px solid white;
+    border-left: none;
+    border-right: none;
+    width: 604px;
+    margin: 15px auto">
+        <input :value="birthday.year" placeholder="年份, 如: 2023" autofocus @input="yearChange"
+            :style="{ border: valid(birthday.year) ? 'none' : '1px solid red' }" />
+        <input :value="birthday.monthday" placeholder="月日, 如: 1107" ref="input2Ref" @input="mdChange"
+            :style="{ border: valid(birthday.monthday) ? 'none' : '1px solid red' }" />
+        <input :value="birthday.hrminsec" placeholder="时分, 如: 2308" ref="input3Ref" @input="timeChange"
+            :style="{ border: valid(birthday.hrminsec) ? 'none' : '1px solid red' }" />
     </div>
     <div v-if="bazi">
-      <div style="display: flex; justify-content: center;">
-        <table>
-            <tr>
-                <td>
-                    {{ getSelfRelation(bazi[0][0]) }}
-                </td>
-                <td>
-                    {{ getSelfRelation(bazi[1][0]) }}
-                </td>
-                <td>
-                    {{ getSelfRelation(bazi[2][0]) }}
-                </td>
-                <td>
-                    {{ getSelfRelation(bazi[3][0]) }}
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <HeavenlyStemIcon :src="bazi[0][0]" />
-                </td>
-                <td>
-                    <HeavenlyStemIcon :src="bazi[1][0]" />
-                </td>
-                <td>
-                    <HeavenlyStemIcon :src="bazi[2][0]" />
-                </td>
-                <td>
-                    <HeavenlyStemIcon :src="bazi[3][0]" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <EarthlyBranchIcon :src="bazi[0][1]" />
-                </td>
-                <td>
-                    <EarthlyBranchIcon :src="bazi[1][1]" />
-                </td>
-                <td>
-                    <EarthlyBranchIcon :src="bazi[2][1]" />
-                </td>
-                <td>
-                    <EarthlyBranchIcon :src="bazi[3][1]" />
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    (<span v-for="hs of bazi[0][1].containingHeavenlyStems">{{ getSelfRelation(hs) }}</span>)
-                </td>
-                <td>
-                    (<span v-for="hs of bazi[1][1].containingHeavenlyStems">{{ getSelfRelation(hs) }}</span>)
-                </td>
-                <td>
-                    (<span v-for="hs of bazi[2][1].containingHeavenlyStems">{{ getSelfRelation(hs) }}</span>)
-                </td>
-                <td>
-                    (<span v-for="hs of bazi[3][1].containingHeavenlyStems">{{ getSelfRelation(hs) }}</span>)
-                </td>
-            </tr>
-        </table>
-        <!-- <HeavenlyStemIcon :src="bazi[0][0]" />
+        <div style="display: flex; justify-content: center;">
+            <table>
+                <tr class="text-sm">
+                    <td>
+                        {{ getSelfRelation(bazi[0][0]) }}
+                    </td>
+                    <td>
+                        {{ getSelfRelation(bazi[1][0]) }}
+                    </td>
+                    <td>
+                        {{ getSelfRelation(bazi[2][0]) }}
+                    </td>
+                    <td>
+                        {{ getSelfRelation(bazi[3][0]) }}
+                    </td>
+                </tr>
+                <tr class="text-lg">
+                    <td>
+                        <HeavenlyStemIcon :src="bazi[0][0]" />
+                    </td>
+                    <td>
+                        <HeavenlyStemIcon :src="bazi[1][0]" />
+                    </td>
+                    <td>
+                        <HeavenlyStemIcon :src="bazi[2][0]" />
+                    </td>
+                    <td>
+                        <HeavenlyStemIcon :src="bazi[3][0]" />
+                    </td>
+                </tr>
+                <tr class="text-lg">
+                    <td>
+                        <EarthlyBranchIcon :showHs="false" :src="bazi[0][1]" />
+                    </td>
+                    <td>
+                        <EarthlyBranchIcon :showHs="false" :src="bazi[1][1]" />
+                    </td>
+                    <td>
+                        <EarthlyBranchIcon :showHs="false" :src="bazi[2][1]" />
+                    </td>
+                    <td>
+                        <EarthlyBranchIcon :showHs="false" :src="bazi[3][1]" />
+                    </td>
+                </tr>
+                <tr class="text-sm">
+                    <td>
+                        <div v-for="hs of bazi[0][1].containingHeavenlyStems">
+                            <HeavenlyStemIcon :src="hs" /> {{ getSelfRelation(hs) }}
+                        </div>
+                    </td>
+                    <td>
+                        <div v-for="hs of bazi[1][1].containingHeavenlyStems">
+                            <HeavenlyStemIcon :src="hs" /> {{ getSelfRelation(hs) }}
+                        </div>
+                    </td>
+                    <td>
+                        <div v-for="hs of bazi[2][1].containingHeavenlyStems">
+                            <HeavenlyStemIcon :src="hs" /> {{ getSelfRelation(hs) }}
+                        </div>
+                    </td>
+                    <td>
+                        <div v-for="hs of bazi[3][1].containingHeavenlyStems">
+                            <HeavenlyStemIcon :src="hs" /> {{ getSelfRelation(hs) }}
+                        </div>
+                    </td>
+                </tr>
+            </table>
+            <!-- <HeavenlyStemIcon :src="bazi[0][0]" />
         <EarthlyBranchIcon :src="bazi[0][1]" />
   
         <HeavenlyStemIcon :src="bazi[1][0]" />
@@ -78,9 +90,9 @@
   
         <HeavenlyStemIcon :src="bazi[3][0]" />
         <EarthlyBranchIcon :src="bazi[3][1]" /> -->
-      </div>
-  
-      <!-- <div>
+        </div>
+
+        <!-- <div>
         {{ getSelfRelation(bazi[0][0]) }}
         (<span v-for="hs of bazi[0][1].containingHeavenlyStems">{{ getSelfRelation(hs) }}</span>)
   
@@ -93,94 +105,76 @@
         {{ getSelfRelation(bazi[3][0]) }}
         (<span v-for="hs of bazi[3][1].containingHeavenlyStems">{{ getSelfRelation(hs) }}</span>)
       </div> -->
-  
+
     </div>
-  </template>
-  
-  <script setup>
-  import { reactive, ref, onMounted } from "vue";
-  import { getfourPillar } from "../service/entity";
-  import HeavenlyStemIcon from "./components/HeavenlyStemIcon.vue"
-  import EarthlyBranchIcon from "./components/EarthlyBranchIcon.vue"
-  import { getRelation } from "../service/util"
+</template>
+  
+<script setup>
+import { reactive, ref, onMounted } from "vue";
+import { getfourPillar } from "../service/entity";
+import HeavenlyStemIcon from "./components/HeavenlyStemIcon.vue"
+import EarthlyBranchIcon from "./components/EarthlyBranchIcon.vue"
+import { getRelation } from "../service/util"
 
-  const props = defineProps(['order'])
-  
-  // dom refs
-  
-  const input2Ref = ref(null)
-  const input3Ref = ref(null)
-  
-  // vars
-  
-  const birthday = reactive({
+const props = defineProps(['order'])
+
+// dom refs
+
+const input2Ref = ref(null)
+const input3Ref = ref(null)
+
+// vars
+
+const birthday = reactive({
     year: '',
     monthday: '',
     hrminsec: ''
-  })
-  
-  const bazi = ref(null)
-  
-  // fns
-  
-  const getSelfRelation = (target) => getRelation(bazi.value[2][0], target)
-  
-  let valid = (val) => val?.length === 4
-  
-  let yearChange = (e) => {
+})
+
+const bazi = ref(null)
+
+// fns
+
+const getSelfRelation = (target) => getRelation(bazi.value[2][0], target)
+
+let valid = (val) => val?.length === 4
+
+let yearChange = (e) => {
     birthday.year = e?.target.value;
     if (valid(birthday.year)) {
-      input2Ref.value.focus();
+        input2Ref.value.focus();
     }
-  }
-  let mdChange = (e) => {
+}
+let mdChange = (e) => {
     birthday.monthday = e?.target.value;
     if (valid(birthday.monthday)) {
-      input3Ref.value.focus();
+        input3Ref.value.focus();
     }
-  }
-  let timeChange = (e) => {
+}
+let timeChange = (e) => {
     birthday.hrminsec = e?.target.value;
     if (valid(birthday.hrminsec)) {
-      check()
+        check()
     }
-  }
-  
-  let check = () => {
+}
+
+let check = () => {
     if (valid(birthday.year) && valid(birthday.monthday) && valid(birthday.hrminsec)) {
-      localStorage.setItem('unmeicache' + props.order, Object.values(birthday).join(','))
-      bazi.value = getfourPillar(new Date(`${birthday.year} ${birthday.monthday.slice(0, 2)} ${birthday.monthday.slice(2, 4)} ${birthday.hrminsec.slice(0, 2)}:${birthday.hrminsec.slice(2, 4)}`))
-      console.log(bazi.value)
+        localStorage.setItem('unmeicache' + props.order, Object.values(birthday).join(','))
+        bazi.value = getfourPillar(new Date(`${birthday.year} ${birthday.monthday.slice(0, 2)} ${birthday.monthday.slice(2, 4)} ${birthday.hrminsec.slice(0, 2)}:${birthday.hrminsec.slice(2, 4)}`))
+        console.log(bazi.value)
     }
-  }
-  
-  onMounted(() => {
+}
+
+onMounted(() => {
     const cache = localStorage.getItem('unmeicache' + props.order)
     if (cache) {
-      const parsed = cache.split(',')
-      birthday.year = parsed[0]
-      birthday.monthday = parsed[1]
-      birthday.hrminsec = parsed[2]
-      check()
+        const parsed = cache.split(',')
+        birthday.year = parsed[0]
+        birthday.monthday = parsed[1]
+        birthday.hrminsec = parsed[2]
+        check()
     }
-  })
-  
-  </script>
-  
-  <style>
-  input {
-    padding: 5px;
-    margin: 5px;
-    border: none;
-    font-size: 20px;
-    background: transparent;
-  }
-  
-  input:focus {
-    outline: none;
-  }
-  td {
-    border: 1px solid black;
-  }
-  </style>
-  
\ No newline at end of file
+})
+
+</script>
\ No newline at end of file
diff --git a/src/components/main.vue b/src/components/main.vue
index 345eae2..acdbbbb 100644
--- a/src/components/main.vue
+++ b/src/components/main.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="margin-bottom: 60px;" @click="add">hi, there is unmei.</div>
+  <div style="margin-bottom: 20px;" @click="add">hi, there is unmei.</div>
   <Item v-for="i in count" :order="i" :key="i"/>
 </template>
 
diff --git a/src/service/util.ts b/src/service/util.ts
index d4abd52..23cb309 100644
--- a/src/service/util.ts
+++ b/src/service/util.ts
@@ -4,46 +4,52 @@ export const getRemainder = (n1: number, n2: number) => n1 % n2 >= 0 ? n1 % n2 :
 export const getRenderStyle = (element: any, gender: any) => ({ // todo: type
     wood: {
         yin: {
-            color: 'rgb(77, 245, 35)',
-            textDecoration: 'underline'
+            color: '#689C76',
+            fontWeight: 300,
         },
         yang: {
-            color: 'rgb(77, 245, 35)',
+            color: '#689C76',
+            fontWeight: 700,
         },
     },
     fire: {
         yin: {
-            color: 'rgb(239, 79, 47)',
-            textDecoration: 'underline'
+            color: '#BE3E38',
+            fontWeight: 300,
         },
         yang: {
-            color: 'rgb(239, 79, 47)'
+            color: '#BE3E38',
+            fontWeight: 700,
         },
     },
     earth: {
         yin: {
-            color: 'rgb(225, 171, 43)'
+            color: '#9D6621',
+            fontWeight: 300,
         },
         yang: {
-            color: 'rgb(225, 171, 43)'
+            color: '#9D6621',
+            fontWeight: 700,
         },
     },
     metal: {
         yin: {
-            color: 'rgb(236, 252, 12)',
-            textDecoration: 'underline'
+            color: '#F6C543',
+            fontWeight: 300,
         },
         yang: {
-            color: 'rgb(236, 252, 12)'
+            color: '#F6C543',
+            fontWeight: 700,
         },
     },
     water: {
         yin: {
-            color: 'rgb(35, 161, 239)',
-            textDecoration: 'underline'
+            color: '#67A1F8',
+            fontWeight: 300,
         },
         yang: {
-            color: 'rgb(35, 161, 239)'
+            color: '#67A1F8',
+            fontWeight: 700,
         },
     },
 } as any)[element]![gender]