diff --git a/services/explorer-ui/src/components/option-buttons/index.tsx b/services/explorer-ui/src/components/option-buttons/index.tsx
new file mode 100644
index 000000000..a802f47b4
--- /dev/null
+++ b/services/explorer-ui/src/components/option-buttons/index.tsx
@@ -0,0 +1,98 @@
+import { CustomTooltip } from "~/components/custom-tooltip";
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+} from "~/components/ui";
+
+export type OptionItem = {
+  id: string;
+  label: string;
+};
+
+export type OptionItems = OptionItem[];
+
+type ExtractOptionId<T extends OptionItems> = T[number]["id"];
+
+type OptionButtonProps<T extends OptionItems> = {
+  options: T;
+  availableOptions: Record<string, boolean>; // TODO: this should work: Record<ExtractOptionId<T>, boolean>
+  onOptionSelect: (option: ExtractOptionId<T>) => void;
+  selectedItem: ExtractOptionId<T>;
+};
+
+const withAvailableTooltip = (
+  isAvailable: boolean,
+  key: number,
+  children: React.ReactNode
+) => {
+  // TODO: refactor to use CustomTooltip component instead?
+  if (!isAvailable) {
+    return (
+      <CustomTooltip key={key} content="Not available">
+        {children}
+      </CustomTooltip>
+    );
+  }
+
+  return <div key={key}>{children}</div>;
+};
+
+export const OptionButtons = <T extends OptionItems>({
+  options,
+  availableOptions,
+  onOptionSelect,
+  selectedItem,
+}: OptionButtonProps<T>) => {
+  return (
+    <>
+      <div className="hidden lg:flex flex-row gap-4 mb-4 justify-center">
+        {options.map((option, key) => {
+          const isAvailable = availableOptions[option.id];
+          return withAvailableTooltip(
+            isAvailable,
+            key,
+            <div className="flex flex-col justify-center items-center gap-1">
+              <Button
+                key={key}
+                onClick={() => onOptionSelect(option.id)}
+                disabled={!isAvailable}
+                variant="default"
+                className="hover:bg-slate-500 border border-input"
+              >
+                {option.label}
+              </Button>
+              {selectedItem === option.id && (
+                <Separator className="h-0.5 bg-gray-700 w-1/2" />
+              )}
+            </div>
+          );
+        })}
+      </div>
+      <div className="mb-1 mt-4 lg:hidden">
+        <Select onValueChange={onOptionSelect} value={selectedItem}>
+          <SelectTrigger className="h-8 w-3/5 bg-primary text-white">
+            <SelectValue placeholder={selectedItem} />
+          </SelectTrigger>
+          <SelectContent>
+            {
+              options.map((option, key) => (
+                <SelectItem
+                  key={key}
+                  disabled={!availableOptions[option.id]}
+                  value={option.id}
+                >
+                  {option.label}
+                </SelectItem>
+              ))
+            }
+          </SelectContent>
+        </Select>
+      </div>
+    </>
+  );
+};
diff --git a/services/explorer-ui/src/pages/block-details/constants.ts b/services/explorer-ui/src/pages/block-details/constants.ts
new file mode 100644
index 000000000..9a439fa51
--- /dev/null
+++ b/services/explorer-ui/src/pages/block-details/constants.ts
@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+export type tabId = "txEffects" | "contracts";
+
+export const tabIds = ["txEffects", "contracts"] as const;
+
+export const tabIdSchema = z.enum(tabIds);
+export type TabId = z.infer<typeof tabIdSchema>;
+
+export const tabSchema = z.object({
+  id: tabIdSchema,
+  label: z.string(),
+});
+export type Tab = z.infer<typeof tabSchema>;
+
+export const blockDetailsTabs: Tab[] = [
+  { id: "txEffects", label: "Transaction effects" },
+  { id: "contracts", label: "Contracts" },
+];
diff --git a/services/explorer-ui/src/pages/block-details/index.tsx b/services/explorer-ui/src/pages/block-details/index.tsx
index b23459959..ed5d8aa73 100644
--- a/services/explorer-ui/src/pages/block-details/index.tsx
+++ b/services/explorer-ui/src/pages/block-details/index.tsx
@@ -1,13 +1,14 @@
 import { useParams } from "@tanstack/react-router";
