diff --git a/python/ccdb/provider.py b/python/ccdb/provider.py
index a52772f..c170a1f 100644
--- a/python/ccdb/provider.py
+++ b/python/ccdb/provider.py
@@ -297,6 +297,12 @@ def create_directory(self, new_dir_name, parent_dir_or_path, comment=""):
 
             return directory
 
+    def get_directory_by_id(self, dir_id):
+        return self.session.query(Directory).filter(Directory.id == dir_id).one()
+
+    def get_type_table_by_id(self, table_id):
+        return self.session.query(TypeTable).filter(TypeTable.id == table_id).one()
+
     # @brief Updates directory
     #
     # @warning in current realization, if operation succeeded
diff --git a/python/ccdb/webgui/__init__.py b/python/ccdb/webgui/__init__.py
index e89ffd2..b9efa03 100644
--- a/python/ccdb/webgui/__init__.py
+++ b/python/ccdb/webgui/__init__.py
@@ -1,7 +1,7 @@
 import ccdb
 from ccdb.model import User
 from ccdb.path_utils import parse_request, ParseRequestResult
-from flask import Flask, g, render_template, url_for
+from flask import Flask, g, render_template, url_for, jsonify
 
 from python.ccdb.errors import ObjectIsNotFoundInDbError
 
@@ -128,6 +128,25 @@ def directory_tree():
 
         return render_template("simple_tree.html", html_tree=html_tree)
 
+    @app.route('/get-dir-info/<int:dir_id>')
+    def get_dir_info(dir_id):
+        db: ccdb.AlchemyProvider = g.db
+        try:
+            directory = db.get_directory_by_id(dir_id)
+            return render_template('objects_dir_info.html', directory=directory)
+        except ObjectIsNotFoundInDbError:
+            return jsonify({"error": "Directory not found"}), 404
+
+
+    @app.route('/get-table-info/<int:table_id>')
+    def get_table_info(table_id):
+        db: ccdb.AlchemyProvider = g.db
+        try:
+            table = db.get_type_table_by_id(table_id)
+            return render_template('objects_table_info.html', table=table)
+        except ObjectIsNotFoundInDbError:
+            return jsonify({"error": "Table not found"}), 404
+
     @app.route('/vars')
     def variations():
         # Get ccdb Alchemy provider from flask global state 'g'
@@ -288,6 +307,9 @@ def download_request():
 
             return result
 
+
+
+
     # THIS IS FOR FUTURE
     # ====================================================================
     # from ccdb.webgui.data_timeline import bp as time_line_bp
