diff --git a/net/web/src/admin/dashboard/Dashboard.jsx b/net/web/src/admin/dashboard/Dashboard.jsx
index 6f4659d4..ae851ce1 100644
--- a/net/web/src/admin/dashboard/Dashboard.jsx
+++ b/net/web/src/admin/dashboard/Dashboard.jsx
@@ -22,30 +22,54 @@ export function Dashboard({ token, config, logout }) {
       <div class="container">
         <div class="header">
           <div class="label">Accounts</div>
-          <div class="settings">
-            <Tooltip placement="topRight" title="Reload Accounts"> 
-              <SettingsButton type="text" size="small" icon={<ReloadOutlined />}
-                  onClick={() => actions.getAccounts()}></SettingsButton>
-            </Tooltip>
-          </div>
-          <div class="settings">
-            <Tooltip placement="topRight" title="Configure Server"> 
-              <SettingsButton type="text" size="small" icon={<SettingOutlined />}
-                  onClick={() => actions.setShowSettings(true)}></SettingsButton>
-            </Tooltip>
-          </div>
-          <div class="settings">
-            <Tooltip placement="topRight" title="Logout"> 
-              <SettingsButton type="text" size="small" icon={<LogoutOutlined />}
-                  onClick={() => logout()}></SettingsButton>
-            </Tooltip>
-          </div>
-          <div class="add">
-            <Tooltip placement="topRight" title="Create Account Link"> 
-              <AddButton type="text" size="large" icon={<UserAddOutlined />}
-                  loading={state.createBusy} onClick={() => actions.setCreateLink()}></AddButton>
-            </Tooltip>
-          </div>
+          { state.display === 'small' && (
+            <>
+              <div class="settings">
+                  <SettingsButton type="text" size="small" icon={<ReloadOutlined />}
+                      onClick={() => actions.getAccounts()}></SettingsButton>
+              </div>
+              <div class="settings">
+                  <SettingsButton type="text" size="small" icon={<SettingOutlined />}
+                      onClick={() => actions.setShowSettings(true)}></SettingsButton>
+              </div>
+              <div class="settings">
+                  <SettingsButton type="text" size="small" icon={<LogoutOutlined />}
+                      onClick={() => logout()}></SettingsButton>
+              </div>
+              <div class="add">
+                  <AddButton type="text" size="large" icon={<UserAddOutlined />}
+                      loading={state.createBusy} onClick={() => actions.setCreateLink()}></AddButton>
+              </div>
+            </>
+          )}
+          { state.display !== 'small' && (
+            <>
+              <div class="settings">
+                <Tooltip placement="topRight" title="Reload Accounts"> 
+                  <SettingsButton type="text" size="small" icon={<ReloadOutlined />}
+                      onClick={() => actions.getAccounts()}></SettingsButton>
+                </Tooltip>
+              </div>
+              <div class="settings">
+                <Tooltip placement="topRight" title="Configure Server"> 
+                  <SettingsButton type="text" size="small" icon={<SettingOutlined />}
+                      onClick={() => actions.setShowSettings(true)}></SettingsButton>
+                </Tooltip>
+              </div>
+              <div class="settings">
+                <Tooltip placement="topRight" title="Logout"> 
+                  <SettingsButton type="text" size="small" icon={<LogoutOutlined />}
+                      onClick={() => logout()}></SettingsButton>
+                </Tooltip>
+              </div>
+              <div class="add">
+                <Tooltip placement="topRight" title="Create Account Link"> 
+                  <AddButton type="text" size="large" icon={<UserAddOutlined />}
+                      loading={state.createBusy} onClick={() => actions.setCreateLink()}></AddButton>
+                </Tooltip>
+              </div>
+            </>
+          )}
         </div>
 
         <div class="body">
diff --git a/net/web/src/admin/dashboard/accountItem/AccountItem.jsx b/net/web/src/admin/dashboard/accountItem/AccountItem.jsx
index 159297c5..18f576b6 100644
--- a/net/web/src/admin/dashboard/accountItem/AccountItem.jsx
+++ b/net/web/src/admin/dashboard/accountItem/AccountItem.jsx
@@ -23,23 +23,6 @@ export function AccountItem({ token, item, remove }) {
     navigator.clipboard.writeText(value);
   };
 
-  const Enable = () => {
-    if (state.disabled) {
-      return (
-        <Tooltip placement="topLeft" title="Enable Account">
-          <EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
-              loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton>
-        </Tooltip>
-      )
-    }
-    return (
-      <Tooltip placement="topLeft" title="Disable Account">
-        <DisableButton type="text" size="large" icon={<CloseCircleOutlined />}
-              loading={state.statusBusy} onClick={() => actions.setStatus(true)}></DisableButton>
-      </Tooltip>
-    )
-  }
-
   const accessLink = () => {
     return window.location.origin + '/#/login?access=' + state.accessToken;
   };
@@ -54,15 +37,46 @@ export function AccountItem({ token, item, remove }) {
         <div class="guid">{ state.guid }</div>
       </div>
       <div class="control">
-        <Tooltip placement="topLeft" title="Account Login Link">
-          <ResetButton type="text" size="large" icon={<UnlockOutlined />}
-              loading={state.accessBusy} onClick={() => actions.setAccessLink()}></ResetButton>
-        </Tooltip>
-        <Enable />
-        <Tooltip placement="topLeft" title="Delete Account">
-          <DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}
-              loading={state.removeBusy} onClick={removeAccount}></DeleteButton>
-        </Tooltip>
+        { state.display === 'small' && (
+          <>
+            <ResetButton type="text" size="large" icon={<UnlockOutlined />}
+                loading={state.accessBusy} onClick={() => actions.setAccessLink()}></ResetButton>
+            { state.disabled && (
+              <EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
+                  loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton>
+            )}
+            { !state.disabled && (
+              <DisableButton type="text" size="large" icon={<CloseCircleOutlined />}
+                    loading={state.statusBusy} onClick={() => actions.setStatus(true)}></DisableButton>
+            )}
+            <DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}
+                loading={state.removeBusy} onClick={removeAccount}></DeleteButton>
+          </>
+        )}
+        { state.display !== 'small' && (
+          <>
+            <Tooltip placement="topLeft" title="Account Login Link">
+              <ResetButton type="text" size="large" icon={<UnlockOutlined />}
+                  loading={state.accessBusy} onClick={() => actions.setAccessLink()}></ResetButton>
+            </Tooltip>
+            { state.disabled && (
+              <Tooltip placement="topLeft" title="Enable Account">
+                <EnableButton type="text" size="large" icon={<CheckCircleOutlined />}
+                    loading={state.statusBusy} onClick={() => actions.setStatus(false)}></EnableButton>
+              </Tooltip>
+            )}
+            { !state.disabled && (
+              <Tooltip placement="topLeft" title="Disable Account">
+                <DisableButton type="text" size="large" icon={<CloseCircleOutlined />}
+                      loading={state.statusBusy} onClick={() => actions.setStatus(true)}></DisableButton>
+              </Tooltip>
+            )}
+            <Tooltip placement="topLeft" title="Delete Account">
+              <DeleteButton type="text" size="large" icon={<UserDeleteOutlined />}
+                  loading={state.removeBusy} onClick={removeAccount}></DeleteButton>
+            </Tooltip>
+          </>
+        )}
       </div>
       <Modal title="Access Account Link" visible={state.showAccess} centered width="fitContent"
           footer={[ <Button type="primary" onClick={() => actions.setShowAccess(false)}>OK</Button> ]}
