update main UI

 .body {
   width: 100%;
   flex-grow: 1;
+  max-height: calc(100vh - 70px);
   display: flex;
   justify-content: center;
   align-items: center;

+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: column;
+
+  .profile {
+    width: 180px;
+    height: 180px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    overflow: hidden;
+
+    img {
+      width: 180px;
+      height: 180px;
+      border-radius: 50%;
+    }
+  }
+
+  .list {
+    flex: 1;
+    width: 100%;
+    max-height: calc(100vh - 255px);
+    overflow-y: auto;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+
+    .followers {
+      flex: 1;
+      padding: .4rem;
+    }
+    .following {
+      flex: 1;
+      padding: .4rem;
+    }
+
+    .item {
+      padding-left: 0.3rem;
+      margin: .25rem 0;
+      border-radius: 0.16rem;
+      height: 1.8rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &.item-0 {
+        background-color: #efefef;
+      }
+    }
+  }
+
+  .title {
+    font-size: 1rem;
+    font-weight: 800;
+    margin: 0.5rem 0;
+  }
+}
\ No newline at end of file

+export const formatNumber = (number : number) : string => {
+    if(`${number}`.length > 6) {
+        return `${Math.floor(number / 1000000)}m`
+    }
+    else if(`${number}`.length > 3) {
+        return `${Math.floor(number / 1000)}k`
+    } else {
+        return `${number}`;
+    }
+}
\ No newline at end of file

@@ -6,34 +6,44 @@
  *                다른 메뉴 보기
 **/
 import {getState} from "@src/store/state";
+import {formatNumber} from "@src/components/format.number";
+import '@src/assets/style/Main.scss'
 
 const Main = () => {
     const state = getState();
     let followers : string = '';
     let following : string = '';
-    state.followers?.forEach(id => {
-        followers += `<div>${id}</div>`
-    });
-    state.following?.forEach(id => {
-        following += `<div>${id}</div>`
-    });
+    // @ts-ignore
+    state.followers?.sort()
+                    .forEach((id, idx) => {
+                        followers += `<div class="item item-${idx % 2}">${id}</div>`
+                    });
+    // @ts-ignore
+    state.following?.sort()
+                    .forEach((id, idx) => {
+                        following += `<div class="item item-${idx % 2}">${id}</div>`
+                    });
+
+    const followers_num = formatNumber(state.followers?.length || 0);
+    const followings_num = formatNumber(state.following?.length || 0);
 
     return `
         <div class="main">
-            <div id="profile">
+            <div class="profile">
                 <img src="${state.src}" alt="${state.insta_id}-image"/>
-                <span class="profile-id">${state.insta_id}</span>
             </div>
-            <div id="list">
-                <div id="followers">
-                    ${followers}
-                </div>
-                <div id="following">
-                    ${following}
+            <div class="list">
+                <div class="followers">
+                    <h2 class="title">FOLLOWERS (${followers_num})</h2>
+                    <div>${followers}</div>
                 </div>
+                <div class="following">
+                    <h2 class="title">FOLLOWINGS (${followings_num})</h2>
+                    <div>${following}</div>
+                </div> 
             </div>
         </div>
     `
 }
 
-export default Main
\ No newline at end of file
+export default Main;
\ No newline at end of file

@@ -6,10 +6,11 @@
 
 import Title from "@src/components/title";
 import '@src/assets/style/Header.scss'
+import {getState} from "@src/store/state";
 
 const Header = () : string => `
     <div class="header">
-        ${Title('im title').Large}
+        ${Title(getState().insta_id || 'INSTAGRAM').Large}
     </div>
 `;