diff --git a/src/components/PeerUpdate.tsx b/src/components/PeerUpdate.tsx
index df6eca6..59b4791 100644
--- a/src/components/PeerUpdate.tsx
+++ b/src/components/PeerUpdate.tsx
@@ -20,8 +20,10 @@ import {
   Switch,
   Breadcrumb,
   Table,
+  Badge,
   SelectProps,
   Modal,
+  Tooltip,
 } from "antd";
 import { Container } from "./Container";
 import { Header } from "antd/es/layout/layout";
@@ -78,7 +80,7 @@ const PeerUpdate = () => {
   const [peerGroups, setPeerGroups] = useState([] as GroupPeer[]);
   const inputNameRef = useRef<any>(null);
   const [editName, setEditName] = useState(false);
-   const options: SelectProps["options"] = [];
+  const options: SelectProps["options"] = [];
   const [estimatedName, setEstimatedName] = useState("");
   const [callingPeerAPI, setCallingPeerAPI] = useState(false);
   const [callingGroupAPI, setCallingGroupAPI] = useState(false);
@@ -150,7 +152,7 @@ const PeerUpdate = () => {
       (route) => route.peer !== peer.id
     );
     setNotPeerRoutes(filterNotPeerRoutes);
-    }, [routes]);
+  }, [routes]);
 
   useEffect(() => {
     if (!peer) return;
@@ -594,7 +596,10 @@ const PeerUpdate = () => {
                               fontWeight: "400",
                             }}
                           >
-                            {formPeer.userEmail}{" "}
+                            <div style={{ marginBottom: "2px" }}>
+                              {" "}
+                              {formPeer.userEmail}{" "}
+                            </div>
                           </Paragraph>
                         </div>
                       ) : (
@@ -653,9 +658,26 @@ const PeerUpdate = () => {
                         >
                           NetBird IP
                         </span>
-                        <Tag color={formPeer.connected ? "green" : "red"}>
-                          {formPeer.connected ? "online" : "offline"}
-                        </Tag>
+
+                        {formPeer.connected ? (
+                          <Badge
+                            status="success"
+                            style={{
+                              marginTop: "1px",
+                              marginRight: "5px",
+                              marginLeft: "0px",
+                            }}
+                          ></Badge>
+                        ) : (
+                          <Badge
+                            status="error"
+                            style={{
+                              marginTop: "1px",
+                              marginRight: "5px",
+                              marginLeft: "0px",
+                            }}
+                          ></Badge>
+                        )}
                       </>
                     }
                   >
diff --git a/src/index.css b/src/index.css
index 4ccc794..62e3129 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,11 +1,11 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500&display=swap');
 @import 'antd/dist/reset.css';
 
 html,
 body,
 * {
-  font-family: 'Roboto', sans-serif !important;
+  font-family: 'Arimo', sans-serif !important;
 }
 
 body {
@@ -267,3 +267,8 @@ td.non-highlighted-table-column {
 .react-select__indicator {
   padding: 0 5px !important;
 }
+
+.ant-badge-status-dot {
+  width: 8px!important;
+  height: 8px!important;
+}
\ No newline at end of file
diff --git a/src/views/AccessControl.tsx b/src/views/AccessControl.tsx
index d8c3f21..5379277 100644
--- a/src/views/AccessControl.tsx
+++ b/src/views/AccessControl.tsx
@@ -541,7 +541,6 @@ export const AccessControl = () => {
       })
     );
   };
