diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index 8f2e1d6c3..10fbbf4af 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -260,12 +260,12 @@ export const SecretOverviewPage = () => {
           />
         </div>
       </div>
-      <div className="thin-scrollbar mt-6" ref={parentTableRef}>
+      <div className="thin-scrollbar mt-4 max-h-[calc(100vh-250px)] overflow-y-auto" ref={parentTableRef}>
         <TableContainer>
           <Table>
-            <THead>
+            <THead className="sticky top-0">
               <Tr>
-                <Th className="sticky left-0 z-10 min-w-[20rem] bg-clip-padding">Secret</Th>
+                <Th className="sticky left-0 z-10 min-w-[20rem] bg-clip-padding">Name</Th>
                 {userAvailableEnvs?.map(({ name, slug }, index) => {
                   const envSecKeyCount = getEnvSecretKeyCount(slug);
                   const missingKeyCount = secKeys.length - envSecKeyCount;
@@ -281,7 +281,7 @@ export const SecretOverviewPage = () => {
                             className="max-w-none lowercase"
                             content={`${missingKeyCount} secrets missing\n compared to other environments`}
                           >
-                            <div className="ml-2 flex h-5 cursor-default items-center justify-center rounded-sm bg-red-700 p-1 text-xs text-bunker-100">
+                            <div className="ml-2 h-[1.1rem] font-medium flex cursor-default items-center justify-center rounded-sm bg-red-600 border border-red-400 p-1 text-xs text-bunker-100">
                               <span className="text-bunker-100">{missingKeyCount}</span>
                             </div>
                           </Tooltip>
@@ -323,13 +323,14 @@ export const SecretOverviewPage = () => {
                 />
               ))}
               <Tr>
-                <Td className="sticky left-0 z-10 border-x  border-mineshaft-700 bg-mineshaft-800 bg-clip-padding" />
+                <Td className="fixed left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding" />
                 {userAvailableEnvs.map(({ name, slug }) => (
                   <Td key={`explore-${name}-btn`} className=" border-x border-mineshaft-700">
                     <div className="flex items-center justify-center">
                       <Button
                         size="xs"
                         variant="outline_bg"
+                        isFullWidth
                         onClick={() => handleExploreEnvClick(slug)}
                       >
                         Explore
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx
index 7f03ee41c..9523d5250 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx
@@ -19,9 +19,9 @@ export const SecretOverviewFolderRow = ({
 }: Props) => {
   return (
     <Tr isHoverable isSelectable className="group" onClick={() => onClick(folderName)}>
-      <Td className="sticky left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding py-3 group-hover:bg-mineshaft-600">
-        <div className="flex items-center space-x-4">
-          <div className="text-primary">
+      <Td className="sticky left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding py-2.5 group-hover:bg-mineshaft-700">
+        <div className="flex items-center space-x-5">
+          <div className="text-yellow-700">
             <FontAwesomeIcon icon={faFolder} />
           </div>
           <div>{folderName}</div>
@@ -33,8 +33,8 @@ export const SecretOverviewFolderRow = ({
           <Td
             key={`sec-overview-${slug}-${i + 1}-folder`}
             className={twMerge(
-              "border-x border-mineshaft-700 py-3",
-              isPresent ? "text-green-600" : "text-red-800"
+              "border-x border-mineshaft-700 py-3 group-hover:bg-mineshaft-700",
+              isPresent ? "text-green-600" : "text-red-600"
             )}
           >
             <div className="flex justify-center">
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
index 55f65ecca..859eda957 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
@@ -85,8 +85,8 @@ export const SecretEditRow = ({
   };
 
   return (
-    <div className="group flex w-full cursor-text items-start space-x-2">
-      <div className="flex-grow border-r border-r-mineshaft-600 pr-2">
+    <div className="group flex w-full cursor-text items-start space-x-2 items-center">
+      <div className="flex-grow border-r border-r-mineshaft-600 pr-2 pl-1">
         <Controller
           control={control}
           name="value"
diff --git a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
index dc193129d..715bba221 100644
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
@@ -1,4 +1,5 @@
-import { faCheck, faEye, faEyeSlash, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faCircle } from "@fortawesome/free-regular-svg-icons";
+import { faCheck, faEye, faEyeSlash, faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
@@ -34,22 +35,31 @@ export const SecretOverviewTableRow = ({
   return (
     <>
       <Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
-        <Td className="sticky left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding py-3 group-hover:bg-mineshaft-600">
-          {secretKey}
+        <Td className="sticky left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding py-2.5 group-hover:bg-mineshaft-700">
+          <div className="flex items-center space-x-5">
+            <div className="text-blue-300/70">
+              <FontAwesomeIcon icon={faKey} />
+            </div>
+            <div>{secretKey}</div>
+          </div>
         </Td>
         {environments.map(({ slug }, i) => {
           const secret = getSecretByKey(slug, secretKey);
           const isSecretPresent = Boolean(secret);
+          const isSecretEmpty = secret?.value === "";
           return (
             <Td
               key={`sec-overview-${slug}-${i + 1}-value`}
               className={twMerge(
-                "border-x border-mineshaft-700 py-3",
-                isSecretPresent ? "text-green-600" : "text-red-800"
+                "border-x border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
+                isSecretPresent && !isSecretEmpty ? "text-green-600" : "",
+                isSecretPresent && isSecretEmpty ? "text-yellow" : "",
+                !isSecretPresent && !isSecretEmpty ? "text-red-600" : ""
               )}
             >
               <div className="flex justify-center">
-                <FontAwesomeIcon icon={isSecretPresent ? faCheck : faXmark} />
+                {!isSecretEmpty && <FontAwesomeIcon icon={!isSecretPresent ? faCheck : faXmark} />}
+                {isSecretEmpty && <FontAwesomeIcon icon={faCircle} />}
               </div>
             </Td>
           );
@@ -59,7 +69,7 @@ export const SecretOverviewTableRow = ({
         <Tr>
           <Td colSpan={totalCols}>
             <div
-              className="rounded-md bg-bunker-700 p-4 pb-6"
+              className="rounded-md bg-bunker-700 p-2"
               style={{
                 width: `calc(${expandableColWidth}px - 2rem)`,
                 position: "sticky",
@@ -67,33 +77,30 @@ export const SecretOverviewTableRow = ({
                 right: "1.25rem"
               }}
             >
-              <div className="mb-4 flex items-center justify-between">
-                <div className="text-lg font-medium">Secrets</div>
-                <div>
-                  <Button
-                    variant="outline_bg"
-                    className="p-1"
-                    leftIcon={<FontAwesomeIcon icon={isSecretVisible ? faEyeSlash : faEye} />}
-                    onClick={() => setIsSecretVisible.toggle()}
-                  >
-                    {isSecretVisible ? "Hide" : "Reveal"}
-                  </Button>
-                </div>
-              </div>
               <TableContainer>
                 <table className="secret-table">
                   <thead>
-                    <tr>
+                    <tr className="h-10 border-b-2 border-mineshaft-600">
                       <th
                         style={{ padding: "0.5rem 1rem" }}
                         className="min-table-row min-w-[11rem]"
                       >
                         Environment
                       </th>
-                      <th style={{ padding: "0.5rem 1rem" }}>Value</th>
+                      <th style={{ padding: "0.5rem 1rem" }} className="border-none">Value</th>
+                      <div className="absolute top-0 right-0 w-min ml-auto mt-1 mr-1">
+                        <Button
+                          variant="outline_bg"
+                          className="p-1"
+                          leftIcon={<FontAwesomeIcon icon={isSecretVisible ? faEyeSlash : faEye} />}
+                          onClick={() => setIsSecretVisible.toggle()}
+                        >
+                          {isSecretVisible ? "Hide Values" : "Reveal Values"}
+                        </Button>
+                      </div>
                     </tr>
                   </thead>
-                  <tbody>
+                  <tbody className="border-t-2 border-mineshaft-600">
                     {environments.map(({ name, slug }) => {
                       const secret = getSecretByKey(slug, secretKey);
                       const isCreatable = !secret;
@@ -104,12 +111,9 @@ export const SecretOverviewTableRow = ({
                           className="hover:bg-mineshaft-700"
                         >
                           <td className="flex" style={{ padding: "0.25rem 1rem" }}>
-                            <div className="flex h-10 items-center">{name}</div>
+                            <div className="flex h-8 items-center">{name}</div>
                           </td>
-                          <td
-                            className="h-10 border-l border-mineshaft-600"
-                            style={{ padding: "0.5rem 1rem" }}
-                          >
+                          <td className="h-8 col-span-2 w-full">
                             <SecretEditRow
                               isVisible={isSecretVisible}
                               secretName={secretKey}