From 92339d03aba98e08646a504bd461627cedfd0fb2 Mon Sep 17 00:00:00 2001
From: Matthew Birtch <mattbirtch@gmail.com>
Date: Tue, 13 Jan 2026 15:34:20 -0500
Subject: [PATCH] [MM-67044] Update connected workspaces empty state
 illustrations (#34820)

* update illustration and spacing

* updated illustrations

* Update controls.tsx
---
 .../secure_connections/building.svg.tsx       | 602 +++++++++++-------
 .../secure_connections/chat.svg.tsx           | 172 ++++-
 .../secure_connections/controls.tsx           |  13 +-
 3 files changed, 509 insertions(+), 278 deletions(-)

diff --git a/webapp/channels/src/components/admin_console/secure_connections/building.svg.tsx b/webapp/channels/src/components/admin_console/secure_connections/building.svg.tsx
index 4512f28717c..ba3b26b6b2b 100644
--- a/webapp/channels/src/components/admin_console/secure_connections/building.svg.tsx
+++ b/webapp/channels/src/components/admin_console/secure_connections/building.svg.tsx
@@ -6,285 +6,411 @@ import React from 'react';
 function BuildingSvg() {
     return (
         <svg
-            width='133'
-            height='106'
-            viewBox='0 0 133 106'
+            width='136'
+            height='105'
+            viewBox='0 0 136 105'
             fill='none'
             xmlns='http://www.w3.org/2000/svg'
         >
-            <rect
-                x='32.5'
-                y='0.5'
-                width='68.5'
-                height='105'
-                rx='4'
-                fill='#FFBC1F'
+            <path
+                fillRule='evenodd'
+                clipRule='evenodd'
+                d='M106.534 105C119.472 94.0855 127.691 77.7525 127.691 59.5C127.691 26.6391 101.052 0 68.1909 0C35.33 0 8.69092 26.6391 8.69092 59.5C8.69092 77.7525 16.9097 94.0855 29.8483 105H106.534Z'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.08'
+            />
+            <path
+                d='M133.265 57L133.265 48.2903L22.4626 48.2903L22.4625 38.5L6.26504 38.5'
+                stroke='var(--center-channel-color)'
+                strokeOpacity='0.24'
+                strokeLinecap='round'
+            />
+            <path
+                d='M77.7324 19.9756L77.7324 36.0406L61.9649 36.0406'
+                stroke='var(--center-channel-color)'
+                strokeOpacity='0.24'
+                strokeLinecap='round'
+            />
+            <ellipse
+                cx='1.4875'
+                cy='1.4875'
+                rx='1.4875'
+                ry='1.4875'
+                transform='matrix(-1 -1.74846e-07 -1.74846e-07 1 134.83 56)'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.48'
+            />
+            <ellipse
+                cx='1.4875'
+                cy='1.4875'
+                rx='1.4875'
+                ry='1.4875'
+                transform='matrix(-1 -1.74846e-07 -1.74846e-07 1 79.2202 17)'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.48'
+            />
+            <ellipse
+                cx='1.4875'
+                cy='1.4875'
+                rx='1.4875'
+                ry='1.4875'
+                transform='matrix(-1 -1.74846e-07 -1.74846e-07 1 7.74023 37)'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.48'
+            />
+            <path
+                fillRule='evenodd'
+                clipRule='evenodd'
+                d='M18.7651 66H35.7651V105H22.7651H18.7651H15.7651H12.7651H5.76514V75.9574H15.7651V84.2553H18.7651V66ZM115.765 66H98.7651V105H110.765H115.765H118.765H121.765H129.765V86.7447H121.765V76.7872H115.765V66Z'
+                fill='var(--center-channel-bg)'
+            />
+            <path
+                fillRule='evenodd'
+                clipRule='evenodd'
+                d='M18.7651 66H35.7651V105H22.7651H18.7651H15.7651H12.7651H5.76514V75.9574H15.7651V84.2553H18.7651V66ZM115.765 66H98.7651V105H110.765H115.765H118.765H121.765H129.765V86.7447H121.765V76.7872H115.765V66Z'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.24'
             />
             <rect
-                x='0.5'
+                x='34.2651'
+                y='31.5'
+                width='36'
+                height='71'
+                fill='var(--center-channel-bg)'
+                stroke='var(--center-channel-color)'
+                strokeLinejoin='round'
+            />
+            <rect
+                x='31.7651'
+                y='102'
+                width='72'
+                height='3'
+                fill='var(--center-channel-bg)'
+            />
+            <rect
+                x='32.2651'
+                y='102.5'
+                width='71'
+                height='2'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+                stroke='var(--center-channel-color)'
+            />
+            <rect
+                x='32.2651'
+                y='28.5'
+                width='40'
+                height='3'
+                fill='var(--center-channel-bg)'
+                stroke='var(--center-channel-color)'
+                strokeLinejoin='round'
+            />
+            <rect
+                x='32.2651'
+                y='28.5'
+                width='40'
+                height='3'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.32'
+                stroke='var(--center-channel-color)'
+                strokeLinejoin='round'
+            />
+            <rect
+                x='39.2651'
+                y='25.5'
+                width='25'
+                height='3'
+                fill='var(--center-channel-bg)'
+                stroke='var(--center-channel-color)'
+                strokeLinejoin='round'
+            />
+            <rect
+                x='39.2651'
+                y='25.5'
+                width='25'
+                height='3'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.32'
+                stroke='var(--center-channel-color)'
+                strokeLinejoin='round'
+            />
+            <rect
+                x='39.7651'
                 y='37'
-                width='132.5'
-                height='68.5'
-                rx='4'
-                fill='#CC8F00'
-            />
-            <path
-                d='M101 3.32155V103.178C100.83 104.887 100.246 105.827 99.2368 106H34.5181C33.3391 105.827 32.6699 104.887 32.5 103.178V3.32155C32.6699 1.61349 33.3391 0.672969 34.5181 0.5H99.2368C100.246 0.672969 100.83 1.61349 101 3.32155Z'
-                fill='#FFBC1F'
-            />
-            <path
-                d='M80.0115 79.0244H53.7559V105.989H80.0115V79.0244Z'
-                fill='#E8E9ED'
-            />
-            <rect
-                x='30.5'
-                y='0.5'
-                width='72.5'
+                width='25'
                 height='7'
-                rx='1.5'
-                fill='#1E325C'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
             />
             <rect
-                x='51'
-                y='75.5'
-                width='31.5'
+                x='39.7651'
+                y='48'
+                width='25'
                 height='7'
-                rx='1.5'
-                fill='#1E325C'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
             />
             <rect
-                x='66'
-                y='82'
-                width='2'
-                height='24'
-                fill='#1E325C'
+                x='39.7651'
+                y='59'
+                width='25'
+                height='7'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
             />
             <rect
-                x='6.5'
-                y='49'
-                width='8'
-                height='15.5'
-                rx='1.5'
-                fill='#7A5600'
+                x='53.7651'
+                y='43'
+                width='5'
+                height='59'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
             />
             <rect
-                x='38'
-                y='14'
+                x='39.7651'
+                y='70'
+                width='25'
+                height='7'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+            />
+            <rect
+                x='39.7651'
+                y='81'
+                width='25'
+                height='7'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+            />
+            <rect
+                x='47.7651'
+                y='94'
                 width='9'
-                height='19'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='73'
-                y='14'
-                width='9'
-                height='19'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='38'
-                y='38'
-                width='9'
-                height='19'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='38'
-                y='62'
-                width='9'
-                height='9'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='38'
-                y='75.5'
-                width='9'
-                height='9'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='38'
-                y='89'
-                width='9'
-                height='9'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='73'
-                y='38'
-                width='9'
-                height='19'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='73'
-                y='62'
-                width='9'
-                height='9'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='51'
-                y='14'
-                width='9'
-                height='19'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='86'
-                y='14'
-                width='9'
-                height='19'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='51'
-                y='38'
-                width='9'
-                height='19'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='51'
-                y='62'
-                width='9'
-                height='9'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='86'
-                y='38'
-                width='9'
-                height='19'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='86'
-                y='62'
-                width='9'
-                height='9'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='86'
-                y='75.5'
-                width='9'
-                height='9'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='86'
-                y='89'
-                width='9'
-                height='9'
-                rx='1.5'
-                fill='#CC8F00'
-            />
-            <rect
-                x='107'
-                y='49'
-                width='8'
-                height='15.5'
-                rx='1.5'
-                fill='#7A5600'
-            />
-            <rect
-                x='6.5'
-                y='70.5'
-                width='8'
                 height='8'
-                rx='1.5'
-                fill='#7A5600'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
             />
             <rect
-                x='107'
-                y='70.5'
-                width='8'
+                x='57.2651'
+                y='43.5'
+                width='47'
+                height='61'
+                fill='var(--center-channel-bg)'
+                stroke='var(--center-channel-color)'
+                strokeLinejoin='round'
+            />
+            <rect
+                x='57.2651'
+                y='43.5'
+                width='47'
+                height='61'
+                stroke='var(--center-channel-color)'
+                strokeLinejoin='round'
+            />
+            <rect
+                x='61.7651'
+                y='48'
+                width='7'
                 height='8'
-                rx='1.5'
-                fill='#7A5600'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
             />
             <rect
-                x='6.5'
-                y='85'
-                width='8'
+                x='81.7651'
+                y='48'
+                width='7'
                 height='8'
-                rx='1.5'
-                fill='#7A5600'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
             />
             <rect
-                x='107'
-                y='85'
-                width='8'
+                x='91.7651'
+                y='48'
+                width='7'
                 height='8'
-                rx='1.5'
-                fill='#7A5600'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
             />
             <rect
-                x='18.5'
-                y='49'
-                width='8'
-                height='15.5'
-                rx='1.5'
-                fill='#7A5600'
-            />
-            <rect
-                x='119'
-                y='49'
-                width='8'
-                height='15.5'
-                rx='1.5'
-                fill='#7A5600'
-            />
-            <rect
-                x='18.5'
-                y='70.5'
-                width='8'
+                x='71.7651'
+                y='48'
+                width='7'
                 height='8'
-                rx='1.5'
-                fill='#7A5600'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
             />
             <rect
-                x='119'
-                y='70.5'
-                width='8'
+                x='61.7651'
+                y='59'
+                width='7'
                 height='8'
-                rx='1.5'
-                fill='#7A5600'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
             />
             <rect
-                x='18.5'
-                y='85'
-                width='8'
+                x='81.7651'
+                y='59'
+                width='7'
                 height='8'
-                rx='1.5'
-                fill='#7A5600'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
             />
             <rect
-                x='119'
-                y='85'
-                width='8'
+                x='91.7651'
+                y='59'
+                width='7'
                 height='8'
-                rx='1.5'
-                fill='#7A5600'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+            />
+            <rect
+                x='71.7651'
+                y='59'
+                width='7'
+                height='8'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+            />
+            <rect
+                x='61.7651'
+                y='70'
+                width='7'
+                height='8'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+            />
+            <rect
+                x='81.7651'
+                y='70'
+                width='7'
+                height='8'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+            />
+            <rect
+                x='91.7651'
+                y='70'
+                width='7'
+                height='8'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+            />
+            <rect
+                x='71.7651'
+                y='70'
+                width='7'
+                height='8'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+            />
+            <rect
+                x='61.7651'
+                y='81'
+                width='7'
+                height='8'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+            />
+            <rect
+                x='81.7651'
+                y='81'
+                width='7'
+                height='8'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+            />
+            <rect
+                x='91.7651'
+                y='81'
+                width='7'
+                height='8'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+            />
+            <rect
+                x='71.7651'
+                y='81'
+                width='7'
+                height='8'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+            />
+            <rect
+                x='81.7651'
+                y='35'
+                width='12'
+                height='6'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.32'
+            />
+            <line
+                x1='5.76514'
+                y1='104.5'
+                x2='129.765'
+                y2='104.5'
+                stroke='var(--center-channel-color)'
+            />
+            <rect
+                x='54.2651'
+                y='40.5'
+                width='53'
+                height='3'
+                fill='var(--center-channel-bg)'
+                stroke='var(--center-channel-color)'
+                strokeLinejoin='round'
+            />
+            <rect
+                x='54.2651'
+                y='40.5'
+                width='53'
+                height='3'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.32'
+                stroke='var(--center-channel-color)'
+                strokeLinejoin='round'
+            />
+            <rect
+                x='77.2651'
+                y='92.5'
+                width='7'
+                height='12'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+                stroke='var(--center-channel-color)'
+            />
+            <rect
+                x='55.7651'
+                y='102'
+                width='51'
+                height='3'
+                fill='var(--center-channel-bg)'
+            />
+            <rect
+                x='56.2651'
+                y='102.5'
+                width='50'
+                height='2'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+                stroke='var(--center-channel-color)'
+            />
+            <rect
+                x='70.7651'
+                y='100'
+                width='21'
+                height='3'
+                fill='var(--center-channel-bg)'
+            />
+            <rect
+                x='71.2651'
+                y='100.5'
+                width='20'
+                height='2'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.16'
+                stroke='var(--center-channel-color)'
             />
         </svg>
-
     );
 }
 
diff --git a/webapp/channels/src/components/admin_console/secure_connections/chat.svg.tsx b/webapp/channels/src/components/admin_console/secure_connections/chat.svg.tsx
index f8a46aeded2..bcc74c62b9a 100644
--- a/webapp/channels/src/components/admin_console/secure_connections/chat.svg.tsx
+++ b/webapp/channels/src/components/admin_console/secure_connections/chat.svg.tsx
@@ -6,44 +6,146 @@ import React from 'react';
 function ChatSvg() {
     return (
         <svg
-            width='106'
-            height='96'
-            viewBox='0 0 106 96'
+            width='125'
+            height='97'
+            viewBox='0 0 125 97'
             fill='none'
             xmlns='http://www.w3.org/2000/svg'
         >
-            <g clipPath='url(#clip0_2795_18729)'>
-                <path
-                    d='M53.3987 14.3074H96.044C97.3213 14.2983 98.5878 14.5437 99.7708 15.0297C100.954 15.5156 102.03 16.2324 102.938 17.139C103.846 18.0455 104.567 19.124 105.06 20.3125C105.554 21.501 105.81 22.7762 105.814 24.0648V68.6825C105.809 69.9703 105.552 71.2443 105.058 72.4317C104.564 73.6191 103.842 74.6964 102.934 75.6019C102.027 76.5074 100.951 77.2234 99.7686 77.7087C98.5862 78.194 97.3205 78.4391 96.044 78.43H85.7857V95.1851L70.3787 78.43H53.3987C52.1223 78.4391 50.8565 78.194 49.6742 77.7087C48.4918 77.2234 47.4159 76.5074 46.5083 75.6019C45.6007 74.6964 44.8792 73.6191 44.3851 72.4317C43.891 71.2443 43.634 69.9703 43.6289 68.6825V24.0648C43.6327 22.7762 43.8888 21.501 44.3823 20.3125C44.8758 19.124 45.5972 18.0455 46.5049 17.139C47.4126 16.2324 48.4889 15.5156 49.6719 15.0297C50.8549 14.5437 52.1214 14.2983 53.3987 14.3074Z'
-                    fill='#1E325C'
-                />
-                <path
-                    d='M79.4755 0.893798H9.91436C8.63706 0.884709 7.37058 1.13017 6.18755 1.61609C5.00453 2.10201 3.92826 2.81882 3.02053 3.72539C2.1128 4.63196 1.39147 5.71046 0.89793 6.89897C0.404391 8.08747 0.148358 9.36258 0.144531 10.6512V55.2295C0.149641 56.5173 0.40662 57.7913 0.900733 58.9787C1.39485 60.1661 2.11639 61.2434 3.02399 62.1489C3.93159 63.0544 5.0074 63.7704 6.18979 64.2557C7.37218 64.741 8.63788 64.9861 9.91436 64.977H20.1825V81.7321L35.5895 64.977H79.4755C80.752 64.9861 82.0177 64.741 83.2001 64.2557C84.3824 63.7704 85.4583 63.0544 86.3659 62.1489C87.2735 61.2434 87.995 60.1661 88.4891 58.9787C88.9833 57.7913 89.2402 56.5173 89.2453 55.2295V10.6512C89.2415 9.36258 88.9855 8.08747 88.4919 6.89897C87.9984 5.71046 87.2771 4.63196 86.3693 3.72539C85.4616 2.81882 84.3853 2.10201 83.2023 1.61609C82.0193 1.13017 80.7528 0.884709 79.4755 0.893798Z'
-                    fill='#FFBC1F'
-                />
-                <path
-                    d='M20.9636 26.5684C22.2031 26.5664 23.4152 26.9355 24.4465 27.629C25.4779 28.3224 26.2821 29.309 26.7573 30.4638C27.2325 31.6186 27.3573 32.8897 27.116 34.1161C26.8746 35.3425 26.278 36.4691 25.4016 37.3533C24.5252 38.2374 23.4085 38.8393 22.1928 39.0828C20.977 39.3262 19.717 39.2003 18.5723 38.7209C17.4276 38.2415 16.4497 37.4302 15.7623 36.3898C15.0749 35.3493 14.709 34.1265 14.7109 32.8762C14.7135 31.2041 15.3731 29.6011 16.5452 28.4188C17.7172 27.2364 19.3061 26.571 20.9636 26.5684Z'
-                    fill='white'
-                />
-                <path
-                    d='M44.7136 26.5684C45.9531 26.5664 47.1652 26.9355 48.1965 27.629C49.2279 28.3224 50.0321 29.309 50.5073 30.4638C50.9825 31.6186 51.1073 32.8897 50.866 34.1161C50.6247 35.3425 50.028 36.4691 49.1516 37.3533C48.2752 38.2374 47.1585 38.8393 45.9428 39.0828C44.727 39.3262 43.467 39.2003 42.3223 38.7209C41.1776 38.2415 40.1997 37.4302 39.5123 36.3898C38.8249 35.3493 38.459 34.1265 38.4609 32.8762C38.4635 31.2041 39.1231 29.6011 40.2952 28.4188C41.4672 27.2364 43.0561 26.571 44.7136 26.5684Z'
-                    fill='white'
-                />
-                <path
-                    d='M68.4636 26.5684C69.703 26.5664 70.9152 26.9355 71.9465 27.629C72.9779 28.3224 73.7821 29.309 74.2573 30.4638C74.7325 31.6186 74.8573 32.8897 74.616 34.1161C74.3747 35.3425 73.778 36.4691 72.9016 37.3533C72.0252 38.2374 70.9085 38.8393 69.6928 39.0828C68.477 39.3262 67.2171 39.2003 66.0724 38.7209C64.9276 38.2415 63.9497 37.4302 63.2623 36.3898C62.5749 35.3493 62.209 34.1265 62.2109 32.8762C62.2135 31.2041 62.8731 29.6011 64.0452 28.4188C65.2172 27.2364 66.8061 26.571 68.4636 26.5684Z'
-                    fill='white'
-                />
-            </g>
-            <defs>
-                <clipPath id='clip0_2795_18729'>
-                    <rect
-                        width='105.553'
-                        height='94.2128'
-                        fill='white'
-                        transform='translate(0.222656 0.893555)'
-                    />
-                </clipPath>
-            </defs>
+            <rect
+                opacity='0.08'
+                width='50'
+                height='50'
+                rx='2'
+                fill='var(--button-bg)'
+            />
+            <rect
+                opacity='0.12'
+                x='30'
+                y='50'
+                width='95'
+                height='28'
+                rx='2'
+                fill='var(--button-bg)'
+            />
+            <circle
+                cx='95.5'
+                cy='32.5'
+                r='2.5'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.48'
+            />
+            <circle
+                cx='109'
+                cy='32.5'
+                r='2.5'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.48'
+            />
+            <circle
+                cx='122.5'
+                cy='32.5'
+                r='2.5'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.48'
+            />
+            <path
+                d='M95.0443 87.1199L105 97V46C105 44.8954 104.105 44 103 44H55C53.8954 44 53 44.8954 53 46V84.5395C53 85.644 53.8954 86.5395 55 86.5395H93.6355C94.1633 86.5395 94.6697 86.7481 95.0443 87.1199Z'
+                fill='var(--indigo-400)'
+            />
+            <path
+                d='M67 65H97'
+                stroke='var(--center-channel-bg)'
+                strokeLinecap='round'
+            />
+            <path
+                d='M67 72H86'
+                stroke='var(--center-channel-bg)'
+                strokeLinecap='round'
+            />
+            <path
+                d='M67 59H77'
+                stroke='var(--center-channel-bg)'
+                strokeLinecap='round'
+            />
+            <path
+                d='M80 59H93'
+                stroke='var(--center-channel-bg)'
+                strokeLinecap='round'
+            />
+            <path
+                d='M27.605 69.5638L14 83V14C14 12.8954 14.8954 12 16 12H82C83.1046 12 84 12.8954 84 14V66.9868C84 68.0914 83.1046 68.9868 82 68.9868H29.0103C28.4842 68.9868 27.9793 69.1941 27.605 69.5638Z'
+                fill='var(--center-channel-bg)'
+            />
+            <path
+                d='M16 12.5H82C82.8284 12.5 83.5 13.1716 83.5 14V66.9873C83.4998 67.8155 82.8283 68.4873 82 68.4873H29.0107C28.3532 68.4873 27.7218 68.746 27.2539 69.208L14.5 81.8027V14C14.5 13.1716 15.1716 12.5 16 12.5Z'
+                stroke='var(--center-channel-color)'
+                strokeOpacity='0.8'
+            />
+            <circle
+                cx='32'
+                cy='31'
+                r='9'
+                fill='var(--center-channel-color)'
+                fillOpacity='0.32'
+            />
+            <path
+                d='M47 27H63'
+                stroke='var(--center-channel-color)'
+                strokeOpacity='0.48'
+                strokeLinecap='round'
+            />
+            <path
+                d='M24 51H74'
+                stroke='var(--center-channel-color)'
+                strokeOpacity='0.48'
+                strokeLinecap='round'
+            />
+            <path
+                d='M24 58H46'
+                stroke='var(--center-channel-color)'
+                strokeOpacity='0.48'
+                strokeLinecap='round'
+            />
+            <path
+                d='M47 33H72'
+                stroke='var(--center-channel-color)'
+                strokeOpacity='0.48'
+                strokeLinecap='round'
+            />
+            <path
+                d='M24 45H41'
+                stroke='var(--center-channel-color)'
+                strokeOpacity='0.48'
+                strokeLinecap='round'
+            />
+            <path
+                d='M45 45H63'
+                stroke='var(--center-channel-color)'
+                strokeOpacity='0.48'
+                strokeLinecap='round'
+            />
+            <path
+                d='M9 39.5L9 58L19.5 58'
+                stroke='var(--center-channel-color)'
+                strokeOpacity='0.8'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M9 36.5L9 30.5'
+                stroke='var(--center-channel-color)'
+                strokeOpacity='0.8'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
+            <path
+                d='M9 27.5L9 25.5'
+                stroke='var(--center-channel-color)'
+                strokeOpacity='0.8'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+            />
         </svg>
     );
 }
diff --git a/webapp/channels/src/components/admin_console/secure_connections/controls.tsx b/webapp/channels/src/components/admin_console/secure_connections/controls.tsx
index 693308db710..26cd67fc469 100644
--- a/webapp/channels/src/components/admin_console/secure_connections/controls.tsx
+++ b/webapp/channels/src/components/admin_console/secure_connections/controls.tsx
@@ -63,9 +63,11 @@ export const AdminSection = styled.section.attrs({className: 'AdminPanel'})`
 export const PlaceholderHeading = styled.h4`
     && {
         font-size: 20px;
+        font-family: 'Metropolis', sans-serif;
         font-weight: 600;
         line-height: 28px;
         margin-bottom: 4px;
+        margin-top: 0;
     }
 `;
 
@@ -88,14 +90,15 @@ export const PlaceholderContainer = styled.div`
     display: flex;
     place-items: center;
     flex-direction: column;
-    gap: 5px;
-
-    svg {
-        margin: 30px 30px 20px;
-    }
+    gap: 24px;
 
     hgroup {
         text-align: center;
+
+        p {
+            color: rgba(var(--center-channel-color-rgb), 0.75);
+            margin-bottom: 0;
+        }
     }
 `;