diff --git a/airflow-core/src/airflow/ui/src/pages/DagsList/RecentRuns.tsx b/airflow-core/src/airflow/ui/src/pages/DagsList/RecentRuns.tsx
index d52ca59f53631..8048e5182d034 100644
--- a/airflow-core/src/airflow/ui/src/pages/DagsList/RecentRuns.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/DagsList/RecentRuns.tsx
@@ -23,6 +23,7 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 import type { DAGWithLatestDagRunsResponse } from "openapi/requests/types.gen";
+import { StateIcon } from "src/components/StateIcon";
 import Time from "src/components/Time";
 import { Tooltip } from "src/components/ui";
 import { renderDuration } from "src/utils";
@@ -48,7 +49,7 @@ export const RecentRuns = ({
   );
 
   return (
-    <Flex alignItems="flex-end" flexDirection="row-reverse" pb={1}>
+    <Flex alignItems="flex-end" flexDirection="row-reverse" gap={[0.5, 0.5, 0.5, 1]} pb={1}>
       {latestRuns.map((run) => (
         <Tooltip
           content={
@@ -84,15 +85,19 @@ export const RecentRuns = ({
           }}
         >
           <Link to={`/dags/${run.dag_id}/runs/${run.dag_run_id}/`}>
-            <Box px={1}>
-              <Box
-                bg={`${run.state}.solid`}
-                borderRadius="4px"
-                height={`${run.duration === null ? 1 : (run.duration / max) * BAR_HEIGHT}px`}
-                minHeight={1}
-                width="4px"
-              />
-            </Box>
+            <Flex
+              alignItems="center"
+              bg={`${run.state}.solid`}
+              borderRadius="4px"
+              flexDir="column"
+              fontSize="12px"
+              height={`${run.duration === null ? 1 : (run.duration / max) * BAR_HEIGHT}px`}
+              justifyContent="flex-end"
+              minHeight="12px"
+              width="12px"
+            >
+              <StateIcon color="white" state={run.state} />
+            </Flex>
           </Link>
         </Tooltip>
       ))}
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDagCard.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDagCard.tsx
index 964be0a41bc5c..85c5cba322300 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDagCard.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDagCard.tsx
@@ -38,14 +38,13 @@ export const FavoriteDagCard = ({ dagId, dagName, latestRuns }: FavoriteDagProps
       borderWidth="1px"
       display="flex"
       flexDirection="column"
-      height="100%"
       justifyContent="center"
+      maxWidth="200px"
       overflow="hidden"
       px={4}
       py={3}
-      width="100%"
     >
-      <VStack>
+      <VStack gap={0}>
         {latestRuns.length > 0 ? (
           <RecentRuns latestRuns={latestRuns} />
         ) : (
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDags.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDags.tsx
index e17b111f5dd98..4451cd88b9676 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDags.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/FavoriteDags/FavoriteDags.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Flex, Heading, SimpleGrid, Text } from "@chakra-ui/react";
+import { Box, Flex, Heading, Text } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiStar } from "react-icons/fi";
 
@@ -47,7 +47,7 @@ export const FavoriteDags = () => {
           {translate("favorite.noFavoriteDags")}
         </Text>
       ) : (
-        <SimpleGrid alignItems="end" columnGap={1} columns={10} rowGap={4}>
+        <Flex flexWrap="wrap" gap={2}>
           {favorites.dags.map((dag) => (
             <FavoriteDagCard
               dagId={dag.dag_id}
@@ -56,7 +56,7 @@ export const FavoriteDags = () => {
               latestRuns={dag.latest_dag_runs}
             />
           ))}
-        </SimpleGrid>
+        </Flex>
       )}
     </Box>
   );
diff --git a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
index e1027f050b59b..4192ad7b88652 100644
--- a/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Dashboard/Stats/Stats.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Flex, Heading, HStack } from "@chakra-ui/react";
+import { Box, Flex, Heading } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { FiClipboard, FiZap } from "react-icons/fi";
 
@@ -51,7 +51,7 @@ export const Stats = () => {
         </Heading>
       </Flex>
 
-      <HStack gap={4}>
+      <Flex flexWrap="wrap" gap={4}>
         <NeedsReviewButton />
 
         <StatsCard
@@ -99,7 +99,7 @@ export const Stats = () => {
           label={translate("stats.activeDags")}
           link="dags?paused=false"
         />
-      </HStack>
+      </Flex>
     </Box>
   );
 };