-
   return (
     <>
       {!setupEditPolicyVisible && (
@@ -550,10 +549,18 @@ export const AccessControl = () => {
             <Row>
               <Col span={24}>
                 <Title className="page-heading">Access Control</Title>
-                <Paragraph type="secondary">
-                  Access rules help you manage access permissions in your
-                  organisation.
-                </Paragraph>
+                {policies.length ? (
+                  <Paragraph>
+                    Access rules help you manage access permissions in your
+                    organisation.
+                  </Paragraph>
+                ) : (
+                  <Paragraph type={"secondary"}>
+                    Access rules help you manage access permissions in your
+                    organisation.
+                  </Paragraph>
+                )}
+
                 <Space
                   direction="vertical"
                   size="large"
diff --git a/src/views/Nameservers.tsx b/src/views/Nameservers.tsx
index 9e73a81..2991bda 100644
--- a/src/views/Nameservers.tsx
+++ b/src/views/Nameservers.tsx
@@ -1,475 +1,625 @@
-import React, {useEffect, useState} from 'react';
-import {useDispatch, useSelector} from "react-redux";
-import {RootState} from "typesafe-actions";
-import {actions as nsGroupActions} from '../store/nameservers';
-import {Container} from "../components/Container";
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "typesafe-actions";
+import { actions as nsGroupActions } from "../store/nameservers";
+import { Container } from "../components/Container";
 import {
-    Alert,
-    Button,
-    Card,
-    Col,
-    Dropdown,
-    Input,
-    Menu,
-    message,
-    Modal,
-    Popover,
-    Radio,
-    RadioChangeEvent,
-    Row,
-    Select,
-    Space,
-    Table,
-    Tag,
-    Typography,
+  Alert,
+  Button,
+  Card,
+  Col,
+  Dropdown,
+  Input,
+  Menu,
+  message,
+  Modal,
+  Popover,
+  Radio,
+  RadioChangeEvent,
+  Row,
+  Select,
+  Space,
+  Table,
+  Tag,
+  Typography,
 } from "antd";
-import {filter} from "lodash";
+import { filter } from "lodash";
 import tableSpin from "../components/Spin";
-import {useGetTokenSilently} from "../utils/token";
-import {actions as groupActions} from "../store/group";
-import {Group} from "../store/group/types";
-import {TooltipPlacement} from "antd/es/tooltip";
-import {NameServer, NameServerGroup} from "../store/nameservers/types";
+import { useGetTokenSilently } from "../utils/token";
+import { actions as groupActions } from "../store/group";
+import { Group } from "../store/group/types";
+import { TooltipPlacement } from "antd/es/tooltip";
+import { NameServer, NameServerGroup } from "../store/nameservers/types";
 import NameServerGroupUpdate from "../components/NameServerGroupUpdate";
-import {EllipsisOutlined, ExclamationCircleOutlined} from "@ant-design/icons";
-import {useGetGroupTagHelpers} from "../utils/groups";
-import {usePageSizeHelpers} from "../utils/pageSize";
+import { EllipsisOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
+import { useGetGroupTagHelpers } from "../utils/groups";
+import { usePageSizeHelpers } from "../utils/pageSize";
 
-const {Title, Paragraph} = Typography;
-const {Column} = Table;
-const {confirm} = Modal;
+const { Title, Paragraph } = Typography;
+const { Column } = Table;
+const { confirm } = Modal;
 
 interface NameserverGroupDataTable extends NameServerGroup {
-    key: string
+  key: string;
 }
 
-const styleNotification = {marginTop: 85}
+const styleNotification = { marginTop: 85 };
 
 export const Nameservers = () => {
-    const {onChangePageSize,pageSizeOptions,pageSize} = usePageSizeHelpers()
-    const {getTokenSilently} = useGetTokenSilently()
-    const dispatch = useDispatch()
+  const { onChangePageSize, pageSizeOptions, pageSize } = usePageSizeHelpers();
+  const { getTokenSilently } = useGetTokenSilently();
+  const dispatch = useDispatch();
 
-    const {
-        getGroupNamesFromIDs,
-    } = useGetGroupTagHelpers()
+  const { getGroupNamesFromIDs } = useGetGroupTagHelpers();
 
-    const groups = useSelector((state: RootState) => state.group.data)
-    const nsGroup = useSelector((state: RootState) => state.nameserverGroup.data);
-    const failed = useSelector((state: RootState) => state.nameserverGroup.failed);
-    const loading = useSelector((state: RootState) => state.nameserverGroup.loading);
-    const updateNameServerGroupVisible = useSelector((state: RootState) => state.nameserverGroup.setupNewNameServerGroupVisible)
-    const savedNSGroup = useSelector((state: RootState) => state.nameserverGroup.savedNameServerGroup)
+  const groups = useSelector((state: RootState) => state.group.data);
+  const nsGroup = useSelector((state: RootState) => state.nameserverGroup.data);
+  const failed = useSelector(
+    (state: RootState) => state.nameserverGroup.failed
+  );
+  const loading = useSelector(
+    (state: RootState) => state.nameserverGroup.loading
+  );
+  const updateNameServerGroupVisible = useSelector(
+    (state: RootState) => state.nameserverGroup.setupNewNameServerGroupVisible
+  );
+  const savedNSGroup = useSelector(
+    (state: RootState) => state.nameserverGroup.savedNameServerGroup
+  );
 
-    const [groupPopupVisible, setGroupPopupVisible] = useState("")
-    const [nsGroupToAction, setNsGroupToAction] = useState(null as NameserverGroupDataTable | null);
-    const [textToSearch, setTextToSearch] = useState('');
-    const [optionAllEnable, setOptionAllEnable] = useState('enabled');
-    const [dataTable, setDataTable] = useState([] as NameserverGroupDataTable[]);
-    const [showTutorial, setShowTutorial] = useState(false)
+  const [groupPopupVisible, setGroupPopupVisible] = useState("");
+  const [nsGroupToAction, setNsGroupToAction] = useState(
+    null as NameserverGroupDataTable | null
+  );
+  const [textToSearch, setTextToSearch] = useState("");
+  const [optionAllEnable, setOptionAllEnable] = useState("enabled");
+  const [dataTable, setDataTable] = useState([] as NameserverGroupDataTable[]);
+  const [showTutorial, setShowTutorial] = useState(false);
 
+  const optionsAllEnabled = [
+    { label: "Enabled", value: "enabled" },
+    { label: "All", value: "all" },
+  ];
 
-    const optionsAllEnabled = [{label: 'Enabled', value: 'enabled'}, {label: 'All', value: 'all'}]
+  // setUserAndView makes the UserUpdate drawer visible (right side) and sets the user object
+  const setUserAndView = (nsGroup: NameServerGroup) => {
+    dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(true));
+    dispatch(
+      nsGroupActions.setNameServerGroup({
+        id: nsGroup.id,
+        name: nsGroup.name,
+        primary: nsGroup.primary,
+        domains: nsGroup.domains,
+        description: nsGroup.description,
+        nameservers: nsGroup.nameservers,
+        groups: nsGroup.groups,
+        enabled: nsGroup.enabled,
+      } as NameServerGroup)
+    );
+  };
 
-    // setUserAndView makes the UserUpdate drawer visible (right side) and sets the user object
-    const setUserAndView = (nsGroup: NameServerGroup) => {
-        dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(true));
-        dispatch(nsGroupActions.setNameServerGroup({
-            id: nsGroup.id,
-            name: nsGroup.name,
-            primary: nsGroup.primary,
-            domains: nsGroup.domains,
-            description: nsGroup.description,
-            nameservers: nsGroup.nameservers,
-            groups: nsGroup.groups,
-            enabled: nsGroup.enabled,
-        } as NameServerGroup));
+  const transformDataTable = (
+    d: NameServerGroup[]
+  ): NameserverGroupDataTable[] => {
+    return d.map((p) => ({ key: p.id, ...p } as NameserverGroupDataTable));
+  };
+
+  useEffect(() => {
+    dispatch(
+      nsGroupActions.getNameServerGroups.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: null,
+      })
+    );
+    dispatch(
+      groupActions.getGroups.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: null,
+      })
+    );
+  }, []);
+
+  useEffect(() => {
+    if (nsGroup.length > 0) {
+      setShowTutorial(false);
+    } else {
+      setShowTutorial(true);
     }
+    setDataTable(transformDataTable(filterDataTable()));
+  }, [nsGroup]);
 
-    const transformDataTable = (d: NameServerGroup[]): NameserverGroupDataTable[] => {
-        return d.map(p => ({key: p.id, ...p} as NameserverGroupDataTable))
+  useEffect(() => {
+    setDataTable(transformDataTable(filterDataTable()));
+  }, [textToSearch, optionAllEnable]);
+
+  const filterDataTable = (): NameServerGroup[] => {
+    const t = textToSearch.toLowerCase().trim();
+    let f = filter(
+      nsGroup,
+      (f: NameServerGroup) =>
+        f.name.toLowerCase().includes(t) ||
+        f.name.includes(t) ||
+        t === "" ||
+        getGroupNamesFromIDs(f.groups).find((u) =>
+          u.toLowerCase().trim().includes(t)
+        ) ||
+        f.domains.find((d) => d.toLowerCase().trim().includes(t)) ||
+        f.nameservers.find((n) => n.ip.includes(t))
+    ) as NameServerGroup[];
+    if (optionAllEnable !== "all") {
+      f = filter(f, (f) => f.enabled);
     }
+    return f;
+  };
 
-    useEffect(() => {
-        dispatch(nsGroupActions.getNameServerGroups.request({
+  const onChangeAllEnabled = ({ target: { value } }: RadioChangeEvent) => {
+    setOptionAllEnable(value);
+  };
+
+  const onChangeTextToSearch = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    setTextToSearch(e.target.value);
+  };
+
+  const searchDataTable = () => {
+    setDataTable(transformDataTable(filterDataTable()));
+  };
+
+  const onClickEdit = () => {
+    dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(true));
+    dispatch(
+      nsGroupActions.setNameServerGroup({
+        id: nsGroupToAction?.id,
+        name: nsGroupToAction?.name,
+        primary: nsGroupToAction?.primary,
+        domains: nsGroupToAction?.domains,
+        description: nsGroupToAction?.description,
+        groups: nsGroupToAction?.groups,
+        enabled: nsGroupToAction?.enabled,
+        nameservers: nsGroupToAction?.nameservers,
+      } as NameServerGroup)
+    );
+  };
+
+  const showConfirmDelete = () => {
+    let name = nsGroupToAction ? nsGroupToAction.name : "";
+    confirm({
+      icon: <ExclamationCircleOutlined />,
+      title: 'Delete Nameserver group "' + name + '"',
+      width: 600,
+      content: (
+        <Space direction="vertical" size="small">
+          <Paragraph>
+            Are you sure you want to delete this nameserver group from your
+            account?
+          </Paragraph>
+        </Space>
+      ),
+      okType: "danger",
+      onOk() {
+        dispatch(
+          nsGroupActions.deleteNameServerGroup.request({
             getAccessTokenSilently: getTokenSilently,
-            payload: null
-        }));
-        dispatch(groupActions.getGroups.request({getAccessTokenSilently: getTokenSilently, payload: null}));
-    }, [])
+            payload: nsGroupToAction?.id || "",
+          })
+        );
+      },
+      onCancel() {
+        setNsGroupToAction(null);
+      },
+    });
+  };
 
