diff --git a/src/yolo_webui/static/index.html b/src/yolo_webui/static/index.html
index b51879e..7b3578f 100644
--- a/src/yolo_webui/static/index.html
+++ b/src/yolo_webui/static/index.html
@@ -42,7 +42,7 @@
     </header>
 
     <main class="app-workspace">
-        <div id="train-view" class="workspace-view active" style="display: flex; gap: 1.5rem; flex: 1; height: 100%;">
+        <div id="train-view" class="workspace-view active">
         <!-- Configuration Card -->
         <section class="pane" id="config-pane">
             <!-- Session Controls -->
@@ -407,7 +407,7 @@
         </section>
         </div> <!-- End train-view -->
 
-        <div id="export-view" class="workspace-view" style="display: none; gap: 1.5rem; flex: 1; height: 100%;">
+        <div id="export-view" class="workspace-view">
             <!-- Export Configuration Card -->
             <section class="pane" id="export-config-pane">
                 <div class="tabs">
diff --git a/src/yolo_webui/static/style.css b/src/yolo_webui/static/style.css
index 79963e7..9b77da0 100644
--- a/src/yolo_webui/static/style.css
+++ b/src/yolo_webui/static/style.css
@@ -129,9 +129,8 @@ body {
 /* App Layout Workspace */
 .app-workspace {
     flex: 1;
-    display: grid;
-    grid-template-columns: 46% 1fr;
-    gap: 1.5rem;
+    display: flex;
+    flex-direction: column;
     padding: 1.5rem 2rem;
     max-width: 1800px;
     width: 100%;
@@ -139,8 +138,21 @@ body {
     height: calc(100vh - 57px);
 }
 
+.workspace-view {
+    display: none;
+    grid-template-columns: 46% 1fr;
+    gap: 1.5rem;
+    flex: 1;
+    height: 100%;
+}
+
+.workspace-view.active {
+    display: grid;
+    animation: fadeIn var(--transition-normal);
+}
+
 @media (max-width: 1100px) {
-    .app-workspace {
+    .workspace-view {
         grid-template-columns: 1fr;
         height: auto;
         overflow-y: auto;