diff --git a/eslint.config.mjs b/eslint.config.mjs
index be5f17b..5cc6c88 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -10,6 +10,7 @@ export default [
       globals: {
         ...globals.browser,
         lucide: "readonly",
+        Peer: "readonly",
       },
     },
   },
diff --git a/index.html b/index.html
index 56e8a51..f685d2a 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,11 @@
 <head>
   <meta charset="UTF-8" />
   <!-- TODO: 1. rename app -->
-  <title>Change this you moron</title>
+  <title>File Whizz</title>
   <link rel="stylesheet" href="style.css" />
   <link rel="stylesheet" href="material-colors.css" />
   <script src="https://unpkg.com/lucide@0"></script>
+  <script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script>
   <script type="importmap">
       {
         "imports": {
@@ -31,11 +32,27 @@
   <main id="app" style="display: none">
     <!-- TODO: 1. rename app -->
     <h1>
-      <i icon="package"></i>
-      Vue-Boilerplate
+      <i icon="file-volume-2"></i>
+      File Whizz
     </h1>
     <br />
-    <p v-html="content"></p>
+    <div>
+      <label>Local ID</label><br>
+      <input readonly :value="localId" /><br><br>
+      <label>Remote ID</label><br>
+      <input v-model="remoteId" @change="connect">
+      <br>
+      <br>
+      Initialized: <b>{{ peer ? 'OK' : '...'}}</b><br>
+      Opened: <b>{{ localId ? 'OK' : '...'}}</b><br>
+      Connection: <b>{{ connection ? 'OK' : '...'}}</b><br>
+      File data: <b>{{ data ? 'OK' : '...'}}</b>
+      <br>
+      <br>
+      <input type="file" @change="fileChange" />
+      <br>
+      <input type="submit" @click.prevent="start" :disabled="!data || !remoteId" />
+    </div>
     <br />
     <small class="footer">
       <i icon="at-sign"></i>&nbsp;<a href="https://github.com/klemek" target="_blank">klemek</a>
diff --git a/main.js b/main.js
index 43f2d8e..990e608 100644
--- a/main.js
+++ b/main.js
@@ -12,22 +12,28 @@ const utils = {
   },
 };
 
+const MAX_CHUNK_SIZE = 1024 * 1024; // 1024 KB
+
 const app = createApp({
   data() {
     return {
-      content:
-        "Fill this page with <i>whatever</i> you're going to develop.<br><b>Then enjoy!</b>",
+      peer: null,
+      localId: null,
+      remoteId: null,
+      connection: null, // TODO multiple connections
+      data: null, // TODO multiple file
+      streamEnqueue: null,
+      streamClose: null,
     };
   },
-  computed: {
-    currentYear() {
-      return new Date().getFullYear();
-    },
-  },
+  computed: {},
   watch: {},
   updated() {
     utils.updateIcons();
   },
+  beforeMount() {
+    this.initApp();
+  },
   mounted() {
     setTimeout(this.showApp);
     utils.updateIcons();
@@ -36,6 +42,120 @@ const app = createApp({
     showApp() {
       document.getElementById("app").setAttribute("style", "");
     },
+    connect() {
+      if (this.remoteId) {
+        this.connection = this.peer.connect(this.remoteId);
+      }
+    },
+    initPeer() {
+      this.peer = new Peer({
+        config: {
+          iceServers: [{ urls: ["stun:stun.l.google.com:19302"] }],
+        },
+      });
+      this.peer.on("open", this.peerOpen);
+      this.peer.on("connection", this.peerConnection);
+      this.peer.on("close", this.peerClose);
+      this.peer.on("disconnected", this.peerDisconnected);
+      this.peer.on("error", this.peerError);
+    },
+    peerOpen(id) {
+      this.localId = id;
+    },
+    peerConnection(conn) {
+      this.connection = conn;
+      this.remoteId = conn.peer;
+    },
+    peerClose() {
+      this.peer = null;
+      setTimeout(this.initPeer);
+    },
+    peerDisconnected() {
+      this.peer.reconnect();
+    },
+    peerError(err) {
+      // TODO handle error
+    },
+    connData(data) {
+      switch (data.type) {
+        case "start":
+          ReadableStream({
+            start(ctrl) {
+              this.streamEnqueue = (chunk) => ctrl.enqueue(chunk);
+              this.streamClose = () => ctrl.close();
+            },
+          });
+          break;
+        case "chunk":
+          if (this.streamEnqueue) {
+            this.streamEnqueue(data.bytes);
+          }
+          break;
+        case "end":
+          if (this.streamClose) {
+            this.streamClose();
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    connOpen() {
+      // TODO handle conn open
+    },
+    connClose() {
+      this.connection = null;
+      // TODO handle conn close
+    },
+    connError() {
+      // TODO handle error
+    },
+    fileChange(event) {
+      console.log(event.target.files[0]);
+      const file = event.target.files[0]; // TODO multiple files
+      if (!file) {
+        return;
+      }
+      this.data = null;
+      const reader = new FileReader();
+      reader.onload = () => {
+        this.data = reader.result;
+      };
+      reader.onerror = (err) => {
+        console.error(err);
+      };
+      reader.onloadstart = () => {
+        console.log("reading");
+      };
+      reader.onloadend = () => {
+        console.log("read");
+      };
+      reader.readAsArrayBuffer(file); // TODO check ArrayBuffer.prototype.maxByteLength
+    },
+    start() {
+      this.connection.send({
+        type: "start",
+      });
+      for (
+        let index = 0;
+        index < this.data.byteLength;
+        index += MAX_CHUNK_SIZE
+      ) {
+        this.connection.send({
+          type: "chunk",
+          bytes: this.data.slice(
+            index * MAX_CHUNK_SIZE,
+            Math.min(this.data.byteLength, (index + 1) * MAX_CHUNK_SIZE),
+          ),
+        });
+      }
+      this.connection.send({
+        type: "end",
+      });
+    },
+    initApp() {
+      this.initPeer();
+    },
   },
 });
 
diff --git a/style.css b/style.css
index 89eb138..1f25cc9 100644
--- a/style.css
+++ b/style.css
@@ -212,3 +212,7 @@ h6 .lucide {
 .footer {
   opacity: 50%;
 }
+
+input {
+  width: 100%;
+}
