diff --git a/src/components/AccordionBox/index.js b/src/components/AccordionBox/index.js
index 12e4724ef..09174f45c 100644
--- a/src/components/AccordionBox/index.js
+++ b/src/components/AccordionBox/index.js
@@ -18,18 +18,20 @@ export function AccordionBox({ content, hiddenContent, ...rest }) {
       >
         {hiddenContent}
       </div>
-      <div className="flex justify-center mt-1">
-        <button
-          type="button"
-          onClick={() => setShow(!show)}
-          className="flex items-center bg-white py-1 px-2 border border-gray-300 rounded-full shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-        >
-          <span className="mx-1">{show ? "Show less" : "Show more"}</span>
-          <ChevronDownIcon
-            className={`h-5 w-5 transform ${show && "rotate-180"}`}
-          />
-        </button>
-      </div>
+      {hiddenContent && (
+        <div className="flex justify-center mt-1">
+          <button
+            type="button"
+            onClick={() => setShow(!show)}
+            className="flex items-center bg-white py-1 px-2 border border-gray-300 rounded-full shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          >
+            <span className="mx-1">{show ? "Show less" : "Show more"}</span>
+            <ChevronDownIcon
+              className={`h-5 w-5 transform ${show && "rotate-180"}`}
+            />
+          </button>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/Canary/CanaryPopup/index.js b/src/components/Canary/CanaryPopup/index.js
index 07aa0e1b6..29fb939f5 100644
--- a/src/components/Canary/CanaryPopup/index.js
+++ b/src/components/Canary/CanaryPopup/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { format } from "timeago.js";
 import { usePrevious } from "../../../utils/hooks";
 import { Badge } from "../../Badge";
@@ -12,6 +12,7 @@ import {
   capitalizeFirstLetter,
   toFixedIfNecessary
 } from "../../../utils/common";
+import styles from "../index.module.css";
 
 export function CheckTitle({ check, className, ...rest }) {
   const prevCheck = usePrevious(check);
@@ -86,10 +87,7 @@ export function CheckDetails({ check, ...rest }) {
           })}
       </>
     ),
-    Owner: validCheck?.owner || "-"
-  };
-
-  const hiddenDetails = {
+    Owner: validCheck?.owner || "-",
     Interval: validCheck?.interval || "-",
     Location: validCheck?.location || "-",
     Schedule: validCheck?.schedule || "-"
@@ -133,52 +131,51 @@ export function CheckDetails({ check, ...rest }) {
         />
       </div>
       {/* chart section */}
-      <div className="mb-10">
+      <div className="mb-8">
         <div className="flex justify-between items-center mb-2">
           <span className="text-lg font-medium">Health overview</span>
           <span className="text-sm font-medium">(time dropdown)</span>
         </div>
         <div className="bg-gray-100 w-full h-52" />
       </div>
-      {/* check details section */}
-      <div className="mb-10">
-        <div className="flex mb-2">
-          <span className="text-lg font-medium">Check details</span>
-        </div>
-        <AccordionBox
-          content={
-            <div className="flex flex-row flex-wrap">
-              {Object.entries(details).map(([label, value]) => (
-                <DetailField
-                  key={label}
-                  className="w-1/2 mb-3"
-                  label={label}
-                  value={value}
-                />
-              ))}
-            </div>
-          }
-          hiddenContent={
-            <div className="flex flex-row flex-wrap">
-              {Object.entries(hiddenDetails).map(([label, value]) => (
-                <DetailField
-                  key={label}
-                  className="w-1/2 mb-3"
-                  label={label}
-                  value={value}
+      <PopupTabs
+        contentStyle={{ minHeight: "270px" }}
+        tabs={{
+          statusHistory: {
+            label: "Status history",
+            content: (
+              <div
+                key="status-history"
+                className={`border overflow-hidden overflow-y-auto relative ${styles.appleScrollbar}`}
+                style={{ maxHeight: "270px" }}
+              >
+                <StatusHistory check={validCheck} sticky />
+              </div>
+            )
+          },
+          checkDetails: {
+            label: "Check details",
+            content: (
+              <div key="check-details" className="mb-6">
+                <AccordionBox
+                  content={
+                    <div className="flex flex-row flex-wrap">
+                      {Object.entries(details).map(([label, value]) => (
+                        <DetailField
+                          key={label}
+                          className="w-1/2 mb-3"
+                          label={label}
+                          value={value}
+                        />
+                      ))}
+                    </div>
+                  }
                 />
-              ))}
-            </div>
+              </div>
+            )
           }
-        />
-      </div>
-      {/* status history section */}
-      <div className="mb-10">
-        <div className="flex mb-2">
-          <span className="text-lg font-medium">Status history</span>
-        </div>
-        <StatusHistory check={validCheck} />
-      </div>
+        }}
+      />
     </div>
   );
 }
@@ -219,7 +216,7 @@ function DetailField({ label, value, className, ...rest }) {
   );
 }
 