diff --git a/python/ccdb/webgui/templates/objects_dir_info.html b/python/ccdb/webgui/templates/objects_dir_info.html
new file mode 100644
index 0000000..5cb8699
--- /dev/null
+++ b/python/ccdb/webgui/templates/objects_dir_info.html
@@ -0,0 +1,45 @@
+{% macro modal_directory_info(directory) %}
+<div class="modal fade" id="directoryInfoModal" tabindex="-1" aria-labelledby="directoryInfoModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-scrollable modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="directoryInfoModalLabel">{{ directory.name }}</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <table class="table">
+          <tbody>
+            <tr>
+              <th scope="row">DB ID</th>
+              <td>{{ directory.id }}</td>
+            </tr>
+            <tr>
+              <th scope="row">Full path</th>
+              <td>{{ directory.path }}</td>
+            </tr>
+            <tr>
+              <th scope="row">Created</th>
+              <td>{{ directory.created.strftime('%Y-%m-%d %H:%M:%S') }}</td>
+            </tr>
+            <tr>
+              <th scope="row">Modified</th>
+              <td>{{ directory.modified.strftime('%Y-%m-%d %H:%M:%S') }}</td>
+            </tr>
+            <tr>
+              <th scope="row">Author</th>
+              <td>{{ directory.author_id }}</td>
+            </tr>
+            <tr>
+              <th scope="row">Comment</th>
+              <td>{{ directory.comment }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+{% endmacro %}
diff --git a/python/ccdb/webgui/templates/objects_table_info.html b/python/ccdb/webgui/templates/objects_table_info.html
new file mode 100644
index 0000000..c9e5852
--- /dev/null
+++ b/python/ccdb/webgui/templates/objects_table_info.html
@@ -0,0 +1,13 @@
+@require(id, name, path, created, modified, author, comment)
+
+<span class="file"><a href="versions?table=@path" class="table_link">@name</a>&nbsp;&nbsp;<a class="tree_link object_more_info" rel="Table @name">?</a></span>
+<div style="display: none">
+    <table>
+        <tr style="color: gray"><td style="width:auto">DB ID:</td><td style="width: 100%">:&nbsp;&nbsp;&nbsp;@id</td></tr>
+        <tr><td style="font-weight: bolder">Full path </td><td>:&nbsp;&nbsp;&nbsp; @path</td></tr>
+        <tr><td>Created   </td><td>:&nbsp;&nbsp;&nbsp; @created</td></tr>
+        <tr><td>Modified  </td><td>:&nbsp;&nbsp;&nbsp; @modified</td></tr>
+        <tr><td>Author    </td><td>:&nbsp;&nbsp;&nbsp; @author</td></tr>
+        <tr><td>Comment   </td><td>:&nbsp;&nbsp;&nbsp; @comment</td></tr>
+    </table>
+</div>
\ No newline at end of file
diff --git a/python/ccdb/webgui/templates/simple_tree.html b/python/ccdb/webgui/templates/simple_tree.html
index 1dadbe2..646e1f8 100644
--- a/python/ccdb/webgui/templates/simple_tree.html
+++ b/python/ccdb/webgui/templates/simple_tree.html
@@ -126,44 +126,53 @@ <h1 class="text-center my-4">{% block title %}Tables{% endblock %}</h1>
   </div>
 </div>
 
-<div class="modal" id="infoModal" style="display:none;">
-      <div class="modal-content">
-        <span class="close" onclick="closeModal()">&times;</span>
-        <div id="modal-body"></div>
+<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="infoModalLabel">Information</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
       </div>
+      <div class="modal-body" id="modal-body">
+
+      </div>
+    </div>
+  </div>
 </div>
 
 
 <script type="text/javascript">
 
 $(document).on('click', '.btn-icon', function() {
-    var button = $(this);
-    if (button.closest('li').has('a').length > 0) {
-        var tableId = button.closest('li').find('a').attr('href').split('/')[2]; // Предположим, что URL структурирован таким образом
-        showTableInfo(tableId);
-    } else {
-        var dirId = button.data('dir-id');
-        showDirInfo(dirId);
-    }
-});
-
-function showDirInfo(dirId) {
-  fetch(`/get-dir-info/${dirId}`)
-    .then(response => response.text())
-    .then(html => {
-      document.getElementById('modal-body').innerHTML = html;
-      document.getElementById('infoModal').style.display = 'block';
+        var button = $(this);
+        if (button.closest('li').has('ul').length > 0) {
+            var dirId = button.closest('li').data('dir-id');
+            showDirInfo(dirId);
+        } else {
+            var tableId = button.closest('li').find('a').attr('data-table-id');
+            showTableInfo(tableId);
+        }
     });
-}
 
-function showTableInfo(tableId) {
-  fetch(`/get-table-info/${tableId}`)
-    .then(response => response.text())
-    .then(html => {
-      document.getElementById('modal-body').innerHTML = html;
-      document.getElementById('infoModal').style.display = 'block';
-    });
-}
+    function showDirInfo(dirId) {
+        fetch(`/get-dir-info/${dirId}`)
+            .then(response => response.text())
+            .then(html => {
+                $('#modal-body').html(html);
+                $('#infoModal').modal('show');
+            });
+    }
+
+    function showTableInfo(tableId) {
+        fetch(`/get-table-info/${tableId}`)
+            .then(response => response.text())
+            .then(html => {
+                $('#modal-body').html(html);
+                $('#infoModal').modal('show');
+            });
+    }
 
 function closeModal() {
   document.getElementById('infoModal').style.display = 'none';