diff --git a/toloka2MediaServer/main_logic.py b/toloka2MediaServer/main_logic.py
index e0b70e8..7f7fdf1 100644
--- a/toloka2MediaServer/main_logic.py
+++ b/toloka2MediaServer/main_logic.py
@@ -87,4 +87,12 @@ def search_torrents(args, logger, operation_result=None):
 def get_torrent(args, logger, operation_result=None):
     torrent = toloka.get_torrent(f"{toloka.toloka_url}/{args}")
     
-    return torrent
\ No newline at end of file
+    return torrent
+
+def add_torrent(args, logger, operation_result=None):
+    #TBD placeholder for now
+    tolokaTorrentFile = toloka.download_torrent(f"{toloka.toloka_url}/{args}")
+    
+    client.add_torrent(torrents=tolokaTorrentFile, category="", tags=[""], is_paused=False, download_dir="")
+    
+    return ""
\ No newline at end of file
diff --git a/toloka2MediaServerWeb/app.py b/toloka2MediaServerWeb/app.py
index 8e02a12..e9293f5 100644
--- a/toloka2MediaServerWeb/app.py
+++ b/toloka2MediaServerWeb/app.py
@@ -106,6 +106,21 @@ def get_torrent():
     else:
         return []
 
+@app.route('/add_torrent', methods=['GET'])
+def add_torrent():
+    # Extract the search parameter from the URL query string
+    id = request.args.get('id', default=None, type=str)
+    
+    if id:
+        # Convert data to JSON format
+        toloka2MediaServer.main_logic.add_torrent(id, logger)
+        
+
+        # Return the JSON response
+        return [], 200
+    else:
+        return []
+
 @app.route('/add_release', methods=['POST'])
 def add_release():
     # Process the URL to add release
diff --git a/toloka2MediaServerWeb/static/titles.js b/toloka2MediaServerWeb/static/titles.js
index 80a4663..a0fee7b 100644
--- a/toloka2MediaServerWeb/static/titles.js
+++ b/toloka2MediaServerWeb/static/titles.js
@@ -24,7 +24,7 @@ $(document).ready(function() {
             }, visible: true },
             { data: 'hash', title: 'Hash' },
             { data: 'meta', title: 'Meta' },
