diff --git a/pages/index.tsx b/pages/index.tsx
index 828343e8..0e5b1782 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -370,17 +370,41 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
               <Flex
                 css={{
                   flexDirection: "column",
+                  alignItems: "flex-start",
+                  width: "100%",
                   "@bp1": {
                     flexDirection: "row",
+                    alignItems: "center",
+                    width: "auto",
                   },
                 }}
-                align="center"
               >
-                <Heading size="2" css={{ fontWeight: 600 }}>
+                <Heading
+                  size="2"
+                  css={{
+                    fontWeight: 600,
+                    width: "100%",
+                    textAlign: "left",
+                    "@bp1": {
+                      width: "auto",
+                    },
+                  }}
+                >
                   Orchestrators
                 </Heading>
               </Flex>
-              <Flex align="center">
+              <Flex
+                css={{
+                  width: "100%",
+                  justifyContent: "space-between",
+                  flexWrap: "nowrap",
+                  "@bp1": {
+                    width: "auto",
+                    justifyContent: "flex-start",
+                  },
+                }}
+                align="center"
+              >
                 {(process.env.NEXT_PUBLIC_NETWORK == "MAINNET" ||
                   process.env.NEXT_PUBLIC_NETWORK == "ARBITRUM_ONE") && (
                   <A as={Link} href="/leaderboard" passHref>
@@ -389,7 +413,14 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                       css={{
                         color: "$hiContrast",
                         fontSize: "$2",
-                        marginRight: "$2",
+                        paddingLeft: 0,
+                        paddingRight: 0,
+                        marginRight: 0,
+                        "@bp1": {
+                          paddingLeft: "$2",
+                          paddingRight: "$2",
+                          marginRight: "$2",
+                        },
                       }}
                     >
                       Performance Leaderboard
@@ -397,7 +428,19 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
                   </A>
                 )}
                 <A as={Link} href="/orchestrators" passHref>
-                  <Button ghost css={{ color: "$hiContrast", fontSize: "$2" }}>
+                  <Button
+                    ghost
+                    css={{
+                      color: "$hiContrast",
+                      fontSize: "$2",
+                      paddingLeft: 0,
+                      paddingRight: 0,
+                      "@bp1": {
+                        paddingLeft: "$2",
+                        paddingRight: "$2",
+                      },
+                    }}
+                  >
                     View All
                     <Box as={ArrowRightIcon} css={{ marginLeft: "$1" }} />
                   </Button>
@@ -442,19 +485,53 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
               <Flex
                 css={{
                   flexDirection: "column",
+                  alignItems: "flex-start",
+                  width: "100%",
                   "@bp1": {
                     flexDirection: "row",
+                    alignItems: "center",
+                    width: "auto",
                   },
                 }}
-                align="center"
               >
-                <Heading size="2" css={{ fontWeight: 600 }}>
+                <Heading
+                  size="2"
+                  css={{
+                    fontWeight: 600,
+                    width: "100%",
+                    textAlign: "left",
+                    "@bp1": {
+                      width: "auto",
+                    },
+                  }}
+                >
                   Transactions
                 </Heading>
               </Flex>
-              <Flex align="center">
+              <Flex
+                css={{
+                  width: "100%",
+                  justifyContent: "flex-start",
+                  "@bp1": {
+                    width: "auto",
+                  },
+                }}
+                align="center"
+              >
                 <A as={Link} href="/transactions" passHref>
-                  <Button ghost css={{ color: "$hiContrast", fontSize: "$2" }}>
+                  <Button
+                    ghost
+                    css={{
+                      color: "$hiContrast",
+                      fontSize: "$2",
+                      paddingLeft: 0,
+                      paddingRight: 0,
+                      "@bp1": {
+                        paddingLeft: "$2",
+                        paddingRight: "$2",
+                      },
+                    }}
+                  >
                     View All
                     <Box as={ArrowRightIcon} css={{ marginLeft: "$1" }} />
                   </Button>
diff --git a/pages/leaderboard.tsx b/pages/leaderboard.tsx
index 24803d6c..9a56288a 100644
--- a/pages/leaderboard.tsx
+++ b/pages/leaderboard.tsx
@@ -87,26 +87,28 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
           }}
         >
           <Flex
-            justify="between"
             css={{
-              width: "100%",
-              flexDirection: "column", // Default to column for mobile
-              marginBottom: "0",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              marginBottom: "$4",
+              alignItems: "center",
               "@bp2": {
-                flexDirection: "row", // Change to row for larger screens
+                flexDirection: "row",
                 marginBottom: "$4",
               },
             }}
           >
             <Heading
