diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 644a2ba..2a7f36e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,30 +2,15 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Adaptivity + more assets">
-      <change afterPath="$PROJECT_DIR$/src/assets/images/anton_ton.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/images/my_name_is.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/images/personal_page.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/images/send_by_name.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/images/tg_nft.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/assets/images/tondns_nft.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/assets/images/usage.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/DarkLayout.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/DomainBar.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/Get.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/getting_ton_domain.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/headers/getting_ton_domain.svg" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/i-know.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/headers/i-know.svg" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/ton_bottom.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/icons/ton_bottom.svg" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/ton_right.png" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/ton_right.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/icons/ton_right.svg" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/ton_top.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/icons/ton_top.svg" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/tondns.png" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/tonweb.png" beforeDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/tonweb_duck.png" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/images/tonweb_duck.png" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/WhiteLayout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/WhiteLayout.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/IKnow.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/IKnow.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/Landing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Landing.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/views/TonDns.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonDns.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/TonWeb.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonWeb.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -91,7 +76,7 @@
       <workItem from="1670839496719" duration="10862000" />
       <workItem from="1670927344373" duration="29000" />
       <workItem from="1670927391338" duration="2277000" />
-      <workItem from="1671024025708" duration="1539000" />
+      <workItem from="1671024025708" duration="5450000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -107,7 +92,14 @@
       <option name="project" value="LOCAL" />
       <updated>1670847897937</updated>
     </task>
-    <option name="localTasksCounter" value="3" />
+    <task id="LOCAL-00003" summary="Adaptivity + more assets">
+      <created>1671026238851</created>
+      <option name="number" value="00003" />
+      <option name="presentableId" value="LOCAL-00003" />
+      <option name="project" value="LOCAL" />
+      <updated>1671026238851</updated>
+    </task>
+    <option name="localTasksCounter" value="4" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
diff --git a/package-lock.json b/package-lock.json
index 65eaabd..af2d814 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "bulma": "^0.9.4",
         "sass": "^1.56.2",
         "vue": "^3.2.45",
+        "vue-contenteditable": "^4.1.0",
         "vue-router": "^4.1.6"
       },
       "devDependencies": {
@@ -2557,6 +2558,14 @@
         "@vue/shared": "3.2.45"
       }
     },
+    "node_modules/vue-contenteditable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vue-contenteditable/-/vue-contenteditable-4.1.0.tgz",
+      "integrity": "sha512-PCQD8JNYt6lbocYvquHB0p3SWd0QGtHNydfbO4Ma3wOMiUTwjJiCyBv3vJRf7WvTkuLObn66GqEYUurfBLfrRQ==",
+      "peerDependencies": {
+        "vue": "^3.2.25"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
@@ -4309,6 +4318,12 @@
         "@vue/shared": "3.2.45"
       }
     },
+    "vue-contenteditable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vue-contenteditable/-/vue-contenteditable-4.1.0.tgz",
+      "integrity": "sha512-PCQD8JNYt6lbocYvquHB0p3SWd0QGtHNydfbO4Ma3wOMiUTwjJiCyBv3vJRf7WvTkuLObn66GqEYUurfBLfrRQ==",
+      "requires": {}
+    },
     "vue-router": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
diff --git a/package.json b/package.json
index 9c38dda..21591a2 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "bulma": "^0.9.4",
     "sass": "^1.56.2",
     "vue": "^3.2.45",
