diff --git a/basicswap/static/js/bids_available.js b/basicswap/static/js/bids_available.js
index 921918e..b3b7e48 100644
--- a/basicswap/static/js/bids_available.js
+++ b/basicswap/static/js/bids_available.js
@@ -189,7 +189,7 @@ const formatAddress = (address, displayLength = 15) => {
 const getTimeStrokeColor = (expireTime) => {
     const now = Math.floor(Date.now() / 1000);
     const timeLeft = expireTime - now;
-    
+
     if (timeLeft <= 300) return '#9CA3AF'; // 5 minutes or less
     if (timeLeft <= 1800) return '#3B82F6'; // 30 minutes or less
     return '#10B981'; // More than 30 minutes
@@ -781,7 +781,7 @@ async function updateBidsTable(options = {}) {
         }
 
         const totalPages = Math.ceil(state.jsonData.length / PAGE_SIZE);
-        
+
         if (resetPage && state.jsonData.length > 0) {
             state.currentPage = 1;
         }
@@ -861,7 +861,7 @@ if (elements.refreshBidsButton) {
         updateLoadingState(true);
 
         await new Promise(resolve => setTimeout(resolve, 500));
-        
+
         try {
             await updateBidsTable({ resetPage: true, refreshData: true });
         } finally {
diff --git a/basicswap/static/js/bids_sentreceived.js b/basicswap/static/js/bids_sentreceived.js
index 924aaf2..61e1522 100644
--- a/basicswap/static/js/bids_sentreceived.js
+++ b/basicswap/static/js/bids_sentreceived.js
@@ -192,7 +192,13 @@ const safeParseInt = (value) => {
     return isNaN(parsed) ? 0 : parsed;
 };
 
-const formatAddress = (address, displayLength = 15) => {
+const formatAddress = (address, displayLength = 20) => {
+    if (!address) return '';
+    if (address.length <= displayLength) return address;
+    return `${address.slice(8, displayLength)}...`;
+};
+
+const formatAddressSMSG = (address, displayLength = 14) => {
     if (!address) return '';
     if (address.length <= displayLength) return address;
     return `${address.slice(0, displayLength)}...`;
@@ -218,17 +224,17 @@ const getTimeStrokeColor = (expireTime) => {
 const getStatusClass = (status) => {
     switch (status) {
         case 'Completed':
-            return 'bg-green-100 text-green-800 dark:bg-green-500 dark:text-white';
+            return 'bg-green-300 text-black dark:bg-green-600 dark:text-white';
         case 'Expired':
-            return 'bg-gray-100 text-gray-800 dark:bg-gray-400 dark:text-white';
-        case 'Abandoned':
-            return 'bg-red-100 text-red-800 dark:bg-red-500 dark:text-white';
+            return 'bg-gray-200 text-black dark:bg-gray-400 dark:text-white';
+        case 'Error':
+            return 'bg-red-300 text-black dark:bg-red-600 dark:text-white';
         case 'Failed':
-            return 'bg-rose-100 text-rose-800 dark:bg-rose-500 dark:text-white';
+            return 'bg-red-300 text-black dark:bg-red-600 dark:text-white';
         case 'Failed, refunded':
-            return 'bg-gray-100 text-orange-800 dark:bg-gray-400 dark:text-red-500';
+            return 'bg-gray-200 text-black dark:bg-gray-400 dark:text-red-500';
         default:
-            return 'bg-blue-100 text-blue-800 dark:bg-blue-500 dark:text-white';
+            return 'bg-blue-300 text-black dark:bg-blue-500 dark:text-white';
     }
 };
 
@@ -274,10 +280,10 @@ function hasActiveFilters() {
     const hasNonDefaultCoinTo = coinToSelect && coinToSelect.value !== 'any';
     const hasNonDefaultExpired = withExpiredSelect && withExpiredSelect.value !== 'true';
 
-    return hasNonDefaultState || 
-           hasSearchQuery || 
-           hasNonDefaultCoinFrom || 
-           hasNonDefaultCoinTo || 
+    return hasNonDefaultState ||
+           hasSearchQuery ||
+           hasNonDefaultCoinFrom ||
+           hasNonDefaultCoinTo ||
            hasNonDefaultExpired;
 }
 
@@ -305,7 +311,7 @@ function filterAndSortData(bids) {
             const coinFromSelect = document.getElementById('coin_from');
             const selectedOption = coinFromSelect?.querySelector(`option[value="${state.filters.coin_from}"]`);
             const coinName = selectedOption?.textContent.trim();
-            
+
             if (coinName) {
                 const coinToMatch = state.currentTab === 'sent' ? bid.coin_from : bid.coin_to;
                 if (!coinMatches(coinToMatch, coinName)) {
@@ -318,7 +324,7 @@ function filterAndSortData(bids) {
             const coinToSelect = document.getElementById('coin_to');
             const selectedOption = coinToSelect?.querySelector(`option[value="${state.filters.coin_to}"]`);
             const coinName = selectedOption?.textContent.trim();
-            
+
             if (coinName) {
                 const coinToMatch = state.currentTab === 'sent' ? bid.coin_to : bid.coin_from;
                 if (!coinMatches(coinToMatch, coinName)) {
@@ -334,7 +340,7 @@ function filterAndSortData(bids) {
             const identity = IdentityManager.cache.get(bid.addr_from);
             const label = identity?.data?.label || '';
             const matchesLabel = label.toLowerCase().includes(searchStr);
-            
+
             if (!(matchesBidId || matchesIdentity || matchesLabel)) {
                 return false;
             }
@@ -358,10 +364,10 @@ function updateCoinFilterImages() {
 
     function updateButtonImage(select, button) {
         if (!select || !button) return;
-        
+
         const selectedOption = select.options[select.selectedIndex];
         const imagePath = selectedOption.getAttribute('data-image');
-        
+
         if (imagePath && select.value !== 'any') {
             button.style.backgroundImage = `url(${imagePath})`;
             button.style.backgroundSize = '25px';
@@ -385,7 +391,7 @@ const updateLoadingState = (isLoading) => {
         const refreshButton = elements[`refresh${type}Bids`];
         const refreshText = refreshButton?.querySelector(`#refresh${type}Text`);
         const refreshIcon = refreshButton?.querySelector('svg');
-        
+
         if (refreshButton) {
             refreshButton.disabled = isLoading;
             if (isLoading) {
@@ -431,7 +437,7 @@ const updateConnectionStatus = (status) => {
     };
 
     const config = statusConfig[status] || statusConfig.connected;
-    
+
     ['sent', 'received'].forEach(type => {
         const dot = elements[`statusDot${type.charAt(0).toUpperCase() + type.slice(1)}`];
         const text = elements[`statusText${type.charAt(0).toUpperCase() + type.slice(1)}`];
@@ -613,12 +619,12 @@ const createTableRow = async (bid) => {
     const identity = await IdentityManager.getIdentityData(bid.addr_from);
     const uniqueId = `${bid.bid_id}_${Date.now()}`;
     const timeColor = getTimeStrokeColor(bid.expire_at);
-    
+
     return `
         <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
             <!-- Time Column -->
-            <td class="py-3 px-6">
-                <div class="flex items-center">
+            <td class="py-3 pl-6 pr-3">
+                <div class="flex items-center min-w-max">
                     <svg class="w-5 h-5 mr-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="${timeColor}" stroke-linejoin="round">
                             <circle cx="12" cy="12" r="11"></circle>
@@ -629,58 +635,59 @@ const createTableRow = async (bid) => {
                 </div>
             </td>
 
-
             <!-- Details Column -->
-            <td class="py-3 px-6">
+            <td class="p-3 hidden lg:flex">
                 <div class="flex flex-col">
-                    <div class="flex items-center">
-                        <span class="text-xs font-medium mr-2">${state.currentTab === 'sent' ? 'Out' : 'In'}</span>
+                    <div class="flex items-center min-w-max">
                         <div class="relative" data-tooltip-target="tooltip-identity-${uniqueId}">
-                            <a href="/identity/${bid.addr_from}" class="text-xs">
-                                ${identity?.label || formatAddress(bid.addr_from)}
+                            <a href="/identity/${bid.addr_from}" class="text-xs font-mono">
+                                <span class="mr-2">
+                                    ${state.currentTab === 'sent' ? 'Out' : 'In'}
+                                </span>
+                                ${identity?.label || formatAddressSMSG(bid.addr_from)}
                             </a>
                         </div>
                     </div>
-                    <div class="text-xs opacity-75">
-                    <a href="/bid/${bid.bid_id}">
-                        Bid: ${formatAddress(bid.bid_id)}
-                   </a>
+                    <div class="font-mono text-xs opacity-75">
+                        <a href="/offer/${bid.offer_id}">
+                            Offer: ${formatAddress(bid.offer_id)}
+                        </a>
                     </div>
                 </div>
             </td>
 
             <!-- Send Coin Column -->
-            <td class="py-3 px-6">
-                <div class="flex items-center">
-                    <img class="w-6 h-6 mr-2" 
-                         src="/static/images/coins/${bid.coin_from.replace(' ', '-')}.png" 
-                         alt="${bid.coin_from}"
+            <td class="p-3">
+                <div class="flex items-center min-w-max">
+                    <img class="w-8 h-8 mr-2"
+                         src="/static/images/coins/${state.currentTab === 'sent' ? bid.coin_to.replace(' ', '-') : bid.coin_from.replace(' ', '-')}.png"
+                         alt="${state.currentTab === 'sent' ? bid.coin_to : bid.coin_from}"
                          onerror="this.src='/static/images/coins/default.png'">
                     <div>
-                        <div class="text-sm font-medium monospace">${bid.amount_from}</div>
-                        <div class="text-xs opacity-75 monospace">${bid.coin_from}</div>
+                        <div class="text-sm font-medium monospace">${state.currentTab === 'sent' ? bid.amount_to : bid.amount_from}</div>
+                        <div class="text-xs opacity-75 monospace">${state.currentTab === 'sent' ? bid.coin_to : bid.coin_from}</div>
                     </div>
                 </div>
             </td>
 
             <!-- Receive Coin Column -->
-            <td class="py-3 px-6">
-                <div class="flex items-center">
-                    <img class="w-6 h-6 mr-2" 
-                         src="/static/images/coins/${bid.coin_to.replace(' ', '-')}.png" 
-                         alt="${bid.coin_to}"
+            <td class="p-3">
+                <div class="flex items-center min-w-max">
+                    <img class="w-8 h-8 mr-2"
+                         src="/static/images/coins/${state.currentTab === 'sent' ? bid.coin_from.replace(' ', '-') : bid.coin_to.replace(' ', '-')}.png"
+                         alt="${state.currentTab === 'sent' ? bid.coin_from : bid.coin_to}"
                          onerror="this.src='/static/images/coins/default.png'">
                     <div>
-                        <div class="text-sm font-medium monospace">${bid.amount_to}</div>
-                        <div class="text-xs opacity-75 monospace">${bid.coin_to}</div>
+                        <div class="text-sm font-medium monospace">${state.currentTab === 'sent' ? bid.amount_from : bid.amount_to}</div>
+                        <div class="text-xs opacity-75 monospace">${state.currentTab === 'sent' ? bid.coin_from : bid.coin_to}</div>
                     </div>
                 </div>
             </td>
 
             <!-- Status Column -->
-            <td class="py-3 px-6">
-                <div class="relative" data-tooltip-target="tooltip-status-${uniqueId}">
-                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
+            <td class="p-3">
+                <div class="flex justify-center" data-tooltip-target="tooltip-status-${uniqueId}">
+                    <span class="w-full xl:w-4/5 flex bold justify-center items-center px-2.5 py-1 rounded-full text-xs font-medium
                                 ${getStatusClass(bid.bid_state)}">
                         ${bid.bid_state}
                     </span>
@@ -688,11 +695,13 @@ const createTableRow = async (bid) => {
             </td>
 
             <!-- Actions Column -->
-            <td class="py-3 px-6">
-                <a href="/bid/${bid.bid_id}" 
-                   class="inline-block w-24 py-2 px-3 text-center text-sm font-medium text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors">
-                    View Bid
-                </a>
+            <td class="py-3 pr-6 pl-3">
+                <div class="flex justify-center">
+                    <a href="/bid/${bid.bid_id}"
+                        class="inline-block w-24 py-2 px-3 text-center text-sm font-medium text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition-colors">
+                        View Bid
+                    </a>
+                </div>
             </td>
         </tr>
 
@@ -759,12 +768,12 @@ const updateTableContent = async (type) => {
 const initializeTooltips = () => {
     if (window.TooltipManager) {
         window.TooltipManager.cleanup();
-        
+
         const tooltipTriggers = document.querySelectorAll('[data-tooltip-target]');
         tooltipTriggers.forEach(trigger => {
             const targetId = trigger.getAttribute('data-tooltip-target');
             const tooltipContent = document.getElementById(targetId);
-            
+
             if (tooltipContent) {
                 window.TooltipManager.create(trigger, tooltipContent.innerHTML, {
                     placement: trigger.getAttribute('data-tooltip-placement') || 'top',
@@ -786,7 +795,7 @@ const fetchBids = async () => {
         const endpoint = state.currentTab === 'sent' ? '/json/sentbids' : '/json/bids';
         const withExpiredSelect = document.getElementById('with_expired');
         const includeExpired = withExpiredSelect ? withExpiredSelect.value === 'true' : true;
-        
+
         console.log('Fetching bids, include expired:', includeExpired);
 
         const response = await fetch(endpoint, {
@@ -814,7 +823,7 @@ const fetchBids = async () => {
         state.filters.with_expired = includeExpired;
 
         data = filterAndSortData(data);
-        
+
         return data;
     } catch (error) {
         console.error('Error in fetchBids:', error);
@@ -827,18 +836,18 @@ const updateBidsTable = async () => {
         console.log('Already loading, skipping update');
         return;
     }
-    
+
     try {
         console.log('Starting updateBidsTable for tab:', state.currentTab);
         console.log('Current filters:', state.filters);
-        
+
         state.isLoading = true;
         updateLoadingState(true);
 
         const bids = await fetchBids();
-        
+
         console.log('Fetched bids:', bids.length);
-        
+
         const filteredBids = bids.filter(bid => {
             // State filter
             if (state.filters.state !== -1) {
@@ -860,7 +869,7 @@ const updateBidsTable = async () => {
                 const coinFromSelect = document.getElementById('coin_from');
                 const selectedOption = coinFromSelect?.querySelector(`option[value="${state.filters.coin_from}"]`);
                 const coinName = selectedOption?.textContent.trim();
-                
+
                 if (coinName) {
                     const coinToMatch = state.currentTab === 'sent' ? bid.coin_from : bid.coin_to;
                     yourCoinMatch = coinMatches(coinToMatch, coinName);
@@ -876,7 +885,7 @@ const updateBidsTable = async () => {
                 const coinToSelect = document.getElementById('coin_to');
                 const selectedOption = coinToSelect?.querySelector(`option[value="${state.filters.coin_to}"]`);
                 const coinName = selectedOption?.textContent.trim();
-                
+
                 if (coinName) {
                     const coinToMatch = state.currentTab === 'sent' ? bid.coin_to : bid.coin_from;
                     theirCoinMatch = coinMatches(coinToMatch, coinName);
@@ -896,11 +905,11 @@ const updateBidsTable = async () => {
                 const searchStr = state.filters.searchQuery.toLowerCase();
                 const matchesBidId = bid.bid_id.toLowerCase().includes(searchStr);
                 const matchesIdentity = bid.addr_from?.toLowerCase().includes(searchStr);
-                
+
                 const identity = IdentityManager.cache.get(bid.addr_from);
                 const label = identity?.data?.label || '';
                 const matchesLabel = label.toLowerCase().includes(searchStr);
-                
+
                 if (!(matchesBidId || matchesIdentity || matchesLabel)) {
                     return false;
                 }
@@ -981,7 +990,7 @@ function handleSearch(event) {
     if (searchTimeout) {
         clearTimeout(searchTimeout);
     }
-    
+
     searchTimeout = setTimeout(() => {
         state.filters.searchQuery = event.target.value.toLowerCase();
         updateBidsTable();
@@ -1114,7 +1123,7 @@ function setupFilterEventListeners() {
             if (searchTimeout) {
                 clearTimeout(searchTimeout);
             }
-            
+
             searchTimeout = setTimeout(() => {
                 state.filters.searchQuery = event.target.value.toLowerCase();
                 updateBidsTable();
@@ -1178,7 +1187,7 @@ const setupEventListeners = () => {
                 elements.tabButtons.forEach(tab => {
                     const isSelected = tab.getAttribute('data-tabs-target') === targetId;
                     tab.setAttribute('aria-selected', isSelected);
-                    
+
                     if (isSelected) {
                         tab.classList.add('bg-gray-100', 'dark:bg-gray-600', 'text-gray-900', 'dark:text-white');
                         tab.classList.remove('hover:text-gray-600', 'hover:bg-gray-50', 'dark:hover:bg-gray-500');
@@ -1263,7 +1272,7 @@ const setupEventListeners = () => {
             const stateValue = parseInt(filterElements.stateSelect.value);
 
             state.filters.state = isNaN(stateValue) ? -1 : stateValue;
-            
+
             console.log('State filter changed:', {
                 selectedValue: filterElements.stateSelect.value,
                 parsedState: state.filters.state
@@ -1275,8 +1284,8 @@ const setupEventListeners = () => {
     }
 
     [
-        filterElements.sortBySelect, 
-        filterElements.sortDirSelect, 
+        filterElements.sortBySelect,
+        filterElements.sortDirSelect,
         filterElements.withExpiredSelect
     ].forEach(element => {
         if (element) {
@@ -1299,7 +1308,7 @@ const setupEventListeners = () => {
     document.addEventListener('change', (event) => {
         const target = event.target;
         const filterForm = document.querySelector('.flex.flex-wrap.justify-center');
-        
+
         if (filterForm && filterForm.contains(target)) {
             const formData = {
                 state: filterElements.stateSelect?.value,
@@ -1347,7 +1356,7 @@ const setupRefreshButtons = () => {
         if (refreshButton) {
             refreshButton.addEventListener('click', async () => {
                 const lowerType = type.toLowerCase();
-                
+
                 if (state.isRefreshing) {
                     console.log('Already refreshing, skipping');
                     return;
@@ -1416,7 +1425,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     WebSocketManager.initialize();
     setupEventListeners();
-    setupRefreshButtons();    
+    setupRefreshButtons();
     setupFilterEventListeners();
 
     updateClearFiltersButton();
diff --git a/basicswap/static/js/offers.js b/basicswap/static/js/offers.js
index 7f3b30e..9ec63ae 100644
--- a/basicswap/static/js/offers.js
+++ b/basicswap/static/js/offers.js
@@ -200,7 +200,7 @@ const WebSocketManager = {
         this.isPageHidden = false;
         this.lastVisibilityChange = Date.now();
         this.isIntentionallyClosed = false;
-        
+
         setTimeout(() => {
             this.priceUpdatePaused = false;
             if (!this.isConnected()) {
@@ -848,7 +848,7 @@ function continueInitialization() {
         listingLabel.textContent = isSentOffers ? 'Total Listings: ' : 'Network Listings: ';
     }
     //console.log('Initialization completed');
-    
+
 }
 
 function initializeTooltips() {
@@ -875,7 +875,7 @@ function filterAndSortData() {
 
    localStorage.setItem('offersTableSettings', JSON.stringify({
        coin_to: filters.coin_to,
-       coin_from: filters.coin_from, 
+       coin_from: filters.coin_from,
        status: filters.status,
        sent_from: filters.sent_from,
        sortColumn: currentSortColumn,
@@ -936,7 +936,7 @@ function filterAndSortData() {
        const calculateValue = offer => {
            const fromUSD = parseFloat(offer.amount_from) * getPrice(offer.coin_from);
            const toUSD = parseFloat(offer.amount_to) * getPrice(offer.coin_to);
-           return (isSentOffers || offer.is_own_offer) ? 
+           return (isSentOffers || offer.is_own_offer) ?
                ((toUSD / fromUSD) - 1) * 100 :
                ((fromUSD / toUSD) - 1) * 100;
        };
@@ -967,7 +967,7 @@ function filterAndSortData() {
            return currentSortDirection === 'desc' ? -comparison : comparison;
        });
    }
-   
+
    return filteredData;
 }
 
@@ -1081,7 +1081,7 @@ async function fetchLatestPrices() {
         const existingCache = CacheManager.get(PRICES_CACHE_KEY, true);
         const fallbackData = existingCache ? existingCache.value : null;
         const url = `${offersConfig.apiEndpoints.coinGecko}/simple/price?ids=bitcoin,bitcoin-cash,dash,dogecoin,decred,litecoin,particl,pivx,monero,zano,wownero,zcoin&vs_currencies=USD,BTC&api_key=${offersConfig.apiKeys.coinGecko}`;
-        
+
         const response = await fetch('/json/readurl', {
             method: 'POST',
             headers: {
@@ -1102,7 +1102,7 @@ async function fetchLatestPrices() {
         }
 
         const data = await response.json();
-        
+
         if (data.Error) {
             if (fallbackData) {
                 return fallbackData;
@@ -1177,7 +1177,7 @@ async function fetchOffers() {
 
         const data = await offersResponse.json();
         const processedData = Array.isArray(data) ? data : Object.values(data);
-        
+
         jsonData = formatInitialData(processedData);
         originalJsonData = [...jsonData];
 
@@ -2502,7 +2502,7 @@ if (refreshButton) {
                 const currentTime = Date.now();
                 const elapsedTime = currentTime - startTime;
                 const remainingTime = Math.ceil((REFRESH_COOLDOWN - elapsedTime) / 1000);
-                
+
                 if (remainingTime <= 0) {
                     clearInterval(countdownInterval);
                     refreshText.textContent = 'Refresh';
@@ -2527,7 +2527,7 @@ if (refreshButton) {
 
         try {
             const cachedPrices = CacheManager.get('prices_coingecko');
-            let previousPrices = cachedPrices ? cachedPrices.value : null;
+            const previousPrices = cachedPrices ? cachedPrices.value : null;
             CacheManager.clear();
             window.isManualRefresh = true;
             const endpoint = isSentOffers ? '/json/sentoffers' : '/json/offers';
@@ -2660,7 +2660,7 @@ function handleTableSort(columnIndex, header) {
     if (window.sortTimeout) {
         clearTimeout(window.sortTimeout);
     }
-    
+
     window.sortTimeout = setTimeout(() => {
         applyFilters();
     }, 100);
@@ -2719,7 +2719,7 @@ function loadSavedSettings() {
     const saved = localStorage.getItem('offersTableSettings');
     if (saved) {
         const settings = JSON.parse(saved);
-        
+
         ['coin_to', 'coin_from', 'status', 'sent_from'].forEach(id => {
             const element = document.getElementById(id);
             if (element && settings[id]) element.value = settings[id];
diff --git a/basicswap/templates/bids.html b/basicswap/templates/bids.html
index ea27b9f..29589be 100644
--- a/basicswap/templates/bids.html
+++ b/basicswap/templates/bids.html
@@ -1,9 +1,9 @@
 {% include 'header.html' %}
 {% from 'style.html' import breadcrumb_line_svg, page_back_svg, page_forwards_svg, filter_clear_svg, filter_apply_svg, circular_arrows_svg, input_arrow_down_svg, arrow_right_svg %}
 
-<div class="container mx-auto">
+<div class="xl:container mx-auto">
  <section class="py-3 px-4 mt-6">
-  <div class="lg:container mx-auto">
+  <div class="xl:container mx-auto">
    <div class="relative py-8 px-8 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
@@ -49,7 +49,10 @@
     <div class="flex flex-wrap justify-center -m-1.5">
      <div class="w-full md:w-auto p-1.5">
       <div class="relative">
-       <input type="text" id="searchInput" name="search"  autocomplete="off" placeholder="Search bid ID, offer ID, address or label..." class="hover:border-blue-500 dark:hover:bg-gray-50 text-gray-900 pl-4 pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-400 text-sm rounded-lg outline-none block w-96 p-2.5 focus:ring-blue-500 focus:border-blue-500 focus:ring-0 dark:focus:bg-gray-500 dark:focus:text-white">
+       <input type="text"
+           id="searchInput"
+           name="search"  autocomplete="off" placeholder="Search bid ID, offer ID, address or label..."
+           class="w-full md:w-auto hover:border-blue-500 dark:hover:bg-gray-50 text-gray-900 pl-4 pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-400 text-sm rounded-lg outline-none block w-96 p-2.5 focus:ring-blue-500 focus:border-blue-500 focus:ring-0 dark:focus:bg-gray-500 dark:focus:text-white">
        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
         <svg class="w-5 h-5 text-gray-500 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
@@ -162,42 +165,42 @@
  </section>
 
  <div id="bidstab">
-  <div class="rounded-lg px-6" id="sent" role="tabpanel" aria-labelledby="sent-tab">
+  <div class="rounded-lg lg:px-6" id="sent" role="tabpanel" aria-labelledby="sent-tab">
    <div id="sent-content">
-    <div class="lg:container mx-auto lg:px-0 px-6">
+    <div class="xl:container mx-auto lg:px-0">
      <div class="pt-0 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
       <div class="px-0">
        <div class="w-auto overflow-auto lg:overflow-hidden">
-        <table class="w-full min-w-max">
+        <table class="w-full lg:min-w-max">
          <thead class="uppercase">
           <tr class="text-left">
            <th class="p-0">
-            <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+            <div class="py-3 pl-16 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Date/Time</span>
             </div>
            </th>
-           <th class="p-0">
-            <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+           <th class="p-0 hidden lg:block">
+            <div class="p-3 bg-coolGray-200 dark:bg-gray-600">
              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
             </div>
            </th>
            <th class="p-0">
-            <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+            <div class="p-3 bg-coolGray-200 dark:bg-gray-600">
              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You Send</span>
             </div>
            </th>
            <th class="p-0">
-            <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+            <div class="p-3 bg-coolGray-200 dark:bg-gray-600">
              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You Receive</span>
             </div>
            </th>
            <th class="p-0">
-            <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+            <div class="p-3 text-center bg-coolGray-200 dark:bg-gray-600">
              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Status</span>
             </div>
            </th>
            <th class="p-0">
-            <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+            <div class="p-3 pr-6 text-center rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Actions</span>
             </div>
            </th>
@@ -252,42 +255,42 @@
   </div>
 
   <!-- Received Bids Tab -->
-  <div class="hidden rounded-lg px-6" id="received" role="tabpanel" aria-labelledby="received-tab">
+  <div class="hidden rounded-lg lg:px-6" id="received" role="tabpanel" aria-labelledby="received-tab">
    <div id="received-content">
-    <div class="lg:container mx-auto lg:px-0">
+    <div class="xl:container mx-auto lg:px-0">
      <div class="pt-0 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
       <div class="px-0">
        <div class="w-auto overflow-auto lg:overflow-hidden">
-        <table class="w-full min-w-max">
+        <table class="w-full lg:min-w-max">
          <thead class="uppercase">
           <tr class="text-left">
            <th class="p-0">
-            <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+            <div class="p-3 pl-16 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Date/Time</span>
             </div>
            </th>
            <th class="p-0">
-            <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+            <div class="p-3 bg-coolGray-200 dark:bg-gray-600">
              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
             </div>
            </th>
            <th class="p-0">
-            <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+            <div class="p-3 bg-coolGray-200 dark:bg-gray-600">
              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You Send</span>
             </div>
            </th>
            <th class="p-0">
-            <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+            <div class="p-3 bg-coolGray-200 dark:bg-gray-600">
              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You Receive</span>
             </div>
            </th>
            <th class="p-0">
-            <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+            <div class="p-3 text-center bg-coolGray-200 dark:bg-gray-600">
              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Status</span>
             </div>
            </th>
            <th class="p-0">
-            <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+            <div class="p-3 pr-6 text-center rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Actions</span>
             </div>
            </th>
diff --git a/basicswap/templates/offers.html b/basicswap/templates/offers.html
index baa71ee..b4afc97 100644
--- a/basicswap/templates/offers.html
+++ b/basicswap/templates/offers.html
@@ -137,7 +137,7 @@ function getWebSocketConfig() {
   </div>
 </section>
 
-<section class="py-4 px-3 flex flex-wrap overflow-hidden container-to-blur">
+<section class="py-4 px-3 flex-wrap overflow-hidden container-to-blur">
  <div class="lg:container mx-auto">
   <div class="flex flex-wrap justify-center lg:justify-start xl:justify-center" id="coin-container">
 {% set coin_data = {
@@ -335,37 +335,29 @@ function getWebSocketConfig() {
                     <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Details</span>
                   </div>
                 </th>
-                {% if sent_offers %}
                 <th class="p-0">
                   <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-left">
+                    {% if sent_offers %}
                     <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Max Recv</span>
-                  </div>
-                </th>
-                {% else %}
-                <th class="p-0">
-                  <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-left">
+                    {% else %}
                     <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Max Send</span>
+                    {% endif %}
                   </div>
                 </th>
-                {% endif %}
                 <th class="p-0">
                   <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-center">
                     <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Swap</span>
                   </div>
                 </th>
-                {% if sent_offers %}
                 <th class="p-0">
                   <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right">
+                    {% if sent_offers %}
                     <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold pr-2">Your Liq.</span>
-                  </div>
-                </th>
-                {% else %}
-                <th class="p-0">
-                  <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right">
+                    {% else %}
                     <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold pr-2">Max Recv</span>
+                    {% endif %}
                   </div>
                 </th>
-                {% endif %}
                 <th class="p-0" data-sortable="true" data-column-index="5">
                   <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 text-right flex items-center justify-end">
                     <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Rate</span>
@@ -377,6 +369,7 @@ function getWebSocketConfig() {
                     <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Market +/-</span>
                     <span class="sort-icon ml-1 text-gray-600 dark:text-gray-400" id="sort-icon-6">↓</span>
                   </div>
+                </th>
                 <th class="p-0">
                   <div class="py-3 px-4 bg-coolGray-200 dark:bg-gray-600 rounded-tr-xl">
                   <span class="text-sm text-gray-600 dark:text-gray-300 font-semibold">Trade</span>