diff --git a/src/@types/parseable/api/dashboards.ts b/src/@types/parseable/api/dashboards.ts
index 095f1eeb..c71108dc 100644
--- a/src/@types/parseable/api/dashboards.ts
+++ b/src/@types/parseable/api/dashboards.ts
@@ -52,6 +52,10 @@ export type UpdateDashboardType = Omit<Dashboard, 'tiles'> & {
 	tiles: EditTileType[];
 };
 
+export type ImportDashboardType = Omit<Dashboard, 'tiles' | 'dashboard_id'> & {
+	tiles: EditTileType[];
+};
+
 export type TileQuery = { query: string; startTime: Date; endTime: Date };
 
 export type TileData = Log[];
diff --git a/src/api/dashboard.ts b/src/api/dashboard.ts
index 5452ce03..f6f840b2 100644
--- a/src/api/dashboard.ts
+++ b/src/api/dashboard.ts
@@ -11,6 +11,7 @@ import _ from 'lodash';
 import {
 	CreateDashboardType,
 	Dashboard,
+	ImportDashboardType,
 	TileQuery,
 	TileQueryResponse,
 	UpdateDashboardType,
@@ -26,7 +27,7 @@ export const putDashboard = (dashboardId: string, dashboard: UpdateDashboardType
 	return Axios().put(UPDATE_DASHBOARDS_URL(dashboardId), dashboard);
 };
 
-export const postDashboard = (dashboard: CreateDashboardType) => {
+export const postDashboard = (dashboard: CreateDashboardType | ImportDashboardType) => {
 	return Axios().post(CREATE_DASHBOARDS_URL, { ...dashboard});
 };
 
diff --git a/src/hooks/useDashboards.tsx b/src/hooks/useDashboards.tsx
index ab1adf35..d24bda84 100644
--- a/src/hooks/useDashboards.tsx
+++ b/src/hooks/useDashboards.tsx
@@ -8,6 +8,7 @@ import { useCallback, useState } from 'react';
 import {
 	CreateDashboardType,
 	Dashboard,
+	ImportDashboardType,
 	TileQuery,
 	TileQueryResponse,
 	UpdateDashboardType,
@@ -62,6 +63,29 @@ export const useDashboardsQuery = (opts: { updateTimeRange?: (dashboard: Dashboa
 		},
 	);
 
+	const { mutate: importDashboard, isLoading: isImportingDashboard } = useMutation(
+		(data: { dashboard: ImportDashboardType; onSuccess?: () => void }) => postDashboard(data.dashboard),
+		{
+			onSuccess: (response, variables) => {
+				const { dashboard_id } = response.data;
+				if (_.isString(dashboard_id) && !_.isEmpty(dashboard_id)) {
+					setDashboardsStore((store) => selectDashboard(store, null, response.data));
+				}
+				fetchDashboards();
+				variables.onSuccess && variables.onSuccess();
+				notifySuccess({ message: 'Created Successfully' });
+			},
+			onError: (data: AxiosError) => {
+				if (isAxiosError(data) && data.response) {
+					const error = data.response?.data as string;
+					typeof error === 'string' && notifyError({ message: error });
+				} else if (data.message && typeof data.message === 'string') {
+					notifyError({ message: data.message });
+				}
+			},
+		},
+	);
+
 	const { mutate: updateDashboard, isLoading: isUpdatingDashboard } = useMutation(
 		(data: { dashboard: UpdateDashboardType; onSuccess?: () => void }) => {
 			return putDashboard(data.dashboard.dashboard_id, data.dashboard);
@@ -113,6 +137,8 @@ export const useDashboardsQuery = (opts: { updateTimeRange?: (dashboard: Dashboa
 		isCreatingDashboard,
 		updateDashboard,
 		isUpdatingDashboard,
+		importDashboard,
+		isImportingDashboard,
 
 		deleteDashboard,
 		isDeleting,
diff --git a/src/pages/Dashboards/Dashboard.tsx b/src/pages/Dashboards/Dashboard.tsx
index 3ae1367d..f33b8882 100644
--- a/src/pages/Dashboards/Dashboard.tsx
+++ b/src/pages/Dashboards/Dashboard.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Modal, Stack, Text } from '@mantine/core';
+import { Box, Button, Divider, FileInput, Modal, Stack, Text } from '@mantine/core';
 import Toolbar from './Toolbar';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
@@ -6,27 +6,67 @@ import './styles/ReactGridLayout.css';
 import GridLayout from 'react-grid-layout';
 import { DASHBOARDS_SIDEBAR_WIDTH, NAVBAR_WIDTH } from '@/constants/theme';
 import classes from './styles/DashboardView.module.css';
-import { useDashboardsStore, dashboardsStoreReducers, assignOrderToTiles } from './providers/DashboardsProvider';
+import {
+	useDashboardsStore,
+	dashboardsStoreReducers,
+	assignOrderToTiles,
+	TILES_PER_PAGE,
+} from './providers/DashboardsProvider';
 import _ from 'lodash';
 import { IconLayoutDashboard } from '@tabler/icons-react';
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { makeExportClassName } from '@/utils/exportImage';
 import { useDashboardsQuery } from '@/hooks/useDashboards';
 import Tile from './Tile';
 import { Layout } from 'react-grid-layout';
+import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
+import { ImportDashboardType } from '@/@types/parseable/api/dashboards';
+import { templates } from './assets/templates';
 
-const { toggleCreateDashboardModal, toggleCreateTileModal, toggleDeleteTileModal } = dashboardsStoreReducers;
+const { toggleCreateDashboardModal, toggleCreateTileModal, toggleDeleteTileModal, handlePaging, toggleImportDashboardModal } =
+	dashboardsStoreReducers;
 
 const TilesView = (props: { onLayoutChange: (layout: Layout[]) => void }) => {
-	const [activeDashboard] = useDashboardsStore((store) => store.activeDashboard);
+	const [activeDashboard, setDashbaordsStore] = useDashboardsStore((store) => store.activeDashboard);
 	const [allowDrag] = useDashboardsStore((store) => store.allowDrag);
 	const [layout] = useDashboardsStore((store) => store.layout);
-	const hasNoTiles = _.size(activeDashboard?.tiles) < 1;
+	const [currentPage] = useDashboardsStore((store) => store.currentPage);
+	const scrollRef = useRef(null);
+	const tilesCount = _.size(activeDashboard?.tiles);
+	const hasNoTiles = tilesCount < 1;
 	const showNoTilesView = hasNoTiles || !activeDashboard;
+	const shouldAppendTileRef = useRef<boolean>(false);
+
+	const handleScroll = useCallback(
+		_.throttle(() => {
+			const element = scrollRef.current as HTMLElement | null;
+			if (element && element.scrollHeight - element.scrollTop === element.clientHeight) {
+				if (shouldAppendTileRef.current) {
+					return setDashbaordsStore(handlePaging);
+				}
+			}
+		}, 500),
+		[],
+	);
+
+	useEffect(() => {
+		const element = scrollRef.current as HTMLElement | null;
+		if (element) {
+			element.addEventListener('scroll', handleScroll);
+			return () => {
+				element.removeEventListener('scroll', handleScroll);
+			};
+		}
+	}, []);
+
+	useEffect(() => {
+		shouldAppendTileRef.current = tilesCount > TILES_PER_PAGE * currentPage;
+	}, [currentPage, tilesCount]);
+
 	if (showNoTilesView) return <NoTilesView />;
 
 	return (
-		<Stack className={classes.tilesViewConatiner} style={{ overflowY: 'scroll' }}>
+		<Stack ref={scrollRef} className={classes.tilesViewConatiner} style={{ overflowY: 'scroll' }}>
 			<GridLayout
 				className="layout"
 				layout={layout}
@@ -111,6 +151,115 @@ const DeleteTileModal = () => {
 	);
 };
 
+const DashboardTemplates = (props: {onImport: (template: ImportDashboardType) => void; isImportingDashboard: boolean}) => {
+	return (
+		<Stack gap={0} mt={6}>
+			{_.map(templates, (template) => {
+				return (
+					<Stack style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+						<Text style={{ fontSize: '0.76rem' }} c="gray.7">
+							{template.name}
+						</Text>
+						<Box>
+							<Button
+								disabled={props.isImportingDashboard}
+								loading={props.isImportingDashboard}
+								onClick={() => props.onImport(template)}
+								variant="outline">
+								Select
+							</Button>
+						</Box>
+					</Stack>
+				);
+			})}
+		</Stack>
+	);
+}
+
+const ImportDashboardModal = () => {
+	const [importDashboardModalOpen, setDashboardStore] = useDashboardsStore((store) => store.importDashboardModalOpen);
+	const [activeDashboard] = useDashboardsStore((store) => store.activeDashboard);
+	const [isStandAloneMode] = useAppStore(store => store.isStandAloneMode)
+	const [file, setFile] = useState<File | null>(null);
+	const closeModal = useCallback(() => {
+		setDashboardStore((store) => toggleImportDashboardModal(store, false));
+	}, []);
+	const { importDashboard, isImportingDashboard } = useDashboardsQuery({});
+	const makePostCall = useCallback((dashboard: ImportDashboardType) => {
+		return importDashboard({
+			dashboard,
+			onSuccess: () => {
+				closeModal();
+				setFile(null);
+			},
+		});
+	}, []);
+
+	const onImport = useCallback(() => {
+		if (activeDashboard === null || file === null) return;
+
+		if (file) {
+			const reader = new FileReader();
+			reader.onload = (e: ProgressEvent<FileReader>) => {
+				try {
+					const target = e.target;
+					if (target === null || typeof target.result !== 'string') return;
+
+					const newDashboard: ImportDashboardType = JSON.parse(target.result);
+					if (_.isEmpty(newDashboard)) return;
+
+					return makePostCall(newDashboard)
+				} catch (error) {}
+			};
+			reader.readAsText(file);
+		} else {
+			console.error('No file selected.');
+		}
+	}, [activeDashboard, file]);
+
+	return (
+		<Modal
+			opened={importDashboardModalOpen}
+			onClose={closeModal}
+			size="auto"
+			centered
+			styles={{
+				body: { padding: '0 1rem 1rem 1rem', width: 400 },
+				header: { padding: '1rem', paddingBottom: '0.4rem' },
+			}}
+			title={<Text style={{ fontSize: '0.9rem', fontWeight: 600 }}>Import Dashboard</Text>}>
+			<Stack gap={24}>
+				{!isStandAloneMode && (
+					<>
+						<DashboardTemplates onImport={makePostCall} isImportingDashboard={isImportingDashboard} />
+						<Divider label="OR" />
+					</>
+				)}
+				<FileInput
+					style={{ marginTop: '0.25rem' }}
+					label=""
+					placeholder="Import dashboard config downloaded from Parseable"
+					fileInputProps={{ accept: '.json' }}
+					value={file}
+					onChange={setFile}
+				/>
+				<Stack style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
+					<Box>
+						<Button onClick={closeModal} variant="outline">
+							Cancel
+						</Button>
+					</Box>
+					<Box>
+						<Button disabled={file === null || isImportingDashboard} onClick={onImport} loading={isImportingDashboard}>
+							Import
+						</Button>
+					</Box>
+				</Stack>
+			</Stack>
+		</Modal>
+	);
+};
+
 const NoDashboardsView = () => {
 	const [, setDashboardsStore] = useDashboardsStore((_store) => null);
 
@@ -118,8 +267,13 @@ const NoDashboardsView = () => {
 		setDashboardsStore((store) => toggleCreateDashboardModal(store, true));
 	}, []);
 
+	const openImportDashboardModal = useCallback(() => {
+		setDashboardsStore((store) => toggleImportDashboardModal(store, true));
+	}, []);
+
 	return (
 		<Stack className={classes.noDashboardsContainer} gap={4}>
+			<ImportDashboardModal />
 			<Stack className={classes.dashboardIconContainer}>
 				<IconLayoutDashboard className={classes.dashboardIcon} stroke={1.2} />
 			</Stack>
@@ -127,9 +281,16 @@ const NoDashboardsView = () => {
 			<Text className={classes.noDashboardsViewDescription}>
 				Create your first dashboard to visualize log events from various streams.
 			</Text>
-			<Box mt={4}>
-				<Button onClick={openCreateDashboardModal}>Create Dashboard</Button>
-			</Box>
+			<Stack gap={14} mt={4}>
+				<Box>
+					<Button variant="outline" onClick={openImportDashboardModal}>
+						Import Dashboard
+					</Button>
+				</Box>
+				<Box>
+					<Button onClick={openCreateDashboardModal}>Create Dashboard</Button>
+				</Box>
+			</Stack>
 		</Stack>
 	);
 };
@@ -173,6 +334,7 @@ const Dashboard = () => {
 		<Stack style={{ flex: 1 }} gap={0}>
 			<DeleteTileModal />
 			<Toolbar layoutRef={layoutRef} />
+			<ImportDashboardModal/>
 			<TilesView onLayoutChange={onLayoutChange} />
 		</Stack>
 	);
diff --git a/src/pages/Dashboards/SideBar.tsx b/src/pages/Dashboards/SideBar.tsx
index e2006edb..f2eb192f 100644
--- a/src/pages/Dashboards/SideBar.tsx
+++ b/src/pages/Dashboards/SideBar.tsx
@@ -1,16 +1,14 @@
 import { DASHBOARDS_SIDEBAR_WIDTH } from '@/constants/theme';
-import { Box, Button, FileInput, Modal, px, ScrollArea, Stack, Text } from '@mantine/core';
+import { Button, px, ScrollArea, Stack, Text } from '@mantine/core';
 import classes from './styles/sidebar.module.css';
 import { IconFileDownload, IconPlus } from '@tabler/icons-react';
 import { useDashboardsStore, dashboardsStoreReducers } from './providers/DashboardsProvider';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import _ from 'lodash';
 import { Dashboard } from '@/@types/parseable/api/dashboards';
 import IconButton from '@/components/Button/IconButton';
-import { useDashboardsQuery } from '@/hooks/useDashboards';
 
-const { selectDashboard, toggleCreateDashboardModal, toggleImportDashboardModal } =
-	dashboardsStoreReducers;
+const { selectDashboard, toggleCreateDashboardModal, toggleImportDashboardModal } = dashboardsStoreReducers;
 interface DashboardItemProps extends Dashboard {
 	activeDashboardId: undefined | string;
 	onSelect: (id: string) => void;
@@ -67,79 +65,6 @@ const DashboardList = (props: { updateTimeRange: (dashboard: Dashboard) => void
 	);
 };
 
-const ImportDashboardModal = () => {
-	const [importDashboardModalOpen, setDashboardStore] = useDashboardsStore((store) => store.importDashboardModalOpen);
-	const [activeDashboard] = useDashboardsStore((store) => store.activeDashboard);
-	const [file, setFile] = useState<File | null>(null);
-	const closeModal = useCallback(() => {
-		setDashboardStore((store) => toggleImportDashboardModal(store, false));
-	}, []);
-	const { createDashboard, isCreatingDashboard } = useDashboardsQuery({});
-	const onImport = useCallback(() => {
-		if (activeDashboard === null || file === null) return;
-
-		if (file) {
-			const reader = new FileReader();
-			reader.onload = (e: ProgressEvent<FileReader>) => {
-				try {
-					const target = e.target;
-					if (target === null || typeof target.result !== 'string') return;
-
-					const newDashboard = JSON.parse(target.result);
-					if (_.isEmpty(newDashboard)) return;
-
-					return createDashboard({
-						dashboard: newDashboard,
-						onSuccess: () => {
-							closeModal();
-							setFile(null);
-						},
-					});
-				} catch (error) {}
-			};
-			reader.readAsText(file);
-		} else {
-			console.error('No file selected.');
-		}
-	}, [activeDashboard, file]);
-
-	return (
-		<Modal
-			opened={importDashboardModalOpen}
-			onClose={closeModal}
-			size="auto"
-			centered
-			styles={{
-				body: { padding: '0 1rem 1rem 1rem', width: 400 },
-				header: { padding: '1rem', paddingBottom: '0.4rem' },
-			}}
-			title={<Text style={{ fontSize: '0.9rem', fontWeight: 600 }}>Import Dashboard</Text>}>
-			<Stack gap={24}>
-				<FileInput
-					style={{ marginTop: '0.25rem' }}
-					label=""
-					placeholder="Import Parseable dashboard config json"
-					fileInputProps={{ accept: '.json' }}
-					value={file}
-					onChange={setFile}
-				/>
-				<Stack style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
-					<Box>
-						<Button onClick={closeModal} variant="outline">
-							Cancel
-						</Button>
-					</Box>
-					<Box>
-						<Button disabled={file === null} onClick={onImport} loading={isCreatingDashboard}>
-							Import
-						</Button>
-					</Box>
-				</Stack>
-			</Stack>
-		</Modal>
-	);
-};
-
 const renderShareIcon = () => <IconFileDownload size={px('1rem')} stroke={1.5} />;
 
 const ImportDashboardButton = () => {
@@ -161,7 +86,6 @@ const SideBar = (props: { updateTimeRange: (dashboard: Dashboard) => void }) =>
 
 	return (
 		<Stack style={{ width: DASHBOARDS_SIDEBAR_WIDTH }} className={classes.container}>
-			<ImportDashboardModal />
 			<Stack style={{ padding: '0.75rem', paddingBottom: 0, justifyContent: 'center', flexDirection: 'row' }}>
 				<Button
 					variant="outline"
diff --git a/src/pages/Dashboards/Toolbar.tsx b/src/pages/Dashboards/Toolbar.tsx
index ad6d6d1b..43336476 100644
--- a/src/pages/Dashboards/Toolbar.tsx
+++ b/src/pages/Dashboards/Toolbar.tsx
@@ -245,7 +245,7 @@ const ImportTileModal = () => {
 				<FileInput
 					style={{ marginTop: '0.25rem' }}
 					label=""
-					placeholder="Import Parseable tile config json"
+					placeholder="Import tile config json downloaded from Parseable"
 					fileInputProps={{ accept: '.json' }}
 					value={file}
 					onChange={setFile}
diff --git a/src/pages/Dashboards/assets/templates.tsx b/src/pages/Dashboards/assets/templates.tsx
new file mode 100644
index 00000000..1d9c30b1
--- /dev/null
+++ b/src/pages/Dashboards/assets/templates.tsx
@@ -0,0 +1,192 @@
+import { ImportDashboardType } from '@/@types/parseable/api/dashboards';
+
+const pmetaConfig = {
+	name: 'Metadata Dashboard Template',
+	description: '',
+	time_filter: null,
+	refresh_interval: 60,
+	tiles: [
+		{
+			name: 'Events Ingested for Each Ingestor',
+			description: 'Events Ingested for Each Ingestor',
+			query: 'select MAX(parseable_events_ingested), address from pmeta GROUP BY address LIMIT 100',
+			order: 1,
+			visualization: {
+				visualization_type: 'donut-chart' as 'donut-chart',
+				circular_chart_config: {
+					name_key: 'address',
+					value_key: 'MAX(pmeta.parseable_events_ingested)',
+				},
+				graph_config: null,
+				size: 'sm',
+				color_config: [],
+				tick_config: [],
+			},
+		},
+		{
+			name: 'Event Count Over Time',
+			description: 'Event Count Over Time',
+			query:
+				"select a.time,SUM(a.current_events) as current_events, SUM(a.lifetime_events) as lifetime_events, SUM(a.deleted_events) as deleted_events from (select MAX(parseable_events_ingested) as current_events, MAX(parseable_lifetime_events_ingested) as lifetime_events, MAX(parseable_deleted_events_ingested) as deleted_events, DATE_BIN('10 minutes', p_timestamp, NOW()) AS time from pmeta where address='http://parseable-ing-8yvv-0.parseable-ingestor-headless.demo.svc.cluster.local:8000/' group by time order by time) a GROUP BY a.time ORDER BY a.time LIMIT 100",
+			order: 2,
+			visualization: {
+				visualization_type: 'bar-chart' as 'bar-chart',
+				circular_chart_config: null,
+				graph_config: {
+					x_key: 'time',
+					y_keys: ['lifetime_events', 'current_events', 'deleted_events'],
+					graph_type: 'default',
+					orientation: 'horizontal',
+				},
+				size: 'lg',
+				color_config: [
+					{
+						field_name: 'lifetime_events',
+						color_palette: 'indigo',
+					},
+					{
+						field_name: 'current_events',
+						color_palette: 'orange',
+					},
+					{
+						field_name: 'deleted_events',
+						color_palette: 'teal',
+					},
+				],
+				tick_config: [
+					{
+						key: 'time',
+						unit: 'utc-timestamp',
+					},
+				],
+			},
+		},
+		{
+			name: 'Memory for Each Ingestor',
+			description: 'Memory for Each Ingestor',
+			query: 'SELECT MAX(process_resident_memory_bytes) as memory_usage, address FROM pmeta GROUP BY address LIMIT 100',
+			order: 3,
+			visualization: {
+				visualization_type: 'pie-chart' as 'pie-chart',
+				circular_chart_config: {
+					name_key: 'address',
+					value_key: 'memory_usage',
+				},
+				graph_config: null,
+				size: 'sm',
+				color_config: [],
+				tick_config: [],
+			},
+		},
+		{
+			name: 'Event Size Over Time',
+			description: 'Event Size Over Time',
+			query:
+				"select a.time, SUM(a.current_events_size) as current_events_size, SUM(a.lifetime_events_size) as lifetime_events_size, SUM(a.deleted_events_size) as deleted_events_size from (select MAX(parseable_events_ingested_size) as current_events_size, MAX(parseable_lifetime_events_ingested_size) as lifetime_events_size, MAX(parseable_deleted_events_ingested_size) as deleted_events_size, DATE_BIN('10 minutes', p_timestamp, NOW()) AS time from pmeta where address='http://parseable-ing-8yvv-0.parseable-ingestor-headless.demo.svc.cluster.local:8000/' group by time order by time) a GROUP BY a.time ORDER BY a.time LIMIT 100",
+			order: 4,
+			visualization: {
+				visualization_type: 'bar-chart' as 'bar-chart',
+				circular_chart_config: null,
+				graph_config: {
+					x_key: 'time',
+					y_keys: ['lifetime_events_size', 'current_events_size', 'deleted_events_size'],
+					graph_type: 'default',
+					orientation: 'horizontal',
+				},
+				size: 'lg',
+				color_config: [
+					{
+						field_name: 'lifetime_events_size',
+						color_palette: 'indigo',
+					},
+					{
+						field_name: 'current_events_size',
+						color_palette: 'orange',
+					},
+					{
+						field_name: 'deleted_events_size',
+						color_palette: 'teal',
+					},
+				],
+				tick_config: [
+					{
+						key: 'time',
+						unit: 'utc-timestamp',
+					},
+					{
+						key: 'lifetime_events_size',
+						unit: 'bytes',
+					},
+					{
+						key: 'current_events_size',
+						unit: 'bytes',
+					},
+					{
+						key: 'deleted_events_size',
+						unit: 'bytes',
+					},
+				],
+			},
+		},
+		{
+			name: 'Ingested Size and Storage Size',
+			description: 'Ingested Size and Storage Size',
+			query:
+				"SELECT MAX(parseable_events_ingested_size) as current_events_size, MAX(parseable_storage_size_data) as current_data_size FROM pmeta where address='http://ec2-3-15-172-147.us-east-2.compute.amazonaws.com:443/' LIMIT 100",
+			order: 5,
+			visualization: {
+				visualization_type: 'table' as 'table',
+				circular_chart_config: null,
+				graph_config: null,
+				size: 'sm',
+				color_config: [],
+				tick_config: [
+					{
+						key: 'current_events_size',
+						unit: 'bytes',
+					},
+					{
+						key: 'current_data_size',
+						unit: 'bytes',
+					},
+				],
+			},
+		},
+		{
+			name: 'Memory Over Time',
+			description: 'Memory Over Time',
+			query:
+				"select DATE_BIN('10 minutes', p_timestamp, NOW()) AS time, MAX(process_resident_memory_bytes) as process_resident_memory_bytes from pmeta where address='http://parseable-ing-8yvv-0.parseable-ingestor-headless.demo.svc.cluster.local:8000/' group by time order by time LIMIT 100",
+			order: 6,
+			visualization: {
+				visualization_type: 'bar-chart' as 'bar-chart',
+				circular_chart_config: null,
+				graph_config: {
+					x_key: 'time',
+					y_keys: ['process_resident_memory_bytes'],
+					graph_type: 'default',
+					orientation: 'horizontal',
+				},
+				size: 'lg',
+				color_config: [
+					{
+						field_name: 'process_resident_memory_bytes',
+						color_palette: 'blue',
+					},
+				],
+				tick_config: [
+					{
+						key: 'time',
+						unit: 'utc-timestamp',
+					},
+					{
+						key: 'process_resident_memory_bytes',
+						unit: 'bytes',
+					},
+				],
+			},
+		},
+	],
+};
+
+export const templates: ImportDashboardType[] = [pmetaConfig];
diff --git a/src/pages/Dashboards/providers/DashboardsProvider.ts b/src/pages/Dashboards/providers/DashboardsProvider.ts
index 4b7e28c9..b5290523 100644
--- a/src/pages/Dashboards/providers/DashboardsProvider.ts
+++ b/src/pages/Dashboards/providers/DashboardsProvider.ts
@@ -3,6 +3,8 @@ import initContext from '@/utils/initContext';
 import _ from 'lodash';
 import { Layout } from 'react-grid-layout';
 
+export const TILES_PER_PAGE = 5;
+
 export const sortTilesByOrder = (tiles: Tile[], idsByOrder: string[]): Tile[] => {
 	return _.chain(idsByOrder)
 		.map((tile_id, index) => {
@@ -19,9 +21,10 @@ export const assignOrderToTiles = (tiles: Tile[]) => {
 	});
 };
 
-export const genLayout = (tiles: Tile[]): Layout[] => {
+export const genLayout = (tiles: Tile[], currentPage: number): Layout[] => {
+	const tilesToShow = _.take(tiles, TILES_PER_PAGE * currentPage);
 	return _.reduce(
-		tiles,
+		tilesToShow,
 		(acc: Layout[], tile) => {
 			const {
 				visualization: { size },
@@ -85,6 +88,7 @@ type DashboardsStore = {
 	deleteTileId: string | null;
 	importTileModalOpen: boolean;
 	importDashboardModalOpen: boolean;
+	currentPage: number;
 };
 
 const initialState: DashboardsStore = {
@@ -102,7 +106,8 @@ const initialState: DashboardsStore = {
 	deleteTileModalOpen: false,
 	deleteTileId: null,
 	importTileModalOpen: false,
-	importDashboardModalOpen: false
+	importDashboardModalOpen: false,
+	currentPage: 1,
 };
 
 type ReducerOutput = Partial<DashboardsStore>;
@@ -121,6 +126,7 @@ type DashboardsStoreReducers = {
 	resetTilesData: (store: DashboardsStore) => ReducerOutput;
 	toggleImportTileModal: (store: DashboardsStore, val: boolean) => ReducerOutput;
 	toggleImportDashboardModal: (store: DashboardsStore, val: boolean) => ReducerOutput;
+	handlePaging: (store: DashboardsStore) => ReducerOutput;
 };
 
 const toggleCreateDashboardModal = (_store: DashboardsStore, val: boolean) => {
@@ -173,7 +179,7 @@ const toggleAllowDrag = (store: DashboardsStore) => {
 };
 
 const setDashboards = (store: DashboardsStore, dashboards: Dashboard[]) => {
-	const { activeDashboard: activeDashboardFromStore } = store;
+	const { activeDashboard: activeDashboardFromStore, currentPage } = store;
 	const defaultActiveDashboard = _.isArray(dashboards) && !_.isEmpty(dashboards) ? dashboards[0] : null;
 	const activeDashboard = (() => {
 		if (activeDashboardFromStore) {
@@ -185,10 +191,23 @@ const setDashboards = (store: DashboardsStore, dashboards: Dashboard[]) => {
 		}
 	})();
 
+	const activeDashboardTilesCount = _.size(activeDashboard?.tiles);
+	const updatedCurrentPage = (() => {
+		if (!activeDashboard) {
+			return 1;
+		} else if (activeDashboardTilesCount === TILES_PER_PAGE * currentPage + 1) {
+			// to handle import tile
+			return currentPage + 1;
+		} else {
+			return currentPage;
+		}
+	})();
+
 	return {
 		dashboards,
 		activeDashboard,
-		layout: activeDashboard ? genLayout(activeDashboard.tiles) : [],
+		layout: activeDashboard ? genLayout(activeDashboard.tiles, updatedCurrentPage) : [],
+		currentPage: updatedCurrentPage,
 	};
 };
 
@@ -203,7 +222,7 @@ const selectDashboard = (store: DashboardsStore, dashboardId?: string | null, da
 		...initialState,
 		dashboards: store.dashboards,
 		activeDashboard: activeDashboard || null,
-		layout: activeDashboard ? genLayout(activeDashboard.tiles) : [],
+		layout: activeDashboard ? genLayout(activeDashboard.tiles, initialState.currentPage) : [],
 	};
 };
 
@@ -223,14 +242,22 @@ const toggleDeleteTileModal = (_store: DashboardsStore, val: boolean, tileId: st
 	};
 };
 
-
-
 const resetTilesData = (_store: DashboardsStore) => {
 	return {
 		tilesData: {},
 	};
 };
 
+const handlePaging = (store: DashboardsStore) => {
+	const { currentPage, activeDashboard } = store;
+	const newCurrentPage = currentPage + 1;
+	const layout = genLayout(activeDashboard?.tiles || [], newCurrentPage);
+	return {
+		currentPage: newCurrentPage,
+		layout,
+	};
+};
+
 const { Provider: DashbaordsProvider, useStore: useDashboardsStore } = initContext(initialState);
 
 const dashboardsStoreReducers: DashboardsStoreReducers = {
@@ -246,7 +273,8 @@ const dashboardsStoreReducers: DashboardsStoreReducers = {
 	toggleDeleteTileModal,
 	resetTilesData,
 	toggleImportTileModal,
-	toggleImportDashboardModal
+	toggleImportDashboardModal,
+	handlePaging,
 };
 
 export { DashbaordsProvider, useDashboardsStore, dashboardsStoreReducers };