diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx
index 9079e9af0c9..821d4b48949 100644
--- a/public/app/AppWrapper.tsx
+++ b/public/app/AppWrapper.tsx
@@ -13,7 +13,7 @@ import { SideMenu } from './core/components/sidemenu/SideMenu';
 import { GrafanaRoute } from './core/navigation/GrafanaRoute';
 import { AppNotificationList } from './core/components/AppNotifications/AppNotificationList';
 import { SearchWrapper } from 'app/features/search';
-import { LiveConnectionCorner } from './features/live/LiveConnectionCorner';
+import { LiveConnectionWarning } from './features/live/LiveConnectionWarning';
 
 interface AppWrapperProps {
   app: GrafanaApp;
@@ -113,7 +113,7 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
                     </div>
                   </Router>
                 </div>
-                <LiveConnectionCorner />
+                <LiveConnectionWarning />
                 <ModalRoot />
               </ModalsProvider>
             </ThemeProvider>
diff --git a/public/app/features/live/LiveConnectionCorner.tsx b/public/app/features/live/LiveConnectionWarning.tsx
similarity index 53%
rename from public/app/features/live/LiveConnectionCorner.tsx
rename to public/app/features/live/LiveConnectionWarning.tsx
index 0dc76c2179e..41b140a7e51 100644
--- a/public/app/features/live/LiveConnectionCorner.tsx
+++ b/public/app/features/live/LiveConnectionWarning.tsx
@@ -1,9 +1,10 @@
 import { css } from '@emotion/css';
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { config, getGrafanaLiveSrv } from '@grafana/runtime';
-import { stylesFactory } from '@grafana/ui';
+import { Alert, stylesFactory } from '@grafana/ui';
 import React, { PureComponent } from 'react';
 import { Unsubscribable } from 'rxjs';
+import { contextSrv } from 'app/core/services/context_srv';
 
 export interface Props {}
 
@@ -11,9 +12,9 @@ export interface State {
   show?: boolean;
 }
 
-export class LiveConnectionCorner extends PureComponent<Props, State> {
+export class LiveConnectionWarning extends PureComponent<Props, State> {
   subscription?: Unsubscribable;
-  styles = getStyle(config.theme);
+  styles = getStyle(config.theme2);
   state: State = {};
 
   componentDidMount() {
@@ -44,24 +45,36 @@ export class LiveConnectionCorner extends PureComponent<Props, State> {
   render() {
     const { show } = this.state;
     if (show) {
-      return <div className={this.styles.corner} title="The server is disconnected" />;
+      if (!contextSrv.isSignedIn) {
+        return null; // do not show the warning for anonomous users (and /login page etc)
+      }
+
+      return (
+        <div className={this.styles.foot}>
+          <Alert severity={'warning'} className={this.styles.warn} title="connection to server is lost..." />
+        </div>
+      );
     }
     return null;
   }
 }
 
-const getStyle = stylesFactory((theme: GrafanaTheme) => {
+const getStyle = stylesFactory((theme: GrafanaTheme2) => {
   return {
-    corner: css`
-      position: fixed;
-      top: 0px !important;
-      left: 0px !important;
-      width: 0;
-      height: 0;
-      border-top: 60px solid ${theme.palette.brandWarning};
-      border-right: 60px solid transparent;
+    foot: css`
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+      right: 0px;
       z-index: 10000;
       cursor: wait;
+      margin: 16px;
+    `,
+    warn: css`
+      border: 2px solid ${theme.colors.warning.main};
+      max-width: 400px;
+      margin: auto;
+      height: 3em;
     `,
   };
 });