diff --git a/README.md b/README.md
index 44c3047..31e9502 100644
--- a/README.md
+++ b/README.md
@@ -83,6 +83,10 @@ $ python3 -m app
 [![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/odysseusmax/tg-index/tree/master)    [![Run on Repl.it](https://repl.it/badge/github/odysseusmax/tg-index)](https://repl.it/github/odysseusmax/tg-index)
 
 
+## API
+
+Here's the api description. [API](https://github.com/odysseusmax/tg-index/wiki/API)
+
 ## Contributions
 
 Contributions are welcome.
diff --git a/app/templates/home.html b/app/templates/home.html
index acfe6b1..0a827da 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -6,9 +6,9 @@
     <div class="mx-auto my-2 p-2 w-full">
         <div class="block p-4 md:flex md:flex-wrap md:justify-center w-full text-center break-words">
             {% for chat in chats %}
-                <a title="{{chat.name}}" href="/{{chat.id}}" class="flex flex-col justify-around w-full min-h-full md:w-2/5 lg:w-1/5 rounded my-2 md:mx-1 shadow-md hover:shadow-lg hover:border hover:border-blue-300 hover:bg-blue-100">
+                <a title="{{chat.name}}" href="/{{chat.page_id}}" class="flex flex-col justify-around w-full min-h-full md:w-2/5 lg:w-1/5 rounded my-2 md:mx-1 shadow-md hover:shadow-lg hover:border hover:border-blue-300 hover:bg-blue-100">
                 
-                    <img src="/{{chat.id}}/logo?big=1" class="w-full rounded-full ">
+                    <img src="/{{chat.page_id}}/logo?big=1" class="w-full rounded-full ">
                     <div class="p-4 rounded">{{chat.name}}</div>
                 
                 </a>
diff --git a/app/templates/index.html b/app/templates/index.html
index 11e7c80..d728131 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -19,7 +19,7 @@
                 <div class="mx-auto my-2 w-full px-4">
                     <div class="block md:flex md:flex-wrap md:justify-center text-center break-all">
                     {% for item in item_list %}
-                        <a title="{% if item.media %} {{item.mime_type}} | {{item.size}} {% else %} Text message {% endif %}" href="{{item.url}}" class="flex flex-col items-center justify-center w-full min-h-full md:w-1/5 lg:w-1/6 rounded my-4 md:mx-1 shadow-md hover:shadow-lg hover:bg-blue-100 hover:border hover:border-blue-200">
+                        <a title="{% if item.media %} {{item.mime_type}} | {{item.human_size}} {% else %} Text message {% endif %}" href="{{item.url}}" class="flex flex-col items-center justify-center w-full min-h-full md:w-1/5 lg:w-1/6 rounded my-4 md:mx-1 shadow-md hover:shadow-lg hover:bg-blue-100 hover:border hover:border-blue-200">
                     
                             {% if item.media %}
                                 <img src="{{item.thumbnail}}" class="w-full rounded">
@@ -48,15 +48,6 @@
                     {% endif %}
                 </div>
                 
-                <script>
-                    const date_elements = document.getElementsByName('date');
-                    date_elements.forEach((item) => {
-                        let dataDate = item.getAttribute("data-date");
-                        let date = new Date(dataDate);
-                        item.innerHTML = date.toLocaleString()
-                    });
-                </script>
-            
             {% else %}
                 
                 <p class="my-4 text-center text-2xl md:text-3xl lg:text-4xl xl:text-5xl">
diff --git a/app/templates/info.html b/app/templates/info.html
index fab71c0..8c88817 100644
--- a/app/templates/info.html
+++ b/app/templates/info.html
@@ -9,15 +9,15 @@
                         
                         <div class="mx-auto w-full md:w-3/4 lg:w-2/5 p-2">
                             {% if media.image %}
-                                <img class="mx-auto rounded" src="../{{id}}/thumbnail" alt="{{name}}">
+                                <img class="mx-auto rounded" src="../{{file_id}}/thumbnail" alt="{{name}}">
                             {% elif media.video %}
                                 <div id="video-warning" class="mx-auto p-4 bg-gray-600 text-gray-300 rounded border text-center hidden break-words">
                                     <p> Video {{name}} could not be played!</p>
                                 </div>
                                 
                                 <div id="my-video-wrapper"> 
-                                    <video id="my-video-player" class="mx-auto rounded" controls poster="../{{id}}/thumbnail">
-                                        <source src="../{{id}}/download" type="video/mp4" />
+                                    <video id="my-video-player" class="mx-auto rounded" controls poster="../{{file_id}}/thumbnail">
+                                        <source src="../{{file_id}}/download" type="video/mp4" />
                                     </video>
                                 </div>
                                 
@@ -52,9 +52,9 @@
                                 </div>
                                 
                                 <div id="my-audio-wrapper">
-                                    <img class="mx-auto rounded w-full" src="../{{id}}/thumbnail" alt="{{name}}">
+                                    <img class="mx-auto rounded w-full" src="../{{file_id}}/thumbnail" alt="{{name}}">
                                     <audio class="mx-auto" controls muted>
-                                        <source src="../{{id}}/download" type="audio/mpeg" />
+                                        <source src="../{{file_id}}/download" type="audio/mpeg" />
                                     </audio>
                                 </div>
                                 <script>
@@ -94,7 +94,7 @@
                         
                         <div class="text-center text-white">
                     
-                            <a class="rounded p-3 bg-indigo-500 hover:bg-indigo-700 shadow-lg" href="../{{id}}/download">Download Now! ({{ size }})</a>
+                            <a class="rounded p-3 bg-indigo-500 hover:bg-indigo-700 shadow-lg" href="../{{file_id}}/download">Download Now! ({{ human_size }})</a>
                         
                         </div>
                     {% else %}
diff --git a/app/views.py b/app/views.py
index 5d44388..ff93c47 100644
--- a/app/views.py
+++ b/app/views.py
@@ -26,7 +26,7 @@ class Views:
         chats = []
         for chat in chat_ids:
             chats.append({
-                'id': chat['alias_id'],
+                'page_id': chat['alias_id'],
                 'name': chat['title'],
                 'url': req.rel_url.path + f"/{chat['alias_id']}"
             })
@@ -99,7 +99,8 @@ class Views:
                     mime_type=m.file.mime_type,
                     insight = get_file_name(m)[:100],
                     date = str(m.date),
-                    size=get_human_size(m.file.size),
+                    size=m.file.size,
+                    human_size=get_human_size(m.file.size),
                     url=req.rel_url.path + f"/{m.id}/view"
                 )
             elif m.message:
@@ -109,7 +110,8 @@ class Views:
                     mime_type='text/plain',
                     insight = m.raw_text[:100],
                     date = str(m.date),
-                    size=get_human_size(len(m.raw_text)),
+                    size=len(m.raw_text),
+                    human_size=get_human_size(len(m.raw_text)),
                     url=req.rel_url.path + f"/{m.id}/view"
                 )
             if entry:
@@ -188,7 +190,8 @@ class Views:
                     reply_btns.append(btns)
         if message.file and not isinstance(message.media, types.MessageMediaWebPage):
             file_name = get_file_name(message)
-            file_size = get_human_size(message.file.size)
+            file_size = message.file.size
+            human_file_size = get_human_size(file_size)
             media = {
                 'type':message.file.mime_type
             }
@@ -209,12 +212,13 @@ class Views:
             return_val = {
                 'found': True,
                 'name': file_name,
-                'id': file_id,
+                'file_id': file_id,
                 'size': file_size,
+                'human_size': human_file_size,
                 'media': media,
                 'caption_html': caption_html,
                 'caption': caption,
-                'title': f"Download | {file_name} | {file_size}",
+                'title': f"Download | {file_name} | {human_file_size}",
                 'reply_btns': reply_btns,
                 'thumbnail': f"/{alias_id}/{file_id}/thumbnail",
                 'download_url': f"/{alias_id}/{file_id}/download",