diff --git a/src/app/incidents/[id]/page.tsx b/src/app/incidents/[id]/page.tsx
index 1fca901..6e5dd96 100644
--- a/src/app/incidents/[id]/page.tsx
+++ b/src/app/incidents/[id]/page.tsx
@@ -152,7 +152,7 @@ export default async function IncidentDetailPage({
               <button
                 type="submit"
                 className="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-semibold text-white rounded cursor-pointer transition-colors"
-                style={{ backgroundColor: "#5A8A5A" }}
+                style={{ backgroundColor: "#2DA44E" }}
               >
                 <svg
                   viewBox="0 0 24 24"
@@ -206,14 +206,14 @@ export default async function IncidentDetailPage({
                     className="w-2.5 h-2.5 rounded-full shrink-0"
                     style={{
                       backgroundColor:
-                        check.status === "failure" ? "#C4453C" : "#5A8A5A",
+                        check.status === "failure" ? "#C4453C" : "#2DA44E",
                     }}
                   />
                   <span
                     className="text-sm font-medium min-w-[80px]"
                     style={{
                       color:
-                        check.status === "failure" ? "#C4453C" : "#5A8A5A",
+                        check.status === "failure" ? "#C4453C" : "#2DA44E",
                     }}
                   >
                     {check.status === "failure" ? "Failing" : "Passing"}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7a6ab38..165385b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -132,7 +132,7 @@ export default async function StatusPage() {
             No sites are being monitored yet.
           </p>
         ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          <div className="flex flex-col gap-3">
             {sites.map((site) => (
               <div
                 key={site.id}
@@ -141,50 +141,49 @@ export default async function StatusPage() {
                   backgroundColor: "#FFFFFF",
                   border: "1px solid #E8E4DF",
                   borderRadius: "4px",
-                  padding: "16px 18px",
+                  padding: "14px 18px",
                 }}
               >
                 <Link
                   href={`/sites/${site.id}`}
-                  className="block no-underline"
-                  style={{ color: "inherit" }}
-                >
-                  <div className="flex items-center justify-between gap-2">
-                    <div className="flex items-center gap-2.5 min-w-0">
-                      <span
-                        className="w-2 h-2 rounded-full shrink-0"
-                        style={{
-                          backgroundColor:
-                            site.lastCheck?.status === "failure"
-                              ? "#C4453C"
-                              : "#5A8A5A",
-                        }}
-                      />
-                      <span
-                        className="text-sm font-bold truncate"
-                        style={{ color: "#1A1A1A" }}
-                      >
-                        {site.name}
-                      </span>
-                    </div>
+                  className="absolute inset-0 z-0"
+                  aria-label={site.name}
+                />
+                <div className="flex items-center gap-3 flex-wrap">
+                  <div className="flex items-center gap-2.5 min-w-0">
+                    <span
+                      className="w-2 h-2 rounded-full shrink-0"
+                      style={{
+                        backgroundColor:
+                          site.lastCheck?.status === "failure"
+                            ? "#C4453C"
+                            : "#2DA44E",
+                      }}
+                    />
+                    <span
+                      className="text-sm font-bold"
+                      style={{ color: "#1A1A1A" }}
+                    >
+                      {site.name}
+                    </span>
                   </div>
-                  <div
-                    className="mt-1.5 text-xs truncate"
+                  <span
+                    className="text-xs"
                     style={{ color: "#5C5C5C" }}
                   >
                     {site.url}
-                  </div>
-                  <div
-                    className="mt-2 text-[11px]"
+                  </span>
+                  <span
+                    className="ml-auto text-[11px] shrink-0"
                     style={{ color: "#8A8A8A", letterSpacing: "0.01em" }}
                   >
                     {site.lastCheck
                       ? `Checked ${formatTimeAgo(site.lastCheck.checked_at)}`
                       : "No checks yet"}
-                  </div>
-                </Link>
+                  </span>
+                </div>
                 {isAdmin && (
-                  <div className="absolute top-3 right-3 z-10">
+                  <div className="absolute top-1/2 -translate-y-1/2 right-3 z-10">
                     <SiteFormDialog
                       mode="edit"
                       siteId={site.id}
diff --git a/src/app/sites/[id]/page.tsx b/src/app/sites/[id]/page.tsx
index 833f938..2b7bef6 100644
--- a/src/app/sites/[id]/page.tsx
+++ b/src/app/sites/[id]/page.tsx
@@ -83,9 +83,9 @@ export default async function SiteDetailPage({
           <div className="inline-flex items-center gap-2 text-sm font-semibold">
             <span
               className="w-2.5 h-2.5 rounded-full"
-              style={{ backgroundColor: isDown ? "#C4453C" : "#5A8A5A" }}
+              style={{ backgroundColor: isDown ? "#C4453C" : "#2DA44E" }}
             />
-            <span style={{ color: isDown ? "#C4453C" : "#5A8A5A" }}>
+            <span style={{ color: isDown ? "#C4453C" : "#2DA44E" }}>
               {isDown ? "Down" : "Up"}
             </span>
           </div>
@@ -254,12 +254,12 @@ export default async function SiteDetailPage({
                           <span
                             className="w-1.5 h-1.5 rounded-full"
                             style={{
-                              backgroundColor: isFailure ? "#C4453C" : "#5A8A5A",
+                              backgroundColor: isFailure ? "#C4453C" : "#2DA44E",
                             }}
                           />
                           <span
                             className="text-sm font-medium"
-                            style={{ color: isFailure ? "#C4453C" : "#5A8A5A" }}
+                            style={{ color: isFailure ? "#C4453C" : "#2DA44E" }}
                           >
                             {isFailure
                               ? check.error ?? "Failure"
diff --git a/src/components/AddSiteCard.tsx b/src/components/AddSiteCard.tsx
index 4b9c029..8ccd0fe 100644
--- a/src/components/AddSiteCard.tsx
+++ b/src/components/AddSiteCard.tsx
@@ -6,19 +6,18 @@ export default function AddSiteCard() {
       mode="add"
       trigger={
         <button
-          className="flex items-center justify-center flex-col gap-1.5 rounded cursor-pointer w-full"
+          className="flex items-center gap-2 rounded cursor-pointer w-full"
           style={{
             background: "transparent",
             border: "1.5px dashed #D4CFC9",
-            padding: "24px 18px",
+            padding: "12px 18px",
             color: "#8A8A8A",
-            minHeight: "108px",
             transition: "border-color 0.15s, color 0.15s",
           }}
         >
           <svg
-            width="20"
-            height="20"
+            width="16"
+            height="16"
             viewBox="0 0 16 16"
             fill="none"
             stroke="currentColor"