-import { type FC } from "react";
+import { useState, type FC } from "react";
 import { KeyValueDisplay } from "~/components/info-display/key-value-display";
+import { OptionButtons } from "~/components/option-buttons";
 import { TxEffectsTable } from "~/components/tx-effects/tx-effects-table";
-import { Button } from "~/components/ui";
 import {
   useGetBlockByIdentifier,
   useGetTxEffectsByBlockHeight,
   useSubTitle,
 } from "~/hooks";
+import { blockDetailsTabs, type TabId } from "./constants";
 import { getBlockDetails, getTxEffects } from "./util";
 
 export const BlockDetails: FC = () => {
@@ -15,6 +16,10 @@ export const BlockDetails: FC = () => {
     from: "/blocks/$blockNumber",
   });
   useSubTitle(`Block ${blockNumber}`);
+  const [selectedTab, setSelectedTab] = useState<TabId>("txEffects");
+  const onOptionSelect = (value: string) => {
+    setSelectedTab(value as TabId);
+  };
   const {
     data: latestBlock,
     isLoading,
@@ -28,7 +33,6 @@ export const BlockDetails: FC = () => {
     error: txEffectsError,
   } = useGetTxEffectsByBlockHeight(height);
 
-  //TODO: Check for better solution
   if (!latestBlock) return <div> No block hash</div>;
 
   return (
@@ -37,19 +41,22 @@ export const BlockDetails: FC = () => {
         <div>
           <h2>Block Details </h2>
         </div>
-        <div className="flex flex-col gap-4 mt-8">
+        <div className="flex flex-col gap-4 mt-8 pb-4">
           <div className="bg-white rounded-lg shadow-md p-4">
             <KeyValueDisplay data={getBlockDetails(latestBlock)} />
           </div>
-          <div className="flex flex-row gap-4 w-10 mb-4">
-            <Button
-              variant={"default"}
-              className={"shadow-[0px_0px_1px_2px_rgba(0,0,0,1)]"}
-            >
-              <p>View TxEffects</p>
-            </Button>
-          </div>
-          <div className="rounded-lg shadow-lg">
+        </div>
+        <OptionButtons
+          options={blockDetailsTabs}
+          availableOptions={{
+            txEffects: !!blockTxEffects,
+            contracts: false, // TODO
+          }}
+          onOptionSelect={onOptionSelect}
+          selectedItem={selectedTab}
+        />
+        <div className="bg-white rounded-lg shadow-md p-4">
+          {selectedTab === "txEffects" && (
             <TxEffectsTable
               txEffects={getTxEffects(blockTxEffects, latestBlock)}
               isLoading={
@@ -59,7 +66,7 @@ export const BlockDetails: FC = () => {
               }
               error={error ?? txEffectsError}
             />
-          </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/services/explorer-ui/src/pages/contract-class-details/index.tsx b/services/explorer-ui/src/pages/contract-class-details/index.tsx
index cb5550502..d05768b17 100644
--- a/services/explorer-ui/src/pages/contract-class-details/index.tsx
+++ b/services/explorer-ui/src/pages/contract-class-details/index.tsx
@@ -3,6 +3,7 @@ import { useState, type FC } from "react";
 import { ContractClassesTable } from "~/components/contracts/classes/table";
 import { ContractInstancesTable } from "~/components/contracts/instances/table";
 import { KeyValueDisplay } from "~/components/info-display/key-value-display";
+import { OptionButtons } from "~/components/option-buttons";
 import {
   useContractClassPrivateFunctions,
   useContractClassUnconstrainedFunctions,
@@ -12,15 +13,14 @@ import {
 } from "~/hooks";
 import { mapContractClasses, mapContractInstances } from "../contract/util";
 import { contractClassTabs, type TabId } from "./constants";
-import { OptionButtons } from "./tabs";
 import { getContractClassKeyValueData } from "./util";
 
 export const ContractClassDetails: FC = () => {
-  const [selectedTab, setSelectedTab] = useState<TabId>("contractVersions");
   const { id, version } = useParams({
     from: "/contracts/classes/$id/versions/$version",
   });
   useSubTitle(`Ctrct cls ${id}`);
+  const [selectedTab, setSelectedTab] = useState<TabId>("contractVersions");
   const onOptionSelect = (value: string) => {
     setSelectedTab(value as TabId);
   };
@@ -48,11 +48,13 @@ export const ContractClassDetails: FC = () => {
     privateFunctions:
       !contractClassPrivateFunctionsHookRes.isLoading &&
       !contractClassPrivateFunctionsHookRes.error &&
-      !!contractClassPrivateFunctionsHookRes.data,
+      !!contractClassPrivateFunctionsHookRes.data &&
+      !!contractClassPrivateFunctionsHookRes.data.length,
     unconstrainedFunctions:
       !contractClassUnconstrainedFunctionsHookRes.isLoading &&
       !contractClassUnconstrainedFunctionsHookRes.error &&
-      !!contractClassUnconstrainedFunctionsHookRes.data,
+      !!contractClassUnconstrainedFunctionsHookRes.data &&
+      !!contractClassUnconstrainedFunctionsHookRes.data.length,
   };
 
   if (!id) return <div>No classId</div>;
@@ -77,8 +79,8 @@ export const ContractClassDetails: FC = () => {
           </div>
         </div>
         <OptionButtons
-          availableData={isOptionAvailable}
-          requiredOptions={contractClassTabs}
+          options={contractClassTabs}
+          availableOptions={isOptionAvailable}
           onOptionSelect={onOptionSelect}
           selectedItem={selectedTab}
         />
diff --git a/services/explorer-ui/src/pages/contract-class-details/tabs.tsx b/services/explorer-ui/src/pages/contract-class-details/tabs.tsx
deleted file mode 100644
index 108a4fe61..000000000
--- a/services/explorer-ui/src/pages/contract-class-details/tabs.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Tab, tabId } from "./constants";
-import {
-  Button,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Separator,
-} from "~/components/ui";
-import { CustomTooltip } from "~/components/custom-tooltip";
-
-export type OptionButtonProps = {
-  availableData: Record<string, boolean>;
-  requiredOptions: Tab[];
-  onOptionSelect: (option: string) => void;
-  selectedItem: tabId;
-};
-
-export const OptionButtons: React.FC<OptionButtonProps> = ({
-  availableData,
-  requiredOptions,
-  onOptionSelect,
-  selectedItem,
-}) => {
-  // Check if an option is available in the record
-  const isOptionAvailable = (option: string) =>
-    option in availableData &&
-    availableData[option] !== undefined &&
-    availableData[option] !== null;
-
-  return (
-    <>
-      <div className="hidden lg:flex flex-row gap-4 w-10 mb-4">
-        {requiredOptions.map((option, key) => {
-          const isAvailable = isOptionAvailable(option.id);
-
-          if (!isAvailable) {
-            return (
-              <CustomTooltip key={key} content="Not available in this txEffect">
-                <Button
-                  type="button"
-                  key={option.id}
-                  disabled={false}
-                  className={`shadow-[0px_0px_1px_2px_rgba(0,0,0,0)] bg-gray-300 cursor-not-allowed opacity-50 text-primary `}
-                >
-                  {option.label}
-                </Button>
-              </CustomTooltip>
-            );
-          }
-          return (
-            <div
-              key={key}
-              className="flex flex-col justify-center items-center gap-1"
-            >
-              <Button
-                key={option.id}
-                onClick={() => onOptionSelect(option.id)}
-                className={`shadow-[0px_0px_1px_2px_rgba(0,0,0,0)] bg-primary hover:bg-primary-500`}
-              >
-                {option.label}
-              </Button>
-              {selectedItem === option.id && (
-                <Separator
-                  orientation="horizontal"
-                  className="h-0.5 bg-primary w-1/2 rounded-md "
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
-      <div className="mb-1 mt-4 lg:hidden">
-        <Select onValueChange={onOptionSelect}>
-          <SelectTrigger className="h-8 w-3/5 bg-primary text-white">
-            <SelectValue placeholder="encryptedLogs" />
-          </SelectTrigger>
-          <SelectContent>
-            {requiredOptions.map((tab, key) => (
-              <SelectItem
-                key={key}
-                disabled={!isOptionAvailable(tab.id)}
-                value={tab.id}
-              >
-                {tab.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-    </>
-  );
-};
diff --git a/services/explorer-ui/src/pages/tx-effect-details/index.tsx b/services/explorer-ui/src/pages/tx-effect-details/index.tsx
index 90a767a0c..b0e9d85de 100644
--- a/services/explorer-ui/src/pages/tx-effect-details/index.tsx
+++ b/services/explorer-ui/src/pages/tx-effect-details/index.tsx
@@ -1,9 +1,9 @@
 import { useParams } from "@tanstack/react-router";
-import { useEffect, useState, type FC } from "react";
+import { useState, type FC } from "react";
 import { KeyValueDisplay } from "~/components/info-display/key-value-display";
+import { OptionButtons } from "~/components/option-buttons";
 import { useGetTxEffectByHash, useSubTitle } from "~/hooks";
 import { txEffectTabs, type TabId } from "./constants";
-import { OptionButtons } from "./tabs";
 import { getTxEffectData, mapTxEffectsData } from "./utils";
 
 const naiveDecode = (data: Buffer): string => {
@@ -27,7 +27,7 @@ const naiveDecode = (data: Buffer): string => {
 };
 
 export const TxEffectDetails: FC = () => {
-  const [selectedTab, setSelectedTab] = useState<TabId>("unencryptedLogs");
+  const [selectedTab, setSelectedTab] = useState<TabId>("nullifiers");
   const { hash } = useParams({
     from: "/tx-effects/$hash",
   });
@@ -35,26 +35,14 @@ export const TxEffectDetails: FC = () => {
   const { data: txEffects, isLoading, error } = useGetTxEffectByHash(hash);
   const txEffectData = mapTxEffectsData(txEffects);
 
-  useEffect(() => {
-    // check for the first avalible tab with data
-    if (txEffects) {
-      const firstAvailableTab = txEffectTabs.find(
-        (tab) => tab.id in txEffectData
-      );
-
-      if (firstAvailableTab) setSelectedTab(firstAvailableTab.id);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [txEffects]);
-
-  const getSelectedItem = (value: string) => {
+  const onSelectChange = (value: string) => {
     setSelectedTab(value as TabId);
   };
 
   if (!hash) <div> No txEffect hash</div>;
   if (isLoading) return <div>Loading...</div>;
   if (error) return <div>Error</div>;
-  if (!txEffects) return <div>No data</div>;
+  if (!txEffects || !selectedTab) return <div>No data</div>;
 
   return (
     <div className="mx-auto px-7 max-w-[1440px] md:px-[70px]">
@@ -67,10 +55,9 @@ export const TxEffectDetails: FC = () => {
             <KeyValueDisplay data={getTxEffectData(txEffects)} />
           </div>
           <OptionButtons
-            key={selectedTab}
-            availableData={txEffectData}
-            requiredOptions={txEffectTabs}
-            onOptionSelect={getSelectedItem}
+            options={txEffectTabs}
+            availableOptions={txEffectData}
+            onOptionSelect={onSelectChange}
             selectedItem={selectedTab}
           />
           <div className="bg-white rounded-lg shadow-md p-4">
diff --git a/services/explorer-ui/src/pages/tx-effect-details/tabs.tsx b/services/explorer-ui/src/pages/tx-effect-details/tabs.tsx
deleted file mode 100644
index 67afb888e..000000000
--- a/services/explorer-ui/src/pages/tx-effect-details/tabs.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { TxEffectDataType } from "./utils";
-import { Tab, tabId } from "./constants";
-import {
-  Button,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Separator,
-} from "~/components/ui";
-import { CustomTooltip } from "~/components/custom-tooltip";
-
-export type OptionButtonProps = {
-  availableData: Record<string, TxEffectDataType | undefined>;
-  requiredOptions: Tab[];
-  onOptionSelect: (option: string) => void;
-  selectedItem: tabId;
-};
-
-export const OptionButtons: React.FC<OptionButtonProps> = ({
-  availableData,
-  requiredOptions,
-  onOptionSelect,
-  selectedItem,
-}) => {
-  // Check if an option is available in the record
-  const isOptionAvailable = (option: string) =>
-    option in availableData &&
-    availableData[option] !== undefined &&
-    availableData[option] !== null;
-
-  return (
-    <>
-      <div className="hidden lg:flex flex-row gap-4 w-10 mb-4">
-        {requiredOptions.map((option, key) => {
-          const isAvailable = isOptionAvailable(option.id);
-
-          if (!isAvailable) {
-            return (
-              <CustomTooltip key={key} content="Not available in this txEffect">
-                <Button
-                  type="button"
-                  key={option.id}
-                  disabled={false}
-                  className={`shadow-[0px_0px_1px_2px_rgba(0,0,0,0)] bg-gray-300 cursor-not-allowed opacity-50 text-primary `}
-                >
-                  {option.label}
-                </Button>
-              </CustomTooltip>
-            );
-          }
-          return (
-            <div
-              key={key}
-              className="flex flex-col justify-center items-center gap-1"
-            >
-              <Button
-                key={option.id}
-                onClick={() => onOptionSelect(option.id)}
-                className={`shadow-[0px_0px_1px_2px_rgba(0,0,0,0)] bg-primary hover:bg-primary-500`}
-              >
-                {option.label}
-              </Button>
-              {selectedItem === option.id && (
-                <Separator
-                  orientation="horizontal"
-                  className="h-0.5 bg-primary w-1/2 rounded-md"
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
-      <div className="mb-1 mt-4 lg:hidden">
-        <Select onValueChange={onOptionSelect}>
-          <SelectTrigger className="h-8 w-3/5 bg-primary text-white">
-            <SelectValue placeholder="encryptedLogs" />
-          </SelectTrigger>
-          <SelectContent>
-            {requiredOptions.map((tab, key) => (
-              <SelectItem
-                key={key}
-                disabled={!isOptionAvailable(tab.id)}
-                value={tab.id}
-              >
-                {tab.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-    </>
-  );
-};
diff --git a/services/explorer-ui/src/pages/tx-effect-details/utils.ts b/services/explorer-ui/src/pages/tx-effect-details/utils.ts
index e51c0b09b..29b330d30 100644
--- a/services/explorer-ui/src/pages/tx-effect-details/utils.ts
+++ b/services/explorer-ui/src/pages/tx-effect-details/utils.ts
@@ -43,26 +43,15 @@ export const getTxEffectData = (data: ChicmozL2TxEffectDeluxe) => [
 
 export const mapTxEffectsData = (
   data?: ChicmozL2TxEffectDeluxe
-): Record<string, TxEffectDataType | undefined> => {
-  if (!data) return {};
-
-  const effectsMap: Record<tabId, TxEffectDataType | undefined> = {
-    privateLogs: data.privateLogs.length ? data.privateLogs : undefined,
-    unencryptedLogs: data.unencryptedLogs?.functionLogs?.filter(
+): Record<tabId, boolean> => {
+  return {
+    privateLogs: !!data?.privateLogs?.length,
+    unencryptedLogs: !!data?.unencryptedLogs?.functionLogs?.filter(
       (log) => log.logs.length > 0
-    ).length
-      ? data.unencryptedLogs.functionLogs
-      : undefined,
-    nullifiers: data.nullifiers?.length ? data.nullifiers : undefined,
-    noteHashes: data.noteHashes?.length ? data.noteHashes : undefined,
-    l2ToL1Msgs: data.l2ToL1Msgs?.length ? data.l2ToL1Msgs : undefined,
-    publicDataWrites: data.publicDataWrites?.length
-      ? data.publicDataWrites
-      : undefined,
+    ).length,
+    nullifiers: !!data?.nullifiers?.length,
+    noteHashes: !!data?.noteHashes?.length,
+    l2ToL1Msgs: !!data?.l2ToL1Msgs?.length,
+    publicDataWrites: !!data?.publicDataWrites?.length,
   };
-
-  // Filter out undefined values
-  return Object.fromEntries(
-    Object.entries(effectsMap).filter(([_, value]) => value !== undefined)
-  );
 };