diff --git a/src/components/Lending/index.tsx b/src/components/Lending/index.tsx
index b89a9fee1..6e542e8b9 100644
--- a/src/components/Lending/index.tsx
+++ b/src/components/Lending/index.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useRef, useMemo, useEffect } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import styled from 'styled-components';
-import { Box, Flex, Tooltip, Text, Button, Badge, Link, Switch } from '@chakra-ui/react';
+import { Box, Flex, Tooltip, Text, Button, Badge, Link } from '@chakra-ui/react';
 import ReactSelect from '../MultiSelect';
-import { ColumnHeader, RowContainer, YieldsBody, YieldsCell, YieldsContainer, YieldsWrapper } from '../Yields';
+import { ColumnHeader, RowContainer, YieldsBody, YieldsCell, YieldsContainer } from '../Yields';
 import NotFound from './NotFound';
 import { formatAmountString } from '~/utils/formatAmount';
 import { useQuery } from '@tanstack/react-query';
@@ -671,6 +671,30 @@ const Container = styled.div`
 	}
 `;
 
+const YieldsWrapper = styled.div`
+	min-height: 560px;
+	border: 1px solid #2f333c;
+	align-self: center;
+	z-index: 1;
+	position: relative;
+	padding: 16px;
+	margin: 0 auto;
+	box-shadow: 0px 0px 20px rgba(26, 26, 26, 0.5);
+	border-radius: 16px;
+	text-align: left;
+
+	@media screen and (min-width: ${({ theme }) => theme.bpLg}) {
+		position: sticky;
+		top: 24px;
+		align-self: flex-start;
+	}
+
+	@media screen and (max-width: ${({ theme }) => theme.bpMed}) {
+		box-shadow: none;
+		max-width: 100%;
+	}
+`;
+
 const LeftWrapper = styled(YieldsWrapper)`
 	width: 550px;
 	max-width: 550px;
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index 45db05cd8..3eba222c1 100644
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -159,7 +159,7 @@ const Tabs = ({ tabs = [] }) => {
 						<ActiveTabBackground style={getActiveTabStyles()} />
 					</TabList>
 				</TabButtonsWrapper>
-				<TabPanels>{tabs.find((tab) => tab.id === activeTab)?.content}</TabPanels>
+				<TabPanels>{tabs.find((tab) => tab.id === activeTab)?.content()}</TabPanels>
 			</TabsContainer>
 		</Wrapper>
 	);
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 80965bce1..90cd0f533 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,14 +1,16 @@
-import * as React from 'react';
-import { AggregatorContainer } from '~/components/Aggregator';
-import Lending from '~/components/Lending';
+import { Suspense, lazy } from 'react';
+import Loader from '~/components/Aggregator/Loader';
 import Tabs from '~/components/Tabs';
-import Yields from '~/components/Yields';
 import Layout from '~/layout';
 import { getSandwichList } from '~/props/getSandwichList';
 import { getTokenList } from '~/props/getTokenList';
 import { getTokensMaps } from '~/props/getTokensMaps';
 import { useLendingProps } from '~/queries/useLendingProps';
 import { useYieldProps } from '~/queries/useYieldProps';
+import { AggregatorContainer } from '~/components/Aggregator';
+
+const Lending = lazy(() => import('~/components/Lending'));
+const Yields = lazy(() => import('~/components/Yields'));
 
 export async function getStaticProps() {
 	const tokenList = await getTokenList();
@@ -26,12 +28,32 @@ export async function getStaticProps() {
 }
 
 export default function Aggregator(props) {
-	const yeildProps = useYieldProps();
+	const yieldProps = useYieldProps();
 	const lendingProps = useLendingProps();
 	const tabData = [
-		{ id: 'swap', name: 'Swap', content: <AggregatorContainer {...props} /> },
-		{ id: 'earn', name: 'Earn', content: <Yields tokens={props?.tokenList} {...yeildProps} /> },
-		{ id: 'borrow', name: 'Borrow', content: <Lending {...lendingProps} /> }
+		{
+			id: 'swap',
+			name: 'Swap',
+			content: () => <AggregatorContainer {...props} />
+		},
+		{
+			id: 'earn',
+			name: 'Earn',
+			content: () => (
+				<Suspense fallback={<Loader />}>
+					<Yields tokens={props?.tokenList} {...yieldProps} />
+				</Suspense>
+			)
+		},
+		{
+			id: 'borrow',
+			name: 'Borrow',
+			content: () => (
+				<Suspense fallback={<Loader />}>
+					<Lending {...lendingProps} />
+				</Suspense>
+			)
+		}
 	];
 	return (
 		<Layout title={`Meta-dex aggregator - DefiLlama`} defaultSEO>