-            { data: 'publish_date', title: 'Publish Date' },
+            { data: 'publish_date', title: 'Publish Date', visible: true  },
             { data: 'release_group', title: 'Release Group' },
             { data: 'season_number', title: 'Season Number' },
             { data: null, title: 'Actions', orderable: false, render: function(data, type, row) {
@@ -35,9 +35,10 @@ $(document).ready(function() {
                 `;
             }, visible: true }
         ],
+        order: [[9, 'des']],
         columnDefs: [
             { targets: '_all', visible: false },
-            { targets: [0, 1, 6, 12], visible: true }
+            { targets: [0, 1, 6, 9, 12], visible: true }
         ],
         layout: {
             topStart: {
@@ -57,4 +58,41 @@ $(document).ready(function() {
     window.refreshTable = function() {
         table.ajax.reload();
     };
-});
\ No newline at end of file
+
+    function extractNumbers() {
+        const input = document.getElementById('numberInput').value;
+        const numbers = input.split('').map((ch) => (ch >= '0' && ch <= '9') ? ch : ' ').join('').trim().split(/\s+/);
+        const resultList = document.getElementById('result');
+        resultList.innerHTML = '';
+    
+        numbers.forEach((number, index) => {
+            if (number !== '') {
+                const item = document.createElement('div');
+                item.className = 'list-group-item';
+                item.textContent = `Index: ${index+1}, Number: ${number}`;
+                item.addEventListener('click', () => {
+                    document.getElementById('index').value = index + 1;
+                    resultList.style.display = 'none';
+                });
+                resultList.appendChild(item);
+            }
+        });
+    
+        if (numbers.join('').length === 0) {
+            resultList.style.display = 'none';
+        } else {
+            resultList.style.display = 'block';
+        }
+    }
+    // Get the input element
+    const numberInput = document.querySelector('#numberInput');
+    
+    // Event listener for input event
+    numberInput.addEventListener('input', extractNumbers);
+    
+    // Event listener for change event
+    numberInput.addEventListener('change', extractNumbers);
+    
+});
+
+
diff --git a/toloka2MediaServerWeb/static/toloka.js b/toloka2MediaServerWeb/static/toloka.js
index 00c2c90..f289f35 100644
--- a/toloka2MediaServerWeb/static/toloka.js
+++ b/toloka2MediaServerWeb/static/toloka.js
@@ -6,7 +6,8 @@ $(document).ready(function () {
     $('.d-flex[role="search"]').on('submit', function (e) {
         e.preventDefault();
         var query = $(this).find('input[type="search"]').val();
-        
+        const bsOffcanvas = new bootstrap.Offcanvas('#offcanvasTopSearchResults')
+        bsOffcanvas.toggle()
         if (!initialized) {
             // Initialize DataTable
             table = $('#torrentTable').DataTable({
@@ -43,9 +44,9 @@ $(document).ready(function () {
                     { data: "verify", title: 'verify', visible: false },
                     { data: null, title: 'Actions', orderable: false, render: function(data, type, row) {
                         return `
-                            <button class="btn btn-outline-warning" disabled><span class="bi bi-download" aria-hidden="true"></span><span class="visually-hidden" role="status">Direct Download</span></button>
-                            <button class="btn btn-outline-warning" disabled><span class="bi bi-cloud-download" aria-hidden="true"></span><span class="visually-hidden" role="status">Add to client</span></button>
-                            <button class="btn btn-outline-primary" disabled><span class="bi bi-chevron-double-left" aria-hidden="true"></span><span class="visually-hidden" role="status">Copy Values</span></button>
+                            <button class="btn btn-outline-warning action-download"><span class="bi bi-download" aria-hidden="true"></span><span class="visually-hidden" role="status">Direct Download</span></button>
+                            <button class="btn btn-outline-warning action-add"><span class="bi bi-cloud-download" aria-hidden="true"></span><span class="visually-hidden" role="status">Add to client</span></button>
+                            <button class="btn btn-outline-primary action-copy"><span class="bi bi-chevron-double-left" aria-hidden="true"></span><span class="visually-hidden" role="status">Copy Values</span></button>
                         `;
                     }, visible: true }
                 ],
@@ -57,10 +58,7 @@ $(document).ready(function () {
                             {
                                 extend: 'colvis',
                                 postfixButtons: ['colvisRestore']
-                            },
-                            { text: 'Refresh', action: function ( e, dt, node, config ) {
-                                dt.ajax.reload();
-                            }}
+                            }
                         ]
                     }
                 }
@@ -84,17 +82,38 @@ $(document).ready(function () {
                         success: function (detail) {
                             var childData = formatDetail(detail, data);
                             row.child(childData).show();
+                            tr.data('childData', detail);
                         }
                     });
                 }
             });
 
+            $('#torrentTable tbody').on('click', '.action-download, .action-copy, .action-add', function () {
+                var tr = $(this).closest('tr');
+                var row = table.row(tr);
+                var data = row.data();
+                var childData = tr.data('childData');
+            
+                switch (true) {
+                    case $(this).hasClass('action-download'):
+                        performDownloadAction(data, childData);
+                        break;
+                    case $(this).hasClass('action-copy'):
+                        performCopyAction(data, childData);
+                        break;
+                    case $(this).hasClass('action-add'):
+                        performAddAction(data, childData);
+                        break;
+                }
+            });
+
             initialized = true;
             $('#torrentTable').show();
         } else {
             table.ajax.url('/get_torrents?query=' + query).load();
         }
     });
+    
     function formatLoading() {
         return '<div class="d-flex justify-content-center">' +
                '<div class="spinner-border" role="status">' +
@@ -120,7 +139,7 @@ $(document).ready(function () {
                     <div class="card">
                         <div class="row g-0">
                             <div class="col-md-2">
-                                <img src="${detail.thumbnail}" class="card-img-top" alt="...">
+                                <img src="${detail.img}" class="card-img-top" alt="...">
                                 <div class="d-grid gap-2">
                                     <button type="button" class="btn btn-primary position-relative" disabled>
                                         ${detail.size}
@@ -151,4 +170,57 @@ $(document).ready(function () {
             </div>
         `;
     }
+
+    const bsOffcanvas = new bootstrap.Offcanvas('#offcanvasTopSearchResults')
+
+    function performAddAction(rowData, childData) {
+        console.log('Add action triggered', rowData, childData);
+
+        $.ajax({
+            url: '/add_torrent?id=' + rowData.torrent_url,
+            type: 'GET',
+            success: function (detail) {
+                console.log('Not implemented YET', detail);
+            }
+        });
+
+        document.querySelector('#offcanvasTopSearchResults > div.offcanvas-header > button').click()
+    }
+    
+    function performCopyAction(rowData, childData) {
+        console.log('Copy action triggered', rowData, childData);
+        bsOffcanvas.hide()
+
+        document.querySelector('#title').value = rowData.name;
+        document.querySelector('#url').value  = `https://toloka.to/${rowData.url}`;
+        if(childData != null)
+            {
+                var input = document.querySelector('#numberInput');
+                input.value = childData.files[0].file_name
+
+                const event = new Event('input', {
+                    bubbles: true,
+                    cancelable: true,
+                });
+                input.dispatchEvent(event);
+            }
+        document.querySelector('#offcanvasTopSearchResults > div.offcanvas-header > button').click()
+    }
+    
+    function performDownloadAction(rowData, childData) {
+        console.log('Download action triggered', rowData, childData);
+        var url = `https://toloka.to/${rowData.torrent_url}`
+
+        downloadFile(url);
+        document.querySelector('#offcanvasTopSearchResults > div.offcanvas-header > button').click()
+    }
+
+    function downloadFile(url) {
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = true;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
 });
\ No newline at end of file
diff --git a/toloka2MediaServerWeb/templates/index.html b/toloka2MediaServerWeb/templates/index.html
index 8eb70fb..e43aee4 100644
--- a/toloka2MediaServerWeb/templates/index.html
+++ b/toloka2MediaServerWeb/templates/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Toloka2MediaServer</title>
+    <title>Toloka2MediaServer v2024.06.01.810</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@@ -15,7 +15,6 @@
     <link href="https://cdn.datatables.net/v/bs5/dt-2.0.8/b-3.0.2/b-colvis-3.0.2/r-3.0.2/sc-2.4.3/sl-2.0.3/datatables.min.css" rel="stylesheet">
     <script src="https://cdn.datatables.net/v/bs5/dt-2.0.8/b-3.0.2/b-colvis-3.0.2/r-3.0.2/sc-2.4.3/sl-2.0.3/datatables.min.js"></script>
     <script src="static/titles.js"></script>
-
     <script src="static/toloka.js"></script>
 </head>
 <body class="d-flex flex-column h-100">
@@ -132,45 +131,10 @@
                         <div class="card-body">
                             <h5 class="card-title">Get Index</h5>
                             <label for="numberInput">Enter Text:</label>
-                            <input type="text" class="form-control" id="numberInput" oninput="extractNumbers()" placeholder="[Inari Dub] Arknights Touin Kiro S01 E09 (1080) (UA).mkv">
+                            <input type="text" class="form-control" id="numberInput" placeholder="[Inari Dub] Arknights Touin Kiro S01 E09 (1080) (UA).mkv">
                             <div id="result" class="result-list list-group"></div>
                         </div>
                     </div>
-                    <script>
-                        function extractNumbers() {
-                            const input = document.getElementById('numberInput').value;
-                            const numbers = input.split('').map((ch) => (ch >= '0' && ch <= '9') ? ch : ' ').join('').trim().split(/\s+/);
-                            const resultList = document.getElementById('result');
-                            resultList.innerHTML = '';
-                
-                            numbers.forEach((number, index) => {
-                                if (number !== '') {
-                                    const item = document.createElement('div');
-                                    item.className = 'list-group-item';
-                                    item.textContent = `Index: ${index+1}, Number: ${number}`;
-                                    resultList.appendChild(item);
-                                }
-                            });
-                
-                            if (numbers.join('').length === 0) {
-                                resultList.style.display = 'none';
-                            } else {
-                                resultList.style.display = 'block';
-                            }
-                        }
-    
-                        document.addEventListener("DOMContentLoaded", function() {
-                const forms = document.querySelectorAll('form');
-    
-                forms.forEach(form => {
-                    form.addEventListener('submit', function(event) {
-                        document.querySelectorAll('form button').forEach(button => {
-                            button.disabled = true;
-                        });
-                    });
-                });
-            });
-                    </script>
                 </div>
                 <!-- Section 1 -->
                 <div class="col-md-12">
@@ -250,14 +214,6 @@ <h5 class="card-title">Update by codename</h5>
         <!-- Right Side content -->
         <div class="col-md-8">
             <div class="row">
-                <div class="col-md-12 torrentTable">
-                    <div class="card ">
-                        <div class="card-body">
-                            <h5 class="card-title">Search Results</h5>
-                            <table id="torrentTable" class="table table-striped" style="width:100%; display:none;"></table>
-                        </div>
-                    </div>
-                </div>
                 <div class="col-md-12">
                     {% if output  %}
         <div class="card alert {{ 'alert-success' if output.response_code == 'SUCCESS' else 'alert-danger' if output.response_code == 'FAILURE' else 'alert-warning' }}" >
@@ -353,6 +309,17 @@ <h5 class="card-title">Added Titles</h5>
 
 </div>
 
+<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTopSearchResults" aria-labelledby="offcanvasTopSearchResultsLabel" data-bs-backdrop="static" style="height: 90vh;"> 
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title" id="offcanvasTopSearchResultsLabel">Search Results</h5>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body">
+        <table id="torrentTable" class="table table-striped" style="width:100%; display:none;"></table>
+    </div>
+  </div>
+  
+
 </main>
     <footer class="footer mt-auto py-3 bg-body-tertiary">
         <div class="container">