diff --git a/CHANGELOG.md b/CHANGELOG.md
index 765c2fce5..6292ee069 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#323](https://github.com/alleslabs/celatone-frontend/pull/323) Revise back button and breadcrumb components
 - [#339](https://github.com/alleslabs/celatone-frontend/pull/339) Update all routes to plural form, and patch all codes
 - [#334](https://github.com/alleslabs/celatone-frontend/pull/334) Change `osmo-test-4` to `osmo-test-5`, fix tx service when accountId is undefined
 - [#311](https://github.com/alleslabs/celatone-frontend/pull/311) Refine css styling
diff --git a/src/lib/components/Breadcrumb.tsx b/src/lib/components/Breadcrumb.tsx
new file mode 100644
index 000000000..40b5115b7
--- /dev/null
+++ b/src/lib/components/Breadcrumb.tsx
@@ -0,0 +1,56 @@
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbItem as ChakraBreadcrumbItem,
+  Text,
+} from "@chakra-ui/react";
+
+import type { Option } from "lib/types";
+
+import { AppLink } from "./AppLink";
+import { CustomIcon } from "./icon";
+
+type BreadcrumbItemProps = {
+  text: Option<string>;
+  href?: string;
+};
+
+type BreadcrumbProps = {
+  items: BreadcrumbItemProps[];
+  mb?: number;
+};
+
+export const Breadcrumb = ({ items, mb = 0 }: BreadcrumbProps) => (
+  <ChakraBreadcrumb
+    w="full"
+    spacing="4px"
+    mb={mb}
+    separator={<CustomIcon name="chevron-right" boxSize={3} color="gray.600" />}
+  >
+    {items.map((item) =>
+      item.href ? (
+        item.text && (
+          <ChakraBreadcrumbItem
+            _hover={{ opacity: 0.8 }}
+            transition="all 0.25s ease-in-out"
+          >
+            <AppLink color="text.dark" href={item.href}>
+              {item.text}
+            </AppLink>
+          </ChakraBreadcrumbItem>
+        )
+      ) : (
+        <ChakraBreadcrumbItem isCurrentPage>
+          <Text
+            variant="body2"
+            className="ellipsis"
+            fontWeight={600}
+            width="250px"
+            color="text.dark"
+          >
+            {item.text}
+          </Text>
+        </ChakraBreadcrumbItem>
+      )
+    )}
+  </ChakraBreadcrumb>
+);
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index edc318364..1cc2c2a31 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -12,7 +12,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { useValidateAddress } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomTab } from "lib/components/CustomTab";
 import { CustomIcon } from "lib/components/icon";
@@ -27,7 +27,12 @@ import {
   usePublicProjectBySlug,
 } from "lib/services/publicProjectService";
 import type { HumanAddr } from "lib/types";
-import { formatPrice, getFirstQueryParam, scrollToTop } from "lib/utils";
+import {
+  formatPrice,
+  getFirstQueryParam,
+  scrollToTop,
+  truncate,
+} from "lib/utils";
 
 import { AssetsSection } from "./components/asset";
 import { DelegationsSection } from "./components/delegations";
@@ -86,30 +91,46 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
 
   return (
     <>
-      <Flex direction="column" gap={1} mt={6} mb={6}>
-        <Flex gap={1}>
-          {publicDetail?.logo && (
-            <Image
-              src={publicDetail.logo}
-              borderRadius="full"
-              alt={publicDetail.name}
-              width={7}
-              height={7}
-            />
-          )}
-          <Heading as="h5" variant="h5">
-            {displayName}
-          </Heading>
-        </Flex>
-        <Flex gap={2}>
-          <Text fontWeight={500} color="text.dark" variant="body2">
-            Wallet Address:
-          </Text>
-          <CopyLink
-            value={accountAddress}
-            amptrackSection="account_top"
-            type="user_address"
+      <Flex direction="column" mb={6}>
+        {publicDetail && (
+          <Breadcrumb
+            items={[
+              { text: "Public Projects", href: "/projects" },
+              {
+                text: publicDetail?.name,
+                href: `/projects/${publicInfo?.slug}`,
+              },
+              { text: truncate(accountAddress) },
+            ]}
+            mb={6}
           />
+        )}
+        <Flex direction="column" gap={2}>
+          <Flex gap={1} minH="36px" align="center">
+            <CustomIcon name="wallet" boxSize={5} color="secondary.main" />
+            {publicDetail?.logo && (
+              <Image
+                src={publicDetail.logo}
+                borderRadius="full"
+                alt={publicDetail.name}
+                width={7}
+                height={7}
+              />
+            )}
+            <Heading as="h5" variant="h5">
+              {displayName}
+            </Heading>
+          </Flex>
+          <Flex gap={2}>
+            <Text fontWeight={500} color="text.dark" variant="body2">
+              Wallet Address:
+            </Text>
+            <CopyLink
+              value={accountAddress}
+              amptrackSection="account_top"
+              type="user_address"
+            />
+          </Flex>
         </Flex>
       </Flex>
       {publicInfo?.description && (
@@ -331,7 +352,6 @@ const AccountDetails = () => {
 
   return (
     <PageContainer>
-      <BackButton />
       {validateUserAddress(accountAddressParam) &&
       validateContractAddress(accountAddressParam) ? (
         <InvalidAccount />
diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
index 73642d3a9..8c05813a8 100644
--- a/src/lib/pages/block-details/components/BlockDetailsTop.tsx
+++ b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -38,67 +38,72 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
   const disablePrevious = block <= 1;
   return (
     <Flex
-      justify="space-between"
       mb={12}
       pb={12}
       mt={6}
       borderBottomColor="gray.700"
       borderBottomWidth="1px"
     >
-      <Flex direction="column" gap={1}>
-        <Flex alignItems="center">
-          <CustomIcon name="block" boxSize={5} color="secondary.main" />
-          <Heading as="h5" variant="h5" className="ellipsis">
-            {blockData.height}
-          </Heading>
-        </Flex>
-        <Flex gap={2}>
-          <Text variant="body2" color="text.dark">
-            Block Hash:
-          </Text>
-          <CopyLink
-            value={blockData.hash.toUpperCase()}
-            amptrackSection="block_details_top"
-            type="block_hash"
-          />
+      <Flex direction="column" gap={2} width="full">
+        <Flex justifyContent="space-between" alignItems="center" width="full">
+          <Flex alignItems="center">
+            <CustomIcon name="block" boxSize={5} color="secondary.main" />
+            <Heading as="h5" variant="h5" className="ellipsis">
+              {blockData.height}
+            </Heading>
+          </Flex>
+          <Flex gap={2}>
+            {!disablePrevious && (
+              <AppLink href={`/block/${block - 1}`}>
+                <StyledIconButton
+                  icon={<CustomIcon name="chevron-left" />}
+                  variant="ghost-gray"
+                />
+              </AppLink>
+            )}
+            <AppLink href={`/block/${block + 1}`}>
+              <StyledIconButton
+                icon={<CustomIcon name="chevron-right" />}
+                variant="ghost-gray"
+              />
+            </AppLink>
+            <Button
+              variant="ghost-gray"
+              padding={2}
+              rightIcon={
+                <CustomIcon name="launch" boxSize={3} color="text.dark" />
+              }
+              onClick={openLcdPage}
+            >
+              View in JSON
+            </Button>
+          </Flex>
         </Flex>
-        <Flex gap={2} alignItems="center">
-          <Flex gap={1} alignItems="center">
-            <CustomIcon name="history" boxSize={3} color="gray.600" />
+        <Flex direction="column" gap={1}>
+          <Flex gap={2}>
             <Text variant="body2" color="text.dark">
-              {dateFromNow(blockData.timestamp)}
+              Block Hash:
+            </Text>
+            <CopyLink
+              value={blockData.hash.toUpperCase()}
+              amptrackSection="block_details_top"
+              type="block_hash"
+            />
+          </Flex>
+          <Flex gap={2} alignItems="center">
+            <Flex gap={1} alignItems="center">
+              <CustomIcon name="history" boxSize={3} color="gray.600" />
+              <Text variant="body2" color="text.dark">
+                {dateFromNow(blockData.timestamp)}
+              </Text>
+            </Flex>
+            <DotSeparator />
+            <Text variant="body2" color="text.dark">
+              {formatUTC(blockData.timestamp)}
             </Text>
           </Flex>
-          <DotSeparator />
-          <Text variant="body2" color="text.dark">
-            {formatUTC(blockData.timestamp)}
-          </Text>
         </Flex>
       </Flex>
-      <Flex gap={2}>
-        {!disablePrevious && (
-          <AppLink href={`/blocks/${block - 1}`}>
-            <StyledIconButton
-              icon={<CustomIcon name="chevron-left" />}
-              variant="ghost-gray"
-            />
-          </AppLink>
-        )}
-        <AppLink href={`/blocks/${block + 1}`}>
-          <StyledIconButton
-            icon={<CustomIcon name="chevron-right" />}
-            variant="ghost-gray"
-          />
-        </AppLink>
-        <Button
-          variant="ghost-gray"
-          padding={2}
-          rightIcon={<CustomIcon name="launch" boxSize={3} />}
-          onClick={openLcdPage}
-        >
-          View in JSON
-        </Button>
-      </Flex>
     </Flex>
   );
 };
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
index 5b88037fd..4400562e1 100644
--- a/src/lib/pages/block-details/index.tsx
+++ b/src/lib/pages/block-details/index.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { BackButton } from "lib/components/button";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
@@ -26,7 +26,12 @@ const BlockDetail = () => {
 
   return (
     <PageContainer>
-      <BackButton />
+      <Breadcrumb
+        items={[
+          { text: "Blocks", href: "/blocks" },
+          { text: blockData?.height.toString() },
+        ]}
+      />
       {blockData ? (
         <>
           <BlockDetailsTop blockData={blockData} />
diff --git a/src/lib/pages/blocks/components/BlocksRow.tsx b/src/lib/pages/blocks/components/BlocksRow.tsx
index 704703fe0..42cee0dac 100644
--- a/src/lib/pages/blocks/components/BlocksRow.tsx
+++ b/src/lib/pages/blocks/components/BlocksRow.tsx
@@ -26,7 +26,7 @@ export const BlocksRow = ({ templateColumns, blockData }: BlocksRowProps) => {
       </TableRow>
       <TableRow>{truncate(blockData.hash.toUpperCase())}</TableRow>
       <TableRow>
-        <ValidatorBadge validator={blockData.proposer} />
+        <ValidatorBadge validator={blockData.proposer} badgeSize={7} />
       </TableRow>
       <TableRow
         justifyContent="center"
diff --git a/src/lib/pages/code-details/index.tsx b/src/lib/pages/code-details/index.tsx
index 9cf3b2c0f..a12a341a3 100644
--- a/src/lib/pages/code-details/index.tsx
+++ b/src/lib/pages/code-details/index.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { BackButton } from "lib/components/button";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { GitHubLink } from "lib/components/links";
@@ -41,9 +41,25 @@ const CodeDetailsBody = observer(
 
     return (
       <>
-        <Flex justify="space-between" mt={6}>
-          <Flex direction="column" gap={1}>
+        <Breadcrumb
+          items={[
+            {
+              text: publicProject.publicCodeData?.name
+                ? "Public Projects"
+                : "Codes",
+              href: publicProject.publicCodeData?.name ? "/projects" : "/codes",
+            },
+            {
+              text: publicProject.publicDetail?.name,
+              href: `/projects/${publicProject.publicCodeData?.slug}`,
+            },
+            { text: codeId.toString() },
+          ]}
+        />
+        <Flex direction="column" gap={2} w="full" mt={6}>
+          <Flex justify="space-between" align="center">
             <Flex gap={1}>
+              <CustomIcon name="code" boxSize={5} color="secondary.main" />
               {publicProject.publicDetail?.logo && (
                 <Image
                   src={publicProject.publicDetail.logo}
@@ -59,6 +75,20 @@ const CodeDetailsBody = observer(
                   codeId}
               </Heading>
             </Flex>
+            <CTASection
+              id={codeId}
+              uploader={localCodeInfo?.uploader ?? codeData.uploader}
+              name={localCodeInfo?.name}
+              instantiatePermission={
+                codeData.instantiatePermission ?? AccessConfigPermission.UNKNOWN
+              }
+              permissionAddresses={codeData.permissionAddresses ?? []}
+              contractCount={undefined}
+              cw2Contract={undefined}
+              cw2Version={undefined}
+            />
+          </Flex>
+          <Flex direction="column" gap={1}>
             {publicProject.publicCodeData?.name && (
               <Flex gap={2}>
                 <Text fontWeight={500} color="text.dark" variant="body2">
@@ -93,18 +123,6 @@ const CodeDetailsBody = observer(
               <GitHubLink github={publicProject.publicCodeData.github} />
             )}
           </Flex>
-          <CTASection
-            id={codeId}
-            uploader={localCodeInfo?.uploader ?? codeData.uploader}
-            name={localCodeInfo?.name}
-            instantiatePermission={
-              codeData.instantiatePermission ?? AccessConfigPermission.UNKNOWN
-            }
-            permissionAddresses={codeData.permissionAddresses ?? []}
-            contractCount={undefined}
-            cw2Contract={undefined}
-            cw2Version={undefined}
-          />
         </Flex>
         {publicProject.publicCodeData?.description && (
           <PublicDescription
@@ -134,7 +152,6 @@ const CodeDetails = observer(() => {
   if (data.isLoading) return <Loading />;
   return (
     <PageContainer>
-      <BackButton />
       {!isCodeId(codeIdParam) ? (
         <InvalidCode />
       ) : (
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index dede8dc9a..b4ab963d7 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -9,6 +9,7 @@ import {
 import router from "next/router";
 
 import { useInternalNavigate } from "lib/app-provider";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { AdminButton } from "lib/components/button";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
@@ -19,7 +20,7 @@ import {
   SaveContractDetailsModal,
 } from "lib/components/modal";
 import type { ContractAddr, ContractData } from "lib/types";
-import { getFirstQueryParam } from "lib/utils";
+import { getFirstQueryParam, truncate } from "lib/utils";
 
 interface ContractTopProps {
   contractData: ContractData;
@@ -94,94 +95,118 @@ export const ContractTop = ({ contractData }: ContractTopProps) => {
   };
 
   return (
-    <Flex justify="space-between" my={6}>
-      <Flex direction="column" gap={1} textOverflow="ellipsis" maxW="670px">
-        <Flex gap={1}>
-          {publicProject.publicDetail?.logo && (
-            <Image
-              src={publicProject.publicDetail.logo}
-              borderRadius="full"
-              alt={publicProject.publicDetail.name}
-              width={7}
-              height={7}
-            />
-          )}
-          <Heading as="h5" variant="h5" className="ellipsis">
-            {displayName}
-          </Heading>
-        </Flex>
-        <Flex gap={2}>
-          <Text
-            color="text.dark"
-            variant="body2"
-            fontWeight={500}
-            whiteSpace="nowrap"
-          >
-            Contract Address:
-          </Text>
-          <CopyLink
-            value={contractAddress}
-            amptrackSection="contract_top"
-            type="contract_address"
+    <Flex justify="space-between" mb={6}>
+      <Flex direction="column" w="full">
+        {publicProject.publicDetail && (
+          <Breadcrumb
+            items={[
+              { text: "Public Projects", href: "/projects" },
+              {
+                text: publicProject.publicDetail.name,
+                href: `/projects/${publicProject.publicInfo?.slug}`,
+              },
+              { text: truncate(contractAddress) },
+            ]}
+            mb={6}
           />
-        </Flex>
-        <Flex gap={2}>
-          <Text color="text.dark" variant="body2" fontWeight={500}>
-            Label:
-          </Text>
-          <Text variant="body2" className="ellipsis">
-            {contractData.instantiateInfo?.label}
-          </Text>
-        </Flex>
-        {publicProject.publicInfo?.name && (
-          <Flex gap={2}>
-            <Text color="text.dark" variant="body2" fontWeight={500}>
-              Public Contract Name:
-            </Text>
-            <Text variant="body2" className="ellipsis">
-              {publicProject.publicInfo?.name}
-            </Text>
-          </Flex>
-        )}
-        {publicProject.publicInfo?.github && (
-          <GitHubLink github={publicProject.publicInfo?.github} />
         )}
-      </Flex>
-      <Flex gap={4}>
-        <AdminButton
-          contractAddress={contractAddress as ContractAddr}
-          admin={instantiateInfo?.admin}
-        />
-        <Button
-          variant="outline-primary"
-          leftIcon={<CustomIcon name="query" />}
-          onClick={goToQuery}
-        >
-          Query
-        </Button>
-        <Button
-          variant="outline-primary"
-          leftIcon={<CustomIcon name="execute" />}
-          onClick={goToExecute}
-        >
-          Execute
-        </Button>
-        <Flex>
-          {contractLocalInfo && (
-            <EditContractDetailsModal
-              contractLocalInfo={contractLocalInfo}
-              triggerElement={
-                <IconButton
-                  fontSize="24px"
-                  variant="none"
-                  aria-label="edit"
-                  color="gray.600"
-                  icon={<CustomIcon name="edit" />}
+        <Flex direction="column" gap={2} textOverflow="ellipsis" w="full">
+          <Flex justify="space-between" align="center">
+            <Flex gap={1} maxW="670px">
+              <CustomIcon
+                name="contract-address"
+                boxSize="5"
+                color="secondary.main"
+              />
+              {publicProject.publicDetail?.logo && (
+                <Image
+                  src={publicProject.publicDetail.logo}
+                  borderRadius="full"
+                  alt={publicProject.publicDetail.name}
+                  width={7}
+                  height={7}
                 />
-              }
-            />
-          )}
-          {renderSaveButton()}
+              )}
+              <Heading as="h5" variant="h5" className="ellipsis">
+                {displayName}
+              </Heading>
+            </Flex>
+            <Flex gap={4}>
+              <AdminButton
+                contractAddress={contractAddress as ContractAddr}
+                admin={instantiateInfo?.admin}
+              />
+              <Button
+                variant="outline-primary"
+                leftIcon={<CustomIcon name="query" color="primary.light" />}
+                onClick={goToQuery}
+              >
+                Query
+              </Button>
+              <Button
+                variant="outline-primary"
+                leftIcon={<CustomIcon name="execute" color="primary.light" />}
+                onClick={goToExecute}
+              >
+                Execute
+              </Button>
+              <Flex>
+                {contractLocalInfo && (
+                  <EditContractDetailsModal
+                    contractLocalInfo={contractLocalInfo}
+                    triggerElement={
+                      <IconButton
+                        fontSize="24px"
+                        variant="none"
+                        aria-label="edit"
+                        color="gray.600"
+                        icon={<CustomIcon name="edit" />}
+                      />
+                    }
+                  />
+                )}
+                {renderSaveButton()}
+              </Flex>
+            </Flex>
+          </Flex>
+          <Flex direction="column" gap={1}>
+            <Flex gap={2}>
+              <Text
+                color="text.dark"
+                variant="body2"
+                fontWeight={500}
+                whiteSpace="nowrap"
+              >
+                Contract Address:
+              </Text>
+              <CopyLink
+                value={contractAddress}
+                amptrackSection="contract_top"
+                type="contract_address"
+              />
+            </Flex>
+            <Flex gap={2}>
+              <Text color="text.dark" variant="body2" fontWeight={500}>
+                Label:
+              </Text>
+              <Text variant="body2" className="ellipsis">
+                {contractData.instantiateInfo?.label}
+              </Text>
+            </Flex>
+            {publicProject.publicInfo?.name && (
+              <Flex gap={2}>
+                <Text color="text.dark" variant="body2" fontWeight={500}>
+                  Public Contract Name:
+                </Text>
+                <Text variant="body2" className="ellipsis">
+                  {publicProject.publicInfo?.name}
+                </Text>
+              </Flex>
+            )}
+            {publicProject.publicInfo?.github && (
+              <GitHubLink github={publicProject.publicInfo?.github} />
+            )}
+          </Flex>
         </Flex>
       </Flex>
     </Flex>
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 339ff3e00..e0254cb7c 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -11,7 +11,6 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { useValidateAddress } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
@@ -149,7 +148,6 @@ const ContractDetails = observer(() => {
   if (isLoading) return <Loading />;
   return (
     <PageContainer>
-      <BackButton />
       {validateContractAddress(contractAddressParam) ? (
         <InvalidContract />
       ) : (
diff --git a/src/lib/pages/contract-list/slug.tsx b/src/lib/pages/contract-list/slug.tsx
index 553a00dfd..73c7773ee 100644
--- a/src/lib/pages/contract-list/slug.tsx
+++ b/src/lib/pages/contract-list/slug.tsx
@@ -5,16 +5,13 @@ import {
   Menu,
   MenuButton,
   MenuList,
-  Breadcrumb,
-  BreadcrumbItem,
-  Text,
 } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
-import { AppLink } from "lib/components/AppLink";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import {
   EditListNameModal,
@@ -81,32 +78,11 @@ const ContractsByList = observer(() => {
   return (
     <PageContainer>
       <Breadcrumb
-        w="full"
-        spacing="4px"
-        separator={
-          <CustomIcon name="chevron-right" boxSize={3} color="gray.600" />
-        }
-      >
-        <BreadcrumbItem
-          _hover={{ opacity: 0.8 }}
-          transition="all 0.25s ease-in-out"
-        >
-          <AppLink color="text.dark" href="/contract-lists">
-            Contract Lists
-          </AppLink>
-        </BreadcrumbItem>
-        <BreadcrumbItem isCurrentPage>
-          <Text
-            variant="body2"
-            className="ellipsis"
-            width="250px"
-            fontWeight={700}
-            color="text.dark"
-          >
-            {contractListInfo.name}
-          </Text>
-        </BreadcrumbItem>
-      </Breadcrumb>
+        items={[
+          { text: "Contract Lists", href: "/contract-list" },
+          { text: contractListInfo.name },
+        ]}
+      />
       <Flex
         justifyContent="space-between"
         alignItems="center"
diff --git a/src/lib/pages/execute/index.tsx b/src/lib/pages/execute/index.tsx
index 296304f56..9d6fa558b 100644
--- a/src/lib/pages/execute/index.tsx
+++ b/src/lib/pages/execute/index.tsx
@@ -4,7 +4,6 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
 import { ConnectWalletAlert } from "lib/components/ConnectWalletAlert";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
 import { CustomIcon } from "lib/components/icon";
@@ -85,7 +84,6 @@ const Execute = () => {
   return (
     <PageContainer>
       {isFetching && <LoadingOverlay />}
-      <BackButton />
       <Flex mt={1} mb={8} justify="space-between">
         <Heading as="h5" variant="h5">
           Execute Contract
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 3c0491bc3..898b9c23f 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -17,7 +17,6 @@ import {
   useInternalNavigate,
   useValidateAddress,
 } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
 import type { FormStatus } from "lib/components/forms";
 import { TextInput } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
@@ -144,7 +143,6 @@ const Faucet = () => {
 
   return (
     <WasmPageContainer>
-      <BackButton alignSelf="flex-start" />
       <Heading as="h5" variant="h5">
         Osmosis Testnet Faucet
       </Heading>
diff --git a/src/lib/pages/public-project/components/DetailHeader.tsx b/src/lib/pages/public-project/components/DetailHeader.tsx
index 09ef4f01b..6321074af 100644
--- a/src/lib/pages/public-project/components/DetailHeader.tsx
+++ b/src/lib/pages/public-project/components/DetailHeader.tsx
@@ -1,15 +1,6 @@
-import {
-  Box,
-  Breadcrumb,
-  BreadcrumbItem,
-  Text,
-  Flex,
-  Heading,
-  Image,
-} from "@chakra-ui/react";
+import { Box, Text, Flex, Heading, Image } from "@chakra-ui/react";
 
-import { AppLink } from "lib/components/AppLink";
-import { CustomIcon } from "lib/components/icon";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import type { Option, PublicDetail } from "lib/types";
 import { getNameAndDescriptionDefault } from "lib/utils";
 
@@ -23,48 +14,27 @@ interface DetailHeaderProps {
 export const DetailHeader = ({ details, slug }: DetailHeaderProps) => (
   <>
     <Breadcrumb
-      w="full"
-      spacing={1}
-      separator={
-        <CustomIcon name="chevron-right" boxSize={3} color="gray.600" />
-      }
-    >
-      <BreadcrumbItem
-        _hover={{ opacity: 0.8 }}
-        transition="all 0.25s ease-in-out"
-      >
-        <AppLink color="text.dark" href="/projects">
-          Public Projects
-        </AppLink>
-      </BreadcrumbItem>
-      <BreadcrumbItem isCurrentPage>
-        <Text
-          variant="body2"
-          className="ellipsis"
-          width="250px"
-          fontWeight={700}
-          color="text.dark"
-        >
-          {details?.name}
-        </Text>
-      </BreadcrumbItem>
-    </Breadcrumb>
+      items={[
+        { text: "Public Projects", href: "/projects" },
+        { text: details?.name },
+      ]}
+    />
     <Flex
       justifyContent="space-between"
       alignItems="flex-start"
       w="full"
-      mt={2}
+      mt={6}
       gap={5}
     >
       <Box>
-        <Flex gap={2} align="center">
+        <Flex gap={1} align="center" minH="36px">
           {details?.logo && (
             <Image
               src={details?.logo}
               borderRadius="full"
               alt="Celatone"
-              width={8}
-              height={8}
+              width={7}
+              height={7}
             />
           )}
           <Heading as="h5" variant="h5" className="ellipsis">
diff --git a/src/lib/pages/query/index.tsx b/src/lib/pages/query/index.tsx
index ff880a2de..898c4b5f9 100644
--- a/src/lib/pages/query/index.tsx
+++ b/src/lib/pages/query/index.tsx
@@ -5,7 +5,6 @@ import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 
 import { useInternalNavigate, useLCDEndpoint } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
 import { ContractSelectSection } from "lib/components/ContractSelectSection";
 import { CustomIcon } from "lib/components/icon";
 import { LoadingOverlay } from "lib/components/LoadingOverlay";
@@ -93,7 +92,6 @@ const Query = () => {
   return (
     <PageContainer>
       {isFetching && <LoadingOverlay />}
-      <BackButton />
       <Flex mt={1} mb={8} justify="space-between">
         <Heading as="h5" variant="h5">
           Query Contract
diff --git a/src/lib/pages/tx-details/components/TxHeader.tsx b/src/lib/pages/tx-details/components/TxHeader.tsx
index 1b996d520..d86061073 100644
--- a/src/lib/pages/tx-details/components/TxHeader.tsx
+++ b/src/lib/pages/tx-details/components/TxHeader.tsx
@@ -26,7 +26,8 @@ export const TxHeader = ({ txData, ...flexProps }: TxHeaderProps) => {
         </Heading>
         <Button
           variant="ghost-gray"
-          rightIcon={<CustomIcon name="launch" boxSize={3} m={0} />}
+          padding={2}
+          rightIcon={<CustomIcon name="launch" boxSize={3} color="text.dark" />}
           onClick={() => {
             AmpTrackViewJson("tx_page_transaction_hash");
             openLcdTab(txData.txhash);
@@ -35,54 +36,56 @@ export const TxHeader = ({ txData, ...flexProps }: TxHeaderProps) => {
           View in JSON
         </Button>
       </Flex>
-      <Flex gap={2} fontSize="14px" w="full">
-        <Text variant="body2" fontWeight={500} color="text.dark">
-          Transaction Hash:
-        </Text>
-        <CopyLink
-          value={txData.txhash}
-          amptrackSection="tx_header"
-          type="tx_hash"
-        />
-      </Flex>
-      <Flex gap={2} fontSize="14px" color="text.dark" align="center">
-        <Flex
-          align="center"
-          gap={1}
-          color={txData.isTxFailed ? "error.main" : "success.main"}
-        >
-          {txData.isTxFailed ? (
+      <Flex direction="column" gap={1}>
+        <Flex gap={2} fontSize="14px" w="full">
+          <Text variant="body2" fontWeight={500} color="text.dark">
+            Transaction Hash:
+          </Text>
+          <CopyLink
+            value={txData.txhash}
+            amptrackSection="tx_header"
+            type="tx_hash"
+          />
+        </Flex>
+        <Flex gap={2} fontSize="14px" color="text.dark" align="center">
+          <Flex
+            align="center"
+            gap={1}
+            color={txData.isTxFailed ? "error.main" : "success.main"}
+          >
+            {txData.isTxFailed ? (
+              <>
+                <CustomIcon
+                  name="close-circle-solid"
+                  boxSize={3}
+                  m={0}
+                  color="error.main"
+                />
+                <p>Failed</p>
+              </>
+            ) : (
+              <>
+                <CustomIcon
+                  name="check-circle-solid"
+                  boxSize={3}
+                  m={0}
+                  color="success.main"
+                />
+                <p>Success</p>
+              </>
+            )}
+          </Flex>
+          <DotSeparator />
+          {txData.timestamp ? (
             <>
-              <CustomIcon
-                name="close-circle-solid"
-                boxSize={3}
-                m={0}
-                color="error.main"
-              />
-              <p>Failed</p>
+              <p>{dateFromNow(txData.timestamp)}</p>
+              <DotSeparator />
+              <p>{formatUTC(txData.timestamp)}</p>
             </>
           ) : (
-            <>
-              <CustomIcon
-                name="check-circle-solid"
-                boxSize={3}
-                m={0}
-                color="success.main"
-              />
-              <p>Success</p>
-            </>
+            <p>N/A</p>
           )}
         </Flex>
-        <DotSeparator />
-        {txData.timestamp ? (
-          <>
-            <p>{dateFromNow(txData.timestamp)}</p>
-            <DotSeparator />
-            <p>{formatUTC(txData.timestamp)}</p>
-          </>
-        ) : (
-          <p>N/A</p>
-        )}
       </Flex>
     </Flex>
   );
diff --git a/src/lib/pages/tx-details/index.tsx b/src/lib/pages/tx-details/index.tsx
index 9d94697db..29e886633 100644
--- a/src/lib/pages/tx-details/index.tsx
+++ b/src/lib/pages/tx-details/index.tsx
@@ -2,14 +2,14 @@ import { Flex } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { BackButton } from "lib/components/button";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state/EmptyState";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
 import { useAssetInfos } from "lib/services/assetService";
 import { useTxData } from "lib/services/txService";
-import { getFirstQueryParam } from "lib/utils";
+import { getFirstQueryParam, truncate } from "lib/utils";
 
 import { TxHeader, TxInfo } from "./components";
 import { MessageSection } from "./components/MessageSection";
@@ -44,10 +44,15 @@ const TxDetails = () => {
 
   return (
     <PageContainer>
-      <BackButton />
+      <Breadcrumb
+        items={[
+          { text: "Transactions", href: "/txs" },
+          { text: truncate(txData?.txhash) },
+        ]}
+      />
       {txData ? (
         <>
-          <TxHeader mt={2} txData={txData} />
+          <TxHeader mt={6} txData={txData} />
           <Flex my={12} justify="space-between">
             <TxInfo txData={txData} assetInfos={assetInfos} />
             <MessageSection txData={txData} assetInfos={assetInfos} />