-    useEffect(() => {
-        if (nsGroup.length > 0) {
-            setShowTutorial(false)
-        } else {
-            setShowTutorial(true)
-        }
-        setDataTable(transformDataTable(filterDataTable()))
-    }, [nsGroup])
+  const renderPopoverGroups = (
+    label: string,
+    rowGroups: string[] | null,
+    userToAction: NameserverGroupDataTable
+  ) => {
+    let groupsMap = new Map<string, Group>();
+    groups.forEach((g) => {
+      groupsMap.set(g.id!, g);
+    });
 
-    useEffect(() => {
-        setDataTable(transformDataTable(filterDataTable()))
-    }, [textToSearch, optionAllEnable])
-
-    const filterDataTable = (): NameServerGroup[] => {
-        const t = textToSearch.toLowerCase().trim()
-        let f = filter(nsGroup, (f: NameServerGroup) =>
-            ((f.name).toLowerCase().includes(t) ||
-                f.name.includes(t) || t === "" ||
-                getGroupNamesFromIDs(f.groups).find(u => u.toLowerCase().trim().includes(t)) ||
-                f.domains.find(d => d.toLowerCase().trim().includes(t)) ||
-                f.nameservers.find(n => n.ip.includes(t)))
-        ) as NameServerGroup[]
-        if (optionAllEnable !== "all") {
-            f = filter(f, (f) => f.enabled)
-        }
-        return f
+    let displayGroups: Group[] = [];
+    if (rowGroups) {
+      displayGroups = rowGroups
+        .filter((g) => groupsMap.get(g))
+        .map((g) => groupsMap.get(g)!);
     }
 
-    const onChangeAllEnabled = ({target: {value}}: RadioChangeEvent) => {
-        setOptionAllEnable(value)
+    let btn = (
+      <Button type="link" onClick={() => setUserAndView(userToAction)}>
+        {displayGroups.length}
+      </Button>
+    );
+    if (!displayGroups || displayGroups!.length < 1) {
+      return btn;
     }
 
-    const onChangeTextToSearch = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        setTextToSearch(e.target.value)
-    };
-
-    const searchDataTable = () => {
-        setDataTable(transformDataTable(filterDataTable()))
-    }
-
-    const onClickEdit = () => {
-        dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(true));
-        dispatch(nsGroupActions.setNameServerGroup({
-            id: nsGroupToAction?.id,
-            name: nsGroupToAction?.name,
-            primary: nsGroupToAction?.primary,
-            domains: nsGroupToAction?.domains,
-            description: nsGroupToAction?.description,
-            groups: nsGroupToAction?.groups,
-            enabled: nsGroupToAction?.enabled,
-            nameservers: nsGroupToAction?.nameservers,
-        } as NameServerGroup));
-    }
-
-    const showConfirmDelete = () => {
-        let name = nsGroupToAction ? nsGroupToAction.name : '';
-        confirm({
-            icon: <ExclamationCircleOutlined/>,
-            title: "Delete Nameserver group \"" + name + "\"",
-            width: 600,
-            content: <Space direction="vertical" size="small">
-                <Paragraph>Are you sure you want to delete this nameserver group from your account?</Paragraph>
-            </Space>,
-            okType: 'danger',
-            onOk() {
-                dispatch(nsGroupActions.deleteNameServerGroup.request({
-                    getAccessTokenSilently: getTokenSilently,
-                    payload: nsGroupToAction?.id || ''
-                }));
-            },
-            onCancel() {
-                setNsGroupToAction(null);
-            },
-        });
-    }
-
-    const renderPopoverGroups = (label: string, rowGroups: string[] | null, userToAction: NameserverGroupDataTable) => {
-
-        let groupsMap = new Map<string, Group>();
-        groups.forEach(g => {
-            groupsMap.set(g.id!, g)
-        })
-
-        let displayGroups: Group[] = []
-        if (rowGroups) {
-            displayGroups = rowGroups.filter(g => groupsMap.get(g)).map(g => groupsMap.get(g)!)
-        }
-
-        let btn = <Button type="link" onClick={() => setUserAndView(userToAction)}>{displayGroups.length}</Button>
-        if (!displayGroups || displayGroups!.length < 1) {
-            return btn
-        }
-
-        const content = displayGroups?.map((g, i) => {
-            const _g = g as Group
-            const peersCount = ` - ${_g.peers_count || 0} ${(!_g.peers_count || parseInt(_g.peers_count) !== 1) ? 'peers' : 'peer'} `
-            return (
-                <div key={i}>
-                    <Tag
-                        color="blue"
-                        style={{marginRight: 3}}
-                    >
-                        {_g.name}
-                    </Tag>
-                    <span style={{fontSize: ".85em"}}>{peersCount}</span>
-                </div>
-            )
-        })
-        const mainContent = (<Space direction="vertical">{content}</Space>)
-        let popoverPlacement = "top"
-        if (content && content.length > 5) {
-            popoverPlacement = "rightTop"
-        }
-
-        return (
-            <Popover placement={popoverPlacement as TooltipPlacement}
-                     key={userToAction.id}
-                     onOpenChange={(b: boolean) => onPopoverVisibleChange(b, userToAction.key+"group")}
-                     open={groupPopupVisible === userToAction.key+"group"}
-                     content={mainContent}
-                     title={null}>
-                {btn}
-            </Popover>
-        )
-    }
-
-    const renderPopoverDomains = (_: string, inputDomains: string[] | null, userToAction: NameserverGroupDataTable) => {
-        var domains = [] as string[]
-        if (inputDomains?.length) {
-            domains = inputDomains
-        }
-
-        let btn = <Button type="link"
-                          onClick={() => setUserAndView(userToAction)}>{domains.length ? domains.length : 0}</Button>
-        if (!domains || domains!.length < 1) {
-            return btn
-        }
-
-        const content = domains?.map((d, i) => {
-            return (
-                <div key={i}>
-                    <Tag
-                        color="blue"
-                        style={{marginRight: 3}}
-                    >
-                        {d}
-                    </Tag>
-                </div>
-            )
-        })
-
-        const mainContent = (<Space direction="vertical">{content}</Space>)
-        let popoverPlacement = "top"
-        if (content && content.length > 5) {
-            popoverPlacement = "rightTop"
-        }
-
-        return (
-            <Popover placement={popoverPlacement as TooltipPlacement}
-                     key={userToAction.id}
-                     onOpenChange={(b: boolean) => onPopoverVisibleChange(b, userToAction.key+"domain")}
-                     open={groupPopupVisible === userToAction.key+"domain"}
-                     content={mainContent}
-                     title={null}>
-                {btn}
-            </Popover>
-        )
-    }
-
-    useEffect(() => {
-        if (updateNameServerGroupVisible) {
-            setGroupPopupVisible("")
-        }
-    }, [updateNameServerGroupVisible])
-
-    const createKey = 'saving';
-    useEffect(() => {
-        if (savedNSGroup.loading) {
-            message.loading({content: 'Saving...', key: createKey, duration: 0, style: styleNotification});
-        } else if (savedNSGroup.success) {
-            message.success({
-                content: 'Nameserver has been successfully saved.',
-                key: createKey,
-                duration: 2,
-                style: styleNotification
-            });
-            dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(false));
-            dispatch(nsGroupActions.setSavedNameServerGroup({...savedNSGroup, success: false}));
-            dispatch(nsGroupActions.resetSavedNameServerGroup(null))
-        } else if (savedNSGroup.error) {
-            let errorMsg = "Failed to update nameserver group"
-            switch (savedNSGroup.error.statusCode) {
-                case 403:
-                    errorMsg = "Failed to update nameserver group. You might not have enough permissions."
-                    break
-                default:
-                    errorMsg = savedNSGroup.error.data.message ? savedNSGroup.error.data.message : errorMsg
-                    break
-            }
-            message.error({
-                content: errorMsg,
-                key: createKey,
-                duration: 5,
-                style: styleNotification
-            });
-            dispatch(nsGroupActions.setSavedNameServerGroup({...savedNSGroup, error: null}));
-            dispatch(nsGroupActions.resetSavedNameServerGroup(null))
-        }
-    }, [savedNSGroup])
-
-    const onPopoverVisibleChange = (b:boolean, key: string) => {
-        if (updateNameServerGroupVisible) {
-            setGroupPopupVisible("")
-        } else {
-            if (b) {
-                setGroupPopupVisible(key)
-            } else {
-                setGroupPopupVisible("")
-            }
-        }
-    }
-
-    const itemsMenuAction = [
-        {
-            key: "edit",
-            label: (<Button type="text" onClick={() => onClickEdit()}>View</Button>)
-        },
-        {
-            key: "delete",
-            label: (<Button type="text" onClick={() => showConfirmDelete()}>Delete</Button>)
-        },
-    ]
-
-    const actionsMenu = (<Menu items={itemsMenuAction}></Menu>)
-
-    const onClickAddNewNSGroup = () => {
-        dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(true));
-        dispatch(nsGroupActions.setNameServerGroup({
-            enabled: true,
-            primary: true,
-        } as NameServerGroup))
+    const content = displayGroups?.map((g, i) => {
+      const _g = g as Group;
+      const peersCount = ` - ${_g.peers_count || 0} ${
+        !_g.peers_count || parseInt(_g.peers_count) !== 1 ? "peers" : "peer"
+      } `;
+      return (
+        <div key={i}>
+          <Tag color="blue" style={{ marginRight: 3 }}>
+            {_g.name}
+          </Tag>
+          <span style={{ fontSize: ".85em" }}>{peersCount}</span>
+        </div>
+      );
+    });
+    const mainContent = <Space direction="vertical">{content}</Space>;
+    let popoverPlacement = "top";
+    if (content && content.length > 5) {
+      popoverPlacement = "rightTop";
     }
 
     return (
-        <>
-                        <Paragraph>Add nameservers for domain name resolution in your NetBird network</Paragraph>
-                        <Space direction="vertical" size="large" style={{display: 'flex'}}>
-                            <Row gutter={[16, 24]}>
-                                <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} span={8}>
-                                    <Input allowClear value={textToSearch} onPressEnter={searchDataTable}
-                                           placeholder="Search..." onChange={onChangeTextToSearch}/>
-                                </Col>
-                                <Col xs={24} sm={24} md={11} lg={11} xl={11} xxl={11} span={11}>
-                                    <Space size="middle">
-                                        <Radio.Group
-                                            options={optionsAllEnabled}
-                                            onChange={onChangeAllEnabled}
-                                            value={optionAllEnable}
-                                            optionType="button"
-                                            buttonStyle="solid"
-                                        />
-                                        <Select value={pageSize.toString()} options={pageSizeOptions}
-                                                onChange={onChangePageSize} className="select-rows-per-page-en"/>
-                                    </Space>
-                                </Col>
-                                <Col xs={24}
-                                     sm={24}
-                                     md={5}
-                                     lg={5}
-                                     xl={5}
-                                     xxl={5} span={5}>
-                                    <Row justify="end">
-                                        <Col>
-                                            {!showTutorial &&
-                                                <Button type="primary" onClick={onClickAddNewNSGroup}>Add
-                                                    Nameserver</Button>}
-                                        </Col>
-                                    </Row>
-                                </Col>
-                            </Row>
-                            {failed &&
-                                <Alert message={failed.code} description={failed.message} type="error" showIcon
-                                       closable/>
-                            }
-                            <Card bodyStyle={{padding: 0}}>
-                                <Table
-                                    pagination={{
-                                        pageSize,
-                                        showSizeChanger: false,
-                                        showTotal: ((total, range) => `Showing ${range[0]} to ${range[1]} of ${total} nameservers`)
-                                    }}
-                                    // className="card-table"
-                                    className={`access-control-table ${showTutorial ? "card-table card-table-no-placeholder" : "card-table"}`}
-                                    showSorterTooltip={false}
-                                    scroll={{x: true}}
-                                    loading={tableSpin(loading)}
-                                    dataSource={dataTable}>
-                                    <Column title="Name" dataIndex="name" align="center"
-                                            onFilter={(value: string | number | boolean, record) => (record as any).name.includes(value)}
-                                            sorter={(a, b) => ((a as any).name.localeCompare((b as any).name))}
-                                            defaultSortOrder='ascend'
-                                            render={(text, record) => {
-                                                return <Button type="text"
-                                                               onClick={() => setUserAndView(record as NameserverGroupDataTable)}
-                                                               className="tooltip-label">{(text && text.trim() !== "") ? text : (record as NameServerGroup).id}</Button>
-                                            }}
-                                    />
-                                    <Column title="Status" dataIndex="enabled" align="center"
-                                            render={(text: Boolean) => {
-                                                return text ? <Tag color="green">enabled</Tag> :
-                                                    <Tag color="red">disabled</Tag>
-                                            }}
-                                    />
-                                    <Column title="Nameservers" dataIndex="nameservers" align="center"
-                                            render={(nameservers: NameServer[]) => (
-                                                <>
-                                                    {nameservers.map(nameserver => (
-                                                        <Tag key={nameserver.ip}>
-                                                            {nameserver.ip}
-                                                        </Tag>
-                                                    ))}
-                                                </>
-                                            )}
-                                    />
-                                    <Column title="All domains" dataIndex="primary" align="center"
-                                            render={(text: Boolean) => {
-                                                return text ? <Tag color="blue">yes</Tag> :
-                                                    <Tag>no</Tag>
-                                            }}
-                                    />
-                                    <Column title="Match domains" dataIndex="domains" align="center"
-                                            render={(text, record: NameserverGroupDataTable) => {
-                                                return renderPopoverDomains(text, record.domains, record)
-                                            }}
-                                    />
-                                    <Column title="Groups" dataIndex="groupsCount" align="center"
-                                            render={(text, record: NameserverGroupDataTable) => {
-                                                return renderPopoverGroups(text, record.groups, record)
-                                            }}
-                                    />
-                                    <Column title="" align="center" width="30px"
-                                            render={(text, record) => {
-                                                return (
-                                                    <Dropdown trigger={["click"]} overlay={actionsMenu} onOpenChange={visible => {
-                                                        if (visible) setNsGroupToAction(record as NameserverGroupDataTable)
-                                                    }}>
-                                                        <Button type="text">
-                                                            <Space>
-                                                                <EllipsisOutlined />
-                                                            </Space>
-                                                        </Button>
-                                                    </Dropdown>
-                                                )
-                                            }}
-                                    />
-                                </Table>
-                                {showTutorial &&
-                                    <Space direction="vertical" size="small" align="center"
-                                           style={{display: 'flex', padding: '45px 15px', justifyContent: 'center'}}>
-                                        <Paragraph type="secondary"
-                                                   style={{textAlign: "center", whiteSpace: "pre-line"}}>
-                                            It looks like you don't have any nameservers. {"\n"}
-                                            Get started by adding one to your network!
-                                        </Paragraph>
-                                        <Button type="primary" onClick={onClickAddNewNSGroup}>Add
-                                            Nameserver</Button>
-                                    </Space>
-                                }
-                            </Card>
-                        </Space>
-        </>
-    )
-}
+      <Popover
+        placement={popoverPlacement as TooltipPlacement}
+        key={userToAction.id}
+        onOpenChange={(b: boolean) =>
+          onPopoverVisibleChange(b, userToAction.key + "group")
+        }
+        open={groupPopupVisible === userToAction.key + "group"}
+        content={mainContent}
+        title={null}
+      >
+        {btn}
+      </Popover>
+    );
+  };
 
