diff --git a/packages/styles/src/Alert/Alert.ts b/packages/styles/src/Alert/Alert.ts
index 78b9a0d8b..f730ed58b 100644
--- a/packages/styles/src/Alert/Alert.ts
+++ b/packages/styles/src/Alert/Alert.ts
@@ -1,4 +1,42 @@
-type AlertButtonStyle = 'small' | 'outlined' | 'contrast' | 'neutral' | 'info' | 'warning' | 'danger' | 'success'
+type AlertButtonStyle = 'default' | 'contrast' | 'neutral' | 'info' | 'warning' | 'danger' | 'success'
+
+const getColorsForNormalVariant = (style: AlertButtonStyle) => {
+  switch (style) {
+    case 'default':
+      return 'bg-default text-text'
+    case 'contrast':
+      return 'bg-default text-contrast'
+    case 'neutral':
+      return 'bg-default text-neutral'
+    case 'info':
+      return 'bg-default text-info'
+    case 'warning':
+      return 'bg-default text-warning'
+    case 'danger':
+      return 'bg-default text-danger'
+    case 'success':
+      return 'bg-default text-success'
+  }
+}
+
+const getColorsForPrimaryVariant = (style: AlertButtonStyle) => {
+  switch (style) {
+    case 'default':
+      return 'bg-default text-foreground'
+    case 'contrast':
+      return 'bg-contrast text-text'
+    case 'neutral':
+      return 'bg-neutral text-neutral-contrast'
+    case 'info':
+      return 'bg-info text-info-contrast'
+    case 'warning':
+      return 'bg-warning text-warning-contrast'
+    case 'danger':
+      return 'bg-danger text-danger-contrast'
+    case 'success':
+      return 'bg-success text-success-contrast'
+  }
+}
 
 type AlertButton = {
   text: string
@@ -23,7 +61,15 @@ export class SKAlert {
   buttonsString() {
     const genButton = function (buttonDesc: AlertButton, index: number) {
       return `
-        <button id='button-${index}' class='font-bold px-2.5 py-2 text-base lg:text-xs text-info-contrast bg-${buttonDesc.style}'>
+        <button id='button-${index}' class='font-bold px-4 py-1.5 rounded text-base lg:text-sm ${
+        buttonDesc.primary ? 'no-border ' : 'border-solid border-border border '
+      } ${
+        buttonDesc.primary
+          ? 'hover:brightness-125 focus:outline-none focus:brightness-125 '
+          : 'focus:bg-contrast focus:outline-none hover:bg-contrast '
+      } ${
+        buttonDesc.primary ? getColorsForPrimaryVariant(buttonDesc.style) : getColorsForNormalVariant(buttonDesc.style)
+      }'>
           <div class='sk-label'>${buttonDesc.text}</div>
         </button>
       `
@@ -36,7 +82,7 @@ export class SKAlert {
       .join('')
 
     const str = `
-      <div class='sk-button-group'>
+      <div class='flex items-center justify-end gap-2 w-full'>
         ${buttonString}
       </div>
     `
@@ -57,7 +103,7 @@ export class SKAlert {
       buttonsTemplate = ''
       panelStyle = 'style="padding-bottom: 8px"'
     }
-    const titleTemplate = this.title ? `<div class='mb-1 font-bold text-lg lg:text-base'>${this.title}</div>` : ''
+    const titleTemplate = this.title ? `<div class='mb-1 font-bold text-lg'>${this.title}</div>` : ''
     const messageTemplate = this.text ? `<p class='sk-p text-base lg:text-sm'>${this.text}</p>` : ''
 
     const template = `
diff --git a/packages/ui-services/src/Alert/Functions.ts b/packages/ui-services/src/Alert/Functions.ts
index 81c4c2bf7..94a82446f 100644
--- a/packages/ui-services/src/Alert/Functions.ts
+++ b/packages/ui-services/src/Alert/Functions.ts
@@ -22,7 +22,7 @@ export function confirmDialog({
       buttons: [
         {
           text: cancelButtonText,
-          style: 'neutral',
+          style: 'default',
           action() {
             resolve(false)
           },
@@ -30,6 +30,7 @@ export function confirmDialog({
         {
           text: confirmButtonText,
           style: confirmButtonStyle,
+          primary: true,
           action() {
             resolve(true)
           },
@@ -56,7 +57,7 @@ export function alertDialog({
       buttons: [
         {
           text: closeButtonText,
-          style: 'neutral',
+          style: 'default',
           action: resolve,
         },
       ],
diff --git a/packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx b/packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx
index 1e0928343..5aa84876a 100644
--- a/packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx
+++ b/packages/web/src/javascripts/Components/ConfirmDeleteAccountModal/ConfirmDeleteAccountModal.tsx
@@ -25,22 +25,20 @@ const ConfirmDeleteAccountModal = ({ application, viewControllerManager }: Props
           <div className="sk-panel">
             <div className="sk-panel-content">
               <div className="sk-panel-section">
-                <AlertDialogLabel className="sk-h3 sk-panel-section-title">Delete account?</AlertDialogLabel>
+                <AlertDialogLabel className="text-lg font-bold">Delete account?</AlertDialogLabel>
                 <AlertDialogDescription className="sk-panel-row">
                   <div>
-                    <p className="text-foreground">{STRING_DELETE_ACCOUNT_CONFIRMATION}</p>
+                    <p className="text-base text-foreground lg:text-sm">{STRING_DELETE_ACCOUNT_CONFIRMATION}</p>
                   </div>
                 </AlertDialogDescription>
 
-                <div className="my-1 mt-4 flex gap-2">
-                  <Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}>
+                <div className="my-1 mt-4 flex justify-end gap-2">
+                  <Button ref={cancelRef} onClick={closeDialog}>
                     Cancel
                   </Button>
                   <Button
                     primary
-                    small
                     colorStyle="danger"
-                    rounded={false}
                     onClick={() => {
                       application.user.deleteAccount().catch(console.error)
                       closeDialog()
diff --git a/packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx b/packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx
index 9ba529753..ec5dd1e0d 100644
--- a/packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx
+++ b/packages/web/src/javascripts/Components/ConfirmSignoutModal/ConfirmSignoutModal.tsx
@@ -38,14 +38,14 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
           <div className="sk-panel">
             <div className="sk-panel-content">
               <div className="sk-panel-section">
-                <AlertDialogLabel className="sk-h3 sk-panel-section-title">Sign out workspace?</AlertDialogLabel>
+                <AlertDialogLabel className="text-lg font-bold">Sign out workspace?</AlertDialogLabel>
                 <AlertDialogDescription className="sk-panel-row">
                   <div>
-                    <p className="text-foreground">{STRING_SIGN_OUT_CONFIRMATION}</p>
+                    <p className="text-base text-foreground lg:text-sm">{STRING_SIGN_OUT_CONFIRMATION}</p>
                     {showWorkspaceWarning && (
                       <>
                         <br />
-                        <p className="text-foreground">
+                        <p className="text-base text-foreground lg:text-sm">
                           <strong>Note: </strong>
                           Because you have other workspaces signed in, this sign out may leave logs and other metadata
                           of your session on this device. For a more robust sign out that performs a hard clear of all
@@ -83,15 +83,13 @@ const ConfirmSignoutModal: FunctionComponent<Props> = ({ application, viewContro
                   </div>
                 )}
 
-                <div className="my-1 mt-4 flex gap-2">
-                  <Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}>
+                <div className="my-1 mt-4 flex justify-end gap-2">
+                  <Button ref={cancelRef} onClick={closeDialog}>
                     Cancel
                   </Button>
                   <Button
                     primary
-                    small
                     colorStyle="danger"
-                    rounded={false}
                     onClick={() => {
                       if (deleteLocalBackups) {
                         application.signOutAndDeleteLocalBackups().catch(console.error)
diff --git a/packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx b/packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx
index 92a0df490..041a2dbbf 100644
--- a/packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx
+++ b/packages/web/src/javascripts/Components/OtherSessionsSignOut/OtherSessionsSignOut.tsx
@@ -24,25 +24,21 @@ const ConfirmOtherSessionsSignOut = observer(({ application, viewControllerManag
           <div className="sk-panel">
             <div className="sk-panel-content">
               <div className="sk-panel-section">
-                <AlertDialogLabel className="sk-h3 sk-panel-section-title capitalize">
-                  End all other sessions?
-                </AlertDialogLabel>
+                <AlertDialogLabel className="text-lg font-bold capitalize">End all other sessions?</AlertDialogLabel>
                 <AlertDialogDescription className="sk-panel-row">
-                  <p className="text-foreground">
+                  <p className="text-base text-foreground lg:text-sm">
                     This action will sign out all other devices signed into your account, and remove your data from
                     those devices when they next regain connection to the internet. You may sign back in on those
                     devices at any time.
                   </p>
                 </AlertDialogDescription>
-                <div className="my-1 mt-4 flex gap-2">
-                  <Button primary small colorStyle="neutral" rounded={false} ref={cancelRef} onClick={closeDialog}>
+                <div className="my-1 mt-4 flex justify-end gap-2">
+                  <Button ref={cancelRef} onClick={closeDialog}>
                     Cancel
                   </Button>
                   <Button
                     primary
-                    small
                     colorStyle="danger"
-                    rounded={false}
                     onClick={() => {
                       application.revokeAllOtherSessions().catch(console.error)
                       closeDialog()
diff --git a/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx b/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx
index ee7d12228..4c12eb5a4 100644
--- a/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx
+++ b/packages/web/src/javascripts/Components/SessionsModal/SessionsModal.tsx
@@ -166,28 +166,17 @@ const SessionsModalContent: FunctionComponent<{
               <div className="sk-panel">
                 <div className="sk-panel-content">
                   <div className="sk-panel-section">
-                    <AlertDialogLabel className="sk-h3 sk-panel-section-title">
-                      {SessionStrings.RevokeTitle}
-                    </AlertDialogLabel>
+                    <AlertDialogLabel className="text-lg font-bold">{SessionStrings.RevokeTitle}</AlertDialogLabel>
                     <AlertDialogDescription className="sk-panel-row">
-                      <p>{SessionStrings.RevokeText}</p>
+                      <p className="text-base text-foreground lg:text-sm">{SessionStrings.RevokeText}</p>
                     </AlertDialogDescription>
-                    <div className="my-1 flex gap-2">
-                      <Button
-                        primary
-                        small
-                        colorStyle="neutral"
-                        rounded={false}
-                        ref={cancelRevokeRef}
-                        onClick={closeRevokeSessionAlert}
-                      >
+                    <div className="my-1 mt-4 flex justify-end gap-2">
+                      <Button ref={cancelRevokeRef} onClick={closeRevokeSessionAlert}>
                         <span>{SessionStrings.RevokeCancelButton}</span>
                       </Button>
                       <Button
                         primary
-                        small
                         colorStyle="danger"
-                        rounded={false}
                         onClick={() => {
                           closeRevokeSessionAlert()
                           revokeSession(confirmRevokingSessionUuid).catch(console.error)
diff --git a/packages/web/src/stylesheets/_modals.scss b/packages/web/src/stylesheets/_modals.scss
index 23e8d74a1..7df0a5c89 100644
--- a/packages/web/src/stylesheets/_modals.scss
+++ b/packages/web/src/stylesheets/_modals.scss
@@ -59,6 +59,7 @@
   .sn-component {
     height: 100%;
     .sk-panel {
+      border-radius: 0.25rem;
       height: 100%;
     }
   }
@@ -105,6 +106,7 @@
     padding: 0;
     padding-bottom: 0;
     min-width: 300px;
+    border-radius: 0.25rem;
 
     -webkit-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);
     -moz-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19);