diff --git a/net/web/src/admin/dashboard/accountItem/useAccountItem.hook.js b/net/web/src/admin/dashboard/accountItem/useAccountItem.hook.js
index eb6687bb..bc853067 100644
--- a/net/web/src/admin/dashboard/accountItem/useAccountItem.hook.js
+++ b/net/web/src/admin/dashboard/accountItem/useAccountItem.hook.js
@@ -1,7 +1,8 @@
-import { useState, useEffect } from 'react';
+import { useContext, useState, useEffect } from 'react';
 import { getAccountImageUrl } from 'api/getAccountImageUrl';
 import { setAccountStatus } from 'api/setAccountStatus';
 import { addAccountAccess } from 'api/addAccountAccess';
+import { ViewportContext } from 'context/ViewportContext';
 
 export function useAccountItem(token, item, remove) {
   
@@ -11,6 +12,8 @@ export function useAccountItem(token, item, remove) {
     accessBusy: false,
     showAccess: false,
   });
+ 
+  const viewport = useContext(ViewportContext); 
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -28,6 +31,10 @@ export function useAccountItem(token, item, remove) {
     });
   }, [token, item]); 
 
+  useEffect(() => {
+    updateState({ display: viewport.state.display });
+  }, [viewport]);
+
   const actions = {
     setAccessLink: async () => {
       if (!state.accessBusy) {
diff --git a/net/web/src/admin/dashboard/useDashboard.hook.js b/net/web/src/admin/dashboard/useDashboard.hook.js
index dbcefeb5..8e23cc59 100644
--- a/net/web/src/admin/dashboard/useDashboard.hook.js
+++ b/net/web/src/admin/dashboard/useDashboard.hook.js
@@ -1,8 +1,9 @@
-import { useState, useEffect } from 'react';
+import { useContext, useState, useEffect } from 'react';
 import { setNodeConfig } from 'api/setNodeConfig';
 import { getNodeAccounts } from 'api/getNodeAccounts';
 import { removeAccount } from 'api/removeAccount';
 import { addAccountCreate } from 'api/addAccountCreate';
+import { ViewportContext } from 'context/ViewportContext';
 
 export function useDashboard(token, config) {
 
@@ -21,6 +22,8 @@ export function useDashboard(token, config) {
     showCreate: false,
   });
 
+  const viewport = useContext(ViewportContext);
+
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
@@ -109,6 +112,10 @@ export function useDashboard(token, config) {
     },
   };
 
+  useEffect(() => {
+    updateState({ display: viewport.state.display });
+  }, [viewport]);
+
   useEffect(() => {
     const { accountStorage, domain, keyType, enableImage, enableAudio, enableVideo } = config;
     updateState({ domain, accountStorage: Math.ceil(accountStorage / 1073741824), keyType,