diff --git a/src/lib/train/train-detail.svelte b/src/lib/train/train-detail.svelte
index 8fe22d3..cafd5b2 100644
--- a/src/lib/train/train-detail.svelte
+++ b/src/lib/train/train-detail.svelte
@@ -15,41 +15,42 @@
         <span class="header">{service.operator || "GW"}: {service.stops[0]['publicDeparture'] || service.stops[0]['wttDeparture']} {service.stops[0]['tiploc']} to {service.stops[service['stops'].length -1]['tiploc']}</span>
         <span id="container-arrow" class:isExpanded>V</span>
     </div>
-        {#if isExpanded}
-            <div class="container-detail" in:fly out:fly>
-                {#if service.pis}
-                    <p class="pis">PIS: {service.pis}</p>
-                {/if}
-                <p class="svc-detail">Planned Type: {parseInt(service.planSpeed) || 68 }mph {service.powerType || "Bus" }</p>
-                <p class="svc-detail">Days Run: {service.daysRun.join(", ").toUpperCase()}</p>
-                <table>
-                    <tr>
-                        <th>Location</th>
-                        <th>Sch Arr.</th>
-                        <th>Sch Dep.</th>
-                    </tr>
-                    {#if service.stops[0]['publicDeparture']}
-                        {#each service.stops as stop}
-                            {#if stop.publicArrival || stop.publicDeparture}
-                                <tr>  
-                                    <td>{stop.tiploc}</td>
-                                    <td>{stop.publicArrival || '-'}</td>
-                                    <td>{stop.publicDeparture || '-'}</td>
-                                </tr>
-                            {/if}
-                        {/each}
-                    {:else}
-                        {#each service.stops as stop}
-                            <tr>
+    {#if isExpanded}
+        <div class="container-detail" in:fly={{ y: -20, duration: 200}}>
+            {#if service.pis}
+                <p class="pis">PIS: {service.pis}</p>
+            {/if}
+            <p class="svc-detail">Planned Type: {parseInt(service.planSpeed) || 68 }mph {service.powerType || "Bus" }</p>
+            <p class="svc-detail">Days Run: {service.daysRun.join(", ").toUpperCase()}</p>
+            <p class="svc-detail validity">Valid From: {new Date(service.scheduleStartDate).toLocaleDateString('en-GB')} - {new Date(service.scheduleEndDate).toLocaleDateString('en-GB')}</p>
+            <table>
+                <tr>
+                    <th>Location</th>
+                    <th>Sch Arr.</th>
+                    <th>Sch Dep.</th>
+                </tr>
+                {#if service.stops[0]['publicDeparture']}
+                    {#each service.stops as stop}
+                        {#if stop.publicArrival || stop.publicDeparture}
+                            <tr>  
                                 <td>{stop.tiploc}</td>
-                                <td>{stop.wttArrival || '-'}</td>
-                                <td>{stop.wttDeparture || '-'}</td>
+                                <td>{stop.publicArrival || '-'}</td>
+                                <td>{stop.publicDeparture || '-'}</td>
                             </tr>
-                        {/each}
-                    {/if}
-                </table>
-            </div>
-        {/if}
+                        {/if}
+                    {/each}
+                {:else}
+                    {#each service.stops as stop}
+                        <tr>
+                            <td>{stop.tiploc}</td>
+                            <td>{stop.wttArrival || '-'}</td>
+                            <td>{stop.wttDeparture || '-'}</td>
+                        </tr>
+                    {/each}
+                {/if}
+            </table>
+        </div>
+    {/if}
 </div>
 
 <style>
@@ -59,16 +60,16 @@
         margin-bottom: 20px;
         width: 95%;
         max-width: 600px;
-        min-width: 300px;
         height: auto;
         background-color: var(--overlay-color);
         border-radius: 10px;
-        transition-duration: 500ms;
+        overflow: hidden;
+        transition: height 500ms ease-in-out;
     }
     .container-header {
         text-align: left;
         padding-left: 10px;
-        font-size: 18px;
+        font-size: 14px;
         font-weight: 600;
         padding-top: 10px;
         padding-bottom: 10px;
@@ -82,7 +83,7 @@
         position: absolute;
         right: 16px;
         top: 13px;
-        transition-duration: 500ms;
+        transition-duration: 300ms;
         z-index: 2;
     }
     .isExpanded {
@@ -100,6 +101,9 @@
         margin-bottom: 2px;
         color: white;
     }
+    .validity {
+        font-size: 14px;
+    }
     table {
         margin: auto;
         padding-top: 10px;