diff --git a/web/src/api/buster_rest/metrics/queryRequests.ts b/web/src/api/buster_rest/metrics/queryRequests.ts
index e8b0b25b2..6923c7bd7 100644
--- a/web/src/api/buster_rest/metrics/queryRequests.ts
+++ b/web/src/api/buster_rest/metrics/queryRequests.ts
@@ -36,36 +36,41 @@ import { RustApiError } from '../../buster_rest/errors';
 export const useGetMetric = <TData = IBusterMetric>(
   {
     id,
-    version_number: version_number_prop
+    versionNumber: versionNumberProp
   }: {
     id: string | undefined;
-    version_number?: number | null; //if null it will not use a params from the query params
+    versionNumber?: number | null; //if null it will not use a params from the query params
   },
   params?: Omit<UseQueryOptions<IBusterMetric, RustApiError, TData>, 'queryKey' | 'queryFn'>
 ) => {
+  const queryClient = useQueryClient();
   const setOriginalMetric = useOriginalMetricStore((x) => x.setOriginalMetric);
-  const { versionNumber: versionNumberPathParam } = useParams() as {
-    versionNumber: string | undefined;
-  };
-  const versionNumberQueryParam = useSearchParams().get('versionNumber');
-  const versionNumber = versionNumberQueryParam || versionNumberPathParam;
   const getAssetPassword = useBusterAssetsContextSelector((x) => x.getAssetPassword);
   const setAssetPasswordError = useBusterAssetsContextSelector((x) => x.setAssetPasswordError);
   const { password } = getAssetPassword(id!);
 
-  const queryClient = useQueryClient();
+  const { versionNumber: versionNumberPathParam, metricId: metricIdPathParam } = useParams() as {
+    versionNumber: string | undefined;
+    metricId: string | undefined;
+  };
+  const versionNumberQueryParam = useSearchParams().get('versionNumber');
+  const versionNumberFromParams = metricIdPathParam
+    ? versionNumberQueryParam || versionNumberPathParam
+    : undefined;
 
-  const version_number = useMemo(() => {
-    if (version_number_prop === null) return undefined;
-    return version_number_prop || versionNumber ? parseInt(versionNumber!) : undefined;
-  }, [version_number_prop, versionNumber]);
+  const versionNumber = useMemo(() => {
+    if (versionNumberProp === null) return undefined;
+    return versionNumberProp || versionNumberFromParams
+      ? parseInt(versionNumberFromParams!)
+      : undefined;
+  }, [versionNumberProp, versionNumberFromParams]);
 
   const options = useMemo(() => {
-    return metricsQueryKeys.metricsGetMetric(id!, version_number);
-  }, [id, version_number]);
+    return metricsQueryKeys.metricsGetMetric(id!, versionNumber);
+  }, [id, versionNumber]);
 
   const queryFn = useMemoizedFn(async () => {
-    const result = await getMetric({ id: id!, password, version_number });
+    const result = await getMetric({ id: id!, password, version_number: versionNumber });
     const oldMetric = queryClient.getQueryData(options.queryKey);
     const updatedMetric = upgradeMetricToIMetric(result, oldMetric || null);
     setOriginalMetric(updatedMetric);
@@ -108,32 +113,38 @@ export const useGetMetricsList = (
  */
 export const useGetMetricData = ({
   id,
-  version_number: version_number_prop
+  versionNumber: versionNumberProp
 }: {
   id: string | undefined;
-  version_number?: number;
+  versionNumber?: number;
 }) => {
   const {
     isFetched: isFetchedMetric,
     error: errorMetric,
     data: fetchedMetricData
   } = useGetMetric({ id }, { select: (x) => x.id });
-  const { versionNumber: versionNumberPathParam } = useParams() as {
+  const { versionNumber: versionNumberPathParam, metricId: metricIdPathParam } = useParams() as {
     versionNumber: string | undefined;
+    metricId: string | undefined;
   };
   const versionNumberQueryParam = useSearchParams().get('versionNumber');
-  const versionNumber = versionNumberQueryParam || versionNumberPathParam;
+  const versionNumberFromParams = metricIdPathParam
+    ? versionNumberQueryParam || versionNumberPathParam
+    : undefined;
 
-  const version_number = useMemo(() => {
-    return version_number_prop || versionNumber ? parseInt(versionNumber!) : undefined;
-  }, [version_number_prop, versionNumber]);
+  const versionNumber = useMemo(() => {
+    if (versionNumberProp === null) return undefined;
+    return versionNumberProp || versionNumberFromParams
+      ? parseInt(versionNumberFromParams!)
+      : undefined;
+  }, [versionNumberProp, versionNumberFromParams]);
 
   const queryFn = useMemoizedFn(() => {
-    return getMetricData({ id: id!, version_number });
+    return getMetricData({ id: id!, version_number: versionNumber });
   });
 
   return useQuery({
-    ...metricsQueryKeys.metricsGetData(id!, version_number),
+    ...metricsQueryKeys.metricsGetData(id!, versionNumber),
     queryFn,
     enabled: () => {
       return !!id && isFetchedMetric && !errorMetric && !!fetchedMetricData;
diff --git a/web/src/api/query_keys/dashboard.ts b/web/src/api/query_keys/dashboard.ts
index 77db00462..c58cb46cf 100644
--- a/web/src/api/query_keys/dashboard.ts
+++ b/web/src/api/query_keys/dashboard.ts
@@ -17,7 +17,7 @@ const dashboardGetList = (
 
 const dashboardGetDashboard = (dashboardId: string, version_number?: number) =>
   queryOptions<BusterDashboardResponse>({
-    queryKey: ['dashboard', 'get', dashboardId, version_number] as const,
+    queryKey: ['dashboard', 'get', dashboardId, version_number || 'latest'] as const,
     staleTime: 10 * 1000
   });
 
diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/dashboards/[dashboardId]/version/[versionNumber]/page.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/dashboards/[dashboardId]/version/[versionNumber]/page.tsx
index 0306c93c4..d0d677b35 100644
--- a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/dashboards/[dashboardId]/version/[versionNumber]/page.tsx
+++ b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/dashboards/[dashboardId]/version/[versionNumber]/page.tsx
@@ -1,4 +1,10 @@
-export default async function Page({ params }: { params: Promise<{ versionNumber: string }> }) {
-  const { versionNumber } = await params;
-  return <div>Version {versionNumber}</div>;
+import { DashboardViewDashboardController } from '@/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController';
+
+export default async function Page({
+  params
+}: {
+  params: Promise<{ versionNumber: string; dashboardId: string; chatId: string }>;
+}) {
+  const { versionNumber, dashboardId, chatId } = await params;
+  return <DashboardViewDashboardController dashboardId={dashboardId} chatId={chatId} readOnly />;
 }
diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/version/[versionNumber]/page.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/version/[versionNumber]/page.tsx
index 747dea405..e564bdcca 100644
--- a/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/version/[versionNumber]/page.tsx
+++ b/web/src/app/app/(primary_layout)/(chat_experience)/chats/[chatId]/metrics/[metricId]/version/[versionNumber]/page.tsx
@@ -1,9 +1,11 @@
+import { MetricViewChart } from '@/controllers/MetricController/MetricViewChart';
+
 export default async function MetricVersionPage({
   params
 }: {
-  params: Promise<{ versionNumber: string }>;
+  params: Promise<{ versionNumber: string; metricId: string }>;
 }) {
-  const { versionNumber } = await params;
+  const { versionNumber, metricId } = await params;
 
-  return <div>MetricVersionPage {versionNumber}</div>;
+  return <MetricViewChart metricId={metricId} />;
 }
diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/dashboards/[dashboardId]/version/[versionNumber]/page.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/dashboards/[dashboardId]/version/[versionNumber]/page.tsx
index 22dcf8196..ecc4f55aa 100644
--- a/web/src/app/app/(primary_layout)/(chat_experience)/dashboards/[dashboardId]/version/[versionNumber]/page.tsx
+++ b/web/src/app/app/(primary_layout)/(chat_experience)/dashboards/[dashboardId]/version/[versionNumber]/page.tsx
@@ -1,8 +1,10 @@
+import { DashboardViewDashboardController } from '@/controllers/DashboardController/DashboardViewDashboardController';
+
 export default async function DashboardVersionPage({
   params
 }: {
-  params: Promise<{ versionNumber: string }>;
+  params: Promise<{ versionNumber: string; dashboardId: string }>;
 }) {
-  const { versionNumber } = await params;
-  return <div>DashboardVersionPage {versionNumber}</div>;
+  const { versionNumber, dashboardId } = await params;
+  return <DashboardViewDashboardController dashboardId={dashboardId} chatId={undefined} readOnly />;
 }
diff --git a/web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/version/[versionNumber]/page.tsx b/web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/version/[versionNumber]/page.tsx
index e6374f152..9aa40a2b1 100644
--- a/web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/version/[versionNumber]/page.tsx
+++ b/web/src/app/app/(primary_layout)/(chat_experience)/metrics/[metricId]/version/[versionNumber]/page.tsx
@@ -1,8 +1,10 @@
+import { MetricViewChart } from '@/controllers/MetricController/MetricViewChart';
+
 export default async function MetricVersionPage({
   params
 }: {
-  params: Promise<{ versionNumber: string }>;
+  params: Promise<{ versionNumber: string; metricId: string }>;
 }) {
-  const { versionNumber } = await params;
-  return <div>MetricVersionPage {versionNumber}</div>;
+  const { versionNumber, metricId } = await params;
+  return <MetricViewChart metricId={metricId} />;
 }
diff --git a/web/src/components/ui/grid/BusterResizeColumns.tsx b/web/src/components/ui/grid/BusterResizeColumns.tsx
index c211cfb0e..17a4aa012 100644
--- a/web/src/components/ui/grid/BusterResizeColumns.tsx
+++ b/web/src/components/ui/grid/BusterResizeColumns.tsx
@@ -137,7 +137,7 @@ export const BusterResizeColumns: React.FC<ContainerProps> = ({
 
   return (
     <SortableContext id={rowId} items={items} disabled={false}>
-      <div ref={setNodeRef} className="relative h-full w-full">
+      <div ref={setNodeRef} className="buster-resize-columns relative h-full w-full">
         <BusterDragColumnMarkers
           isDraggingIndex={columnMarkerColumnIndex}
           itemsLength={items.length}
diff --git a/web/src/components/ui/grid/BusterResizeableGrid.tsx b/web/src/components/ui/grid/BusterResizeableGrid.tsx
index aa37855a8..d7f751c48 100644
--- a/web/src/components/ui/grid/BusterResizeableGrid.tsx
+++ b/web/src/components/ui/grid/BusterResizeableGrid.tsx
@@ -18,12 +18,12 @@ import {
 import { arrayMove } from '@dnd-kit/sortable';
 import { BusterSortableOverlay } from './_BusterSortableOverlay';
 import { BusterResizeableGridRow } from './interfaces';
-import clsx from 'clsx';
 import { v4 as uuidv4 } from 'uuid';
 import { useMemoizedFn } from '@/hooks';
 import isEqual from 'lodash/isEqual';
 import { BusterResizeRows } from './BusterResizeRows';
 import { NUMBER_OF_COLUMNS, NEW_ROW_ID, MIN_ROW_HEIGHT, TOP_SASH_ID } from './helpers';
+import { cn } from '@/lib/utils';
 
 const measuringConfig = {
   droppable: {
@@ -331,7 +331,7 @@ export const BusterResizeableGrid: React.FC<{
       onDragCancel={onDragCancel}
       collisionDetection={collisionDetectionStrategy}
       sensors={sensors}>
-      <div className={clsx('h-full w-full', 'buster-resizeable-grid', className)}>
+      <div className={cn('buster-resizeable-grid h-full w-full', className)}>
         <BusterResizeRows
           rows={rows}
           className={className}
diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx
index 90e1dfc1d..12b1ce83f 100644
--- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx
+++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx
@@ -19,6 +19,7 @@ import type {
 } from '@/api/asset_interfaces';
 import { DashboardEmptyState } from './DashboardEmptyState';
 import { type useUpdateDashboardConfig } from '@/api/buster_rest/dashboards';
+import last from 'lodash/last';
 
 const DEFAULT_EMPTY_ROWS: DashboardConfig['rows'] = [];
 const DEFAULT_EMPTY_METRICS: Record<string, BusterMetric> = {};
@@ -61,6 +62,12 @@ export const DashboardContentController: React.FC<{
           return {
             ...row,
             items: row.items.map((item) => {
+              const selectedMetric = metrics[item.id];
+              const versionNumber =
+                last(selectedMetric.versions)?.version_number === selectedMetric.version_number
+                  ? undefined
+                  : selectedMetric.version_number;
+
               return {
                 ...item,
                 children: (
@@ -71,6 +78,7 @@ export const DashboardContentController: React.FC<{
                     readOnly={readOnly}
                     chatId={chatId}
                     numberOfMetrics={numberOfMetrics}
+                    versionNumber={versionNumber}
                   />
                 )
               };
@@ -104,6 +112,8 @@ export const DashboardContentController: React.FC<{
       }
     }, [dashboard?.id, remapMetrics]);
 
+    console.log(hasMetrics, dashboardRows, dashboard);
+
     return (
       <div className="dashboard-content-controller">
         {hasMetrics && !!dashboardRows.length && !!dashboard ? (
@@ -118,11 +128,12 @@ export const DashboardContentController: React.FC<{
                 draggingId && (
                   <DashboardMetricItem
                     metricId={draggingId}
-                    readOnly={false}
+                    readOnly={true}
                     dashboardId={dashboard.id}
                     isDragOverlay
                     numberOfMetrics={numberOfMetrics}
                     chatId={undefined}
+                    versionNumber={metrics[draggingId]?.version_number}
                   />
                 )
               }
diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
index 380f3e8de..845f06ef0 100644
--- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
+++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
@@ -9,6 +9,7 @@ import { BusterChart } from '@/components/ui/charts/BusterChart';
 
 const DashboardMetricItemBase: React.FC<{
   metricId: string;
+  versionNumber: number | undefined;
   chatId: string | undefined;
   dashboardId: string;
   numberOfMetrics: number;
@@ -18,6 +19,7 @@ const DashboardMetricItemBase: React.FC<{
 }> = ({
   readOnly,
   dashboardId,
+  versionNumber,
   className = '',
   metricId,
   isDragOverlay = false,
@@ -32,7 +34,7 @@ const DashboardMetricItemBase: React.FC<{
     initialAnimationEnded,
     setInitialAnimationEnded,
     isFetchedMetricData
-  } = useDashboardMetric({ metricId });
+  } = useDashboardMetric({ metricId, versionNumber });
 
   const loadingMetricData = !!metric && !isFetchedMetricData;
   const chartOptions = metric?.chart_config;
@@ -69,8 +71,6 @@ const DashboardMetricItemBase: React.FC<{
     setInitialAnimationEnded(metricId);
   });
 
-  if (!chartOptions) return null;
-
   return (
     <Card
       ref={conatinerRef}
@@ -96,7 +96,7 @@ const DashboardMetricItemBase: React.FC<{
           isTable ? '' : 'p-3',
           isDragOverlay ? 'pointer-events-none' : 'pointer-events-auto'
         )}>
-        {renderChart && (
+        {renderChart && chartOptions && (
           <BusterChart
             data={data}
             loading={loading}
@@ -115,5 +115,9 @@ const DashboardMetricItemBase: React.FC<{
 };
 
 export const DashboardMetricItem = React.memo(DashboardMetricItemBase, (prev, next) => {
-  return prev.metricId === next.metricId && prev.dashboardId === next.dashboardId;
+  return (
+    prev.metricId === next.metricId &&
+    prev.dashboardId === next.dashboardId &&
+    prev.versionNumber === next.versionNumber
+  );
 });
diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/useDashboardMetric.ts b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/useDashboardMetric.ts
index d1caeed8e..33805b233 100644
--- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/useDashboardMetric.ts
+++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/useDashboardMetric.ts
@@ -3,9 +3,15 @@ import { useEffect, useMemo, useRef } from 'react';
 import { useInViewport } from '@/hooks';
 import { useGetMetric, useGetMetricData } from '@/api/buster_rest/metrics';
 
-export const useDashboardMetric = ({ metricId }: { metricId: string }) => {
+export const useDashboardMetric = ({
+  metricId,
+  versionNumber
+}: {
+  metricId: string;
+  versionNumber: number | undefined;
+}) => {
   const { data: metric, isFetched: isMetricFetched } = useGetMetric(
-    { id: metricId },
+    { id: metricId, versionNumber },
     {
       select: ({
         name,
@@ -32,7 +38,7 @@ export const useDashboardMetric = ({ metricId }: { metricId: string }) => {
     data: metricData,
     isFetched: isFetchedMetricData,
     dataUpdatedAt: metricDataUpdatedAt
-  } = useGetMetricData({ id: metricId });
+  } = useGetMetricData({ id: metricId, versionNumber });
   const dashboard = useDashboardContentControllerContextSelector(({ dashboard }) => dashboard);
   const metricMetadata = useDashboardContentControllerContextSelector(
     ({ metricMetadata }) => metricMetadata[metricId]
diff --git a/web/src/layouts/DashboardLayout/DashboardLayoutContainer.tsx b/web/src/layouts/DashboardLayout/DashboardLayoutContainer.tsx
index 8b86e1d33..72e61709a 100644
--- a/web/src/layouts/DashboardLayout/DashboardLayoutContainer.tsx
+++ b/web/src/layouts/DashboardLayout/DashboardLayoutContainer.tsx
@@ -10,23 +10,24 @@ export const DashboardLayoutContainer: React.FC<{
   children: React.ReactNode;
   dashboardId: string;
 }> = ({ children, dashboardId }) => {
-  const { data: permission } = useGetDashboard(
-    { id: dashboardId },
-    { select: (x) => x.permission }
-  );
-  const isEditor = canEdit(permission);
-
   return (
     <>
       {children}
-      {isEditor && <MemoizedAddToDashboardModal dashboardId={dashboardId} />}
+      <MemoizedAddToDashboardModal dashboardId={dashboardId} />
     </>
   );
 };
 
 const MemoizedAddToDashboardModal = React.memo(({ dashboardId }: { dashboardId: string }) => {
+  const { data: permission } = useGetDashboard(
+    { id: dashboardId },
+    { select: (x) => x.permission }
+  );
+  const isEditor = canEdit(permission);
   const { openAddContentModal, onCloseAddContentModal } = useDashboardContentStore();
 
+  if (!isEditor) return null;
+
   return (
     <AddToDashboardModal
       open={openAddContentModal}