-              size="3"
+              size="2"
               as="h1"
               css={{
                 fontWeight: 700,
-                fontSize: 26,
-                marginBottom: "$2",
-                "@bp3": {
+                marginBottom: "$3",
+                width: "100%",
+                textAlign: "left",
+                "@bp2": {
                   marginBottom: "0",
+                  width: "auto",
                 },
               }}
             >
@@ -115,27 +117,34 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
             <Flex
               css={{
                 fontSize: "$2",
-                flexDirection: "column", // Default to column for mobile
+                flexDirection: "column",
+                alignItems: "flex-start",
+                rowGap: "$2",
+                width: "100%",
+                "@bp1": {
+                  flexDirection: "row",
+                  flexWrap: "wrap",
+                  justifyContent: "flex-start",
+                  columnGap: "$4",
+                },
                 "@bp2": {
-                  flexDirection: "row", // Change to row for larger screens
+                  width: "auto",
+                  flexWrap: "nowrap",
                 },
               }}
             >
               <Flex
                 css={{
-                  flexDirection: "row", // Stack title and dropdown vertically on mobile
+                  flexDirection: "row",
                   alignItems: "center",
-                  marginBottom: "$2", // Add margin-bottom for spacing when stacked
-                  marginLeft: "$2", // Add margin-left for spacing between groups
-                  "@bp2": {
-                    marginBottom: "0", // Remove margin-bottom for larger screens
-                    marginRight: "$4", // Add margin-right for spacing between groups
-                  },
+                  justifyContent: "flex-start",
+                  gap: "$2",
+                  width: "100%",
+                  "@bp1": { width: "auto" },
                 }}
               >
                 <Flex
                   css={{
-                    marginRight: "$2",
                     fontSize: "$2",
                     color: "$hiContrast",
                   }}
@@ -214,18 +223,16 @@ const LeaderboardPage = ({ hadError, orchestratorIds }: PageProps) => {
               </Flex>
               <Flex
                 css={{
-                  flexDirection: "row", // Align title and dropdown horizontally
+                  flexDirection: "row",
                   alignItems: "center",
-                  marginBottom: "$2", // Add margin-bottom for spacing when stacked
-                  marginLeft: "$2", // Add margin-left for spacing between groups
-                  "@bp2": {
-                    marginBottom: "0", // Remove margin-bottom for larger screens
-                  },
+                  justifyContent: "flex-start",
+                  gap: "$2",
+                  width: "100%",
+                  "@bp1": { width: "auto" },
                 }}
               >
                 <Flex
                   css={{
-                    marginRight: "$2",
                     fontSize: "$2",
                     color: "$hiContrast",
                   }}
diff --git a/pages/orchestrators.tsx b/pages/orchestrators.tsx
index 84300b68..c47b70cc 100644
--- a/pages/orchestrators.tsx
+++ b/pages/orchestrators.tsx
@@ -71,24 +71,53 @@ const OrchestratorsPage = ({
               },
             }}
           >
-            <Heading size="2" as="h1" css={{ fontWeight: 700 }}>
+            <Heading
+              size="2"
+              as="h1"
+              css={{
+                fontWeight: 700,
+                width: "100%",
+                textAlign: "left",
+                marginBottom: "$2",
+                "@bp1": {
+                  width: "auto",
+                  marginBottom: "0",
+                },
+              }}
+            >
               Orchestrators
             </Heading>
-            {(process.env.NEXT_PUBLIC_NETWORK == "MAINNET" ||
-              process.env.NEXT_PUBLIC_NETWORK == "ARBITRUM_ONE") && (
-              <A as={Link} href="/leaderboard" passHref>
-                <Button
-                  ghost
-                  css={{
-                    color: "$hiContrast",
-                    fontSize: "$2",
-                  }}
-                >
-                  Performance Leaderboard
-                  <Box as={ArrowRightIcon} css={{ marginLeft: "$1" }} />
-                </Button>
-              </A>
-            )}
+            <Flex
+              css={{
+                width: "100%",
+                justifyContent: "flex-start",
+                "@bp1": {
+                  width: "auto",
+                },
+              }}
+            >
+              {(process.env.NEXT_PUBLIC_NETWORK == "MAINNET" ||
+                process.env.NEXT_PUBLIC_NETWORK == "ARBITRUM_ONE") && (
+                <A as={Link} href="/leaderboard" passHref>
+                  <Button
+                    ghost
+                    css={{
+                      color: "$hiContrast",
+                      fontSize: "$2",
+                      paddingLeft: 0,
+                      paddingRight: 0,
+                      "@bp1": {
+                        paddingLeft: "$2",
+                        paddingRight: "$2",
+                      },
+                    }}
+                  >
+                    Performance Leaderboard
+                    <Box as={ArrowRightIcon} css={{ marginLeft: "$1" }} />
+                  </Button>
+                </A>
+              )}
+            </Flex>
           </Flex>
           <Box css={{ marginBottom: "$5" }}>
             {showOrchList ? (