+    "vue-contenteditable": "^4.1.0",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
diff --git a/src/assets/images/usage.png b/src/assets/images/usage.png
new file mode 100644
index 0000000..4f216bb
Binary files /dev/null and b/src/assets/images/usage.png differ
diff --git a/src/components/DarkLayout.vue b/src/components/DarkLayout.vue
new file mode 100644
index 0000000..79750b6
--- /dev/null
+++ b/src/components/DarkLayout.vue
@@ -0,0 +1,44 @@
+<template>
+  <main style="width: 100vw; min-height: 100vh; height: 100%;" id="dark_body">
+    <Header/>
+    <div class="center">
+      <div class="content">
+        <slot></slot>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import Header from "../components/Header.vue";
+
+export default {
+  name: "DarkLayout",
+  components: {Header}
+}
+</script>
+
+<style scoped>
+#dark_body {
+  background-color: #282e46;
+}
+
+.content {
+  padding: 2.5rem 32px;
+  text-align: center;
+  display: inline-block;
+  font-size: 1.6rem;
+  color: white;
+  min-height: 50vh;
+  min-width: 16rem;
+  margin: 0.5rem 3rem;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  place-items: center;
+  flex-direction: column;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/DomainBar.vue b/src/components/DomainBar.vue
new file mode 100644
index 0000000..cf74426
--- /dev/null
+++ b/src/components/DomainBar.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="domain-bar">
+    <div style="display: flex" class="prompt-cont">
+      <contenteditable :contenteditable="editable" tag="div" class="prompt" v-model="val" :no-html="true" @returned="search()"></contenteditable>
+      <div class="post-prompt">{{ postprompt }}</div>
+    </div>
+    <div class="search" v-if="has_button" @click="search()">Search</div>
+  </div>
+</template>
+
+<script>
+import contenteditable from 'vue-contenteditable';
+
+export default {
+  name: "DomainBar",
+  components: {contenteditable},
+  props: {
+    postprompt: {
+      type: String,
+      default: ".ton"
+    },
+    has_button: {
+      type: Boolean,
+      default: true
+    },
+    value: {
+      type: String,
+      default: "example"
+    },
+    editable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      val: this.value
+    }
+  },
+  methods: {
+    search() {
+      this.$emit("search", this.val);
+    }
+  },
+  watch: {
+    value: function (val) {
+      this.val = val;
+    },
+    val: function (val) {
+      this.$emit("input", val);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.domain-bar {
+  border-radius: 1rem;
+  width: 30rem;
+  min-height: 5rem;
+  padding: 0 0.5rem;
+  background-color: #4e5a88;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  place-items: center;
+}
+
+/* flex container with vertical centering */
+.prompt-cont {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  place-items: center;
+}
+
+/* the bar is narrower on mobile (90% of the screen) */
+@media only screen and (max-width: 800px) {
+  .domain-bar {
+    width: 90vw;
+    /* allow multiple rows with 0.5 spacing */
+    flex-wrap: wrap;
+
+  }
+
+}
+
+.prompt {
+  border-radius: 0.5rem;
+  min-width: 40%;
+  height: 3rem;
+  background-color: #363e5e;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  place-items: center;
+  color: white;
+  font-size: 1.5rem;
+  font-weight: 500;
+  padding: 0 1rem;
+  outline: none;
+  user-select: none;
+  cursor: text;
+  margin-right: 0.4rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+/* #e36464 search button with #363e5e text */
+.search {
+  border-radius: 0.5rem;
+  height: 3rem;
+  background-color: #e36464;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  place-items: center;
+  color: #363e5e;
+  font-size: 1.3rem;
+  font-weight: 500;
+  padding: 0 1rem;
+  cursor: pointer;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 4569662..9bbfee0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,30 +1,35 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import {createRouter, createWebHistory} from 'vue-router'
 import Landing from '../views/Landing.vue'
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: Landing
-    },
-    {
-      path: '/tonweb',
-      name: 'tonweb',
-      component: () => import('../views/TonWeb.vue')
-    },
-    {
-      path: '/i-know',
-      name: 'IKnow',
-      component: () => import('../views/IKnow.vue')
-    },
-    {
-      path: '/tondns',
-      name: 'tondns',
-      component: () => import('../views/TonDns.vue')
-    }
-  ]
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: Landing
+        },
+        {
+            path: '/tonweb',
+            name: 'tonweb',
+            component: () => import('../views/TonWeb.vue')
+        },
+        {
+            path: '/i-know',
+            name: 'IKnow',
+            component: () => import('../views/IKnow.vue')
+        },
+        {
+            path: '/tondns',
+            name: 'tondns',
+            component: () => import('../views/TonDns.vue')
+        },
+        {
+            path: '/get',
+            name: 'get',
+            component: () => import('../views/Get.vue')
+        }
+    ]
 })
 
 export default router
diff --git a/src/views/Get.vue b/src/views/Get.vue
new file mode 100644
index 0000000..6c5b1fd
--- /dev/null
+++ b/src/views/Get.vue
@@ -0,0 +1,18 @@
+<template>
+  <DarkLayout>
+    <DomainBar/>
+  </DarkLayout>
+</template>
+
+<script>
+import DarkLayout from "../components/DarkLayout.vue";
+import DomainBar from "../components/DomainBar.vue";
+export default {
+  name: "Get",
+  components: {DomainBar, DarkLayout}
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/TonDns.vue b/src/views/TonDns.vue
index ae2c3da..a3a10bd 100644
--- a/src/views/TonDns.vue
+++ b/src/views/TonDns.vue
@@ -4,18 +4,21 @@
       <img src="@/assets/tondns.svg" style="height: 100%" alt="TON DNS"/>
     </template>
     <template v-slot:content>
-      <div class="columns-3" style="display: flex; columns: 3; justify-content: center; align-items: center">
-        <div>
-        </div>
+      <div style="justify-content: center; align-items: center">
         <div>
           <p>TON domains — .ton and .t.me — are your names in the TON world.<br/>
             They can be used to host a website or to transfer money.<br/>
             You can host a TON website for your personal brand.</p>
         </div>
+        <div class="columns-3 images">
+          <img class="img" src="@/assets/images/usage.png" alt="Usage"/>
+          <img class="img" src="@/assets/images/my_name_is.png" alt="lame"/>
+          <img class="img" src="@/assets/images/anton_ton.png" alt="cool"/>
+        </div>
       </div>
     </template>
     <template v-slot:buttons>
-      <router-link to="/get_tondon">
+      <router-link to="/get">
         <button class="b blue wide">
           <span>Omg, can I get one?</span>
           <img src="@/assets/icons/ton_right.svg" alt="Next"/>
@@ -35,5 +38,14 @@ export default {
 </script>
 
 <style scoped>
-
+.img {
+  width: 25%;
+  margin: 0 1rem;
+}
+/* Fix width and not height on mobile */
+@media only screen and (max-width: 800px) {
+  .img {
+    width: 75vw;
+  }
+}
 </style>
\ No newline at end of file