diff --git a/src/app/_components/BlockList/BlocksPage/BlocksPageBlockList.tsx b/src/app/_components/BlockList/BlocksPage/BlocksPageBlockList.tsx
index 62e9196b5..509ecfada 100644
--- a/src/app/_components/BlockList/BlocksPage/BlocksPageBlockList.tsx
+++ b/src/app/_components/BlockList/BlocksPage/BlocksPageBlockList.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useRef } from 'react';
+import { ReactNode, useCallback, useRef } from 'react';
 
 import { Section } from '../../../../common/components/Section';
 import { Stack } from '../../../../ui/Stack';
@@ -11,41 +11,66 @@ import { Controls } from '../Controls';
 import { BlocksPageBlockListGrouped } from './BlocksPageBlockListGrouped';
 import { BlocksPageBlockListUngrouped } from './BlocksPageBlockListUngrouped';
 
+export function BlocksPageBlockListLayout({ children }: { children: ReactNode }) {
+  return <Section>{children}</Section>;
+}
+
+export function BlocksPageControlsLayout({
+  liveUpdates,
+  children,
+}: {
+  liveUpdates?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <Stack
+      marginX={-6}
+      px={6}
+      py={5}
+      borderBottom={liveUpdates ? '1px solid var(--stacks-colors-borderPrimary)' : 'none'}
+    >
+      {children}
+    </Stack>
+  );
+}
+
 function BlocksPageBlockListBase() {
   const { groupedByBtc, setGroupedByBtc, liveUpdates, setLiveUpdates } = useBlockListContext();
 
   const lastClickTimeRef = useRef(0);
-  const toggleLiveUpdates = useCallback(() => {
-    const now = Date.now();
-    if (now - lastClickTimeRef.current > 2000) {
-      lastClickTimeRef.current = now;
-      setLiveUpdates(!liveUpdates);
-    }
-  }, [liveUpdates, setLiveUpdates]);
+  const toggleLiveUpdates = useCallback(
+    (immediately?: boolean) => {
+      const now = Date.now();
+      if (immediately || now - lastClickTimeRef.current > 2000) {
+        lastClickTimeRef.current = now;
+        setLiveUpdates(!liveUpdates);
+      }
+    },
+    [liveUpdates, setLiveUpdates]
+  );
 
   return (
-    <Section>
-      <Stack
-        marginX={-6}
-        px={6}
-        borderBottom={liveUpdates ? '1px solid var(--stacks-colors-borderPrimary)' : 'none'}
-      >
+    <BlocksPageBlockListLayout>
+      <BlocksPageControlsLayout liveUpdates={liveUpdates}>
         <Controls
           groupByBtc={{
             onChange: () => {
               setGroupedByBtc(!groupedByBtc);
+              if (liveUpdates) {
+                toggleLiveUpdates(true);
+              }
             },
             isChecked: groupedByBtc,
           }}
           liveUpdates={{
-            onChange: toggleLiveUpdates,
+            onChange: () => toggleLiveUpdates(),
             isChecked: liveUpdates,
           }}
           horizontal={true}
         />
-      </Stack>
+      </BlocksPageControlsLayout>
       {groupedByBtc ? <BlocksPageBlockListGrouped /> : <BlocksPageBlockListUngrouped />}
-    </Section>
+    </BlocksPageBlockListLayout>
   );
 }
 
diff --git a/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListGrouped.tsx b/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListGrouped.tsx
index 1856a83db..a71cc7ffa 100644
--- a/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListGrouped.tsx
+++ b/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListGrouped.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Suspense } from 'react';
+import { Suspense, useMemo } from 'react';
 
 import { ListFooter } from '../../../../common/components/ListFooter';
 import { Section } from '../../../../common/components/Section';
@@ -17,22 +17,26 @@ function BlocksPageBlockListGroupedBase() {
   const { liveUpdates } = useBlockListContext();
   const { blockList, updateBlockList, isFetchingNextPage, hasNextPage, fetchNextPage } =
     useBlocksPageBlockListGrouped();
+  const latestBlock = useMemo(() => blockList?.[0], [blockList]);
 
   return (
     <>
-      {!liveUpdates && <UpdateBar onClick={updateBlockList} />}
+      {!liveUpdates && <UpdateBar onClick={updateBlockList} latestBlock={latestBlock} />}
       <Flex flexDirection="column" gap={4} pt={4}>
-        <BlockListGrouped blockList={blockList} minimized={false} stxBlocksLimit={10} />
+        <BlockListGrouped
+          blockList={blockList}
+          minimized={false}
+          stxBlocksLimit={10}
+          onlyShowStxBlocksForFirstBtcBlock={true}
+        />
       </Flex>
       <Box pt={5} pb={5}>
-        {!liveUpdates && (
-          <ListFooter
-            isLoading={isFetchingNextPage}
-            hasNextPage={hasNextPage}
-            fetchNextPage={fetchNextPage}
-            label={'blocks'}
-          />
-        )}
+        <ListFooter
+          isLoading={isFetchingNextPage}
+          hasNextPage={hasNextPage}
+          fetchNextPage={fetchNextPage}
+          label={'blocks'}
+        />
       </Box>
     </>
   );
diff --git a/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListUngrouped.tsx b/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListUngrouped.tsx
index f9a7a1d72..62e385044 100644
--- a/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListUngrouped.tsx
+++ b/src/app/_components/BlockList/BlocksPage/BlocksPageBlockListUngrouped.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Suspense } from 'react';
+import { Suspense, useMemo } from 'react';
 
 import { ListFooter } from '../../../../common/components/ListFooter';
 import { Section } from '../../../../common/components/Section';
