diff --git a/app/src/App.vue b/app/src/App.vue
index a555520..0d3e920 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,7 +1,171 @@
 <script setup></script>
 
 <template>
-  <div>
-    <h1 class="text-3xl font-bold underline">Hello world!</h1>
+  <div class="bg-background-primary h-screen">
+    <!--header-->
+    <div id="header" class="bg-background-secondary content-center h-[5%] p-1">
+      <div class="inline-block">
+        <button id="stream">
+          <svg
+            class="h-5 w-5 fill-current text-text-primary"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 39 34"
+          >
+            <path
+              d="M1.193 7.158h31.02c.658 0 1.192-.534 1.192-1.193V1.193c0-.66-.534-1.193-1.193-1.193H1.193C.533 0 0 .534 0 1.193v4.772c0 .66.534 1.193 1.193 1.193Zm35.791 5.965H5.965c-.659 0-1.193.534-1.193 1.194v4.772c0 .659.534 1.193 1.193 1.193h31.02c.659 0 1.192-.534 1.192-1.193v-4.772c0-.66-.533-1.194-1.193-1.194Zm-4.772 13.124H1.193C.533 26.247 0 26.78 0 27.44v4.772c0 .66.534 1.193 1.193 1.193h31.02c.658 0 1.192-.534 1.192-1.193V27.44c0-.66-.534-1.193-1.193-1.193Z"
+            />
+          </svg>
+        </button>
+        <button id="backward" class="bg-text-primary h-5"></button>
+        <button>
+          <p class="text-text-primary inline font-bold">1. Command's Basics</p>
+        </button>
+        <p class="text-text-primary inline font-bold">‧</p>
+        <button>
+          <p class="text-text-primary inline font-bold">
+            1. Try Your First Command
+          </p>
+        </button>
+      </div>
+      <div class="float-right inline-block">
+        <button id="warning">
+          <svg
+            class="fill-current text-text-primary h-5 w-5"
+            viewBox="0 0 36 31"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M35.5948 26.0357C36.7484 27.9288 35.3004 30.2952 32.9963 30.2952H3.00339C0.69483 30.2952 -0.746544 27.9252 0.40483 26.0357L15.4015 1.4192C16.5556 -0.474783 19.4464 -0.471351 20.5986 1.4192L35.5948 26.0357ZM18 20.9463C16.4122 20.9463 15.125 22.1649 15.125 23.6681C15.125 25.1714 16.4122 26.39 18 26.39C19.5878 26.39 20.875 25.1714 20.875 23.6681C20.875 22.1649 19.5878 20.9463 18 20.9463ZM15.2705 11.1627L15.7341 19.2099C15.7558 19.5865 16.0846 19.8812 16.4829 19.8812H19.5171C19.9154 19.8812 20.2443 19.5865 20.2659 19.2099L20.7296 11.1627C20.753 10.756 20.4109 10.414 19.9807 10.414H16.0193C15.589 10.414 15.247 10.756 15.2705 11.1627Z"
+            />
+          </svg>
+        </button>
+        <button id="setting">
+          <svg
+            class="fill-current text-text-primary h-5 w-5"
+            viewBox="0 0 32 34"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M31.596 20.9672L28.7584 19.3285C29.0448 17.7831 29.0448 16.1978 28.7584 14.6524L31.596 13.0137C31.9224 12.8272 32.069 12.4409 31.9624 12.0812C31.223 9.70981 29.964 7.56492 28.3187 5.77973C28.0656 5.50662 27.6526 5.44001 27.3329 5.62652L24.4952 7.26517C23.3029 6.23935 21.9307 5.44667 20.4453 4.9271V1.65647C20.4453 1.28345 20.1855 0.957052 19.8191 0.877118C17.3745 0.330903 14.8699 0.357548 12.5451 0.877118C12.1788 0.957052 11.919 1.28345 11.919 1.65647V4.93376C10.4402 5.45999 9.06801 6.25267 7.869 7.27183L5.03801 5.63318C4.71161 5.44667 4.30528 5.50662 4.05216 5.78639C2.40685 7.56492 1.14789 9.70981 0.408504 12.0878C0.295264 12.4475 0.448471 12.8339 0.774867 13.0204L3.61252 14.659C3.32609 16.2044 3.32609 17.7898 3.61252 19.3352L0.774867 20.9738C0.448471 21.1603 0.301925 21.5467 0.408504 21.9064C1.14789 24.2778 2.40685 26.4226 4.05216 28.2078C4.30528 28.4809 4.71827 28.5476 5.03801 28.361L7.87566 26.7224C9.06801 27.7482 10.4402 28.5409 11.9256 29.0605V32.3378C11.9256 32.7108 12.1854 33.0372 12.5518 33.1171C14.9964 33.6633 17.501 33.6367 19.8258 33.1171C20.1921 33.0372 20.4519 32.7108 20.4519 32.3378V29.0605C21.9307 28.5342 23.3029 27.7416 24.5019 26.7224L27.3396 28.361C27.666 28.5476 28.0723 28.4876 28.3254 28.2078C29.9707 26.4293 31.2297 24.2844 31.9691 21.9064C32.069 21.54 31.9224 21.1537 31.596 20.9672ZM16.1821 22.3194C13.2446 22.3194 10.8532 19.928 10.8532 16.9905C10.8532 14.0529 13.2446 11.6615 16.1821 11.6615C19.1197 11.6615 21.511 14.0529 21.511 16.9905C21.511 19.928 19.1197 22.3194 16.1821 22.3194Z"
+            />
+          </svg>
+        </button>
+        <button id="fullscreen">
+          <svg
+            class="fill-current text-text-primary h-5 w-5"
+            viewBox="0 0 31 31"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M30.0556 10.8776H21.6255C20.7213 10.8776 19.9939 10.1501 19.9939 9.24592V0.815816C19.9939 0.367117 20.361 0 20.8097 0H23.5291C23.9778 0 24.3449 0.367117 24.3449 0.815816V6.52653H30.0556C30.5043 6.52653 30.8714 6.89365 30.8714 7.34235V10.0617C30.8714 10.5104 30.5043 10.8776 30.0556 10.8776ZM11.2919 9.24592V0.815816C11.2919 0.367117 10.9247 0 10.476 0H7.75665C7.30795 0 6.94084 0.367117 6.94084 0.815816V6.52653H1.23012C0.781424 6.52653 0.414307 6.89365 0.414307 7.34235V10.0617C0.414307 10.5104 0.781424 10.8776 1.23012 10.8776H9.66022C10.5644 10.8776 11.2919 10.1501 11.2919 9.24592ZM11.2919 29.6413V21.2112C11.2919 20.307 10.5644 19.5796 9.66022 19.5796H1.23012C0.781424 19.5796 0.414307 19.9467 0.414307 20.3954V23.1148C0.414307 23.5635 0.781424 23.9306 1.23012 23.9306H6.94084V29.6413C6.94084 30.09 7.30795 30.4571 7.75665 30.4571H10.476C10.9247 30.4571 11.2919 30.09 11.2919 29.6413ZM24.3449 29.6413V23.9306H30.0556C30.5043 23.9306 30.8714 23.5635 30.8714 23.1148V20.3954C30.8714 19.9467 30.5043 19.5796 30.0556 19.5796H21.6255C20.7213 19.5796 19.9939 20.307 19.9939 21.2112V29.6413C19.9939 30.09 20.361 30.4571 20.8097 30.4571H23.5291C23.9778 30.4571 24.3449 30.09 24.3449 29.6413Z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <!--main-->
+    <div id="main" class="h-[95%] grid grid-cols-3 gap-3 p-3">
+      <!--Topic and Command List-->
+      <div class="bg-background-secondary inline-block h-full rounded-lg">
+        <section class="h-2/3 m-3">
+          <h1 id="topic" class="text-text">Try Your First Command</h1>
+          <hr class="border-text-line border-2 my-2" />
+        </section>
+        <hr class="border-text-line border" />
+        <section class="h-1/3">
+          <svg
+            class="fill-current text-text-primary inline h-5 w-5"
+            viewBox="0 0 40 37"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.70071 27.9298H1.86461C1.54395 27.9298 1.23643 28.0769 1.00969 28.3388C0.782958 28.6007 0.655579 28.9559 0.655579 29.3262L0.655579 34.9122C0.655579 35.2825 0.782958 35.6377 1.00969 35.8996C1.23643 36.1615 1.54395 36.3087 1.86461 36.3087H6.70071C7.02137 36.3087 7.32889 36.1615 7.55562 35.8996C7.78236 35.6377 7.90974 35.2825 7.90974 34.9122V29.3262C7.90974 28.9559 7.78236 28.6007 7.55562 28.3388C7.32889 28.0769 7.02137 27.9298 6.70071 27.9298ZM6.70071 6.10352e-05H1.86461C1.54395 6.10352e-05 1.23643 0.14719 1.00969 0.409082C0.782958 0.670973 0.655579 1.02617 0.655579 1.39655L0.655579 6.98248C0.655579 7.35285 0.782958 7.70806 1.00969 7.96995C1.23643 8.23184 1.54395 8.37897 1.86461 8.37897H6.70071C7.02137 8.37897 7.32889 8.23184 7.55562 7.96995C7.78236 7.70806 7.90974 7.35285 7.90974 6.98248V1.39655C7.90974 1.02617 7.78236 0.670973 7.55562 0.409082C7.32889 0.14719 7.02137 6.10352e-05 6.70071 6.10352e-05ZM6.70071 13.9649H1.86461C1.54395 13.9649 1.23643 14.112 1.00969 14.3739C0.782958 14.6358 0.655579 14.991 0.655579 15.3614L0.655579 20.9473C0.655579 21.3177 0.782958 21.6729 1.00969 21.9348C1.23643 22.1967 1.54395 22.3438 1.86461 22.3438H6.70071C7.02137 22.3438 7.32889 22.1967 7.55562 21.9348C7.78236 21.6729 7.90974 21.3177 7.90974 20.9473V15.3614C7.90974 14.991 7.78236 14.6358 7.55562 14.3739C7.32889 14.112 7.02137 13.9649 6.70071 13.9649ZM38.1354 29.3262H13.9549C13.6342 29.3262 13.3267 29.4734 13.1 29.7353C12.8732 29.9971 12.7458 30.3524 12.7458 30.7227V33.5157C12.7458 33.8861 12.8732 34.2413 13.1 34.5032C13.3267 34.765 13.6342 34.9122 13.9549 34.9122H38.1354C38.4561 34.9122 38.7636 34.765 38.9903 34.5032C39.2171 34.2413 39.3444 33.8861 39.3444 33.5157V30.7227C39.3444 30.3524 39.2171 29.9971 38.9903 29.7353C38.7636 29.4734 38.4561 29.3262 38.1354 29.3262ZM38.1354 1.39655H13.9549C13.6342 1.39655 13.3267 1.54368 13.1 1.80557C12.8732 2.06746 12.7458 2.42266 12.7458 2.79303V5.586C12.7458 5.95637 12.8732 6.31157 13.1 6.57346C13.3267 6.83535 13.6342 6.98248 13.9549 6.98248H38.1354C38.4561 6.98248 38.7636 6.83535 38.9903 6.57346C39.2171 6.31157 39.3444 5.95637 39.3444 5.586V2.79303C39.3444 2.42266 39.2171 2.06746 38.9903 1.80557C38.7636 1.54368 38.4561 1.39655 38.1354 1.39655ZM38.1354 15.3614H13.9549C13.6342 15.3614 13.3267 15.5085 13.1 15.7704C12.8732 16.0323 12.7458 16.3875 12.7458 16.7579V19.5508C12.7458 19.9212 12.8732 20.2764 13.1 20.5383C13.3267 20.8002 13.6342 20.9473 13.9549 20.9473H38.1354C38.4561 20.9473 38.7636 20.8002 38.9903 20.5383C39.2171 20.2764 39.3444 19.9212 39.3444 19.5508V16.7579C39.3444 16.3875 39.2171 16.0323 38.9903 15.7704C38.7636 15.5085 38.4561 15.3614 38.1354 15.3614Z"
+            />
+          </svg>
+          <h1 class="inline text-text-primary font-xl">Command Cheatsheets</h1>
+          <div id="cheatsheets">
+            <p class="text-text-secondary">No Available Command</p>
+          </div>
+        </section>
+      </div>
+      <!--Terminal and Hint-->
+      <div class="bg-background inline-block h-full py-2 rounded-lg">
+        <section id="terminal" class="h-3/5">
+          <button class="text-text h-[5%]">bash</button>
+          <div class="bg-background-secondary h-[calc(100%-5%)] p-4">
+            <p class="text-text-primary">
+              zeko@first-command<span class="text-text">:~$</span>
+            </p>
+          </div>
+        </section>
+        <section class="h-2/5">
+          <button>
+            <img src="" alt="List" class="inline" />
+            <h1 class="inline text-text font-xl">Hint</h1>
+          </button>
+          <div id="hint">
+            <p class="text-text">Type command in the terminal above.</p>
+          </div>
+        </section>
+      </div>
+      <!--Visualization-->
+      <div class="bg-background-primary inline-block h-full">
+        <div class="bg-border rounded-xl h-[90%] px-3 py-6">
+          <div class="bg-background rounded-xl h-full px-1 py-6">
+            <section id="visualization" class="bg-background-primary h-full">
+              <p class="text-text">visualization</p>
+            </section>
+          </div>
+        </div>
+        <section
+          class="h-[10%] p-3 grid grid-cols-3 gap-4 place-content-between"
+        >
+          <button id="solution" class="bg-background-secondary rounded-lg p-2">
+            <svg
+              class="fill-current text-text-primary h-5 w-5 inline"
+              viewBox="0 0 36 36"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M35.0673 17.5337C35.0673 27.2194 27.2166 35.0673 17.5337 35.0673C7.85077 35.0673 0 27.2194 0 17.5337C0 7.85359 7.85077 0 17.5337 0C27.2166 0 35.0673 7.85359 35.0673 17.5337ZM18.0042 5.79742C14.1512 5.79742 11.6938 7.42049 9.76413 10.3051C9.51413 10.6788 9.59777 11.1829 9.95608 11.4546L12.4093 13.3147C12.7773 13.5937 13.3016 13.5274 13.5875 13.1647C14.8505 11.5627 15.7165 10.6338 17.6389 10.6338C19.0832 10.6338 20.8697 11.5634 20.8697 12.964C20.8697 14.0228 19.9957 14.5665 18.5696 15.3661C16.9064 16.2984 14.7057 17.4588 14.7057 20.3617V20.6445C14.7057 21.113 15.0855 21.4929 15.5541 21.4929H19.5133C19.9818 21.4929 20.3617 21.113 20.3617 20.6445V20.5502C20.3617 18.538 26.2429 18.4542 26.2429 13.0088C26.2429 8.90809 21.9893 5.79742 18.0042 5.79742ZM17.5337 23.3311C15.7403 23.3311 14.2814 24.79 14.2814 26.5833C14.2814 28.3765 15.7403 29.8355 17.5337 29.8355C19.327 29.8355 20.7859 28.3765 20.7859 26.5833C20.7859 24.79 19.327 23.3311 17.5337 23.3311Z"
+              />
+            </svg>
+            <p class="text-text-primary inline">Solution</p>
+          </button>
+          <button id="reset" class="bg-background-secondary rounded-lg p-2">
+            <svg
+              class="fill-current text-text-primary h-5 w-5 inline"
+              viewBox="0 0 32 32"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5337 0C6.95257 0 0 6.95257 0 15.5337C0 24.1148 6.95257 31.0673 15.5337 31.0673C24.1148 31.0673 31.0673 24.1148 31.0673 15.5337C31.0673 6.95257 24.1148 0 15.5337 0ZM23.1502 19.6112C23.4446 19.9056 23.4446 20.3817 23.1502 20.6761L20.6698 23.1502C20.3754 23.4446 19.8994 23.4446 19.605 23.1502L15.5337 19.0413L11.4561 23.1502C11.1617 23.4446 10.6857 23.4446 10.3913 23.1502L7.91716 20.6698C7.62277 20.3754 7.62277 19.8994 7.91716 19.605L12.0261 15.5337L7.91716 11.4561C7.62277 11.1617 7.62277 10.6857 7.91716 10.3913L10.3975 7.91089C10.6919 7.6165 11.168 7.6165 11.4623 7.91089L15.5337 12.0261L19.6112 7.91716C19.9056 7.62277 20.3817 7.62277 20.6761 7.91716L23.1564 10.3975C23.4508 10.6919 23.4508 11.168 23.1564 11.4623L19.0413 15.5337L23.1502 19.6112Z"
+              />
+            </svg>
+            <p class="text-text-primary inline">Reset</p>
+          </button>
+          <button id="continue" class="bg-disabled-background rounded-lg p-2">
+            <svg
+              class="fill-current text-disabled-text h-5 w-5 inline"
+              viewBox="0 0 30 30"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14.5337 0C22.5623 0 29.0673 6.50499 29.0673 14.5337C29.0673 22.5623 22.5623 29.0673 14.5337 29.0673C6.50499 29.0673 0 22.5623 0 14.5337C0 6.50499 6.50499 0 14.5337 0ZM12.84 8.41546L17.2646 12.6583H6.56359C5.78416 12.6583 5.15711 13.2854 5.15711 14.0648V15.0025C5.15711 15.7819 5.78416 16.409 6.56359 16.409H17.2646L12.84 20.6519C12.2716 21.1969 12.2598 22.1052 12.8166 22.662L13.4612 23.3007C14.0121 23.8516 14.9029 23.8516 15.4479 23.3007L23.2246 15.5299C23.7754 14.979 23.7754 14.0883 23.2246 13.5433L15.4479 5.76072C14.897 5.20985 14.0062 5.20985 13.4612 5.76072L12.8166 6.3995C12.2598 6.96209 12.2716 7.87045 12.84 8.41546Z"
+              />
+            </svg>
+            <p class="text-disabled-text inline">Continue</p>
+          </button>
+        </section>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index 6c4bfb2..ea81704 100644
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -2,7 +2,28 @@
 export default {
   content: ['./index.html', './src/**/*.{vue,js}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        background: {
+          primary: '#282A33',
+          secondary: '#131313',
+          DEFAULT: '#010103',
+        },
+        text: {
+          primary: '#39FF14',
+          secondary: '#ADADB5',
+          line: '#4A4B63',
+          DEFAULT: '#FFFFFF',
+        },
+        disabled: {
+          background: '#454552',
+          text: '#6A6B8C',
+        },
+        border: {
+          DEFAULT: '#526B4E',
+        },
+      },
+    },
   },
   plugins: [],
 }