diff --git a/index.html b/index.html
index 735c35d..0febf3e 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="css/bootstrap.min.css">
+  <link rel="manifest" href="manifest.json">
   <title>Hello, world!</title>
 </head>
 
diff --git a/index.js b/index.js
index e0d663b..9d3a16b 100644
--- a/index.js
+++ b/index.js
@@ -1,77 +1,77 @@
-const vids = [
-  {
-    url: "http://media.w3.org/2010/05/bunny/trailer.mp4",
-    thumbnail: "images/gitea.png",
-    name: "Big Buck Bunny",
-    subtitle: "Short Desc",
-  },
-  {
-    url: "http://media.w3.org/2010/05/sintel/trailer.mp4",
-    thumbnail: "images/gitea.png",
-    name: "Sintel",
-    subtitle: "Test",
-  },
-  {
-    url: "https://vdo.mwit.ac.th/vod/_definst_/mp4:02_description/2561/05/30-05-61/VOD/30-05-61-AV4.mp4/playlist.m3u8",
-    thumbnail: "images/gitea.png",
-    name: "HLS",
-    subtitle: "Should use hls.js",
-  },
-  {
-    url: "http://vjs.zencdn.net/v/oceans.mp4",
-    thumbnail: "images/gitea.png",
-    name: "DisneyOcean1",
-    subtitle: "555",
-  },
-  {
-    url: "http://media.w3.org/2010/05/video/movie_300.mp4",
-    thumbnail: "images/gitea.png",
-    name: "5min",
-    subtitle: "Just countdown",
-  }
-];
-
-const videoListContainer = document.querySelector('#videoListContainer');
-const titleText = document.querySelector('#titleText');
-const vidPlayer = document.querySelector('#vidPlayer');
-var hls = null;
-
-const createVidList = () => {
-  var vidElements = "";
-
-  vids.forEach((item, index) => {
-    vidElements += `<div class="media" onclick='changeVid(${index})'>
-      <img class="mr-3" src="${item.thumbnail}" alt="thumbnail" height="96">
-      <div class="media-body">
-        <h5 class="mt-0">${item.name}</h5>
-        ${item.subtitle}
-      </div>
-    </div>
-    `;
-  });
-
-  videoListContainer.innerHTML = vidElements;
-}
-
-const changeVid = index => {
-    titleText.innerHTML = vids[index].name;
-
-    if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) &&
-     Hls.isSupported() &&
-     vids[index].url.endsWith(".m3u8")) {
-      if(!hls==null) {
-        hls.detachMedia(vidPlayer);
-      }
-      hls = new Hls();
-      hls.loadSource(vids[index].url);
-      hls.attachMedia(vidPlayer);
-      hls.on(Hls.Events.MANIFEST_PARSED,()=>{video.play();});
-    }
-    else {
-      vidPlayer.src = vids[index].url;
-      vidPlayer.play();
-    }
-}
-
-createVidList();
-changeVid(0);
+const vids = [
+  {
+    url: "http://media.w3.org/2010/05/bunny/trailer.mp4",
+    thumbnail: "images/gitea.png",
+    name: "Big Buck Bunny",
+    subtitle: "Short Desc",
+  },
+  {
+    url: "http://media.w3.org/2010/05/sintel/trailer.mp4",
+    thumbnail: "images/gitea.png",
+    name: "Sintel",
+    subtitle: "Test",
+  },
+  {
+    url: "https://vdo.mwit.ac.th/vod/_definst_/mp4:02_description/2561/05/30-05-61/VOD/30-05-61-AV4.mp4/playlist.m3u8",
+    thumbnail: "images/gitea.png",
+    name: "HLS",
+    subtitle: "Should use hls.js",
+  },
+  {
+    url: "http://vjs.zencdn.net/v/oceans.mp4",
+    thumbnail: "images/gitea.png",
+    name: "DisneyOcean1",
+    subtitle: "555",
+  },
+  {
+    url: "http://media.w3.org/2010/05/video/movie_300.mp4",
+    thumbnail: "images/gitea.png",
+    name: "5min",
+    subtitle: "Just countdown",
+  }
+];
+
+const videoListContainer = document.querySelector('#videoListContainer');
+const titleText = document.querySelector('#titleText');
+const vidPlayer = document.querySelector('#vidPlayer');
+var hls = null;
+
+const createVidList = () => {
+  var vidElements = "";
+
+  vids.forEach((item, index) => {
+    vidElements += `<div class="media" onclick='changeVid(${index})'>
+      <img class="mr-3" src="${item.thumbnail}" alt="thumbnail" height="96">
+      <div class="media-body">
+        <h5 class="mt-0">${item.name}</h5>
+        ${item.subtitle}
+      </div>
+    </div>
+    `;
+  });
+
+  videoListContainer.innerHTML = vidElements;
+}
+
+const changeVid = index => {
+    titleText.innerHTML = vids[index].name;
+
+    if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) &&
+     Hls.isSupported() &&
+     vids[index].url.endsWith(".m3u8")) {
+      if(!hls==null) {
+        hls.detachMedia(vidPlayer);
+      }
+      hls = new Hls();
+      hls.loadSource(vids[index].url);
+      hls.attachMedia(vidPlayer);
+      hls.on(Hls.Events.MANIFEST_PARSED,()=>{video.play();});
+    }
+    else {
+      vidPlayer.src = vids[index].url;
+      vidPlayer.play();
+    }
+}
+
+createVidList();
+changeVid(0);
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..1ce475f
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Videos",
+  "name": "Video Players",
+  "icons": [
+    {
+      "src":"images/gitea.png",
+      "sizes": "143x143",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "",
+  "background_color": "#FFF",
+  "Theme_color": "#536878",
+  "display": "standalone"
+}