@@ -17,20 +17,19 @@ function BlocksPageBlockListUngroupedBase() {
 
   const { blockList, hasNextPage, fetchNextPage, isFetchingNextPage, updateBlockList } =
     useBlocksPageBlockListUngrouped();
+  const latestBlock = useMemo(() => blockList?.[0], [blockList]);
 
   return (
     <Box pb={6}>
-      {!liveUpdates && <UpdateBar onClick={updateBlockList} />}
-      <BlockListUngrouped blockList={blockList} />
+      {!liveUpdates && <UpdateBar onClick={updateBlockList} latestBlock={latestBlock} />}
+      <BlockListUngrouped blockList={blockList} stxBlocksLimit={10} />
       <Box pt={4}>
-        {!liveUpdates && (
-          <ListFooter
-            isLoading={isFetchingNextPage}
-            hasNextPage={hasNextPage}
-            fetchNextPage={fetchNextPage}
-            label={'blocks'}
-          />
-        )}
+        <ListFooter
+          isLoading={isFetchingNextPage}
+          hasNextPage={hasNextPage}
+          fetchNextPage={fetchNextPage}
+          label={'blocks'}
+        />
       </Box>
     </Box>
   );
diff --git a/src/app/_components/BlockList/Controls.tsx b/src/app/_components/BlockList/Controls.tsx
index f94c4dea7..229129d25 100644
--- a/src/app/_components/BlockList/Controls.tsx
+++ b/src/app/_components/BlockList/Controls.tsx
@@ -21,7 +21,7 @@ export function ControlsLayout({
   children: ReactNode;
 } & FlexProps) {
   return (
-    <Flex py={4} direction={horizontal ? ['column', 'row'] : 'column'} {...rest}>
+    <Flex direction={horizontal ? ['column', 'row'] : 'column'} gap={3} {...rest}>
       {children}
     </Flex>
   );
@@ -35,6 +35,7 @@ export function Controls({ groupByBtc, liveUpdates, horizontal, ...rest }: Contr
         <FormLabel
           htmlFor="group-by-btc"
           mb="0"
+          mr={0}
           fontSize={'14px'}
           lineHeight={'1.5em'}
           fontWeight={400}
@@ -50,6 +51,7 @@ export function Controls({ groupByBtc, liveUpdates, horizontal, ...rest }: Contr
         <FormLabel
           htmlFor="live-updates"
           mb="0"
+          mr={0}
           fontSize={'14px'}
           lineHeight={'1.5em'}
           fontWeight={400}
diff --git a/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx b/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx
index 0681752ab..f4bdb440d 100644
--- a/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx
+++ b/src/app/_components/BlockList/Grouped/BlockListGrouped.tsx
@@ -1,4 +1,4 @@
-import { ArrowElbowLeftDown } from '@phosphor-icons/react';
+import { ArrowElbowLeftDown, Clock } from '@phosphor-icons/react';
 import React, { ReactNode, useMemo } from 'react';
 
 import { BlockLink, ExplorerLink } from '../../../../common/components/ExplorerLinks';
@@ -80,12 +80,18 @@ const StxBlockRow = ({
         <LineAndNode rowHeight={14} width={6} icon={icon} isLast={isLast} />
         <BlockLink hash={stxBlock.hash}>
           <Text color="text" fontWeight="medium" fontSize="sm">
-            #{stxBlock.height}
+            #{stxBlock.height} isLast: {isLast?.toString()}
           </Text>
         </BlockLink>
       </Flex>
 
-      <HStack divider={<Caption>∙</Caption>} gap={1} whiteSpace="nowrap" gridColumn="3 / 4">
+      <HStack
+        divider={<Caption>∙</Caption>}
+        gap={1}
+        whiteSpace="nowrap"
+        gridColumn="3 / 4"
+        justifyContent="flex-end"
+      >
         <BlockLink hash={stxBlock.hash}>
           <Text color="textSubdued" fontWeight="medium" fontSize="xs" whiteSpace="nowrap">
             {truncateMiddle(stxBlock.hash, 3)}
@@ -176,7 +182,7 @@ export function BurnBlockGroupGrid({
             stxBlock={stxBlock}
             minimized={minimized}
             isFirst={i === 0}
-            isLast={i === stxBlocks.length - 1 && numStxBlocksNotDisplayed === 0}
+            isLast={i === stxBlocks.length - 1 && numStxBlocksNotDisplayed <= 0}
           />
           {i < stxBlocks.length - 1 && (
             <Box gridColumn={'1/5'} borderBottom={'1px'} borderColor="borderSecondary"></Box>
@@ -206,35 +212,52 @@ function BitcoinHeader({
       px={PADDING}
       borderBottom={minimized ? '1px solid var(--stacks-colors-borderPrimary)' : 'none'}
       flexWrap={'wrap'}
+      // height={5}
     >
       <Flex alignItems={'center'} gap={1.5} flexWrap={'nowrap'}>
-        <Icon as={ArrowElbowLeftDown} size={3.5} color={'textSubdued'} />
+        <Icon as={ArrowElbowLeftDown} size={3.5} color="textSubdued" />
         <Icon as={BitcoinIcon} size={4.5} />
         {isFirst ? (
-          <Text fontSize="sm" color={'textSubdued'}>
-            {btcBlock.height}
-          </Text>
+          <Flex height="full" alignItems="center">
+            <Text fontSize="sm" color="textSubdued">
+              Next Bitcoin block
+            </Text>
+          </Flex>
         ) : (
-          <ExplorerLink fontSize="sm" color={'textSubdued'} href={`/btcblock/${btcBlock.hash}`}>
-            #{btcBlock.height}
-          </ExplorerLink>
+          <Flex height="full" alignItems="center">
+            <ExplorerLink
+              fontSize="sm"
+              color="textSubdued"
+              href={`/btcblock/${btcBlock.hash}`}
+              height="full"
+            >
+              #{btcBlock.height}
+            </ExplorerLink>
+          </Flex>
         )}
       </Flex>
-      <HStack divider={<Caption>∙</Caption>} gap={1} flexWrap={'wrap'}>
+      <Box>
         {isFirst ? (
-          <Text fontSize="xs" color={'textSubdued'} whiteSpace={'nowrap'}>
-            {truncateMiddle(btcBlock.hash, 6)}
-          </Text>
+          <Flex gap={1} alignItems="center">
+            <Icon as={Clock} size={4} color="iconSubdued" />
+            <Text color="textSubdued" fontSize="xs">
+              Unconfirmed
+            </Text>
+          </Flex>
         ) : (
-          <ExplorerLink
-            fontSize="xs"
-            color={'textSubdued'}
-            href={`/btcblock/${btcBlock.hash}`}
-            whiteSpace={'nowrap'}
-          ></ExplorerLink>
+          <HStack divider={<Caption>∙</Caption>} gap={1} flexWrap={'wrap'}>
+            <ExplorerLink
+              fontSize="xs"
+              color="textSubdued"
+              href={`/btcblock/${btcBlock.hash}`}
+              whiteSpace={'nowrap'}
+            >
+              {truncateMiddle(btcBlock.hash, 6)}
+            </ExplorerLink>
+            <Timestamp ts={btcBlock.timestamp} whiteSpace={'nowrap'} />
+          </HStack>
         )}
-        <Timestamp ts={btcBlock.timestamp} whiteSpace={'nowrap'} />
-      </HStack>
+      </Box>
     </Flex>
   );
 }
@@ -266,12 +289,14 @@ export function BurnBlockGroup({
   isFirst,
   stxBlocksLimit,
   minimized = false,
+  onlyShowStxBlocksForFirstBtcBlock,
 }: {
   btcBlock: BlockListBtcBlock;
   stxBlocks: BlockListStxBlock[];
   isFirst: boolean;
   stxBlocksLimit?: number;
   minimized?: boolean;
+  onlyShowStxBlocksForFirstBtcBlock?: boolean;
 }) {
   const unaccountedStxBlocks = btcBlock.blockCount ? stxBlocks.length - btcBlock.blockCount : 0;
   const unaccountedTxs = useMemo(
@@ -293,7 +318,14 @@ export function BurnBlockGroup({
       ? btcBlock.blockCount + unaccountedStxBlocks
       : btcBlock.blockCount
     : undefined;
-  const numStxBlocksNotDisplayed = blocksCount ? blocksCount - (stxBlocksLimit || 0) : 0;
+  const numStxBlocksNotDisplayed =
+    onlyShowStxBlocksForFirstBtcBlock && !isFirst
+      ? blocksCount
+        ? blocksCount
+        : 0
+      : blocksCount
+        ? blocksCount - (stxBlocksLimit || 0)
+        : 0;
   const displayedStxBlocks = useMemo(
     () => (stxBlocksLimit ? stxBlocks.slice(0, stxBlocksLimit) : stxBlocks),
     [stxBlocks, stxBlocksLimit]
@@ -301,13 +333,15 @@ export function BurnBlockGroup({
   return (
     <Box border={'1px'} rounded={'lg'} p={PADDING}>
       <BitcoinHeader btcBlock={btcBlock} minimized={minimized} isFirst={isFirst} />
-      <ScrollableBox>
-        <BurnBlockGroupGrid
-          stxBlocks={displayedStxBlocks}
-          minimized={minimized}
-          numStxBlocksNotDisplayed={numStxBlocksNotDisplayed}
-        />
-      </ScrollableBox>
+      {onlyShowStxBlocksForFirstBtcBlock && !isFirst ? null : (
+        <ScrollableBox>
+          <BurnBlockGroupGrid
+            stxBlocks={displayedStxBlocks}
+            minimized={minimized}
+            numStxBlocksNotDisplayed={numStxBlocksNotDisplayed}
+          />
+        </ScrollableBox>
+      )}
       {numStxBlocksNotDisplayed > 0 ? (
         <BlockCount
           count={numStxBlocksNotDisplayed}
@@ -334,10 +368,12 @@ export function BlockListGrouped({
   blockList,
   minimized,
   stxBlocksLimit,
+  onlyShowStxBlocksForFirstBtcBlock,
 }: {
   blockList: BlockListData[];
   minimized: boolean;
   stxBlocksLimit?: number;
+  onlyShowStxBlocksForFirstBtcBlock?: boolean;
 }) {
   return (
     <BlockListGroupedLayout>
@@ -349,6 +385,7 @@ export function BlockListGrouped({
           minimized={minimized}
           stxBlocksLimit={stxBlocksLimit}
           isFirst={i === 0}
+          onlyShowStxBlocksForFirstBtcBlock={onlyShowStxBlocksForFirstBtcBlock}
         />
       ))}
     </BlockListGroupedLayout>
diff --git a/src/app/_components/BlockList/Grouped/skeleton.tsx b/src/app/_components/BlockList/Grouped/skeleton.tsx
index c5efa05ae..f20e955c8 100644
--- a/src/app/_components/BlockList/Grouped/skeleton.tsx
+++ b/src/app/_components/BlockList/Grouped/skeleton.tsx
@@ -1,7 +1,6 @@
 import { useColorModeValue } from '@chakra-ui/react';
 
 import { Circle } from '../../../../common/components/Circle';
-import { Section } from '../../../../common/components/Section';
 import { Box } from '../../../../ui/Box';
 import { Button } from '../../../../ui/Button';
 import { Flex } from '../../../../ui/Flex';
@@ -9,8 +8,13 @@ import { SkeletonItem } from '../../../../ui/SkeletonItem';
 import { SkeletonText } from '../../../../ui/SkeletonText';
 import { Stack } from '../../../../ui/Stack';
 import { Text } from '../../../../ui/Text';
+import {
+  BlocksPageBlockListLayout,
+  BlocksPageControlsLayout,
+} from '../BlocksPage/BlocksPageBlockList';
 import { BlocksPageHeaderLayout } from '../BlocksPage/BlocksPageHeaders';
 import { ControlsLayout } from '../Controls';
+import { HomePageBlockListLayout, HomePageControlsLayout } from '../HomePage/HomePageBlockList';
 import { BlockListRowSkeleton } from '../Ungrouped/skeleton';
 import { UpdateBarLayout } from '../UpdateBar';
 import { BurnBlockGroupGridLayout } from './BlockListGrouped';
@@ -194,12 +198,26 @@ export function BlockPageHeadersSkeleton() {
   );
 }
 
-function ControlsSkeleton({ horizontal }: { horizontal?: boolean }) {
+function HomePageControlsSkeleton({ horizontal }: { horizontal?: boolean }) {
   return (
-    <ControlsLayout horizontal={horizontal} gap={3}>
-      <SkeletonItem height={5} width={20} />
-      <SkeletonItem height={5} width={20} />
-    </ControlsLayout>
+    <HomePageControlsLayout>
+      <SkeletonItem height={5} width={'90px'} />
+      <ControlsLayout horizontal={horizontal}>
+        <SkeletonItem height={5} width={20} />
+        <SkeletonItem height={5} width={20} />
+      </ControlsLayout>
+    </HomePageControlsLayout>
+  );
+}
+
+function BlocksPageControlsSkeleton({ horizontal }: { horizontal?: boolean }) {
+  return (
+    <BlocksPageControlsLayout>
+      <ControlsLayout horizontal={horizontal} gap={3}>
+        <SkeletonItem height={5} width={20} />
+        <SkeletonItem height={5} width={20} />
+      </ControlsLayout>
+    </BlocksPageControlsLayout>
   );
 }
 
@@ -216,20 +234,20 @@ export function UpdateBarSkeleton() {
 
 export function BlocksPageBlockListSkeleton() {
   return (
-    <Section>
-      <ControlsSkeleton horizontal />
+    <BlocksPageBlockListLayout>
+      <BlocksPageControlsSkeleton horizontal />
       <UpdateBarSkeleton />
       <BlocksPageBlockListGroupedSkeleton />
-    </Section>
+    </BlocksPageBlockListLayout>
   );
 }
 
 export function HomePageBlockListSkeleton() {
   return (
-    <Section>
-      <ControlsSkeleton />
+    <HomePageBlockListLayout>
+      <HomePageControlsSkeleton />
       <UpdateBarSkeleton />
       <HomePageBlockListGroupedSkeleton />
-    </Section>
+    </HomePageBlockListLayout>
   );
 }
diff --git a/src/app/_components/BlockList/HomePage/HomePageBlockList.tsx b/src/app/_components/BlockList/HomePage/HomePageBlockList.tsx
index ee702b209..cb3848a43 100644
--- a/src/app/_components/BlockList/HomePage/HomePageBlockList.tsx
+++ b/src/app/_components/BlockList/HomePage/HomePageBlockList.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { useCallback, useRef } from 'react';
+import { ReactNode, useCallback, useRef } from 'react';
 
 import { Section } from '../../../../common/components/Section';
 import { Stack } from '../../../../ui/Stack';
@@ -29,40 +29,67 @@ const HomePageBlockListUngroupedDynamic = dynamic(
   }
 );
 
+export function HomePageBlockListLayout({ children }: { children: ReactNode }) {
+  return (
+    <Section py={5} px={6}>
+      {children}
+    </Section>
+  );
+}
+
+export function HomePageControlsLayout({
+  liveUpdates,
+  children,
+}: {
+  liveUpdates?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <Stack gap={3} pb={6} marginX={-6} px={6} py={5} borderBottom={liveUpdates ? '1px' : 'none'}>
+      {children}
+    </Stack>
+  );
+}
+
 function HomePageBlockListBase() {
   const { groupedByBtc, setGroupedByBtc, liveUpdates, setLiveUpdates } = useBlockListContext();
 
   const lastClickTimeRef = useRef(0);
-  const toggleLiveUpdates = useCallback(() => {
-    const now = Date.now();
-    if (now - lastClickTimeRef.current > 2000) {
-      lastClickTimeRef.current = now;
-      setLiveUpdates(!liveUpdates);
-    }
-  }, [liveUpdates, setLiveUpdates]);
+  const toggleLiveUpdates = useCallback(
+    (immediately?: boolean) => {
+      const now = Date.now();
+      if (immediately || now - lastClickTimeRef.current > 2000) {
+        lastClickTimeRef.current = now;
+        setLiveUpdates(!liveUpdates);
+      }
+    },
+    [liveUpdates, setLiveUpdates]
+  );
 
   return (
-    <Section py={5} px={6}>
-      <Stack gap={3} pb={6} borderBottom={liveUpdates ? '1px' : 'none'} marginX={-6} px={6}>
+    <HomePageBlockListLayout>
+      <HomePageControlsLayout liveUpdates={liveUpdates}>
         <Text fontWeight="medium">Recent Blocks</Text>
         <Controls
           groupByBtc={{
             onChange: () => {
               setGroupedByBtc(!groupedByBtc);
+              if (liveUpdates) {
+                toggleLiveUpdates(true);
+              }
             },
             isChecked: groupedByBtc,
           }}
           liveUpdates={{
-            onChange: toggleLiveUpdates,
+            onChange: () => toggleLiveUpdates(),
             isChecked: liveUpdates,
           }}
           padding={0}
-          gap={3}
           border="none"
         />
-      </Stack>
+      </HomePageControlsLayout>
       {groupedByBtc ? <HomePageBlockListGroupedDynamic /> : <HomePageBlockListUngroupedDynamic />}
-    </Section>
+    </HomePageBlockListLayout>
   );
 }
 
diff --git a/src/app/_components/BlockList/HomePage/HomePageBlockListGrouped.tsx b/src/app/_components/BlockList/HomePage/HomePageBlockListGrouped.tsx
index 138d822bd..e7b3c96af 100644
--- a/src/app/_components/BlockList/HomePage/HomePageBlockListGrouped.tsx
+++ b/src/app/_components/BlockList/HomePage/HomePageBlockListGrouped.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Suspense } from 'react';
+import { Suspense, useMemo } from 'react';
 
 import { ListFooter } from '../../../../common/components/ListFooter';
 import { Flex } from '../../../../ui/Flex';
@@ -13,12 +13,13 @@ import { useHomePageBlockList } from '../data/useHomePageBlockList';
 function HomePageBlockListGroupedBase() {
   const { liveUpdates } = useBlockListContext();
   const { blockList, updateBlockList } = useHomePageBlockList();
+  const latestBlock = useMemo(() => blockList?.[0], [blockList]);
   return (
     <>
-      {!liveUpdates && <UpdateBar onClick={updateBlockList} />}
+      {!liveUpdates && <UpdateBar onClick={updateBlockList} latestBlock={latestBlock} />}
       <Flex flexDirection="column" pt={5} gap={4}>
         <BlockListGrouped blockList={blockList} minimized={true} stxBlocksLimit={3} />
-        {!liveUpdates && <ListFooter href={'/blocks'} label={'blocks'} />}
+        <ListFooter href={'/blocks'} label={'blocks'} />
       </Flex>
     </>
   );
diff --git a/src/app/_components/BlockList/HomePage/HomePageBlockListUngrouped.tsx b/src/app/_components/BlockList/HomePage/HomePageBlockListUngrouped.tsx
index ee76f3855..0530623cd 100644
--- a/src/app/_components/BlockList/HomePage/HomePageBlockListUngrouped.tsx
+++ b/src/app/_components/BlockList/HomePage/HomePageBlockListUngrouped.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Suspense } from 'react';
+import { Suspense, useMemo } from 'react';
 
 import { ListFooter } from '../../../../common/components/ListFooter';
 import { Flex } from '../../../../ui/Flex';
@@ -13,12 +13,13 @@ import { useHomePageBlockList } from '../data/useHomePageBlockList';
 function HomePageBlockListUngroupedBase() {
   const { liveUpdates } = useBlockListContext();
   const { blockList, updateBlockList } = useHomePageBlockList();
+  const latestBlock = useMemo(() => blockList?.[0], [blockList]);
   return (
     <>
-      {!liveUpdates && <UpdateBar onClick={updateBlockList} />}
+      {!liveUpdates && <UpdateBar onClick={updateBlockList} latestBlock={latestBlock} />}
       <Flex flexDirection="column" gap={5}>
         <BlockListUngrouped blockList={blockList} stxBlocksLimit={5} minimized={true} />
-        {!liveUpdates && <ListFooter href={'/blocks'} label={'blocks'} />}
+        <ListFooter href={'/blocks'} label={'blocks'} />
       </Flex>
     </>
   );
diff --git a/src/app/_components/BlockList/LayoutA/__tests__/__snapshots__/BlockListWithControls.test.tsx.snap b/src/app/_components/BlockList/LayoutA/__tests__/__snapshots__/BlockListWithControls.test.tsx.snap
index 2883b0df4..b9b437d71 100644
--- a/src/app/_components/BlockList/LayoutA/__tests__/__snapshots__/BlockListWithControls.test.tsx.snap
+++ b/src/app/_components/BlockList/LayoutA/__tests__/__snapshots__/BlockListWithControls.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`BlockListWithControls renders correctly 1`] = `
         class="css-1gdm77d"
       >
         <div
-          class="css-zhmvqp"
+          class="css-1pyx7hi"
         >
           <div
             class="chakra-form-control css-8ghjt3"
@@ -57,7 +57,7 @@ exports[`BlockListWithControls renders correctly 1`] = `
               </span>
             </label>
             <label
-              class="chakra-form__label css-2edo7i"
+              class="chakra-form__label css-11tytnr"
               colo="textCaption"
               for="group-by-btc"
               id="field-:r0:-label"
@@ -91,7 +91,7 @@ exports[`BlockListWithControls renders correctly 1`] = `
               </span>
             </label>
             <label
-              class="chakra-form__label css-2edo7i"
+              class="chakra-form__label css-11tytnr"
               colo="textCaption"
               for="live-updates"
               id="field-:r1:-label"
@@ -103,18 +103,33 @@ exports[`BlockListWithControls renders correctly 1`] = `
         <div
           class="css-1g6pedm"
         >
-          <div
-            class="css-prim4e"
+          <span
+            class="chakra-text css-bn5ftu"
+            style="transition: opacity 0.7s; opacity: 1;"
+          />
+          <button
+            class="chakra-button css-4xx2wk"
+            type="button"
           >
             <div
-              class="chakra-skeleton css-c202ee"
-              data-theme="light"
-            />
-            <div
-              class="chakra-skeleton css-c202ee"
-              data-theme="light"
-            />
-          </div>
+              class="css-4xvjmy"
+            >
+              <svg
+                class="chakra-icon css-1eyfs7n"
+                fill="currentColor"
+                focusable="false"
+                height="3"
+                viewBox="0 0 256 256"
+                width="3"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z"
+                />
+              </svg>
+              Update
+            </div>
+          </button>
         </div>
         <div
           class="chakra-stack css-1dg20yu"
diff --git a/src/app/_components/BlockList/LineAndNode.tsx b/src/app/_components/BlockList/LineAndNode.tsx
index b257927e9..24da28519 100644
--- a/src/app/_components/BlockList/LineAndNode.tsx
+++ b/src/app/_components/BlockList/LineAndNode.tsx
@@ -5,12 +5,12 @@ import { Box } from '../../../ui/Box';
 import { Flex } from '../../../ui/Flex';
 
 export function LineAndNode({
-  rowHeight = 14,
-  width = 6,
+  rowHeight,
+  width,
   icon,
   isLast,
 }: {
-  rowHeight: number;
+  rowHeight: number | string;
   width: number;
   icon?: ReactNode;
   isLast?: boolean;
@@ -21,7 +21,7 @@ export function LineAndNode({
         <Flex
           justifyContent="center"
           alignItems="center"
-          height="calc(100% + 1px)"
+          height="calc(100% + 2px)"
           top={0}
           width="full"
           position="absolute"
@@ -34,7 +34,7 @@ export function LineAndNode({
           <Box // the little bit of line needed to connect the icon to the other lines with nodes
             position="absolute"
             bottom={0}
-            height="20%"
+            height={isLast ? '0%' : '20%'} // if it's the last line, don't draw the line at all
             width="1px"
             bg="borderPrimary"
             border="1px solid var(---stacks-colors-borderPrimary)"
@@ -43,7 +43,7 @@ export function LineAndNode({
       ) : (
         <Flex
           justifyContent="center"
-          height="calc(100% + 1px)"
+          height="calc(100% + 2px)"
           width="full"
           position="absolute"
           zIndex={0}
diff --git a/src/app/_components/BlockList/Ungrouped/BlockListUngrouped.tsx b/src/app/_components/BlockList/Ungrouped/BlockListUngrouped.tsx
index 564e83264..44f651fca 100644
--- a/src/app/_components/BlockList/Ungrouped/BlockListUngrouped.tsx
+++ b/src/app/_components/BlockList/Ungrouped/BlockListUngrouped.tsx
@@ -1,5 +1,5 @@
 import { useColorModeValue } from '@chakra-ui/react';
-import { ArrowBendDownLeft } from '@phosphor-icons/react';
+import { ArrowBendDownLeft, Clock } from '@phosphor-icons/react';
 import React, { ReactNode, useMemo } from 'react';
 
 import { BlockLink, ExplorerLink } from '../../../../common/components/ExplorerLinks';
@@ -63,7 +63,7 @@ export function BtcBlockRowContent({ timestamp, height, hash, isFirst }: BtcBloc
         <Icon as={BitcoinIcon} size={18} position={'relative'} bottom={'1px'} />
         {isFirst ? (
           <Text fontSize="sm" color="textSubdued" fontWeight="medium">
-            {height}
+            Next Bitcoin block
           </Text>
         ) : (
           <ExplorerLink fontSize="sm" color={'textSubdued'} href={`/btcblock/${hash}`}>
@@ -71,23 +71,28 @@ export function BtcBlockRowContent({ timestamp, height, hash, isFirst }: BtcBloc
           </ExplorerLink>
         )}
       </HStack>
-      <HStack divider={<>&nbsp;∙&nbsp;</>} fontSize={'xs'}>
+      <Box>
         {isFirst ? (
-          <Text fontSize="xs" color="textSubdued" whiteSpace="nowrap">
-            {truncateMiddle(hash, 6)}
-          </Text>
+          <Flex gap={1} alignItems="center">
+            <Icon as={Clock} size={4} color="iconSubdued" />
+            <Text color="textSubdued" fontSize="xs">
+              Unconfirmed
+            </Text>
+          </Flex>
         ) : (
-          <ExplorerLink
-            fontSize="xs"
-            color={'textSubdued'}
-            href={`/btcblock/${hash}`}
-            whiteSpace={'nowrap'}
-          >
-            {truncateMiddle(hash, 6)}
-          </ExplorerLink>
+          <HStack divider={<>&nbsp;∙&nbsp;</>} fontSize={'xs'}>
+            <ExplorerLink
+              fontSize="xs"
+              color={'textSubdued'}
+              href={`/btcblock/${hash}`}
+              whiteSpace={'nowrap'}
+            >
+              {truncateMiddle(hash, 6)}
+            </ExplorerLink>
+            {timestamp && <Timestamp ts={timestamp} />}
+          </HStack>
         )}
-        {timestamp && <Timestamp ts={timestamp} />}
-      </HStack>
+      </Box>
     </>
   );
 }
@@ -178,6 +183,7 @@ function StxBlockRow({
         whiteSpace="nowrap"
         color="textSubdued"
         gridColumn="3 / 4"
+        justifyContent="flex-end"
       >
         <BlockLink hash={hash}>
           <Text color="textSubdued" fontWeight="medium" fontSize="xs" whiteSpace="nowrap">
@@ -271,7 +277,7 @@ function StxBlocksGrid({
             txsCount={stxBlock.txsCount}
             minimized={minimized}
             isFirst={i === 0}
-            isLast={i === stxBlocks.length - 1 && numStxBlocksNotDisplayed === 0}
+            isLast={i === stxBlocks.length - 1 && numStxBlocksNotDisplayed <= 0}
           />
           {i < stxBlocks.length - 1 && (
             <Box gridColumn={'1/5'} borderBottom={'1px'} borderColor="borderSecondary"></Box>
diff --git a/src/app/_components/BlockList/UpdateBar.tsx b/src/app/_components/BlockList/UpdateBar.tsx
index ffe7f5be2..329562daf 100644
--- a/src/app/_components/BlockList/UpdateBar.tsx
+++ b/src/app/_components/BlockList/UpdateBar.tsx
@@ -2,6 +2,7 @@ import { useColorModeValue } from '@chakra-ui/react';
 import { ArrowCounterClockwise } from '@phosphor-icons/react';
 import { ReactNode, Suspense, useCallback, useRef } from 'react';
 
+import RelativeTimeDisplay from '../../../common/components/RelativeTimeDisplay';
 import { Button } from '../../../ui/Button';
 import { Flex, FlexProps } from '../../../ui/Flex';
 import { Icon } from '../../../ui/Icon';
@@ -9,7 +10,7 @@ import { Text } from '../../../ui/Text';
 import { useBlockListContext } from './BlockListContext';
 import { UpdateBarSkeleton } from './Grouped/skeleton';
 import { getFadeAnimationStyle } from './consts';
-import { useSuspenseAverageBlockTimes } from './data/useAverageBlockTimes';
+import { BlockListData } from './utils';
 
 export function UpdateBarLayout({ children, ...rest }: { children: ReactNode }) {
   const bgColor = useColorModeValue('purple.100', 'slate.900'); // TODO: not in theme. remove
@@ -32,22 +33,22 @@ export function UpdateBarLayout({ children, ...rest }: { children: ReactNode })
 interface UpdateBarProps {
   onClick: () => void;
   latestBlocksCount?: number;
+  latestBlock?: BlockListData;
 }
 
 export function UpdateBarBase({
   onClick,
   latestBlocksCount,
+  latestBlock,
   ...rest
 }: {
   onClick: () => void;
   latestBlocksCount?: number;
+  latestBlock?: BlockListData;
 } & FlexProps) {
   const textColor = useColorModeValue('slate.800', 'slate.400'); // TODO: not in theme. remove
   const lastClickTimeRef = useRef(0);
   const { isBlockListLoading } = useBlockListContext();
-  const {
-    data: { last_24h },
-  } = useSuspenseAverageBlockTimes();
 
   const update = useCallback(() => {
     const now = Date.now();
@@ -57,6 +58,16 @@ export function UpdateBarBase({
     }
   }, [onClick]);
 
+  const latestStxBlock = latestBlock?.stxBlocks[0];
+
+  const text = latestBlocksCount ? (
+    <>{latestBlocksCount}</>
+  ) : latestStxBlock ? (
+    <>
+      Last update <RelativeTimeDisplay timestampInMs={latestStxBlock.timestamp} />
+    </>
+  ) : null;
+
   return (
     <UpdateBarLayout {...rest}>
       <Text
@@ -69,16 +80,15 @@ export function UpdateBarBase({
         display={'inline'}
         style={getFadeAnimationStyle(isBlockListLoading)}
       >
-        {latestBlocksCount ? latestBlocksCount : `Avg. block time: ${last_24h}s`}
+        {text}
       </Text>
       <Button variant="text" onClick={update}>
         <Flex alignItems={'center'} gap={1.5}>
           <Icon
             color="buttonText"
             as={ArrowCounterClockwise}
-            w={'12px'}
-            h={'12px'}
-            transform={'rotate(90deg) scaleX(-1)'}
+            size={3}
+            transform={'rotate(0deg) scaleX(-1)'}
           />
           Update
         </Flex>
@@ -87,10 +97,20 @@ export function UpdateBarBase({
   );
 }
 
-export function UpdateBar({ onClick, latestBlocksCount, ...rest }: UpdateBarProps & FlexProps) {
+export function UpdateBar({
+  onClick,
+  latestBlocksCount,
+  latestBlock,
+  ...rest
+}: UpdateBarProps & FlexProps) {
   return (
     <Suspense fallback={<UpdateBarSkeleton />}>
-      <UpdateBarBase latestBlocksCount={latestBlocksCount} onClick={onClick} {...rest} />
+      <UpdateBarBase
+        latestBlocksCount={latestBlocksCount}
+        latestBlock={latestBlock}
+        onClick={onClick}
+        {...rest}
+      />
     </Suspense>
   );
 }
diff --git a/src/app/_components/BlockList/utils.ts b/src/app/_components/BlockList/utils.ts
index 22c4e941f..f33b0fb49 100644
--- a/src/app/_components/BlockList/utils.ts
+++ b/src/app/_components/BlockList/utils.ts
@@ -8,7 +8,6 @@ export type BtcBlockMap = Record<string, BurnBlock>;
 export type BlockListData = { stxBlocks: BlockListStxBlock[]; btcBlock: BlockListBtcBlock };
 
 export function createBlockListStxBlock(stxBlock: Block | NakamotoBlock): BlockListStxBlock {
-  console.log('using the actual createBlockListStxBlock function');
   return {
     type: 'stx_block',
     height: stxBlock.height,
@@ -23,7 +22,6 @@ export function createBlockListStxBlock(stxBlock: Block | NakamotoBlock): BlockL
   };
 }
 export function createBlockListBtcBlock(btcBlock: BurnBlock): BlockListBtcBlock {
-  console.log('using the actual createBlockListBtcBlock function');
   return {
     type: 'btc_block',
     height: btcBlock.burn_block_height,
@@ -38,7 +36,6 @@ export function createBlockListBtcBlock(btcBlock: BurnBlock): BlockListBtcBlock
 export function createBlockListBtcBlockFromStxBlock(
   stxBlock: Block | NakamotoBlock
 ): BlockListBtcBlock {
-  console.log('using the actual createBlockListBtcBlockFromStxBlock function');
   return {
     type: 'btc_block',
     height: stxBlock.burn_block_height,
diff --git a/src/app/skeleton.tsx b/src/app/skeleton.tsx
index d0afa3733..396b9f563 100644
--- a/src/app/skeleton.tsx
+++ b/src/app/skeleton.tsx
@@ -3,7 +3,7 @@
 import { Section } from '../common/components/Section';
 import { SkeletonTxsList } from '../features/txs-list/SkeletonTxsList';
 import { Grid } from '../ui/Grid';
-import { SkeletonBlockList } from './_components/BlockList/SkeletonBlockList';
+import { HomePageBlockListSkeleton } from './_components/BlockList/Grouped/skeleton';
 import { PageTitle } from './_components/PageTitle';
 import { SkeletonStatSection } from './_components/Stats/SkeletonStatSection';
 import { Wrapper } from './_components/Stats/Wrapper';
@@ -26,7 +26,7 @@ export default function HomePageSkeleton() {
         <Section title={'Transactions'}>
           <SkeletonTxsList />
         </Section>
-        <SkeletonBlockList />
+        <HomePageBlockListSkeleton />
       </Grid>
     </>
   );
diff --git a/src/common/components/RelativeTimeDisplay.tsx b/src/common/components/RelativeTimeDisplay.tsx
new file mode 100644
index 000000000..c2b127792
--- /dev/null
+++ b/src/common/components/RelativeTimeDisplay.tsx
@@ -0,0 +1,23 @@
+import dayjs from 'dayjs';
+import { useCallback, useEffect, useState } from 'react';
+
+import { ONE_MINUTE } from '../queries/query-stale-time';
+
+export const RelativeTimeDisplay = ({ timestampInMs }: { timestampInMs: number }) => {
+  const [time, setTime] = useState('');
+
+  const updateRelativeTime = useCallback(() => {
+    setTime(dayjs().to(dayjs(timestampInMs * 1000)));
+  }, [timestampInMs, setTime]);
+
+  useEffect(() => {
+    updateRelativeTime(); // Update immediately on mount
+    const interval = setInterval(updateRelativeTime, ONE_MINUTE); // Update every minute
+
+    return () => clearInterval(interval); // Cleanup the interval on component unmount
+  }, [timestampInMs, updateRelativeTime]); // Dependencies array: the effect depends on the timestamp
+
+  return <>{time}</>;
+};
+
+export default RelativeTimeDisplay;
diff --git a/src/common/components/Timestamp.tsx b/src/common/components/Timestamp.tsx
index 323536e70..b52c0c9ac 100644
--- a/src/common/components/Timestamp.tsx
+++ b/src/common/components/Timestamp.tsx
@@ -2,7 +2,7 @@
 
 import { Flex, FlexProps } from '../../ui/Flex';
 import { Tooltip } from '../../ui/Tooltip';
-import { toRelativeTime } from '../utils/utils';
+import RelativeTimeDisplay from './RelativeTimeDisplay';
 import { Value } from './Value';
 
 interface TimestampProps {
@@ -17,7 +17,9 @@ export function Timestamp({ ts, ...rest }: TimestampProps & FlexProps) {
   return (
     <Tooltip label={readableTimestamp}>
       <Flex alignItems="center" {...rest}>
-        <Value suppressHydrationWarning={true}>{toRelativeTime(ts * 1000)}</Value>
+        <Value suppressHydrationWarning={true}>
+          <RelativeTimeDisplay timestampInMs={ts} />
+        </Value>
       </Flex>
     </Tooltip>
   );
diff --git a/src/common/utils/time-utils.ts b/src/common/utils/time-utils.ts
new file mode 100644
index 000000000..bb7d40624
--- /dev/null
+++ b/src/common/utils/time-utils.ts
@@ -0,0 +1,5 @@
+export function getReadableTimestamp(ts: number): string {
+  return ts
+    ? `${new Date(ts * 1000).toLocaleTimeString()} ${new Date(ts * 1000).toLocaleDateString()}`
+    : '';
+}