-export default Nameservers;
\ No newline at end of file
+  const renderPopoverDomains = (
+    _: string,
+    inputDomains: string[] | null,
+    userToAction: NameserverGroupDataTable
+  ) => {
+    var domains = [] as string[];
+    if (inputDomains?.length) {
+      domains = inputDomains;
+    }
+
+    let btn = (
+      <Button type="link" onClick={() => setUserAndView(userToAction)}>
+        {domains.length ? domains.length : 0}
+      </Button>
+    );
+    if (!domains || domains!.length < 1) {
+      return btn;
+    }
+
+    const content = domains?.map((d, i) => {
+      return (
+        <div key={i}>
+          <Tag color="blue" style={{ marginRight: 3 }}>
+            {d}
+          </Tag>
+        </div>
+      );
+    });
+
+    const mainContent = <Space direction="vertical">{content}</Space>;
+    let popoverPlacement = "top";
+    if (content && content.length > 5) {
+      popoverPlacement = "rightTop";
+    }
+
+    return (
+      <Popover
+        placement={popoverPlacement as TooltipPlacement}
+        key={userToAction.id}
+        onOpenChange={(b: boolean) =>
+          onPopoverVisibleChange(b, userToAction.key + "domain")
+        }
+        open={groupPopupVisible === userToAction.key + "domain"}
+        content={mainContent}
+        title={null}
+      >
+        {btn}
+      </Popover>
+    );
+  };
+
+  useEffect(() => {
+    if (updateNameServerGroupVisible) {
+      setGroupPopupVisible("");
+    }
+  }, [updateNameServerGroupVisible]);
+
+  const createKey = "saving";
+  useEffect(() => {
+    if (savedNSGroup.loading) {
+      message.loading({
+        content: "Saving...",
+        key: createKey,
+        duration: 0,
+        style: styleNotification,
+      });
+    } else if (savedNSGroup.success) {
+      message.success({
+        content: "Nameserver has been successfully saved.",
+        key: createKey,
+        duration: 2,
+        style: styleNotification,
+      });
+      dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(false));
+      dispatch(
+        nsGroupActions.setSavedNameServerGroup({
+          ...savedNSGroup,
+          success: false,
+        })
+      );
+      dispatch(nsGroupActions.resetSavedNameServerGroup(null));
+    } else if (savedNSGroup.error) {
+      let errorMsg = "Failed to update nameserver group";
+      switch (savedNSGroup.error.statusCode) {
+        case 403:
+          errorMsg =
+            "Failed to update nameserver group. You might not have enough permissions.";
+          break;
+        default:
+          errorMsg = savedNSGroup.error.data.message
+            ? savedNSGroup.error.data.message
+            : errorMsg;
+          break;
+      }
+      message.error({
+        content: errorMsg,
+        key: createKey,
+        duration: 5,
+        style: styleNotification,
+      });
+      dispatch(
+        nsGroupActions.setSavedNameServerGroup({ ...savedNSGroup, error: null })
+      );
+      dispatch(nsGroupActions.resetSavedNameServerGroup(null));
+    }
+  }, [savedNSGroup]);
+
+  const onPopoverVisibleChange = (b: boolean, key: string) => {
+    if (updateNameServerGroupVisible) {
+      setGroupPopupVisible("");
+    } else {
+      if (b) {
+        setGroupPopupVisible(key);
+      } else {
+        setGroupPopupVisible("");
+      }
+    }
+  };
+
+  const itemsMenuAction = [
+    {
+      key: "edit",
+      label: (
+        <Button type="text" onClick={() => onClickEdit()}>
+          View
+        </Button>
+      ),
+    },
+    {
+      key: "delete",
+      label: (
+        <Button type="text" onClick={() => showConfirmDelete()}>
+          Delete
+        </Button>
+      ),
+    },
+  ];
+
+  const actionsMenu = <Menu items={itemsMenuAction}></Menu>;
+
+  const onClickAddNewNSGroup = () => {
+    dispatch(nsGroupActions.setSetupNewNameServerGroupVisible(true));
+    dispatch(
+      nsGroupActions.setNameServerGroup({
+        enabled: true,
+        primary: true,
+      } as NameServerGroup)
+    );
+  };
+
+  return (
+    <>
+      <Paragraph>
+        Add nameservers for domain name resolution in your NetBird network
+      </Paragraph>
+      <Space direction="vertical" size="large" style={{ display: "flex" }}>
+        <Row gutter={[16, 24]}>
+          <Col xs={24} sm={24} md={8} lg={8} xl={8} xxl={8} span={8}>
+            <Input
+              allowClear
+              value={textToSearch}
+              onPressEnter={searchDataTable}
+              placeholder="Search..."
+              onChange={onChangeTextToSearch}
+            />
+          </Col>
+          <Col xs={24} sm={24} md={11} lg={11} xl={11} xxl={11} span={11}>
+            <Space size="middle">
+              <Radio.Group
+                options={optionsAllEnabled}
+                onChange={onChangeAllEnabled}
+                value={optionAllEnable}
+                optionType="button"
+                buttonStyle="solid"
+              />
+              <Select
+                value={pageSize.toString()}
+                options={pageSizeOptions}
+                onChange={onChangePageSize}
+                className="select-rows-per-page-en"
+              />
+            </Space>
+          </Col>
+          <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
+            <Row justify="end">
+              <Col>
+                {!showTutorial && (
+                  <Button type="primary" onClick={onClickAddNewNSGroup}>
+                    Add Nameserver
+                  </Button>
+                )}
+              </Col>
+            </Row>
+          </Col>
+        </Row>
+        {failed && (
+          <Alert
+            message={failed.code}
+            description={failed.message}
+            type="error"
+            showIcon
+            closable
+          />
+        )}
+        <Card bodyStyle={{ padding: 0 }}>
+          <Table
+            pagination={{
+              pageSize,
+              showSizeChanger: false,
+              showTotal: (total, range) =>
+                `Showing ${range[0]} to ${range[1]} of ${total} nameservers`,
+            }}
+            // className="card-table"
+            className={`access-control-table ${
+              showTutorial
+                ? "card-table card-table-no-placeholder"
+                : "card-table"
+            }`}
+            showSorterTooltip={false}
+            scroll={{ x: true }}
+            loading={tableSpin(loading)}
+            dataSource={dataTable}
+          >
+            <Column
+              title="Name"
+              dataIndex="name"
+              align="center"
+              onFilter={(value: string | number | boolean, record) =>
+                (record as any).name.includes(value)
+              }
+              sorter={(a, b) => (a as any).name.localeCompare((b as any).name)}
+              defaultSortOrder="ascend"
+              render={(text, record) => {
+                return (
+                  <Button
+                    type="text"
+                    onClick={() =>
+                      setUserAndView(record as NameserverGroupDataTable)
+                    }
+                    className="tooltip-label"
+                  >
+                    {text && text.trim() !== ""
+                      ? text
+                      : (record as NameServerGroup).id}
+                  </Button>
+                );
+              }}
+            />
+            <Column
+              title="Status"
+              dataIndex="enabled"
+              align="center"
+              render={(text: Boolean) => {
+                return text ? (
+                  <Tag color="green">enabled</Tag>
+                ) : (
+                  <Tag color="red">disabled</Tag>
+                );
+              }}
+            />
+            <Column
+              title="Nameservers"
+              dataIndex="nameservers"
+              align="center"
+              render={(nameservers: NameServer[]) => (
+                <>
+                  {nameservers.map((nameserver) => (
+                    <Tag key={nameserver.ip}>{nameserver.ip}</Tag>
+                  ))}
+                </>
+              )}
+            />
+            <Column
+              title="All domains"
+              dataIndex="primary"
+              align="center"
+              render={(text: Boolean) => {
+                return text ? <Tag color="blue">yes</Tag> : <Tag>no</Tag>;
+              }}
+            />
+            <Column
+              title="Match domains"
+              dataIndex="domains"
+              align="center"
+              render={(text, record: NameserverGroupDataTable) => {
+                return renderPopoverDomains(text, record.domains, record);
+              }}
+            />
+            <Column
+              title="Groups"
+              dataIndex="groupsCount"
+              align="center"
+              render={(text, record: NameserverGroupDataTable) => {
+                return renderPopoverGroups(text, record.groups, record);
+              }}
+            />
+            <Column
+              title=""
+              align="center"
+              width="30px"
+              render={(text, record) => {
+                return (
+                  <Dropdown
+                    trigger={["click"]}
+                    overlay={actionsMenu}
+                    onOpenChange={(visible) => {
+                      if (visible)
+                        setNsGroupToAction(record as NameserverGroupDataTable);
+                    }}
+                  >
+                    <Button type="text">
+                      <Space>
+                        <EllipsisOutlined />
+                      </Space>
+                    </Button>
+                  </Dropdown>
+                );
+              }}
+            />
+          </Table>
+          {showTutorial && (
+            <Space
+              direction="vertical"
+              size="small"
+              align="center"
+              style={{
+                display: "flex",
+                padding: "45px 15px",
+                justifyContent: "center",
+              }}
+            >
+              <Paragraph
+                type="secondary"
+                style={{ textAlign: "center", whiteSpace: "pre-line" }}
+              >
+                It looks like you don't have any nameservers. {"\n"}
+                Get started by adding one to your network!
+              </Paragraph>
+              <Button type="primary" onClick={onClickAddNewNSGroup}>
+                Add Nameserver
+              </Button>
+            </Space>
+          )}
+        </Card>
+      </Space>
+    </>
+  );
+};
+
+export default Nameservers;
diff --git a/src/views/Peers.tsx b/src/views/Peers.tsx
index df0fc8b..e1ba129 100644
--- a/src/views/Peers.tsx
+++ b/src/views/Peers.tsx
@@ -13,6 +13,7 @@ import {
 } from "@ant-design/icons";
 import {
   Alert,
+  Badge,
   Button,
   Card,
   Col,
@@ -92,26 +93,6 @@ export const Peers = () => {
     { label: "All", value: "all" },
   ];
 
-  const itemsMenuAction = [
-    {
-      key: "view",
-      label: (
-        <Button type="text" block onClick={() => onClickViewPeer()}>
-          View
-        </Button>
-      ),
-    },
-    {
-      key: "delete",
-      label: (
-        <Button type="text" onClick={() => showConfirmDelete()}>
-          Delete
-        </Button>
-      ),
-    },
-  ];
-  const actionsMenu = <Menu items={itemsMenuAction}></Menu>;
-
   const transformDataTable = (d: Peer[]): PeerDataTable[] => {
     return d.map((p) => {
       const gs = groups
@@ -132,13 +113,13 @@ export const Peers = () => {
   };
 
   useEffect(() => {
-    if(users) {
-      let currentUser = users.find((user) => user.is_current)
-      if(currentUser) {
+    if (users) {
+      let currentUser = users.find((user) => user.is_current);
+      if (currentUser) {
         setIsAdmin(currentUser.role === "admin");
       }
     }
-  }, [users])
+  }, [users]);
 
   const refresh = () => {
     dispatch(
@@ -339,10 +320,11 @@ export const Peers = () => {
     setOptionOnOff(value);
   };
 
-  const showConfirmDelete = () => {
+  const showConfirmDelete = (record: PeerDataTable) => {
+    setPeerToAction(record);
     let peerRoutes: string[] = [];
     routes.forEach((r) => {
-      if (r.peer == peerToAction?.id) {
+      if (r.peer == record?.id) {
         peerRoutes.push(r.network_id);
       }
     });
@@ -397,7 +379,7 @@ export const Peers = () => {
         </div>
       );
     }
-    let name = peerToAction ? peerToAction.name : "";
+    let name = record ? record.name : "";
     confirmModal.confirm({
       icon: <ExclamationCircleOutlined />,
       title: <span className="font-500">Delete peer {name}</span>,
@@ -407,7 +389,7 @@ export const Peers = () => {
         dispatch(
           peerActions.deletedPeer.request({
             getAccessTokenSilently: getTokenSilently,
-            payload: peerToAction && peerToAction.id ? peerToAction.id! : "",
+            payload: record && record.id ? record.id! : "",
           })
         );
       },
@@ -581,6 +563,26 @@ export const Peers = () => {
   };
 
   const renderName = (peer: PeerDataTable) => {
+    let status = (
+      <Badge
+        size={"small"}
+        status={peer.connected ? "success" : "error"}
+        style={{
+          margin: "0",
+          minWidth: "max-content",
+        }}
+        text={peer.name}
+      ></Badge>
+    );
+
+    let loginExpire = peer.login_expired ? (
+      <Tooltip title="The peer is offline and needs to be re-authenticated because its login has expired ">
+        <Tag color="orange">needs login</Tag>
+      </Tooltip>
+    ) : (
+      ""
+    );
+
     const userEmail = users?.find((u) => u.id === peer.user_id)?.email;
     let expiry = !peer.login_expiration_enabled ? (
       <div>
@@ -593,17 +595,20 @@ export const Peers = () => {
     ) : null;
     if (!userEmail) {
       return (
-        <Button
-          type="text"
-          style={{ height: "auto", whiteSpace: "normal", textAlign: "left" }}
-          onClick={() => setUpdateGroupsVisible(peer, true)}
-        >
-          <span style={{ textAlign: "left" }}>
-            <Row>
-              <Text className="font-500">{peer.name}</Text>
-            </Row>
-          </span>
-        </Button>
+        <>
+          <Button
+            type="text"
+            style={{ height: "auto", whiteSpace: "normal", textAlign: "left" }}
+            onClick={() => setUpdateGroupsVisible(peer, true)}
+          >
+            <span style={{ textAlign: "left" }}>
+              <Row>
+                <Text className="font-500"> {status}</Text>
+              </Row>
+              <Row>{loginExpire}</Row>
+            </span>
+          </Button>
+        </>
       );
     }
     return (
@@ -615,12 +620,14 @@ export const Peers = () => {
         >
           <span style={{ textAlign: "left" }}>
             <Row>
-              <Text className="font-500">{peer.name}</Text>
+              <Text className="font-500"> {status}</Text>
             </Row>
             <Row>
               <Text type="secondary">{userEmail}</Text>
             </Row>
-            <Row>{expiry}</Row>
+            <Row style={{ minWidth: "195px" }}>
+              {expiry} {loginExpire}
+            </Row>
           </span>
         </Button>
       </div>
@@ -635,10 +642,17 @@ export const Peers = () => {
             <Row>
               <Col span={24}>
                 <Title className="page-heading">Peers</Title>
-                <Paragraph type={"secondary"}>
-                  A list of all the machines in your account including their
-                  name, IP and status.
-                </Paragraph>
+                {peers.length ? (
+                  <Paragraph>
+                    A list of all the machines in your account including their
+                    name, IP and status.
+                  </Paragraph>
+                ) : (
+                  <Paragraph type={"secondary"}>
+                    A list of all the machines in your account including their
+                    name, IP and status.
+                  </Paragraph>
+                )}
 
                 <Space
                   direction="vertical"
@@ -763,28 +777,6 @@ export const Peers = () => {
                             return renderAddress(record);
                           }}
                         />
-                        <Column
-                          title="Status"
-                          dataIndex="connected"
-                          align="center"
-                          render={(text, record: PeerDataTable, index) => {
-                            let status = text ? (
-                              <Tag color="green">online</Tag>
-                            ) : (
-                              <Tag color="red">offline</Tag>
-                            );
-
-                            if (record.login_expired) {
-                              return (
-                                <Tooltip title="The peer is offline and needs to be re-authenticated because its login has expired ">
-                                  <Tag color="orange">needs login</Tag>
-                                </Tooltip>
-                              );
-                            }
-
-                            return status;
-                          }}
-                        />
                         <Column
                           title="Groups"
                           dataIndex="groupsCount"
@@ -853,26 +845,32 @@ export const Peers = () => {
                             return formatOS(text);
                           }}
                         />
-                        <Column title="Version" dataIndex="version" />
+                        <Column
+                          title="Version"
+                          dataIndex="version"
+                          render={(text, record, index) => {
+                            if (text === "development") {
+                              return "dev";
+                            }
+                            return text;
+                          }}
+                        />
                         <Column
                           title=""
                           align="center"
                           render={(text, record, index) => {
                             return (
-                              <Dropdown
-                                trigger={["click"]}
-                                overlay={actionsMenu}
-                                onOpenChange={(visible) => {
-                                  if (visible)
-                                    setPeerToAction(record as PeerDataTable);
+                              <Button
+                                type="text"
+                                style={{
+                                  color: "rgba(210, 64, 64, 0.85)",
                                 }}
+                                onClick={() =>
+                                  showConfirmDelete(record as PeerDataTable)
+                                }
                               >
-                                <Button type="text">
-                                  <Space>
-                                    <EllipsisOutlined />
-                                  </Space>
-                                </Button>
-                              </Dropdown>
+                                Delete
+                              </Button>
                             );
                           }}
                         />
diff --git a/src/views/Routes.tsx b/src/views/Routes.tsx
index 9b96af7..844c1cb 100644
--- a/src/views/Routes.tsx
+++ b/src/views/Routes.tsx
@@ -574,10 +574,19 @@ export const Routes = () => {
         <Row>
           <Col span={24}>
             <Title className="page-heading">Network Routes</Title>
-            <Paragraph type="secondary">
-              Network routes allow you to create routes to access other networks
-              without installing NetBird on every resource.
-            </Paragraph>
+
+            {routes.length ? (
+              <Paragraph>
+                Network routes allow you to create routes to access other
+                networks without installing NetBird on every resource.
+              </Paragraph>
+            ) : (
+              <Paragraph type={"secondary"}>
+                Network routes allow you to create routes to access other
+                networks without installing NetBird on every resource.
+              </Paragraph>
+            )}
+
             <Space
               direction="vertical"
               size="large"
diff --git a/src/views/SetupKeys.tsx b/src/views/SetupKeys.tsx
index 18faedc..8d62d1c 100644
--- a/src/views/SetupKeys.tsx
+++ b/src/views/SetupKeys.tsx
@@ -16,6 +16,7 @@ import {
   RadioChangeEvent,
   Row,
   Select,
+  Badge,
   Space,
   Table,
   Tag,
@@ -385,10 +386,17 @@ export const SetupKeys = () => {
           <Row>
             <Col span={24}>
               <Title className="page-heading">Setup Keys</Title>
-              <Paragraph type="secondary">
-                A list of all the setup keys in your account including their
-                name, state, type and expiration.
-              </Paragraph>
+              {setupKeys.length ? (
+                <Paragraph>
+                  A list of all the setup keys in your account including their
+                  name, state, type and expiration.
+                </Paragraph>
+              ) : (
+                <Paragraph type={"secondary"}>
+                  A list of all the setup keys in your account including their
+                  name, state, type and expiration.
+                </Paragraph>
+              )}
               <Space
                 direction="vertical"
                 size="large"
@@ -555,7 +563,7 @@ export const SetupKeys = () => {
                         sorter={(a, b) =>
                           (a as any).name.localeCompare((b as any).name)
                         }
-                        render={(text, record, index) => {
+                        render={(text, record: any, index) => {
                           return (
                             <Button
                               type="text"
@@ -565,7 +573,21 @@ export const SetupKeys = () => {
                               className="tooltip-label"
                             >
                               {" "}
-                              <Text className="font-500">{text}</Text>
+                              <Text className="font-500">
+                                <Badge
+                                  size={"small"}
+                                  status={
+                                    record.state === "valid"
+                                      ? "success"
+                                      : "error"
+                                  }
+                                  style={{
+                                    margin: "0",
+                                    minWidth: "max-content",
+                                  }}
+                                  text={text}
+                                ></Badge>
+                              </Text>
                             </Button>
                           );
                         }}
@@ -630,20 +652,6 @@ export const SetupKeys = () => {
                           return formatDate(text);
                         }}
                       />
-                      <Column
-                        title="State"
-                        dataIndex="state"
-                        render={(text, record, index) => {
-                          return text === "valid" ? (
-                            <Tag color="green">{text}</Tag>
-                          ) : (
-                            <Tag color="red">{text}</Tag>
-                          );
-                        }}
-                        sorter={(a, b) =>
-                          (a as any).state.localeCompare((b as any).state)
-                        }
-                      />
                       <Column
                         title=""
                         align="center"