diff --git a/src/assets/img/hero.svg b/src/assets/img/hero.svg
new file mode 100644
index 0000000..d62e31e
--- /dev/null
+++ b/src/assets/img/hero.svg
@@ -0,0 +1,42 @@
+<svg width="1920" height="500" viewBox="0 0 1920 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_145_3)">
+<circle cx="1295.5" cy="204.5" r="38" stroke="#177BD7"/>
+<circle cx="1629" cy="294" r="43.5" stroke="#177BD7"/>
+<circle cx="1040" cy="84" r="43.5" stroke="#177BD7"/>
+<circle cx="1027.5" cy="178.5" r="12" stroke="#177BD7"/>
+<circle cx="1167.5" cy="190.5" r="12" stroke="#177BD7"/>
+<circle cx="1441.5" cy="252.5" r="12" stroke="#177BD7"/>
+<circle cx="1415.5" cy="312.5" r="7" stroke="#177BD7"/>
+<circle cx="1313.5" cy="317.5" r="12" stroke="#177BD7"/>
+<circle cx="1047.5" cy="267.5" r="7" stroke="#177BD7"/>
+<circle cx="1174.5" cy="257.5" r="7" stroke="#177BD7"/>
+<circle cx="1507.5" cy="359.5" r="7" stroke="#177BD7"/>
+<circle cx="1820.5" cy="377.5" r="7" stroke="#177BD7"/>
+<circle cx="1772.5" cy="328.5" r="12" stroke="#177BD7"/>
+<circle cx="1913.5" cy="366.5" r="12" stroke="#177BD7"/>
+<ellipse cx="2179" cy="-73.5" rx="1226" ry="403.5" fill="url(#paint0_linear_145_3)"/>
+<ellipse cx="2065.52" cy="-29.5852" rx="1226" ry="403.5" transform="rotate(3.01447 2065.52 -29.5852)" fill="url(#paint1_linear_145_3)" fill-opacity="0.2"/>
+<path d="M3209.94 153.947C3184.67 375.357 2629.73 426.281 1957 349.5C1284.27 272.719 748.486 97.3068 773.756 -124.103C799.026 -345.512 1364.87 -462.756 2037.6 -385.975C2710.34 -309.194 3235.21 -67.4621 3209.94 153.947Z" fill="url(#paint2_linear_145_3)" fill-opacity="0.2"/>
+<line x1="1286.41" y1="85.4142" x2="1230.41" y2="141.414" stroke="white" stroke-opacity="0.39" stroke-width="4"/>
+<line x1="1705.41" y1="101.414" x2="1678.41" y2="128.414" stroke="white" stroke-opacity="0.39" stroke-width="4"/>
+<line x1="1613.41" y1="-12.5858" x2="1542.41" y2="58.4142" stroke="white" stroke-opacity="0.39" stroke-width="4"/>
+<circle cx="1624.5" cy="165.5" r="12" stroke="white" stroke-opacity="0.46"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_145_3" x1="953" y1="99" x2="3405" y2="-100" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1867C0"/>
+<stop offset="1" stop-color="#17A9F6"/>
+</linearGradient>
+<linearGradient id="paint1_linear_145_3" x1="839.523" y1="142.915" x2="3291.52" y2="-56.0852" gradientUnits="userSpaceOnUse">
+<stop stop-color="#17A9F6"/>
+<stop offset="0.54569" stop-color="#177BD7"/>
+</linearGradient>
+<linearGradient id="paint2_linear_145_3" x1="754.195" y1="47.2846" x2="3212.94" y2="127.618" gradientUnits="userSpaceOnUse">
+<stop stop-color="#17A9F6"/>
+<stop offset="0.54569" stop-color="#177BD7"/>
+</linearGradient>
+<clipPath id="clip0_145_3">
+<rect width="1920" height="500" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/views/HomeView.vue b/src/components/views/HomeView.vue
index cdf9f1f..16bb073 100644
--- a/src/components/views/HomeView.vue
+++ b/src/components/views/HomeView.vue
@@ -2,9 +2,9 @@
 </script>
 
 <template>
-  <v-responsive class="border rounded mx-auto" max-width="1080">
+  <v-responsive class="rounded mx-auto" max-width="1600px">
     <v-app>
-      <v-app-bar flat>
+      <v-app-bar>
         <v-container class="mx-auto d-flex align-center justify-start">
           <v-btn text="HOME" to="/" :active="false"></v-btn>
           <v-btn text="INPUT" to="/input" :active="false"></v-btn>
@@ -23,7 +23,6 @@
             </v-list>
           </v-menu>
         </v-container>
-
       </v-app-bar>
       <v-main class="px-10">
         <router-view/>
diff --git a/src/components/views/IntroView.vue b/src/components/views/IntroView.vue
index 2af1eab..5d36f29 100644
--- a/src/components/views/IntroView.vue
+++ b/src/components/views/IntroView.vue
@@ -1,10 +1,64 @@
 <script setup lang="ts">
+import {ref} from "vue";
+
+const slogans = [
+    "TRY OUR SERVICES FOR FREE",
+    "EARN MONEY FROM EACH SHORT LINKS"
+];
+const show = ref("");
+let c = 0, i = 0, showIndicator = ref(true);
+const showTimeout = 10000;
+showSlogan(0)
+setInterval(() => {
+  i++
+  show.value = ""
+  c = 0;
+  showSlogan(i % slogans.length)
+}, showTimeout)
+
+function showSlogan(i: number) {
+  const slogan = slogans[i]
+  const timeout =  2000 / slogan.length
+  const handle = setInterval(() => {
+    show.value = slogan.substring(0, c % slogan.length + 1);
+    c++;
+    if (c >= slogan.length) {
+      clearInterval(handle)
+      const indicatorHandle = setInterval(() => {
+        showIndicator.value = !showIndicator.value;
+      }, 500)
+      setTimeout(() => {
+        clearInterval(indicatorHandle)
+        showIndicator.value = true;
+      }, showTimeout - 2000)
+    }
+  }, timeout)
+}
 </script>
 
 <template>
-  intro
+  <v-img class="intro-view-banner" src="/src/assets/img/hero.svg">
+    <span class="intro-slogan"> &gt;&nbsp;{{ show }}<span
+        :class="{'intro-slogan-hidden': !showIndicator}">_</span> </span>
+  </v-img>
 </template>
 
 <style scoped>
+.intro-view-banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: #555555;
+}
+.intro-view-banner * {
+  transition: all ease .1s;
+}
+.intro-view-banner span.intro-slogan {
+  font-size: 3em;
+}
 
+.intro-slogan-hidden {
+  visibility: hidden;
+}
 </style>
\ No newline at end of file