diff --git a/src/components/Alert.jsx b/src/components/Alert.jsx
deleted file mode 100644
index ec7a219fb..000000000
--- a/src/components/Alert.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import './Alert.css';
-
-export const Alert = ({ id, type, title, description }) => {
-  return (
-    <div id={`${id}_alert`} className={`alert-wrapper ${type}`}>
-      {title && <h4 id={`${id}_title`} className="alert-title">{title}</h4>}
-      {description && <span id={`${id}_description`} className="alert-description">{description}</span>}
-    </div>
-  );
-};
diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
new file mode 100644
index 000000000..6fa66abdf
--- /dev/null
+++ b/src/components/Alert.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import './Alert.css';
+import CloseIcon from '@mui/icons-material/Close';
+
+export interface AlertProps {
+  id: string;
+  type: string;
+  title: string;
+  description: string;
+  onClose?: () => void;
+}
+
+export const Alert = ({id, type, title, description, onClose}: AlertProps) => {
+  return (
+    <div id={`${id}_alert`} className={`alert-wrapper ${type}`} style={{border: '1px solid red', borderRadius: '5px'}}>
+      {onClose && <span
+        style={{float: 'right', fontWeight: 'bolder', fontSize: 24, cursor: 'pointer'}}
+        onClick={onClose} ><CloseIcon/></span> }
+      {title && <h4 id={`${id}_title`} className="alert-title">{title}</h4>}
+      {description && <span id={`${id}_description`} className="alert-description">{description}</span>}
+    </div>
+  );
+};
diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx
index 9ef80b941..8e762a8a8 100644
--- a/src/components/SignInButton.tsx
+++ b/src/components/SignInButton.tsx
@@ -122,9 +122,6 @@ export const SignInButton = (props: SignInButtonProps) => {
   const handleServerError = async (error: HttpError) => {
     const errorMessage = await errorStreamToString(error);
     setErrorDisplay({show: true, title: 'Error', description: errorMessage});
-    setTimeout(() => {
-      setErrorDisplay({});
-    }, 10000);
   };
 
   const handleErrors = async (error: HttpError, redirectTo: string, shouldRedirect: boolean) => {
@@ -160,14 +157,8 @@ export const SignInButton = (props: SignInButtonProps) => {
     if (response.toString().includes('Popup closed by user')) {
       setErrorDisplay(
         {title: 'Sign in cancelled', description: 'Sign in cancelled by closing the sign in window'});
-      setTimeout(() => {
-        setErrorDisplay({});
-      }, 2000);
     } else {
       setErrorDisplay({title: 'Error', description: response.toString()});
-      setTimeout(() => {
-        setErrorDisplay({});
-      }, 2000);
     }
   };
 
@@ -222,8 +213,9 @@ export const SignInButton = (props: SignInButtonProps) => {
           <Alert
             id="dialog"
             type="danger"
-            title={(errorDisplay as ErrorInfo).title}
-            description={(errorDisplay as ErrorInfo).description}
+            title={(errorDisplay as ErrorInfo).title || 'Error'}
+            description={(errorDisplay as ErrorInfo).description || ''}
+            onClose={() => setErrorDisplay({})}
           />
         </div>
       }