diff --git a/src/data/map.js b/src/data/map.js
index 3cafffc..af824c9 100644
--- a/src/data/map.js
+++ b/src/data/map.js
@@ -458,7 +458,7 @@ async function getRaids(filter) {
             const now = new Date();
             const starts = new Date(row.raid_battle_timestamp * 1000);
             const started = starts < now;
-            const startTime = started ? '--' : starts.toLocaleTimeString();
+            const startTime = started ? '--' : utils.toHHMMSS(starts - now);//.toLocaleTimeString();
             const ends = new Date(row.raid_end_timestamp * 1000);
             const secondsLeft = ends - now;
             // Skip raids that have less than 60 seconds remaining.
@@ -473,6 +473,7 @@ async function getRaids(filter) {
                     (utils.inArray(filter.city, city) || filter.city.toLowerCase() === 'all')) {
                     const mapLink = util.format(config.google.maps, row.lat, row.lon);
                     raids.push({
+                        DT_RowId: row.id,
                         pokemon: {
                             formatted: `<img src='${imgUrl}' style="width: 32px; height: 32px; object-fit: contain;" />&nbsp;${name}`,
                             sort: row.raid_pokemon_id
@@ -490,10 +491,14 @@ async function getRaids(filter) {
                             sort: level
                         },
                         gym_name: `<a href='${mapLink}' target='_blank'>${gym}</a>`,
-                        team: {
-                            formatted: teamIcon,
-                            sort: row.team_id
-                        },
+                        team: teamIcon,
+                        form: row.raid_pokemon_form > 0 ? Localizer.instance.getFormName(row.raid_pokemon_form) : '',
+                        evolution: row.raid_pokemon_evolution > 0 ? Localizer.instance.getEvolutionName(row.raid_pokemon_evolution) : '',
+                        move1: Localizer.instance.getMoveName(row.raid_pokemon_move_1),
+                        move2: Localizer.instance.getMoveName(row.raid_pokemon_move_2),
+                        costume: row.raid_pokemon_costume ? Localizer.instance.getCostumeName(row.raid_pokemon_costume) : '',
+                        gender: Localizer.instance.getGenderName(row.raid_pokemon_gender),
+                        cp: (row.raid_pokemon_cp || 0).toLocaleString(),
                         ex_eligible: ex,
                         city: city
                     });
diff --git a/src/services/locale.js b/src/services/locale.js
index 2d4f9cc..6433921 100644
--- a/src/services/locale.js
+++ b/src/services/locale.js
@@ -71,6 +71,34 @@ class Localizer {
         return i18n('team_' + teamId);
     }
 
+    getMoveName(moveId) {
+        return i18n('move_' + moveId);
+    }
+
+    getCostumeName(costumeId) {
+        return i18n('costume_' + costumeId);
+    }
+
+    getGenderName(genderId) {
+        return i18n('gender_icon_' + genderId);
+    }
+
+    getEvolutionName(evoId) {
+        return i18n('evo_' + evoId);
+    }
+
+    getFormName(formId) {
+        return i18n('form_' + formId);
+    }
+
+    getWeatherName(weatherId) {
+        return i18n('weather_' + weatherId);
+    }
+
+    getWeatherIcon(weatherId) {
+        return i18n('weather_icon_' + weatherId);
+    }
+
     getQuestTask(questId, amount) {
         return i18n('quest_' + questId, { amount: amount });
     }
diff --git a/src/views/header.mustache b/src/views/header.mustache
index 7322543..17b9098 100644
--- a/src/views/header.mustache
+++ b/src/views/header.mustache
@@ -8,6 +8,7 @@
     <link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css' />
     <link rel='stylesheet' type='text/css' href='../../css/all.min.css' />
     <link rel='stylesheet' type='text/css' href='../../css/footer.css' />
+    <link rel='stylesheet' type='text/css' href='../../css/style.css' />
     <link rel='stylesheet' type='text/css' href='https://unpkg.com/leaflet@1.6.0/dist/leaflet.css' integrity='sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==' crossorigin='' />
 
     <script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
diff --git a/src/views/raids.mustache b/src/views/raids.mustache
index b235b91..d6b7dee 100644
--- a/src/views/raids.mustache
+++ b/src/views/raids.mustache
@@ -101,13 +101,12 @@
                     <table id="table" class="table table-{{style}} table-striped table-bordered table-hover dt-responsive nowrap" style="position: center; width:100%">
                         <thead class="thead-dark">
                             <tr>
+                                <th></th>
                                 <th class="all">{{Pokemon}}</th>
                                 <th class="min-desktop">{{Level}}</th>
                                 <th class="all">{{Starts}}</th>
                                 <th class="all">{{Ends}}</th>
                                 <th class="min-desktop">{{Gym Name}}</th>
-                                <th class="min-desktop">{{Team}}</th>
-                                <th class="min-desktop">{{EX-Eligible}}</th>
                                 <th class="all">{{City}}</th>
                             </tr>
                         </thead>
@@ -226,6 +225,13 @@
             "lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
             "pageLength": 100,
             "columns": [
+                {
+                    "class": "details-control",
+                    "orderable": false,
+                    "data": null,
+                    "defaultContent": "",
+                    "visible": false
+                },
                 { data: {
                     _: "pokemon.formatted",
                     sort: "pokemon.sort"
@@ -243,11 +249,6 @@
                     sort: "raid_ends.sort"
                 } },
                 { "data": "gym_name" },
-                { data: {
-                    _: "team.formatted",
-                    sort: "team.sort"
-                } },
-                { "data": "ex_eligible" },
                 { "data": "city" }
             ],
             "columnDefs": [
@@ -256,7 +257,7 @@
             "info": true,
             "order": [[ 3, "asc" ]],
             "search.caseInsensitive": true,
-            "responsive": true,
+            //"responsive": true,
             /*
             "createdRow": function(row, data, index) {
                 //$('td', row).eq(2).css('color', 'blue');
@@ -294,6 +295,92 @@
                 table.ajax.reload(null, false);
             }, 30 * 1000);
         });
+        let detailRows = [];
+        $('#table tbody').on('click', 'tr td', function() {
+            let tr = $(this).closest('tr');
+            let row = table.row(tr);
+            let index = $.inArray(tr.attr('id'), detailRows);
+            if (row.child.isShown()) {
+                row.child.hide();
+                tr.removeClass('shown');
+                detailRows.splice(index, 1);
+            }
+            else {
+                row.child(format(row.data())).show();
+                tr.addClass('shown');
+                detailRows.push(tr.attr('id'));
+            }
+        });
+    
+        // On each draw, loop over the `detailRows` array and show any child rows
+        table.on('draw', function() {
+            $.each(detailRows, function (i, id) {
+                $(`#${id} td.details-control`).trigger('click');
+            });
+        });
+
+        function format (data) {
+            let content = `
+            <div class="expanded-row">
+                <div class="row justify-content-center">
+                    <h5>${data.gym_name}</h5>
+                </div>
+                <div class="row justify-content-left">
+                    <div class="col">
+                        <b>Moveset:</b> ${data.move1}/${data.move2}<br>
+                    </div>
+                    <div class="col">
+                        <b>EX-Eligible:</b> ${data.ex_eligible}<br>
+                    </div>
+                    <div class="col">
+                        <b>Team:</b> ${data.team}<br>
+                    </div>
+                    <div class="col">
+                        <b>Level:</b> ${data.raid_level.formatted}<br>
+                    </div>
+                `;
+            if (data.form) {
+                content += `
+                <div class="col">
+                    <b>Form:</b> ${data.form}<br>
+                </div>
+                `;
+            }
+            if (data.costume) {
+                content += `
+                <div class="col">
+                    <b>Costume:</b> ${data.costume}<br>
+                </div>
+                `;
+            }
+            if (data.evolution) {
+                content += `
+                <div class="col">
+                    <b>Evolution:</b> ${data.evolution}<br>
+                </div>
+                `;
+            }
+            if (data.cp > 0) {
+                content += `
+                <div class="col">
+                    <b>CP:</b> ${data.cp}<br>
+                </div>
+                `;
+            }
+            if (data.gender > 0) {
+                content += `
+                <div class="col">
+                    <b>Gender:</b> ${data.gender}<br>
+                </div>
+                `;
+            }
+            content += `
+                </div>
+            </div>
+            `;
+            return content;
+        }
+
         function reload() {
             var pokemon = $('#filter-pokemon').val();
             var gym = $('#filter-gym').val();
diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 0000000..5a4a156
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,8 @@
+.expanded-row {
+    border: 4px solid rgb(50, 53, 57);
+    background-color: rgb(34, 34, 34);
+    width: 100%;
+    height: 100%;
+    padding: 0 0 0 0;
+    /*margin: 0 0 0 0;*/
+}
\ No newline at end of file