diff --git a/dataedit/templates/dataedit/dataedit_tablelist.html b/dataedit/templates/dataedit/dataedit_tablelist.html
index 6251f1af5..96883e566 100644
--- a/dataedit/templates/dataedit/dataedit_tablelist.html
+++ b/dataedit/templates/dataedit/dataedit_tablelist.html
@@ -1,11 +1,298 @@
 {% extends "dataedit/filter.html" %}
 {% block title %} - {{schema}}{% endblock %}
 
+{% block after-head %}
+<style>
+    /* Improved Tab Navigation Styles */
+    .view-tabs-container {
+        margin-bottom: 2rem;
+        border-bottom: 1px solid #E3EAEF; /* $gray-200 */
+    }
+    
+    .view-tabs {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    
+    .view-tabs__item {
+        margin-right: 0.5rem;
+    }
+    
+    .view-tabs__link {
+        display: flex;
+        align-items: center;
+        padding: 0.75rem 1.25rem;
+        color: #708696; /* $gray-500 */
+        text-decoration: none;
+        border-bottom: 3px solid transparent;
+        font-weight: 600;
+        transition: all 0.2s ease;
+    }
+    
+    .view-tabs__link:hover {
+        color: #2972A6; /* $blue-500 */
+        border-bottom-color: #C1D9EB; /* $blue-200 */
+    }
+    
+    .view-tabs__link.active {
+        color: #2972A6; /* $blue-500 */
+        border-bottom-color: #2972A6; /* $blue-500 */
+    }
+    
+    .view-tabs__icon {
+        margin-right: 0.5rem;
+    }
+    
+    /* Modern Table Styles */
+    .modern-table-container {
+        border-radius: 0.5rem; /* $border-radius */
+        overflow: hidden;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        background-color: white;
+    }
+    
+    #tables {
+        width: 100%;
+        margin-bottom: 0;
+        color: #294456; /* $gray-700 */
+        border-collapse: separate;
+        border-spacing: 0;
+        border: none;
+    }
+    
+    #tables th {
+        padding: 1rem;
+        font-weight: 600;
+        border: none;
+        background-color: #2972A6; /* $blue-500 */
+        color: white;
+        text-transform: uppercase;
+        font-size: 0.85rem;
+        letter-spacing: 0.5px;
+    }
+    
+    #tables th:first-child {
+        border-top-left-radius: 0.5rem;
+    }
+    
+    #tables th:last-child {
+        border-top-right-radius: 0.5rem;
+    }
+    
+    #tables td {
+        padding: 1rem;
+        vertical-align: middle;
+        border: none;
+        border-top: 1px solid #F6F9FB; /* $gray-100 */
+    }
+    
+    #tables tbody tr {
+        cursor: pointer;
+        transition: background-color 0.2s, transform 0.1s;
+    }
+    
+    #tables tbody tr:hover {
+        background-color: #E5EFF6; /* $blue-100 */
+        transform: translateY(-1px);
+    }
+    
+    #tables tbody tr:active {
+        transform: translateY(0);
+    }
+    
+    /* Preserve existing tag styling */
+    .tag {
+        display: inline-block;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.4rem; /* $border-radius-sm */
+        font-size: 0.85rem;
+        margin-right: 0.5rem;
+        margin-bottom: 0.25rem;
+        text-decoration: none;
+    }
+    
+    /* Dataset Card Styles with improved spacing - Fixed horizontal scrollbar */
+    .card-container {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 0 -10px; /* Negative margin to offset column padding */
+        width: 100%;
+    }
+    
+    .card-column {
+        width: 50%;
+        padding: 0 10px;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+    }
+    
+    @media (max-width: 991px) {
+        .card-column {
+            width: 100%;
+        }
+    }
+    
+    .dataset-card {
+        transition: transform 0.2s, box-shadow 0.2s;
+        height: 100%;
+        border-radius: 0.5rem; /* $border-radius */
+        overflow: hidden;
+        border: none;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        background-color: white;
+    }
+    
+    .dataset-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+    }
+    
+    .dataset-header {
+        background-color: #E5EFF6; /* $blue-100 */
+        padding: 1rem;
+        border-bottom: 1px solid #E3EAEF; /* $gray-200 */
+    }
+    
+    .metadata-label {
+        font-weight: 600;
+        color: #294456; /* $gray-700 */
+        margin-bottom: 0.25rem;
+    }
+    
+    .metadata-value {
+        margin-bottom: 1rem;
+    }
+    
+    .license-badge {
+        display: inline-block;
+        padding: 0.25rem 0.5rem;
+        background-color: #EBFFF9; /* $green-100 */
+        color: #21A179; /* $green-500 */
+        border-radius: 0.4rem; /* $border-radius-sm */
+        font-size: 0.85rem;
+        margin-right: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    .keyword-badge {
+        display: inline-block;
+        padding: 0.25rem 0.5rem;
+        background-color: #E9F6FE; /* $cyan-100 */
+        color: #3FA0D7; /* $cyan-500 */
+        border-radius: 0.4rem; /* $border-radius-sm */
+        font-size: 0.85rem;
+        margin-right: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    .dataset-details {
+        display: none;
+        padding: 1rem;
+        background-color: #F6F9FB; /* $gray-100 */
+        border-top: 1px solid #E3EAEF; /* $gray-200 */
+    }
+    
+    .dataset-card.expanded .dataset-details {
+        display: block;
+    }
+    
+    .data-quality-indicator {
+        width: 100%;
+        height: 6px;
+        background-color: #E3EAEF; /* $gray-200 */
+        border-radius: 3px;
+        margin-top: 0.5rem;
+        overflow: hidden;
+    }
+    
+    .data-quality-bar {
+        height: 100%;
+        border-radius: 3px;
+    }
+    
+    .quality-high {
+        background-color: #21A179; /* $green-500 */
+        width: 90%;
+    }
+    
+    .quality-medium {
+        background-color: #F0C808; /* $yellow-500 */
+        width: 65%;
+    }
+    
+    .quality-low {
+        background-color: #CD4759; /* $red-500 */
+        width: 30%;
+    }
+    
+    .citation-box {
+        background-color: #E3EAEF; /* $gray-200 */
+        padding: 1rem;
+        border-radius: 0.4rem; /* $border-radius-sm */
+        font-family: monospace;
+        margin-top: 1rem;
+    }
+    
+    .metadata-table th {
+        width: 30%;
+        font-weight: 600;
+    }
+    
+    /* Tab Content Styles */
+    .tab-content {
+        padding: 1rem 0;
+    }
+    
+    .tab-pane {
+        display: none;
+    }
+    
+    .tab-pane.active {
+        display: block;
+    }
+    
+    /* Dataset Count Badge */
+    .dataset-count {
+        background-color: #F6F9FB; /* $gray-100 */
+        color: #294456; /* $gray-700 */
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.4rem; /* $border-radius-sm */
+        font-size: 0.85rem;
+        margin-left: 0.5rem;
+    }
+    
+    /* Modern search input */
+    .search-container {
+        position: relative;
+    }
+    
+    .search-container .form-control {
+        padding-left: 2.5rem;
+        border-radius: 0.4rem; /* $border-radius-sm */
+        border: 1px solid #E3EAEF; /* $gray-200 */
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
+    }
+    
+    .search-container .search-icon {
+        position: absolute;
+        left: 0.75rem;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #708696; /* $gray-500 */
+        z-index: 10;
+    }
+</style>
+<!-- Bootstrap Icons -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+{% endblock after-head %}
+
 {% block site-header %}
     <div class="main-header">
         <h1 class="main-header__title">
             <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.31781 2.68742C3.35608 3.12457 3 3.62628 3 4C3 4.37372 3.35608 4.87543 4.31781 5.31258C5.23441 5.72922 6.53579 6 8 6C9.46421 6 10.7656 5.72922 11.6822 5.31258C12.6439 4.87543 13 4.37372 13 4C13 3.62628 12.6439 3.12457 11.6822 2.68742C10.7656 2.27078 9.46421 2 8 2C6.53579 2 5.23441 2.27078 4.31781 2.68742ZM13 5.69813C12.729 5.90046 12.4201 6.07563 12.096 6.22295C11.022 6.71114 9.57336 7 8 7C6.42664 7 4.97802 6.71114 3.90401 6.22295C3.5799 6.07563 3.27105 5.90046 3 5.69813V7C3 7.37372 3.35608 7.87543 4.31781 8.31258C5.23441 8.72922 6.53579 9 8 9C9.46421 9 10.7656 8.72922 11.6822 8.31258C12.6439 7.87543 13 7.37372 13 7V5.69813ZM14 4C14 2.993 13.1249 2.24472 12.096 1.77705C11.022 1.28886 9.57336 1 8 1C6.42664 1 4.97802 1.28886 3.90401 1.77705C2.87513 2.24472 2 2.993 2 4V13C2 14.007 2.87513 14.7553 3.90401 15.2229C4.97802 15.7111 6.42664 16 8 16C9.57336 16 11.022 15.7111 12.096 15.2229C13.1249 14.7553 14 14.007 14 13V4ZM13 8.69813C12.729 8.90046 12.4201 9.07563 12.096 9.22295C11.022 9.71114 9.57336 10 8 10C6.42664 10 4.97802 9.71114 3.90401 9.22295C3.5799 9.07563 3.27105 8.90046 3 8.69813V10C3 10.3737 3.35608 10.8754 4.31781 11.3126C5.23441 11.7292 6.53579 12 8 12C9.46421 12 10.7656 11.7292 11.6822 11.3126C12.6439 10.8754 13 10.3737 13 10V8.69813ZM13 11.6981C12.729 11.9005 12.4201 12.0756 12.096 12.2229C11.022 12.7111 9.57336 13 8 13C6.42664 13 4.97802 12.7111 3.90401 12.2229C3.5799 12.0756 3.27105 11.9005 3 11.6981V13C3 13.3737 3.35608 13.8754 4.31781 14.3126C5.23441 14.7292 6.53579 15 8 15C9.46421 15 10.7656 14.7292 11.6822 14.3126C12.6439 13.8754 13 13.3737 13 13V11.6981Z" fill="#293B46"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.31781 2.68742C3.35608 3.12457 3 3.62628 3 4C3 4.37372 3.35608 4.87543 4.31781 5.31258C5.23441 5.72922 6.53579 6 8 6C9.46421 6 10.7656 5.72922 11.6822 5.31258C12.6439 4.87543 13 4C13 4.37372 13.35608 4.87543 14.31781 5.31258C15.23441 5.72922 16.53579 6 18 6C19.46421 6 20.7656 5.72922 21.6822 5.31258C22.6439 4.87543 23 4C23 3.62628 22.6439 3.12457 21.6822 2.68742C20.7656 2.27078 19.46421 2 18 2C16.53579 2 15.23441 2.27078 14.31781 2.68742ZM23 5.69813C22.729 5.90046 22.4201 6.07563 22.096 6.22295C21.022 6.71114 19.57336 7 18 7C16.42664 7 14.97802 6.71114 13.90401 6.22295C13.5799 6.07563 13.27105 5.90046 13 5.69813V7C13 7.37372 13.35608 7.87543 14.31781 8.31258C15.23441 8.72922 16.53579 9 18 9C19.46421 9 20.7656 8.72922 21.6822 8.31258C22.6439 7.87543 23 7.37372 23 7V5.69813ZM24 4C24 2.993 23.1249 2.24472 22.096 1.77705C21.022 1.28886 19.57336 1 18 1C16.42664 1 14.97802 1.28886 13.90401 1.77705C12.87513 2.24472 12 2.993 12 4V13C12 14.007 12.87513 14.7553 13.90401 15.2229C14.97802 15.7111 16.42664 16 18 16C19.57336 16 21.022 15.7111 22.096 15.2229C23.1249 14.7553 24 14.007 24 13V4ZM23 8.69813C22.729 8.90046 22.4201 9.07563 22.096 9.22295C21.022 9.71114 19.57336 10 18 10C16.42664 10 14.97802 9.71114 13.90401 9.22295C13.5799 9.07563 13.27105 8.90046 13 8.69813V10C13 10.3737 13.35608 10.8754 14.31781 11.3126C15.23441 11.7292 16.53579 12 18 12C19.46421 12 20.7656 11.7292 21.6822 11.3126C22.6439 10.8754 23 10.3737 23 10V8.69813ZM23 11.6981C22.729 11.9005 22.4201 12.0756 22.096 12.2229C21.022 12.7111 19.57336 13 18 13C16.42664 13 14.97802 12.7111 13.90401 12.2229C13.5799 12.0756 13.27105 11.9005 13 11.6981V13C13 13.3737 13.35608 13.8754 14.31781 14.3126C15.23441 14.7292 16.53579 15 18 15C19.46421 15 20.7656 14.7292 21.6822 14.3126C22.6439 13.8754 23 13.3737 23 13V11.6981Z" fill="#293B46"/>
             </svg>
             Database
         </h1>
@@ -18,31 +305,252 @@ <h1 class="main-header__title">
 {% block data_content %}
 {% load dataedit.taghandler %}
 
-<table id="tables" class="table table-hover table-bordered">
-    <thead>
-        <tr class="table-primary">
-            <th>Name</th>
-            <th>Tags</th>
-        </tr>
-    </thead>
-    <tbody>
-        {% for table, label, tags in tables %}
+<!-- Improved Tab Navigation -->
+<div class="view-tabs-container">
+    <ul class="view-tabs" id="viewTabs" role="tablist">
+        <li class="view-tabs__item" role="presentation">
+            <a class="view-tabs__link active" id="table-tab" href="#table-view" role="tab" aria-controls="table-view" aria-selected="true">
+                <span class="view-tabs__icon"><i class="bi bi-table"></i></span>
+                Table View
+            </a>
+        </li>
+        <li class="view-tabs__item" role="presentation">
+            <a class="view-tabs__link" id="card-tab" href="#card-view" role="tab" aria-controls="card-view" aria-selected="false">
+                <span class="view-tabs__icon"><i class="bi bi-grid-3x3-gap"></i></span>
+                Card View
+            </a>
+        </li>
+    </ul>
+</div>
 
-            <tr>
-                {% if label %}
-                    <td onclick="window.open('/dataedit/view/{{ schema }}/{{ table }}', name='_blank')">{{ label }}</td>
-                {% else %}
-                    <td onclick="window.open('/dataedit/view/{{ schema }}/{{ table }}', name='_blank')">{{ table }}</td>
-                {% endif %}
-                <td>
-                    {% for tag in tags %}
-                        <a class="btn tag" href="/dataedit/view/{{ schema }}?query=&tags={{ tag.id }}" style="background:{{tag.color}};color:{% readable_text_color tag.color %}">{{tag.name}}</a>
+<!-- Tab Content -->
+<div class="tab-content" id="viewTabsContent">
+    <!-- Table View -->
+    <div class="tab-pane active" id="table-view" role="tabpanel" aria-labelledby="table-tab">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h2 class="h4 mb-0">Available Datasets <span class="dataset-count">{{ tables|length }}</span></h2>
+            <div class="search-container">
+                <i class="bi bi-search search-icon"></i>
+                <input type="text" class="form-control" id="tableSearch" placeholder="Search datasets...">
+            </div>
+        </div>
+        
+        <div class="modern-table-container">
+            <table id="tables" class="table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Tags</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for table, label, tags in tables %}
+                        <tr onclick="window.open('/dataedit/view/{{ schema }}/{{ table }}', name='_blank')">
+                            {% if label %}
+                                <td>{{ label }}</td>
+                            {% else %}
+                                <td>{{ table }}</td>
+                            {% endif %}
+                            <td>
+                                {% for tag in tags %}
+                                    <a class="btn tag" href="/dataedit/view/{{ schema }}?query=&tags={{ tag.id }}" style="background:{{tag.color}};color:{% readable_text_color tag.color %}">{{tag.name}}</a>
+                                {% endfor %}
+                            </td>
+                        </tr>
                     {% endfor %}
-                </td>
-            </tr>
-        {% endfor %}
-
-    </tbody>
-</table>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    
+    <!-- Card View - Fixed to prevent horizontal scrollbar and added spacing -->
+    <div class="tab-pane" id="card-view" role="tabpanel" aria-labelledby="card-tab">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h2 class="h4 mb-0">Available Datasets <span class="dataset-count">{{ tables|length }}</span></h2>
+            <div class="search-container">
+                <i class="bi bi-search search-icon"></i>
+                <input type="text" class="form-control" id="cardSearch" placeholder="Search datasets...">
+            </div>
+        </div>
+        
+        <!-- Fixed card container to prevent horizontal scrollbar -->
+        <div class="card-container">
+            {% for table, label, tags in tables %}
+                <div class="card-column">
+                    <div class="dataset-card">
+                        <div class="dataset-header">
+                            <div class="d-flex justify-content-between align-items-start">
+                                {% if label %}
+                                    <h3 class="h5 mb-1">{{ label }}</h3>
+                                {% else %}
+                                    <h3 class="h5 mb-1">{{ table }}</h3>
+                                {% endif %}
+                                
+                                <!-- You can add verification badge based on your criteria -->
+                                {% if tags|length > 2 %}
+                                    <span class="badge bg-success">Verified</span>
+                                {% else %}
+                                    <span class="badge bg-warning text-dark">Under Review</span>
+                                {% endif %}
+                            </div>
+                            <p class="text-muted mb-0 small">Table ID: {{ table }}</p>
+                        </div>
+                        <div class="p-3">
+                            <!-- You'll need to add description from your metadata if available -->
+                            <p>Dataset from the {{ schema }} schema.</p>
+                            
+                            <!-- Tags Section -->
+                            <div class="mb-3">
+                                <div class="metadata-label">Tags</div>
+                                <div class="metadata-value">
+                                    {% for tag in tags %}
+                                        <span class="keyword-badge" style="background:{{tag.color}}20;color:{{tag.color}}">{{tag.name}}</span>
+                                    {% endfor %}
+                                    {% if not tags %}
+                                        <span class="text-muted">No tags available</span>
+                                    {% endif %}
+                                </div>
+                            </div>
+                            
+                            <!-- Placeholder for additional metadata -->
+                            <div class="row mb-3">
+                                <div class="col-md-6">
+                                    <div class="metadata-label">Schema</div>
+                                    <div class="metadata-value">{{ schema }}</div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="metadata-label">License</div>
+                                    <div class="metadata-value">
+                                        <span class="license-badge">
+                                            <i class="bi bi-cc-circle"></i> CC BY 4.0
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- Actions -->
+                            <div class="d-flex justify-content-between mt-4">
+                                <button class="btn btn-sm btn-outline-primary toggle-details" data-target="dataset-{{ table|slugify }}">
+                                    <i class="bi bi-info-circle"></i> More Details
+                                </button>
+                                <div>
+                                    <a href="/dataedit/view/{{ schema }}/{{ table }}" class="btn btn-sm btn-outline-secondary me-2">
+                                        <i class="bi bi-eye"></i> View
+                                    </a>
+                                    <a href="/dataedit/view/{{ schema }}/{{ table }}/export" class="btn btn-sm btn-primary">
+                                        <i class="bi bi-download"></i> Download
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Expanded Details Section -->
+                        <div class="dataset-details" id="dataset-{{ table|slugify }}">
+                            <h4 class="h6 mb-3">Detailed Metadata</h4>
+                            <table class="table table-sm metadata-table">
+                                <tbody>
+                                    <tr>
+                                        <th>Table Name</th>
+                                        <td>{{ table }}</td>
+                                    </tr>
+                                    <tr>
+                                        <th>Schema</th>
+                                        <td>{{ schema }}</td>
+                                    </tr>
+                                    <!-- Add more metadata fields as they become available in your context -->
+                                </tbody>
+                            </table>
+                            
+                            <h4 class="h6 mb-2 mt-4">How to Cite</h4>
+                            <div class="citation-box">
+                                Open Energy Platform ({% now "Y" %}). {{ label|default:table }} [Data set]. Open Energy Platform. https://openenergy-platform.org/dataedit/view/{{ schema }}/{{ table }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
 
-{% endblock %}
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Improved tab switching functionality
+        const tabLinks = document.querySelectorAll('.view-tabs__link');
+        tabLinks.forEach(link => {
+            link.addEventListener('click', function(e) {
+                e.preventDefault();
+                
+                // Remove active class from all tabs
+                document.querySelectorAll('.view-tabs__link').forEach(tab => {
+                    tab.classList.remove('active');
+                    tab.setAttribute('aria-selected', 'false');
+                });
+                
+                // Add active class to clicked tab
+                this.classList.add('active');
+                this.setAttribute('aria-selected', 'true');
+                
+                // Hide all tab panes
+                document.querySelectorAll('.tab-pane').forEach(pane => {
+                    pane.classList.remove('active');
+                });
+                
+                // Show the target tab pane
+                const targetId = this.getAttribute('href');
+                const targetPane = document.querySelector(targetId);
+                targetPane.classList.add('active');
+            });
+        });
+        
+        // Toggle dataset details
+        const toggleButtons = document.querySelectorAll('.toggle-details');
+        toggleButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                const targetId = this.getAttribute('data-target');
+                const detailsSection = document.getElementById(targetId);
+                
+                if (detailsSection.style.display === 'block') {
+                    detailsSection.style.display = 'none';
+                    this.innerHTML = '<i class="bi bi-info-circle"></i> More Details';
+                    this.closest('.dataset-card').classList.remove('expanded');
+                } else {
+                    detailsSection.style.display = 'block';
+                    this.innerHTML = '<i class="bi bi-dash-circle"></i> Less Details';
+                    this.closest('.dataset-card').classList.add('expanded');
+                }
+            });
+        });
+        
+        // Table search functionality
+        document.getElementById('tableSearch').addEventListener('keyup', function() {
+            const searchTerm = this.value.toLowerCase();
+            const tableRows = document.querySelectorAll('#tables tbody tr');
+            
+            tableRows.forEach(row => {
+                const text = row.textContent.toLowerCase();
+                if(text.includes(searchTerm)) {
+                    row.style.display = '';
+                } else {
+                    row.style.display = 'none';
+                }
+            });
+        });
+        
+        // Card search functionality
+        document.getElementById('cardSearch').addEventListener('keyup', function() {
+            const searchTerm = this.value.toLowerCase();
+            const cards = document.querySelectorAll('.dataset-card');
+            
+            cards.forEach(card => {
+                const text = card.textContent.toLowerCase();
+                if(text.includes(searchTerm)) {
+                    card.closest('.card-column').style.display = '';
+                } else {
+                    card.closest('.card-column').style.display = 'none';
+                }
+            });
+        });
+    });
+</script>
+{% endblock %}
\ No newline at end of file