-function StatusHistory({ check }) {
+function StatusHistory({ check, sticky = "false" }) {
   const statii = check
     ? check.checkStatuses != null
       ? check.checkStatuses
@@ -252,7 +249,37 @@ function StatusHistory({ check }) {
         id={`${check.key}-table`}
         data={data}
         columns={["Age", "Duration", "Message"]}
+        sticky={sticky}
       />
     )
   );
 }
+
+export function PopupTabs({ tabs, contentStyle, ...rest }) {
+  const [selected, setSelected] = useState(Object.keys(tabs)[0]);
+  return (
+    <div {...rest}>
+      <div className="flex space-x-4 mb-4" aria-label="Tabs">
+        {Object.entries(tabs).map(([key, tab]) => (
+          <button
+            type="button"
+            key={key}
+            onClick={() => setSelected(key)}
+            className={`px-3 py-2 font-medium text-sm rounded-md ${
+              selected === key
+                ? "bg-indigo-100 text-indigo-700"
+                : "text-gray-500 hover:text-gray-700"
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div style={contentStyle}>
+        {Object.entries(tabs).map(
+          ([key, tab]) => selected === key && <div key={key}>{tab.content}</div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Canary/index.js b/src/components/Canary/index.js
index baeddce76..51f82a30a 100644
--- a/src/components/Canary/index.js
+++ b/src/components/Canary/index.js
@@ -28,6 +28,8 @@ import { getLocalItem, setLocalItem } from "../../utils/storage";
 import { Modal } from "../Modal";
 import { CheckDetails, CheckTitle } from "./CanaryPopup";
 
+import styles from "./index.module.css";
+
 export class Canary extends React.Component {
   constructor(props) {
     super(props);
@@ -382,13 +384,23 @@ export class Canary extends React.Component {
           </Sidebar>
         </div>
         <Modal
-          closeButtonPadding={8}
-          onClose={this.handleModalClose}
           open={selected != null}
-          title={<CheckTitle check={selected} className="mb-6" />}
-          body={<CheckDetails check={selected} />}
-          cardClass="px-8 py-6 my-12"
-          cardStyle={{ width: "100%", maxWidth: "730px" }}
+          onClose={this.handleModalClose}
+          title={<CheckTitle check={selected} className="pb-2" />}
+          body={
+            <CheckDetails
+              check={selected}
+              className={`flex-grow overflow-y-auto overflow-x-hidden pt-2 -mr-4 pr-3.5 ${styles.appleScrollbar}`}
+            />
+          }
+          containerClass="py-4 h-full"
+          cardClass="w-full h-full flex flex-col"
+          cardStyle={{
+            maxWidth: "820px",
+            maxHeight: "900px"
+          }}
+          contentClass="flex flex-col h-full p-8"
+          closeButtonPadding={8}
         />
       </div>
     );
diff --git a/src/components/Canary/index.module.css b/src/components/Canary/index.module.css
index 56caeadab..324ed9ba5 100644
--- a/src/components/Canary/index.module.css
+++ b/src/components/Canary/index.module.css
@@ -8,3 +8,27 @@
   background: linear-gradient(90deg, transparent calc(100% - 26px), white);
   pointer-events: none;
 }
+
+/* width */
+.appleScrollbar::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+}
+
+/* Track */
+.appleScrollbar::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+/* Handle */
+.appleScrollbar::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background: rgb(160, 160, 160);
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+/* Handle on hover */
+.appleScrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+}
diff --git a/src/components/Canary/table.js b/src/components/Canary/table.js
index 3a57137d7..da3b825b2 100644
--- a/src/components/Canary/table.js
+++ b/src/components/Canary/table.js
@@ -12,7 +12,7 @@ import { useCheckSetEqualityForPreviousVsCurrent } from "../Hooks/useCheckSetEqu
 const styles = {
   outerDivClass: "border-l border-r border-gray-300",
   topBgClass: "bg-red-500",
-  tableClass: "min-w-full  border-separate",
+  tableClass: "min-w-full border-separate",
   theadClass: "bg-white z-10",
   theadRowClass: "z-10",
   theadHeaderClass:
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
index a007363e2..7b7b35873 100644
--- a/src/components/Modal/index.js
+++ b/src/components/Modal/index.js
@@ -10,6 +10,7 @@ export function Modal({
   onClose,
   closeButtonPadding,
   containerClass,
+  contentClass,
   cardClass = "p-4",
   cancelText = "Close",
   hideActions,
@@ -21,12 +22,14 @@ export function Modal({
       <Dialog
         as="div"
         auto-reopen="true"
-        className="fixed z-50 inset-0 overflow-y-auto"
+        className="fixed z-50 inset-0"
         onClose={onClose}
         {...rest}
       >
         <div
-          className={`flex items-center justify-center min-h-screen ${containerClass}`}
+          className={`flex items-center justify-center min-h-screen ${
+            containerClass || ""
+          }`}
         >
           <Transition.Child
             as={Fragment}
@@ -51,8 +54,11 @@ export function Modal({
           >
             <div
               style={cardStyle}
-              className={`bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all ${cardClass}`}
+              className={`bg-white rounded-lg text-left shadow-xl transform transition-all overflow-hidden ${
+                cardClass || ""
+              }`}
             >
+              {/* top-right close button */}
               <div
                 className={`opacity-0 pointer-events-none sm:pointer-events-auto sm:opacity-100 absolute top-0 right-0 pt-${closeButtonPadding} pr-${closeButtonPadding}`}
               >
@@ -65,21 +71,21 @@ export function Modal({
                   <XIcon className="h-6 w-6" aria-hidden="true" />
                 </button>
               </div>
-              <div className="">
+              <div className={contentClass}>
                 {title && title}
                 {body}
+                {!hideActions && (
+                  <div className="flex justify-end mt-2">
+                    <button
+                      type="button"
+                      className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
+                      onClick={onClose}
+                    >
+                      {cancelText}
+                    </button>
+                  </div>
+                )}
               </div>
-              {!hideActions && (
-                <div className="flex justify-end">
-                  <button
-                    type="button"
-                    className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm"
-                    onClick={onClose}
-                  >
-                    {cancelText}
-                  </button>
-                </div>
-              )}
             </div>
           </Transition.Child>
         </div>
diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index ef557bc1a..7dae6d525 100644
--- a/src/components/Table/index.js
+++ b/src/components/Table/index.js
@@ -1,4 +1,4 @@
-export function Table({ columns, data, id }) {
+export function Table({ columns, data, id, sticky = "false" }) {
   columns = columns.map((c) => {
     if (typeof c === "string") {
       return { name: c };
@@ -7,40 +7,39 @@ export function Table({ columns, data, id }) {
   });
   return (
     <div className="flex flex-col">
-      <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-        <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-          <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
-            <table className="min-w-full divide-y divide-gray-200">
-              <thead className="bg-gray-50">
-                <tr>
-                  {columns.map((column) => (
-                    <th
-                      key={column.name}
-                      scope="col"
-                      className={`px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${column.className}`}
-                    >
-                      {column.name}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody className="bg-white divide-y divide-gray-200">
-                {data.map((row, idx) => (
-                  // eslint-disable-next-line react/no-array-index-key
-                  <tr key={`${id}.${idx}`}>
-                    {columns.map((column) => (
-                      <td key={column.name} className="px-4 py-2">
-                        <div className="text-xs text-gray-900">
-                          {row[column.name.toLowerCase()]}
-                        </div>
-                      </td>
-                    ))}
-                  </tr>
+      <div className="align-middle inline-block min-w-full">
+        <table
+          className="min-w-full divide-y divide-gray-200 border-separate"
+          style={{ borderSpacing: "0px" }}
+        >
+          <thead className={sticky ? "sticky top-0 bg-white" : ""}>
+            <tr>
+              {columns.map((column) => (
+                <th
+                  key={column.name}
+                  scope="col"
+                  className={`px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b ${column.className}`}
+                >
+                  {column.name}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="bg-white divide-y divide-gray-200" style={{}}>
+            {data.map((row, idx) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <tr key={`${id}.${idx}`}>
+                {columns.map((column) => (
+                  <td key={column.name} className="px-4 py-3 border-b">
+                    <div className="text-sm text-gray-900">
+                      {row[column.name.toLowerCase()]}
+                    </div>
+                  </td>
                 ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </div>
     </div>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
index 6e7d8e40d..3805187a0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 // eslint-disable-next-line global-require
 const colors = require("tailwindcss/colors");
+const { borderWidth } = require("tailwindcss/defaultTheme");
 
 module.exports = {
   purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
@@ -53,7 +54,8 @@ module.exports = {
   variants: {
     extend: {
       backgroundColor: ["disabled"],
-      textColor: ["disabled"]
+      textColor: ["disabled"],
+      borderWidth: ["last"]
     }
   }, // eslint-disable-next-line global-require
   plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")]