diff --git a/public/example_report.pdf b/public/example_report.pdf
index 3510aa0..fc7270a 100644
Binary files a/public/example_report.pdf and b/public/example_report.pdf differ
diff --git a/src/migration-wizard/steps/discovery/ReportTable.tsx b/src/migration-wizard/steps/discovery/ReportTable.tsx
index 7370229..b20505f 100644
--- a/src/migration-wizard/steps/discovery/ReportTable.tsx
+++ b/src/migration-wizard/steps/discovery/ReportTable.tsx
@@ -8,11 +8,13 @@ export namespace ReportTable {
     data: DataList;
     fields: Array<keyof DataList[0]>;
     style?: React.CSSProperties;
+    withoutBorder?: boolean;
   };
 }
 
 export function ReportTable<DataItem>(
   props: ReportTable.Props<DataItem[]>,
+  withoutBorder = false
 ): React.ReactNode {
   const { columns, data, fields, style } = props;
 
@@ -20,15 +22,15 @@ export function ReportTable<DataItem>(
     <Table
       variant="compact"
       borders={true}
-      style={{ border: '1px solid lightgray', borderRight: 'none', ...style }}
+      style={{  border: withoutBorder ? 'none':'1px solid lightgray', borderRight: 'none', ...style }}
     >
       <Thead>
-        <Tr>
+        <Tr style={{ border: withoutBorder ? 'none':'1px solid lightgray'}}>
           {columns.map((name, index) => (
             <Th
               key={index}
-              hasRightBorder
-              style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}
+              hasRightBorder={!withoutBorder}
+              style={{ whiteSpace: 'normal', wordBreak: 'break-word', border: withoutBorder ? 'none':'1px solid lightgray'  }}
             >
               {name}
             </Th>
@@ -37,9 +39,9 @@ export function ReportTable<DataItem>(
       </Thead>
       <Tbody>
         {data.map((item, idx) => (
-          <Tr key={idx} style={{ width: 100 }}>
+          <Tr key={idx} style={{ width: 100,  border: withoutBorder ? 'none':'1px solid lightgray' }}>
             {fields.map((f, fieldIdx) => (
-              <Td key={fieldIdx} hasRightBorder>
+              <Td key={fieldIdx} hasRightBorder={!withoutBorder}>
                 {' '}
                 {item[f] === '' || item[f] === undefined
                   ? '-'
diff --git a/src/migration-wizard/steps/discovery/assessment-report/Dashboard.css b/src/migration-wizard/steps/discovery/assessment-report/Dashboard.css
new file mode 100644
index 0000000..cc4086c
--- /dev/null
+++ b/src/migration-wizard/steps/discovery/assessment-report/Dashboard.css
@@ -0,0 +1,54 @@
+.dashboard-card-clip {
+    clip-path: inset(0 round 10px);
+    background: #fff;
+    height: 100%;
+    width: 100%;
+  }
+  .dashboard-card-scroll {
+    height: 100%;
+    min-height: 300px;
+    max-height: 500px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+  }
+.dashboard-equal-height-row {
+    display: flex;
+    gap: var(--pf-global--gutter); 
+    align-items: stretch;
+}
+  
+.dashboard-equal-height {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    height: 100%;
+}
+.pf-v5-c-card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 10px !important;
+}
+.dashboard-card {
+    border: 1px solid #d2d2d2 !important; 
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    min-height: 280px;
+    max-height: 340px;   
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.dashboard-card-border {
+    border: 1px solid #d2d2d2 !important; 
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+.dashboard-card-print { 
+    height: 100%;
+}
+.table-without-border {
+    border: none !important;    
+}
\ No newline at end of file
diff --git a/src/migration-wizard/steps/discovery/assessment-report/Dashboard.tsx b/src/migration-wizard/steps/discovery/assessment-report/Dashboard.tsx
index f218cfa..c0b7d7a 100644
--- a/src/migration-wizard/steps/discovery/assessment-report/Dashboard.tsx
+++ b/src/migration-wizard/steps/discovery/assessment-report/Dashboard.tsx
@@ -19,6 +19,8 @@ import { StorageOverview } from './StorageOverview';
 import { OSDistribution } from './OSDistribution';
 import { Datastores } from './Datastores';
 
+import './Dashboard.css';
+
 interface Props {
   infra: Infra;
   cpuCores: VMResourceBreakdown;
@@ -27,70 +29,66 @@ interface Props {
   isExportMode?: boolean;
 }
 
-
-
-const getCardStyle = (isExportMode?: boolean): React.CSSProperties =>
-  isExportMode
-    ? { }
-    : {
-        height: '400px',
-        overflow: 'auto',
-      };
-
-export const Dashboard: React.FC<Props> = ({ infra, cpuCores, ramGB, vms, isExportMode }) => {
-  
-  return(
-  <PageSection variant={PageSectionVariants.light}>
-    <Grid hasGutter>
-      <GridItem span={12} id='infrastructure-overview'>
-        <InfrastructureOverview
-          infra={infra}
-          cpuCores={cpuCores}
-          ramGB={ramGB}
-        />
-      </GridItem>
-      <GridItem span={12}>
-        <Grid hasGutter>
-          <GridItem span={6}>
-            <div style={getCardStyle(isExportMode)}>
+export const Dashboard: React.FC<Props> = ({
+  infra,
+  cpuCores,
+  ramGB,
+  vms,
+  isExportMode,
+}) => {
+  return (
+    <PageSection variant={PageSectionVariants.light}>
+      <Grid hasGutter>
+        <GridItem span={12} id="infrastructure-overview">
+          <InfrastructureOverview
+            infra={infra}
+            cpuCores={cpuCores}
+            ramGB={ramGB}
+          />
+        </GridItem>
+        <GridItem span={12}>
+          <Gallery hasGutter minWidths={{ default: '40%' }}>
+            <GalleryItem>
               <VMMigrationStatus
                 data={{
                   migratable: vms.totalMigratableWithWarnings,
                   nonMigratable: vms.total - vms.totalMigratableWithWarnings,
                 }}
+                isExportMode={isExportMode}
               />
-            </div>
-          </GridItem>
-          <GridItem span={6}>
-            <div style={getCardStyle(isExportMode)}>
-              <OSDistribution osData={vms.os} />
-            </div>
-          </GridItem>
-        </Grid>
-      </GridItem>
-      <GridItem span={12}>
-        <Grid hasGutter>
-          <GridItem span={6}>
-            <div style={getCardStyle(isExportMode)}>
+            </GalleryItem>
+            <GalleryItem>
+              <OSDistribution osData={vms.os}  isExportMode={isExportMode}/>
+            </GalleryItem>
+          </Gallery>
+        </GridItem>
+        <GridItem span={12}>
+          <Gallery hasGutter minWidths={{ default: '40%' }}>
+            <GalleryItem>
               <StorageOverview
                 data={vms.diskGB.histogram.data}
                 minValue={vms.diskGB.histogram.minValue}
                 step={vms.diskGB.histogram.step}
+                isExportMode={isExportMode}
               />
-            </div>
-          </GridItem>
-          <GridItem span={6}>
-            <div style={getCardStyle(isExportMode)}>
-              <Datastores datastores={infra.datastores} isExportMode={isExportMode}/>
-            </div>
-          </GridItem>
-        </Grid>
-      </GridItem>
-    </Grid>
-     <Grid hasGutter>
-      <GridItem span={6}>
-        <NetworkTopology networks={infra.networks}/>
-      </GridItem>
-    </Grid> 
-  </PageSection>)
+            </GalleryItem>
+            <GalleryItem>
+            <NetworkTopology networks={infra.networks}  isExportMode={isExportMode}/>
+                
+            </GalleryItem>
+          </Gallery>
+        </GridItem>
+        <GridItem span={12}>
+          <Gallery hasGutter minWidths={{ default: '80%' }}>
+            <GalleryItem>
+            <Datastores
+                  datastores={infra.datastores}
+                  isExportMode={isExportMode}
+                />
+            </GalleryItem>
+          </Gallery>
+        </GridItem>
+      </Grid>
+    </PageSection>
+  );
 };
diff --git a/src/migration-wizard/steps/discovery/assessment-report/Datastores.tsx b/src/migration-wizard/steps/discovery/assessment-report/Datastores.tsx
index 2743b9f..2bee8ff 100644
--- a/src/migration-wizard/steps/discovery/assessment-report/Datastores.tsx
+++ b/src/migration-wizard/steps/discovery/assessment-report/Datastores.tsx
@@ -3,35 +3,50 @@ import {
   Card,
   CardBody,
   CardTitle,
+  Icon,
   Progress,
 } from '@patternfly/react-core';
 import { Datastore } from '@migration-planner-ui/api-client/models';
 import { ReportTable } from '../ReportTable';
-
+import { ExclamationCircleIcon, CheckCircleIcon } from '@patternfly/react-icons';
+import { global_danger_color_100 as globalDangerColor100 } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_success_color_100 as globalSuccessColor100 } from '@patternfly/react-tokens/dist/js/global_success_color_100';
 
 interface DatastoresProps {
-    datastores: Datastore[];
-    isExportMode: boolean;
-  }
-  
-  export const Datastores: React.FC<DatastoresProps> = ({
-    datastores,
-    isExportMode = false,
-  }) => {
-    const tableWidth = isExportMode ? "100%" : "55rem";
+  datastores: Datastore[];
+  isExportMode: boolean;
+}
+
+export const Datastores: React.FC<DatastoresProps> = ({
+  datastores,
+  isExportMode = false,
+}) => {
+  const tableWidth = isExportMode ? '100%' : '55rem';
+  const tableHeight = isExportMode ? '100%' : '250px';
   return (
-        <Card>
-          <CardTitle><i className="fas fa-database" />  Datastores</CardTitle>
-          <CardBody>
+    <Card className={isExportMode ? 'dashboard-card-print' : 'dashboard-card'}>
+      <CardTitle>
+        <i className="fas fa-database" /> Datastores
+      </CardTitle>
+      <CardBody>
+        <div
+          style={{
+            maxHeight: tableHeight,
+            overflowY: 'auto',
+            overflowX: 'auto',
+            padding: 16,
+          }}
+        >
           <ReportTable<
             Datastore & {
               usage: JSX.Element;
+              hardwareAcceleratedMoveDisplay: JSX.Element;
             }
           >
             data={datastores.map((ds) => ({
               ...ds,
               usage: (
-                <div style={{ minWidth: "10rem", flexGrow: 1 }}>
+                <div style={{ minWidth: '10rem', flexGrow: 1 }}>
                   <Progress
                     value={(ds.freeCapacityGB / ds.totalCapacityGB) * 100}
                     size="sm"
@@ -39,12 +54,40 @@ interface DatastoresProps {
                   />
                 </div>
               ),
+              hardwareAcceleratedMoveDisplay: ds.hardwareAcceleratedMove ? (
+                <Icon size="md" isInline>
+                <CheckCircleIcon color={globalSuccessColor100.value} />
+              </Icon>
+              ) : (
+                <Icon size="md" isInline>
+                  <ExclamationCircleIcon  color={globalDangerColor100.value}/>
+                </Icon>
+              ),
             }))}
-            columns={[ "Type", "Vendor", "Storage offload support", "Protocol type", "Model", "Total capacity", "Usage %"]}
-            fields={["type", "vendor", "hardwareAcceleratedMove", "protocolType", "model", "totalCapacityGB", , "usage"]}
+            columns={[
+              'Type',
+              'Vendor',
+              'Storage offload support',
+              'Protocol type',
+              'Model',
+              'Total capacity',
+              'Usage %',
+            ]}
+            fields={[
+              'type',
+              'vendor',
+              'hardwareAcceleratedMoveDisplay',
+              'protocolType',
+              'model',
+              'totalCapacityGB',
+              ,
+              'usage',
+            ]}
             style={{ width: tableWidth }}
+            withoutBorder
           />
-          </CardBody>
-        </Card>
+        </div>
+      </CardBody>
+    </Card>
   );
 };
diff --git a/src/migration-wizard/steps/discovery/assessment-report/InfastructureOverview.tsx b/src/migration-wizard/steps/discovery/assessment-report/InfastructureOverview.tsx
index a233800..7969807 100644
--- a/src/migration-wizard/steps/discovery/assessment-report/InfastructureOverview.tsx
+++ b/src/migration-wizard/steps/discovery/assessment-report/InfastructureOverview.tsx
@@ -14,25 +14,25 @@ interface Props {
 export const InfrastructureOverview: React.FC<Props> = ({ infra, cpuCores, ramGB}) => (
   <Gallery hasGutter  minWidths={{ default: '20%' }} >
     <GalleryItem>
-      <Card>
+      <Card className="dashboard-card-border">
         <CardTitle><NetworkIcon /> Clusters</CardTitle>
         <CardBody>{infra.totalClusters}</CardBody>
       </Card>
       </GalleryItem>
       <GalleryItem>
-      <Card>
+      <Card className="dashboard-card-border">
         <CardTitle><ClusterIcon /> Hosts</CardTitle>
         <CardBody>{infra.totalHosts}</CardBody>
       </Card>
       </GalleryItem>
       <GalleryItem>
-      <Card>
+      <Card className="dashboard-card-border">
         <CardTitle><i className="fas fa-microchip" /> CPU Cores</CardTitle>
         <CardBody>{cpuCores.total}</CardBody>
       </Card>
       </GalleryItem>
       <GalleryItem>
-      <Card>
+      <Card className="dashboard-card-border">
         <CardTitle><i className="fas fa-memory" />  Total Memory</CardTitle>
         <CardBody>{Humanize.fileSize(ramGB.total * 1024 ** 3, 0)}</CardBody>
       </Card>     
diff --git a/src/migration-wizard/steps/discovery/assessment-report/NetworkTopology.tsx b/src/migration-wizard/steps/discovery/assessment-report/NetworkTopology.tsx
index 86810b7..6fc719d 100644
--- a/src/migration-wizard/steps/discovery/assessment-report/NetworkTopology.tsx
+++ b/src/migration-wizard/steps/discovery/assessment-report/NetworkTopology.tsx
@@ -1,29 +1,34 @@
 import React from 'react';
-import {
-  Card,
-  CardBody,
-  CardTitle,
-} from '@patternfly/react-core';
+import { Card, CardBody, CardTitle } from '@patternfly/react-core';
 import { InfraNetworksInner } from '@migration-planner-ui/api-client/models';
 import { ReportTable } from '../ReportTable';
 import NetworkIcon from '@patternfly/react-icons/dist/esm/icons/network-icon';
 
 interface NetworkTopologyProps {
-  networks: InfraNetworksInner[]
+  networks: InfraNetworksInner[];
+  isExportMode?: boolean;
 }
 
-export const NetworkTopology: React.FC<NetworkTopologyProps> = ({networks}) => {
-
+export const NetworkTopology: React.FC<NetworkTopologyProps> = ({
+  networks,
+  isExportMode=false
+}) => {
+  const tableHeight = isExportMode ? '100%': '250px';
   return (
-        <Card>
-          <CardTitle><NetworkIcon/> Network Topology</CardTitle>
-          <CardBody>
+    <Card className={isExportMode ? "dashboard-card-print":"dashboard-card"}>
+      <CardTitle>
+        <NetworkIcon /> Network Topology
+      </CardTitle>
+      <CardBody>
+      <div style={{ maxHeight: tableHeight, overflowY: 'auto', overflowX:'auto',padding: 16 }}>
           <ReportTable<InfraNetworksInner>
             data={networks}
             columns={['Name', 'Type', 'VlanId']}
             fields={['name', 'type', 'vlanId']}
-          />
-          </CardBody>
-        </Card>
+            withoutBorder          
+            />
+        </div>
+      </CardBody>
+    </Card>
   );
 };
diff --git a/src/migration-wizard/steps/discovery/assessment-report/OSDistribution.tsx b/src/migration-wizard/steps/discovery/assessment-report/OSDistribution.tsx
index eeb18dd..9b68b43 100644
--- a/src/migration-wizard/steps/discovery/assessment-report/OSDistribution.tsx
+++ b/src/migration-wizard/steps/discovery/assessment-report/OSDistribution.tsx
@@ -1,29 +1,65 @@
 import React from 'react';
 import { Card, CardBody, CardTitle } from '@patternfly/react-core';
-
 import {
   Chart,
   ChartAxis,
   ChartBar,
   ChartGroup,
   ChartLabel,
-  ChartLegend,
   ChartThemeColor,
-  ChartTooltip,
 } from '@patternfly/react-charts';
 
 interface OSDistributionProps {
   osData: {
     [osName: string]: number;
   };
+  isExportMode?: boolean;
 }
 
-export const OSDistribution: React.FC<OSDistributionProps> = ({ osData }) => {
+export const OSDistribution: React.FC<OSDistributionProps> = ({ osData, isExportMode = false }) => {
+  const tableHeight = isExportMode ? '100%' : '200px';
+
   return (
-    <Card>
+    <Card className={isExportMode ? "dashboard-card-print" : "dashboard-card"}>
       <CardTitle>Operating Systems</CardTitle>
       <CardBody>
-        <OSBarChart osData={osData} />
+        <div style={{ display: 'flex', gap: '1.5rem', float: 'right' }}>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <span
+              style={{
+                width: 12,
+                height: 12,
+                backgroundColor: '#28a745',
+                display: 'inline-block',
+                marginRight: 6,
+              }}
+            />
+            {'Supported'}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <span
+              style={{
+                width: 12,
+                height: 12,
+                backgroundColor: '#d9534f',
+                display: 'inline-block',
+                marginRight: 6,
+              }}
+            />
+            {'Unsupported'}
+          </div>
+        </div>
+        <br/>
+        <div
+          style={{
+            maxHeight: tableHeight,
+            minWidth: '300px',
+            overflowY: 'auto',
+            overflowX: 'auto'
+          }}
+        >
+          <OSBarChart osData={osData} isExportMode={isExportMode} />
+        </div>
       </CardBody>
     </Card>
   );
@@ -31,74 +67,71 @@ export const OSDistribution: React.FC<OSDistributionProps> = ({ osData }) => {
 
 interface OSBarChartProps {
   osData: { [osName: string]: number };
+  isExportMode?: boolean;
 }
 
-export const OSBarChart: React.FC<OSBarChartProps> = ({ osData }) => {
+export const OSBarChart: React.FC<OSBarChartProps> = ({ osData, isExportMode }) => {
   const dataEntries = Object.entries(osData).filter(([os]) => os.trim() !== '');
 
-  const sorted = dataEntries.sort(([, a], [, b]) => a - b);
+  const sorted = dataEntries.sort(([, a], [, b]) => a - b); 
+
+  const chartHeight = sorted.length * 35 + 100;
+  const chartWidth = 500;
 
   const chartData = sorted.map(([os, count]) => ({
     x: os,
     y: count,
     label: `${count} VMs`,
+    fill: os.toLowerCase().includes('unsupported') ? '#d9534f' : '#28a745', 
   }));
 
-  const chartHeight = sorted.length * 35 + 100;
-
   return (
-    <div style={{ height: `${chartHeight}px` }}>
-      <Chart
-        ariaTitle="OS Distribution"
-        ariaDesc="Number of VMs per Operating System"
-        themeColor={ChartThemeColor.multi}
-        horizontal
-        height={chartHeight}
-        padding={{ top: 20, bottom: 60, left: 250, right: 50 }}
-        domainPadding={{ x: [10, 10], y: 10 }}
-      >
-        <ChartAxis
-          dependentAxis
-          style={{
-            axis: { stroke: 'none' },
-            ticks: { stroke: 'none' },
-            tickLabels: { fill: 'none' },
-          }}
-        />
-        <ChartAxis
-          showGrid={false}
-          style={{
-            axis: { stroke: 'none' },
-            ticks: { stroke: 'none' },
-            grid: { stroke: 'none' },
-          }}
-        />
-
-        <ChartGroup horizontal>
-          <ChartBar
-            data={chartData}
-            style={{
-              data: { fill: '#28a745' }, // verde para todos
-            }}
-            labels={({ datum }) => datum.label}
-            labelComponent={
-              <ChartLabel
-                textAnchor="start"
-                dx={10} // distancia horizontal desde la barra
-                style={{ fill: '#000', fontSize: 14 }}
-              />
-            }
-          />
-        </ChartGroup>
-      </Chart>
-
-      <ChartLegend
-        orientation="horizontal"
-        data={[{ name: 'Supported', symbol: { fill: '#28a745' } }]}
+    <Chart
+      ariaTitle="OS Distribution"
+      ariaDesc="Number of VMs per Operating System"
+      themeColor={ChartThemeColor.multi}
+      horizontal
+      height={chartHeight}
+      width={chartWidth}
+      padding={{ top: 20, bottom: 60, left: 300, right: 50 }}
+      domainPadding={{ x: [10, 10], y: 10 }}
+    >
+      <ChartAxis
+        dependentAxis
         style={{
-          labels: { fontSize: 14 },
+          axis: { stroke: 'none' },
+          ticks: { stroke: 'none' },
+          tickLabels: {
+            fill: 'none'
+          },
         }}
       />
-    </div>
+      <ChartAxis
+        showGrid={false}
+        style={{
+          axis: { stroke: 'none' },
+          ticks: { stroke: 'none' },
+          grid: { stroke: 'none' },
+        }}
+      />
+      <ChartGroup horizontal>
+        <ChartBar
+          data={chartData}
+          style={{
+            data: {
+              fill: ({ datum }) => datum.fill, // usa el color definido por cada dato
+            },
+          }}
+          labels={({ datum }) => datum.label}
+          labelComponent={
+            <ChartLabel
+              textAnchor="start"
+              dx={10}
+              style={{ fill: '#000', fontSize: 14 }}
+            />
+          }
+        />
+      </ChartGroup>
+    </Chart>
   );
 };
diff --git a/src/migration-wizard/steps/discovery/assessment-report/StorageOverview.tsx b/src/migration-wizard/steps/discovery/assessment-report/StorageOverview.tsx
index 1a7ac55..de31be7 100644
--- a/src/migration-wizard/steps/discovery/assessment-report/StorageOverview.tsx
+++ b/src/migration-wizard/steps/discovery/assessment-report/StorageOverview.tsx
@@ -14,32 +14,24 @@ interface DiskHistogramProps {
   data: number[];
   minValue: number;
   step: number;
+  isExportMode?: boolean;
 }
 
 export const StorageOverview: React.FC<DiskHistogramProps> = ({
   data,
   minValue,
   step,
+  isExportMode=false
 }) => {
+  const tableHeight = isExportMode ? '100%': '210px';
   return (
-    <Card>
-      <CardTitle><i className="fas fa-database" />  Disks</CardTitle>
+    <Card className={isExportMode ? "dashboard-card-print":"dashboard-card"}>
+      <CardTitle>
+        <i className="fas fa-database" /> Disks
+      </CardTitle>
       <CardBody>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: '1rem',
-            flexWrap: 'wrap', // por si no cabe en pantallas pequeñas
-          }}
-        >
-          <div >
-            Disk Size Distribution
-          </div>
-
-          {/* Leyenda */}
-          <div style={{ display: 'flex', gap: '1.5rem' }}>
+          <div>Disk Size Distribution
+          <div style={{ display: 'flex', gap: '1.5rem', float:'right' }}>
             <div style={{ display: 'flex', alignItems: 'center' }}>
               <span
                 style={{
@@ -50,7 +42,7 @@ export const StorageOverview: React.FC<DiskHistogramProps> = ({
                   marginRight: 6,
                 }}
               />
-              {'Easy'}
+              {'Small'}
             </div>
             <div style={{ display: 'flex', alignItems: 'center' }}>
               <span
@@ -74,11 +66,17 @@ export const StorageOverview: React.FC<DiskHistogramProps> = ({
                   marginRight: 6,
                 }}
               />
-              {'Hard'}
+              {'Large'}
             </div>
           </div>
-        </div>
+          </div>
+
+         
+        <div
+          style={{ maxHeight: tableHeight, minWidth: '60%', overflowY: 'auto', overflowX:'auto' }}
+        >
         <DiskUsageHistogram data={data} minValue={minValue} step={step} />
+        </div>
       </CardBody>
     </Card>
   );
@@ -107,23 +105,23 @@ export const DiskUsageHistogram: React.FC<DiskHistogramProps> = ({
   const chartHeight = chartData.length * 35 + 100;
 
   return (
-    <div style={{ height: `${chartHeight}px` }}>
+  
       <Chart
         horizontal
         themeColor={ChartThemeColor.multi}
-        height={chartHeight}
         ariaTitle="Disk Size distribution"
         ariaDesc="Distribution of VMs by disk size"
         padding={{ top: 20, bottom: 60, left: 120, right: 50 }}
-        domainPadding={{ x: [10, 10], y: 10 }}
+        domainPadding={{ x: [20, 20], y: 20 }}
         title="Disk Size distribution"
+        height={chartHeight}
       >
         <ChartAxis
           dependentAxis
           style={{
             axis: { stroke: 'none' },
             ticks: { stroke: 'none' },
-            tickLabels: { fill: 'none' },
+            tickLabels: { fill: 'none', fontSize: 10 },
           }}
         />
         <ChartAxis
@@ -132,6 +130,7 @@ export const DiskUsageHistogram: React.FC<DiskHistogramProps> = ({
             axis: { stroke: 'none' },
             ticks: { stroke: 'none' },
             grid: { stroke: 'none' },
+            tickLabels: { fontSize: 12 },
           }}
         />
         <ChartGroup horizontal>
@@ -142,7 +141,7 @@ export const DiskUsageHistogram: React.FC<DiskHistogramProps> = ({
               <ChartLabel
                 textAnchor="start"
                 dx={10} // distancia horizontal desde la barra
-                style={{ fill: '#000', fontSize: 14 }}
+                style={{ fill: '#000', fontSize: 10 }}
               />
             }
             style={{
@@ -155,10 +154,10 @@ export const DiskUsageHistogram: React.FC<DiskHistogramProps> = ({
                   return '#d9534f';
                 },
               },
+              labels:{fontSize: 10}
             }}
           />
         </ChartGroup>
       </Chart>
-    </div>
   );
 };
diff --git a/src/migration-wizard/steps/discovery/assessment-report/VMMigrationStatus.tsx b/src/migration-wizard/steps/discovery/assessment-report/VMMigrationStatus.tsx
index fa0dfd5..c313bdf 100644
--- a/src/migration-wizard/steps/discovery/assessment-report/VMMigrationStatus.tsx
+++ b/src/migration-wizard/steps/discovery/assessment-report/VMMigrationStatus.tsx
@@ -1,13 +1,6 @@
 import React from 'react';
-import {
-  ChartDonut,
-  ChartLegend,
-} from '@patternfly/react-charts';
-import {
-  Card,
-  CardBody,
-  CardTitle,
-} from '@patternfly/react-core';
+import { ChartDonut, ChartLegend } from '@patternfly/react-charts';
+import { Card, CardBody, CardTitle } from '@patternfly/react-core';
 import VirtualMachineIcon from '@patternfly/react-icons/dist/esm/icons/virtual-machine-icon';
 
 interface VmMigrationStatusProps {
@@ -15,10 +8,12 @@ interface VmMigrationStatusProps {
     migratable: number;
     nonMigratable: number;
   };
+  isExportMode?: boolean;
 }
 
 export const VMMigrationStatus: React.FC<VmMigrationStatusProps> = ({
   data,
+  isExportMode=false
 }) => {
   const chartData = [
     { x: 'Migratable', y: data.migratable },
@@ -26,32 +21,51 @@ export const VMMigrationStatus: React.FC<VmMigrationStatusProps> = ({
   ];
 
   return (
-    <Card>
-      <CardTitle><VirtualMachineIcon/> VM Migration Status</CardTitle>
+    <Card className={isExportMode ? "dashboard-card-print":"dashboard-card"}>
+      <CardTitle>
+        <VirtualMachineIcon /> VM Migration Status
+      </CardTitle>
       <CardBody>
-      <div style={{ height: '50%', width: '50%', marginLeft: '20%' }}>
-        <ChartDonut
-          ariaDesc="VM Migration Status"
-          ariaTitle="VM Migration"
-          data={chartData}
-          labels={({ datum }) => `${datum.x}: ${datum.y}`}
-          colorScale={['#28a745', '#dc3545']} // Verde y rojo personalizados
-          innerRadius={100}
-          constrainToVisibleArea
-          title={`${data.migratable + data.nonMigratable}`}
-          subTitle="VMs"
-        />
-        <ChartLegend
-          data={[
-            { name: 'Migratable', symbol: { fill: '#28a745' } },
-            { name: 'Non-Migratable', symbol: { fill: '#dc3545' } },
-          ]}
-          orientation="horizontal"
+        <div
           style={{
-            labels: { fontSize: 24 },
-            parent: { marginBottom: '-150px'}
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
           }}
-        />
+        >
+          <ChartDonut
+            ariaDesc="VM Migration Status"
+            ariaTitle="VM Migration"
+            data={chartData}
+            labels={({ datum }) => `${datum.x}: ${datum.y}`}
+            colorScale={['#28a745', '#dc3545']}
+            constrainToVisibleArea
+            title={`${data.migratable + data.nonMigratable}`}
+            subTitle="VMs"
+          />
+          <div
+            style={{
+              marginLeft: '20%',
+            }}
+          >
+            <ChartLegend
+              data={[
+                {
+                  name: `Migratable: ${data.migratable} VMs`,
+                  symbol: { fill: '#28a745' },
+                },
+                {
+                  name: `Non-Migratable: ${data.nonMigratable} VMs`,
+                  symbol: { fill: '#dc3545' },
+                },
+              ]}
+              orientation="horizontal"
+              style={{
+                labels: { fontSize: 14 },
+                parent: { marginTop: 8 },
+              }}
+            />
+          </div>
         </div>
       </CardBody>
     </Card>